Monday, December 2, 2013

Pure CSS3 Org-Tree with APEX List

employees-tree
I found this little CSS3 snippet gem on TheCodePlayer.com: nested HTML unordered lists styled as a hierarchical tree structure just by applying some (very nifty) CSS selectors. Naturally I had to try this in APEX. With some minor modifications in the CSS and creating a simple List Template, the code works great for visualizing hierarchical data, like for the Employee/Manager relationship used in the demo.
Here the step-by-step tutorial to implement this solution in Application Express:

Nested List Template

If you have a look at the original code snippet, you will see a DIV container enclosing a simple nested list:


<div class="tree">
    <ul>
        <li>
            <a href="#">Parent</a>
            <ul>
                <li>
                    <a href="#">Child</a>
                    <ul>
                        <li>
                            <a href="#">Grand Child</a>
                        </li>
                    </ul>
                </li>
                <li>
                …
                …
                </li>
            </ul>
        </li>
    </ul>
</div>
Nested lists can easily be implemented with a List Template. I created a new template (name: Org Tree) from scratch with the following definition:

Before List Entry:

<div class="tree">
<ul>

Template Definition

List Template Current <li><a href="#LINK#">#TEXT#</a></li>
List Template Noncurrent <li><a href="#LINK#">#TEXT#</a></li>

Before Sublist Entry

<ul>

Sublist Entry

Sublist Template Current
<li><a href="#LINK#">#TEXT#</a></li>
Sublist Template Noncurrent
<li><a href="#LINK#">#TEXT#</a></li>

After Sublist Entry

</ul>

After List Entry

</ul>
</div>

The List

That’s it. Now define a hierarchical SQL query (I took the EMP example from the “Create List Wizard”) and create a List Shared Component:
list-tree01

The Page

The page is where the list and the List Template come together in a region. Use the “Create Region” wizard to add a region to your page using the list en template we just defined:
list-tree03

The CSS

