Jan 04 2010
Using AspireUI Components with MDM Zinc 3.0
MDM Zinc™ 3.0 is a feature-rich Rapid Application Development Tool for turning SWFs into stunning commercial cross-platform desktop applications, screensavers, widgets, CD roms, DVD’s, kiosks and more. The AspireUI AS3 library uses PNG image files for component skinning, and this ease of skinning is a good fit for Zinc™ 3.0 projects, especially if you would like to create applications that look like native desktop applications. The toolkit currently comes with four component themes – “classic”, “xp”, “vista” and “graylic”. The first three aforementioned themes are Windows OS lookalike themes.
In this short tutorial, we will look at how you can use the AspireUI library in Zinc™ 3.0 projects, and how you can easily swap component themes by simply changing one line of code.
mdm.Application.path
When using Zinc™ 3.0, it is important to remember that relative paths to external assets do not work well. To ensure that your Zinc™ 3.0 compiled applications work as expected, you should always prefix paths with mdm.Application.path so that the application knows where to look for external assets (to be loaded during run-time).
When using the AspireUI library in a normal Flash AS3 project, we would usually initialize the uiSkins manager as follows:
uiSkins.initialize("default", "assets/skins/"); // use "default" theme folder from the relative path "assets/skins/"
When coding for Zinc™ 3.0 projects, the following will be used:
uiSkins.initialize("default", mdm.Application.path + "assets/skins/");
Likewise, in order for the uiImage class to work properly in Zinc™ 3.0 applications, the following path must be set:
uiImage.path = mdm.Application.path + "assets/images/";
That will make it possible for uiImage instances to load from the “assets/images/” folder. For example, the following will create a uiImage instance with image source loaded from “assets/images/icon.png”:
var imgIcon:uiImage = new uiImage("icon.png");
MyZincApp Class
Let’s now look at a simple MyZincApp class:
package { import flash.display.Sprite; import flash.events.Event; import com.ghostwire.ui.containers.uiScrollPane; import com.ghostwire.ui.containers.uiWindow; import com.ghostwire.ui.controls.uiImage; import com.ghostwire.ui.enums.WINDOW; import com.ghostwire.ui.managers.uiCursors; import com.ghostwire.ui.managers.uiSkins; import mdm.*; public class MyZincApp extends Sprite { public function MyZincApp():void { if (stage) init(); else addEventListener(Event.ADDED_TO_STAGE, init); } private function init(evt:Event = null):void { removeEventListener(Event.ADDED_TO_STAGE, init); // in order to work with Zinc, we need to specify // correct paths to external assets uiSkins.initialize("default", mdm.Application.path + "assets/skins/"); uiImage.path = mdm.Application.path + "assets/images/"; // listen to uiSkins manager to get notified when // theme assets have been fully loaded uiSkins.manager.addEventListener(Event.INIT, main); } private function main(evt:Event):void { // ** initializes uiCursors class ** uiCursors.initialize(stage); // ** initializes uiWindow class ** uiWindow.initialize(stage); // ** img window ** var img:uiImage = new uiImage("flower.jpg"); var imgsp:uiScrollPane = new uiScrollPane(); imgsp.fillX = true; imgsp.fillY = true; imgsp.content.addChild(img); var imgWin:uiWindow = new uiWindow(); imgWin.title = "flower.jpg"; imgWin.content.addChild(imgsp); // ** end img window ** imgWin.open(); } } }
After compiling the above class, you will get a SWF that you can then run through the Zinc Builder software to create a desktop application (for Windows, Mac or Linux). If you run the compiled Zinc application, you will see something like the following:
Changing Theme I
Now, let’s see how we can easily change the component theme. The themes are stored in their respective folders in the “assets/skins/” folder. By changing one line of code, we can switch to using another theme:
uiSkins.initialize("vista", mdm.Application.path + "assets/skins/");
With that, we will now use the “vista” theme instead of the default “xp” theme. After re-compiling the SWF and running the new SWF through the Zinc Builder software, we will see something like the following:
Changing Theme II
Next, we look at how we can change the theme without even changing any code, without re-compiling the SWF, and without re-building the Zinc application. We do this by swapping the contents of the “default” folder with the contents from the “classic” folder, and then run the Zinc application without re-building. You will see something like the following:
The above is possible because by default, the AspireUI library uses run-time skin assets (and is what we are using in this introductory tutorial). This means that by changing the PNG image assets in the “assets/skins/default” folder, you will change the look of your Zinc application. The library also supports the option to embed the skin assets within the SWF, if so desired. There is also a tool to package all the skin assets within a folder into one compressed binary file.
Aspire UI Components
Aspire UI is a library of Actionscript 3.0 (AS3) classes for building flexible and lightweight UI elements in Adobe Flash applications. Key features of the components include easy skinning using PNG image files, automatic tab focus ordering, CSS text styles, and layout management. This is a pure AS3 library with no dependency on the Flex framework. You may experiment with the various features by downloading the trial version.
MDM Zinc™ 3.0
MDM Zinc™ 3.0, available for Windows and Mac OSX, is the only development tool in its class to offer X-Platform, X-Compile™ to Windows, Mac OSX & Linux Systems. Rapid Application Development for Adobe® Flash® and Flex®. You may download MDM Zinc™ 3.0 Builder for Windows & Mac OSX at:
http://www.multidmedia.com/software/zinc/download/
