Improved images for mobile AIR Apps: ExtendedMadness

The latest of updates for the open-source Extended Madness framework have been mostly centred around improvements in the way images are displayed.  I’ve introduced a mechanism for choosing higher resolution unscaled images for higher screen densities.  There are new ways to skin page backgrounds and list rows.  Amongst the new components is a new patch nine image component, and a component to build a row of icon buttons.

<imageX/>

The imageX component allows you to specify a group of images.  Typically, these will be the same image, at different resolutions.  You  may also specify the width, and/or height in terms of adjusted screen dimensions.  The component will choose the largest UNSCALED image that fits the space.  (If the space is smaller than all candidate images, the first image is chosen).

<imageX width=”300″>{getQualifiedClassName(IMG_0)},{getQualifiedClassName(IMG_2)},{getQualifiedClassName(IMG_3)}</imageX>

Note that width and height attributes refer to distances AFTER scaling to compensate for screen dpi, but the image itself is not scaled to compensate for screen dpi in the way that (vector) components are.

An unscaled <imageX> will appear sharper, than the scaled <image/> component.

<image9/>

This is a patch nine image.  (For a description of how nine patch images work, see here. ).  The image has smoothing applied as do all scalable images from MadComponents version 0.7.3.

<touch/>

The touch component contains two children defining the normal state, and touch state.  Usually the normal state component is visible.  When the user touches the component, then the touch state component is visible.

<touch>

   <imageX width=”300″>

      {getQualifiedClassName(IMG_UP_0)},

      {getQualifiedClassName(IMG_UP_1)},

      {getQualifiedClassName(IMG_UP_2)}    

  </imageX>

  <imageX width=”300″>

     {getQualifiedClassName(IMG_DOWN_0)},

     {getQualifiedClassName(IMG_DOWN_1)},

     {getQualifiedClassName(IMG_DOWN_2)}

  </imageX>

</touch>

<skin/>

The skin component allows you to apply a nine patch image skin to the background of a page, or to a list row.

For example, here is how you might apply a skin to a page:-

<vertical>

 <skin>{getQualifiedClassName(SKIN)}</skin>

    .

    . (form)

    .

</vertical>

 

Here is an example of how to apply a skin background image to a list row:

<list>

{DATA}

 <vertical>

  <skin>{getQualifiedClassName(SKIN)}</skin>

    .

    . (custom renderer)

    .

 </vertical>

</list>

Here is an example of how to apply a skin background image to a list row, and another skin that represents the “clicked” highlight appearance of that list row:-

<list>

{DATA}

 <vertical>

  <skin>{getQualifiedClassName(SKIN_DOWN)}</skin>

  <skin>{getQualifiedClassName(SKIN_UP)}</skin>

    .

    . (custom renderer)

    .

 </vertical>

</list>

 

Does anyone have any cool nine patch images I can use to show off this skinning feature?  I’m a programmer, not a graphic designer, and I could do with some help here, with layouts and skins that I can showpiece.  Contact me if you can help.

 

<icons/>

<icons highlightColour=”#FFCC33″>{getQualifiedClassName(ICON0)},{getQualifiedClassName(ICON1)},{getQualifiedClassName(ICON2)}</icons>

A row of clickable icons.

There are also some non-image related additions to extendedMadness.

<detailList>

When you click on a detail list, the list splits apart, revealing a detail form.

<detailList background=”#FFFFFF,#F6F6F6″>

   {DATA}

   <detail border=”true” darkenColour=”#F9F9F9″ shadowColour=”#D6D6D6″ background=”#D6D6D6″>

      {FORM}

   </detail>

</detailList>

darkenColour is a tint colour applied to non-selected cells when the detail form is displayed.

background is the colour of the detail form.

shadowColour is the colour of the shadow at the top of the detail form.

<progressBar>

<line>

A horizontal line divider.

Facebook Page

For community discussions about MadComponents and ExtendedMadness, please join the facebook page:-

http://www.facebook.com/groups/336764056350846/

About these ads