madcp: a framework to support cross-platform application...

Technical Report 30 April, 2014

1

MADCP: A Framework to Support Cross-Platform Application Development for Mobile Devices

Hossein Arabi and Mazliza Othman [email protected] [email protected]

Faculty of Computer Science & Information Technology

University of Malaya Lembah Pantai

50603 Kuala Lumpur

ABSTRACT

We propose the Mobile Application Development for Cross Platform (MADCP) framework to support smartphone application development across multiple platforms. The purpose is to overcome a number of problems we have identified in developing smartphone applications for multiple platforms, such as the need to install multiple SDKs when developing an application for different platforms, platform interface dependency, application update latency and the need to hire developers with expertise on multiple platforms. MADCP allows a developer to write only one base code that can then be ported to different platforms.

Keywords: cross platform mobile application development, mobile application development framework

1. INTRODUCTION

Use of mobile phones has shifted from mainly for voice communication to texting, e.g., Smith [8] found that barely 53% of Americans prefer to receive voice calls than text messages and young adults are more likely to use texting. A similar trend is observed in UK [5], where text-based communications supersede voice calls, either in the form of social networks (73%) or traditional texting (90%).

As the use of smartphones becomes more prevalent, the usage trend shifts toward the use of applications for various purposes. A study on how people use smartphones [11], segments usage into seven purposes: Accomplish, Socialize, Prepare, Me Time, Discover, Shop and Self Express. The use of smartphones for Me Time is the highest (60%) and involves the use of applications for social networking, entertainment, gaming and shopping. Another survey [14] found that 70% users have more than 10 applications installed on their smartphones and 60% of respondents download up to 5 new applications a month.

The Android platform dominates the market in year 2012 (497 million units sold) and 2011 (135 million units sold) [12, 13], followed by iOS and Blackberry. There are 70 application stores; the revenue from the sale of applications for smartphones and tablets was $7.3 billion in 2011 and it is estimated that it will rise to $36.7 billion by 2015 [13]. This shows that technology focus is trending toward smartphones and mobile devices, and that mobile Internet will soon overtake fixed Internet because users are willing to browse the Internet using their smartphones, regardless of location [3].

The smartphone application market is growing fast as the increasing number of smartphone users demand better and more varied applications to cater to their needs. In response to this demand, software development companies begin to focus and specialize in producing smartphone applications. Each smartphone brand has it is own software development kit (SDK), programming language and development environment, which means that the software company has to hire a development team with expertise in each. This constrain may force some software companies to focus on only one smartphone platform.

In order to overcome this constrain, we propose a cross platform development framework, where an application developer develops only one code base application that can run on multiple platforms. The smartphone, i.e. the client, receives the incoming application data from the server in a predefined data structure. Smartphones that run on different platforms receive the same data feed and create the application for their respective platforms.


2

Using our system, a software company need not hire programmers with specific expertise for different types of smartphone platforms because the data feed is used to build the program at run time for different platforms. Another advantage of our system is that it allows each type of smartphone to keep its own interface, design and uniqueness.

This paper is organized as follows. Related work is discussed in Sections 2 and 3: Section 2 discusses the application development for two popular platforms while Section 3 discusses existing cross-platform frameworks and their strengths and weaknesses. Section 4 discusses our proposed framework, followed by an explanation of how our framework is used to develop a prototype in Section 5. Section 6 compares our framework to the existing frameworks and Section 7 concludes.

2. RELATED WORK

Smartphones are an advanced version of mobile phones in terms of performance and user interface features [9]. As the number of mobile devices increases rapidly, mobile services have also been expanding tremendously and generates a large mobile traffic, which indicates that mobile devices have become an essential tool in our daily life [6]. There are many and a variety of smartphone applications in the market offered to meet users’ needs and demands. In order to develop an application, a developer has to choose a specific smartphone platform because different platforms support different programming languages and tools. Before we discuss the cross-platform technology, we discuss the two popular development platforms, namely iPhone and Android, to highlight their specific tools and environments.

2.1. iPhone

In order to develop an application for iPhone platform, we need to install the tools that enable the programmer to write, debug and test the code on an Intel-based Macintosh computer. Before developing an application, the developer has to apply for a developer account from Apple, which authorizes the developer to start building the desired application and test it on the actual device. The application must be developed under a set of predefined rules and standards set by Apple. After completing the development, the developer creates the binary file and submits it to Apple. Upon approval, the application is automatically published to the market and is ready to be downloaded by users.

The basic tools are the iPhone SDK (a package consisting of Xcode IDE) and the library for the executable file these are the development environment, which can be downloaded from the Apple Developers website.

The native programming language for an iPhone application is Objective-C, which can communicate directly with the device hardware. The iPhone SDK is also based on the Objective-C language. The Xcode integrated development environment (IDE) includes two modules: Interface Builder and Instruments. The Interface Builder is used to create and visualize the user interface, and bundle it with the code that can communicate with the backbone code. The Instruments is used for application analysis, to examine the application performance at runtime and the effectiveness of memory usage.

