FlexOut

Export to Jpeg in flex.

Vikram singh — Fri, 13 May 2011 05:05:47 +0000

There is always a need to way to export some sort of a report out to the user, previously I used the classical use of a serverside script in Java or PHP to enable user to take a screenshot of the component or the entire application. Since the flash player 10 provides the feature to save local file using file reference I am going to exploit that feature and export some BITMAP content into a Jpeg file.

following is the code for taking a snapshot of the component on some event/action

Prerequisite for making this components work.

Build project in flex 4.0 + SDK
Use flash player 10 and above (MUST)
Include Corelib.swc for JPEGEncoder to work

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

//file reference declaration to enable user to save file to local system.
private var file:FileReference = new FileReference();

//function can be called on button click or context menu click or any other interaction
private function captureIt():void{
var df : DateFormatter = new DateFormatter();
df.formatString = "DD-MM-YY HH:NN"
var bitmapData:BitmapData = new BitmapData(this.width, this.height);
bitmapData.draw(this,new Matrix());
var bitmap : Bitmap = new Bitmap(bitmapData);
var jpg:JPEGEncoder = new JPEGEncoder();
var ba:ByteArray = jpg.encode(bitmapData);
var dt : Date = new Date();
var dtStr : String = df.format(dt.time);
file.save(ba,'Screenshot at'+dt.time+'.jpg');
}

Explanation

BitmapData ()
The BitmapData () function takes a height and width of the component which has to be converted to image, i have used this you can very well use any UIComponent or DisplayObject.

bitmapData.draw(this,new Matrix ());
This is the place where the actual conversion takes place (where the bitmap data is drawn), Again you can use any UIComponent or DisplayObject in this place.

Bitmap Encoding: jpg.encode (bitmapData);
The component or screen area to be captured is converted into BITMAP data so that it could be encoded into Jpeg file format for saving it, you can also use a PNG or GIF encoder in this place as per your requirement. At this place the Bitmap data is encoded into a JPEG file format.

var ba : ByteArray = jpg.encode (bitmapData);
Since BITMAP data cannot be saved directly to the local system we first convert it into a ByteArray.

Date : dt.time
The date is only used to give each screenshot a unique timestamps so that each time the function is called a new file is saved.

file.save ( ba,’Screenshot at’+dt.time+’.jpg’ );
Now we pass the byte array to the file reference and also pass the name by which the file has to be saved, as shown in the function above.

Vollia you can now save JPEG file to your local file system via Flex without using any third party Serverside script to do so. No more HTTP request and error handling to take care of.

GO MAKE THE WORLD A BETTER PLACE
Say no to paper, No need to print graphs when you can save them to jpeg

Power of Flash Catalyst

Vikram singh — Thu, 12 May 2011 04:58:50 +0000

Here is Kevin Lynch’s Keynote from the Web 2.0 conference where he shows how to build a full application using Illustrator, Flash Catalyst, Flex Builder, Flex and the Facebook ActionScript 3 API.

Save file as PDF in flex

Vikram singh — Thu, 05 May 2011 13:09:46 +0000

Saving content as PDF from flex had always been a hassle, We know that doing such file operations in AIR is much simpler but due to the file saving ability added in Flash player 10 One can easily save files to the local system.

The next big question is how do i convert my content to PDF format so that it can be correctly saved into the file. Well for that folks at AlivePDF have done a gr8 job and now any one can encode their content into pdf and offer for download. They have a good documentation section which you can read and create more complex stuff.

For beginners i am writing a small example in which i will let the user download a PDF with embedded text or the Image depending on his choice.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

<mx:application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="522">
<mx:script>
< ![CDATA[
import flash.display.*;
import flash.events.*;
import flash.net.*;
import flash.text.*;
import flash.utils.ByteArray;

import mx.graphics.codec.JPEGEncoder;

import org.alivepdf.layout.Orientation;
import org.alivepdf.layout.Size;
import org.alivepdf.layout.Unit;
import org.alivepdf.pdf.PDF;
import org.alivepdf.saving.Method;

protected var fileRefPDF:PDF;

private function onSaveClicked(e:Event):void
{
fileRefPDF = new PDF(Orientation.PORTRAIT, Unit.MM, Size.LETTER);
fileRefPDF.addPage();

if(check.selected){
fileRefPDF.addImage(pics);
fileRefPDF.addMultiCell(200,5,myname.text);
}else{
fileRefPDF.addMultiCell(200,5,myname.text);
}

var bytes:ByteArray = fileRefPDF.save(Method.LOCAL);
var file:FileReference = new FileReference();
file.save(bytes,"Untitled.pdf");
}

]]>
mx:script>

<mx:canvas id="pics">
<mx:image source="@Embed('hello.jpg')" x="198" y="19" width="311" height="208"/>
<mx:label text="Oh!! Hi," x="330" y="166"/>
<mx:label text="{myname.text}" x="330" y="184"/>
mx:canvas>

