FLEX Examples

Flex Printing Sample Source Code:
Create a file:

formPrint .mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundAlpha="0" xmlns="*" initialize="srv.send()" >
<mx:Script>
<![CDATA[
import mx.printing.FlexPrintJob;
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;

[Bindable]
public var cardTypeOpt:Array = [{label: "MasterCard", data: "mc"},
{label: "VISA", data: "visa"},
{label: "MAESTRO", data: "maestro"}];

[Bindable]
public var ord:uint = 14564;

[Bindable]
public var prodTotal:Number = 0;

public var formPrintView:FormPrintView;

public function srvResult(event : ResultEvent):void
{
var products : Array = event.result.catalog.product;
myDataGrid.dataProvider = new ArrayCollection();

for (var i : int = 1 ; i < 100 ; i++)
{
var index : int = Math.round(Math.random() * (products.length - 1));
var product : Object = {};
product.idx = i;
product.name = products[index].name;
product.price = products[index].price;
product.qty = (Math.round(Math.random() * 5) + 1);
product.totalPrice = Math.round((parseFloat(products[index].price) * product.qty) * 100) / 100;

ArrayCollection(myDataGrid.dataProvider).addItem(product);

prodTotal += product.totalPrice;
}

}

public function doPrintForm():void
{
var pj:FlexPrintJob = new FlexPrintJob();
if(pj.start())
{
var order:Object = {};
order.orderid=ord;
order.name=name1.text;
order.address=address.text;
order.city=city.text;
order.state=state.text;
order.zip=zip.text;
order.email=email.text;
order.cardType=cardType.selectedItem.label;
order.cardNumber=cardNumber.text;
order.cardHolder=cardHolder.text;
order.cardExpMonth=cardExpMonth.value;
order.cardExpYear=cardExpYear.value;

var numRows:uint = myDataGrid.dataProvider ? myDataGrid.dataProvider.length : 0;
formPrintView = new FormPrintView();
formPrintView.width=pj.pageWidth;
formPrintView.height=pj.pageHeight;
addChild(formPrintView);
formPrintView.myDataGrid.dataProvider = myDataGrid.dataProvider;
formPrintView.order = order;
formPrintView.prodTotal = prodTotal;
formPrintView.showPage("single");

var headerShift:int = formPrintView.myDataGrid.showHeaders ? 1 : 0;

if((formPrintView.myDataGrid.verticalScrollPosition + (formPrintView.myDataGrid.rowCount - headerShift)) >= numRows)
{
pj.addObject(formPrintView);
}
else
{
formPrintView.showPage("first");
pj.addObject(formPrintView);

formPrintView.pageNumber++;
while(true)
{
formPrintView.myDataGrid.nextPage();
formPrintView.showPage("last");

if((formPrintView.myDataGrid.verticalScrollPosition + (formPrintView.myDataGrid.rowCount - headerShift)) >= numRows)
{
if(formPrintView.myDataGrid.verticalScrollPosition >= numRows)
{
formPrintView.myDataGrid.height = 0;
formPrintView.myDataGrid.visible = false;
}

pj.addObject(formPrintView);
break;
}
else
{
formPrintView.showPage("middle");
pj.addObject(formPrintView);
formPrintView.pageNumber++;
}
}

}
pj.send();
removeChild(formPrintView);
}
//delete pj;
}
]]>
</mx:Script>

<mx:HTTPService id="srv" url="../assets/catalog.xml" useProxy="false" result="srvResult(event)"/>

