FLEX Hello World Tutorial
Welcome to the obligatory "Hello, World!" tutorial. In this lesson, you will learn to build the most simple of widgets using the wAPI. Once you have completed this and the subsequent tutorials, you'll be well on your way to becoming a veritable widget master!
Requirements
Steps
1. Create a new .mxml document
The first step in this tutorial is to open create a new flex mxml file for your widget. You can use your favorite text editor or Flex IDE.
2. Create the mxml application code
This will be the main application for the widget
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="300" height="300" initialize="onLoad()" backgroundAlpha="0"> </mx:Application>
3. Initialize the wAPI when the application initializes
In this step, you will add <mx:Application ... initialize="onLoad()" ... and initialize access to the widget container runtime. Create a <mx:Script> tag and add a function onLoad() as below.
The main difference with using Flex and the yourminis wAPI is that the initialize="onLoad()" event handler needs to be added to your flex application.
Minimal Widget API Flex code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
width="300" height="300" initialize="onLoad()" backgroundAlpha="0">
<mx:Script>
<![CDATA[
public var widget:Object; //Widget
public function onLoad():void
{
addEventListener("widget-loaded",onWidgetLoaded);
}
public function onWidgetLoaded(evt:Event):void
{
//initialize widget container instance (width,height,backgroundColor)
widget.initWidget(300,300,0xccffff);
}
]]>
</mx:Script>
</mx:Application>
3. Add the hello world code
Add the following mxml for the helloworld label:
<mx:Label id="myLabel" x="50" y="100" fontWeight="bold" fontSize="24"/>
Add the following code to the onLoad event handler:
myLabel.text = "Hello, World!";
The resulting code should look like this:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
width="300" height="300" initialize="onLoad()" backgroundAlpha="0">
<mx:Script>
<![CDATA[
public var widget:Object; //Widget
public function onLoad():void
{
addEventListener("widget-loaded",onWidgetLoaded);
}
public function onWidgetLoaded(evt:Event):void
{
//initialize widget container instance (width,height,backgroundColor)
widget.initWidget(300,300,0xccffff);
myLabel.text = "Hello, World!";
}
]]>
</mx:Script>
<mx:Label id="myLabel" x="50" y="100" fontWeight="bold" fontSize="24"/>
</mx:Application>
4. Test!
Sign up for a yourminis account. If you already have an account, sign in now. You must be signed in before you can use the Online Widget Test Console. The Online Widget Test Console is where you test and debug basic flex widgets before uploading them to yourminis widget platform. If you've done everything correctly, you should see a widget that looks like the one in the image on the right after clicking Compile in the Test Console.
That's it!
Congratulations! You've created your first flex widget using the wAPI.
Next Steps
Check out the rest of our API documentation and tutorials including building a RSS Flex Widget. Everything else with the AS3 wAPI applies to flex widgets except for the points noted above.