Profile - MIAD SDK

MIAD provides an easy to author and deploy solution, enabling web designers to develop branded mobile applications in the same manner they are accustomed to for the web. Pages can be stored on any ordinary web server and integrate with common server technologies.

No-longer in development :( below is snippets from the 2006 MIAD SDK site

What is MIAD?

MIAD is a data-driven mobile content browser. The primary focus of MIAD is to provide graphical mobile client/server applications a consistent look and feel across a broad spectrum of mobile devices. MIAD achieves this by exposing a vast collection of skinnable, low-level full screen GUI elements, called Widgets. The Widgets are similar to those a designer has access to when creating html web pages.

Using the MIAD technology you no-longer need to hire specialized mobile developers or worry about their ability to port your application to varying devices. MIAD decreases the time it takes to bring your application to market.

Applications developed using MIAD are full-screen and will always look and interact the same no matter what mobile the application is running on. With the vast array of mobile operating systems available its impossible to achieve this consistency and branding without the MIAD technology.

Branded MIAD applications enable the designer to incorporate into the executable static pages for offline, quick access viewing. Static pages do not incur any data charges to a user. The user may fill out form, search and user configurable data offline, then at the users own discretion they may send the data to a server for processing.

Why?

The MIAD technology can be used to develop simple standalone applications or complex dynamic client/server applications, and anything in between. MIAD is extremely versatile in what it can be used for.

Below is a brief list of some of the concepts and applications MIAD can be used for:

Concepts
  • Extending an existing web based application to the mobile space
  • Database and web service integration
  • Information and research services
  • P2P applications
  • Targeted advertising
  • Content delivery (wallpapers, ringtones, videos, games etc) ...
Applications
  • RSS News Reader
  • Picture and Text Blogging
  • Email
  • Member Forums
  • Community Messaging
  • Catalogues (supermarket catalogues etc)
  • Comics
  • Alerts (stock quotes, weather, football scores etc)
  • Data sharing (photos, ringtones etc)
  • Turn-based Multiplayer Games (Poker, Blackjack, Hearts etc)
  • Questionnaires
  • Voting
  • Mobile Magazines ...

Sample Responsiveness

Below is an example of an RSS news reader application that was constructed using MIAD in a few hours! The screenshots shown below is the application running on two different screen resolutions. The first row of images are running on a mobile with 176x220 resolution, the bottom row of images are running on a mobile with 128x128 resolution.

Styling Samples


Text.

Textboxes.

Buttons.

Alerts.

Checkbox.

Themed checkbox.

Image checkbox.

Images radio.

Magazine

Utilities

Image Viewer

Comic

Compatibility

The MIAD J2ME client has been carefully designed to be compatible with the majority of existing and future MIDP2.0/CLDC1.0 popular mobile devices.

MIAD has in-built code mechanisms to determine the device on which it is running, this enables MIAD to dynamically at runtime circumvent known device issues and automatically take advantage of specific device features. The MIAD codebase has implemented this important mobile development strategy since the very beginning of the development phase. This enables MIAD to achieve the ability of a single Jar/Jad to cover all devices.

Client Spotlight

Bake Media We're always designing, developing and delivering world-class mobile applications. Massively dynamic, client/server applications for big business. Hot, viral stuff for brands and agencies.

We get clients saying stuff like this all the time:

"we're sort of looking for this kind of mobile thing that makes people flip out, and never stop using it, because it's so gosh darn clever"

And then

"can we have it for our international launch in 2 weeks?"

Thanks to the MIAD technology our clients think we're nothing short of geniuses.

News

29th August 2006 A world-wide mobile marketing campaign for a well known drink manufacture "Barcardi" uses branded MIAD technology. The application allows users to listen to a internet streaming radio station and view dynamic advertising content. This is a great example of how the MIAD team can work with you to develop specific applications using MIAD as the base framework.

21st May 2006 MIAD's first branded application Clixo hits 35,000 downloads.

15th April 2006 Beta testing of demo RSS news reader application was generously provided by GetJar. %90 of all downloads worked successfully. Considering MIAD is still in alpha development status, these figures are very promising to MIAD's out of the box device support.



Documentation

The online documentation is provided so that you may get a thorough understanding of MIAD and page construction using MML. The online documentation is constantly being updated as MIAD matures.

What is MML?

MML stands for Miad Markup Language.

  • The MML language is based on XML
  • MML files can be created in any text editor
  • All MML files must have the mml extension
  • Any standard web server can host MML files

The first tag in the source is the <page> tag, this tell MIAD that this is the start of the MML document and the end tag </page> lets MIAD know this is the end of the document. All MML documents must declare the start and end <page> tags.

The next tag is the <widgets> tag, this tells MIAD to start reading widget declarations, and the end tag </widgets> to stop. You can see we have declared a widget of type <text>.

In between the text widget start and end tags is written the words Hello World, this is called the contents of the tag, for the text widget the contents is the text to render on screen. Inside the text widget start tag you will see font="large". The font is called an attribute and "large" is the value of the attribute. In this example MIAD will render the text "Hello World" using the large font type. The entire text widget declaration <text font="large" >Hello World</text> is called an element.

Tag - Page

The <page> tag is always the first tag in the source, this tell MIAD that this is the start of the MML document and the end tag </page> lets MIAD know this is the end of the document. All MML documents must declare the start and end <page> tags.

Tag - Widgets

The <widgets> tag tells MIAD that following is all of the widgets for the page and the </widgets> tag lets MIAD know to stop processing widgets. All widgets must be a child of the <widgets> tag.

Widget - About

The wikipedia definition of a widget is:

"A widget (or control) is an interface component that a computer user interacts with, such as a window or a text box. Widgets are sometimes qualified as virtual to distinguish them from their physical counterparts, e.g. virtual buttons that can be clicked with a mouse cursor, vs. physical buttons that can be pressed with a finger. Widgets are often packaged together in widget toolkits. Programmers use widgets to build graphical user interfaces (GUIs)."

MIAD widgets

  • Are the basic building blocks for creating interactive MML page designs
  • Have an optional X and Y position attribute, so the designer can place them anywhere on the screen
  • Are owner drawn, the designer can replace with their own graphics if desired
  • Look, feel and interact exactly the same on any mobile device
  • Can be themed via styles

Widget - Postion

What is the X and Y position attribute?

Unlike html and wap pages, MIAD mml pages allow widgets to be placed at any absolute or translated pixel location relative to the screen. Where X = 0 = left and Y = 0 = top. Positive Y values go down the screen from top to bottom. Positive X values go across the screen from left to right.

  • Both the X and Y attribute may have a absolute pixel value
  • X and Y poisitions are relative to the top left corner of all widgets
  • If you omit the Y attribute MIAD will automatically place the widget below the previous widget. This is calculated by taking the Y position and height of the previous widget and adding the application defined vertical space attribute (default is 8 pixels)
  • If you omit the X attribute MIAD will place the widget at the left of the screen
  • Only the Y attribute may be translated in either the positive or negative vertical axis
  • Only the X attribute can be aligned LEFT, CENTER or RIGHT of the screen
  • Translation is calculated by adding the Y position and height of the previously declared widget and translating either in the positive or negative direction by x number of pixels
  • Dynamic device details such as screen width and height can be retrieved via a PHP device class

NOTE: all of the rectangle styles in the example set the width and height attribute values of the rectangle widget to 20 and 20 respectively (w="20" h ="20").

  • The first black outline rectangle widget which has the style of style="OutlineBlack", has no X and Y position attributes. Not setting values for both the X and the Y position attributes causes MIAD to automatically place this widget. In this case it is the first widget so MIAD has placed it at the top left of the screen.

  • The second red outline rectangle widget has set the Y attribute value to y="+30". A Y attribute value with the plus(+) or minus(-) symbol indicates to MIAD to translate (add in this case) the value of the previously declared widget's Y position and it's height to the value. In the example we can see the red outlined rectangle is rendered 30 pixels down from the base of the first rectangle(outlined in black) even though it was declared before the green outline rectangle.

  • The third green outline rectangle you can see it is rendered below the black outline rectangle because it's Y position attribute value is set to y="-45"(translated in the negative direction). If the rectangle widget had not set the Y position attribute it would have been rendered underneath the red outline rectangle using the default vertical spacing.

  • The fourth blue outline rectangle has its Y position attribute set to y="+30" causing to be rendered 30 pixels down from the green outline rectangle.

  • The fifth black filled rectangle has no X or Y position attributes which indicates to MIAD to automatically place this widget. It's X value will be set to 0, and the Y value will be set to the position of the previous widget's Y position plus it's height and the application application defined vertical spacing setting.

  • The sixth red filled rectangle has set the X position attribute to LEFT, causing MIAD to render this widget to the left of the screen (x=0). The widget has not set a Y position attribute so MIAD will automatically place this widget in the Y dimension.

  • The seventh green filled rectangle has set the X position attribute value set to CENTER, causing MIAD to render the widget centered on the X axis. The Y position attribute value has been set to y="-20" causing MIAD to translate the Y position -20 pixels from the previous widget's Y position plus it's height. In this case all of the rectangles are 20x20 so translating by -20 causes the widget to be rendered at the same horizontal position of the previous widget.

  • The eighth blue filled rectangle has set the X position attribute value to RIGHT, causing MIAD to render the widget to the right of the screen. This is calculated by getting the mobile device screen width and subtracting the width of the widget. The Y position attribute is set to the same as the seventh green filled rectangle.

  • The ninth pink outline and yellow filled rectangle has set both the X and Y position attribute values to absolute pixel locations, in this case x="78" and y="100". The values where chosen to place the widget centered on screen.

If you use PHP you could have used the PHP MIADDevice class to get the screen resolution of the mobile device. The MIADDevice class dynamically sets device specifications based upon the mobile device MIAD is running on.

X = $mdevice->GetScreenWidth()/2 - widgetWidth/2
Y = $mdevice->GetScreenHeight()/2 - widgetHeight/2

Widget - Action

What is the action attribute?

The action attribute is used to declare a type of action the widget can perform upon user activation. Usually the action is to link to a mml page or to download content, and is activated by the user pressing the OK key while the widget is selected. The page or content can be local(reside within the Jar) or remote(reside on a server).

  • When the action attribute is declared within a widget element the widget will become selectable by the user. If it is not declared the widget is not selectable
  • Only link targets with a extension of ".mif"(fonts) or ".mml"(pages) will be loaded by MIAD all other link target extensions or non-existant extensions will be loaded by the mobile device's default content handler for the type of content. For example ".mp3" will launch audio player or save dialog, ".jpg" will launch picture viewer or save dialog and ".com" will launch the wap browser. On some devices the user maybe required to exit MIAD to download content.
  • If the value begins with "file://" the link will be considered to be located locally within the Jar
  • If the value begins with "http://" the link will be considered to be hosted remotely on a server
  • The link will default to remote if "http://" or "file://" is omitted. The remote location is the current working directory on the server, usually this will be the directory where the mml page the widget was declared in is located

Why use the term action?

The action term was chosen because the action attribute value will not always point to links. In future planned releases of miad the action attribute will be able to perform numerous functions such as send SMS/MMS and make phone calls etc.

Widget - Text

The <text> widget renders text on screen.

  • Can be opaque or transparent
  • Can be underlined
  • Can be bold
  • Can be selectable if the action attribute value is set
  • Uses AlphaRedGreenBlue(ARGB) hex color format
  • Can contain child elements with the <S> tag. This allows you to break text paragraphs into unique text elements
  • Does not use device fonts, instead uses MIAD fonts for consistency across mobile devices

Widget - Image

The <image> widget renders a image on screen.

  • Can be animated
  • Can have a fully transparent palette entry
  • Can be selectable if the action attribute value is set
  • Remote images hosted on a server are embedded within a remote page. This reduces download times and connections by downloading a page and all resources in one pass
  • Must be a Portable Network Graphic(PNG) image type
  • Local images stored within the Jar must be PNG's. Remote images can be either PNG's, JPG's and non-animating GIF's. * Animated GIF's will be supported in future versions of miad
  • If the file attribute value begins with "file://" the resource will be considered to be located locally within the Jar
  • If the file attribute value begins with "http://" the resource will be considered to be hosted remotely on a server
  • The file attribute will default to remote if "http://" or "file://" is omited. The remote location is the current working directory on the server, usually this will be the directory where the mml page the widget was declared in is located

Widget - Rectangle

The <rectangle> widget renders a rectangle on screen.

  • Can be opaque or transparent
  • Can have rounded or sharp edges
  • Is never selectable

Widget - Textbox

The <textbox> widget renders a single or multiline textbox on screen.

  • Can be an image or rectangle
  • Is only selectable when a child element of a <digest>. * See the Digest page for more information

Widget - Button

The <button> widget renders a button on screen. A button is a widget that performs a task upon user activation.

  • Can be an image or rectangle
  • Can have a highlighted image. This image is displayed when the user highlights the button
  • Can be used to submit user digest data to a server for processing when a child element of a <digest>
  • Can navigate the user back to the previous mml page upon activation
  • Can execute an action upon user activation
  • Is always selectable
  • Text is always rendered centred inside the button

From the source you can see that the "Prev page" button has overridden some of the style settings from the "ButtonPlain" style, noteably the <type> attribute " type" has been overridden to now be a "BACK" type and the text to render inside the button to "Prev page". Without changing the type miad would have treated this button widget as a "LINK" type and the designer would have had to know the address of every previous page the button was placed on. By changing the type to "BACK" miad now handles this for them automatically.

The home button has overridden the <rectangle> width and height of the "ButtonHomeLink" style as well as the <color> outline and fill colors. No other rectanlge values were overridden therefore the widget will use the style settings for them.

Widget - Radio Button

The <radiobutton> widget renders a two state radio button on screen. A radio button is a widget that allows a user to select(tick) a single choice(radio button) from multiple options(group). The radio button widget is commonly used in a digest for forcing the user to select a single result from a collection multiple choice's. Radio buttons are always part of a group, the group is determined by the name of the radio button. Radio buttons with the same name belong to the same group. Only a single radio button within a group can be ticked, if a user ticks an unselected radio button in a group all of the remaining radio buttons will be automatically unticked.

  • Can be an image or circle
  • Can be used to submit user digest data to a server for processing when a child element of a <digest>
  • Must always be part of a group, set by the name attribute value
  • One 1 within a group can be ticked
  • Is always selectable
  • Has caption text that can be rendered either to the left or right of the widget

Widget - Checkbox

The <checkbox> widget renders a two state check box on screen. A check box is a widget that allows a user to select(tick) multiple choices(check boxes) from multiple options(group). Check boxes are always part of a group, the group is determined by the name of the check box. Check boxes with the same name belong to the same group.

  • Can be an image or rectangle
  • Can be used to submit user digest data to a server for processing when a child element of a <digest>
  • Must always be part of a group, set by the name attribute value
  • Multiple choices within a group can be ticked
  • Is always selectable
  • Has caption text that can be rendered either to the left or right of the widget

Comments