madcp: a framework to support cross-platform application...
TRANSCRIPT
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.
Technical Report 30 April, 2014
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
Technical Report 30 April, 2014
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
Technical Report 30 April, 2014
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
Technical Report 30 April, 2014
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
chnical Report30 April, 2014
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
chnical Report30 April, 2014
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.
chnical Report30 April, 2014
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
chnical Report30 April, 2014
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
Technical Report 30 April, 2014
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
Technical Report 30 April, 2014
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
chnical Report30 April, 2014
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
chnical Report30 April, 2014
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
Technical Report 30 April, 2014
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
Technical Report 30 April, 2014
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