IUI MOBILE

created by

TECHNICAL GUIDE
Written by

REDHUAN D. OON

Version 1.3

ADAXA iUIMobile
Access iDempiere on the go via your mobile phone
A step-by-step guide on the first mobile interface from Down Under

Redhuan D. Oon (RED1)

October, 2013
written while in Gotham City

The top photo is not of Gotham City but the Kuala Lumpur skyline from the 34th floor of
SetiaSky Residences, which a good friend purchased at about U$270k some three years ago
now costing U$400k. You hardly see the KL Tower on the right side with its top mush-
room head obscured by a puff of morning fog. The Petronas Twin Towers of course needs
no narrative. Sprawled below is what is left of the Malay enclave stubbornly refusing to sell
out to be part of the golden triangle. They want more money. Greed. And that is when I
thought about Batman and his quest for ridding the world of darkness and evil.
Picture taken with a Canon EOS Rebel T3.

 Dedicated to little Mariana in cold peaceful Siberia.

May you grow up awesome.

sponsored by
BANGLADESH
This upgrade to iDempiere is sponsored by Zeeshan Hasan from above.

iUI Mobile is a great contribution by ADAXA from Melbourne, Down Under.

This technical documentation is from me.

I believe in documentation as of higher value than the code itself. It is also a

good medium to brand oneself and project associates and that is a better com-
pensator by all counts. Publishing myself is one of my consuming passion. It is
rewarding in itself. As such a hobby got me fame and name these ten years. It
brought me ample subsistence and travel all over. Today I am still at the farm
where it all began in 2006, when ADempiere forked from Compiere. And we
didn’t stop growing, churning the latest and best the Free and Open Source
software world can offer. Today as an OSGi framework, iDempiere is a testa-
ment to the wealth that started with humble and unconditional sharing. You
can help me by simply reading me more.
Peace!

 RED1’s THREE LAWS:
Information is Free
YOU HAVE TO KNOW

People are Not

YOU HAVE TO PAY

Contributors are Priceless

YOU HAVE TO BE

It is free as in freedom, not free as in free lunch - Richard M. Stallman

These are not taken with my camera. I just Googled for Batman in the Internet. Of
course I took many hours of digging before arriving at some sense to ensure I got
the theme perfect for this otherwise boring documentation, which took less hours to
produce. Hope this will reduce your phobia for bats eventually while your mobile
ERP works beyond your imagination. Still at peace and with me on the same page?

 TABLE OF CONTENTS

Resources 6
Features 6
Improvements 6

Setup 7
Installing 7
Initialising 8
Walk-through with Phone 9
Eclipse Environment 11
SourceForge Artifacts 12
Learning Resources 13
A Russian Bug 14
Nicolas Micoud 16

I spent some time in awesome Siberia, Russia earlier this year, helping these two highly energetic girls on the right
with English that took my mind away from the stress of bug fighting. It was at this huge house behind them that I
finally solved the iUIMobile login sequence. Who knows, they will grow up one day into real super-people in the
fight for justice and freedom in their own land. Their home itself is a kinda cold but cosy Gotham City.

Adaxa iUIMobile Technical Guide

RESOURCES
iUIMobile is the brilliant work of Paul Bowden, a hybrid Irish-Chinese in Australia with our top
ERP implementation and accounting expert partner, Adaxa.

It requires the idempiere-server to be up and running and unlike SFAndroid, which needs not.
So it is more of a host-centric system rather than a client-server one.

Nevertheless iUIMobile is simple, clean-looking and works exactly on the meta-data from the
ERP. It therefore has no maintenance and no extra coding needed when any new table model is
added. It is very light-weight and thus runs very fast during demos.

This document will describe how to run the demo as well as well as setup on own server. The re-
pository to download plugin, 2Pack and tutorial is at

http://sourceforge.net/projects/red1/files/p2/Mobile/

The repository of the source is at http://bitbucket.org/red1/org.idempiere.iuimobile.

Features

The latest is version 0.2 because there are some improvements to it. Firstly the basic features as
done by Paul Bowden are:
1. Integration with iUI presentation layer from the http://www.iui-js.org/ project.
2. Fully defined by meta-data from the ERP’s Application Dictionary design from Compiere.
3. Light-weight and fast to operate on mobile phones.
4. Allows editing of data and creating new orders

Improvements

Under sponsorship of SYSNOVA, I managed to:

1. Upgraded its login to iDempiere’s Client/Role sequence
2. Upgraded to OSGi plugin framework installable on the fly
3. Added security with Role mobile enabled check box and control key translation contributed
by Nicolas Micoud of France.
4. Solved bug that blocked multi-language translation after the WLogin step.

Copyleft 2013 Redhuan D. Oon, SYSNOVA Page 6 of 16

Adaxa iUIMobile Technical Guide

SETUP

Installing

Similar to the other plugins I did, you can either download first, then install from local location,
or install directly via remote online location without downloading first. Below are the scripts you
can run off your OSGi console of iDempiere. Please refer to www.idempiere.com’s wiki for any
basic or background information on iDempiere ERP setup and operations.

You can refer my forum for technical progress: http://red1.org/adempiere/viewtopic.php?f=45&t=1753.

Here is the online script method, just copy and paste in your OSGi console:

install http://downloads.sourceforge.net/project/red1/p2/Mobile/org.idempiere.iuimobile_1.0.0.201310260513.jar

(note: as usual if the jar has been updated in the repository you may need to amend the above to
fit the timestamp).

Upon starting the bundle, the 2Pack will work itself. Again if this fails you can fetch the
iUIRoleEnable.zip from the SourceForge repository to do a manual Pack-In.

Now you have to do the usual Login via WebUI first (or via Swing client from adempiere-client)
to do a Role Access Update and logout. Otherwise you may need a dsyfunctional screen like here:

The Role field will not

be functionaing because
the Role enabling code
is not working.

You can check for this

in the WebUI below.

Copyleft 2013 Redhuan D. Oon, SYSNOVA Page 7 of 16

Adaxa iUIMobile Technical Guide

Initialising

First you login as GardenAdmin to see the

Role window to check if the new field is pre-
sent and already checked - Enabled for mobile
access. Both of these happens during the
2Pack Pack-In process automatically.

When there you may need to crank it a bit by

stopping the
idempiere-server
and with the close
command and then
launch it again.

If you get a whole display as blank like this,

then just issue a refresh bundle ID to your
OSGi console as below:

You know things are working when you get the choice of the role after login screen. Also if the
language selection does not appear, just login into /webui will get your language into play. Let’s
try logging in as SuperUser/System to another installed language which I am doing below using
Spanish Colombia. The images are from an actual mobile phone (Nexus 4 gift from the Krefeld
iDempiere Conference!).

Copyleft 2013 Redhuan D. Oon, SYSNOVA Page 8 of 16

Adaxa iUIMobile Technical Guide

Walk-through with Phone

And I installed this mobile onto the live

demo.idempiere.com/ site using Felix
console. You can take note of this in the
URL. You can read more on how to
achieve that from my forum:

http://red1.org/adempiere/viewtopic.php?f=45&t=1753 as well as the movie in there.

The subsequent screen above, you can see the main menu listing in Spanish. Let’s tap on Ventas
(Quote to Shipment).

Copyleft 2013 Redhuan D. Oon, SYSNOVA Page 9 of 16

Adaxa iUIMobile Technical Guide

We go further by tapping on the Ordenes de

Venta (Sales Order). See the next page below.
We can note the various tab items and the icons
to denote each different type of item.

There are icon images to signify Windows, Re-

ports, and Processes. At this time we have not
tested all those various functions. Normal data
model browsing and edit of data has been
proven to be possible. I also managed to create
a new Sales Order which proved that the
Callouts even worked. This is good and under-
standably easy to maintain because its meta-
model and Callout processes happens at the
server level. What we see is just a dumb client
or terminal display.

Getting into an actual order on the left here

we can see the display of data is nicely toned,
for us to differentiate between labels and
field values. We also have the function but-
tons highlighted for Edit and the top back
and main menu button to escape to.

Next we will examine how the plugin is setup.

Copyleft 2013 Redhuan D. Oon, SYSNOVA Page 10 of 16

Adaxa iUIMobile Technical Guide

Eclipse Environment

You can checkout the source-code from http://bitbucket.org/red1/org.idempiere.iuimobile

In your Eclipse environment it

will just be another plugin.
See below which i presented
in optimal way to show as
much detail as possible.

I opened the MANIFEST.MF

file in the editor to show the
extensions used. They are
specific for the HTTP context
and HTTP servlets. I thus de-
clare all the mobile classes that
extends HttpServlet.

Copyleft 2013 Redhuan D. Oon, SYSNOVA Page 11 of 16

Adaxa iUIMobile Technical Guide

SourceForge Artifacts

