Magical Flex

Working with PDFs on Actionscript using AlivePDF

2010-07-09T22:59:00.000-07:00

Recented I came across AlivePDF library for Flex/AIR which allows you to generate PDF's 100% client-side.
There are a bunch of tutorials to get started with AlivePDF. AlivePDF comes with a SWC that you can include in your Flex application, or an Actionscript package you can import to your AS code. Here's a brief, condensed example of how I used AlivePDF in my Flash AIR project.
import org.alivepdf.*;

// setup pdf
var myPDF : PDF = new PDF ( Orientation.PORTRAIT, Unit.MM, Size.LETTER );

myPDF.setDisplayMode( Display.FULL_PAGE, Layout.SINGLE_PAGE );

myPDF.addPage();

// add a background image
myPDF.addImage (myBackgroundMovieClip, 1 , null, null, false, ImageFormat.JPG, 100, 0, 0, 0, 0);

// add headline
myPDF.textStyle ( new RGBColor ( 41, 58, 140 ) );
myPDF.setFont( FontFamily.HELVETICA, Style.BOLD );
myPDF.setFontSize ( 18 );
myPDF.setXY( 10, 40 );
myPDF.addMultiCell ( 300, 1, "This is my PDF Headline" );

// add text message
myPDF.textStyle ( new RGBColor ( 0, 0, 0 ) );
myPDF.setFont( FontFamily.HELVETICA, Style.BOLD );
myPDF.setFontSize ( 14 );
myPDF.setXY( 10, 50 );
myPDF.addMultiCell ( 300, 4, "This is my text….lots of text…" );

// save PDF to the desktop
var f : FileStream = new FileStream();
var file : File = File.desktopDirectory.resolvePath("MyPDF.pdf");
f.open( file, FileMode.WRITE);
var bytes : ByteArray = myPDF.savePDF(Method.LOCAL);
f.writeBytes(bytes);
f.close();

Notice I'm using the method addMultiCell to add text. This may seem odd, but what this allows me to do is add a block of text that wordwraps. If I use addText then I only get a single line.

AlivePDF is definitely still young and I've run into a few oddities (read bugs). I logged a bug on the Google project site and within no time at all received a note saying the issue had been resolved and would be released in the next build. Nice!

The Google project site provides a few examples in addition to the samples provided in the download. And the documentation is fairly helpful.

My favorite links of Adobe AIR 2.0 resources

2010-07-02T03:35:00.001-07:00

What's new in Adobe AIR 2.0
Adobe AIR 2.0 and iPhone
Interacting with a native process
The ServerSocket Class and Socket Communication

Flex Builder Source Code Formatter Plugin

2010-03-11T02:48:00.000-08:00

A colleague recently pointed me towards Flex Formatter – a new (and open source) source code formatter plugin for Flex Builder. The plugin is very easy to use right out of the box and it comes with two commands, Format Selection and Indent Selection. Both commands are accessed by toolbar items. The “Indent” command only affects leading whitespace on lines, while “Format” affects newlines and internal line spacing as well. For those of you who work in organzations where there are strict code formatting policies, there are extensive options that you can set to customize the tool for your work group.

Dynamically populate Tree control with XMLListCollection

2010-01-19T05:16:00.000-08:00

For those who think it a tough thing to bind controls to hierarchical data (like me) I am posting my source code to dynamically populate hierarchical data in Tree control using an XMLListCollection object.

First of all, create a Tree object in markup

<mx:Tree height="100%"  labelField="@label" width="175" showRoot="false"  id="treeMenu"  > </mx:Tree>

Next, create a private variable myTreeCollectionof XMLListCollection and set dataProvider property of the Tree to 'myTreeCollection'

[Bindable] public var myTreeCollection:XMLListCollection;

<mx:Tree height="100%" dataProvider="{myTreeCollection}"...

Now, we are ready to add hierarchical to the XMLListCollection object.

