4.3.1 DIEM UI PLATFORM DEFINITON

ubiquitousstrumpetΚινητά – Ασύρματες Τεχνολογίες

10 Δεκ 2013 (πριν από 3 χρόνια και 11 μήνες)

73 εμφανίσεις

NEUSOFT MOBILE SOLUT
IONS OY

4.3.1 DIEM
UI PLATFORM
DEFINITON

Devices and Interoperability EcosysteM


Neusoft

21.6
.2011




This document defines a multiplatform UI platform and
architecture proposal for DIEM application
user interfaces.


DIEM Deliverable 4.3.1
2








C
ONTENTS

Introduction

................................
................................
................................
................................
.........

4

DIEM UI Platform Requirements

................................
................................
................................
........

4

DIEM UI Platform Architecture and Design

................................
................................
........................

5

HTML5 based UI platform

................................
................................
................................
.................

5

UI

................................
................................
................................
................................
...................

6

Engine

................................
................................
................................
................................
............

6

Overview of existing Web
-
based UI platforms, frameworks and Libraries

................................
......

7

HTML5 Application Platforms

................................
................................
................................
...........

7

PhoneGap

................................
................................
................................
................................
......

7

WAC

................................
................................
................................
................................
...............

7

Titanium
................................
................................
................................
................................
.........

7

Full Featured HTML5 Frameworks
................................
................................
................................
....

8

Sencha Touch

................................
................................
................................
................................

8

M
-
Project

................................
................................
................................
................................
.......

9

jQTouch

................................
................................
................................
................................
.........

9

Jo

................................
................................
................................
................................
..................

10

DHTMLX Touch

................................
................................
................................
............................

10

LimeJS

................................
................................
................................
................................
..........

11

jQuery Mobile

................................
................................
................................
..............................

11

HTML5 Frameworks/Libraries With Limited Features

................................
................................
...

11

52framework

................................
................................
................................
...............................

11

Sproutcore

................................
................................
................................
................................
...

11


DIEM Deliverable 4.3.1
3



CSS3 Action Framew
ork

................................
................................
................................
..............

12

Alloy UI

................................
................................
................................
................................
........

12

Google Web Toolkit

................................
................................
................................
.....................

12

Other Internet Application Frameworks

................................
................................
........................

12

OpenLaszlo

................................
................................
................................
................................
..

12

Overview of other
existing portable UI platforms, frameworks and Libraries

...............................

13

Qt framework

................................
................................
................................
................................
.

13

Rhodes

................................
................................
................................
................................
............

15

Corona SDK

................................
................................
................................
................................
.....

16



DIEM Deliverable 4.3.1
4





I
NTRODUCTION

This document defines a multipl
atform UI platform and architecture proposal for DIEM application
user interfaces. It also lists and reviews various
UI

frameworks and libraries. This document is
useful especially at the study phase of a new project.



DIEM

UI

P
LATFORM
R
EQUIREMENTS


The
UI platform for DIEM applications has two major requirements:

1.

Multiplatform support. The same UI definition should run on as many different
devices, screens and platforms as possible.

2.

Platform API access. Access to APIs and functions offered by the native
platform
are needed.

A significant area of research are Web based UI frameworks, but it is not a mandatory
requirement that the DIEM UI platform is fully Web based. HTML5 technologies will be studied
and tested, but due to the requirement of native APIs al
so non HTML5 based frameworks will be
evaluated and compared to HTML5 based frameworks in regards to performance and versatility.


DIEM Deliverable 4.3.1
5



DIEM

UI

P
LATFORM
A
RCHITECTURE AND
D
ESIGN

HTML5

BASED
UI

PLATFORM

Creating a multiplatform mobile application using HTML5 fram
eworks consists of implementing
the UI and engine on top of a thin client. UI is created by using HTML, CSS and Javascript. Engine
part is implemented in Javascript, but also native code can be used to provide features from the
device which are not otherwi
se available.

In
Figure
1

the typically implemented parts are represented in blue color. The application box
consists of the UI and Javascript engine.
Green color indicates libraries and platforms available by
various vendors. Black boxes are representing available tools and device APIs.



FIGURE
1

PARTS OF A MOBILE WE
B APPLICATION; BLUE
BOXES ARE PARTS OF T
HE CORE IMPLEMENTATI
O
NS OF THE APPLICATIO
N, GREEN
BOXES ARE LIBRARIES
AND FRAMEWORKS BY OT
HER SUPPLIERS.



DIEM Deliverable 4.3.1
6





UI


UI is created by using HTML, cascade stylesheets and Javascript together. The amount of HTML
versus Javascript code depends on used libraries (if used). For example
Jo application consists
mostly of Javascript; The HTML code stays mostly as a wrapper or a mediator between the
browser/client and Javascript.

E
NGINE


Engine is implemented with Javascript, but parts of it can be implemented as native code. For
example Pho
neGap supports this by plugins which are connected to the application’s Javascript
engine by Javascript API. See
http://wiki.phonegap.com/w/page/36752779/PhoneGap
-
Plugins

for
details
.



FIGURE
2

PLUGIN SYSTEM IN PHO
NEGAP. THE PARTS WHI
CH NEED TO BE IMPLEM
ENTED ARE INSIDE THE

RED CIRCLE.


DIEM Deliverable 4.3.1
7




O
VERVIEW OF EXISTING
W
EB
-
BASED
UI

PLATFORMS
,

FRAMEWORKS AND
L
IBRARIES

HTML5

A
PPLICATION
P
LATFORMS

P
HONE
G
AP

PhoneGap

is an open
-
source mobile development framework developed by Nitobi Software and
IBM. It enables software programmers to build applications for mobile devices using JavaScript,
HTML and CSS, instead of less
-
popular languages such as Objective
-
C. The result
ing applications
are hybrid, meaning that they are neither truly native (all layout rendering is done via the webview
as opposed to Objective C or Corona apps) nor purely web based (much of the functionalities
would be supported by HTML5). Disadvantages
-

hybrid applications have no 100% access to
device API.

http://www.phonegap.com/


WAC

The Wholesale Applications Community (WAC) is an organisation that is creating a unified and
open platform to allow mobile softwar
e developers to more easily write applications usable on a
variety of devices, operating systems and networks.

The WAC application development platform is based on standard technologies based such as
HTML, Javascript, and Cascade Style Sheets (CSS). Specif
ically this platform builds on the work of
the former Open Mobile Terminal Platform Ltd.'s BONDI project, the Joint Innovation Lab (JIL)
device APIs and the GSM Association's OneAPI program.

http://www.wacapps.net


T
ITANIUM


DIEM Deliverable 4.3.1
8



Today you need to be in three places at once: Online, On
-
phone, and On
-
desktop. Titanium
empowers you to create immersive, full
-
featured applications that go beyond browser boundaries
and stick with your audience whenever and wherever they are.

Tit
anium applications are divided into 4 main parts:

1.

The html/css/javascript code that makes up the core application logic and UI

2.

The APIs that access native device/desktop functionality, analytics or other modular
functionality

3.

The language
-
OS bridge that co
mpiles web code into native application code

4.

The run
-
time shell that packages the application for cross
-
platform distribution.

Once built, Titanium
-
based applications can be tested, packaged, and distributed through the
Appcelerator

Network’s cloud services. The Titanium platform is open source, so you may also
access the source code to the complete application at any time for your own use.

http://www.appcelerator.com/


F
ULL
F
EATURED
HTML5

F
RAMEWORKS


S
ENCHA
T
OUCH

Sencha Touch, the first HTML5 framework for mobile devices. It comes with a comprehensive UI
widget library, complete touch event management with CSS transitions and an extensive data
package.

Documentation:



http://www.sencha.com/learn/Sencha_Touch



http://dev.sencha.com/deploy/touch/docs/


Key features:



A good widget library

o

See
http://dev.sencha.com/deploy/touch/examples/kitchensink/



Data integration



Touch events



Transitions/animations



DIEM Deliverable 4.3.1
9



M
-
P
ROJECT

The
-
M
-
Project is an HTML5 JavaScript framework that targets iOS, Android, BlackBerry and webOS

platforms. It makes use of jQuery on the JavaScript part and contains all UI and core files with
features like offline support, internationalization and more.

The
-
M
-
Projects uses NodeJS based build tools called Espresso. It takes care of all the different

files
and resources that may live in the project. The
-
M
-
Project is designed to build a application, in
structured manner; this means you can split your code into several files, like Controllers, Views,
Models, etc.

The project files (Controllers, Views, M
odels, etc.) are merged, into a single JavaScript file. So a
developer can write the code in a nice structure, but single files are compiled and shipped to the
client.


Documentation:



http://the
-
m
-
project.net/documentation.html


Key features:



MVC model



NodeJS based build tools (called Espresso)



Offline support (automatic cache manifest generation)



Rich User Interfaces



DataProvider for local and remote storage persistence



Internationaliz
ation (i18n)


J
QT
OUCH

jQTouch is a jQuery plugin with native animations, automatic navigation, and themes for mobile
WebKit browsers like iPhone, Nexus One, and Palm Pre.


Documentation:



https://g
ithub.com/senchalabs/jQTouch/wiki/



DIEM Deliverable 4.3.1
10



Key features:



Native Webkit animations



Callback events (touch, swipe, orientation change)


J
O

Jo is a JavaScript framework for HTML5 capable browsers and devices. It was originally designed to
work on mobile platforms as a GUI and light data layer on top of PhoneGap. Since its creation, Jo
has also been tested successfully as a lightweight framewor
k for mobile browsers, newer desktop
browsers, and even dashboard widgets.


Documentation:



http://joapp.com/docs/index.html

Key features:



Provide a consistent and modular event model between objects



Wrap DOM

and device
-
specific events into a cohesive gesture system



Insulate developers from different persistent storage solutions


DHTMLX

T
OUCH

DHTMLX Touch is an HTML5
-
based JavaScript library for building mobile web applications. It is not
just a set of UI widg
ets, but a complete framework that allows you to create eye
-
catching, cross
-
platform web applications for mobile and touch
-
screen devices.

DHTMLX Touch is still in beta and many features are missing.

Documentation:



http://docs.dhtmlx.com/touch/doku.php


Key features:



A good widget library


DIEM Deliverable 4.3.1
11



o

See
http://www.dhtmlx.com/touch/samples/mobile/



Upcoming: Full
-
featured visual designer



Upcoming: Global
datastore



Upcoming: Support for client storage



L
IME
JS

LimeJS is a HTML5 game framework for building fast, native
-
experience games for all modern
touchscreens and desktop browsers.

http://www.limejs.com/


J
Q
UERY
M
OBI
LE

A unified user interface system across all popular mobile device platforms, built on the
rock
-
solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive
enhancement, and has a flexible, easily themeable design.

http://jquerymobile.com/

HTML5

F
RAMEWORKS
/L
IBRARIES
W
ITH
L
IMITED
F
EATURES

These frameworks do not provide all requirements of previous chapter.

52
FRAMEWORK

52framework contains all the header, nav
, section, article, footer tags which are the basic html5
tags, with full documentation and growing community this frameworks looks promising. Features
like rounded corners, text
-
shadow, box
-
shadow, html5 markup, grid system, css reset are just a
small lis
t, this framework is worth a look if you want to dive in HTML5 and CSS3.

http://52framework.com/


S
PROUTCORE

SproutCore is an HTML5 application framework for building responsive, desktop
-
caliber apps in
any modern we
b browser, without plugins.


DIEM Deliverable 4.3.1
12



With documentation and support community SproutCore is another solid framework for
developers. The demos are pretty fast and they look promising with what they are said to do.

http://ww
w.sproutcore.com/


CSS3

A
CTION
F
RAMEWORK

Hosted on Google code, CSS3 Action Library aims to gather all the best CSS3 effects in one place.

http://code.google.com/p/css3
-
action
-
framework/


A
LLOY
UI

Alloy is a UI meta
-
framework that provides a consistent and simple API for building web
applications across all three levels of the browser: structure, style and behavior. Its purpose is to
help make building and designing web applications an enjo
yable experience.

http://alloy.liferay.com/


G
OOGLE
W
EB
T
OOLKIT

Google Web Toolkit (GWT) is a development toolkit for building and optimizing complex browser
-
based applications. GWT is used by many products at Goog
le, including Google AdWords and
Orkut. It's open source, completely free, and used by thousands of developers around the world.

http://code.google.com/intl/fi
-
FI/webtoolkit/


O
THER
I
NTERNET
A
PP
LICATION
F
RAMEWORKS


O
PEN
L
ASZLO

OpenLaszlo is an open source platform for the development and delivery of rich Internet
applications. It is released under the Open Source Initiative
-
certified Common Public License (CPL).

The OpenLaszlo platform consists of

the LZX programming language and the OpenLaszlo Server:


DIEM Deliverable 4.3.1
13





LZX is an XML and JavaScript description language similar in spirit to XUL, MXML, and
XAML. LZX enables a declarative, text
-
based development process that supports rapid
prototyping and software deve
lopment best practices. It is designed to be familiar to
traditional web application developers who are familiar with HTML and Javascript.



The OpenLaszlo Server is a Java servlet that compiles LZX applications into executable
binaries for targeted run
-
time

environments.

http://www.openlaszlo.org/

O
VERVIEW OF OTHER EXI
STING PORTABLE
UI

PLATFORMS
,

FRAMEWORKS AND
L
IBRARIES

Q
T FRAMEWORK

Qt

is an application framework; build on top of native APIs. Qt applications are also written in
native language, but due to Qt’s layered architecture they are easily portable to all platforms with
Qt APIs. Following platforms are currently supported:



Symbia
n



Meego, Linux



Windows



Mac OS X



Android (N
ecessitas
)

T
here are two
types of Qt applications (see
Figure
3
): Qt Quick applications and applications
written in native language. Qt Quick applications are written in JavaScript based declarative
Qt
Meta
-
Object Language

(QML). QML requires own runtime,

which maps QML UI declarations to
real Qt objects and allows execution of JavaScript.


DIEM Deliverable 4.3.1
14




FIGURE
3

PARTS OF QT APPLICAT
IONS; BLUE BOXES ARE

PARTS OF THE CORE IM
PLEMENTATIONS OF THE

APPLICATION, GREEN B
OXES ARE
LIBRARIES AND FRAMEW
OR
KS BY OTHER SUPPLIER
S.



Parts that Qt applications typically need to implement are shown in blue i
n
Figure
3
.

Both Qt Quick
and native Qt applications

may need to implement custom UI components or engine parts in
native language.

Green color indicates
Qt
libraries.

Black boxes are representing available tools
and device APIs.

Qt applications should never use native device APIs directly, but rather hide
them
behind custom Qt API by using Private Implementation pattern.


DIEM Deliverable 4.3.1
15



R
HODES

Rhodes framework allows rabidly build native applications for following smartphones:



iPhone



Android



RIM



Windows Mobile and Windows Phone 7

UI framework is based
on

MVC architecture, whe
re

views are written in HTML and functional parts
in Ruby. Rhodes contains various commonly used components but can also be extended to use
native APIs. In addition
,

Rhodes product family offers RhoSync

for

backend integration.




DIEM Deliverable 4.3.1
16



C
ORONA
SDK

Corona SDK

is a
scripting language
-
based toolset for easily creating applications. The focus is on
fast and easy creation of visually strong applications, such as games.

Programs are written using
LUA scripting language, that uses the Corona API
s to run Objective
-
C code on the device.

Corona APIs provide
s access to

a large amount of device APIs and also integrate several game
focused libraries, such as Box2d physics library.
3
rd

party developers may create LUA
-
based
libraries for convenience.
Dra
wback on the Corona is that the platform is closed source and 3
rd

party developers can not add
low
-
level custom API libraries or functionality to it, thus relying on
the SDK to provide all the needed functionality.

At the time of writing, Corona applicati
ons can be por
ted to iOs and Android devices.



Corona application

Corona SDK

Device and platform APIs

LUA interpreter

Corona APIs

Lua script

Custom LUA libraries