APEX Easter fun

This isn't really an easter egg, just more of a mild bug that makes you think - hopefully a little more about your own applications.

If you type in "0" in the page navigation bar, it takes you to the typical global page / page zero for desktop.
Instead of displaying page processing and shared components, it displays application level components - items, process, computations; and an "About" region in the third column, above recently edited pages. Useful stuff...

If you type "-0", it renders page zero detail as if it were a normal page.

If you type "-1", or any other negative number,
- in 4.2.1 it takes you into a horrible "no data found" that's annoying to recover from, similar to if you type a positive page number that doesn't exist
- in 4.2.2 it handles it a little more elegantly, a little better than it did pre 4.2 - displaying no page detail.

Harmless "fun".

Review: Oracle APEX for Mobile Web Applications

Oracle Application Express for Mobile Web Applications

If you haven't heard about this book yet, you're not reading enough media on-line.

APEX regulars Roel Hartman, Christian Rokitta and APEX product manager David Peake are the published authors, but I think it’s safe to say we can also thank Dan McGhan for starting the project.
(I mention Roel explicitly a few times where I'm pretty sure he was involved, sorry if I apply undue credit anywhere!)

I've been meaning to write this review for quite some time - I had the pleasure of technical reviewing this book & from the first chapter I knew this was going to be a winner - something very popular for anyone with half a brain that can bust out an APEX application.

Introduction to APEX for Mobile Development

Let’s be honest, the title alone sold the book for me. Mobile development is apparently kinda popular right now, as is APEX - so it seemed the perfect pair.

I think it was a great introduction to what’s expected out of mobile development, particularly through the eyes of an APEX developer. It details issues such as web vs native & responsive design. It should whet your appetite, if not - you’re in the wrong game ;-)

Creating Mobile Pages

This chapter starts of by de-constructing a basic jQuery Mobile page, which sets the scene well for the type of HTML to expect from these pages.
You are then walked through the creating of your ‘first’ mobile page using a list view and a basic form. The author then uses these to illustrate the many ways you can define navigation between pages, including a mobile dialog.
He then finishes with an intro to transitions, loading widgets and templates.

Highlights - realising the programmatic flexibility APEX can provide.

Presenting Data through List Views

As I’ve learned in a current project developing an application for a tablet - list views are a fundamental cultural shift from the desktop, providing a standard workflow construct.
This chapter details the various options APEX provides when defining these lists views.
The author also includes some sample CSS to help show how to identify then manipulate components on the page - it’s not too hard once you are shown some examples.

Highlights - advanced formatting with CSS examples; swipe to delete

Accepting Input via Forms

This chapter starts with the simplest, most common form ever - the login page. The author notes how bland the stock form is, and uses the power of CSS to tart it up.

The next most important aspect of mobile development is discussed - grid layout.
Screen real estate is also precious, so there are some examples of collapsible content.

Also included are discussions regarding HTML5 input options such as the slider & toggle switch, and ways to enhance existing selectors such as radio groups and select lists.

I keep saying things are important, but mobile is a whole new world and notifications are another example of a fundamental product feature that needs re-addressing in the mobile world.
If you’re a fan of iOS, Roel continues the chapter by showing how to customise the delete dialog box with a native looking popup; then follows it up with a much nicer success confirmation.

If that’s not enough, the chapter puts finishing touches on your ‘first’ form to make it look ultra professional - and we’re only four chapters in!

Highlights - more CSS examples, grid layout, notifications

Displaying Calendars and Charts

As if your application isn't looking sexy enough already, we can also add various charts and calendars.

Out of the box calendar’s are not too bad - but again Roel takes things a few steps further with some inspiration from iOS.

He doesn't go into too much detail with charts - they’re already pretty nifty and the APEX team are constantly working with AnyChart to ensure greater capability and conformity with various devices. Later in the chapter though he demonstrates some of the other options out there such as Highcharts & Flotcharts - which includes an example of a RESTful web-service.

The surface is also skimmed with mapping options, but I think again it’s because of the reliance on external interfaces.