The iPhone application development follows the Model-View-Controller (MVC) design pattern (shown in Fig. 1), which requires the developer to be aware of this structure before he starts coding. The MVC pattern helps to separate the code into three independent parts, which reduces the complexity of the development architecture.

Fig. 1: MVC design pattern


3

The iPhone user sees the View and interacts with it by tapping on the screen or inputting data via the keypad. The Controller tells Model what data need to be cached and represent the data. Model has full control over View and tells View what to show and how to display the Interface builder that the developer designed. The View renders back the user interface to Model to check and verify the changes and the latest updates with Controller.

2.2. Android

Google released an open source smartphone operating system (OS) called Android, which is built on the Linux kernel with Apache License. Because Android is open source, many mobile companies adopt Android as their leading smartphone OS. A developer account is not required and the developer can start developing an application right away and creates the binary file when the development is completed. The binary file is submitted to the Android market to be made available online for smartphone users.

There are dozens of Android mobile devices in the market with different screen sizes, resolutions, versions and performance, making it hard to develop an application that supports all Android devices in terms of screen size and version.

The Android SDK comes with a powerful set of features. It supports 2D and 3D game development based on OpenGL library and animation libraries to provide animated transition, video, audio and multimedia. The SDK supports multi touch feature on some Android devices and the Chrome-based browser is light and fast for browsing the Internet and watching videos.

The Android application can be developed on any OS. The application is written in the native Android programming language, i.e. Java, but it does not need the Java Virtual Machine (JVM) to compile the code. Instead, it supports the Dalvik Virtual Machine, which recompiles the Java classes into byte code. The Dalvik Virtual Machine runs on the Linux process and includes the running application. The main advantages of using Dalvik are it minimizes power usage and battery consumption, and it utilizes limited memory while optimizing CPU performance.

Since Android is an open source platform, there are many IDEs and tools available for developing Android applications. The most recommended is Eclipse because it comes with Android extension and tools. There are two main Android tools in Eclipse: (i) Emulator, which the developer uses to debug and test the application before deploying on the actual device. The emulator acts as a real device with full support of Android SDK for multiple versions. (ii) Android Debug Bridge (ADB), which acts as a bridge between the computer and Android device and is used for debugging the application running on the device by checking the output and shell commands.

3. THE CROSS PLATFORM CONCEPT

In software development, the term cross-platform refers to a software or concept that helps to implement one system that maintains a single source while targeting multiple output platforms or interfaces. Because there are multiple types of smartphone platform and it is hard to develop an application for each, developers prefer to write a single code base that can run on multiple devices as it is easier to maintain the code [2].

In the smartphone industry, developers are looking for a way to maintain one code and use an engine to compile the code for multiple smartphone platforms (illustrated in Fig. 2). Below we discuss three cross-platform frameworks: RhoMobile, MoSync and PhoneGap.

3.1. Rh

Rhodes imost smarun on dif

RhoMobiRhoGallesmartphoand sync

RhoHub upload/doapplicatioapplicatioapplicatio

This systhave a stprogrammnative apmeaning presentati

JavaScripis used toweb-langthough RRhodes uthem to th

hodes

s a cross-platartphones, sucfferent smartp

ile offers its aery. Rhodes one platforms.

data, which th

is an environownload data on without inon market thatons in a single

tem targets detrong backgroming languagepplication for t

that there is aion.

pt is used as tho add the app

guage applicatRhodes uses wuses the MVC he View throu

Fig. 2

tform smartphch as iPhone, phone platform

application deis an open RhoSync is a

he application

nment tool forto/from the c

nstalling multit allows devel

e market.

evelopers whoound in web es, Rhodes is the smartphon

an embedded b

he controller oplication logictions, where itweb-based lan pattern, the d

ugh Model.

2: Cross-platfo

hone applicatiAndroid and

ms by just one

evelopment sosource frame

a local synchron may retrieve

r Rhodes and cloud. Its maiple smartpholopers to uplo

o are not comflanguages, susupported by

ne platforms. browser in the

of interactionsc, such as hardt can be combnguages, it p

developer need

4

orm smartphon

ion developmBlackBerry.

e code base pr

olution througwork that is onization serv

e in offline mo

RhoSync. Itain purpose ione SDKs onoad application

fortable with uch as Ruby, y most OS. Rh

The interfacee native applic

s between the dware or devibined with HTprovides similds to keep his

ne developme

ment platform The strength

roject.

gh its four prused to dev

ver for enterprode.

t enables Git s to enable th

n the operatinns to the mark

changing langHTML, Java

hodes uses thee is designed acation to rende

user and smaice features, i

TML or generlar services a methods or o

ent concept

developed byh of this platfo

roducts: Rhodelop native arise applicatio

for the enterphe framework

ng systems. Rket and manag

guages for eaaScript and Ce web developand manipulater the HTML

rtphone screeninto the projerate the HTMLas the core naoperations insi

Tec3

y Motorola. Rorm is the app

des, RhoSync,applications fns that can be

prise applicatik to build a cRhoGallery oge the set of c

ach individual CSS. Because pment paradigted using HTMand CSS code

n. Embeddedct. Ruby woL code dynamative applicatide the contro

chnical Report30 April, 2014

Rhodes coversplications can

, Rhohub andfor almost alle used to store

ion and it cancross platformoffers its owncross platform

platform andit uses web-

gm to create aML and CSS,e for interface

d Ruby (ERB)rks like other

mically. Evention. Because

oller and maps

t 4

s n

d l e

n m n

m

d -a , e

) r n e s


5

Rhodes development files are compiled and converted to binary executive files that can be used as a native program for smartphones. The binary file is the same as the native binary and can be installed on the phone easily and be distributed through distribution channels, such as AppStore. The developer has to sign up for the developer programs and obtain the cryptographic keys required to sign applications even though he will not be writing in the platform’s native SDKs.

The strengths of Rhodes are as follows. Rhodes is a cross-platform development tool with one code base project, aimed at enterprise applications. The developer has to be familiar with only web-based programming languages. The framework makes it easy to create applications that present a series of screens that include standard UI widgets, including common phone UIs such as mapping. It makes the traditional user interface patterns commonly found in most information applications easy and portable. Because Rhodes is open source, you can examine the code and see exactly what it is doing under the covers. You can extend it, contribute improvements and fixes, or customize your own version of Rhodes, if needed. Rhodes developers do not have to worry about writing data storage and sync logic into their applications and can focus, instead, on the presentation and business logic.

The weaknesses of Rhodes are as follows. In order to use Rhodes, we have to install the individual smartphone’s SDK. This means if we want to have multiple platform support for a smartphone application, first we are required to install the desired smartphone SDK on it, depending on the OS. Then we have to compile the single code-base project for the desired smartphone type. Rhodes is unsuitable for consumer applications that demand rich interactive graphic interfaces or platform-specific native UI controls. Each platform must follow its own interface guideline, which makes it hard for the developer to design an interface to include all smartphone styles.

3.2. MoSync

MoSync is a solution developed with single support for Java Micro Edition (ME). Java ME supports several platforms, including Windows Mobile, Android, iOS, Moblin/MeeGo, Blackberry and Windows 7. MoSync SDK is developed using the C/C++ language with a variety of libraries that helps the developer to easily add features and components to the application, such as user interface element, multimedia and graphic component. The programmer writes a single code and then packages it for different platforms. Because C/C++ programming language has better performance compared to other languages, such as web development languages, MoSync is suitable for developing games and multimedia applications.

The SDK IDE is based on Eclipse. The developer is able to write the code, debug and test it by running the application through the emulator that is bundled with Eclipse IDE. During the build process, firstly, the GNU Compiler Collection is called to generate the compiled source code for the targeted device. Pipe-Tool is called to assemble and link the external resources and libraries. The cross-platform development is made much simpler by using Pipe-Tool as a transformation engine that makes a single code run on any available mobile devices and smartphones.

Pipe-Tool merges the recourse compiler, assembler code and the code linker, and then completes the code verification. This function removes dead code and optimizes the code to produce a high level output for each of the specific platform. It is called automatically when the developer build the application through Eclipse IDE. Another feature of the SDK, called Finalizer, helps the developer to automatically build the application for different types of devices as long as the he defines the criteria, such as the minimum memory and the screen resolution.

The strengths of Mosync SDK are as follows. It has a better performance for developing game applications. It has a device database profile. There is one emulator for debugging and testing that supports multiple platforms. Instead of one emulator for each phone’s standard, there is a general standard that meets the phone’s standard and specification.

The weakness of Mosync SDK is it does not support all features of native application. Any update to an application would require re-packaging of the application so that it can ported to multiple platforms.

3.3. PhoneGap

PhoneGap is a cross-platform development framework used for developing native applications for smartphone and is an open source framework. Currently, PhoneGap supports iPhone, Android, BlackBerry and Windows Mobile [1]. Because it takes advantage of pure web technology and tools, the developer has to be an expert in HTML5 and JavaScript. PhoneGap provides a very powerful JavaScript library for the developer, so the user interface and


6

application behavior looks similar to the native application instead of a web application [4]. It packages the web technology into the native smartphone application, which the developer can submit to its corresponding market, e.g. iPhone applications are submitted to AppStore.

PhoneGap transforms a web application into a native application by using Webkit, which is a translator tool that parses the web languages to the native smartphone’s programming languages [7]. This makes the native application an online native application, which means the smartphone has to be connected to the Internet in order to run the application [1]. The application is not a mobile website because it is able to interact with most smartphone hardware features, such as vibration, accelerometer and GPS.

There are three steps to develop an application. Firstly, build the application with web standards based on HTML5. Second, wrap it with PhoneGap using the free open source framework or PhoneGap Build service to get access to native APIs. Finally, deploy to multiple platforms using standards based on web technologies to bridge web applications and mobile devices.

PhoneGap’s main advantage is for web developers since all the application code is in HTML, CSS and JavaScript. Other strengths of PhoneGap are as follows. The same UI can be used for Web, mobile and desktop computers. It generates a mobile web application (easier to convert a website to the mobile application). The resources for web technology are much more available than native resources. Any extensions are possible and easy to implement.