<mx:label top="33" left="14" text="Save as PDF Test " fontWeight="bold" fontSize="15"/>
<mx:button click="onSaveClicked(event)" label="Save to PDF" id="saveBtn" x="14" y="148"/>
<mx:label text="Enter your name:" y="72" x="14"/>
<mx:textinput id="myname" x="14" y="90"/>
<mx:checkbox id="check" label="Save image" selected="false" x="14" y="121"/>
mx:application>

the Screenshot of the same can be seen below.

Note: please include the AlivePDF swc in your project.

I have just skimmed the surface of the ocean with the above code. but you can write your own brew of concoction that could possibly bring WORLD PEACE :)

(-_-) happy loafing !

Flash “like” charts for iPad and iPhone

Vikram singh — Mon, 11 Apr 2011 06:15:53 +0000

We already know the huge gap thats been created by Apple not adopting “Flash” to run on there device. The end users and developer pay the toll as they have to adapt to this scenario and live with the limitation of either viewing their content in different visual component OR come up with a solution that works both for Flash enabled device and non Flash device like apple iPhone and iPad.

I am happy to announce that Folks at Amcharts are doing an awesome task for bridging the gap between flash users and non flash users by providing a charing component for both kinds of devices.

Now you can seamlessly view our data on both the device by using their FLASH/FLEX component or their JAVASCRIPT charting components.

How can this be done?
Use the HTML wrapper to decide if the device can handle flash or not. (can be done even with JS) Once you know what device you are running you can choose which kind of component to load. This gives you a seamless solution for your Business and YES it will support the normal flashbased platform as well as NON flash platforms

Important to note: you will have to follow the conventional MVC model to achieve. Keep VIEW and DATA separate.

Find the latest version of the Javascript library at : www.amcharts.com/javascript
You can also find the reference document at : Javascript reference
For other AmCharts component visit: www.amcharts.com

Thanks for coming up with this solution. You guys at AmCharts ROCK!!

UI patterns

Vikram singh — Fri, 04 Jun 2010 11:26:35 +0000

User needs: these are the UI patterns that the user uses as a tool to understand and interact with the data that has to be conveyed to the user. In short we can say these are the gadget which helps the user to understand raw data by converting them into something meaningful. I have categorized the UI patterns in the order of “user needs and actions”.

Navigating around
· Accordion
· Headerless Menu
· Breadcrumbs
· Directory Navigation
· Doormat Navigation
· Double Tab Navigation
· Faceted Navigation
· Fly-out Menu
· Home Link
· Icon Menu
· Main Navigation
· Map Navigator
· Meta Navigation

Download detailed document: here

· Minesweeping
· Panning Navigator
· Overlay Menu
· Repeated Menu
· Retractable Menu
· Scrolling Menu
· Shortcut Box
· Split Navigation
· Teaser Menu
· To-the-top Link
· Trail Menu
· Navigation Tree

Basic interactions
· Action Button
· Guided Tour
· Paging
· Pulldown Button
· Slideshow
· Stepping
· Wizard

Searching
· Advanced Search
· Autocomplete
· Frequently Asked Questions (FAQ)
· Help Wizard
· Search Box
· Search Area
· Search Results
· Search Tips
· Site Index
· Site Map
· Footer Sitemap
· Tag Cloud
· Topic Pages

Dealing with data
· Carrousel
· Table Filter
· Collapsible Panels
· Details On Demand
· Collector
· Inplace replacement
· List Builder
· List Entry View
· Overview by Detail
· Parts Selector
· Tabs
· Table Sorter
· Thumbnail
· View

Personalizing
· Customizable Window
· Login
· Registration

Shopping
· Booking
· Product Comparison
· Product Advisor
· Product Configurator
· Purchase Process
· Shopping Cart
· Store Locator
· Testimonials
· Virtual Product Display

Making choices
· Country Selector
· Date Selector
· Language Selector
· Poll
· Rating

Giving input
· Comment Box
· Constraint Input
· Form

Miscellaneous
· Footer Bar
· Hotlist
· News Box
· News Ticker
· Send-a-Friend Link

Application needs: Patterns that help the application, or you the designer, communicate better with the user

Drawing attention
· Captcha
· Center Stage
· Color Coded Section
· Premium Content Lock
· Grid-based Layout
· Liquid Layout
· Outgoing Links
· Alternating Row Colors

Feedback
· Input Error Message
· Processing Page

Simplifying interaction
· Enlarged Click area
· Font Enlarger

Download detailed document: here

source : http://www.welie.com

No related posts.

Diagonol barChart

Vikram singh — Tue, 18 May 2010 07:51:30 +0000

