Posts

Showing posts from 2013

Pure CSS3 Org-Tree with APEX List

Image
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 TemplateIf 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…

APEX 5 - New Page Builder Screenshots

Image
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.


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

Theme 25 Responsive Tabs Enhancement: CSS Patch

Image
Theme 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.

Tab More Responsive I wanted a different, more intuitive, yet still responsive implementation of the …

Theme 25 Responsive Grid Column Visualization

Image
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.)


Oracle Application Express Feature Advisory Board

Image
When logging into the Oracle Application Feature Request application you will see the following announcement:Announcing the creation of the Feature Advisory BoardA 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.

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

Image
Follow-up on my article: "Who are you?" – client device Categorizr for APEXAbout 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 ins…

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

Image
Development Team Status Report from David Peake during OGh APEX WorldUPDATE:  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 that
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 abo…

Oracle Application Express for Mobile Web Applications - Book available now

Image
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.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…