Printing DataGrid in Flex

I had to do a lot of research on printing a Flex datagrid in a decent way.
There are very few resources on the web about printing in Flex. Adobe LiveDocs is an excellent online reference for Flex

I thought of sharing my experience and the way I successfully printed the dataGrid in Flex

See the below code before you start understanding how it works

——————————————————————————————-
<!– FileOne.mxml –>
public function printDataGrid() : void
{

var printJob : FlexPrintJob = new FlexPrintJob();
var thePrintView : FormPrintView = new FormPrintView();

Application.application.addChild(thePrintView);

if(printJob.start() != true)
return;

//Set the print view properties.
thePrintView.width=printJob.pageWidth;
thePrintView.height=printJob.pageHeight;

thePrintView.printableDataGrid.dataProvider = originalDataGrid.dataProvider
thePrintView.printableDataGrid.columns = originalDataGrid.columns ;
thePrintView.printableDataGrid.setStyle(“fontSize”, 8);
thePrintView.printableDataGrid.setStyle(“wordWrap”, true);

printJob.addObject(thePrintView);

printJob.send();

Application.application.removeChild(thePrintView);
}

<mx:DataGrid id=”originalDataGrid” width=”100%” height=”100%” dataProvider=”{dataForGrid}”/>
——————————————————————————————–

<!– FormPrintView.mxml –>

<mx:VBox xmlns:mx=”http://www.adobe.com/2006/mxml”&gt;
<mx:PrintDataGrid id=”printableDataGrid” width=”90%” height=”100%”>
<!– Specify the columns to ensure that their order is correct.
This is not mandatory–>

</mx:PrintDataGrid>
</mx:VBox>

——————————————————————————————-

Below are the simple steps to print the DataGrid in Flex

1. Crete an instance of the FlexPrintJob called printJob (you can call anything you want to)

2. Crete an instance of the PrintDataGrid in another MXML file FormPrintView.mxml and create an instance of that – thePrintView
(if you create<mx:PrintDataGrid/> in the same MXML, which uses the function –> printDataGrid() then the application reservers some place for <mx:PrintDataGrid/> component.
This looks a bit ugly as we do not want to see that extra space in our application)
Always use PrintGrid class to print the dataGrid instead of the DataGrid, which originally displays content in the application, as it is tailored to print DataGrid in flex

3. Add the thePrintView object to the application container
Application.application.addChild(thePrintView);

4. Only one print job can be active at a time. So check to see if the printJob.start() is true. Start printing when it is true

5. Set the height, width properties of the thePrintView object to the pageWidth and pageHeightof the pringJob object

6. Assign the dataProvider of the DataGrid to be printed to the instance of the PrintDataGrid class
You also need to set the columns of the original dataGrid to the thePrintView object

You can also control the appearance of the printDataGrid object as follows
printDataGrid.setStyle(“fontSize”, 8);
printDataGrid.setStyle(“wordWrap”, true);

7. Use addObject method to add object to the printJob instance

8. Use printJob.send() to send the print job to a printer

Let me know if you have any doubts so that I can help you.

Flex Data Services Basics – File downloads

Hi All,

I am here again to give you two more files which tells us the basics of Flex Data Services. Thanks to the authors of the subjects. I am trying to provide access to those files which are difficult to find on the internet. All the credit goes to the authors of the subject and am just making their work available to public. Please click on the below link to download the files

Flex Data Services Basics

FDS for component developers

Free Stuffs from Adobe – Revised ActionScript Developer Center

I am posting another link, which will help you get lots more free stuffs from Adobe. Thanks to Duane, as I have picked this from his blog.

Please find the link as below

http://technoracle.blogspot.com/2007/07/totally-free-stuff-from-adobe-developer.html

Two of the files which I found very important with regards to ActionScript are as follows.
Revised ActionScript Developer Center (May 29)
AVM bytecode overview (PDF, 401K) (May 29)

Happy learning..

Photos: Roundtable discussion with Duane Nickull

I am not sure if you have read the earlier post of mine – Roundtable discussion with Duane Nickull – Finally Prayank sent me those pictures .

 

Programming ActionScript 3.0 book download

I am posting a Programming ActionScript 3.0 book in a pdf format. I got hold of this from Adobe website. I hope this book will be useful to you.

Download directly from the Adobe website

Whoever downloads it, please leave your name so that I will know how many people downloaded this file from my blog. Thanks to http://www.printfu.org/?mcACtion=search.pdf&keyword=actionscript

You can all find more pdf files in the above mentioned link for your reference

I want to thank Adobe for making this file available to all of us. I am just making the file available so that people can get more sources from the internet to download this file. Thanks to Adobe.

Roundtable discussion with Duane Nickull

Duane, Senior Standards Strategist, Adobe System Inc was supposed to give a talk on “Rich Internet Applications” on 22nd Friday 2007. I was really exited to attend this discussion and meet Duane.

I reached the hotel, Taj West End, after struggling my way through the traffic and rain. Even though not much of technical discussion could happen that day due to less attendees, I got a chance to meet Duane. Duane is a nice person.

I am still waiting for a picture with Duane and Prayank so that I can put it up on my blog. I hope that Adobe arranges more of these types of discussions where we could meet the senior people from adobe. Thanks Prayank.

Singleton Pattern

One of the design patterns in the Object-Oriented-Programming languages like ActionScript 3.0.
The Singleton design pattern is used to limit a class to one instance and provide global access to that instance
Common examples include classes that manage resources that are intrinsically singular such as