Its not the most practical component though but for a slick “Reports UI” I had to develop a diagonal bar chart component that can be used to display a barchart 45degrees to the horizontal axis. At first i thought of solving this by using a conventional Flex Barchart but it turned out to be too much of effort in styling the barchart to look like the Screenshot, So i went ahead and wrote diagonal barChart from scratch.

Limitations :
1) Chart not re-sizable
2) Chart written with embedded font (otherwise label cant be rotated).
3) Chart cannot be configured with direction, barThickness and barGap.

Features:
1) “n” Diagonal bars can be drawn on screen : i have tested it with 1000 but 50 bars are more practical.
2) top 10 bars drawn + Others : this feature enables you to see top 10 bars with the rest of the bars clubbed into others
3)sorted/unsorted bars by value.

well do try it out and if you like the widget do let me kno.

Source here

Demo here

Flex Charting Annotation

Random color generator

Vikram singh — Tue, 18 May 2010 07:03:53 +0000

I am sure there were many times in the past that you would have wanted to have a function that could return you random colors. Well at least i have faced this problem many times, Mostly when i am giving a demo for a new component which deals with various color ranges.

Following is the code to generate Random colors:

1
2
3
4
5
6
7
8
9

private var redBias:Number = 0xFF;
private var greenBias:Number = 0xFF;
private var blueBias:Number = 0xFF;

private function getRandomColor():uint{
var ct:ColorTransform = new ColorTransform(1,1,1,1,Math.random()*redBias, Math.random()*greenBias, Math.random()*blueBias);
var color:uint = ct.color;
return color;
}

you can also modify the above code to return you a range in a specific color range this can be done by making any 2 colors constant instead of using a random number. Well then enjoy the code and do post in any new cool things that you can do with this piece of code.

for more know-how read the following post : ColorTransform

No related posts.

Inspectable : metatag that makes your code fool proof

Vikram singh — Mon, 10 May 2010 09:31:45 +0000

If you are building a custom components which will be used by other developers style wont it be cool for them to see the bindable properties in a popup selectable values (i.e. true/false) via code completion in Flex Builder. Plus it could also to show in the Properties Panel in design view and the teammate has the ability to choose a property value.

in short making your component FOOOL proof ;). Well then “Inspectable” is your best friend.

Usage:

1 2	[Inspectable( defaultValue=false,verbose=1, category="Other", enumeration="true,false")] [Bindable] public var aintThisCool : Boolean;

If your like what you have read and want to learn more follow the link:Flex Metatags

No related posts.

Flex component lifecycle and event flow explained

Vikram singh — Wed, 10 Mar 2010 07:38:32 +0000

Learned something new from Ted today
Read original post by Ted here

Flex is an event driven programming model and everything happens due to an event. Looking at the MXML code can confuse most of the developers unless they haven’t looked at the internal class of flex components. If we were to compare Flex, HTML and FLASH in terms of component instantiation.

HTML instantiates top to bottom
Flash executes across frames starting at Frame zero.
Flex on the other had is a bit different.

When I started learning Flex, I struggled with understanding event flow and instantiation in MXML. I was puzzled because I really didn’t understand how event chain started and what happened inside a component to make it finally render on screen. Initially I used to run into numerous runtime null point exception since i used to think i could access a property of an object thinking it would have been created.

Anyhow the key is understanding the event basics and seeing the initialization and event flow, Lets look at a sample application that i have written to explain this. The structure of the application cann be understood by the following diagram.

With this Demo app there is no visual clue that you will get as an output to understand the event flow and instantiation step. its the TRACE statements that are important to explain how the event flow and instantiation happens. Below is the code for the same.

Call the following functions in a dummy APP

preinitialize = “preinit(event)”
initialize = “init(event)”
creationComplete = “handlecc(event)”

1
2
3
4
5
6
7
8
9
10
11
12

//preinit trace function
private function preinit(event:FlexEvent):void{
trace(String(flash.utils.getTimer())+"ms >> preinitialize "+event.currentTarget)
}
//init trace function
private function init(event:FlexEvent):void{
trace(String(flash.utils.getTimer())+"ms >> initialize "+event.currentTarget)
}
//creation complete trace function
private function handlecc(event:FlexEvent):void{
trace(String(flash.utils.getTimer())+"ms >> creationComplete "+event.currentTarget)
}

Download the source here
I have also Monkey-patched the following classes

VBox
HBox
Button

In all the above classes I have added a trace statement at measure() updateDisplayList() and createChildren(). you can see get these files in the source attached.

The component lifecycle happens in the following order. Note: i am not explaining what these methods do, but in what order are they executed to give you the final result.

preInitialize()
createChildren()
initialize()
measure()
updateDisplayList()
creationComplete()

The order of instantiation can be understood by the trace log if you compiled and debugged the demoApp

