Skip to content
August 8, 2015 / Daniel Freeman

Vulnerabilities Happen.

killflash

February 6, 2015 / Daniel Freeman

ExtendedMadness 0.3.1 BETA

MadComponent128exI’ve uploaded a beta of the next release of MadComponents/ExtendedMadness.  The download is pinned at the top of the MadComponents Facebook Group.  This is an FDT archive file of the source classes.  The .swc library is in the lib folder.  You can just take this .swc, and include it in your own project,

This beta fixes some idiosyncrasies with lists that were introduced in the previous release.  There are also five new features.

1. Radial Slider

This is the most exciting new addition.  It’s inspired by Apple Watch UI elements.  A radial slider is a circular slider control.  This component has a lot of options to customise its appearance.  In the centre of the concentric sliders, there’s a textfield that can be written with XML, or assigning to the .text property of UIRadialSlider.  This component dispatches UIRadialSlider.CHANGE, and UIRadialSlider.SELECT events.  UIRadialSlider has a .values property that yields an array of slider positions.  a .index property gives you the index of the last slider changed.  (There is also a .value property, that gives the value of the last slider changed. – but it’s not wired up yet in this beta version.)

Screen Shot 2015-02-06 at 21.39.08Probably the best way to learn what all the attributes do – is just to play around, and experiment with different values.  Here is the XML Layout to generate the four radial sliders above:-

<radialSlider
  values="0.7,0.4"
  rounded="false"
  offsetAngle={-Math.PI}
  maximum="0.8">
  <font color="#66FF66"/>slider
</radialSlider>
<radialSlider
  values="0.2,0.7,0.3"
  background="#FFCCCC,#FFCC99"
  colours="#CC6666,#CC9966"
  buttonColours="#FFFFCC"
  sliderThickness="8"
  margin="4"
  spacing="8"
/>

<radialSlider
  numberOfSliders="3"
  values="0.3,-0.3,0.3"
  minimum = "-0.4"
  maximum = "0.4"
  background="#666699"
  colours="#666699"
  buttonColours="#FFEE99"
  margin="-8"
  offsetAngle={1.5 * Math.PI}
/>

<radialSlider
  numberOfSliders="2"
  values="0.4,0.6"
  width = "50"
  sliderThickness="12"
  margin="4"
  alt="true"
  colours="#CCFFCC,#CCCCFF"
  outlineColours="#339933,#333399"
  background="#99CC99,#9999CC"
  maximum = "0.8"
  spacing="2"
/>

*Note that in this beta we specify angles in radians – this is an oversight, and will be changed to degrees in the next release.

2. Circular Arrangement

The <circular> containers allows you to arrange simple components (such as icons, buttons, or images) in a circlular arrangement. For example:-

<circular>
   <button/>
   <button/>
   <button/>
   <button/>
   <button/>
 <circular/>

Obviously this example is more exciting if the buttons have text or custom skin images.

 

3. Spacing

The <gap> component allows you to tweak the spacing between vertically or horizontally spaced components.  For example:

<vertical>
  <button/>
  <gap height="20"/>
  <button/>
</vertical>

 

4. <image>{DATA}</image>

There’s a change to the <image> component that allows you to specify data for different screen pixel densities, in the same way as the <tabPages> and <icons> components.  Although the <imageX> component allows you to accomplish this in a different way, <image> is now more consistent with other components.  Hence <imageX> is depreciated now.

<data>
  <item
    ldpi={getQualifiedClassName(ERROR_LD)}
    mdpi={getQualifiedClassName(ERROR_MD)}
    hdpi={getQualifiedClassName(ERROR_HD)}
  />
</data>

 

5. FTE Label

The <labelFTE> component is like the <label> component, but it utilises the Flash Text Engine.  The XML attributes match the properties of the  flash.text.engine.ElementFormat and import flash.text.engine.FontDescription classes.  There’s also a leading and a rightToLeft attribute.

 

Join The Community

For community discussions about MadComponents, and to download the latest .swc libraries, come and join the facebook page:-http://www.facebook.com/groups/madcomponents