We identified two weaknesses of PhoneGap. Firstly, when an application is updated, it has to be repackaged before redeployment on multiple platforms. Secondly, there have been cases where Apple rejects PhoneGap applications because the HTML interface does not give a 'native feel' [10]. Therefore, extra care has to be taken in order to make sure PhoneGap applications comply with iOS user interface guidelines.

4. THE PROPOSED FRAMEWORK

After analyzing the existing cross-platform frameworks, we propose a new cross-platform system, named Mobile Application Development for Cross Platform (MADCP), to address the following problems: (i) eliminate the need to install multiple SDKs in order to develop an application for multiple platforms; (ii) overcome platform interface dependency, where an application developed for multiple platforms have the same look and is unable to take advantage of the unique design and interface of each platform; (iii) avoid application update latency smartphone applications may require frequent updates if it is a business application. Because the existing frameworks support application development in offline mode, an application is updated locally and later the binary is re-sent to the market to replace the old application binary; and (iv) eliminate the need to hire developers with expertise on multiple platforms.

In this section, we explain MADCP’s concept and the methods we use. The platform is divided into three layers, namely the Web Portal Layer, Server Layer and Client Layer (Fig. 3). We describe the basic system before discussing the three layers in detail. We choose the online client-server paradigm so that we can overcome the existing frameworks’ update latency weakness. Using MADCP, the client (smartphone) may receive the update immediately after any changes are applied to the data on the server. There are two types of users in this system: users of the application on the client who sees the smartphone screen and interface, and the developer who develops a cross-platform application using the Web Portal.

The WebThe deveapplicatioapplicatioServer Lacontains meaningf

The clienvisualizesdifficult t

The Webapplicatiosystem arinstalls a the MySQlayer and

The follo

4.1. Th

The Webdevelopinthe applicapplicatiojob by hbrands. Tapplicatioelement w

Fig. 4 shEach timdetermine

Fig.

b Portal Layereloper only hon contains mon views in a ayer managesthe XML con

ful than the ac

nt acts as a ts the text-baseto find someon

b Portal Layeron server is thrchitecture anJava listener

QL database sd the web porta

owing sections

he Web Porta

b Portal Layeng applicationcation. The don into multiphiding the smThe developeon’s views intwith the XML

hows the intee a view is upe if it has the

3: Overall co

r eliminates thhas to create

multiple views structured Exts the XML content correspo

ctual programm

translator or bed data feed. ne to manage

r and Server he running prnd makes the

on the applicserver back toal.

s discuss each

al Layer

er offers a wns. After loggdeveloper inteple views and

martphone natier must undeto a correct X

L tags.

erface offered pdated, the delatest version

ommunication

he difficulty inone applicatthat are mapptensible Markontent. Whenonding to theming code.

browser that Because mosthe smartphon

Layer are horogram on the

web portal acation server, the client. Th

layer and the

web-based serging in to his eracts with thtranslating ea

ive applicatiorstand the XML format. T

by the Web eveloper increan of the applic

7

ns between mu

n hiring expertion and provped together (ekup Language

a client reque requested vi

presents the st people in thne data feed.

osted on a sere physical servand server laywhich is resp

he database se

detail of their

rvice. A devaccount, the d

his layer to crach view to thon language aXML structureThe XML form

Portal Layer ases the versication. The "V

ultiple platform

rt smartphone vides the dataexplained in S(XML) forma

uests for the diew. MADCP

latest updatehe IT industry

rver that deplover that proviyer accessibleponsible for alerver is a com

r architecture.

veloper has todeveloper caneate a smartp

he XML data and making ie and the formation rules m

for the develon number, wView Data" te

ms and a remo

developer teaa feed for eaSection 4.3). Tat through thedata, the serveP uses XML

ed view to thare familiar w

oys the Tomcides the logicae from the htll clients requ

mponent that is

.

o register an n create an appphone applicatformat. This lt available acrmation rules

map the native

oper to createwhich is then uext area is wh

Tec3

ote server

ams for multipach applicatioThe developer

e Web Portal Ler sends the dformat becau

he end user, iwith XML, it

cat applicational and graphicttp port. The uests and fetchs shared betwe

account in oplication and tion by breaklayer eases thcross multiples to translate e smartphone

e views for anused by the Chere the develo


ple platforms.on view. Anr provides theLayer, and thedata feed thatuse it is more

i.e. the clientwould not be

n server. Thecal tier of theServer Layerhes data fromeen the server

order to startthe views for

king down thehe developer’se smartphone

the targeteduser interface

n application.lient Layer tooper enter the

t 4

. n e e t e

t e

e e r

m r

t r e s e d e

. o e

XML codthe views

Informatiretrieved

4.2. Th

This layea structurand the w(shown inthe informsmartpho

de. A develops.

ion about the by the Server

F

he Server Lay

er is responsibred format in tweb portal. It n Fig. 5). Thmation regard

one screen), ap

per may write

developer's ar Layer.

(b) Th

ig. 4: Web P

yer

ble for gatherinthe database. consist of th

e Database Coding the applipplication nam

e the XML co