250ms >> preinitialize test0
259ms >> preinitialize test0.hbox
262ms >> preinitialize test0.hbox.can
265ms >> preinitialize test0.hbox.can.cbt1
266ms >> create Children – test0.hbox.can.cbt1
273ms >> initialize test0.hbox.can.cbt1
275ms >> preinitialize test0.hbox.can.cbt2
276ms >> create Children – test0.hbox.can.cbt2
277ms >> initialize test0.hbox.can.cbt2
278ms >> initialize test0.hbox.can
279ms >> create Children – test0.hbox.can
281ms >> preinitialize test0.hbox.vbox
283ms >> preinitialize test0.hbox.vbox.btn1
284ms >> create Children – test0.hbox.vbox.btn1
285ms >> initialize test0.hbox.vbox.btn1
287ms >> preinitialize test0.hbox.vbox.btn2
288ms >> create Children – test0.hbox.vbox.btn2
289ms >> initialize test0.hbox.vbox.btn2
290ms >> initialize test0.hbox.vbox
291ms >> create Children – test0.hbox.vbox
292ms >> initialize test0.hbox
293ms >> create Children – test0.hbox
294ms >> initialize test0
310ms >> measure – test0.hbox.can.cbt1
312ms >> measure – test0.hbox.can.cbt2
313ms >> measure – test0.hbox.vbox.btn1
313ms >> measure – test0.hbox.vbox.btn2
315ms >> measure – test0.hbox.can
315ms >> measure – test0.hbox.vbox
317ms >> measure – test0.hbox
344ms >> updateDisplayList – test0.hbox
348ms >> updateDisplayList – test0.hbox.can
350ms >> updateDisplayList – test0.hbox.vbox
351ms >> updateDisplayList – test0.hbox.can.cbt1
356ms >> updateDisplayList – test0.hbox.can.cbt2
358ms >> updateDisplayList – test0.hbox.vbox.btn1
359ms >> updateDisplayList – test0.hbox.vbox.btn2
364ms >> creationComplete test0.hbox.can.cbt1
365ms >> creationComplete test0.hbox.can.cbt2
366ms >> creationComplete test0.hbox.vbox.btn1
367ms >> creationComplete test0.hbox.vbox.btn2
368ms >> creationComplete test0.hbox.can
370ms >> creationComplete test0.hbox.vbox
371ms >> creationComplete test0.hbox
373ms >> creationComplete test0

Just by looking at the trace log and the application structure image you can slowly start making out a pattern (preorder traversal). preInitialize() is called first for the App then the first child(in our case only child HBOX) then its first child which is the CANVAS and finally the first child of canvas that is C BUTTON 1 after this the createChildren() and initialize() of the innermost left child is called then moving on to its sibling the preInitialize(), createChildren() and initialize() is called. This is followed till all the children have completed the preInitialize(), createChildren() and initialize() steps.

After this the measure() of all the child’s are called in a bottom up approach with left child priority.

After this the updateDisplayList() of all the children’s are aclled in a top down approach with left child priority.

Finally the creationComplete() of all the children are called again in bottom up approach with left child priority. Thus explaining why creationComplete() of the parent component is called at the very end. the more you look at the log trace the more you will understand the flow. Hope this effort of my explaining the instantiation process helped you out.

Download the source here

Always Call Super in Item Renderer’s Override Methods

Vikram singh — Wed, 03 Mar 2010 05:13:48 +0000

Today I came across a bug where I was using an item renderer in a data grid and the row didn’t highlight when you mouse over it and wouldn’t get selected when you clicked on it (ie, moused over or clicked on the column, not the entire row). The item renderer consisted of 2 Label component.

At first, it was tough to see what the problem could have been. The item renderer is very simple, I have used more complicated item renderers elsewhere that don’t have this problem.

That’s when I noticed that my data setter override didn’t look quite right:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

override public function set data(value:Object):void{

_data = value;
if(value){
if(parseInt(value["growth"])>0)
this.setStyle("color",LOW_STATE);
else if(parseInt(value["growth"])== 0)
this.setStyle("color",NORMAL_STATE);
if(parseInt(value["growth"])<0)
this.setStyle("color",HIGH_STATE);

this.text = value["growth"]+"%";
}
}

I was this close to trying to hack in something using the mouseover and mouseclick handlers, when I realized I just needed to do this little change : “super.data = value”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

override public function set data(value:Object):void{
// the missing line that made all the difference
super.data = value;

_data = value;
if(value){
if(parseInt(value["growth"])>0)
this.setStyle("color",LOW_STATE);
else if(parseInt(value["growth"])== 0)
this.setStyle("color",NORMAL_STATE);
if(parseInt(value["growth"])<0)
this.setStyle("color",HIGH_STATE);

this.text = value["growth"]+"%";
}
}

Apparently something in the super class’s data setter does something vitally important, and you really shouldn’t skip that. If you do, BAD stuff will happen.

No related posts.