import mx.collections.XMLListCollection;
[Bindable]
private var myTreeCollection:XMLListCollection;
private function init():void
{
 if(myTreeCollection == null)
 myTreeCollection = new XMLListCollection();
       
 var xmlString:String = "<Item label='Level-1'>"   
         "<Item label='Level-2'/>" "</Item>";
 var item:XMLList = new XMLList(xmlString);
 myTreeCollection.addItem(item);
}

Note that in markup of Tree, we have set labelField propperty to '@label'. It tells the runtime to bind the tree node with 'label' attribute of corresponding dataprovider XML node. An XML attribute is indicated with "@" prefix.

TabBar with multicolored tabs

2010-01-13T01:59:00.000-08:00

Tabs of TabBar component can be a tweaked to produce tabs of different colors.
The trick is to iterate through the datasource of TabBar, pick the tabs one by one and set the properties - backgroundColor, fillAlphas and fillColors.

Here is the quick code

mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
backgroundColor="#D1D1D1"  >

Canvas
{
borderStyle: applicationControlBar; 
fillColors:  #FFB600,#FFFFFF; 
fillAlphas: 0.4, 1.0; 
highlightAlphas: 0, 0;  
} 





 






import mx.events.ItemClickEvent;
private function onItemClick(event:ItemClickEvent):void
{
var colorArray:Array = ["#FFB600", "#FFFF00", "#80FF4D"];
canvasMain.setStyle("backgroundColor", colorArray[event.index]);
}
private function onTabCreated():void
{
var colorArr:Array = ["haloOrange", "yellow", "haloGreen"];
var len:int = tabContainer.dataProvider.length;
var tab:Object;

for(var i:int = 0; i< len; i++)
{
tab = tabContainer.getChildAt(i);
tab.setStyle("fillColors", [colorArr[i], "white"]);
tab.setStyle("fillAlphas", [1.0, 1.0]);
tab.setStyle("backgroundColor", colorArr[i]);
tab.width = 200;
}
}

Opaque background with gradient

2010-01-12T04:30:00.000-08:00

Using fillAphas with fillColors we can create attractive opaque gradient backgrounds backgrounds in Flex.

While I am still in the middle of my googling for the precise documentation of fillAlphas property, I could have learn that fillAlphas perpery is an array of two numeric elements between 0 and 1 which indicates opacity of the two parts of the correspoding Flex component . fillAlphas works hand-to-hand with fillColors as if there is no gradient, we do not need to adjust the opacity of different parts of the component.

Here is an example:


 
  Canvas
  {
   fillAlphas: 1, 1; 
   fillColors:  #FFFFFF,#D00808;  
   borderStyle: applicationControlBar;    
  }

and here's how it looks like-

Calculate Google Page Rank with Flex/AIR

2010-01-11T06:03:00.000-08:00

While working on the development of an SEO tool in AIR, I needed to calculate Google Page Rank for a website with given URL.
This article was what I started with. But mimicking the hashing algorithm developed by Bob Jenkins from C# to ActionScript was not a good idea that my deadlines could allow.

