A presentation held at the JavaZone conference in Oslo, 2008 describing the iLabs Mobile Toolbox, a library for making Java ME applications without intolerable pain.

1. iLabs mobile toolbox: Java ME applications without intolerable pain. Content is available under Creative Commons, Attribution 3.0 license Describes version 0.53b of the toolkit

3. Speakers Bjørn Remseth. Cand. Scient. Research scientist at Telenor Research & Innovation. Bjørn has more than twenty years of experience as a sysadmin, developer, systems architect and research scientist. Stian Børresen MSc. Ten years experience in 3D graphics, web, mobile and rich client development. He is currently working as a consultant specializing in mobile application development using java. Else Nordhagen. Dr. Scient. Research Scientist at Telenor Research & Innovation. More than thirty years of experience with object oriented design and implementation, 3D graphics, theoretical computer science and GUI design (from Smalltalk in the late seventies, to JME today).

8. Java versions

12. Example 2: (HelloGui3):

13. class HelloGUI3 extends AbstractILabsMidlet public final void initialize() { ApplicationView view = new ApplicationView("Hello GUI 3!"); view.addMenuItem(new ShowSelection("Item 1")); view.addMenuItem(new ShowSelection("Item 2")); view.addMenuItem(new ShowSelection("Item 3")); view.addMenuItem(new ShowSelection("Item 4")); view.setRightSoftbuttonAction(new ExitAction("Exit")); setCanvas(new ViewCanvas(getDisplay(), view)); getCanvas().show(); } User provided Built in

14. Action that change Canvas: class ShowSelection extends DisplayChangeAction { ShowSelection( final String label) { super(label); } protected void onExecute() { final Alert alert = new Alert("Hello GUI3 alert", "You selected : " + getLabel(), null, AlertType.INFO); alert.setTimeout(Alert.FOREVER); setCurrent(alert, getCanvas()); } }

15. Boilerplate to get things going: /** * Creates a new instance of HelloGUI3. */ public HelloGUI3() { }

17. HelloGUI3, hierarchical decomposition ApplicationView Title B ar MenuView PopUpMenu Clock Action 4 Action 3 Action 2 Action 1 SimpleList View

19. OpenMiniChatter – dry run:

20. OpenMiniChatter - dry run - use of TabView

22. Blogger – dry run

23. What the HTML renderer sees < form action =“&quot; id =&quot;cameraform&quot; method =&quot;post&quot; enctype =&quot;multipart/form-data&quot;> < object name =&quot;image_file&quot; classid = &quot;clsid:1b9982cf-4be8-42dd-9599-d0f6786d128d&quot; width =&quot;60&quot; height =&quot;80&quot;> </ object > < input type =&quot;submit&quot; name =&quot;update&quot; value =&quot;Update&quot;/> </ form > What you see Live camera view

24. Blogger – upload and view:

26. Example 4: OpenMiniBrowser public void initialize() { mView = new ApplicationView(&quot;Open Minibrowser&quot;); mCanvas = new ViewCanvas(Display.getDisplay(this), mView); mHtmlView = new HtmlView(this); mView.setMainAreaView(mHtmlView); mHtmlView.setMargins(2, Font.getDefaultFont().charWidth(' ')); mView.addMenuItem(new OpenURLAction(mHtmlView, mHomePage, &quot;Home&quot;)); mView.addMenuItem(new EnterURLAction(mHtmlView, &quot;Open url&quot;)); mView.addMenuItem(new BackUrlAction(mHtmlView, &quot;Back&quot;)); mView.addMenuItem(new ExitAction(&quot;Exit&quot;)); //a clock, displaying hours and seconds. mClock = new Clock(System.currentTimeMillis(), false); mView.addClock(mClock); mView.layout(0, 0, mCanvas.getWidth(), mCanvas.getHeight()); mCanvas.show(); // Start a timer, update the clock once every minute. final Timer timer = new Timer(); timer.scheduleAtFixedRate(new ClockTask(), MILLIS_IN_ONE_MINUTE, MILLIS_IN_ONE_MINUTE); mHtmlView.open(mHomePage); }

27. Lessons so far

30. J2ME programs vs. server side XML xml & html J2ME App. J2ME Widger App. App. App. Widgets J2ME App. J2ME App. .jad and .jar files .jad&.jar

32. UngWeb in Møre og Romsdal Fylkeskommune

33. UngeWeb: Widlet for ONE news item:

34. XML for widlet for one news item: <? xml version = &quot;1.0&quot; encoding = &quot;windows-1252&quot; ?> < widlet ver = &quot;0.2&quot; id = ”tabbednyhet&quot; > < view type = &quot;tabs&quot; id = &quot;main&quot; > < view type = &quot;panel&quot; id = &quot;panel1&quot; title = &quot;Nyhet 1&quot; icon = &quot;/img/FolderExplorer.png&quot; show = &quot;true&quot; > < view type = &quot;web&quot; id = &quot;web1&quot; url = &quot;nyhet1.html&quot; ></ view > < action type = &quot;loadiwg&quot; label = &quot;Nyheter&quot; url = &quot;nyheter.iwg&quot; button = &quot;right&quot; /> </ view > < view type = &quot;panel&quot; id = &quot;panel2&quot; title = &quot;Kommentarer&quot; icon = &quot;resource://FolderExplorer.png&quot; > < view type = &quot;web&quot; id = &quot;web2&quot; url = &quot;nyhet1_kommentarer.html&quot; ></ view > < action type = &quot;reloadurl&quot; label = &quot;Oppdater&quot; for = &quot;web2&quot; /> < action type = &quot;loadiwg&quot; label = &quot;Nyheter&quot; url = &quot;nyheter.iwg&quot; button = &quot;right&quot; /> </ view > < view type = &quot;panel&quot; id = &quot;panel3&quot; title = &quot;Skriv selv&quot; icon = &quot;resource://BlogView.png&quot; > < view type = &quot;web&quot; id = &quot;web3&quot; url = &quot;nyhet1_skrivSelv.html&quot; ></ view > < action type = &quot;loadiwg&quot; label = &quot;Nyheter&quot; url = &quot;nyheter.iwg&quot; button = &quot;right&quot; /> </ view > </ view > </ widlet >

35. Integrate with authoring tools: UngWeb Edit with eZ publish Generates HTML and .iwg Widger

37. Two servers and one client: The Twitter Server Widger/Twitter adapter (in example demo running on an iLabs server) Widger running the Twitter Widlet

38. Widget Twitter dry run: Server side login and formatting using forms and simple html. In this case all pages are created on our server, not twitter s . Saves bytes and fixes problems with phone heterogeneity and weaknesses.

41. Example 5: Browser Widget : <?xml version=&quot;1.0&quot; encoding =&quot; windows-1252&quot; ?> <widget ver=&quot;0.2&quot; id=&quot;httpwidget&quot; > <view id=&quot;mainview&quot; type=&quot;application&quot; > <titlebar title=&quot;Http widget&quot; /> <subview type=&quot;web&quot; id=&quot;web1&quot; url=&quot;resource://widgets/httpwidgetindex.html&quot; > </subview> <action type=&quot;openurl&quot; label=&quot;Home&quot; url=&quot;resource://widgets/httpwidgetindex.html&quot;for=&quot;web1&quot; /> <action type=&quot;enterurl&quot; label=&quot;Open url...&quot; for=&quot;web1&quot; /> <action type=&quot;backurl&quot; label=&quot;Back&quot; for=&quot;web1&quot; button=&quot;right&quot; /> <action type=&quot;exit&quot; label=&quot;Exit&quot; /> </view> </widget> Browser specific actions, built into widger Default exit action

42. Result: v.s: Just another widget Hand crafted JME application

43. Example 6: The Twitter Widget

44. Two servers and one client: Twitter Widget (in Widger) Widger/Twitter adapter (in example demo running on an iLabs server) Twitter server

45. Widget Twitter client: <widget> < view name =&quot;twitterview&quot; type =&quot;appview&quot; > <titlebar title=&quot;TwitterME&quot; bordercolor=&quot;#000000&quot; bgcolor = &quot;#94E4E8&quot; textcolor = &quot;#ffffff&quot;/> <view type =&quot;web&quot; name =&quot;web1&quot; url =” [...] /twitterlogin.html&quot;> </view> <action type =&quot;exit&quot; label =&quot;Exit&quot;/> </view> </widget> [...] == long url

46. Widget Twitter client: < widget ver=&quot;0.2&quot; id=&quot;twitter&quot;> < view type=&quot;application&quot; id=&quot;main&quot;> < titlebar title=&quot;TwitterME&quot; … < subview type=&quot;web&quot; name=&quot;web1&quot; url=&quot;resource://widgets/twitterlogin.html&quot;> </ subview > < action type=&quot;loadiwg&quot; label=&quot;Widgets&quot; url=&quot;resource://widgets/masterwidget.iwg&quot;/> < action type=&quot;exit&quot; label=&quot;Exit&quot;/> </ view > </ widget > Colors removed

47. twitterlogin.html (Plain old HTML, no surprises): <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;> <html> <head> <title>Twitter</title> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=windows-1252&quot;> </head> <body> <p><img src=&quot;twitter.png&quot;/></p> <form action=&quot;http://demo.ilabs.no/test/widgets/twitter/twitter.php&quot; id=&quot;signinform&quot; method=&quot;post&quot;> <p><b>Username:</b><br> <input name=&quot;username&quot; type=&quot;text&quot; title=&quot;Enter username&quot; value=&quot;&quot; /> </p> <p> <b>Password:</b><br> <input type='password' name=&quot;pwd&quot; title=&quot;Enter password&quot; value=&quot;&quot; /> </p> <p> <input type=&quot;submit&quot; name=&quot;signin&quot; value=&quot;signin&quot; /> </p> <p><center><img src=&quot;/widger/img/twitterbird.png&quot;/></center></p> <p>Twitter is a service for friends, family, and co-workers to communicate and stay connected through the exchange of quick, frequent answers to one simple question: What are you doing?</p> </form> </body> </html> Nothing exiting happening here please move on

48. twitterME user interface (Plain old HTML, one small surprise): <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;> <html> … <textarea name=&quot;status&quot;></textarea> <!-- <INPUT TYPE=&quot;file&quot; name=&quot;image_file&quot; id=&quot;image_file&quot;/> --> <object name=&quot;image_file&quot; classid=&quot;clsid:1b9982cf-4be8-42dd-9599-d0f6786d128d&quot; width=&quot;60&quot; height=&quot;80&quot;> </object> <input type=&quot;submit&quot; name=&quot;update&quot; value=&quot;Update&quot;/> </form> <hr> </p> <h3>Showing the latest private posts</h3><hr> <p><img src=&quot;http://s3.amazonaws.com/twitter_production/profile_images/55933057/cnn.twitter_normal.gif&quot;/><b>cnnbrk : </b><br>Embattled … Camera input

49. Widget Twitter dry run: Server side login and formatting using forms and simple html. In this case all pages are created on our server, not twitter s . Saves bytes and fixes problems with phone heterogeneity and weaknesses.

54. Questions? Please ..  ?

55. Thank you for your attention

56. XTRA

57. Example XML for a browser: <wid let > <view name=&quot;ONM08&quot; type=&quot; appview &quot;> <titlebar title=&quot;ONM 08&quot; bordercolor=&quot;#FF9900&quot; bgcolor=&quot;#444444&quot; textcolor=&quot;#ffffff&quot;/> <view type=&quot; web &quot; name=&quot;web1&quot; url=&quot;http:// ... .html&quot;></view> <action type=&quot; openurl &quot; l abel=&quot;Home” url=&quot;http:// ... .html&quot; control=&quot;web1&quot;/> <action type=&quot; useropenurl &quot; label=&quot;Open url&quot; control=&quot;web1&quot;/> <action type=&quot; backurl &quot; label=&quot;Back&quot; control=&quot;web1&quot;/> <action type=&quot; exit &quot; label=&quot;Exit&quot;/> </view> </wid let >