Development of a Sencha-Touch mTest Mobile App for ... - IEEE Xplore

2013 IEEE 13th International Conference on Advanced Learning Technologies

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

1

Zhanlin Ji1,2 , Xueji Zhang1 , Ivan Ganchev2 , M´airt´ın O’Droma2 Research Centre for Bioengineering and Sensing Technology, University of Science and Technology Beijing, China 2 Telecommunications Research Centre, University of Limerick, Ireland {Zhanlin.ji; Zhangxueji}@ustb.edu.cn; {Ivan.Ganchev; Mairtin.ODroma}@ul.ie 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.

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 on the Sencha Touch framework. The mTest application receives XML data from a personal assistant agent on the client side and can work in different mobile operating system environments, such as iOS, Android, BlackBerry, Windows Phone, etc. The application 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 server side, which facilitates the handover from one user device to another during the service session, and enables an always best connected and best served (ABC&S) communication mode. Keywords-mLearning; mTest; Sencha Touch; HTML5; MVC

I. I NTRODUCTION The mobile test (mTest) application presented in this paper could be used to enhance more traditional educational 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 ’anywhereanytime-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 provision of mobile services (mServices) within an InfoStationbased 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.

III. S ENCHA -T OUCH M T EST S TRUCTURE The Model View Controller (MVC) framework is a popular design pattern within the presentation layer, which is utilized for the mTest mobile GUI design. A HTML5/SenchaTouch application usually includes Models, Views, Controllers, Stores, Profiles, Icons, etc. Figure 1 shows the mTest application structure.   

 



     

II. S ENCHA T OUCH F RAMEWORK 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 978-0-7695-5009-1/13 $26.00 © 2013 IEEE DOI 10.1109/ICALT.2013.64

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. S ENCHA -T OUCH M T EST D ESIGN AND I MPLEMENTATION To realize the MVC design of the mTest based on the Sencha Touch, related modules should be stored in the 210

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.

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 4.

   

   

VI. C ONCLUSION

Ă

Within this paper, a Sencha Touch based mTest application, providing hardware/software-independent test services in a mLearning system, has been presented. The SenchaTouch 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.

   

Figure 2.

The login operation of the mTest.

V. R ESULTS 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.

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

DWWULEXWHV DWWULEXWHV ([DP

4XHVWLRQ

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

DVN DWWULEXWHV



f DQVZHU

ULJKW



f

f

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

H[SODLQ &KDSWHU

f

Figure 3.

The Sencha-Touch mTest mobile GUI.

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

The XML Scheme of the question.

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

The store can load the model objects and persistence data from one of two proxies - the Client Proxy or the Sever

211