I still Googled and fortunately found this one. Here is a summary of the article from Louis Lee (not sure he's the original author).

Download FetchPR.as
Add it to your project.
Initialize the FetchPR’s instance.
Set the callback function of FetchPR
Call FetchPR’s getPR function to get a url’s PR.

Sample code


import scripts.FetchPR;
import mx.managers.CursorManager;
private var fetchprinstance:FetchPR = new FetchPR();

private function getPageRank():void
{
 CursorManager.setBusyCursor();
 fetchprinstance.callback = setResult;
 fetchprinstance.getPR(urlbox.text);
}

public function setResult(pr:Number):void
{
 result.text = "PageRank is: " + pr.toString();
 CursorManager.removeBusyCursor();
}

Flex accordion with multiple color tabs

2010-01-11T02:45:00.000-08:00

I thought it would be good to start with sharing my recent research on coloring the Accordion tabs. Here is the MXML:



<mx:style>
     AccordionHeader
     {
       fillAlphas: 1, 1;
       cornerRadius: 4;
       downSkin: ClassReference("mx.skins.halo.ButtonSkin");
       overSkin: ClassReference("mx.skins.halo.ButtonSkin");
       upSkin: ClassReference("mx.skins.halo.ButtonSkin");
       selectedDownSkin: ClassReference("mx.skins.halo.ButtonSkin");
       selectedOverSkin: ClassReference("mx.skins.halo.ButtonSkin");
       selectedUpSkin: ClassReference("mx.skins.halo.ButtonSkin");
       disabledSkin: ClassReference("mx.skins.halo.ButtonSkin");
       selectedDisabledSkin: ClassReference("mx.skins.halo.ButtonSkin");
    }
</mx:style>


<mx:accordion x="0" id="accMain" width="88%" height="88%" backgroundalpha="0" creationcomplete="accordionInit()"
 rotation="0">
<mx:VBox label="Google Page Rank" width="100%" height="100%" backgroundAlpha="0" backgroundColor="#FFFFFF" paddingTop="10" paddingLeft="10">

 <mx:HBox width="100%"  >
    <mx:Text  text="URL:"/> <mx:TextInput  id="urlbox" backgroundAlpha="0.1"  width="345"/>
 </mx:HBox>
 <mx:HBox width="100%">
  <mx:Button label="Get PR!" click="getPageRank();" />
 </mx:HBox>
 <mx:HBox width="100%" >
   <mx:Text text="PageRank is:"  id="result"/>
 </mx:HBox>

</mx:VBox>
<mx:VBox label="Other" width="100%" height="100%" backgroundColor="#FFFFFF">

</mx:VBox>
<mx:VBox label="Other" width="100%" height="100%" backgroundColor="#FFFFFF">

</mx:VBox>
<mx:VBox label="Other" width="100%" height="100%" backgroundColor="#FFFFFF">

</mx:VBox>
<mx:VBox label="Other" width="100%" height="100%" backgroundColor="#FFFFFF">

</mx:VBox>
<mx:VBox label="Other" width="100%" height="100%" backgroundColor="#FFFFFF">

</mx:VBox>
<mx:VBox label="Other" width="100%" height="100%" backgroundColor="#FFFFFF">

</mx:VBox>
</mx:accordion>

Here is the actionscript:


private function accordionInit():void
{
accMain.getHeaderAt(0).setStyle("fillColors", ["#6E0404", "#6E0404"]);
accMain.getHeaderAt(0).setStyle("themeColor", "#6E0404");
accMain.getHeaderAt(0).setStyle("color", "#FFFFFF");

accMain.getHeaderAt(1).setStyle("fillColors", ["#A30505", "#A30505"]);
accMain.getHeaderAt(1).setStyle("themeColor", "#A30505");
accMain.getHeaderAt(1).setStyle("color", "#FFFFFF");

accMain.getHeaderAt(2).setStyle("fillColors", ["#E30707", "#E30707"]);
accMain.getHeaderAt(2).setStyle("themeColor", "#E30707");
accMain.getHeaderAt(2).setStyle("color", "#FFFFFF");

accMain.getHeaderAt(3).setStyle("fillColors", ["#F93737", "#F93737"]);
accMain.getHeaderAt(3).setStyle("themeColor", "#F93737");
accMain.getHeaderAt(3).setStyle("color", "#FFFFFF");

accMain.getHeaderAt(4).setStyle("fillColors", ["#FB6F6F", "#FB6F6F"]);
accMain.getHeaderAt(4).setStyle("themeColor", "#FB6F6F");
accMain.getHeaderAt(4).setStyle("color", "#FFFFFF");

accMain.getHeaderAt(5).setStyle("fillColors", ["#FC9898", "#FC9898"]);
accMain.getHeaderAt(5).setStyle("themeColor", "#FC9898");
accMain.getHeaderAt(5).setStyle("color", "#FFFFFF");

accMain.getHeaderAt(6).setStyle("fillColors", ["#FDC9C9", "#FDC9C9"]);
accMain.getHeaderAt(6).setStyle("themeColor", "#FDC9C9");
accMain.getHeaderAt(6).setStyle("color", "#FFFFFF");
}