Old React Native type platform for creating mobile J2ME apps

1. Technical Presentation of
Midlogic® 2.7.

2. Agenda
Company overview
Midlogic overview
Setting up Midlogic
Using Midlogic CMS
Client Deep Editing

3. Geniem Company
Geniem is a market leader in mobile on-device consumer portal
technology solutions
Geniem Midlogic technology powers over 15 millions ODP client
deployments for mass market phones like LG, Samsung, SonyEricsson
and Nokia
Award winning technology licensed to banks, brands, mobiles
operators, wireless application service providers and handset
manufacturers globally
Deployments in over 70 countries
Geniem ODP technology enables our customers to increase mobile
content revenues
Geniem ODP technology greatly improves the user experience by
providing an attractive, user-friendly interface that presents multimedia
and value-added services in a way that stimulates purchase
Founded 2000 – Owned by founders and Sitra, Based in Finland

4. Enabling Rich Mobile Experiences

5. Running Geniem

6. Targeted ODP Applications
ASP compliant MIDLOGIC technology
On-device
User
Generated
Content
On-device
mobile shop
On-device rich
media and
marketing
Version 2.3
On-device
proximity
marketing

7. Midlogic Overview

8. Midlogic On-Device Service Platform
Visual high
performance ODP
client for J2ME
Management server
with Web interface
Support for wide range
of content and services
Web site type design
paradigm

9. Solution overview

10. Technical Solution Overview
J2EE SERVER
Device Manager
Statistics Runtime manager
Runtime upload
Skeleton upload
Skin upload
PC Environment
Import API / XML API
Audio
Video
Data Feed
Images
Text
Bone manager User manager
Skin manager Bluetooth manager
Billing manager WAP provisioning
Category manager Project settings
Product manager Services
Cache manager Update manager
WAP download site
Bluetooth download
Device identification
device/language/carrier
Application package
Contentpackage
J2ME Handset
Online content
Online services
Database
Content sources Midlogic® Server Midclient® Player

11. Midclient Player Overview
Downloadable or pre-installed Java
application supporting now 200+
devices
Player skin customizable with images
and styles
Content and services presented
through templates and structured data
Core engine 45 kb
Supports offline and online usage
Supports main Java APIs* like:
Sending SMS
Play audio and video
Network access (GPRS,3G, Wi-fi)
Bluetooth access
*Java APIs are phone specific

12. Midlogic Server Overview
J2EE server application using
Tomcat, Apache and MySQL
Web interface for:
Application management
Content management
Content delivery via http
ASP allows running multiple
projects with one server
Retrieve data and integrate
through XML API
Binary XML client-server protocol
over http or Bluetooth

13. Easy Adoption from Web technologies
The ODP client is
like a customizable
mini-browser with
offline and scripting
features
Similar to an Ajax
engine on Web
The server is like a
Web CMS for
managing the client
and the content
screens
Screens
- Main menu
- Category screen
- Product screen
Product templates
- News
- Ringtone
- Wall paper
Product Data and
Services
- Text, images
- Audio,Video
- Poll, vote, rate
XML API

14. Client Performance
To have application that runs nicely we need:
JBenchmark2
Preferred over 50
Less than 50 works but can be slow time to time
Heap memory
Preferred over 500 kb
more than 210 works with simplified skeleton & skin
RMS memory
Preferred
More than 20 kB works with simplified skeleton & skin

15. Client Performance
Features Low-endtier Mid-rangetier High-endtier
JARsize 64 64-128 128->
Heap 210-500 210-500 500->
CPU/JBenchmark2 35-50 50-> 100->
Picture
Exampledevice Nokia3100,LGC1100 MotorolaV3x,Nokia6230 NokiaN70,MotorolaA780
Characteristics
Noscrollingoranyvisual
features,sloweruser
interface
Providessmoothuser
experiencewithallthemain
Midlogicfeatures
Providesoptimumuser
experienceandhigh-end
functionalities
Restrictions
Toplow-endrequires
simplifiedskin&skeleton
anddoesnotsupportallthe
templatesandbones
available N/A N/A
API SMS/WMA,MMA SMS/WMA,MMA
SMS/WMA,MMA,Fileaccess,
Camera

