Examples

Examples can often help you get started a lot faster than reading API docs, so here are a few bits of AML to whet your appetite and show off the abilities of the library. I call these amlets for short. (If this is too stupid, someone please let me know by using the Feedback form.)

I’m sure you will notice that all of the examples below only have screenshots for the Android platform. This because that’s the only kind of phone I have, and it’s where my focus is at the moment. I do not intend to leave it this way forever though. (Donations for more phones to make this happen will be gladly taken through PayPal though! Just use the button on the right.)

If you would like to see more examples of specific tasks, please me know via the Feedback form.


Example #1: Inputs

This example shows a very basic layout with a variety of different input types. Notice how the structure is very similar to (though not exactly the same as) HTML. You can specify a simple checked="yes" to toggle buttons and checkboxes, just like HTML. Radio buttons needs to be contained within a group for logical consistency. All objects use only the minimum required space (horizontally and vertically) by default. On the Android platform, this uses the WRAP_CONTENT constant. You can specify width="fill" to use all available space (applies to height also). If you’ve ever built even an interface as simple as this in an Android app, you probably instantly recognize how much cleaner the AML version is.

Amlet (AML markup)
<aml>
  <input type="button">Test Button</input>
  <input type="checkbox">Test CheckBox</input>
  <input type="togglebutton" checked="yes" />
  <input type="imagebutton" image="drawable/icon" />
  <input type="text">Test Text</input>
  <input type="password">Test Password</input>
  <radiogroup>
    <input type="radiobutton" checked="yes">Radio Button 1</input>
    <input type="radiobutton">Radio Button 2</input>
    <input type="radiobutton">Radio Button 3</input>
  </radiogroup>
</aml>
Android iPhone Win Phone 7

Example #2: Lists

Lists are used all over the place in mobile apps. So wouldn’t it be nice if they were really easy to build? AML implements lists much like a the <ul> tag in HTML. This is translated into a native list, not just a set of items in a scrollable view.

Amlet (AML markup)
<aml>
  <list>
    <item>Sample Test List Item A</item>
    <item>Sample Test List Item B</item>
    <item>Sample Test List Item C</item>
    <item>Sample Test List Item D</item>
    <item>Sample Test List Item E</item>
    <item>Sample Test List Item F</item>
    <item>Sample Test List Item G</item>
    <item>Sample Test List Item H</item>
    <item>Sample Test List Item I</item>
    <item>Sample Test List Item J</item>
    <item>Sample Test List Item K</item>
    <item>Sample Test List Item L</item>
    <item>Sample Test List Item M</item>
    <item>Sample Test List Item N</item>
    <item>Sample Test List Item O</item>
    <item>Sample Test List Item P</item>
    <item>Sample Test List Item Q</item>
    <item>Sample Test List Item R</item>
    <item>Sample Test List Item S</item>
    <item>Sample Test List Item T</item>
    <item>Sample Test List Item U</item>
    <item>Sample Test List Item V</item>
    <item>Sample Test List Item W</item>
    <item>Sample Test List Item X</item>
    <item>Sample Test List Item Y</item>
    <item>Sample Test List Item Z</item>
  </list>
</aml>
Android iPhone Win Phone 7

Example #3: Tables

Tables are one of the biggest conveniences of AML. It’s so incredibly easy, and table cells support the colspan attribute. It’s far, far easier than the native implementation. Table cells also support horizontal and vertical alignment, in addition to the ability to specify a column index for making a certain column fill all available space at the expense of others (notice the expand attribute in the code below). I have yet to implement borders, though text colors and background colors work.

Amlet (AML markup)
<aml>
  <table expand="2">
    <tr>
      <td colspan="2">This is a block of text contained within a single table cell. This cell has a colspan of 2 so that it looks good on top of the label/field pairs below.</td>
    </tr>
    <tr>
      <td align="right">Email:</td>
      <td><input type="text" width="fill" /></td>
    </tr>
    <tr>
      <td align="right">Password:</td>
      <td><input type="password" width="fill" /></td>
    </tr>
    <tr>
      <td colspan="2">Here's another 2-column cell. Is this awesome or what?</td>
    </tr>
    <tr>
      <td colspan="2">Notice the slight visual break from the text above. This text is in yet another row. The field labels above on the left are aligned to the right, and the table is instructed to make the 2nd column expandable (like an "auto-width" kind of thing).</td>
    </tr>
    <tr>
      <td colspan="2">Additionally, the fields have their widths set to "fill" so that even though they are empty, they fill their parent cells.</td>
    </tr>
  </table>
</aml>
Android iPhone Win Phone 7

Once again, if there’s something specific you’d like to see here, please me know via the Feedback form.

Go to Top