apex apps for iphone / android - konoso llc · pdf filewhy apex? reliable powerful fast free...
TRANSCRIPT
Tony Jedlinski
• President - Konoso LLC
• Vice President - MOUG
• Former Executive VP, Director Web Content and Initiatives -IOUG
• Recognized by Oracle Magazine as a leading expert in Oracle Application Express (ApEx) development (named HTML-DB Developer of the year – 2005).
• Published ApEx author (Oracle Magazine May/Jun 2006), (IOUG SELECT Journal Q4 2005).
• ApEx presenter (Oracle World 2004, 2006, 7), (IOUG Live! 2004,5), (Collaborate 2006,7,8,9,10,11).
• More than 20 of years experience as an Oracle systems architect / developer, and 30 years of experience in system analysis and development.
Why APEX?▫ Reliable
▫ Powerful
▫ Fast
▫ Free (included with all Oracle licenses – even XE)
▫ Easy to learn declarative environment
Let’s go Mobile!
• Keep it simple - APEX as the development platform
• Avoid duplicate effort - Develop one application for as many different devices as possible
• Provide an intuitive user experience – Although they are web based, apps should look and feel like they are native to the mobile device.
• Make it fun – Incorporate charts and graphics• Allow user customization – End user should be
able to select “skins”
There are several ways to use APEX websites on a mobile device
Three approaches possible
• Run a standard APEX app using the mobile device browser▫ Least effort, most compatible▫ Not the best user experience (scrolling and zooming
required)• Use a development platform (e.g. iWebkit)
http://snippetspace.com/projects/iwebkit/▫ iPhone specific▫ License fees apply
• Use jQuery Mobile http://jquerymobile.com/▫ Soon to be adopted by Oracle▫ Multi Platform
Standard vs jQuery Mobile
Which would you prefer to use?
Keep in mind…
• Mobile apps work best with <div> based templates and list <li> oriented regions rather than HTML tables
• This will require edits to the various templates
• You should also avoid the use of tabs
• Things will get easier when jQuery Mobile goes production and Oracle provides us with built in themes
Using jQuery Mobile within APEX
• Update a Page Template by replacing the▫ Header▫ Body▫ Footer▫ Navigation Bar Entry
• Create a NEW Region Template• Create a NEW List Template• Create Report Template(s) using Named
Columns• Add Data Theme selector (optional)
I wish to acknowledge Peter Raganitsch who first posted this technique on his blog.
The original posting can be found at:http://www.oracle-and-apex.com/create-a-mobile-theme-for-oracle-apex/
He did a webinar on this topic which can be downloaded at:
http://click-apex.at/Downloads/APEX%20for%20Mobile%20Development%20-%20Peter%20Raganitsch%20-%20redGate.pdf
Page Template Header<!DOCTYPE html>
<html lang="&BROWSER_LANGUAGE." xmlns="http://www.w3.org/1999/xhtml"
xmlns:htmldb="http://htmldb.oracle.com" xmlns:apex="http://apex.oracle.com">
<head>
<title>#TITLE#</title>
<link rel="icon" href="#IMAGE_PREFIX#favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="#IMAGE_PREFIX#favicon.ico" type="image/x-icon">
#HEAD#
<link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_23/css/4_1.css?v=2">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body #ONLOAD#>
<div data-role="page" data-theme="&P1_THEME.">
#FORM_OPEN#
Data Theme selector
Available data themes
Dark = a, Blue/Grey = b, Grey = c, Light = d, Yellow = e
Page Template Body
<div data-role="header" data-theme="&P1_THEME." data-backbtn="false" >
<h1>#TITLE#</h1>
#NAVIGATION_BAR#
</div><!-- /header -->
<div id="messages">#SUCCESS_MESSAGE##NOTIFICATION_MESSAGE##GLOBAL_NOTIFICATION#</div>
<div data-role="content" data-theme="&P1_THEME.">
<ul data-role="listview">#REGION_POSITION_01#
#REGION_POSITION_02#
#REGION_POSITION_03#
#REGION_POSITION_04#
#REGION_POSITION_05#
#REGION_POSITION_06#
#REGION_POSITION_07#
</ul>
#BOX_BODY#
</div><!-- /content -->
Page Template Footer
<div data-role="footer" data-
theme="&P1_THEME.">
<h4>#REGION_POSITION_08#</h4>
</div><!-- /footer -->
#FORM_CLOSE#
</div>
</body>
</html>
Page Template Navigation Bar Entry
<a href="#LINK#" rel="external" #ALT#>#TEXT#</a>
New Region Template
<div id="#REGION_STATIC_ID#" #REGION_ATTRIBUTES#>
<h2>#TITLE#</h2>
<div data-role="controlgroup"
data-theme="&P1_THEME."
Data-type="horizontal">#CLOSE##PREVIOUS##NEXT##DELETE##EDIT##CHANGE##CREATE#
#CREATE2##EXPAND##COPY##HELP#</div>
<div>
#BODY#
</div>
</div>
New List TemplateBefore Rows:<ul data-role="listview" data-inset="true" data-
theme="&P1_THEME.">Current:<li><a href="#LINK#"
rel="external">#TEXT#</a></li>Non-current:<li><a href="#LINK#"
rel="external">#TEXT#</a></li> After Rows:</ul>
New Report Template
Row Template 1<li><a href="#LINK#"
rel="external"><h3>#TITLE#</h3><p><strong>#BOLD_TEXT
#</strong></p><p>#PLAIN_TEXT#</p></a></li>
This formats reports as HTML lists. Each list element contains a LINK which has a TITLE formatted as Header3 On the next line is a section of BOLD_TEXT then the last line is a section of PLAIN_TEXT.
Report example
SELECT 'f?p='|| :app_id|| ':3:'|| :app_session || '::::P3_INCIDENT_NUM:'|| TO_CHAR (i.incident_num) AS link,
i.name AS title,
i.description|| '<br>'|| TO_CHAR (i.start_date,'MM/DD/YYYY')
|| ' to '|| TO_CHAR (i.end_date,'MM/DD/YYYY')
|| '<br> IC: '|| v.first_name || ' ' || v.last_name|| '<br>'
|| 'Status: '|| s.description AS bold_text,
i.notes AS plain_text
Dynamic lists (new in Apex 4.1)
Using Mobile List Template
Using Horizontal list with icon
Using Vertical Images list
(in page with mobile template)
jQuery Mobile provides a rich assortment of button sytles
Add data-icon attribute to an HTML button
Note: these buttons dynamically re-size to best fit the mobile browser screen
Add data theme attribute as well
Button Template
Normal and Hot Templates:
<a href="#LINK#"
data-role="button" data-theme="&P1_THEME."
id="#BUTTON_ID#" #BUTTON_ATTRIBUTES# role="button"><span>#LABEL#</span></a>
Set Theme defaults (for convenience)
This is currently a bit labor intensive to get things to work optimally in the mobile environment. Hopefully future versions of APEX will make this a bit easier.
Label Template
• jQuery Mobile will automatically optimize field and label layout if things are properly set up.
• Create a label template as shown below:Before label:<label for="#CURRENT_ITEM_NAME#" data-
theme="&P1_THEME." >After Label:</label>On error after label:<span
class="uLabelError">#ERROR_MESSAGE#</span>Before label and item:<div data-role="fieldcontain">After label and item:</div>
Put all fields in the same region and column
and set field and label templates to mobile
Now fields and labels will automatically
be optimized for narrow or wide screens
Default behavior is acceptable, but improvements can be made.
Default
Override Classes to red in page
template (or on specific pages)
Can’t use Flash based charts on iPhones / iPads so consider using Google Visualizations
Google Visualizations Plug-in
(by Roel Hartman)
http://apex-plugin.com/oracle-apex-plugins/region-plugin/google-visualizations_29.html
After downloading and unzipping and
installing the plug-ins• Download from the apex-plugin.com website• Un-zip the file• Go to shared components / Plug-ins and
press create• Select the desired plug-ins• Use to create new regions
Issues
• iOS – no Flash
• Android – No SVG
• Solution: Conditionally show proper graph based on browser
• For example…UPPER(owa_util.get_cgi_env('HTTP_USER_AGENT')) NOT LIKE '%IPHONE%'
and
UPPER(owa_util.get_cgi_env('HTTP_USER_AGENT')) NOT LIKE '%IPAD%'
Maps
http://maps.googleapis.com/maps/api/staticmap?center=&P7_ADDRESS.&zoom=14&size=512x512&maptype=roadmap&sensor=false
Branching to appropriate type of app
Condition this on (for example)UPPER(owa_util.get_cgi_env('HTTP_USER_AGENT')) LIKE '%IPHONE%'
Try it yourself at:
http://mobiledemo.konoso.biz
Download this presentation at:
http://www.konoso.com/mobileapex.pdf
Contact [email protected]