[IEEE 2013 International Conference on Cyber-Enabled Distributed Computing and Knowledge Discovery...

The mServices GUI Architectures Design for the mLearning System

Zhanlin Ji1,2, Yongli An2, Ivan Ganchev1, Mairtın O’Droma1

1Telecommunications Research Centre, University of Limerick, Ireland2College of Information, Hebei United University, China

[email protected]; [email protected]; [email protected]; [email protected]

Abstract—The design of a mobile services (mServices)Graphical User Interface (GUI) architecture for use in mobileeLearning (mLearning) systems is presented in this paper. Thearchitecture is developed based on the Google Web Toolkit(GWT) - a development toolkit for building and optimizingcomplex multi-platform web-based applications. It is well suit-ed for developing different mService applications, i.e., mTest,mLecture, mLibrary, etc. The architecture is implemented withthe Observer and the Model View Controller (MVC) designpatterns. Together with the Twitter’s bootstrap Cascading StyleSheets level three (CSS3), the created mService applications canrun in the modern browsers, i.e., Chrome, Firefox, InternetExplorer, Opera, and Safari.

Keywords-mLearning; mService; GUI; GWT; MVC; CSS3;

I. INTRODUCTION

With continuing evolution of the modern handheld de-

vices, especially with the latest versions of the mobile

operating systems released (i.e., Google Android 4, Apple

IOS 6, Microsoft Windows 8, etc), the intelligent mobile

terminals became more and more popular, and easy to use.

Nowadays these devices can offer functionality comparable

to that of the desktop computers. As traditional personal

computers consume too much power, they are not suitable

for the realization of the ’Green Earth’ dream. Hence an op-

portunity has arisen for a more comprehensive integration of

the mobile devices into educational environments. In recent

years great efforts have been made to utilize these devices

within the educational domain. For instance, the InfoStation-

based multi-agent mobile eLearning (mLearning) system

detailed in [1, 2] provides access to mLearning services,

for users equipped with mobile devices and facilitated by

their personal assistant agents (PAAs), via a set of intelligent

wireless access points, called Information Stations (InfoSta-

tions), deployed in key locations across a university campus

(e.g. in lecture theatres, labs, library, cafeterias, etc.).

The system involves various entities operating within a

3-tier structure as depicted in Figure 1: user mobile devices,

InfoStations, and an InfoStation Centre [2].

Considering the fact that native mobile applications are

hardware-independent and complex in development, a uni-

form web-based Graphical User Interface (GUI) application

is proposed in this paper for the creation, implementation,

and configuration of wireless mobile services (mServices)

��

��

��

��

��

��

��

��

��

��

��

��!"��#�$��%

��!$��&�'��

�� ()��

��

�� ()��

�� ()��

�� ()��

��"��

��"��

��*��

�� !�"�

Figure 1. A 3-tier InfoStation-based mLearning system architecture.

for use in this system and similar mLearning systems. The

GUI is developed by means of the Google Web Toolkit

(GWT) [3], using the Asynchronous JavaScript and XML

(AJAX) [4] mechanism for communication between the

client- and service side via a Java Agent DEvelopment

Framework (JADE) [5] agent. Together with the Twitter’s

bootstrap [6] Cascading Style Sheets level three (CSS3),

the created mService applications can run in the modern

browsers, i.e., Chrome, Firefox, Internet Explorer, Opera,

and Safari.

The rest of the paper is organized as follows. Section II

presents the proposed mServices GUI application, followed

by its architectural design and implementation described in

Section III. Section IV presents some demo results. Finally,

section V concludes the paper.

II. MSERVICES GUI ARCHITECTURE

The web-based GUI application detailed in this paper pro-

vides ability to create, implement, and configure mServices

in mLearning systems. It was developed by using the AJAX

technology, which utilizes a number of web development

techniques used on the client side to create asynchronous

web applications. With AJAX, web-based applications can

2013 International Conference on Cyber-Enabled Distributed Computing and Knowledge Discovery

978-0-7695-5106-7/13 $26.00 © 2013 IEEE

DOI 10.1109/CyberC.2013.47

243

��#��$��#��%

&��$��#��%

&��"��$�"��%

��$��#��%

��+��*��,

��'�("$�"��%

�)��*� �)��*�

��+��,��$��%-

��"��*#��.��*

��"��!"��*�$��(��

�"��%

��*��*��*�$��!��*��%

��("��

��("��

(a)

��

��

��

��

��

��

��

��

��

��( ��

� ��

��

��

��

��

(b)

Figure 2. The mServices architecture: (a) the RPC mechanism; (b) theGWT-MVC structure.

communicate with servers in an asynchronous way without

interfering with the display and behavior of the existing

pages. To develop AJAX applications in an efficient way,

the GWT was selected to create and maintain complex

JavaScript front-end applications in Java. The features of

GWT include dynamic and reusable GUI components; sim-

ple solutions to recurring AJAX challenges, namely asyn-

chronous remote procedure calls (RPC); browser history

management; bookmarking; open-source software; Google

libraries; GUI abstraction; internationalization and cross-

browser portability; etc. Also, GWT can work with other C-

SS, for example the Twitter’s bootstrap [6], to provide better

user experience (and attractiveness) when using mobile web

applications. Figure 2a shows the mServices architecture

with the RPC mechanism.

With the RPC mechanism, it is easy for the client and

server to exchange Java objects over HTTP. In Figure 2a,

the mService is invoked by the client by an automatically-

generated proxy class (named mServiceSvc). GWT handles

all the Java objects’s serialization and de- serialization

operations. The mService part includes three components:

the mService interface which extends from RemoteService;

the mServiceImpl which implements the above interface, and

the mServiceAsync which is the asynchronous interface to

the mService called from the client side.

Taking into account the number of mServices in a typical

mLearning system, to build a loosely coupled system, a

GWT-MVC structure is proposed for use as shown in Figure

2b. After starting the GUI application, a number of static

events are initialized and added to the mService controller.

On the other hand, in the EntryPoint of GWT, a dispatcher

is initialized and the mService is created. When a particular

event is fired by the dispatcher and sent to the mServicecontroller, the corresponding model is updated with the

mService’s corresponding executing-logic. The views con-

nected to the mService controller are initialized or taken back

from the GUI pool.

III. GUI ARCHITECTURE’S DESIGN AND

IMPLEMENTATION

A. mService GWT application

To enable the RPC mechanism of GWT to work efficient-

ly, these steps need to be followed:

1) Creating a service: Define a mService interface, which

extends from the RemoteService; all the RPC methods

are listed in this interface. Also, the Agent’s functions

[7] (interfaces) should be defined in the mServiceinterface.

2) Implementing the service: Create a Java class m-ServiceImpl, which extends from the RemoteService-Servlet and implements the mService interface. The

RemoteServiceServlet handles data serialization and

de-serialization between the client and the server.

3) Defining an asynchronous interface: A mServiceAsyncinterface is created by the GWT.create(mService.class)

function. The interface is a service proxy class, called

on the client side.

4) Adding the CSS to the HTML tag.

5) Creating the mService GWT module: A XML file is

created to define the resources and the entry point of

the GUI application.

B. GWT-MVC Structure

To enable the GWT application to run in a MVC fashion,

four components (Event, Dispatcher, Controller, View) are

developed and integrated into the GWT application.

The Event is a Plain Old Java Object (POJO), used to

identify an event and defined as a constants class in the

system.

The Dispatcher is the key component in the GWT-

MVC structure. It is implemented with the Observer design

pattern. A listener listens to the event; if the event is fired,

the Dispatcher will send the event to the corresponding

244

controller for processing. Figure 3 shows the event-driven

diagram of the mService.