Highlights - calendar enhancement

Implementing a Navigation Springboard

This chapter starts with an obvious lean towards Apple devices, but springs back to setting up a very nifty iconic menu (see what I did there?).

Roel then shows how to add tab navigation across the footer of your page - useful for certain applications but it could be considered dead real estate.
Shortly after he does detail how to move away from the typical HTML style buttons to iconic buttons in your header that you’d expect from a mobile application.

The coolest part of this chapter is a slide menu just like the one you see in Facebook mobile. He really puts list templates to work - one of my favourite APEX constructs.

Highlights - iconic menu with notification counters; sliding menu

Theming Your Mobile Application

This is a small but useful chapter describing how to turn your application from a royal blue to something more suitable to your client’s needs.

It’s also a chapter where I’ll claim a little credit for improvement. Changing swatches within templates can be tedious, so I suggested the author provide instructions to parameterise the templates with some form of substitution string - thereby making it easier to switch between swatches.

It finishes with a short piece on managing icons between devices using CSS media queries.

Highlights - media query example

Working with Dynamic Actions

Let’s face it, dynamic actions are one of the top 3 features of APEX. This is why I'm a little torn with the approach of this chapter - the first half is a simple breakdown of how dynamic actions work and how to use them, something that seemed a little below the target audience and previously presumed skill level of the reader (my perspective). I do, however, feel they’re vital to good applications and I'm glad there is another chance to show the community how they work.

The second half shows how dynamic actions have been modified for APEX 4.2, and introduces the new declarative events such as orientation change, scrolling, tapping & touching & swipes.
The author provides a few mobile specific examples of dynamic actions, then details some advanced topics such as non-standard selection types, event scope & custom events - all of which are also useful in desktop environments.

Given the style of the book so far, I was a little disappointed with this chapter - I think it had more potential than was delivered, with respect to whoever wrote this chapter.

Highlights - advanced dynamic action techniques.

Deploying Applications Natively

If you want to interact with the hardware of your device using a toolkit such as PhoneGap, you should buy this book for this chapter alone.
HTML5 is still catching up with hardware capability, and the various browsers are even further behind - so these types of interfaces allow you to embed your APEX application in a lower layer within a mobile device.

The chapter starts with a good philosophical discussion on native vs web vs hybrid applications, then describes the PhoneGap architecture.
From there it’s a step-by-step guide on configuring an Android Development environment for Cordova. iPhone users - there is also a section on cross-platform support.
It then shows how to use the PhoneGap APIs in your APEX pages using the device’s camera as an example.

Unfortunately I didn't have the time to implement an application natively during the technical review, partially because I had some laptop issues myself when this chapter was ready. The chapter is very detailed, however, and it will be front row & centre very shortly for when I do.

Highlights - all of it - I believe you can thank Christian for this one

Securing your Mobile Application

I wouldn’t consider myself an expert in security, but I have a high level of interest - a presentation I wrote on the topic won me best paper in 2011. So I was looking forward to reading the implications for mobile.

It’s a fairly concise chapter, covering SSL, idle sessions, encryption & session state protection. I think the best pages discuss application & schema splitting, getting the reader to think about these implications, but doesn’t go into a large amount of detail.

Highlights - timeout messaging techniques

Conclusion

I think the book is excellent. It covers all the topics you think you’ll need for mobile development, and packs a whole bunch more.

I will say it started strong, but tapered off towards the end - but I think that may be due to the fact books are difficult to manage, author & produce while still maintaining some sort of life. Kudos to the authors involved.

It’s a little biased towards iPhones - evident because I own an Android, but there isn't much content that requires such a device. Of course, this is the nature of the real world, and considerations need to be made when developing applications for mobile devices - what is your target market?