account and th

(a) The int

he View List a

Portal Layer: T

ng informatioIt acts as the m

hree componenontroller handication details

me, ID, version

8

ode offline and

he application

terface to crea

after the five v

The interface t

on about an apmain componnts: Database

dles the data sts, such as then number etc.

d later logs in

ns he creates

ate a new view

views have be

to create view

pplication fromnent of the syse Controller, Storage and fete mother view

n to his accoun

is stored in t

w

een created

ws for an appli

m the Web Postem that contrSystem Contrtches the needw (the first sc

Tec3

nt in order to

the database, w

cation

ortal Layer anrols all the cli

roller and Moded XML data creen the use


create/update

which can be

nd storing it inient platforms

obile Gatewayfeed. It holds

er sees on the

t 4

e

e

n s y s e

The secooperationthe databclients. Cthe gatew

The Servconsists othe clientthe platfoexception

4.3. Th

At the Clconcurren

Interfinterfaand pelemecharaclike an

FunctoperaRefera new

Inforconten

The clienthe SysteControllemaps it to

nd componenns. When it rebase and returClients commuway receives a

ver Layer is aof multiple smt platform to dorm is supporn and error bec

he Client Lay

lient Layer, thntly and has fu

face design aface design anpositioning of ents, such as bcteristics and nd its exact lo

tional behavtions. Some oring to Fig. 6

w scene.

mation content, which vari

nt communicatem Controllerer extracts the o objects. So

nt is the Systeeceives a requrns it to the cunicate with th request, it pa

an intermediatmartphone pladetermine wherted for the scause if this la

yer

here are multiull control ove

and style Thd style informindividual inbackground aattributes. By

ocation on the

vior The dof the interfa

6, when the us

ent Besides ies depending

tes with the ser, which thenXML contenthe Applicatio

Fig. 5: I

em Controlleruest from the cclient. The Mhe server throuasses it to the S

te layer betweatforms that reether it has thespecific applicayer fails, the

iple types of er them by spe

he client has nmation from thterface eleme

and buttons. Ty understandin

view.

data feed froace elements aser taps the “L

the interface on the develo

erver via the Mn stores it in nt and passes ion Builder wo

9

Internal server

r, which is theclient, it procobile Gatewaugh the gatewSystem Contro

een the Clientequest for thee right to accecation. This lwhole system

smartphone thecifying the fo

no a priori knohe server. Theents. Fig. 6 sThe individuang the object,

om the serverare bounded

Level 01” butt

elements and oper’s goals.

Mobile Gatewthe database

it to the Parserorks on the obj

r architecture

e decision maesses the requ

ay is a middleway, which listoller.

t Layer and th application cess the contenlayer has to b

m fails.

hat communicollowing appl

owledge aboue information ishows an exaal element is t

the client wo

r determines to an action, on, he trigger

their behavio

way (see Fig. 7e. When the r Controller, wjects, not the t

aker in the syuest and fetcheware betweentens for incom

he Web Portacontent. The nt. The Server be well design

cate with a selication details

ut the applicatiis graphical d

ample of a vietreated as an

ould know how

the client’s which is trig

s an action to

or, the user exp

7), which senduser runs th

which understtext-based XM

Tec3

ystem and it phes the requesn the server r

ming client req

al Layer. The Server Layer Layer also chned to handle

erver that servs.

ion interface. etails, such as

ew consisting object, which

w the element

application bggered by useleave this sce

pects to see th

ds the receivehe applicationtands the XMLML content.


performs mostted data fromresources andquests. When

Client Layerauthenticates

hecks whethere any type of

ves the clients

It collects thes color, imageof individual

h has its ownts should look

behavior ander interaction.ene and enters

he application

ed data feed ton, the SystemL content and

t 4

t m d n

r s r f

s

e e l n k

d . s

n

o m d

This archapplicatioserver. Tobjects. Wis built on

Referringstructure are two laand title. backgrouelement itable laye

hitecture enablon at run timeThe Parser CoWhile the conn top of the pr

g to Fig. 8, thand tells the

ayers, i.e., vieThen it create

und. The next is used to disper is built succ

Fig

les the smartpe. The buildeontroller scansversion takes revious layer.

he <applicationbuilder exact

ew layer and tes the table laelement is <

play text infocessfully, the a

g. 6: The inte

Fig. 7: I

phone to have er understandss the XML daplace, we neeAll layers mu

n> element intly what elemtable layer. Firayer at positio<row> that cormation and capplication bu

10

erface elemen

Internal Client

its own style s the layout a

ata from top toed to considerust be linked to

the XML feement to create

rst the buildern of (0,0), wi

ontains the dacontains attribuilder places it

nts of a smart

t Architecture

and design beand arranges tho bottom and r that the viewogether in a p

ed is the root eat identified pr creates the vdth of 320 pix

ata to display butes such as t on top of the

tphone

e

ecause the Apphe interface eparses the dat

w contains muproper sequenc

element, whichposition. The

view layer andxels, cell heigat the correspheight, positi

e view layer.

Tec3

plication Builelement as speta to convert i

ultiple layers ace.

h contains theparser identif

d set the backgght of 20 pixelponding row.ion and the te


lder builds theecified by theit to real time

and each layer

e current viewfies that thereground colourls, transparent. The <label>xt data. After

t 4

e e e r

w e r t

> r


11

<application>

<view title='Event and news' Background_color='153-153-153-1'>

<table x='0' y='0' width='320' height='20' background_color='0-0-0-0' type='linear'>

<row action_id=''>

<label x='10' y='10' width='320' height='20' data='Tackling green issues' background_color='0-0-0-0' text_color='0-0-0-1' text_bold='true' font_size='17' text_alignment='left'/>

<label x='10' y='10' width='320' height='20' data='2009-10-11' background_color='0-0-0-0' text_color='153-153-153-1' text_bold='false' font_size='10' text_alignment='right'/>

<label x='10' y='10' width='320' height='200' data='INTEL Malaysia together with the Penang Department of Fisheries, Penang Department of Wildlife, Taman Negara Pulau Pinang and the Penang Tourist Guides Association recently collaborated to organise an educational environemental camp.' background_color='0-0-0-0' text_color='0-0-0-1' text_bold='false' font_size='12' text_alignment='left'>

</row>

<row action_id=''>

<label x='10' y='10' width='320' height='20' data='Lifeline for orang utans' background_color='0-0-0-0' text_color='0-0-0-1' text_bold='true' font_size='17' text_alignment='left'/>

<label x='10' y='10' width='320' height='20' data='2009-10-10' background_color='0-0-0-0' text_color='153-153-153-1' text_bold='false' font_size='10' text_alignment='right'/>

<label x='10' y='10' width='320' height='200' data='The fate of orang utans in fragmented ecosystems in eastern Sabah was the focus of a two-day Orang Utan Conservation Colloquium. JASWINDER KAUR sat in to get details on the way forward.' background_color='0-0-0-0' text_color='0-0-0-1' text_bold='false' font_size='12' text_alignment='left'>

</row>

</table>

</view>

</application>

Fig. 8: An extract of the XML code for the tourism application prototype

When a user opens an application, if an Internet connection is available, the Mobile Gateway contacts the server to check the current version ID. If the version ID at the server is newer than the one stored in the database, the client requests the latest update from the server. Upon receiving the update, it sends it to the System Controller, which then replaces the older version with the most recent data. If the version ID at the server is not newer or there is no Internet connection, the user is presented with the content stored in the local database (the application can still run if an Internet connection is not available).

The XML data feed for all smartphone platforms are the same, but the XML parser library is different depending on the client platform. This feature helps the application to access the device hardware layer easier and faster. The XML parser library for iPhone is developed in Objective-C, while for Android, it is in Java. As shown in Fig. 3, all platforms receive the same XML data feed and uses their Parser Controller to translate the feed into an executable application with platform dependent interface style. Fig. 9 shows an extract of the parser code for Android, which


12

maps the XML code in Fig. 8 to object for display on an Android device. The parser can be updated to accommodate new views for any device.

URL url = new URL(this.xmlURL); DocumentBuilderFactory dbf = DocumentBuilderFactory.newInstance(); DocumentBuilder db = dbf.newDocumentBuilder(); Document doc = db.parse(new InputSource(url.openStream())); doc.getDocumentElement().normalize(); ElementObject uiElement=new ElementObject(); NodeList viewList = doc.getElementsByTagName("view"); Node viewNode = viewList.item(0); Element viewElmnt = (Element) viewNode; uiElement.setViewName(viewElmnt.getAttribute("title")); uiElement.setViewColor(viewElmnt.getAttribute("Background_color")); System.out.println("View Name: "+ viewElmnt.getAttribute("title")); System.out.println("View BG-Color: "+ viewElmnt.getAttribute("Background_color")); if(doc.getElementsByTagName("table")!=null){

NodeList tableList = doc.getElementsByTagName("table"); if (tableList.getLength()>0) { Node tableNode = tableList.item(0); Element tableElmnt = (Element) tableNode;

if (tableElmnt.getNodeName().equals("table")) {

System.out.println("Table x: "+ tableElmnt.getAttribute("x")); System.out.println("Table y: "+ tableElmnt.getAttribute("y")); System.out.println("Table width: "+ tableElmnt.getAttribute("width")); System.out.println("Table height: "+ tableElmnt.getAttribute("height")); System.out.println("Table _color: "+ tableElmnt.getAttribute("background_color")); System.out.println("Table type: "+ tableElmnt.getAttribute("type"));

} }

} Fig. 9: An extract of the parser code

5. A PROTOTYPE DEVELOPED USING MADCP

We developed a tourism application prototype to test MADCP and compare it to other cross platform frameworks. The application consists of five views: Home, About Us, Events & News, Places & Packages, and Contact Us. When the application is launched, the user sees the Home View, which links to the other four views. The company’s description and information is in the About Us view, which is a mixture of texts and pictures. The Event & News View helps the company to highlight the company’s activities and news. Places & Packages shows a list of places and special tour packages. The Contact Us view gives the company's contact information.

Users are able to view all these information on their smartphones, regardless of platform. The key point here is that all smartphone platforms receive the same XML data feed, but the way the information is displayed is platform-dependent. The next section explains how the prototype is developed using MADCP.

5.1. The Development Phase

The developer logs in to the Web Portal in order to create the application. The developer clicks the “Add New Application” button to create the travel agency application (Fig. 10), where the application is named and the application type is selected. Since this application switches between the home view and a few sub-views, “Navigation” type is selected. After clicking the “Save” button, the developer is redirected to the main application

list page, to add vie

The deveversion nthe conten

After crereturns tohome vieresult at t

5.2. Th

Because wremote seruns the a

The four selected vthe data f

When theit by scroexcept foto retain i

where the neews for this ap

eloper adds a number is usednt, he increase

eating the fiveo the client, anew is set as ththe Client Lay

he Client Lay

we test MADCerver gatewayapplication, he

views are liview. Fig. 11feed content is

e user selects olling up and or the "Home" its unique cha

ewly created application.

Fig

new view byd to keep trackes the version

e views, the dnd the user nae mother view

yer.

yer: What the

CP using iOSy. In this secte is directed to

sted in a tabl1 shows that ts the same.

the second itedown to viewbutton, which

aracteristic, de

application is

g. 10: The W

clicking the k of the latest

n number.

developer thenavigates to othw (shown in F

e User Sees

and Android ion, we showo the Home V

le format, whthe application

em, the "Evenw more news h is missing oesign and user

13

added to the e

Web Portal A

“Add New Vdata on the sm

n chooses the her views andFig. 4). The w

platforms, Mw how the XMView and Fig.

hich when seln looks differ

nt & News" vior events in t

on the Androidinterface.

existing applic

Add New Appl

View” button (martphone dat

mother viewd pages from tweb portal lay

MADCP is instaML data is disp

11 shows the

lected by the rent on the tw

iew is displayethe list. This vd platform. N

cation list. Th

lication

(the interface tabase. Each

w, which is thethe main viewyer is done. T

alled on both played on bothe view on iOS

user, directs wo platforms e

ed (Fig. 12). view has simi

Notice that MA

Tec3

he developer m

is shown in Ftime the deve

e first view thw. For this apThe next secti

platforms andh platforms. Wand Android

him to the ceven though th

The user canilar look on b

ADCP allows e


may than start

Fig. 4). Theeloper updates

hat the serverpplication, theion shows the

d linked to theWhen the userdevices.

correspondinghe source and

n interact withboth platformseach platform

t 4

t

e s

r e e

e r

g d

h s

m

6. A CO

In Sectiosection, wand Phonof the SD

For RhodAfter the RhoGalle

For MoScalled indcreates mHTML prespectiv

PhoneGaapplicatioplatform the code each sma

F

OMPARISON

n 3, we discuwe discuss whneGap. In ordDK for iOS and

des, the develodevelopment

ery.

Sync, the devedex.html that

more HTML papages. The de application m

ap uses the suion and Eclipsin different IDon different ID

artphone platfo

Fig. 11: Th

Fig. 12: 'Eve

N OF MADC

uss three crosshat would be

der to develop d Android alo

opment is donphase is com

eloper uses thacts as a homages. The app

developer thenmarkets.

ite IDE for eae IDE for An

DEs, but usingDEs. When torm and subm

he Home View

ent & News' vi

CP TO EXIST

s-platform frarequired to dan application

ong with other

ne using HTMmpleted, the de

he Eclipse IDme page for thplication createn creates the

ach type of smndroid applicag the same lanthe developer

mit them to the

14

w on Android

iew on Andro

TING FRAM

ameworks andevelop an iPhn for iPhone ar relevant tool

ML, which theneveloper build

DE to create ae application.ed using MoSbinary for iO

martphone platation. It is likenguage. The dmake any cha

eir respective a

(left) and iOS

oid (left) and iO

MEWORKS

d pointed out hone and Andand Android, ts.

n converts thes the code for

a new MoSyn In order to cync is very m

OS and Andro

tforms, e.g. it e creating an adeveloper has anges to the happlication ma

S (right) devic

OS (right) dev

their strengthdroid applicatithese framewo

e HTML tags r different plat

nc project, whcreate more v

much like a weboid platforms,

uses the Xcodapplication foto manage an

html files, he harkets.

Tec3

ces

vices

hs and weakneion using Rhoorks require th

into the nativtforms and up

hich contains iews, the devbsite consistin, and submit

de IDE for deor each type ond maintain a has to create n


esses. In thisodes, MoSynche installation

e UI element.ploads them to

a HTML fileeloper simplyng of multiplethem to their

eveloping iOSof smartphonefew copies of

new binary for

t 4

s c n

. o

e y e r

S e f r


15

The advantage of MADCP over the three frameworks is that the developer simply develops the application in XML and the code is parsed and translated by the Client Layer before it is served to the smartphone in a format that is understandable by the smartphone’s platform. The developer need not maintain and update multiple base code. The second advantage is MADCP allows each platform to retain its unique characteristics and interface. When an application developed using the other frameworks is updated, there is a latency before the latest version of the application is seen by the user. The third advantage of MADCP is any application update is available immediately, the moment a user reloads the application.

7. CONCLUSION

To recap, we identified four problems faced by software companies when developing smartphone applications: (i) the need to install multiple SDKs in order to develop an application for multiple platforms; (ii) platform interface dependency; (iii) application update latency; and (iv) the need to hire developers with expertise on multiple platforms is not only costly, the development process may also be time consuming.

We introduce a new concept for cross-platform smartphone application development framework that supports the development of smartphone applications on multiple platforms to address these problems. The Web Portal Layer eliminates the need to install multiple SDKs to develop an application for multiple platforms. By using XML to develop an application, we eliminate the need to hire developers with expertise on different platforms any competent IT professional would know XML. In Section 5.2, we show that MADCP allows each platform to retain its unique characteristic, design and user interface even though each platform receives the same XML data feed. Provided an Internet connection is available when a user runs an application, any update on the application is applied immediately, thus, overcoming the update latency problem.

The main contribution of this work is that MADCP simplifies application development for multiple platforms by eliminating the need to install multiple SDKs (addressing problem (i)). In Section 5.2, we demonstrate how the platform interface dependency has been addressed (problem (ii)). Provided that an Internet connection is available, the user would get the most recent version of an application when he starts the application (addressing problem (iii)). MADCP requires the developer to know only XML, thus, overcoming problem (iv).

Finally, a bonus advantage of MADCP is the framework is not tied to any computer or desktop application anyone can access the web portal through a web browser. Therefore, the developer can even use a tablet and log in to the web portal and update the application when he is on the move.

At the moment, MADCP can only cater for business applications. Support for games and more complex applications will be explored in a future work. We are also working on ensuring that the framework adhere to industry guidelines.

Funding

This project is supported by University of Malaya Research Grant (RG076-11ICT).

REFERENCES

1. S. Allen, V. Graupera and L. Lundrigan, "Pro Smartphone Cross Platform Development: iPhone, Blackberry, Windows Mobile and Android Development and Distribution", 1st Edition, Apress, 2010

2. X. Chen, "Cross-Platform Mobile Phone Game Development Environment", Proc. of Industrial and Information Systems 2009, , Haikou, China, 24-25 April 2009, pp. 182-184

3. K. Church, B. Smyth, and P. Cotter. "Mobile information access: A Study of Emerging Search Behavior on the Mobile Internet", ACM Transactions of the Web, Volume 1 Issue 1, 2007, pp. 1 - 38

4. M. Firtman, "Programming the Mobile Web", O'Reily Media, 2010

5. D. Grandoni, "Texting Dominates as Teens and Adults Make Fewer Phone Calls", The Huffington Post, 18 July, 2012, http://www.huffingtonpost.com/2012/07/18/texting-phone-calls_n_1683756.html, Last access: 2 May, 2013


16

6. J.M. Kang, S.S. Seo and J.W.K. Hong, "Usage Pattern Analysis of Smartphones", Proc. of the 13th Asia Pacific Network Operations Symposium (APNOMS), 2011, pp. 1- 8

7. T. Paananen, "Smartphone Cross Platform Frameworks", Bachelor Thesis, JAMK University of Applied Sciences, Media Engineering, Jyväskylä, JAMK University, 2011

8. A. Smith, "Americans and Text Messaging", Pew Internet and American Life Project, 19 September, 2011, http://pewinternet.org/Reports/2011/Cell-Phone-Texting-2011.aspx, Last access: 6 May, 2013

9. T. Soikkeli, J. Karikoski, and H. Hammainen, "Diversity and End User Context in Smartphone Usage Sessions", Proc. of the 5th International Conference on Next Generation Mobile Applications and Services, Cardiff, United Kingdom, 14 Sep - 16 Sep 2011, pp. 7 - 12

10. A. Trice, "PhoneGap advice on dealing with Apple application rejection", 29 October, 2012, http://www.adobe.com/devnet/phonegap/articles/apple-application-rejections-and-phonegap-advice.html, Last access: 20 May, 2013

11. "7 Shades of Mobile: The Hidden Motivations of Mobile Users", AOL-BBDO Mobile Research, October, 2012, http://advertising.aol.com/research/research-reports/seven-shades-mobile, Last access: 2 May, 2013

12. “Final G4 Numbers and Full Year 2012 Stats for Smartphone Market Shares: top 10 manufacturers, Top OS Platforms, Top Installed Bases (Revised & Corrected), 13 February, 2013, http://communities-dominate.blogs.com/brands/2013/02/final-q4-numbers-and-full-year-2012-stats-for-smartphone-market-shares-top-10-manufacturers-top-os-p.html, Last accessed: 8 May, 2013

13. “Global Mobile Statistics 2012”, http://mobithinking.com/mobile-marketing-tools/latest-mobile-stats, Last access: 8 May, 2013

14. “The Mobile Advantage”, http://enterprisecontent.nuance.com/mobile-advantage-infographic.html, Last access: 8 May, 2013

madcp: a framework to support cross-platform application...

Documents