16. Summary
Midlogic ODP Client is powerful rendering engine
enabling full customization via MidXML scripting
Midlogic ODP Server is a robust “Web-like” content
management server for ODP GUI, content and services
Midlogic ODP Services enable rich interactive
experience like in Web 2.0 sites
Creating services with Midlogic leverages existing Web
designer skills and provides simple tools for rapid, yet
powerful ODP service creation

17. Setting up Midlogic Server

18. Midlogic Server Set-up
Devices
Blueport devices
Cellular devices
Billing
Base url
Services

19. Midclient Application Structure
How the Midclient application is structured

20. Midclient Application Structure
Framework
A Midclient application is constructed out of three main parts
Skin
Framework files describe
the layout structure
parameters, screen types
and functionalities
Skin files describes the
visual appearance of the
application
Midclient Runtime
Midclient runtime is the
“virtual machine” running
the skeleton. Each device
has its optimized runtime.
Java MIDlet

21. Skeleton files
Main menu
Category Template ContentTemplate
Item List
Category Template
The main screen category
template describes the
elements in the main
menu of the application,
like if there is ticker, its
place,menu items etc.
ContentTemplates
organizes the
structure how the
content is
displayed.
List Category template
is used to show
categories/subcategori
es and how they are
organized in the
screen.
customscreens
Custom screens
are like error
screen, terms and
conditions screen
and other variable
data.
Framework is composed from category templates and other components

22. Screen capture of the folder including
Framework screens, examples:
- accept.xml – custom screen showing
terms and conditions in the beginning
- rss.xml – custom screen for displaying
RSS feeds
- ms.xml is the main screen
- ps.xml and ps2.xml are the product
screens

23. Skin files
images
The application skin is composed from images, language of the
application user interface and the stylesheet.
stylesheetlanguage files
Images are .png format,
image size is critical to a
well designed application
The stylesheet xml file
describes the styles used
in the layout
Language files describe
the application user
interface language.

24. Screen capture of the folder including skin
files, examples:
- .png images
- data.xml and tc.data.xml are the language
files

25. Screen capture of data.xml language file,
language file can be either:
- text – then it is shown with the font
dictated by the stylesheet
- image – for example soft buttons
(example: s_get soft button is s_get.png)

26. Screen capture of stylesheet
(midc.style.xml), example:
- List item borders use style
number 2 and 3, that define
then how the list item looks
when selected or non-
selected
Selected
Not Selected

27. Midclient Content Structure
How content is structured in the ODP

28. Content Presentation
Content is organized under menu structure composing of categories
All content in the application is presented as items
Any item in Midlogic like news, ring tone, RSS feed is a created in the
Content Author
Item is created selecting item type and filling the data in Content Author
Item data can be inputted manually, imported or fetched via XML API
dynamically
Item data means the news text, images and related files like audio or video
Item type can also use Midlogic Interactive Services to create interactive
item, for example:
Rate Artist item uses “artist” item type to show artist related data and in the
“artist” item type is included rate service that enables users to rate the artist with
1-5 stars
Items are assigned to device groups -> e.g. the user sees only product
suited for user phone type. If no device is selected the item is not generated
at all.

29. Midclient Content Structure
Product screenscategories
Item types
Item data
and services
The menu structure
describes the main menu,
categories and sub-
categories
The items in the application
are created using item types.
categories
Menu structure
The item data can be
inputted manually,
imported using import tool
or dynamically retrieved
from external source.
Item

30. Managing Menu Structures
Screen capture of
Menu structure
management
- Management of menu
structures using
categories

31. Screen capture of Item
management
- RSS Item using a RSS item
type
- Each item is assigned to
suitable devices
- Each item can include files,
like image, audio file etc. and
each file is also assigned to
device groups
- Each item can have billing
associated

32. Example Screen flow
Product screen
Splash screen Main screen Category screenApplication Level
ContentLevel
LookandFeelisderivedformSkinfiles
Product screen Product screen
Ring tone template Animation template Wallpaper template

33. Midlogic CMS
How to build and manage your ODP

34. Overview
The Midlogic® operator can easily create
customized on-device portals (ODP) in the
Content Management System, it includes splash
screen, menus and categories, content screens
and services
When all the content has been entered, the
operator clicks a build-button, whereby the ODP
is created for all the different mobile phones
(with different screen sizes)