<mx:TabNavigator width="100%" creationPolicy="all">
<mx:Form id="myForm" label="Personal Info">
<mx:VBox>
<mx:HBox>
<mx:FormItem label="Identification Number: " >
<mx:Label id="orderid" width="200" text="{String(ord)}" fontWeight="bold"/>
</mx:FormItem>
</mx:HBox>
<mx:HBox>
<mx:FormItem label="Name: " >
<mx:TextInput id="name1" width="200" text="John Doe" fontWeight="bold"/>
</mx:FormItem>
<mx:FormItem label="Email: " >
<mx:TextInput id="email" width="200" text="jdoe@ficticious.com" fontWeight="bold"/>
</mx:FormItem>
</mx:HBox>
<mx:HBox>
<mx:FormItem label="Address: " >
<mx:TextInput id="address" width="200" text="123 Main Street" fontWeight="bold"/>
</mx:FormItem>
<mx:FormItem label="City: " >
<mx:TextInput id="city" width="200" text="Some Town" fontWeight="bold"/>
</mx:FormItem>
</mx:HBox>
<mx:HBox>
<mx:FormItem label="State: " >
<mx:TextInput id="state" width="200" text="California" fontWeight="bold"/>
</mx:FormItem>
<mx:FormItem label="Zip: " >
<mx:TextInput id="zip" width="200" text="91234" fontWeight="bold"/>
</mx:FormItem>
</mx:HBox>
</mx:VBox>
</mx:Form>
<mx:Form label="Payment Info">
<mx:HBox>
<mx:VBox >
<mx:HBox>
<mx:FormItem label="Card Type: " >
<mx:ComboBox id="cardType" themeColor="#CC9999" dataProvider="{cardTypeOpt}" width="200" fontWeight="bold"/>
</mx:FormItem>
<mx:FormItem label="Card Number: " >
<mx:TextInput id="cardNumber" width="200" text="5434545545554555" fontWeight="bold"/>
</mx:FormItem>
</mx:HBox>
<mx:HBox>
<mx:FormItem label="Card Holder: " >
<mx:TextInput id="cardHolder" width="200" text="John Doe" fontWeight="bold"/>
</mx:FormItem>
<mx:FormItem label="Card Expiry Month: " >
<mx:NumericStepper id="cardExpMonth" themeColor="#66FF99" width="200" minimum="1" maximum="12" value="1" stepSize="1" fontWeight="bold"/>
</mx:FormItem>
</mx:HBox>
<mx:HBox>
<mx:FormItem label="Card Expiry Year: " >
<mx:NumericStepper id="cardExpYear" themeColor="#00CCCC" width="200" minimum="2004" maximum="2016" value="2006" stepSize="1" fontWeight="bold"/>
</mx:FormItem>
</mx:HBox>
</mx:VBox>
</mx:HBox>
</mx:Form>
</mx:TabNavigator>

<mx:DataGrid id="myDataGrid" width="100%" >
<mx:columns>
<mx:Array>
<mx:DataGridColumn dataField="idx" headerText="Line Item #"/>
<mx:DataGridColumn dataField="name" headerText="Name"/>
<mx:DataGridColumn dataField="price" headerText="Price"/>
<mx:DataGridColumn dataField="qty" headerText="Quantity"/>
<mx:DataGridColumn dataField="totalPrice" headerText="Total Price"/>
</mx:Array>
</mx:columns>
</mx:DataGrid>

<mx:HBox>
<mx:Button id="btnPrintForm" label="Print Form" click="doPrintForm()" />
</mx:HBox>
</mx:Application>

formPrintView .mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" backgroundColor="#FFFFFF" paddingTop="10" paddingLeft="15" paddingRight="15" paddingBottom="15">
<mx:Script>
<![CDATA[
import mx.core.*;

[Bindable]
public var order:Object;

[Bindable]
public var prodTotal:Number = 0;

public var headerHeight:Number = 0
public var footerHeight:Number = 0;

[Bindable]
public var pageNumber:Number = 1;

public function showPage(pageType:String):void
{
if (pageType == "first" pageType == "middle")
{
if (footer.height != 0)
footerHeight = footer.height;
footer.height = 0;
footer.visible = false;
}
if (pageType == "middle" pageType == "last")
{
if (header.height != 0)
headerHeight = header.height;
header.height = 0;
header.visible = false;
}
if (pageType == "first" pageType == "single")
{
if (headerHeight != 0)
header.height = headerHeight;
header.visible = true;
}

if (pageType == "last" pageType == "single")
{
if (footerHeight != 0)
footer.height = footerHeight;
footer.visible = true;
}

myDataGrid.percentHeight = 100;
validateNow();
}

]]>
</mx:Script>

<mx:HBox width="100%" paddingLeft="10" paddingRight="10">
<mx:VBox width="50%" horizontalAlign="left">
<mx:Label text="Phone Store" fontSize="22" fontFamily="arial"/>
</mx:VBox>
<mx:VBox width="50%" horizontalAlign="right">
<mx:Label text="Page {pageNumber}"/>
</mx:VBox>
</mx:HBox>
<mx:HRule width="100%"/>