You may also be interested in the Stage3D Facebook group: http://www.facebook.com/groups/stage3d/
There’s an introductory video to MadComponents here: http://www.youtube.com/watch?v=CMf2XGRhkOk
Please blog and tweet about this project (#MadComponents) and help to spread the word. Also, don’t forget to leave a “star”, or “g + 1″ recommendation on the Google Code site.  Also, help promote the new Github repository.
January 25, 2015 / Daniel Freeman

Eight MadComponents XML Layout features that I’d like to see in Feathers.

For every Adobe-endorsed AS3 Framework, there tends to be at least one non-endorsed AS3 Framework that is much better in some ways.  Diversity is a good thing.  So, Adobe endorsement is a mixed blessing.  On the one hand, it’s great that Adobe takes frameworks that have been incubated by the community – and injects money, publicity, and surrogate credibility.  On the other hand – exclusivity is bad for the AS3 community, and it stifles innovation and advancement.  Adobe only shines its spotlight on ONE framework in each category.  Everything else is cast into the shadows.  Developers naively assume that Adobe-endorsement means that the Adobe-endorsed framework will do everything better than the non-endorsed framework.  So when the Adobe-endorsed framework fails to deliver – that developer will look elsewhere.  They’ll jump the fence to HTML5, Unity3D, Corona, etc, rather than consider fantastic non-endosed AS3 Frameworks.  I know that this has happened, and that the Flash Platform has needlessly lost credibility and developers to the competition.

Adobe supports three significant AS3 frameworks, for three significant use-cases.  Away3D for 3D animation.  Starling for 2D animation.  And Feathers for UI Form-based apps.  For each of these use-cases, there are amazing non-endorsed frameworks.  Zest3D, and Flare3D for 3D animation.  Genome2D, and ND2Dx for 2D animation.  MadComponents for UI Form-based apps.

There is no silver bullet.  The best framework for one project, may not be the best for another.  In some respects, Adobe-endorsed frameworks are better.  In other ways, non-endorsed framework are better. It will all depend on the requirements of the application.  For example, Away3D is well-known and mature.  But Zest3D performs better on devices.  Adobe endorsement of Starling has created tremendous interest.  But Genome2D performs better.  Feathers allows for smoother page transitions, and list scrolling.  Also Feathers mixes well with Starling.  But MadComponents is better with pixel-snapped images, embedded fonts, ease of adding customised components, a faster start-up time, and it has many more components, including the most performant mobile-optimised datagrids of any AS3 UI Framework. I’m not trying to discredit the Adobe-endorsed frameworks, or their developers.  But I have a lot more respect for the developers of non-endorsed frameworks, for their tenacity, ingenuity, and dedication, despite being cast into the shadows.  I just wish there was more discussion about the relative merits of both Adobe-endorsed and non-endorsed frameworks.  I wish the authors of the Adobe-endorsed frameworks would shed more light on the alternatives, rather than silently reinforcing a misconception of theirs is the only AS3 way to do the job.

Actually, there is just one previously Adobe-endorsed framework that I would remove from the face of the planet if I had the chance.  The inadequacy of Adobe Flex for Mobile (now Apache Flex) has done a lot of damage to the credibility of Adobe AIR on devices.

I was interested to read that Josh Tynjala plans to incorporate MXML layouts to Feathers.  He is looking for corporate sponsorship.  Or he may consider Kickstarter funding.

tweet I was interested that some of the respondents to Josh’s tweet were worried that an XML layout might introduce performance problems.  Some developers assume this, because Flex on Mobile is slow and bloated.  But the problems of Flex on Mobile are not caused by the MXML.  They are caused because the Flex framework was not originally designed for mobile devices, and Flex is optimised for (slow) CPU rendermode. MadComponents is built around a powerful XML layout language that was designed for mobile layouts, and loosely based on native Android development.  And MadComponents is agile, lightweight, and easy to develop for.  So XML layouts are obviously a good idea. The main benefit of a layout XML language is that it makes UI development much much faster and easier.  Also easier to maintain and modify.  I hope that Josh manages to do this, because it opens up some powerful possibilities.  To illustrate my point, here are eight MadComponents layout features that I’d like to see brought to Feathers. (The following list will also be of interest to developers learning MadComponents)

1. Easy Page Navigation Without Code

We want our layout XML language to save us coding and effort.  Let’s look at the way that MadComponents layout deals with navigating pages. Suppose we have defined the XML layout of several pages.  PAGE0, PAGE1, PAGE2, etc…  If want to make navigation for those pages, we don’t want to mess around with glue code AS3.  We don’t want to mess around with listeners, and handlers, that call the API to change the page.  We want just want to write the layout XML, and let the framework handle the nitty-gritty.  For example,

<tabPages>
   {PAGE1}
   {PAGE2}
   {PAGE3}
</tabPages>

The above layout would generate tab buttons at the bottom of the page.  And those buttons are wired-up to work, without  any additional code.  Later, we will see how we can even define labels and icons as XML data.

Image from MyAstrolabeSky app on App Store

from MyAstrolabeSky app on App Store

Or suppose you want a standard list-based navigation that leads to a detail page.  We want the framework to deal with the nitty gritty of responding to list clicks, sliding-in the detail page, the detail page, and the back-button operation.  So this is all we need:

<navigation>
   {PAGE1}
   {PAGE2}
   {PAGE3}
</navigation>

navigation

Even pressing a button to change page shouldn’t require the developer to bother with additional glue code:

<button goTo="home_page" transition={UIPages.SLIDE_LEFT}>GO</button>
2. Custom Renderers

If Josh bases his UI layout language on MXML, then he will likely incorporate itemRenderers.  Here is the MadComponents way to do it:

<list>
   <horizontal>
      <image id="picture">40</image>
      <label id="name" alignV="centre"/>
   </horizontal>
</list>

3. Lazy Rendering

Stage3D apps don’t tend to start up as fast as GPU rendermode apps.  That’s because uploading textures, and vectors to the GPU is an overhead.  Lazy Rendering ensures that render pages as they’re displayed, rather than rendering all the pages when the app starts up.  In MadComponents we might say something like:

<pages lazyRender="true"/>
4. Pixel Density Matched Images

For the sharpest and best quality images, we will want to snap pixels, and match the unscaled image size to the screen pixel density.   So we might specify the image data for icons or tab pages like this:

<data>
     <item label="page 1"
        ldpi={getQualifiedClassName(ICON_LD)}
        mdpi={getQualifiedClassName(ICON_MD)}
        hdpi={getQualifiedClassName(ICON_HD)}
    />
 …etc… etc….
 </data>
5. Different Layouts for Different Screens

If we want to build universal apps.  Or if we want to cater for devices with very small screens (240×320).  Or even if we want different layouts for portrait and landscape orientation – then our XML layout language should deal with alternative layouts for different size dimensions.

<screens id="screens" lazyRender="true" recycle="true">
 <vertical size="320x240">......
 <vertical size="640x480">.....

For more information about the screens tag, see here.

6. Better Labels

Recently, a developer told me that his Hebrew text list was taking about ten seconds to initialise in Feathers.  This bottleneck was due to rendering the text on the display-list, then uploading each row label as a texture.  In MadComponents, there is no noticeable start-up delay.  So, it would be great if there was any optimisation that could be done in Feathers to initialise embedded font text faster.  In MadComponents, an embedded font label looks like this:

[Embed(source="/fonts/SomeHebrewFont.ttf", fontFamily="Hebrew", embedAsCFF="false")]
protected const Hebrew:Class;
<label id="label" alignH="fill" embedFonts="true" antiAliasType="advanced"/>
7. The Model Tag

The model tag enables communication with a server.  It handles retrieval of JSON, XML, or AMF data, parsing, and deriving the data for a form or list.

<model url="http://localhost/MobileTestDrive/gateway.php" service="EmployeeService.getEmployeesSummary" action="loadAMF">
    <firstname>label</firstname>
    <lastname>label</lastname>
    <photofile>image</photofile>
    <title/>
    <id/>
</model>

The entire example that this code snippet comes from can be found here.

8. Make It Extensible

MadComponents was designed to be easily extensible, with both pre-existing display-list libraries, and new components.  This extensibility philosophy even applies to the XML layout language.  Here’s an example of using a MinimalComps component inside a MadComponents layout:-

<vertical xmlns:minimal="com.bit101.components">
    <minimal:PushButton label="push me" alignH="fill" height="32" skinClass="com.dgrigg.skins::ButtonImageSkin"/>
</vertical>;
Conclusions

An XML UI layout saves you a lot of time, effort, and coding when developing an application.  This is because a powerful XML UI layout language will replace a lot of code.  Not only does the layout replace the code to render a UI to the target device screen size.  It also handles orientation change.  And we’ve seen how aspects of the layout language can also replace the code to navigate an app, custom renderers, managing resources to match screen pixel density, layouts for different screen sizes and orientations, server communication, and many more capabilities.  So XML Layouts for Feathers are definitely a good idea.

links

Feathers:  http://feathersui.com MadComponents: https://www.facebook.com/groups/madcomponents github: https://github.com/danfreeman/MadComponents video: https://www.youtube.com/watch?v=CMf2XGRhkOk

November 14, 2014 / Daniel Freeman

Flash Platform, OpenFL and Adobe AIR links.

Adobe Feeds are disappearing soon. So I thought it would be useful to publish a list of useful AS3/Flash/OpenFL links, groups, blogs, aggregates, websites etc. This isn’t an exhaustive live. Just a starting point lashed together from my own favourites, and contributions from other developers.  So if I’ve left anything out – please let me know. Also, please subscribe to THIS website.

FACEBOOK GROUPS

https://www.facebook.com/groups/stage3d/ https://www.facebook.com/groups/AdobeFlashActionScript3/ https://www.facebook.com/groups/210259312345069/ https://www.facebook.com/groups/madcomponents/ https://www.facebook.com/groups/crossplatformmobile/ https://www.facebook.com/groups/alauddin (Actionscript 3)

LINKED-IN GROUPS

https://www.linkedin.com/groups?home&gid=66366 (Adobe AIR Developers)

GOOGLE+

https://plus.google.com/u/0/communities/117718661865241598816

WEBSITES

http://flashdaily.net http://www.as3gamegears.com/

CODE

https://github.com/ane-community?scid=social31987906 https://code.google.com/p/stage3dexamples/

NATIVE EXTENSIONS

https://www.facebook.com/AirNativeExtensions
https://twitter.com/AIRNativeExt
https://plus.google.com/u/0/b/104049994957806078962/104049994957806078962/posts

FLEX AND ACTIONSCRIPT (Thanks to Cato Paus Skrede for providing this list).

http://flexdevtips.blogspot.in/?m=1 http://www.tink.ws/blog/ http://blog.flexexamples.com/ http://soenkerohde.com/category/flex/ http://coenraets.org/blog/?s=flex&submit=Search http://blog.mediarain.com/category/flex/ http://www.adobe.com/devnet/flex/samples/fig_panzoom.html http://srinichekuri.wordpress.com/tag/flex4/ http://www.yonaskolb.com/blog/tag/flex http://en.nicoptere.net/?p=745 http://thatsthaway.wordpress.com/page/3/ http://saturnboy.com/tag/flex4/ http://www.hulstkamp.com/ http://divillysausages.com/blog http://wonderfl.net/ http://flexlayouts.org/ http://evtimmy.com/ http://miti.pricope.com/category/flex/ http://www.flexsamples.com/blog/category/flex-4/ http://flassari.is/2009/11/pie-mask-in-as3/ http://www.leonardsouza.com/flex/flexerific/ http://blog.flexdevelopers.com/ http://blog.snowflax.com/category/flex/ http://www.andrewalderson.com/ http://www.anujgakhar.com/category/flex/ http://flexponential.com/ http://blog.devinholloway.com/ http://patrickbay.ca/blog/?p=515 http://www.ardisialabs.com/demo/

OPEN-FL

http://www.openfl.org http://haxe.io/ (All the news about Haxe) https://www.facebook.com/groups/9654324493/ http://www.khaledgarbaya.net (Blog with Haxe examples) http://try.haxe.org/ (to try some some live haxe code) http://community.openfl.org/ community website for openfl https://github.com/openfl/lime

GENOME2D

http://www.genome2d.com http://blog.flash-core.com/?tag=genome2d https://github.com/pshtif/Genome2D

ND2Dx

http://blog.open-design.be/2014/11/14/nd2dx-update-faster-more-flexible-new-rendering-techniques-3d-transformations-and-new-dynamic-shader-system/
https://github.com/NoRabbit/ND2Dx

STARLING

http://gamua.com/starling/

FEATHERS

http://feathersui.com

MADCOMPONENTS

blog: https://madskool.wordpress.com Facebook: https://www.facebook.com/groups/madcomponents/ github: https://github.com/danfreeman/MadComponents video: https://www.youtube.com/watch?v=CMf2XGRhkOk

MINIMALCOMPS

http://www.minimalcomps.com

ZEST 3D

website: http://www.zest3d.com Facebook: http://facebook.com/zest3d
Github: http://www.github.com/zest3d
Homepage: http://www.zest3d.com
Community: http://community.zest3d.com
Forums: http://community.zest3d.com/forums/
Wiki: http://community.zest3d.com/wiki/
Twitter: http://www.twitter.com/zest3d
Google Plus: https://plus.google.com/108064083633321488754/posts

AWAY3D

http://away3d.com https://www.facebook.com/away3d

FLARE 3D

fb: https://www.facebook.com/pages/FLARE3D/480021110505 twitter: https://twitter.com/flare3d site: http://www.flare3d.com wiki: http://wiki.flare3d.com/ github: https://github.com/flare3d blog: http://www.flare3d.com/blog

October 13, 2014 / Daniel Freeman

MadComponents 0.8 Released

MadComponent128exThe long-awaited milestone release is out now!  MadComponents 0.8 / ExtendedMadness 0.3 includes more datagrids, tables, faster custom list renderer, and better support for images matched to screen density.

The source code is still hosted on GoogleCode.  But since, the .swc libraries can’t be downloaded from there, we’re hosting on Github too.  The .swc libraries can be downloaded from Github.

Many of these new features have been discussed already.  (See previous posts, part1 and part2). A new datagrid component made its way into to the final cut.  UISimpleDataGrid subclasses the other datagrids.  It doesn’t have as many features, but it renders even faster than UIFastDataGrid.  And, just like the other datagrids, it is optimised for mobile screens.  UISimpleDataGrid achieves its speed by rendering all grid cells within a single TextField.  Text items separated by newlines and tabs.  Of course, this means that there are some restrictions on cell text formatting.  And no multiline or text-wrapped items.  But provided that you can work within those restrictions – rendering is very, very fast.  If these restrictions get in your way – then simply use UIFastDataGrid instead.  As the name suggests, it’s no slouch either. Here’s an example layout:

<simpleDataGrid id=”dataGrid” titleBarColour=”#333333″ background=”#333333,#FFFFFF,#CCCCFF”>
    <title><font color=”#FFFFFF” size=”18″/>Datagrid example</title>
    <headerFont face=”Arial” size=”16″ color=”#EEEEFF”/>
    <font face=”Arial” size=”13″ color=”#333333″/>
    {DATA}
</simpleDataGrid>;

UISimpleDataGrid may be nested inside UIScrollDataGrids.  And UIScrollDataGrid has a new “datagrid” attribute. For example:

<scrollDataGrid datagrid=”simple”>
or
<scrollDataGrid datagrid=”fast”>
or
<scrollDataGrid datagrid=”special”>

Join The Community

For community discussions about MadComponents, and to download the latest .swc libraries, come and join the facebook page:-http://www.facebook.com/groups/madcomponents

You may also be interested in the Stage3D Facebook group: http://www.facebook.com/groups/stage3d/
There’s an introductory video to MadComponents here: http://www.youtube.com/watch?v=CMf2XGRhkOk
Please blog and tweet about this project (#MadComponents) and help to spread the word. Also, don’t forget to leave a “star”, or “g + 1″ recommendation on the Google Code site.  Also, help promote the new Github repository.
April 21, 2014 / Daniel Freeman

MadComponents 0.8 ExtendedMadness 0.3 BETA part 2

MadComponent128exIn the previous part of this blog post, we described five new features in the MadComponents beta release. In this second part, we’ll describe five remaining new features. Most new features are refinements on existing components.  The beta is available on the MadComponents FaceBook Group to download and try now.  (See in pinned thread – the beta is included in the 0.79/0.21 folder).

Please try it out – and report any problems.  There’s a lot of new stuff – so I’d appreciate any help ensuring that all the old functionality is still ok – and all the new stuff works as advertised.

This is what we have left to cover:

6. UIIcons improvements:  The new scheme for specifying images and labels in the XML layout, and different resolution images for different density screens, may also be used with the UIIcons component.

7. UITabPagesSliding:  Another kind of tabbed pages component, with a tab button panel that scrolls horizontally, allowing you to add many buttons, regardless of screen size limitations.

8.  Per-Row Renderers and Background Colours for Lists:  Apply different item renderers, and different settings to different rows of a list.

9. Better List Scrolling Performance and <renderer> Tag:  An easier way to define custom item renderers – that also results in smoother scrolling behaviour.

1o. <model> tag now deals with XML attributes:  Previously, the model tag dealt with <this>kind of data</this> not <this attr=”kind of data”/>.

 

 

So here’s the remaining new stuff in detail:-

6. UIIcons Improvements.

UIIcons has been refined and improved a lot over the last few versions. UIIcons allows for a horizontally arranged line of clickable icons. Each may have a label. (It may have a length of one. Just one icon). Each icon may be pixel-snapped, and unscaled for sharpness. And you can automatically selected from different size images. Here’s a typical UIIcons layout:-

<icons border=”false”
gapH=”30″
leftMargin=”20″
height=”38″
background=”#001133,#000022″
iconColour=”#FFCC33″
activeColour=”#CCCCFF”
pixelSnapping = “true”>
<font color=”#FFEE99″/>
<activeFont color=”#CCFFFF”/>
{DATA}
</icons>;

UIIcons

So this layout describes a line of icons. LeftMargin defines the start position of the first, and then they are spaced by gapH. iconColour and activeColour describe the colour applied to icons, and how it changes if an icon is pressed. The icons are toggled, so that only one is active at any time. <font> and <activeFont> describe the styling applied to the label in the normal and active states. Note that the background has two values, again for normal and active states.

The data is specified in the same way as tabbed pages. Including the use of “ldpi”, “mdpi”, “hdpi”, “xhdpi” and “xxhdpi” attributes. eg:

<data>
<item label=”page 1″
ldpi={getQualifiedClassName(ERROR_LD)}
mdpi={getQualifiedClassName(ERROR_MD)}
hdpi={getQualifiedClassName(ERROR_HD)}
/>
…etc… etc….
</data>
 
 

7. UITabPagesSliding

UITabPagesSliding encapsulates a popular layout that combines UIIcons with UIScrollHorizontal and UIPages to provide a tabbed pages layout with sliding tab buttons. Rather than implement it yourself, from its constituent components – you just need to use a layout like this:-

protected static const PAGES:XML =    <tabPagesSliding background=”#CCFFCC” alt=”true”>
{DATA}
{PAGE0}
{PAGE1}
</tabPagesSliding>;

The data is the same as UIIcons. Note that you can get to instances of the UIPages and UIIcons constituents using the .tabPages and .icons getter methods.

 

8. Per-Row Renderers and Background Colours for Lists

Lists include a new setter method, rendererXML. This allows you to specify a new custom renderer prior to assigning new data to a list. eg:

_myList.rendererXML = RENDERER_XML;
_myList.data = newData;

(There is also a depreciated .renderer setter – use .rendererXML instead, as .renderer will be removed soon)

But it is also possible to specify different renderers for each list row ($renderer). You can also assign different background colours ($colour), whether to draw vertical dividing lines or not ($lines), and whether the list row highlights when clicked ($highlight). These options may be optionally included in the row data. eg:

_myList.data = [{label:”Hello World”, $renderer:XML_RENDERER, $colour:0xFF9900 , $lines:false, $highlight:true }];

 

9. Better List Scrolling Performance and <renderer> Tag

This new version has tweaked the performance of lists so that they scroll more smoothly. There is also a new, more efficient way to declare common custom renderers. The most common custom renders declare text fields one after another, with an optional image on the left. Up until now – we would have used nested <horizontal> and <vertical> tags to achieve this. But a nested, more complicated, Sprites within Sprites, display-list tree turns out to be less optimal when it comes to scroll performance. Especially, when your list has many renderers made up like this. The new UIRenderer class results in a flatter row renderer.

So, instead of writing a list renderer like this:-

<horizontal>
<image id=”img”>60</image>
<vertical alignV=”centre”>
<label id=”line1″>Hello World</label>
<label id=”line2″>second line of text</label>
</vertical>
</horizontal>

You can simply write it like this:-

<renderer>
<image id=”img”>60</image>
<label id=”line1″>Hello World</label>
<label id=”line2″>second line of text</label>
</renderer>

It’s easier, and it performs better. But obviously, the old method is still appropriate for any general renderer layout where <renderer> can’t be applied.

 

1o. <model> tag now deals with XML attributes

The <model> tag has always made it easy to read XML, JSON, or AMF data from a server – and use it to populate a list or form. But previously, the XML capability was limited to reading data between tags. <this>kind of data</this>. Now we can deal with <this attr=”kind of data”/>.

Consider the following XML data:-<?xml version=”1.0″ encoding=”utf-8″?>
<stuff>
<item gender=”male”>
<name>Fred Bloggs</name>
<age flag=”2″>32</age>
</item>
<item gender=”female”>
<name>Sarah Wilson</name>
<age flag=”3″>28</age>
</item>… etc…etc…..

You could write the following layout to extract this data and display it in a list:-

<list>
<model url=”http://127.0.0.1/people.xml&#8221; action=”loadXML”>
<stuff>
<item gender=””>
<name/>
<age flag=”flagg”/>
</item>
</stuff>
</model>
<renderer>
<label id=”name”/>
<label id=”age”/>
<label id=”gender”/>
<label id=”flagg”/>
</renderer>
</list>

… so that’s all the new stuff covered.  Please download the Beta, and try it out.  Let me know about any problems.

Join The Community

For community discussions about MadComponents, and to download the latest .swc libraries, come and join the facebook page:-http://www.facebook.com/groups/madcomponents

You may also be interested in the Stage3D Facebook group: http://www.facebook.com/groups/stage3d/

here’s an introductory video to MadComponents here: http://www.youtube.com/watch?v=CMf2XGRhkOk

Please blog about this project and help to spread the word. Also, don’t forget to leave a “star”, or “g + 1″ recommendation on the Google Code site.

 

April 17, 2014 / Daniel Freeman

MadComponents 0.8 ExtendedMadness 0.3 BETA part 1

MadComponent128exThe next version of MadComponents/ExtendedMadness will include some significant changes and additions.  The beta is available on the MadComponents FaceBook Group to download and try now.  (See in pinned thread – the beta is included in the 0.79/0.21 folder).

Please try it out – and report any problems.  There’s a lot of new stuff – so I’d appreciate any help ensuring that all the old functionality is still ok – and all the new stuff works as advertised.  Here are 10 new features:

1. Depreciated Components and New Components:  Experimental undocumented, and previously depreciated components have gone.  But the ancient UIDataGrid has gone (use UIFastDataGrid), and the ugly UIArrow component is also gone (use <list arrows=”true”>).  There are also new components added: UITable, UISpecialDataGrid, UITabPagesSliding, UIScreens, and UIRenderer.

2. Support for Multiple Screen Sizes And Pixel Densities:  Use the <screen> tag to specify alternate layouts for different screen sizes.

3. UISpecialDataGrid:  A fast and capable Datagrid with images.  optimised for mobile devices and GPU rendermode.

Screen shot 2014-04-17 at 12.57.45

4. UITable:  Another way of displaying tabular/grid layouts.

5. Icons and Labels For Tabbed Pages:  Previously, you needed to do this programmatically using the setTab() method. Now, you can specify labels and images in the layout – and you can even specify multiple versions for different screen pixel densities.

6. UIIcons improvements:  The new scheme for specifying images and labels in the XML layout, and different resolution images for different density screens, may also be used with the UIIcons component.

7. UITabPagesSliding:  Another kind of tabbed pages component, with a tab button panel that scrolls horizontally, allowing you to add many buttons, regardless of screen size limitations.

8.  Per-Row Renderers and Background Colours for Lists:  Apply different item renderers, and different settings to different rows of a list.

9. Better List Scrolling Performance and <renderer> Tag:  An easier way to define custom item renderers – that also results in smoother scrolling behaviour.

1o. <model> tag now deals with XML attributes:  Previously, the model tag dealt with <this>kind of data</this> not <this attr=”kind of data”/>.

 

So, as there’s so much new stuff – it’s going to take a while to go through the details.  So I’m going to split the details between two blog posts.  This, and a sequel to follow soon.

1. Depreciated Components.

UIArrow, UIDataGrid, UIDetailList, UIField, UIArrowButton, UIAccordionList, UIPopUpButton, and UITextSlider.  Sometimes, ExtendedMadness included experimental trial components that were never formally documented – and it’s mostly those that have been removed here.  Be careful that UIArrow is gone now – as some early examples used this.  <fastDataGrid> is mostly equivalent to <dataGrid> – so there’s usually no problem replacing <dataGrid> with <fastDataGrid>, and UIDataGrid with UIFastDataGrid.

 

2. Support for screen sizes and pixel densities

The <screens> tag allows you to define multiple alternative layouts, for various screen sizes, orientations, or pixel densities.  Use it like this:-

<screens id=”screens” lazyRender=”true” recycle=”true” border=”false” autoResize=”false”>
{LAYOUT0}
{LAYOUT1}
{LAYOUT2}
</screens>

Each LAYOUT will define a size attribute.  For example:

protected static const LAYOUT0:XML = <vertical size=”P320x200C”>…etc…

The size code may optionally begin with a P or L, for portrait or landscape.  Next we specify the minimum screen size for this layout: WxH.  (Note that this is the screen size AFTER pixel density scaling.)

There’s an optional C – which will centre the layout on the screen.

Alternatively, specify the minimum pixel density.  eg:  size=”320DPI”.

You would arrange LAYOUT0, LAYOUT1, etc… in order from smallest to largest.  With the default specified last.

 

3. UISpecialDataGrid

I briefly considered calling this an Advanced Data Grid.  But I didn’t want to imply any Flex bloatedness.  The UISpecialDataGrid is optimised for performance with GPU rendermode and for mobile devices.   UISpecialDataGrid subclasses UIFastDataGrid and adds the ability to incorporate images (or any DisplayObject) inside grid cells.

The data for a UISpecialDataGrid starts with the two dimensional array for rows and columns – but any cell that includes more than one item (eg: text + image) will itself be defined as an array.

eg: [“Here s my text”, IMAGE_CLASS]  or [ IMAGE_CLASS, “Here is my text” ].  There is a restriction, in that you are only allowed ONE text part.  But you may use multiple images, both before and after the text.

(There is a possible work-around to this restriction – if you were to specify a DisplayObject that comprises of both images and text, and whatever else – but I haven’t tried this.)

 

4. UITable

MadComponents has always provided more than one way of constructing tables.  Originally, with the old UIDataGrid component – and using a list with a custom renderer and lines=”true” – to construct vertical dividing lines within each row.  <rows> and <columns> containers have always allowed you to arrange components into a tabular/grid arrangement – but there are no dividing lines.  The new UITable component can be used instead of UIRows – but each cell may have a background and outline colour.

Instead of writing this:

<rows>
    <columns>
        etc….

Just write this:

<table>
    <columns>
         etc….
 

5.  Icons and Labels for Tabbed Pages

Previously, the icons and labels on on tabbed pages needed to be constructed programmatically using the setTab method.  Use a data tag:

protected static const DATA:XML =
    <data>
        <item label=”page 1″  image={getQualifiedClassName(ERROR)}/>
        <item label=”page 2″  image={getQualifiedClassName(SYNC)} />
        <item label=”page 3″  image={getQualifiedClassName(CHAT)}  />
    </data>;
 
protected static const LAYOUT:XML =
    <tabPages>
        {DATA}
        {PAGE1}
        {PAGE2}
        {PAGE3}
    </tabPages>;

In this new version – you may specify them within the XML layout.  Also, you can deal with screens with different pixel densities.  You can use a size attributes to specify screen dpi, as you would for the <screens> tag.  Pixel Densities specified in ascending order, and multiple DATA definitions.

<data size=”160DPI”  >

There’s another way to specify images for multiple pixel densities.  Using ldpi, mdpi, hdpi, xhdpi, and xxhdpi attributes.  Like this:-

protected static const DATA:XML =
    <data>
    <item label=”page 1″
        ldpi={getQualifiedClassName(ERROR_LD)}
        mdpi={getQualifiedClassName(ERROR_MD)}
        hdpi={getQualifiedClassName(ERROR_HD)}
    />
    <item label=”page 2″
        ldpi={getQualifiedClassName(SYNC_LD)}
        mdpi={getQualifiedClassName(SYNC_MD)}
        hdpi={getQualifiedClassName(SYNC_HD)}
    />
    <item label=”page 3″
        ldpi={getQualifiedClassName(CHAT_LD)}
        mdpi={getQualifiedClassName(CHAT_MD)}
        hdpi={getQualifiedClassName(CHAT_HD)}
    />
</data>;
 

Join The Community

For community discussions about MadComponents, and to download the latest .swc libraries, come and join the facebook page:-http://www.facebook.com/groups/madcomponents

You may also be interested in the Stage3D Facebook group: http://www.facebook.com/groups/stage3d/

here’s an introductory video to MadComponents here: http://www.youtube.com/watch?v=CMf2XGRhkOk

Please blog about this project and help to spread the word. Also, don’t forget to leave a “star”, or “g + 1″ recommendation on the Google Code site.

 

Follow

Get every new post delivered to your Inbox.

Join 95 other followers