Scott's Oracle Blog: April 2011

So.. it's been quite a while since I've blogged.. yeah I'm a little lazy, but I finally found a topic to blog about.

The technology world is a constantly changing place. Our current ERP system is written in Oracle Forms and Reports. While that works for a good percentage of customers, there are some that are ready to explore the new. Tablet/Mobile Processing is the current "trend" in technology. Our customers were looking for a lightweight solution that integrates with our product for salespeople.

We had a few criteria:

Ease of Use
Multiple Hardware/OS Capability
Look and Feel

Due to the Multiple Hardware/OS, we did not feel like creating an "app store" app, so we decided to go with the web app approach. I have been using Apex for about 7 years now, and I decided to look into using this to get what I needed.

Doing some web searches, let me to the mobile site for the Philadelphia Cricket League this is a site done in Apex using the iWebkit framework. Reading the documentation I began experimenting.

To start, I chose Apex Theme 10 at first, but then switch to 13 as my starting point. I extracted the iWebkit and saved it in the images folder for Apex.

I chose the No Tabs page as my default and edited my page layout and added tags for the iwebkit stylesheet and javascript so that it can be called.

<html lang="&BROWSER_LANGUAGE." xmlns="http://www.w3.org/1999/xhtml" xmlns:htmldb="http://htmldb.oracle.com">

<head>

<meta content="yes" name="apple-mobile-web-app-capable" />

<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />

<meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport" />
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name = "viewport" content = "width=device-width">
<meta name = "format-detection" content = "telephone=no">
<link rel="apple-touch-icon" href="#IMAGE_PREFIX#A2000.ICO"/>
<link href="#IMAGE_PREFIX#iwebkit/css/style.css" rel="stylesheet" type="text/css" />
<script src="#IMAGE_PREFIX#iwebkit/javascript/functions.js" type="text/javascript">
</script>
<link rel="stylesheet" href="#IMAGE_PREFIX#iwebkit/sw/spinningwheel.css" type="text/css" media="all" />
<script type="text/javascript" src="#IMAGE_PREFIX#iwebkit/sw/spinningwheel-min.js?v=1.4"></script>

<link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_13/theme_4_0.css" type="text/css" />
#HEAD#
<title>#TITLE#</title>
</head>
<body #ONLOAD#><noscript>&MSG_JSCRIPT.</noscript>#FORM_OPEN#<a name="PAGETOP"></a>

I also changed the body to have the default look and feel I want

<div id="topbar">

<div id="title">A2000 Mobile</div>

<div id="leftnav"><a href="f?p=&APP_ID.:1:&APP_SESSION.">

<img alt="home" src="#IMAGE_PREFIX#iwebkit/images/home.png" /></a></div>

</div>
<a name="SkipRepNav"></a>
<div id="t13MessageHolder">#SUCCESS_MESSAGE##NOTIFICATION_MESSAGE##GLOBAL_NOTIFICATION#</div>
<div class="t13BodyMargin">
<table summary="" cellpadding="0" cellspacing="0" border="0" height="70%">
<tr>
<td valign="top" width="100%">#BOX_BODY##REGION_POSITION_02##REGION_POSITION_04#</td>
<td class="t13ColumnSep"><div class="t13ColumnSep"><br /></div></td>
<td valign="top"><div style="float:right;">#REGION_POSITION_03#</div></td>
</tr>
</table>
</div>

I then used this template on all my pages.

iWebkit works entirely in unorganized lists, which are all pretty well documented in their documentation... Apex works with Table Structure... how to overcome this?

To do "reports" was pretty simple. I used a pl/sql Region to dynamically output html in the format I wanted

htp.p('<div id="content"><span class="graytitle">Choose Color</span><ul class="pageitem">');
for rec in (select cc.color_no,nvl(cc.color_descr,c.descr) col_descr
from color_style cc
inner join color_mast c
on cc.color_no = c.color_no
where cc.style = :p7_style
and cc.active = 'Y'
order by color_no)
loop
htp.p('<li class="menu">');
htp.p('<a href="f?p=&APP_ID.:2:&APP_SESSION.::NO:RP,2:P2_STYLE,P2_COLOR_NO,P2_LAST_PAGE:' || :P7_STYLE ||',' || REC.COLOR_NO ||',7">');
htp.p('<span class="name">' || REC.COLOR_NO || ' - ' || REC.col_DESCR || '</A></span>');
htp.p('<span class="arrow"</span></li>');

end loop;
htp.p('<li class="menu"><a href="f?p=&APP_ID.:14:&APP_SESSION."><span class="name">Back</span></a></li>');
htp.p('</ul></div>');

Outputting form elements was a little trickier... What I needed to do here was have the elements in 1 Region, and setting all elements in the same column/row

Then to add the list elements, I used the pre-element and post-element properties to get the correct format

I hope this helps you with your Mobile development until Apex comes out with a full mobile layout.

Scott's Oracle Blog

Tuesday, April 12, 2011

Building a mobile site in Oracle Application Express

How Generative AI can save you time programming menial tasks

Search This Blog