I copied the original CSS snippet from TheCodePlayer.com and placed this into the Inline CSS property of my page. I had to make a minor modification, because when resizing the page (I’m using Theme 25 here) the tree structure would break. So here is the final CSS code as used in my demo page:
.tree {
  overflow-x: auto;
}
.tree ul {
  padding-top: 20px;
  position: relative;
  white-space: nowrap;
}
.tree li {
  display: inline-block;
  white-space: nowrap;
  vertical-align: top;
  margin: 0 -2px;
  text-align: center;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 0;
  transition: all .5s;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
}
/*We will use ::before and ::after to draw the connectors*/
.tree li::before,.tree li::after {
  content: '';
  position: absolute;
  top: 0;
  right: 50%;
  border-top: 1px solid #ccc;
  width: 50%;
  height: 20px;
}
.tree li::after {
  right: auto;
  left: 50%;
  border-left: 1px solid #ccc;
}
/*We need to remove left-right connectors from elements without any siblings*/
.tree li:only-child::after,.tree li:only-child::before {
  display: none;
}
/*Remove space from the top of single children*/
.tree li:only-child {
  padding-top: 0;
}
/*Remove left connector from first child and 
right connector from last child*/
.tree li:first-child::before,.tree li:last-child::after {
  border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before {
  border-right: 1px solid #ccc;
  border-radius: 0 5px 0 0;
}
.tree li:first-child::after {
  border-radius: 5px 0 0 0;
}
/*Time to add downward connectors from parents*/
.tree ul ul::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  border-left: 1px solid #ccc;
  width: 0;
  height: 20px;
}
.tree li a {
  border: 1px solid #ccc;
  padding: 5px 10px;
  text-decoration: none;
  color: #666;
  font-family: arial, verdana, tahoma;
  font-size: 11px;
  display: inline-block;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover,.tree li a:hover+ul li a {
  background: #c8e4f8;
  color: #000;
  border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.tree li a:hover+ul li::after,.tree li a:hover+ul li::before,.tree li a:hover+ul::before {
  border-color: #94a0b4;
}


themes4apex

Wednesday, November 13, 2013

APEX 5 - New Page Builder Screenshots

In a post earlier this year (APEX 5 - New features that may or may not be included) I included a self-made mock-up of the ideas that David Peake shared at the OGh APEX Day 2013 conference. By coincidence I found these screenshots from, what seems, the actual new Application Express Page Builder Interface.

APEX 5 Page Builder Screenshot
APEX 5 Page Builder - Layout Editor Screenshot

Patrick Wolf showing the Page Builder interface live @ the DOAG Conference (nov. 2013):

in-action



themes4apex

Friday, October 18, 2013

Theme 25 Responsive Tabs Enhancement: CSS Patch


rwdtabs_titleTheme 25 seems to be popular. I see a lot projects starting development with this theme. Not always because there is a need for enabling the application to be accessed on multiple different devices/screen resolutions, but because of the way you have more control of your region placement on the undelaying grid.
Apart from the grid, APEX/Theme 25 offers more responsive functionality, like form element/label adaption and the the responsive Interactive Report toolbar.
But there are components that are implemented less responsive, like the tab’s. Apart from the discussion, whether or not to use tabs, if you are using this (in my eyes convenient) feature, one would expect a user friendly responsive implementation of the tab’s.



A Little Bit Responsive

The way tab’s in Theme 25 currently react on smaller screens is: you have to scroll through the entries that are hidden outside your viewport.
rwdtabs_scroll_horz

Tab More Responsive

I wanted a different, more intuitive, yet still responsive implementation of the Theme 25 tabs, which is easy to implement in any application using the theme, even afterwards. The solution I came up with is, what I call, a CSS patch. Fortunately, Theme 25 is (almost) entirely based on CSS; no images involved for structural elements. By overwriting the theme’s CSS, I can change the visual layout, and in this case behavior of the tabs, when presented on smaller screens, using the same @media rule definitions as the Theme 25 responsive implementation.
This CSS patch transforms the tab’s into a drop down list on small screensizes. If the list/menu is closed, it shows the current tab’s name and an icon. Once tabbed, it opens and offers the whole list of tabs in the original sequence order, marking the current tab with an indicator:
rwdtabs_closed   rwdtabs_touch

How To Use

Step 1 - Download and include the CSS file in your page template

  • Download the CSS file here and copy it to a the location you prefer, either on the file system of your webserver or upload it into the workspace.
  • Reference the CSS file in your page template in the Cascading Style Sheet setting.
rwdtabs_pagetemplate

Step 2 - A little modification in your page template

Add (exactly) this DIV around the unnumbered list element in your page template Header Source:
rwdtabs_html
<div class=”rwdnav”>…</div>

Step 3 - A tiny modification in your standard tab sub template

Remove the href attribute from the Current Tab sub-template in your page templates Standard Tab Attribute setting. This is necessary, to prevent that the page is reloading as soon as you touch the responsive menu, which is showing the current tab entry.
rwdtabs_href

Enjoy!

themes4apex400

Sunday, September 29, 2013

Theme 25 Responsive Grid Column Visualization

I have written a small CSS script that enables you to visualize the 12 column responsive grid in Oracle Application Express’s Theme 25. I used it during my presentation at KScope 13. You can download the CSS file here. Install the file on your webserver or upload it into your workspace and reference the file in your page template or page. You could reference the file directly from my server too using

<link rel="stylesheet" href="http://www.themes4apex.com/blog/grid_background.css" type="text/css">

in your template, or just as URL in the template or page’s CSS URLs property.

(I uploaded an enhanced version of the CSS after the suggestion from Patrick Wolf, to only show the grid columns when the developer clicks the "Show Grid" option in the Developer Toolbar. Thanks, Patrick. I should have thought of this myself.)


grid-background

themes4apex

Friday, May 31, 2013

Oracle Application Express Feature Advisory Board

 

When logging into the Oracle Application Feature Request application you will see the following announcement:

Announcing the creation of the Feature Advisory Board

A selection of APEX community experts have agreed to be members of the Feature Advisory Board. They will assist the APEX Development Team to prioritize feature requests. The board members will be reviewing features based on the total number of votes, so please enter your votes for all of the existing features.

apex_feature_request

 

themes4apex

Wednesday, May 29, 2013

How are you? - Categorizr for APEX part 2: the Plug-in

Follow-up on my article: "Who are you?" – client device Categorizr for APEX

About a year ago I wrote an article on how to determine by what kind of device your APEX application is accessed: desktop, tablet or smartphone. The solution is based on a package interpreting the HTTP_USER_AGENT environment string.

This package (categorizr) in combination with APEX offers a few functions regarding the client device type (isDesktop, isTablet, isMobile, …) that can be used in conditions or anywhere else in your PL/SQL code. Now I wrote a complimentary plug-in to determine some viewport properties: ViewportHeight, ViewportWidth and Orientation and put these values into page items in session state, updating the values (in session state) each time the browser resizes or changes orientation. Additionally, I added a an event to trigger an (advanced) dynamic action: Categorizer Resize Event.

In fact, both components, the package and the plug-in, can be installed and used separate. But when installed together, the categorizr package offers a two new functions:

  • FUNCTION isLandscape RETURN BOOLEAN;
  • FUNCTION isPortrait RETURN BOOLEAN;

and three global package variables:

  • g_viewportWidth
  • g_viewportHeight
  • g_viewportOrientation

Installation

Just install the plug-in by importing the file categorizr-plugin.sql.

Install the package by running the categorizr-package.sql in the database schema associated with your application.

Usage

This region plug-in is ideally used in page 0/global page but can be used in just one or more designated pages, as long as you do not combine both approaches.

Create a new region of type plug-in and choose “Categorizr”. Make sure you use “no template” for this region, or an empty region will be displayed on your page(s).

categorizr1

The plug-in has three attributes to specify the names of the (hidden) page items to create for holding the viewport width, height en orientation. Just keep the default, which prefixes the items with the number of the current page (using the placeholder #PAGE_ID#).

categorizr2

Once having this region on your page 0, you can access the page items (i.e. P0_VIEWPORTWIDTH, …) in your SQL and PL/SQL or use the JavaScript variables viewportWidth, viewportHeight, viewportOrientation.

You can download both, the package and the plug-in here:

Package-Download
Package
addons
Plug-in

 

themes4apex

Wednesday, April 10, 2013

APEX 5 - New features that may or may not be included


Development Team Status Report from David Peake during OGh APEX World

UPDATE:  Screenshots of the new APEX 5 Page Builder Interface

Yesterday (April 9th, 2013) David Peake opened the Dutch OGh APEX World conference with a keynote presentation. As expected, he talked about the future release of Oracle Application Express, version 5. Another very interesting part of David’s presentation focused on the architectural aspects of APEX running on the upcoming 12 c release of the database. Here’s my summary. But before you start basing any business critical decisions on this blog post, I have to mention thatoracle_save_habour
  • everything I’m writing in this article, may or may not be included in future releases of Oracle products
  • is my personnel view or opinion and that I’m not related in any kind to Oracle Corporation


The APEX development team is currently in the process of investigating functionality and possible solutions to include into APEX 5, and it seems that some of the features David was talking about were more idea’s and general directions. There was no live demo, understandably, just a few screenshots and a very interesting mock-up of the builder interface.

APEX on Oracle DB 12c

APEX version 4.2 will be preinstalled in the 12c root database. All pluggable databases (PDB) of this root instance will be running the same APEX version, but are isolated instances. The first thing after installing a 12c DB, probably, is upgrading the APEX to the latest release, currently 4.2.1 (there will be a 4.2.2, David told us). Upgrading APEX in 12c, when installed in the root database will be very easy, as all PDB’s get upgraded at the same time. For upgrading an 11g APEX installation to 12c, there will be scripts provided to convert the it into a root installation.
If you want to run different version of APEX in different PDB’s on the same 12c root instance: you can. Oracle will provide scripts to remove the root installation of APEX, so you can install independent repositories and versions of APEX in each PDB. It is more administration, but as a developer, I’m glad to get this possibility.
There are some new 12c DB features, that will be supported by APEX 4.2.something:
  • VARCHAR2 32k support. As HTML text fields didn’t care much about field length anyway, this is manly an enhancement on collections.
  • Identity Columns. This means, you won’t need to specify a sequence or function to populate a PK, because this will happen automagically.
  • Invisible Columns: will not be displayed by default.No values will be inserted when basing forms on this type of columns. You can manually add code to your page to show the value of an invisible column.
  • Data Redaction. This is a feature that does not need much of a change in APEX itself, as data is masked in the database, depending on policies. But there will be a change in the SQL workshop to support administration of these policies.

APEX 5

We all know the Oracle Application Express Statement of Direction, so I don’t have to list features already mentioned there. David pointed out, that the development of APEX 5 has to main focuses:
  • Improve Developer Productivity
  • Quality
Here what drew my attention during David’s APEX 5 possible feature presentation.
  • we will be able to declarative define Modal Dialogs in APEX 5. We even can stack multiple modal dialogs.
  • the APEX dev team is thinking of enhancing the Builder interface and the concept seems to be inspired by interfaces we know from SQL Developer, JDeveloper and other similar IDE’s.
    • a tree navigation on the left hand side to access page components
    • possibility to switch to a component view instead of tree view
    • a large layout editor (welcome back) in the middle of the page with predefined components to (drag & drop) place into your page layout
    • a property editor showing the properties for the selected page region/item.
apex5_builder_concept
Revamped APEX 5 Builder Interface; Artist Impression (i.e. mine)
  • a new tabular form component based on jQGrid with inline editing ability:
apex5_jqgrid_concept
jQGrid screenshot (not from actual APEX screen)
  • PDF Printing, using APEX Listener 2.0’s FOP support. Integration will be more declarative, and the possibility to specify formatting options through templates, break control and master/detail layouts.
  • further extension of WebService capabilities, like publishing and SOA integration. Allowing to connect with remote Oracle DB’s through WS, as an (better) alternative to database links.
  • the rest pretty much was known from the SOD …

Wrapping it up

All together, I think version 5 will be a release to look forward to, from a developer perspective. It looks like, some of the current shortcomings, like master-detail-detail and multiple interactive reports on one page, will be tackled by the APEX development team. Especially the revamped builder interface is a very interesting idea, but, when keeping the current Tree View AND Component View, there will be a lot more pages/code to maintain by the dev team.
Oracle currently is working on enhancing version 4.2 (12c DB integration) as well as version 5. With 12c expected for somewhere in 2013, we can easily guess the priorities. APEX version 5 will not be as spectacular as 4.2 with respect to end-user functionality (jQM and RWD), but consolidate the development of the past years and enhance existing functionality (mobile: table support, IA Reports: multiple on one page, Master/Detail/Detail, …)

themes4apex

Wednesday, March 27, 2013

Oracle Application Express for Mobile Web Applications - Book available now

Oracle Application Express for Mobile Web Applications, written by Roel Hartman, David Peake and me, shows you step-by-step how to create your very own web application that will look and act as a native mobile application.

cover

Oracle Application Express for Mobile Web Applications is an action driven book, taking you by the hand through all required steps in building your very own web application that will run on phones, tablets, and other mobile devices. Because you’ve built every piece of it yourself, you will know exactly how every tiny part is used and how you can tweak it to your own – or your customer's – taste.
Oracle Application Express is widely known in the Oracle community as a great tool for creating web applications suitable for desktop browsers. Features have now been added to open up the world of mobile browsing, bringing the simplicity and expressiveness of Application Express to bear in developing applications to run with an almost-native look and feel on platforms such as iOS, Android, and Windows Phone.
Oracle Application Express for Mobile Web Applications helps you translate your knowledge of Oracle Application Express into developing for mobile devices. The book and its running example provide all the knowledge you need to create professional looking mobile web applications.

  • Takes you through building a mobile web application from start to finish.
  • Gives insight into the components necessary for a professional looking mobile application.
  • Helps you become an even better and more all-round Oracle Application Express developer.
What you’ll learn
  • Build mobile applications to run from iPhones, iPads, Android devices, and Windows-based phones and tablets.
  • Make enterprise reporting and business functions accessible to mobile devices.
  • Customize the look-and-feel of your mobile applications.
  • Respond to gestures such as swiping and pointing, and to changes in device orientation.
  • Enhance mobile applications through the use of plugins.
  • Deploy applications into the Apple and Android stores.
Who this book is for

Oracle Application Express for Mobile Web Applications is aimed at Oracle Application Express developers wanting to develop and deploy applications for use on mobile devices. The book is also useful to any developer in an Oracle Database environment who is looking for a cheap and cheerful way to extent business functions and reporting to mobile devices.