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.

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>

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>

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.