Development of a Sencha-Touch mTest Mobile App for a mLearning System

Zhanlin Ji1,2, Xueji Zhang1, Ivan Ganchev2, Mairtın O’Droma2

1Research Centre for Bioengineering and Sensing Technology, University of Science and Technology Beijing, China2Telecommunications Research Centre, University of Limerick, Ireland

{Zhanlin.ji; Zhangxueji}@ustb.edu.cn; {Ivan.Ganchev; Mairtin.ODroma}@ul.ie

Abstract—This paper presents an HTML5 mobile test(mTest) application for use in an agent-based mobile eLearning(mLearning) system. The application was developed based onthe Sencha Touch framework. The mTest application receivesXML data from a personal assistant agent on the client side andcan work in different mobile operating system environments,such as iOS, Android, BlackBerry, Windows Phone, etc. Theapplication is designed by means of the Model View Controller(MVC) design pattern, and is easy to maintain, test, and extend.Moreover, the mTest session is stored on the mLearning serverside, which facilitates the handover from one user device toanother during the service session, and enables an always bestconnected and best served (ABC&S) communication mode.

Keywords-mLearning; mTest; Sencha Touch; HTML5; MVC

I. INTRODUCTION

The mobile test (mTest) application presented in this

paper could be used to enhance more traditional education-

al practices, or as an additional tool to support distance

learning. It was developed as a component of a mobile

eLearning (mLearning) system [1], which is an ’anywhere-

anytime-anyhow’ oriented system [2], developed to deliver

multimedia service content to a variety of mobile devices

with different operating systems (iOS, Android, BlackBerry,

Windows Phone, etc.) through the best wireless connection

under the always best connected and best served (ABC&S)

communication paradigm [3].

In [1], a light-weight, distributed framework for the pro-

vision of mobile services (mServices) within an InfoStation-

based mLearning environment was provided. The inversion

of control (IoC) light-weight container was proposed there as

well. Different from the aforementioned research, this paper

details an HTML5 mTest application based on the Sencha

Touch framework [4] for use in this mLearning system.

II. SENCHA TOUCH FRAMEWORK

The Sencha Touch based application detailed in this paper

provides access to mTest services, for users equipped with

mobile devices, via their personal assistant agent (PAA) and

a set of intelligent wireless access points, called Information

Stations (InfoStations) [1].

A need has recently emerged to expand the client side

of the mTest design to incorporate newer technologies in

order to increase the systems effectiveness. To enable mobile

devices to run mTests independently of hardware/software

constraints, we have developed a mTest presentation layer

based on the Sencha Touch technology [4]. Sencha Touch is

the first HTML5 framework for mobile devices. Combined

with CSS3 [5],it makes easy to develop efficient Web

applications. This process is similar to local applications and

allows for rapid development across different platforms. In

addition, Sencha Touch provides a flexible system layout,

which makes it easy to determine the size and location of

the layout for different devices, which provides basic support

for the mTest customization.

It is reasonable to use Sencha Touch to design the

mTest mobile GUI. The style of the display interface looks

somewhat like Swing in Java but is more dynamic in terms

of the appearance, particularly through the use of widgets

and effective layouts for display. Through the creation of

widgets and their desired combination within a layout, one

can design effective and attractive interfaces.

III. SENCHA-TOUCH MTEST STRUCTURE

The Model View Controller (MVC) framework is a popu-

lar design pattern within the presentation layer, which is uti-

lized for the mTest mobile GUI design. A HTML5/Sencha-

Touch application usually includes Models, Views, Con-

trollers, Stores, Profiles, Icons, etc. Figure 1 shows the mTest

application structure.

�

�����������������

� ����� �������

�������

�� ����������

�������������

����� ���������

���

����� ��

�

Figure 1. The structure of the mTest mobile application.

The mTest GUI also has many handy features, such as an

event mechanism, which could be utilized to capture events,

e.g. when the user touches or slides the screen.

IV. SENCHA-TOUCH MTEST DESIGN AND

IMPLEMENTATION

To realize the MVC design of the mTest based on the