35. Publishing process
Design storyboard
Create accurate flow diagram
Create look and feel for the ODP with skin
Replace image files and modify the styles
Implement the menu and content
Create all the categories
Create products using item types (remember to assign products to device groups)
Manual items
Dynamic items
Assign products to categories
Advanced settings
Publish the service
WAP download site
Bluetooth
Updates
Statistics

36. 1. Storyboard design
Design storyboard BEFORE you start doing anything with the server
Good design includes:
Main menu structure
Includes main menu items, like Update
Includes main menu categories
Soft-buttons are fixed (cannot be modified) to select (left) and back/exit
(right) or templates specific like buy, play etc.
Sub-categories
Screens types to be used: main, category, product or custom screen
Products e.g. content to be shown, what item type will be used and how
and from where the content data comes
Other items like ticker (where comes the text?)
If billing is used, how and on what products. Define operators, numbers
and number prices

37. Example storyboard design

38. 2. Look and Feel
Splash screen
Top bar
Soft keys
Background
Main menu type
Modified with borders,
styles, images

39. Look and Feel Example Modifications

40. 3. Implement menu structure
Create all the categories
Create items (remember to assign to device
groups)
Manual products
Manual entry
Import tool
Dynamic products
Device assignments
Online / Offline based on category priorities
Assign items to categories

41. 4. Advanced settings
Client properties
Service url
Force update period (milliseconds) default 1week
Require T&C acceptance on startup (true/false)
Force registeration/update on startup (true/false)
Include content files in jar: category listings, item data, item images (true false)
Limit content include to categorylistings (true/false)
Version to version update [longer generation times but only updated items go to the update package] (true/false)
Bones
Bones define how each field in template looks and what functions the template has.
Bones can be modified using bone-editor. Bone editor needs knowledge how MIDXML syntax works.
Application descriptor
Defines what information is shown in the handset when installing the application
Application name
Manufacturer
Midlet version number
Device groups
Default devicegroups (supported devices) are provided by default.
Set up devicegruops for content management
Set up devicegroups for device layout and graphics.
Admin tools users
Create users that manage categories and content
Billing
Create Country/Operator pairs that have different billing rules from the SERVER menu
Select country/operator pairs that are used in the project
Configure prices, billing numbers and types
Add country/operator specific prices for each product

42. 5. Publishing the Service
WAP site distribution
Modify WML templates to match your brand
Upload images and templates to J2EE web application and restart it
from Tomcat manager
Site address is http//www.server.com/project/getcatalog/projectid
Bluetooth distribution (requires Bluestore)
Connect bluetooth gateways to network accessible from Midlogic server
Configure bluetooth gateways with static IP
Add gateway addresses and login information to Midlogic server
Update process
Manual via user interaction (update button)
(optional) Forced when new version is available
(optional) Periodic

43. Update Process
All of the application is updateable:
Framework files
Skin files
Content files
Admin Studio generates content packages with version numbers
Content has version-to-version update to minimize content package size
Verision to version update is not used with framework or skin files!
Cache Management
Whether content is online or offline is based on content priorization and device bound
content package size limit

45. Deep Customizing
Full Development Environment with MidXML

46. Powerful development environment
Top-notch rendering engine with 6 years of R&D
Full offline user experience
Scalable self-refreshing UI items
Automatic focus management
Optimized rendering algorithm
Effective and easy item stacking (hbox & vbox)
Item bordering with stylesheets for scalable graphics
Animation engine for rich user experience (improvements in v2.3)
Layered graphics even with Java MIDP 1.0 devices
Support for main JSRs like WMA/SMS API, MMAPI, Bluetooth
API, File Access API, Camera API
Full performance on mid-tier mass market phones!

47. Easy adoption from Web technologies
The paradigm for creating a ODP
Service with Midlogic is similar to the
WEB world
ODP Client customization uses MidXML,
a high level scripting language
comparable to html + JavaScript and
easily adopted by any Web designer
familiar with AJAX technologies
ODP Content is created just like
developing mini-web pages using
templates and action scripts (bones)
Service layer provides off-the-shelf
services like poll, RSS feeds, vote, quiz,
rate, blogpost etc.
For retrieving data from external sources
and integration, a XML API is provided
*World Class Product Award by Wireless Business and Technology Magazine 2003
*