You will also need patience. It’s bleeding edge material that sometimes requires supplementary files or Oracle database adjustments. If you’re still learning the power of jQuery & CSS (aren't we all?) then there may be times your code isn't quite right and it might take some time to work out, but it’s part of the learning process - it just demonstrates how valuable this book is.

Well done gang.

If you're interested in more of my reviews, check this out.

Freezing the Navbar Menu plugin to top of page

Recently I blogged about a nifty CSS only menu that is a great alternative to the horrible APEX tab-sets. Unfortunately I had to ditch it for a recent project because it didn't work well on touch screen devices, so I picked up Enkitec's Navbar plugin instead.

I wanted to freeze the menu at the top of the page, so when the user scrolled down, the menu would remain at the top of the screen.
I tried doing this some time ago with a side-bar menu but came across a bunch of problems - this time round it required very little CSS to make it happen. This stackoverflow post suggested 2 lines, but my APEX example extended a touch more:

.navbar {
  position:fixed;
  width:100%;
  z-index:10000;
}
.apex_span_12, .apex_span_10 {
  margin-top:50px;
}

The key is the position fixed, width 100%, but the fixed position had some minor side effects - some objects overlapped my menu, and all existing content shifted up underneath the menu.

To fix the overlap I used z-index, which is the third dimension beyond height/width and decides which components appear above another when the position is set. I added a large z-index value so the menu always overlapped other objects I had such as a google map, CSS checkbox switches and other maps that by default went over the menu instead of under like all the APEX components.

Then I had to make sure all my regular content started underneath the menu, so this is where the margin comes in. Since I was using the responsive Theme 25, I identified those classes as the lowest common denominator for moving my content.

Depending on the page template used, it was either of those classes - basically if I had a side-bar region the apex_span_n changed. I'm happy to receive feedback on a smarter solution, but this worked for me.

I used 50 pixels, but the font in my menu is at 130% to benefit bigger fingers on the touch screen.

Hope it helps!

Scott

CSS pull down menu using APEX List

I find APEX tab sets cause all sorts of issues in applications, either through management or behaviour. A common request is to create some pull-down menus as a replacement.
There are plenty of options for this, including a number of jQuery plugins, but here is an example that uses only CSS
http://www.lwis.net/free-css-drop-down-menu/ultimate.horizontal.html
This makes it lightweight and fast.

It's easy to implement this as a list template in APEX, enabling you to source your menu from a SQL query (possibly on your page meta-data) or a static list.

You might have seen this in the past as a Sumneva presentation from Scott Spendolini, which somehow I found after encountering the LWIS site - but it did confirm a few gaps for me. It also provides a good review of Tabs vs jQuery vs CSS.

I personally had a few issues implementing this as described, but I think there are some minor bugs during the rendering if list templates.
The following example renders it fine.

Upload supporting files

Upload the following files to your workspace - downloadable here under MIT/GNU licence.
default.css
default.ultimate.css
dropdown.css

Or place them in your fileserver - whichever is appropriate.
You'll also need these images (in this example, anyway)
grad1.png
grad2.png
nav-arrow-down.png
Note no JavaScript files required.

Create list template

Create new list template from scratch (don't be scared!)

Name: CSS Horizontal Dropdown Menu
Class: Pull Down Menu or Custom n -- either would be worthwhile

Once created, edit the template and enter the following in the relevant locations, or download the template export from here and adjust the supporting file locations accordingly.

Before List Entry
"List template before rows"
Here you'll need to modify the CSS location as appropriate. In fact when loading things into the APEX workspace, default.css also needs to be included here and the @import command removed from default.ultimate.css
Likewise, the CSS needs to be modified so all the supporting images are referenced using something like
background-image: url(http://www.lwis.net/free-css-drop-down-menu/images/default/nav-arrow-down.png);
unless you come to other arrangements.
<link href="#WORKSPACE_IMAGES#default.css" media="screen" rel="stylesheet" type="text/css" />
<link href="#WORKSPACE_IMAGES#dropdown.css" media="screen" rel="stylesheet" type="text/css" />
<link href="#WORKSPACE_IMAGES#default.ultimate.css" media="screen" rel="stylesheet" type="text/css" />
<div id="navwrap">
<ul id="nav" class="dropdown dropdown-horizontal" style="margin-bottom:10px;">

<style> 
ul {
  list-style-type: none;
}

#navwrap {
  float:left;
  width:100%;
  margin-bottom:4px;
  background:#f6f6f6;
  border-style:solid;
  border-color:#d9d9d9 #d9d9d9 #d9d9d9;
  border-width:1px 1px 1px 0;
}

</style>

This also includes an override for the user agent stylesheet for unordered lists, otherwise you see bullet points instead of images.
The navwrap ID settings pushes the menu across the width of the page.

Template Definition
"List template current"
<li><a href="#LINK#">#TEXT#</a></li>

"List template current with sublist items"
<li><a style="color:black;" class="dir">#TEXT#</a><ul>

"List template non current"
<li><a href="#LINK#">#TEXT#</a></li>

"List template noncurrent with sublist items"
<li><a style="color:black;" class="dir">#TEXT#</a><ul>

Before Sublist Entry
"Sublist template before rows"
<!-- I don't believe this renders with dynamic lists!
this is why the opening UL is in the definitions above -->

Sublist Entry
"Sublist template current"
<li><a href="#LINK#">#TEXT#</a></li>

"Sublist template current with sublist items"
<li><a href="#LINK#" class="dir">#TEXT#</a>

"Sublist template noncurrent"
<li><a href="#LINK#">#TEXT#</a></li>

"Sublist template noncurrent with sublist items"
<li><a href="#LINK#" class="dir">#TEXT#</a>

After Sublist Entry
"Sublist template after rows"
</ul></li>

After List Entry
"List template after rows"
 </li></ul></div>

Prepare menu hierarchy

Before defining the region that renders the list, you need a list defined - this will be your hierarchical menu. This way it can either be a static list where you manually define the menu options, or it could be a query over your application's meta-data.

In this example I'll use a dynamic query - but before creating your list, we need to prepare the hierarchy.

I defined a few Page Groups to be my menu headings, and the allocated pages will live under the relevant drop down.

Application Builder -> Utilities -> Cross page utilities -> Page groups

Page group allocation

Create List 

Now we've prepared the meta-data, we can create a list based on a query that our list region will use.
The query is structure in three parts -

• Home link - often identified by page alias of HOME, but you could get clever with this. 

Once I embedded this into the template itself, allowing me to parameterise a logo as the home link via substitution strings

<li >
  <a href="f?p=&APP_ID.:HOME:&SESSION." style="padding:0 5px;">
    <img src="&TEMPLATE_LOCATION.logo_&APP_ALIAS..png" style="max-height:26px;"/>
</a></li>   

• Top menus - by default this are links, but I've modified these to just facilitate opening the menu - particularly for mobile devices where your finger is used instead of a mouse hover.
• Drop down options - the destination pages for your menu

So create a new dynamic list from scratch called Menu. Use the following query

select -- Link to home page
   1        lvl
  ,page_name   label
  ,'f?p='||:APP_ID||':'||page_id||':'||:APP_SESSION||'::'||:DEBUG  target
  ,null  is_current_list_entry
  ,null  image
  ,null  image_attribute
  ,null  image_alt_attribute
  ,page_alias order1
from apex_application_pages ap
where application_id = :APP_ID
and page_alias = 'HOME' -- identify however you like
union all
select -- Menu options, don't link anywhere to aid touch devices
   1        lvl
  ,page_group_name label
  ,'#' target
  ,null  is_current_list_entry
  ,null  image
  ,null  image_attribute
  ,null  image_alt_attribute
  ,page_group_name order1
from apex_application_page_groups pg
where application_id = :APP_ID
union all
select -- drop down menu options - pages belonging to groups
   2        lvl
  ,page_title   label
  ,'f?p='||:APP_ID||':'||page_id||':'||:APP_SESSION||'::'||:DEBUG  target
  ,null  is_current_list_entry
  ,null  image
  ,null  image_attribute
  ,null  image_alt_attribute
  ,page_group order1
from apex_application_pages ap
where application_id = :APP_ID
and page_group is not null -- you may limit this to set groups, allowing further management of utility pages, popups etc
order by  order1, lvl,label

If you find the menu not displaying in the hierarchy you expected, check the order by. It should group results as you might translate to the menu - all the relevant menus together, and the top menu is the first record of each group.

Create list region

Create your global page (page zero) if you haven't done so already. This is the perfect place for your menu's list region.
Create a new list region in the global page, with the display point appropriate for your particular template. I chose region position 1. The region requires no template, but you use the List Template you just created.
You will also need to ensure the menu doesn't appear on pages that don't require it - logon, popups, etc. So make sure your region condition is appropriate. To start with it might be
:APP_PAGE_ID != 101

Remove tabs

Now that you have a CSS menu system in place, you can now remove the tab list that may have previously supported your pages. You might be able to make one change, depending on how you've managed your page templates. This could be modifying the Page template default in your current theme from "One Level Tabs" to "No Tabs". For the theme (2) I have been using in my sample application I also needed to remove the div that housed the tab set. 

CSS menu system

It's not quite as pretty as when implemented using one of the newer themes, but still looks neat and clean. I'll have to update this in future. You may also wish to replace the pixel style down arrows to something more contemporary, less retro.

This biggest bugbear I have with this solution is it doesn't seem touch-screen friendly, despite my interpretation of assurances in the LWIS FAQ. While it drop's down, it doesn't allow me to select "Employees" using Chrome on my Samsung Galaxy III. On a Windows Latitude using IE, the drop-downs don't even open. First level selections are ok.

A similar alternative is an Enkitec plug-in incorporating the Twitter Bootstrap framework.

Scott

ps - a few weeks after I drafted this I noticed Dutch blogger Kees Vlek posting about the same framework.

Implement Bullet Sparkline using extended Enkitec Plug-in

This post details the implementation of an extended version the Enkitec Sparklines Plug-in to include bullet charts. Previously I posted how this extension was made.

First you need to download and import the plug-in. Once this is done, you can define the data used, then create a dynamic action to convert the data into the sparkline chart.

In my case I didn't need to consider string aggregation techniques as my data came from different fields. I defined a dynamic PL/SQL block that generated HTML similar to
<span id="jobBullet">12,15,15,13</span>
Where the values are respectively Target (red line), Performance (inner blue line), Range (full background shading), Expected (first layer of shading, near red line)

Target, Performance, two ranges

We will probably use the inner blue line to represent "expected" target, and have just one background colour, so this data set would not have the fourth number.

Target, Performance, Range

I found the jQuery Sparkline documentation lacking when attempting to modify the tooltip values.
I ended up finding the information I need in the related Google Group.
tooltipValueLookups: { fields: {r: 'Range', p: 'Performance', t: 'Measurement'} }

This information forms part of the onLoad dynamic action that will convert the span of data into a sparkline.

The action utilised comes directly from the plug-in definition: Enkitec Sparklines [Plug-in]
I directly identify the data span with the jQuery selector #jobBullet

When generating a sparkline for every row in a report, it's likely your selector will be a class.

I wanted my sparkline to be larger, so I adjusted the plug-in to allow me to enter the common width property each time.

My next step is to parameterise the colour scheme so I can modify the Performance colour to be green or red, depending on the Target value.

Extend APEX sparklines plugin to include bullet chart

Dan McGhan recently announced a new plug-in using sparklines. This post details how I extended the plug-in to support another chart type. A separate post details how I implemented this in an application.

If you haven't seen them, check out his brief summary - there's a great image showing examples of those he's built into the plug-in from those available in the original jQuery plugin.

They are basically word/sentence sized graphs - which I think are great because a picture often paints a thousand words.

Out of all the info I've read since coming home from leave, this really stood out because I knew some perfect applications for them in a current project - using the bar chart with negative values, it can display a visual indicator for the users that encourage them to target "zero", which is a big culture change in regard to what's being attempted.

Since I was curious, and noticed they had only enabled some of the available charts, I checked out the documentation on the jQuery plugin and saw the bullet charts. These were another potential solution for us since the AnyChart options licensed through APEX did not include horizontal linear gauges.

The APEX evangelists have built an integration kit. I also considered looking into RGraph and jqChart, but since finding the bullet sparklines I tried tweaking the example and scaled it up using Chrome - there was my answer.

My APEX plug-in authoring skills are still developing, as is my jQuery - but I didn't find it hard to adapt Dan's code to include bullet sparklines as another chart type in the plug-in.

Bullet Sparkline - scaled up

I also adjusted the custom attributes to make width always available. I've made an export of the extended plugin available here.

This segment of code shows how easy it was to extend - all I needed to do was modify the attributes to match those in the jQuery Sparklines documentation

ELSIF l_chart_type = 'bullet'
   THEN
      l_js_function :=
         'function(){'|| l_crlf ||
            'this.affectedElements.sparkline("html", {' || l_crlf ||
               'type: "' || l_chart_type || '",' || l_crlf ||
               'height: "' || l_height || '",' || l_crlf ||
               'width: "' || l_width || '",' || l_crlf ||
               'targetColor: "' || l_bullet_target_color || '",' || l_crlf ||
               'targetWidth: "' || l_target_width || '",' || l_crlf ||
               'performanceColor: "' || l_bullet_perf_color || '",' || l_crlf ||
               'rangeColors: ' || l_bullet_range_colors || ',' || l_crlf ||
               CASE
                  WHEN l_enable_tooltips_and_hl = 'N'
                  THEN 'disableTooltips: true,' || l_crlf ||
                     'disableHighlight: true'
               END ||
               CASE
                  WHEN l_additional_options IS NOT NULL
                  THEN l_crlf || l_additional_options || l_crlf
                  ELSE l_crlf
               END ||
            '});' || l_crlf ||
            CASE
               WHEN l_add_click_event_bindings = 'Y'
               THEN
                  'this.affectedElements.bind("sparklineClick", function(evnt) {' || l_crlf ||
                     'var sparkline = evnt.sparklines[0];' || l_crlf ||
                     'apex.jQuery(document).trigger("enkitecsparklineclick", {' || l_crlf ||
                        '"sparklineId": "' || l_sparkline_id || '",' || l_crlf ||
                        '"sparklineObj": sparkline,' || l_crlf ||
                        '"xValue": sparkline.currentRegion,' || l_crlf ||
                        '"yValue": sparkline.values[sparkline.currentRegion]' ||
                     '});' || l_crlf ||
                  '});' || l_crlf
            END ||
         '}';
   END IF;

And just quietly, I really love the floating bookmark index in the jQuery Sparklines documentation.

Thanks Dan, Doug & Enkitec, for the headstart on this versatile solution.

Scott

SQL Analytics 101 - Row_Number()

Here is a simple example for when SQL Analytical Functions are simple yet useful.

I wanted a basic 1,2,3,4 count so I could alternate colours in a report.

select ename, sal, rownum rn
  ,mod(rownum,4) mod_rn
  ,mod(row_number() over (order by sal),4) mod_rna
from emp
order by sal

ENAME      SAL     RN     MOD_RN  MOD_RNA 
---------- ------- ------ ------- --------
SMITH      800     7      3       1       
JAMES      950     13     1       2       
ADAMS      1100    12     0       3       
MARTIN     1250    10     2       0       
WARD       1250    9      1       1       
MILLER     1300    14     2       2       
TURNER     1500    11     3       3       
ALLEN      1600    8      0       0       
CLARK      2450    3      3       1       
BLAKE      2850    2      2       2       
JONES      2975    4      0       3       
FORD       3000    6      2       0       
SCOTT      3000    5      1       1       
KING       5000    1      1       2       

 14 rows selected 

Column "MOD_RN", based on ROWNUM, is unpredictable due to the order by.

Replace ROWNUM with ROW_NUMBER(), which mimicks the ORDER BY for the statement, and we return to predictability.

ROW_NUMBER() is one of my favourite and most frequently used analytical functions. I've used it for basic numbering devices such as this, identifying duplicates, compressing sequences, APEX checkbox values, defining precedence within an in-line view, and probably much more.

Scott