1. Selection focus
2. Navigation history
3. Window depth
4. Class that manages the state of user’s cursor
5. Class that loads application setting from an XML file and provide access to those settings

Essential features of Singleton class

• A private static property that holds the single instance of the class
• A public static method that provides access to the single instance if it’s created and creates the single instance if it hasn’t been created yet
• A way of restricting access to instantiating the class

Example – Creating a Singleton

package
{
public class MyClass
{
private static var _instance:MyClass

public function MyClass(enforcer:SingletonEnforcer)
{

}
public static function getInstance():MyClass
{
if(MyClass._instance == null)
{
MyClass._instance = new MyClass(new SingletonEnforcer());
}
}
}
}

class SingletonEnforcer {}

Invoking a Singleton inside another class
MyClass.getInstance()

On Creating Flex Applications

This is taken from Peter Ent’s blog http://weblogs.macromedia.com/pent/

Thanks to Peter Ent. All the blogs posted here are for my reference. Other’s are welcome to read it. Happy Reading 🙂

I get a number of questions from people with large Flex applications that have run into a problem. For example, someone might have a TabNavigator and sometimes one of the tabs doesn’t show up or a tab remains even if the child component has been removed.

Isolating the problem can be difficult because the Flex application is large and requires data from a server or some other resource that makes it nearly impossible to send to us in Flex Product Support.

If you are involved in a large-scale development project (or think you will be), then STOP. Don’t go any further. I’ve got some advice.

Patterns

There are a number of books and papers about software development and they have fancy names like the waterfall method, or simply unit testing. These are good, sound, tested techniques that might at first appear to be so much academic fluff, but there is a reason people went to the trouble of creating these design and development patterns.

I’m not going to write another book on the subject, but rather distill them into something I hope makes sense and is easy enough for you to implement. This is how I work on a problem.

The Steps (or the Zen of Development)

The first step is research. That is, figuring out how something is going to work before incorporating it into the application. For example, suppose I think I’ll want to use a Move effect. I’ll write a separate application to explore how the Move effect works. I’ll try out its options and may be I’ll discover that it doesn’t work as I thought it did. Or may be I’ll discover that what I really want is a Move + Zoom effect and then I’ll figure out how to use Sequence or Parallel effects. The point is, I look at the application and think about the parts that I’m unsure of. I may not know if a DataGrid with 30 columns will perform well or even been easy for the end-user to use. It is this exploration of the possibilities that can give you a better feel for how Flex works and really build up your skill set.

The second step is organization. I try to think of the parts of an application as coming from 3rd party vendors. If I need a DataGrid with special features I think about it as if I could buy it from someone. This is also known as the black box approach. In other words, I don’t want any other part of the application to be able to muck with the insides of my special DataGrid. Nor do I want my special DataGrid to know anything about the rest of the application. Thinking about it this way isolates each major part and leads to the next step.

Hint: This is where custom events come into play. A custom event helps you identify what action is happening that relates to the new component classes. A custom event can be as simple as a new event type (eg, “inventoryUpdate”) or it can contain additional information (eg, the part number and name of the item being updated). Each component or group of components should have their own custom event(s).

The third step is interfaces. This is how parts mesh or fit together. It involves how one black box component interacts with another one. Obviously there are parts of a component that have to be publically exposed. Think about the Flex componets. The DataGrid does not know a thing about your application. All you can do is interact with its public functions, properties, events, and styles. If you discover that the DataGrid does not do something you want, you can create your own class, extending DataGrid and add those features. But you should create your class with the same intention – expose just those public functions and properties that get the job done.

Hint: Using actual ActionScript interfaces can really help keep parts of the application isolated. An interface provides the contract between a component and its users, but it also allows the component developer to change how the component works (or to fix bugs) without adversely affecting the rest of the application.

The last step is testing. That is, testing each of these units. Write stand-alone applications to try your components out separately and in logical combinations as they might be used in your larger application. You may discover flaws, shortcomings, or eliminate unnecessary features at this stage. If you’ve done the research step, then you’ll already have most of the testing code in place.

Hint: If in the testing phase you run into a problem you cannot solve, you have a self-contained example that you can send to someone for help.

Benefit

The benefit to this approach is that you have a much more reliable application. Plus you may have created reusable components for a future application.

Further, should you need the services of the Flex Support Team, you’ll have ready-made test cases that you can send to us so we can quickly help resolve the problem.

MultiLined Label for a Button

I found this task very tough when I started it. But Mr. Alex Hauri’s blog made me beleive that it is not that difficult. I published it mainly for my reference even though it is a kind of repition of that blog. I hope that this will definitely help someone.

You can find Alex Hauri’s blog here http://blogs.adobe.com/aharui/

This is how it is done. You need to create a customized button by extending the Button class. The button class overrides the createChildren method and creates a UI textfield to display the label.

These are somethings which you need to know before you start with the task

1. Button uses an instance of UITextField to render its label, so we need to create an instance of UITextField for the label on our customized button.
2. Lable by default accommadates only a single line of text. In order to make it multiline, you need to override the createChildren() method of the Button class and give multiline and wordwrap behaviour to the instance of the textField and add it as a child of the button.

Please find the createChildren() as below.

override protected function createChildren():void
{
// Create a UITextField to display the label.
if (!textField)
{
textField = new UITextField();
textField.styleName = this;
addChild(textField);
}
super.createChildren();
textField.multiline = true;
textField.wordwrap = true;
}

My task wasnt that simple. I had to add multiline label to the Tab in the TabNavigator. And that label should display every word of the text in a different line. I took almost four days to figure this out as I am new to Flex development. But I have learnt a lot in those four days.