Mxim Framework

Method to serve text and images

Home

Introduction

Quick Start Guide

Intended audience

This manual assumes that you have already downloaded Mxim Runtime on your device and know how to develop static or dynamic websites. You should know how to write Mxml code using notepad (or available SDKs), should familiar with the use of web hosting. If you have used any web programming language before, Mxml will seem familiar. But if you're new to programming, Mxml basics are easy to learn. You can start with simple markup tags and build more complexity as you progress. You can add a lot of interactivity to your applications without having to learn (or write) a lot of code.

System requirements

Mxml does not have any system requirements in addition to ordinary web site setup.

Third party server will be the application server that will keep your Mxml applications. Mxim Content Server provides the Mxml content rendering service for Mxim runtime by using intermediate communication data encoding and content optimization.

About MXML

Mxml (Mxim Markup Language) works with Mxim Content Server and Mxim Runtime environment. Mxml provides a bridge between existing web technologies and Mxim framework.
It helps to achieve OOP (Object Oriented Programming) development using any server side language like; PHP, Perl, Python, Ruby on Rails or developers can even use any of Content Management Systems (CMS) or web frameworks like joomla, CakePHP, Symphony, etc for developing Mxim Applications.
Mxml supports all the standard elements of the ordinary html, xhtml language with fundamental enhancement for devices; it lets you write scripts that more closely adhere to standards used in other web markup languages, such as html, xml, xhtml. Mxml should be of interest primarily to intermediate or advanced web developers who are building applications, services that require the implementation of mobile applications. Mxml also lets you declare the independent device specific application user interface rendering and percentage base UI (User interface) rendering and provides notification at application communication, and available resources on application, RMS and device level.
Key facts about Mxml include the following points:

All Mxml applications, solutions or services will be deployed on third party server, just like any web application.
Mxml files must have following information

It helps Mxim Content Server to identify application content type
version attribute specifies the Mxml version developer is using for his applications
encode attribute specifies intermediate communication data encoding version from Mxim Content Server to Mxim Runtime.
Xmlns is used to identify namespace for appropriate Mxim compliant content

Mxml application not necessarily requires having text/mxml file header. Mxim Content Server look for specific content-type attribute in target content.

What is MXML

The main features of MXML (Mxim Markup Language) include the following:
Familiar web programming model The primary feature of Mxml is a familiar model for creating websites, web application and web services. Mxml implements several web specific concepts and elements such as text, password, div, label, checkbox, textarea and frame and extend the platform for devices by adding event, menu and extensive feature like Available Resource Locator (ARL) that is as simple as a URL, but allows to access and use available resources at application running time.
The application model provided by Mxml is standard website development model that extend the capability of web developers to work on mobile content delivery applications right away. With Mxml, you can create applications, port existing web solutions and extend your web solutions for the mobile application users.

Data typing Mxml also lets you to work with no case sensitivity for markup level funcationality, but provides you complete control over application elements by using index property.

Runtime warnings and errors Notification and errors completely works in markup manner, because large variety is available in devices today, that makes it more important to take care of system level issues, notifications or even application feature level reporting by not causing any considerable hindrance for end user.

Understanding Mxml, Mxim Content Server and Mxim Runtime

Mxml (Mxim Markup Language) can be written using even a simple notepad application, should have text readable file headers. Mxim Content Server access Mxml content by specified server configurations (see Mxim application deployment) and understands its content and generates SRS (Server Response Schema) as per specified version in Mxml encode attribute. Mxim Runtime receives the SRS and generates output and refreshes application state on device with every Request / Response activity. Which allows to change / modify application user interface and interaction method with every Request / Response activity.

Data type annotations are not enforced at any level, Mxim content server ignore the irrelevant or non standard Mxml tags, data types and actions.

Additional resources

In addition to this manual about Mxml (Mxim Markup Language), development for devices may require exposure to other ally services, such as RDA (Remote Device Access) for testing, although Mxim framework provides benchmark architecture for all java enabled devices with the specifications of CLDC 1.0 and MIDP 2.0 but different screen sizes most of time have completely different content perception and presentation, so test your application for more precise user experience testing is good option to go with.
For more information about other available resources, see the following topics:

Mobile Application Studio
Device Anywhere
For device specifications (LG Mobiles Nokia Motorola)

Syntax and Language Fundamentals

Learning Mxml syntax is like learning how to put together words to make sentences, which you can then put together into paragraphs. Mxml can be as simple as HTML. For example, in html, a div makes a box shaped entity that available to put content in it, or a label is used in html forms to label any form field, or just like as we previously button in html to interact with our server scripts by using standard GET and POST methods.
Mxml not only use the standard html methods and practices to reduce the learning curve but also extend the platform by adding up new functionality. For example every button, image or menu item can have different action URL and can have different communication method with sever script.Devices are small and interaction does not require too many elements but deep methods to work with.

Resource Locator (RL)

RL look for available resources and perform certain functionality only if requested resource is available.

Using application resources

app://[element index]/action:value

Using RMS (Record Management system)

rms://[rms name]/[rms index]/action:[Object index | Screen]

Using Device level resources

device://[application name]/action/var:value

Using server application identifier

http://[server application identifier]

Building user interface using percentages

Mxml provide all the screen rendering sensitive properties to work in percentage also, that include width, height, x, y and margins, which provide great help to keep to not lose user experience on variation in client device screen size.

Text

Text field element - used for user input

is an element that facilitate developers to avail a text field functionality similar to html text field. Attributes of text include,

index, x, y, width, height, bordercolor, fontcolor, value, visible, name have same meanings as defined above for frame.

selection is an other attribute of text Field to tell the application either this particular field is selectable or not, Selection value is true for selectable and false for not selectable.

align is similar in concept at html, in Mxim applications, default value is left align.

valign is again similar in concept at html, in Mxim applications, default value is top.

Text Field Example

In this example, we can see a text field is displayed on the mobile screen with default value to Hello World and its selection property is true, which means user can edit value of this text field.
To make a text read only we can set its selection property to false

Textarea

Text Area provides functionality of multi-line text Area same as html. Attributes supported by MXML include

index, x, y, width, height, bordercolor, fontcolor, value, visible, selection are already defined above and have same functionalities.

Button

Button provides behavior of html button element that has a value, an action and method to be either post or get. In edition to above described attributes, Button has an extra property of border color and a topmargin attribute.

top margin defines margin from button's y-axis and top of text to be printed in button as caption.
border color is self explanatory.
method is either get, or post. If it is not provided, it is get by default.
action can be an action to be applied an element on the screen or any thing that can be done on the device, it starts with
transparent defines the visibility of button using true or false attributes

app://Action... it can be using any functionality defined over server then it is used as http://Action... if sms is to be sent, then sms://number:text to be sent all are working at the time of writing but rms://Action... is to be confirmed yet.

As a whole, attributes supported by MXML for buttons are defined below.

index, x, y, width, height, bgcolor, fontcolor, value, visible, selection, action, method, fontsize, bold, bordercolor, topmargin, transparent

Example

This is example to demonstrate a button with its properties. This particular button is aimed to refresh screen with a request to server. its Action, text color, background color and other custom properties are also defined by the user.

Image

Image element provides functionality to display an image on device's screen. All attributes of Image element are listed below which are also defined above.

A distinct attribute of image is Resource

Resource is either local means image is included in the application resources or remote means image is to be fetched form server. List of all image attributes is

index, x, y, width, height, bgcolor, src, action, visible, selection, resource, method.

Image Example

Image can be used in very diversified ways, an image used in this particular example is used with a label for that image. It is selectable and it also generates an event on click.

Label

Label provides similar behavior to html label. Attributes supported by MXML are listed below for the label and all attributes have definitions above.

index, x, y, width, height, bgcolor, fontcolor, value, visible, fontsize, bold, bordercolor, transparent, align, valign

Label Example

A label in this example is used to display a message. We can use our customized messages with customized background and text colors

Div

Provides an html element where we can put formatted text in a particular font and background color. Attributes supported by div are self explanatory though explained above as well. List of supported attributes is as

index, x, y, width, height, bgcolor, fontcolor, value, visible, fontsize, bold, bordercolor, transparent, align, valign

Div and Button Example

Screen shows example of a div and a button, where button has property to toggle the visibility of the element referenced to this button, here it is the Div

Password

Password field shows same behavior as behavior of password in html. It takes input and provides masking so that password can not be read by other people around.

Attributes supported by password field in MXML are same as that of text field and masking on input is default behavior. However list id supported attributes is as

index, x, y, width, height, bgcolor, fontcolor, value, visible, selection, valign

Password Example

Menu

menu provides functionality of menu item and drop down if we see in context of html. It also provides functionality to adjust viewable elements as per target screen space available and provides scrolling to navigate all the options provided. Attributes supported are described below,

index is the index of menu it self
x x-axis point from where this particular element will start.
y y-axis point from where the element will start its display.
width of the element
height of each menu Item in the element
bgcolor is background color
fontcolor is color of text to be displayed
visible property is self explanatory with with values as true/false
selection property is self explanatory with with values as true/false
optionvalues are the values in comma separated format to be displayed as different options for the user
optiontargets for each option there will be an action defined in comma separated format to do something on click to an option
linesperitem provides facility to reserve more than on line for a menu item
bordercolor is self explanatory.

List

List provides the option to get a listed view of all the possible options and get them in a scrolable fassion so that screen size doesn't make a hrdle to navigate through all the possible options and selection of one of them.

index is the index of menu it self
x x-axis point from where this particular element will start.
y y-axis point from where the element will start its display.
width of the element
height of each list Item in the element
bgcolor is background color
fontcolor is color of text to be displayed
visible property is self explanatory with with values as true/false
selection property is self explanatory with with values as true/false
optionvalues are the values in comma separated format to be displayed as different options for the user
optiontargets for each option there will be an action defined in comma separated format to do something on click to an option
linesperitem provides facility to reserve more than on line for a list item
bordercolor is self explanatory.
align.

Alert

Alert is to show any message to user that should be generated by the server on any particular action, it can be on invalid data entry or to promt user about any thing before starting interaction with the application

index is the index of menu it self
x x-axis point from where this particular alert will start.
y y-axis point from where the alert will start its display.
width of the alert
height of alert
bgcolor is background color
fontcolor is color of text to be displayed
visible property is self explanatory with with values as true/false
value Message to be printed on alert
bold with one of its possible values, true/false
bordercolor is self explanatory.
align
valign

Select

select is an element that works in conjunction with menu element. the whole functionality make it like a drop down element as we normally have in HTML.

attributes used with select are listed below, All the attributes are defined above

index
x
y
width
height
bgcolor
fontcolor
value
visible
selection
action
fontsize', 'bold', 'bordercolor'

Select and Menu Example

In this example we combine menu item and select to make a functionality of dropdown menu. In this particular example, we select any option from the menu and asign the result to the

Event

Event is meant to take action on any thing happen with a device keys. 
Event is associated to any device key and a key can be associated with multiple events.

Attributes available to handle any event include,

index as defined for above elements and has similar meaning to make its position on run-time object.,
x
y
width
height
key to which event is associated
action
method

Event Examples

keys on the mobile phone can be accessed using digital number assigned to them from 0-9. There are also keys which have slightly different access codes e.g.

soft1 to access left soft key on the phone

soft2 for right soft key on the phone

left for left arrow key

right for right arrow key

up for up arrow key

down for down arrow key

An event can be used in multiple ways to perform actions, we can use keys available on the mobile phone to trigger an event. Some of the examples are provided above.

Checkbox

check box provides a functionality to keep Boolean values in the form of 1(one) or 0(zero) Action can also be applied to a check Box. forllowingare the attributes used fir check box.

index
x
y
width
height
bgcolor
fontcolor
value
visible
selection
action

and all the attributes have similar meanings as defined before.

Checkbox Example

Imgframe

ImgFrame Example

Example: Using Different elements

This particular example is using a combination of different MXML elements to achieve a particular UI and application behaviors. While using local as resources, care should be taken to assure that particular image exisits in the resources provided with Mxim Runtime

Home | Documentation | Download | About us