Sencha Touch, related modules should be stored in the

2013 IEEE 13th International Conference on Advanced Learning Technologies

978-0-7695-5009-1/13 $26.00 © 2013 IEEE

DOI 10.1109/ICALT.2013.64

210

2013 IEEE 13th International Conference on Advanced Learning Technologies

978-0-7695-5009-1/13 $26.00 © 2013 IEEE

DOI 10.1109/ICALT.2013.64

210

2013 IEEE 13th International Conference on Advanced Learning Technologies

978-0-7695-5009-1/13 $26.00 © 2013 IEEE

DOI 10.1109/ICALT.2013.64

210

2013 IEEE 13th International Conference on Advanced Learning Technologies

978-0-7695-5009-1/13 $26.00 © 2013 IEEE

DOI 10.1109/ICALT.2013.64

210

corresponding application folder, such as Model, View,

Controller, and Store.The mTest consists of a number of views, such as the login

screen, question selection screen, etc. A controller running

in the background is responsible for monitoring the user’s

actions. When an event is triggered, the controller captures

it automatically and displays the corresponding view. In the

mTest app, different parts are connected together through

the controller. The program runs by monitoring the screen

GUI events triggered by the user, e.g., clicking and sliding.

The controller also separates the display logic from the

control logic to ensure loose coupling of the mTest. When

the user logs into the mTest, s/he first gets access to the

login screen (Figure 2). Once the user enters the user name

and password, and touches the submit button, the controller

receives a trigger event notification and verifies the supplied

user credentials.

����� �

������ �

� ���� �

�� �����������

��� ����

����� ��� ��

�����

�����

�����

������� ��� ��

Figure 2. The login operation of the mTest.

V. RESULTS

As the mTest mobile GUI is a hardware-independent

application, all the datasets, i.e., personalized information,

exams, pass score, session data, etc, are stored on the server

side. Communication between the mTest GUI and the mTest

server utilizes the XML. Figure 3 shows the mTest question’s

XML scheme.

����

���������

�

�����

�

���������

��

� ���

�

���������

����

������

������

�

Figure 3. The XML Scheme of the question.

The store can load the model objects and persistence data

from one of two proxies - the Client Proxy or the Sever

Proxy. With the Client Proxy, data can be loaded in the

memory space of the browser directly; it could also load

the local-storage data which is supported by HTML5. With

the Server Proxy, data is loaded from the server side. The

server proxy is predominantly used in the mTest mobile GUI

design. Figure 4 presents two views of the developed mTest

GUI.

Figure 4. The Sencha-Touch mTest mobile GUI.

VI. CONCLUSION

Within this paper, a Sencha Touch based mTest applica-

tion, providing hardware/software-independent test services

in a mLearning system, has been presented. The Sencha-

Touch mTest is a pure HTML5 application following the

MVC design pattern, which makes it easier for integration

into a mLearning system. The Sencha-Touch mTest can be

utilized to enhance more traditional educational practices,

or indeed to provide additional tools to support distance

learning.

REFERENCES

[1] D. Meere, Z. Ji, I.Ganchev, and M. O’Droma, “A FrameworkDesign for Utilization in Facilitating Contextualised mLearn-ing,” GSTF Journal on Computing (JoC), vol. 1, no. 4, pp.81-87, 2012.

[2] M. O’Droma and I. Ganchev, “The creation of a ubiquitousconsumer wireless world through strategic ITU-T standardiza-tion,” IEEE Communications Magazine, vol. 48, pp. 158-165,2010.

[3] Z. Ji, I. Ganchev, and M. O’Droma, “An iWBC consumerapplication for ‘always best connected and best served’: de-sign and implementation,” IEEE Transactions on ConsumerElectronics, vol. 57, no. 2, pp. 462-470, May 2011.

[4] J. Garcia and A. De Moss, Sencha Touch in Action: ManningPublications, 2011.

[5] B. P. Hogan, HTML5 and CSS3: develop with tomorrow’sstandards today: Pragmatic Bookshelf, 2010.

211211211211