Introduction to MUPE XML
From MupeWiki
Contents |
Introduction
MUPE applications are written on the server side - all Java code is run on the server side, and XML is used to customise the client. This document introduces the XML and teaches how to create your own UIs. In short: MUPE client connects to the server, and downloads XML. The XML scripts configure the client functionality, and create objects into the UI.
Please refer to the Mupe Client Script Manual for details on the XML script, and How does MUPE work? for details on how MUPE works.
XML script creates objects onto the client
MUPE XML script essentially creates objects onto the clients. The server can specify to create a UI, objects into it, and hooks for capturing user input. This allows the MUPE XML to create almost any application that can be ceated with J2ME, but without any need for J2ME development, since everything is done on the server side. Further, as the objects are created dynamically at runtime, the client can be all the time running, and the client can be constantly changed on the server side.
An example:
<string id='namestaticname' text='Nickname:' bold='true' x='4' y='5' />
The previous script creates a string object on screen at the specified location. In addition to creating objects, old objects can be updated (e.g. g_move, i_settext), userinput can be captured (<i_hook name='on_left_down' ... >), plugins can be called for specific information (location, bluetooth, etc.), timers can be used for animation etc. Please study the Mupe Client Script Manual for details.
First downloaded XML: User creator.xml
When connecting to a new MUPE application, a User class creator is first downloaded, after the information is filled, the client sends information on how to create a User class or a derivative of it. After the User class is created, it is placed into the default Room, specified in the World class.
As a new User connects to the system, the xml/content/User/creator.xml is downloaded (it is included in the contentclasses.jar file). As the developer subclasses an application specific MyUser class, the corresponding creator at xml/content/MyUser/creator.xml is downloaded. Here is an example of such a file:
<template type='canvas' id='new_user' uigroup='usercreation' active='true' style='color' bgcolor='dddddd' fullscreen='false'>
<g_setselectorcolor value='auto' />
<string id='namestaticname' text='Nickname:' bold='true' x='4' y='5' />
<editfield id='nameeditname' text='name' anchor='bottom_left' anchorid='namestaticname' max='32' width='50%' />
<string id='bt_static' text='BTID:' x='4' y='115' bold='true' />
<string id='bt_id' text='Getting BT ID..' anchor='top_right' anchorid='bt_static'x='2' />
<g_allowuserinput />
<g_load plugin='bluetooth'/>
<g_call plugin='bluetooth' method='getaddress'/>
<i_hook name='on_bluetooth_getaddress_result'>
<i_settext id='bt_id' text='$(new_user.bluetooth_getaddress_result)'/>
</i_hook>
<command text='Ready' type='ok'>
<g_send>
User::clientCreate {1} {$(new_user.nameeditname.text)} {$(new_user.bt_id.text)}
</g_send>
</command>
</template>
The previous example shows a typical MUPE UI script - although a very simple one. IT contains the following functionality
- Create a template, which is a fullscreen UI (there can be several in the memory at the same time)
- Create objects onto the UI (string, editfield, command)
- Load a plugin into the memory, call one of its methods, and receive the information onto the callback
- When the user presses the command, Create an object into the server (the corresponding constructor is User(User caller, Base Location, String name, String BluetoothId). The caller parameter is always added by the MUPE framework, since it is imperative to know who made a method call, the 1 is passed to the location - and 1 always corresponds to the DefaultRoom in the server. Worldcan give you additional information on the server structure.
Room - the default UI
After the Useris created, the default MUPE functionality places the User into the default Room, and the UI of the Room is downloaded. By default, the framework downloads xml/content/Roomdescription.xml file.
<template type='canvas' id='mainscreen' uigroup='maingroup' title='!#XMLGetName#!' bgcolor='0090ff' style='color' active='true' fullscreen='false'>
<string id='screentitle' selectable='false'><parms><text>Screen 6</text></parms></string>
<string y='30' text='press number buttons' />
<graphics id='statusbar_bg' y='-16' width='$(mainscreen.width)' height='16'
anchor='bottom_left' anchorid='mainscreen' selectable='false'>
<i_clear color='blue' />
</graphics>
<string id='statusbar' text= x='5' anchorid='statusbar_bg' selectable='false'>
<parms>
<fgcolor>white</fgcolor>
<anchor>top_left</anchor>
<anchorid>statusbar_bg</anchorid>
</parms>
</string>
<i_hook name='on_num1_down'>
<i_settext id='statusbar' text='button1' />
</i_hook>
<i_hook name='on_star_down'>
<i_settext id='statusbar' text='button *' />
</i_hook>
<i_hook name='on_pound_down'>
<i_settext id='statusbar' text='Key # down' />
</i_hook>
<i_hook name='on_clear_down'>
<i_settext id='statusbar' text='Clear key down' />
</i_hook>
<g_allowuserinput />
<command text='Refresh' type='ok'>
<g_send>clientPoll</g_send>
</command>
</template>
The previous example shows how mobile phone UIs can be created on the fly - change the objects you create on the xml, save it and press Refresh on the client to get the updated UI back to the client.
Extending the example UI
If you have not yet done so, please setup MUPE for development. After this, replace the xml/content/Room/description.xml with the previous example, and try to extend the functionality.
Add an animation:
<graphics id='ball' x='50' y='50'> <i_circle x='1' y='1' width='10' filled='true' color='aa90ff' /> </graphics> <g_starttimer id='timer1' times='-1' time='100'> <i_event group='mainscreen' id='mainscreen' hook='update_timer' /> </g_starttimer> <i_hook name='update_timer'> <g_move group='mainscreen' id='ball' deltax='1' deltay='1' /> </i_hook>
