Developer Site: Getting Started with Mobile Application XML (MAX)

  • MAX Overview
  • Getting Started
  • Basics
  1. What is MAX?
  2. Creating your first MAX Application: Hello Word!
  3. Install and test your MAX Application
  4. Creating your second MAX Application: Hello Upvise!
  5. A more interesting example: a RSS news Reader

What is MAX?

MAX or Mobile Application XML is a new, very simple yet powerful XML declarative language which enables to define the user interface of a mobile application which runs on any mobile phone. The same you use HTML or XHTML to do web pages, you can use MAX to do the UI of your mobile application. MAX uses the same paradigm as HTML.

At the most basic level, a mobile application consists of:

  • an XML file, describing the application properties, behavior and start screen, in the MAX language 
  • one or more server side RSS feeds, used to update the widget data

Creating your first MAX Application: Hello Word!

Creating a mobile application is very simple and requires basic XML skills.

<?xml version="1.0"?>
<max id="mycompany.helloword" version="1.0">
  <title>My First App</title>
  <page id="default">
    <title>Hello World!</title>
  </page>
</max>
This mobile app simply displays a "Hello World" message. You notice the root node which is always <max>, it identifies this file as an MAX application. It has 2 mandatory attributes, id and version. id uniquely identifies your application and version defines the version of your app, so that you can esaily deploy new versions. This MAX application contains only one <page> element, which has a <title> element containing our message.

Install and Test your MAX Application

You can install and test your application either on the Upvise Simulator on your computer or on your mobile phone.

Using the Upvise Simulator on your computer:
  1. Download the Upvise Simulator
  2. Start the Upvise Simulator
  3. select File > Open in the simulator window menu
  4. Choose your MAX application file and click OK
Note : when testing your MAX File on the Simulator, the application is run locally and is not uploaded to your web account. Datastores are not synchronized with your web account as well.

On your mobile phone:
  1. Download the Upvise client for your phone,
  2. Create an Upvise account and sign in on your phone
  3. Go to your Upvise account Settings on your computer, select Upload max page link on the left pane
  4. Upload the MAX file into your account, (ignore the optional Javascript file box)
  5. Start Upvise on your phone. You should see your application title displayed in the list. (press the * key to refresh the page if you do not see it)
Note : if you redeploy your local MAX file again to your account, make sure you increment the version attribute of the max root tag of the MAX File before your redeploy. (if you do not do this, the Upvise client on your phone will not redownload the latest version and keep the previous version). You can see the version of the installed app on your phone in Settings > Device Info > Installed Apps

Creating your second MAX application: Hello Upvise!

Let's extend your first example

<?xml version="1.0"?>
<max id="mycompany.helloupvise" version="1.0">
  <title>My Second App</title>
  <page id="default">
    <title>Hello</title>
    <item>Hello World!</item>
    <item>Hello Upvise!</item>
  </page>
</max>
That's easy! We just added a new element <item>, actually we added 2. It simply displays Hello World and Hello Upvise! in a list. On a mobile phone you could use the up and down arrows to move up and down in the list.

A more interesting example: RSS news Reader

Let's extend our first sample and add some dynamic content coming from a simple RSS feed. The nice thing about using RSS format to update content of the widget is that you can reuse existing RSS feeds available on the Internet. This way you can easily create "Mashup" applications. Let's get the Yahoo news feed, for example:

<?xml version="1.0"?>
<max id="mycompany.rssreader" version="1.0">
  <title>My Third App</title>
  <page id="default">
    <query id="data" type="rss">http://rss.news.yahoo.com/rss/topstories</query>
      <title>Rss Reader</title>
        <item>{data.title}</item>
  </page>
</max>
This second sample extends the first one by adding a <query> tag pointing a to custom RSS  feed. The title of each RSS item of the feed is displayed in a list item, using the <item> tag.