�((��""��

��(��/��

�((0�� 1��"0�� *�"0��

��

��

��

Figure 3. The event-driven diagram of a mService.

The Controller is managed by the Dispatcher, it handles

the fired events, creates the GWT mService, and initializes

the Views of the system. Figure 4 shows the UML diagram

of the mServiceController design.

��

��

�� !��

��"#��

��

$��%%�&��''��

�� (��

��

�� (��

��"#��

Figure 4. The UML diagram of the mServiceController design.

After the mServiceController processes the fired event, the

parameters dataset in the model are updated, together with

the event, and forwarded to the appropriate view. When the

user leaves the view, the view is put into the view-pool for

caching. Figure 5 shows the time sequence UML diagram

of the GWT-MVC.

IV. DEMO RESULTS

To demonstrate the mServices GUI architecture, a mTest

mobile GUI was designed. Figure 6 shows the time sequence

UML diagram of the mTest operation. The user starts the

Web application of the mTest and clicks on the login button;

the dispatcher sends the login event to the controller. After

�� (�� )��

��

�*��

$��

��

��

Figure 5. The time sequence UML diagram of the GWT-MVC.

�

��

��#�#��

&��(��"�2�*�*��

0�� ""��

3��

4��*�*��*�#��

��("��*��

��

�("�� ("��

��("��#

&�� (*��

3��3�� #��

��3��#��

��"��

��

��("��*��

��("��*��

3��"��"�*��

Figure 6. The time sequence UML diagram of the mTest operation.

creating the GWT mService component on the mTest server,

the result and the event are forwarded to the appropriate

view. The rest of operations are performed in similar fashion

as illustrated in Figure 6.

Figure 7 depicts the designed mTest mobile GUI.

245

(a) (b)

Figure 7. The GWT-MVC mTest mobile GUI: (a) the login page; (b) thetest page.

V. CONCLUSION

This paper has proposed a hardware-independent web-

based mServices GUI architecture. The RPC communi-

cation mechanism was selected for the GUI design. A

novel MVC structure was designed and integrated into the

GWT environment. A mTest application was developed and

demonstrated based on the proposed architecture. This GUI

architecture enables easy maintenance, development, update,

and extension of mServices in mLearning systems.

ACKNOWLEDGMENT

This publication has been supported by Government of

Ireland Post Doctoral Fellowship (GOIPD/2013/243) and

the Natural Science Foundation of Hebei Province, China

(F2012401050) and the Telecommunications Research Cen-

tre, University of Limerick, Ireland.

REFERENCES

[1] Z. Ji, D. Meere, I. Ganchev, M. O’Droma. “Implementation ofan Intelligent Framework for Utilization within an InfoStation-based mLearning Environment,” in Proc. of the 11th IEEEInternational Conference on Advanced Learning Technologies(IEEE ICALT 2011), Athens, Georgia, USA, Pp. 310-311, July6-8, 2011.

[2] D. Meere, I. Ganchev, M. O’Droma. “Utilising a Multi-AgentSystem to Support the Deployment of Contextualised mLearn-ing Services,” in Proc. of the 6th IEEE International Confer-ence on Intelligent Systems (IEEE IS’12), Sofia, Bulgaria, pp.88-94, 6-8, September, 2012.

[3] F. Kereki, Essential Gwt: Building for the Web with GoogleWeb Toolkit 2: Addison-Wesley Professional, 2010.

[4] D. Kayal, Pro Java EE Spring Patterns: Best Practices andDesign Strategies Implementing Java EE Patterns with theSpring Framework: Apress, 2008.

[5] F. L. Bellifemine, G. Caire, and D. Greenwood, DevelopingMulti-Agent Systems with JADE: Wiley Series in Agent Tech-nology, John Wiley & Sons, 2007.

[6] Twitter’s bootstrap. Online: Available - http://twitter.github.com. [Accessed: Jun. 15, 2013].

[7] Z. Ji, I. Ganchev, and M. O’Droma, “An iWBC ConsumerApplication for ‘Always Best Connected and Best Served’:Design and Implementation,” IEEE Transactions on ConsumerElectronics, Vol. 57, No. 2, pp. 462-470, May, 2011.

246

[IEEE 2013 International Conference on Cyber-Enabled Distributed Computing and Knowledge Discovery...

Documents

Transcript of [IEEE 2013 International Conference on Cyber-Enabled Distributed Computing and Knowledge Discovery...