Cool ToolTips from Flexosaurus

Conventional Flex tooltips are just displaying text that provides info. In the following sample I created few custom tooltips.

•Animated tooltip
•Image tooltip

The first one is a tooltip with transparent background with some animation added. The second tooltip is more decorative. Because of the image size the text should be short. It is possible to take bigger image and resize it depending on text length, but I don't think that the big tooltips of this style will look good enough.

Also here is provided the way for applying some effects for tooltip's appearance and disappearance.

It is often useful to have tooltip which is supporting HTML. It is quite easy to implement. If you need it, just let me know in the comments and I'll give you the code.


Source

Flexosaurus about Blogger API for ActionScript

Yesterday I was trying to get authenticating to the Blogger service, but I was getting following error. Error: [IOErrorEvent type="ioError" bubbles=false cancelable=false
eventPhase=2 text="Error #2032: Stream Error. URL:
https://www.google.com/accounts/ClientLogin"]. URL:
https://www.google.com/accounts/ClientLogin.

I found out that Google currently do not support cross-domain requests to Google Accounts from Flash. There is currently an issue filed against this here: http://code.google.com/p/gdata-issues/issues/detail?id=406 .

Anyhow I was able to get authorization token(it worked for Mozilla FireFox, but not for IE6), but not more than that. But it may be able to work around this by proxying requests through own domain, however. So maybe I will try.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
 applicationComplete="authotize()">

<mx:Script><![CDATA[

 import mx.rpc.events.FaultEvent;
 import mx.rpc.events.ResultEvent;
 import mx.rpc.http.mxml.HTTPService;

 //Authorization Token
 private var _auth:String;

 public function authotize():void
 { 
  var urlLoader:URLLoader = new URLLoader();
  var urlRequest:URLRequest = new URLRequest();
  var urlVariables:URLVariables = new URLVariables();

  urlVariables.Email = {you_e-mail_here}
  urlVariables.Passwd = {your_password_here}
  urlVariables.service = "blogger";
  urlVariables.source = "exampleCo-exampleApp-1";

  urlRequest.url = "https://www.google.com/accounts/ClientLogin";
  urlRequest.data = urlVariables;
  urlRequest.method = URLRequestMethod.POST;

  urlLoader.dataFormat = URLLoaderDataFormat.VARIABLES;
  urlLoader.addEventListener(IOErrorEvent.IO_ERROR, onError);
  urlLoader.addEventListener(HTTPStatusEvent.HTTP_STATUS, onHTTPStatus);
  urlLoader.addEventListener(Event.COMPLETE, onComplete);

  urlLoader.load(urlRequest);
 }

 private function onComplete(event:Event):void
 {
  var str:String = event.currentTarget.data;
  var index:int = str.indexOf("Auth=");
  _auth = str.substring(index + 5, str.length - 1);
 }

 private function onHTTPStatus(event:HTTPStatusEvent):void
 {
  trace(event);
 }

 private function onError(event:Event):void
 {
  trace(event);
 }

]]></mx:Script>

</mx:Application>

Editable chart with custom axis from Flexosaurus

Nearly one month ago I was needed to create a custom axis which contains controls. We have little time and we decided to round this problem and chose another approach. On previous weekend I decided to find out how it is possible to insert controls into axis and found it very easy. Following example is adding one image and one button with every label, it is also providing a way of editing chart run-time.

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" applicationComplete="{init()}"
  width="460" height="450">


<mx:ColumnChart id="championsChart" dataProvider="{champions}">
       <mx:horizontalAxis>
          <mx:CategoryAxis id="horAxis" dataProvider="{champions}"
               categoryField="Team"/>
       </mx:horizontalAxis>
       <mx:series>
   <mx:ColumnSeries xField="Team" yField="Count"
               displayName="Team">
            <mx:fill>
             <mx:SolidColor color="0xc02314"/>
            </mx:fill>
   </mx:ColumnSeries>               
  </mx:series>
       <mx:horizontalAxisRenderers>
           <mx:AxisRenderer axis="{horAxis}">
           <mx:labelRenderer>
            <mx:Component>
            <mx:VBox horizontalAlign="center">
     <mx:HBox>
      <mx:Image source="@Embed('../assets/f1logo.png')"/>
      <mx:Label id="newLabel"/>
     </mx:HBox>
     <mx:Button label="EDIT" click="{outerDocument.onClick(event)}"/>
     <mx:Script><![CDATA[
      override public function set data(value:Object):void
      {
        if(value == null)
        {
          return;
        }
                                          
        newLabel.text = value.text;
      }
     ]]></mx:Script>
    </mx:VBox>                                          
    </mx:Component>
           </mx:labelRenderer>
  </mx:AxisRenderer>
 </mx:horizontalAxisRenderers>
</mx:ColumnChart> 

<mx:Script><![CDATA[

   import mx.containers.*;
   import mx.controls.Button;
   import mx.controls.TextInput;
   import mx.collections.ArrayCollection;
   import mx.managers.PopUpManager;
  
   private var titleWindow:TitleWindow;
   private var countTextInput:TextInput;
   private var saveButton:Button;
   private var cancelButton:Button;
   private var index:int;
   
   [Bindable]

   public var champions:ArrayCollection = new ArrayCollection
   ([
      {Team:"Ferrari", Count:15},
      {Team:"Williams", Count:9},
      {Team:"McLaren", Count:8}
   ]);

   public function onClick(e:Event):void
   {
      index = searchName(e.target.parent.newLabel.text);
      titleWindow.title = e.target.parent.newLabel.text + " championships number";
      PopUpManager.addPopUp(titleWindow,this,true);
      PopUpManager.centerPopUp(titleWindow);
   }  

   private function init():void
   {
      var vbox:VBox = new VBox();
      var hbox:HBox = new HBox();

     titleWindow = new TitleWindow();
     countTextInput = new TextInput();
     saveButton = new Button();
     cancelButton = new Button()

     cancelButton.addEventListener(MouseEvent.CLICK, onCancel);
     saveButton.addEventListener(MouseEvent.CLICK, onSave);

     saveButton.label = "SAVE";
     cancelButton.label = "CANCEL";

     hbox.addChild(saveButton);
     hbox.addChild(cancelButton);

     vbox.addChild(countTextInput);
     vbox.addChild(hbox);

     titleWindow.addChild(vbox);
   }   

   private function onCancel(e:Event):void
   {      
     PopUpManager.removePopUp(titleWindow);
     countTextInput.text = "";
   }

   private function onSave(e:Event):void
   {
     champions.getItemAt(index).Count = (countTextInput.text == "") ? 10 : int(countTextInput.text);

     PopUpManager.removePopUp(titleWindow);
     countTextInput.text = "";

     championsChart.dataProvider = champions;
   }  

   private function searchName(name:String):int
   {
     for(var i:int = 0; i < champions.length; i++)
     {
       if(champions.getItemAt(i).Team == name)
       {
         return i;
       }
     }
     return -1;
   }

]]></mx:Script>
</mx:Application>