Skip to content
April 6, 2012 / Daniel Freeman

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

6 Comments

Leave a Comment
  1. scottae / May 8 2012 9:27 pm

    Hey Daniel,

    I am trying to tinker with the UIDetailList component and I am wondering how to change the contents of the UIPanel for each item in the list. In your example you have a few radio buttons and check boxes. That seems to be used no matter which list item a user clicks. But I would like to be able to specify different types of content for each list item. Could you point me in the right direction?

    Thanks,
    Scott

    • Daniel Freeman / May 31 2012 12:36 pm

      DetailList isn’t really designed for that. But if every variation on your detail page is the same height, then maybe nesting pages inside detail, and switching to the appropriate page will allow you to do this.

  2. Jon Tetzlaff / May 30 2012 9:32 pm

    When using the DetailList we ran into this error. We followed the above example for it.

    ReferenceError: Error #1065: Variable detail is not defined.
    at global/flash.utils::getDefinitionByName()
    at com.danielfreeman.madcomponents::UIForm/otherCommands()[/Users/danielfreeman/Documents/Adobe Flash Builder 4/MadComponentsLib/src/com/danielfreeman/madcomponents/UIForm.as:770]
    at customMadness::UIFormJT/parseBlock()[C:\Users\jtetz816\Adobe Flash Builder 4.5\InPatientAdminApp\src\customMadness\UIFormJT.as:115]
    at com.danielfreeman.madcomponents::UIForm()[/Users/danielfreeman/Documents/Adobe Flash Builder 4/MadComponentsLib/src/com/danielfreeman/madcomponents/UIForm.as:159]
    at customMadness::UIFormJT()[C:\Users\jtetz816\Adobe Flash Builder 4.5\InPatientAdminApp\src\customMadness\UIFormJT.as:13]
    at com.danielfreeman.madcomponents::UIList/newRow()[/Users/danielfreeman/Documents/Adobe Flash Builder 4/MadComponentsLib/src/com/danielfreeman/madcomponents/UIList.as:724]
    at com.danielfreeman.madcomponents::UIList/customCell()[/Users/danielfreeman/Documents/Adobe Flash Builder 4/MadComponentsLib/src/com/danielfreeman/madcomponents/UIList.as:741]
    at com.danielfreeman.madcomponents::UIList/customRenderers()[/Users/danielfreeman/Documents/Adobe Flash Builder 4/MadComponentsLib/src/com/danielfreeman/madcomponents/UIList.as:712]
    at com.danielfreeman.madcomponents::UIList/set data0()[/Users/danielfreeman/Documents/Adobe Flash Builder 4/MadComponentsLib/src/com/danielfreeman/madcomponents/UIList.as:422]
    at com.danielfreeman.madcomponents::UIList/set filteredData()[/Users/danielfreeman/Documents/Adobe Flash Builder 4/MadComponentsLib/src/com/danielfreeman/madcomponents/UIList.as:408]
    at com.danielfreeman.madcomponents::UIList/set data()[/Users/danielfreeman/Documents/Adobe Flash Builder 4/MadComponentsLib/src/com/danielfreeman/madcomponents/UIList.as:400]
    at InPatientAdminApp()[C:\Users\jtetz816\Adobe Flash Builder 4.5\InPatientAdminApp\src\InPatientAdminApp.as:33]

    Here is our xml:

    public static const LIST_VIEW:XML =

    {PERSONAL_DATA}

    ;

  3. Jeff Carver / Jul 20 2012 11:44 pm

    Hey Daniel,

    Love the components and am in the process of evaluating using them versus learning Corona.

    Haven’t gotten very far because I can’t seem to figure out how to do something as simple as setting a background image which will appear under all other components. I’ve seen the information about using the SKIN tag but get the following error when attempting to use it:
    “[Fault] exception, information=ReferenceError: Error #1065: Variable skin is not defined.”

    I’ve imported MadComponents and ExtendedMadness but nothing seems to help. Interestingly enough, the error occurs even if the SKIN tag has no content:

    public static const INITIAL_VIEW:XML =

    Hello WOrld!
    Continue
    ;

    Any chance someone could provide a working example of using skin with anything other than a button tag?

    Thanks again for all the great work,

    Jeff

    • Daniel Freeman / Jul 21 2012 1:30 am

      My guess is you need to use UIe.create(), instead of UI.create(). But as you see, wordpress has stripped out all of your XML. I’ll send you an email directly – or you can ask again on our Facebook group (I see you’ve already joined).

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

      • Jeff Carver / Jul 21 2012 12:54 pm

        Arrggghhhh!
        Yep, that was it, knew it would be something stupidly basic.

        Thanks again,

        Jeff

To discuss MadComponents/MC3D, join the Facebook group!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 89 other followers

%d bloggers like this: