User Interface Components

User Interface Components are one of the most innovative features of MyMobileWeb. These components are element of interaction that provides a well-defined functionality. A visual control is implemented via a set of markup tags. A user interface component raises events, some of them managed by the application, some of them managed automatically by MyMobileWeb. All user interface components support data and content binding, simplifying the development of applications. Any user interface component might have a display attribute. If the value of display is true then the control is rendered. If it the value is false then the control it is not rendered. display attribute can be an expression evaluated against the context.

The set of user interface components MyMobileWeb provides is:

hr It puts an horizontal rule as a separator. It must be placed out of containers.

br It is a line break in a presentation frequently used for better legilibility. It must be placed out of containers.

label. It is used for labelling anything in an authored unit. It can contain any text. Using CSS it can be changed the aspect such as color, font, underline, bold, etc.

image A control that displays a tiny picture in the screen. In MyMobileWeb images typically are specified by means of an abstract identifier, called ‘resourceid’. The programmer can provide different versions of the same resource and MyMobileWeb is in charge of selecting the best for a delivery context. Also MyMobileWeb provides an image transcoding module that can be used to dynamically transformate images to different formats and sizes as needed. Programmers or designers decide the schema to be used: content selection or transcoding.

object. It allows to put any multimedia object in a view. It has similar semantics than the ‘object’ tag in (X)HTML.

entryfield. This is an input field in which the user can enter any text. It can be disabled or readonly. Developers can specify validations (required,datatype, etc) to be checked.

datefield. It is an input field that accepts a date as input. Depending on the delivery context it can be rendered as a calendar, as a set of input fields or as a wizard. The developer can specify the date mask to be used. MyMobileWeb takes care of validations according to the mask used.

timefield. It represents an input field that accepts time as input (hours, minutes, seconds). It is parametrized by means of a mask. MyMobileWeb automatically validates user input.

textarea. It is an area of free text (possibly with multiple lines) entered by the user. A textarea can also be readonly or disabled. If a textarea contains so much text it will be automatically paginated by MyMobileWeb.

link. This is a hyperlink that can be optionally decorated with an image. Using style properties and depending on the delivery context it can be controlled if the image, the text or both are displayed.

select. It allows the selection of one ore more values. A select can be rendered as a combobox, radio buttons, checkbox, listbox, etc. It depends on the style properties and the delivery context.

menu. It allows the selection of one between several items and, when done, automatically an event is raised. Menus can be redendered in different ways such as a list of links, a combobox sensitive to changes, a combox plus a button, etc. Menus can have different layouts (horizontal, vertical, grid) and menu items could be decorated with an image or even be numbered with direct access through access keys. MyMobileWeb takes care of the pagination of the menu (if needed).

submit. This control triggers an update of the model. When the user activates the control all the data in the current form on screen is posted to the server and it starts the process of model (the context) updating, triggering validations.

action. An action is a control that allows the user to ask for something but no context updating occurs. Depending on the delivery context and the device it can be rendered as a button, as a link or even as an option mapped to a softkey (similar to the ‘do’ tag in WML).

list. Represents data in list mode. Each list item can be decorated using an image or an index number. Lists are paginated automatically according to the capabilities of the delivery context.

table. Represents data in tabular mode. Each column can be clickclable or not depending on the style settings. Tables are automatically paginated if needed. An interesting feature is that programmers can specify the visualization of more or less columns depending on the device.

chainedmenu. It is a set of depending menus, i.e. the items of one menu depends on the value(s) selected in previous menus. A chained menu is rendered as a wizard in mobile phones and as a set of combos (popup lists) in PDAs.

rsspanel. It is a control that provides the user interface for browsing and reading RSS feeds. The control is capable of dealing with different versions of ATOM and RSS.

telephonecaller. A visual component to trigger a phone call from a user interface page. This control is an abstraction for developers that have not to worry about the different URL formats for specifying a call.