<mx:PrintDataGrid id="myDataGrid" width="100%" >
<mx:columns>
<mx:Array>
<mx:DataGridColumn dataField="idx" headerText="Line Item #"/>
<mx:DataGridColumn dataField="name" headerText="Name"/>
<mx:DataGridColumn dataField="price" headerText="Price"/>
<mx:DataGridColumn dataField="qty" headerText="Quantity"/>
<mx:DataGridColumn dataField="totalPrice" headerText="Total Price"/>
</mx:Array>
</mx:columns>
</mx:PrintDataGrid>

<mx:HRule width="100%"/>

<mx:VBox width="100%" horizontalAlign="right">
<mx:Label text="Page {pageNumber}"/>
</mx:VBox>

<mx:Label text="Thank you for your order!" fontSize="16" fontStyle="italic" fontFamily="times" color="0xffAA00"/>

</mx:VBox>

formPrintFooter .mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" percentWidth="100" horizontalAlign="right" >
<mx:Script>
<![CDATA[
[Bindable]
public var prodTotal:Number = 0;
]]>
</mx:Script>
<mx:NumberFormatter id="price" precision="2" rounding="none" decimalSeparatorTo="." thousandsSeparatorTo="," useThousandsSeparator="true" useNegativeSign="true"/>
<mx:Label text="Total: ${price.format(prodTotal)}" fontWeight="bold"/>
</mx:VBox>

formPrintHeader .mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Form xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:Script>
<![CDATA[
[Bindable]
public var order:Object;
]]>
</mx:Script>

<mx:VBox >
<mx:FormHeading label="General Information"/>
<mx:HBox >
<mx:FormItem label="Identification Number:" >
<mx:Label id="orderid" width="160" text="{order.orderid}" fontWeight="bold"/>
</mx:FormItem>
</mx:HBox>
<mx:HBox >
<mx:FormItem label="Name: " >
<mx:Label id="name1" width="160" text="{order.name}" fontWeight="bold"/>
</mx:FormItem>
<mx:FormItem label="Email:" >
<mx:Label id="email" width="160" text="{order.email}" fontWeight="bold"/>
</mx:FormItem>
</mx:HBox>
<mx:HBox >
<mx:FormItem label="Address: " >
<mx:Label id="address" width="160" text="{order.address}" fontWeight="bold"/>
</mx:FormItem>
<mx:FormItem label="City: " >
<mx:Label id="city" width="160" text="{order.city}" fontWeight="bold"/>
</mx:FormItem>
</mx:HBox>
<mx:HBox >
<mx:FormItem label="State: " >
<mx:Label id="state" width="160" text="{order.state}" fontWeight="bold"/>
</mx:FormItem>
<mx:FormItem label="Zip: " >
<mx:Label id="zip" width="160" text="{order.zip}" fontWeight="bold"/>
</mx:FormItem>
</mx:HBox>
</mx:VBox>
<mx:FormHeading label="Payment Information"/>
<mx:HBox >
<mx:VBox>
<mx:HBox >
<mx:FormItem label="Card Type: " >
<mx:Label id="cardType" text="{order.cardType}" width="160" fontWeight="bold"/>
</mx:FormItem>
<mx:FormItem label="Card Number:" >
<mx:Label id="cardNumber" width="120" text="XXXX-XXXX-XXXX-{order.cardNumber.substring(order.cardNumber.length)}" fontWeight="bold"/>
</mx:FormItem>
</mx:HBox>
<mx:HBox >
<mx:FormItem label="Card Holder: " >
<mx:Label id="cardHolder" width="160" text="{order.cardHolder}" fontWeight="bold"/>
</mx:FormItem>
<mx:FormItem label="Card Expiry Month:" >
<mx:Label id="cardExpMonth" text="{order.cardExpMonth}" width="60" fontWeight="bold"/>
</mx:FormItem>
</mx:HBox>
<mx:HBox >
<mx:FormItem label="Card Expiry Year: " >
<mx:Label id="cardExpYear" width="160" text="{order.cardExpYear}" fontWeight="bold"/>
</mx:FormItem>
</mx:HBox>
</mx:VBox>
</mx:HBox>
</mx:Form>

Search Flex Components Free

December 27, 2007

How to add system Fonts in your application

December 25, 2007

Flex Form & Data Grid Printing example Source Code

Related Flex Tutorials

My Top Visited Links

Flex Code Categories

Flex Useful Links