There are few uploads I done that is sufficient to run this add-on.

The first most important artifact is the org.idempiere.iuimobile<time-stamp>.jar which is the

OSGi plugin add-on containing the embedded 2Pack. This is all that is needed for the iUIMobile
functionality to work.

The iUIRoleEnable.zip is the 2Pack just in case the embedded one misfires and you wish to
manually Pack-In.

The ExpDat<time-stamp>.jar is the Database dump at the moment of Pack-Out of the 2Pack so
that you can return to modify some more things to PackOut. Note that there are other pack-outs
in there such as for SFAndroid and LiberoMFG. Below is the screenshot of the Pack-Out record-
iUIRoleEnable.

Copyleft 2013 Redhuan D. Oon, SYSNOVA Page 12 of 16

Adaxa iUIMobile Technical Guide

Learning Resources

Besides the forum and this guide, I

also made movies which you can
find in the forum. Here i put the
links to the YouTube movies again
for your easier reference.

http://youtu.be/aSkmB9I2iGc

Finally in closing below, I dump the

remaining other interesting Batman
posers I scaled from the Internet.

May all evil be banished from this planet Earth. Stay safe.

Copyleft 2013 Redhuan D. Oon, SYSNOVA Page 13 of 16

Adaxa iUIMobile Technical Guide

A Russian Bug

Peter Shepetkov was excited about this and tested it but alas was sad to find that the Russian lan-
guage remains the exception in getting to work in the iUIMobile. So remembering the good time
I have with him in Moscow around April this year I set out since last night and continuing early
this morning before soon discovering the root cause of the bug. Here is Peter posing with me
before the entrance of the Red Square in Moscow, a great Gotham City indeed. - October 25th.

The bug was due to the Russian character set been > 255 and filter check, called from my iUIMo-
bile, WMenu (body.addElement(buf.toString());) finally setFilterState(true):
/** STRING ELEMENT.java
* Set Tag Text
* @param text text
* @return Element
*/
public Element setTagText (String text)
{
if (text != null && text.length() > 0)
{
StringCharacterIterator sci = new StringCharacterIterator(text);
for (char c = sci.first(); c != CharacterIterator.DONE; c = sci.next())
{
int ii = c;
if (ii > 255)
{
setFilterState(true);
break;
}
}
}
return super.setTagText (text);

Copyleft 2013 Redhuan D. Oon, SYSNOVA Page 14 of 16

Adaxa iUIMobile Technical Guide

The solution was a dirty hack by com-

menting out that setFilterState and
things seems OK:

Looking for a more elegant solution took

me few hours until i realised that it was
due to olden days coders by Robert Klein
that set the line tag from a StringBuffer
which gets converted. He should use the
org.apache.ecs.xhtml.li (for line tag type)
and org.apache.ecs.xhtml.a (for a href
tag). I tried to do some surgery onto the
WMenu code but it seems to require
deep plumbing which prompt me to try this simple hack first which required to bring over the
org.apache.ecs plugin source into the iUIMobile plugin.

However Carlos Ruiz flew into the picture, solving it by just removing setTagText method. See
his ticket: IDEMPIERE-1475.

After a good walk

around the Kremlin
with Peter, he left me
alone with these
three ladies to get
me really acquainted
with Russian hospi-
tality and beauty. It
was just a quick snap
shot he requested
these passers-by
outside the Red
Square for the op-
portunity to wel-
come his far off visi-
tor from Malaysia.
Russians are truly
friendly people.
Batman shall return!

Copyleft 2013 Redhuan D. Oon, SYSNOVA Page 15 of 16

Adaxa iUIMobile Technical Guide

Nicolas Micoud

While waiting for

Robin, we got someone
new. I put in for this
latest version 1.3 due to
the nice little things
Nicolas from France did
for this module. Firstly
was the Role Enable
explained earlier. Then
he noticed that the con-
trol keys are still not translated such as Menu, Logout, Edit etc and set to scratch that itch. Fi-
nally he did it!

(see http://red1.org/adempiere/viewtopic.php?f=45&t=1753#p8502)

So how do you get your own translation for those control keys? Here is how:

Under Message Window in the Main Menu:

1. Create new Search Key records for iuimobile.Back, iuimobile.Cancel, iuimobile.Find,

iuimobile.Logout, iuimobile.NewRecord as shown above.

2. Under each Translation tab, you create their corresponding translations.

Copyleft 2013 Redhuan D. Oon, SYSNOVA Page 16 of 16