49. MidXML Client Scripting Language
UI components such as radio buttons can be
made with MidXML UI components
MidXML scripting language enable full
customization and supports over 120 MidXML
tags
Script Components made with midxml are
called Actions (formerly known as bones)
Midlogic server includes already made Actions
for most of thinkable UI scenarios.
If there is a new component that is needed but
not included, it is easy to write it with MIDXML
User interface is built with horizontal and
vertical boxes, bones and screens. The
content/services are presented with templates
and populated with data
Logo Top bar
Softkey1 Softkey2
Box1 Box2
box3

50. Example: Artist Profile Item Type
Background
Image /
Content area
item name
Softkey1 Softkey2
box3
Field Name Bone Box
Field 1 Image image box1
Field 2 Subtitle text box2
Field 3 Description text box3
Field 4 Rating rating box2
Field 5 Blog blogpost box3
description
Blog
box1 box2 image subtitle
rating
Item type and its fields
assigned to content template's
locations
Item types are created with item type editor.
Each field in item type can be mapped
to a specified location in the content area.
Contenttemplate defines locations,so by modifying
the content template xml file, box1, box2...etc.
Locations can be modified or added new ones.
Content template item

51. Client Generation Service
Generate JAR/JAD file pair for each target device and target language
Systems automatically assigns correct Core Engine, Framework, Skin and
Content Package based on device properties
Content Package size is based on device properties set in device manager
E.g. 40 target devices and 3 languages = 120 jar/jad files
Each time new content version is published, server creates both:
Integrated Packages for first time users (application + content)
Content Packages for updating users
MNC
MCC
MNC
MCC
MNC
MCC
Device A
Language X Language Y
MNC
MCC
MNC
MCC
MNC
MCC
MNC
MCC
MNC
MCC
MNC
MCC
Device B
Language X Language Y
MNC
MCC
MNC
MCC
MNC
MCC
MNC
MCC
MNC
MCC
MNC
MCC
Device C
Language X Language Y
MNC
MCC
MNC
MCC
MNC
MCC
SettingsProduct templatesSkin filesSkin files
images
language files
stylesheet
SkeletonSkeleton
Home screen
Product Screen
Category screen
Configuration
files
Billing mode
files
Splash screen
Error page
Skeleton Bones
Game
Wallpaper
Ringtone
News
Vote
Subscription
Template Bones
Text field
Image
Play tune
Title
Choice
Subscribe
Order
Billing
information
Device
information
Content
data
Menu
Structure
Geniem
Runtime
Service Bones
Comment
Rate
Video
Images
Audio
Text
Sub-dir
Dir1
Main
SettingsProduct templatesSkin filesSkin files
images
language files
stylesheet
SkeletonSkeleton
Home screen
Product Screen
Category screen
Configuration
files
Billing mode
files
Splash screen
Error page
Skeleton Bones
Game
Wallpaper
Ringtone
News
Vote
Subscription
Template Bones
Text field
Image
Play tune
Title
Choice
Subscribe
Order
Billing
information
Device
information
Content
data
Menu
Structure
Geniem
Runtime
Service Bones
Comment
Rate
Video
Images
Audio
Text
Sub-dir
Dir1
Main

52. Deep Customization via MidXML
Development
environment composes
from any XML editor like
Eclipse, SUN Wireless
toolkit and device
emulators
Example Actions
Text
Comment
Rate
Image
Example Action MidXML scripts
Text Action
BlogpostAction
<bone>
<st n=”FLD”/>
</bone>
<bone>
<va n="commenturi"/>
<vbox n="comments">
<space h="0" w="0"/>
</vbox>
<hbox n="commentnavi">
<space h="0" w="0"/>
</hbox>
<c p1="set" p2="$serviceurl,$serviceuri,cpid"
t="pie" url1="commenturi"
url2="#1#2?sid=1&itemid=#3&comments=1"/>
<c p1="load"t="pie" var1="commenturi"/>
</bone>

53. How to design for multiple handsets?
3 x 3 principle
Skin design
Lo-res (128 wide), Mid-range (176 wide) and Hi-res (300+ wide) skins
Design all skins to use scaling for small deviations in height and width
Skeleton design
Create simple structure for Low-end devices and restricted number of
bones & templates (runtime 38 kB + 15Kb for templates & bones)
Normal structure for mid-range phones (runtime 45 kB + 20 – 40 Kb for
templates & bones)
Add high-end features to high-end devices like file access and camera
usage (runtime 65 kB + 20 – 80 Kb for templates & bones)
Associate skins and skeletons to correct device groups