Learning Flex – Lesson 23, Printing From Flex

Flex allows for printing from an application by using the FlexPrintJob class which is a wrapper for the flash.printing.PrintJob class. This allows you to specify one or more objects to be printed. The objects can be containers or custom components and you can specify a separate format that is not visible to the user.

The basic process is as follows:

  1. Instantiate a FlexPrintJob object
  2. call it’s start() method to begin the print process – this will cause the OS to display a print dialog and returns  true if they accept or false if they cancel out.
  3. Add the object(s) to be printed using the addObject() method
  4. Send the job to the printer using the send() method
  5. clean up any temporary objects no longer needed.

Between the start() and send() calls, a print job is spooled to the host operating system so only print specific work should be performed at this time.

It’s good practice to check the return of the start() method and abort the print attempt if it returns false.

If you try to hide the print version of a component by setting it’s visible property false, it will still occupy space in the layout. An alternative is to define the print layout in a custom component then define and instance and add it in your print process using the addchild() method of the application. You can then remove it using removeChild() as part of the print job cleanup. Your print code would then look something like this:

var printJob:FlexPrintJob = new FlexPrintJob();
if(printJob.start() != true){
  return;
}
var myPrintcontainer:CustomPrint = new CustomPrint();
addChild(myPrintContainer);
printJob.addObject(myPrintContainer);
printJob.send();
removeChild(myPrintContainer);

The output can be scaled by adding a parameter to the addObject() call. The options are static constants from the FlexPrintJobScaleType class:

  • MATCH_WIDTH – scales the printed output to match the page width. If the height exceeds the width, the output will span multiple pages (default)
  • MATCH_HEIGHT – scales the printed output to fill the page height. If the width exceeds the height, the output will span multiple pages.
  • SHOW_ALL – scales the printed output to fit on a single page, filling the smaller of width or height.
  • FILL_PAGE – scales the printed output to fill at least one page. It selects the larger of width or height.
  • NONE – the printed output matches the dimensions of the object on the screen.

To aid with printing data grids, there are print versions of data grid classes namely PrintDataGrid, PrintAdvancedDataGrid and PrintOLAPDataGrid. These have default appearances designed for printing and methods to support multiple page printing.

A PrintDataGrid will only print the rows that are visible by default. The property sizeToPage specifies that partially visible rows are not printed if it’s set true (default). To print rows below a scrollbar, you must use the nextPage() method and validNextPage boolean property.

While validNextPage is true, call nextPage() and then add the PrintDataGrid object to the print job.

Flex printing can look somewhat blurry on the page and does not always produce the results desired. For a great series of posts on an alternative, (AlivePDF) take a look at these posts from Kalen Gibbons.

Advertisements

Learning Flex – Lesson 22, Creating Transitions and Behaviors

Behaviors and transitions allow you to add animation and sound effects to your application. Behaviors are effects that can be applied directly on components, transitions are these effects applied to application states.

Some of the effects available are: fade, dissolve, move/resize, rotate, wipe, glow and play sound.

These effects can be used to draw the user’s attention to items changing on the screen or give cues as to which elements they can interact with.

Behaviors

When applied to components, behaviors are made up of a trigger and an effect.

The trigger is the action taking place on the component such as a button click or gaining focus. It is important to note that triggers are different to events. A component would have a mouseDownEffect trigger as well as a mouseDown event. When you use a trigger, you do not specify an event handler, instead you specify the effect to occur.

You can directly specify an effect class name for a trigger such as:

<mx:VBox showEffect="Fade"/>

but in this case, you are limited to one effect and cannot customize it.

You may define an effect tag and specify desired properties that can then be provided to a trigger using data binding on the effect id such as:

<mx:Fade id="myFade" duration="2000"/>
<mx:VBox showEffect="{myFade}"/>

You can apply multiple effects to the same trigger by using the <mx:Sequence> or <mx:Parallel> tags by nesting effects within them to occur in order (using <mx:Sequence>) or all together (using <mx:Parallel>). You can even nest these tags for more involved effects.

As effect triggers are implemented as CSS styles, you can specify them using an <mx:Style> tag:

<mx:Style>
List {showEffect : myFade;}
</mx:Style>

which will make all lists have the same show effect (unless you override it in a specific list configuration, or:

<mx:Style>
.fadeStyle { showEffect : myFade;}
</mx:Style>

which will display this effect for all components with the styleName property set to fadeStyle.

It’s also possible to play effects at other times by calling the effect’s play() method (you can optionally specify an array of components to perform the effect on and a boolean value which when set to true, will play the effect backwards. There’s also an end() method to end the effect (this is often called immediately before play() to stop any outstanding effects).

Effects can be used for changes in data provided by a dataProvider in a List or TileList. More information about this can be found here.

More control over the animation of an effect may be provided by using an easing function. All effect classes that are children of the TweenEffect or MaskEffect classes support the easingFunction property. Some components have easing function style properties that can be used directly.  More information on easing functions can be found here.

You can play a sound effect by using the <mx:SoundEffect> tag and specifying the url of an MP3 file in the source property. Alternatively, if you’ve already embedded  the sound file, you may use data binding to refer to it’s class object here.  There are also several properties to determine the duration, start point in the file, volume start and end values etc (you can find out the full details here) .

Transitions

Transitions are effects for application states. They must be declared as children of an <mx:transitions> tag (this is a property of the application). Each <mx:Transition> has a fromState – the view state you’re moving from, toState – the view state you’re moving to and the effect object you want to play when the transition occurs. You can specify a target or targets (array of target objects) for the effect either in the effect tag directly or at a higher level within an <mx:Sequence> or <mx:Parallel> tag. An example would be:

<mx:transitions>
<mx:Transition fromState="START" toState="*">
<mx:Dissolve duration="2000"  target="{myContainer}"/>
</mx:Transition>
</mx:transitions>

Once the transitions are declared, they are triggered by changing the application’s currentState property.

Learning Flex – Lesson 21, Deploying Flex Applications

Adobe Integrated Runtime (AIR) allows you to write Flex applications that can be run from the desktop. AIR gives you access to features that are not available when running from the browser such as interaction with the local file system, an embedded database for client side storage and with the new AIR 2 beta , raw microphone data access and multitouch support amongst other things.

The basics of working with AIR are very similar to Flex applications. In Flex Builder or FlashDevelop, choose a new AIR project and instead of a root <mx:Application> tag, use <mx:WindowedApplication>.

In defining your application, the application id is important as this is used to register the app with the operating system so it needs to be unique. This value (along with other configuration data) is stored in the project’s application.xml file. Flex Builder allows you to specify the application id on project creation but FlashDevelop will default it to the project name so you’ll probably want to go in and change that. Further information on the application.xml file can be found here.

Because of the additional access they have, AIR apps need to be signed by a security certificate before they can be released.

You can create a self-signed cert or buy one from a certificate authority such as VeriSign (currently $499 per year) or Thawte (currently $299 per year). Note these are different to standard SSL certificates.

The downside to a self-signed cert is that the install screen will show a big red “?” along with the text “are you sure you want to install this application to your computer?” instead of the happy green “!” that you get with a valid paid certificate. You can find out more about how to get and install a certificate in this article.

FlashDevelop provides two batch files and an AIR_readme.txt file when it creates an AIR project to help you release your application. You can find out more information on packaging an AIR file (including potential error messages) in this article.