반응형

Simple TLF Text Editor released

I just released a simple TLF-based text editor. It allows the end user to have a familiar interface and generates TextFlow on the fly as the user types. It’s simple and light-weight and supports most commonly used styles. It’s lighter weight than Adobe’s tlf text editor. This editor is perfect to use in a CMS.

I even implemented what I’m calling “soft bullets”. TLF 1.x doesn’t officially support bullets so I implemented it myself. The reason it’s soft is because you can insert the cursor before the bullet and type text and there are some other strange quirks, but it’s good enough to give the end user some decent styling options.

The source is released under MIT license, so feel free to use it in your apps and modify it for your needs. You can get the code on Google code.

This entry was posted in Components, TLF. Bookmark the permalink.

 

Posted by 1010
반응형

Exporting a TextFlow object in Flex 4

By On July 25, 2009 · 28 Comments

The following example shows how you can export a TextFlow object in Flex 4 by using the TextConverter class (flashx.textLayout.conversion.TextConverter), and specifying HTML format, plain text format, or Text Layout Format.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/25/exporting-a-textflow-object-in-flex-4/ -->
<s:Application name="Spark_TextConverter_export_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo"
        xmlns:comps="comps.*">
    <s:layout>
        <s:VerticalLayout paddingLeft="20" paddingRight="20"
                paddingTop="20" paddingBottom="20" />
    </s:layout>
 
    <fx:Script>
        <![CDATA[
            import flashx.textLayout.conversion.ConversionType;
            import flashx.textLayout.conversion.TextConverter;
        ]]>
    </fx:Script>
 
    <comps:CustomEditor id="customEditor" />
 
    <s:HGroup>
        <s:Button id="htmlBtn"
                label="Export as HTML"
                click="debug.text = TextConverter.export(customEditor.editor.textFlow,
                                        TextConverter.HTML_FORMAT,
                                        ConversionType.STRING_TYPE).toString();" />
        <s:Button id="plainTxtBtn"
                label="Export as plain text"
                click="debug.text = TextConverter.export(customEditor.editor.textFlow,
                                        TextConverter.PLAIN_TEXT_FORMAT,
                                        ConversionType.STRING_TYPE).toString();" />
        <s:Button id="tlfBtn"
                label="Export as TLF"
                click="debug.text = TextConverter.export(customEditor.editor.textFlow,
                                        TextConverter.TEXT_LAYOUT_FORMAT,
                                        ConversionType.STRING_TYPE).toString();" />
    </s:HGroup>
 
    <s:TextArea id="debug" width="100%" height="100%" />
 
</s:Application>

View source is enabled in the following example.

And the custom rich text editor component, comps/CustomEditor.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/25/exporting-a-textflow-object-in-flex-4/ -->
<s:Panel name="CustomEditor"
         xmlns:fx="http://ns.adobe.com/mxml/2009"
         xmlns:s="library://ns.adobe.com/flex/spark"
         xmlns:mx="library://ns.adobe.com/flex/halo"
        title="SimpleTextEditor" minWidth="400">
    <s:layout>
        <s:VerticalLayout gap="0" />
    </s:layout>
 
    <fx:Script>
        <![CDATA[
            import flashx.textLayout.conversion.ConversionType;
            import flashx.textLayout.conversion.TextConverter;
            import flash.text.engine.FontPosture;
            import flash.text.engine.FontWeight;
            import flashx.textLayout.formats.TextAlign;
            import flashx.textLayout.formats.TextDecoration;
            import flashx.textLayout.formats.TextLayoutFormat;
            import mx.events.ColorPickerEvent;
            import mx.events.FlexEvent;
            import spark.events.IndexChangeEvent;
 
            protected function editor_selectionChangeHandler(evt:FlexEvent):void {
                var txtLayFmt:TextLayoutFormat = editor.getFormatOfRange(null,
                                    editor.selectionAnchorPosition,
                                    editor.selectionActivePosition);
                fontDDL.selectedItem = txtLayFmt.fontFamily;
                sizeDDL.selectedItem = txtLayFmt.fontSize;
                boldBtn.selected = (txtLayFmt.fontWeight == FontWeight.BOLD);
                italBtn.selected = (txtLayFmt.fontStyle == FontPosture.ITALIC);
                underBtn.selected = (txtLayFmt.textDecoration == TextDecoration.UNDERLINE);
                colorCP.selectedColor = txtLayFmt.color;
                lineBtn.selected = txtLayFmt.lineThrough;
 
                switch (txtLayFmt.textAlign) {
                    case TextAlign.LEFT:
                        txtAlignBB.selectedIndex = 0;
                        break;
                    case TextAlign.CENTER:
                        txtAlignBB.selectedIndex = 1;
                        break;
                    case TextAlign.RIGHT:
                        txtAlignBB.selectedIndex = 2;
                        break;
                    case TextAlign.JUSTIFY:
                        txtAlignBB.selectedIndex = 3;
                        break;
                    default:
                        txtAlignBB.selectedIndex = -1;
                        break;
                }
            }
 
            protected function fontDDL_changeHandler(evt:IndexChangeEvent):void {
                var txtLayFmt:TextLayoutFormat = editor.getFormatOfRange(null,
                                    editor.selectionAnchorPosition,
                                    editor.selectionActivePosition);
                txtLayFmt.fontFamily = fontDDL.selectedItem;
                editor.setFormatOfRange(txtLayFmt,
                                    editor.selectionAnchorPosition,
                                    editor.selectionActivePosition);
                editor.setFocus();
            }
 
            protected function sizeDDL_changeHandler(evt:IndexChangeEvent):void {
                var txtLayFmt:TextLayoutFormat = editor.getFormatOfRange(null,
                                    editor.selectionAnchorPosition,
                                    editor.selectionActivePosition);
                txtLayFmt.fontSize = sizeDDL.selectedItem;
                editor.setFormatOfRange(txtLayFmt,
                                    editor.selectionAnchorPosition,
                                    editor.selectionActivePosition);
                editor.setFocus();
            }
 
            protected function boldBtn_clickHandler(evt:MouseEvent):void {
                var txtLayFmt:TextLayoutFormat = editor.getFormatOfRange(null,
                                    editor.selectionAnchorPosition,
                                    editor.selectionActivePosition);
                txtLayFmt.fontWeight = (txtLayFmt.fontWeight == FontWeight.BOLD) ? FontWeight.NORMAL : FontWeight.BOLD;
                editor.setFormatOfRange(txtLayFmt,
                                    editor.selectionAnchorPosition,
                                    editor.selectionActivePosition);
                editor.setFocus();
            }
 
            protected function italBtn_clickHandler(evt:MouseEvent):void {
                var txtLayFmt:TextLayoutFormat = editor.getFormatOfRange(null,
                                    editor.selectionAnchorPosition,
                                    editor.selectionActivePosition);
                txtLayFmt.fontStyle = (txtLayFmt.fontStyle == FontPosture.ITALIC) ? FontPosture.NORMAL : FontPosture.ITALIC;
                editor.setFormatOfRange(txtLayFmt,
                                    editor.selectionAnchorPosition,
                                    editor.selectionActivePosition);
                editor.setFocus();
            }
 
            protected function underBtn_clickHandler(evt:MouseEvent):void {
                var txtLayFmt:TextLayoutFormat = editor.getFormatOfRange(null,
                                    editor.selectionAnchorPosition,
                                    editor.selectionActivePosition);
                txtLayFmt.textDecoration = (txtLayFmt.fontStyle == TextDecoration.UNDERLINE) ? TextDecoration.NONE : TextDecoration.UNDERLINE;
                editor.setFormatOfRange(txtLayFmt,
                                    editor.selectionAnchorPosition,
                                    editor.selectionActivePosition);
                editor.setFocus();
            }
 
            protected function colorCP_changeHandler(evt:ColorPickerEvent):void {
                var txtLayFmt:TextLayoutFormat = editor.getFormatOfRange(null,
                                    editor.selectionAnchorPosition,
                                    editor.selectionActivePosition);
                txtLayFmt.color = colorCP.selectedColor;
                editor.setFormatOfRange(txtLayFmt,
                                    editor.selectionAnchorPosition,
                                    editor.selectionActivePosition);
                editor.setFocus();
            }
 
            protected function txtAlignBB_changeHandler(evt:IndexChangeEvent):void {
                if (txtAlignBB.selectedItem) {
                    var txtLayFmt:TextLayoutFormat = editor.getFormatOfRange(null,
                                        editor.selectionAnchorPosition,
                                        editor.selectionActivePosition);
                    txtLayFmt.textAlign = txtAlignBB.selectedItem.value;
                    editor.setFormatOfRange(txtLayFmt,
                                        editor.selectionAnchorPosition,
                                        editor.selectionActivePosition);
                    editor.setFocus();
                }
            }
 
            protected function lineBtn_clickHandler(evt:MouseEvent):void {
                var txtLayFmt:TextLayoutFormat = editor.getFormatOfRange(null,
                                    editor.selectionAnchorPosition,
                                    editor.selectionActivePosition);
                txtLayFmt.lineThrough = lineBtn.selected;
                editor.setFormatOfRange(txtLayFmt,
                                    editor.selectionAnchorPosition,
                                    editor.selectionActivePosition);
                editor.setFocus();
            }
        ]]>
    </fx:Script>
 
    <s:TextArea id="editor"
            focusEnabled="false"
            width="100%" height="100%"
            minHeight="200"
            selectionChange="editor_selectionChangeHandler(event);">
        <s:textFlow>
            <s:TextFlow paragraphSpaceBefore="20">
                <s:p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et nibh lorem. Nulla ut velit magna. Nunc quis libero ac orci porta tincidunt eget in lorem. Aenean vitae nisi vitae urna lacinia congue. Duis nec leo turpis. Phasellus dui orci, lacinia in dictum lacinia, ullamcorper a tortor. Suspendisse lacinia, turpis vel euismod gravida, turpis dui vulputate libero, vel consequat enim sem nec mauris. Curabitur vitae magna vel neque accumsan commodo vitae quis ipsum. Nullam ac condimentum elit. Integer eget magna ac mi fermentum luctus. Ut pharetra auctor pulvinar. Duis lobortis, nulla at vestibulum tincidunt, ante neque scelerisque risus, ac dignissim nunc nisl rhoncus risus. Cras pretium egestas purus, a commodo nunc vehicula at. Fusce vestibulum enim in mi hendrerit a viverra justo tempor. Maecenas eget ipsum ac mauris dictum congue eu id justo.</s:p>
                <s:p>Aliquam tincidunt tempor nisi id porta. Aenean risus dolor, tincidunt a ultrices in, laoreet eu ante. Mauris vel lacus neque, ut scelerisque eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec vel lacus sit amet erat vehicula malesuada id in augue. Sed purus massa, placerat non imperdiet nec, venenatis a nulla. Donec vel ligula leo, in rhoncus arcu. Duis semper bibendum facilisis. Duis nibh lorem, egestas rutrum tincidunt non, vulputate accumsan nulla. Nunc ligula nisl, ultrices ut tempor quis, rutrum et enim. Nullam accumsan scelerisque ante id pretium. Mauris nibh metus, blandit in varius congue, pharetra sit amet sem. Phasellus tincidunt lacus quis est semper ut rhoncus sem pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar, enim eu consectetur venenatis, dui tortor commodo ante, sit amet sagittis libero odio cursus neque. Aliquam a dui non eros placerat euismod. In at mattis felis. Suspendisse potenti. Morbi posuere condimentum lacus. Suspendisse tellus magna, viverra ac mattis vel, adipiscing eget lectus.</s:p>
                <s:p>Etiam ut eros lectus. Praesent nec massa nibh. Cras venenatis, ligula in condimentum euismod, nisl lorem hendrerit lacus, a imperdiet odio est et odio. Suspendisse eu orci ut augue commodo gravida sed eu risus. Vestibulum venenatis erat ac metus ullamcorper blandit. Integer et sem enim. Vivamus a arcu metus. Nunc sollicitudin commodo placerat. Maecenas vehicula, massa et auctor tempor, felis leo commodo lorem, eget pulvinar felis turpis nec erat. Mauris imperdiet gravida felis a eleifend.</s:p>
                <s:p>Suspendisse mattis tempor fringilla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed molestie arcu. Praesent ut tellus sed orci blandit tristique non eget est. Sed interdum feugiat nisi, sit amet aliquet enim sodales non. Maecenas in velit sit amet tellus tincidunt dapibus. Vivamus est eros, iaculis et venenatis a, malesuada vel lacus. Aliquam vel orci tortor. Etiam ornare ante eget massa dignissim a auctor nunc pellentesque. Pellentesque sodales porta nisi, pretium accumsan eros tincidunt vitae. Cras facilisis accumsan purus ultricies lacinia. Praesent consequat elit imperdiet tellus vehicula ut ornare mauris mattis. Suspendisse non tortor nisl. Etiam ac pretium est.</s:p>
                <s:p>Maecenas tristique, velit aliquam faucibus ornare, justo erat porta elit, sed venenatis neque mi ac elit. Nullam enim metus, gravida ac euismod sit amet, commodo vitae elit. Quisque eget molestie ante. Nulla fermentum pretium augue non tristique. Praesent in orci eu diam ultrices sodales ac quis leo. Aliquam lobortis elit quis mi rutrum feugiat. Aenean sed elit turpis. Duis enim ligula, posuere sit amet semper a, pretium vel leo. Etiam mollis dolor nec elit suscipit imperdiet. Sed a est eros.</s:p>
            </s:TextFlow>
        </s:textFlow>
    </s:TextArea>
    <mx:ControlBar width="100%" cornerRadius="0">
        <mx:ToolBar width="100%" horizontalGap="5">
            <s:DropDownList id="fontDDL"
                    width="150"
                    change="fontDDL_changeHandler(event);">
                <s:dataProvider>
                    <s:ArrayList source="[Arial,Verdana,Times New Roman,Trebuchet MS]" />
                </s:dataProvider>
            </s:DropDownList>
            <s:DropDownList id="sizeDDL"
                    width="60"
                    change="sizeDDL_changeHandler(event);">
                <s:dataProvider>
                    <s:ArrayList source="[8,10,12,14,16,24,36,72]" />
                </s:dataProvider>
            </s:DropDownList>
            <s:ToggleButton id="boldBtn"
                    label="B"
                    fontWeight="bold"
                    width="30"
                    click="boldBtn_clickHandler(event);" />
            <s:ToggleButton id="italBtn"
                    label="I"
                    fontStyle="italic"
                    width="30"
                    click="italBtn_clickHandler(event);" />
            <s:ToggleButton id="underBtn"
                    label="U" 
                    textDecoration="underline"
                    width="30"
                    click="underBtn_clickHandler(event);" />
            <s:ToggleButton id="lineBtn"
                    label="S"
                    lineThrough="true"
                    width="30"
                    click="lineBtn_clickHandler(event);" />
            <mx:ColorPicker id="colorCP"
                    change="colorCP_changeHandler(event);" />
            <s:ButtonBar id="txtAlignBB"
                    arrowKeysWrapFocus="true"
                    labelField="label"
                    width="120"
                    change="txtAlignBB_changeHandler(event);">
                <s:dataProvider>
                    <s:ArrayList>
                        <fx:Object label="L" value="{TextAlign.LEFT}" />
                        <fx:Object label="C" value="{TextAlign.CENTER}" />
                        <fx:Object label="R" value="{TextAlign.RIGHT}" />
                        <fx:Object label="J" value="{TextAlign.JUSTIFY}" />
                    </s:ArrayList>
                </s:dataProvider>
            </s:ButtonBar>
        </mx:ToolBar>
    </mx:ControlBar>
 
</s:Panel>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 

Posted by 1010
반응형
Posted by 1010
반응형

SparkRichTextEditor is a flex component based on Text Layout Framework with basic functionality implementation of a simple text editor with styles and key shortcuts with advances and improvements of new text system of Adobe.

Source codeClick with the right button to obtain source code.

More great examples of Adobe TLF and from tlftexteditor (in Google Code).

Posted by 1010
반응형

Print DataGrid In Flex


PrintDataGridExample.mxml

<?xml version="1.0"?>
<!-- Main application to print a DataGrid control on multiple pages. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="initData();">
<mx:Script>
<![CDATA[
import mx.printing.*;
import mx.collections.ArrayCollection;
import FormPrintView;

// Declare variables and initialize simple variables.
[Bindable]
public var dgProvider:ArrayCollection;
public var footerHeight:Number=20;
public var prodIndex:Number;
public var prodTotal:Number=0;

// Data initialization.
public function initData():void
{
// Create the data provider for the DataGrid control.
dgProvider=new ArrayCollection;
}

// Fill the dgProvider ArrayCollection with the specified items.
public function setdgProvider(items:int):void
{

prodIndex=1;
dgProvider.removeAll();
for (var z:int=0; z < items; z++)
{
var prod1:Object={};
prod1.Qty=prodIndex * 7;
prod1.Index=prodIndex++;
prodTotal+=prod1.Qty;
dgProvider.addItem(prod1);
}
}

// The function to print the output.
public function doPrint():void
{

var printJob:FlexPrintJob=new FlexPrintJob();
if (printJob.start())
{
// Create a FormPrintView control as a child of the current view.
var thePrintView:FormPrintView=new FormPrintView();
Application.application.addChild(thePrintView);

//Set the print view properties.
thePrintView.width=printJob.pageWidth;
thePrintView.height=printJob.pageHeight;
thePrintView.prodTotal=prodTotal;
// Set the data provider of the FormPrintView component's data grid
// to be the data provider of the displayed data grid.
thePrintView.myDataGrid.dataProvider=myDataGrid.dataProvider;
// Create a single-page image.
thePrintView.showPage("single");
// If the print image's data grid can hold all the provider's rows,
// add the page to the print job.
if (!thePrintView.myDataGrid.validNextPage)
{
printJob.addObject(thePrintView);
}
// Otherwise, the job requires multiple pages.
else
{
// Create the first page and add it to the print job.
thePrintView.showPage("first");
printJob.addObject(thePrintView);
thePrintView.pageNumber++;
// Loop through the following code until all pages are queued.
while (true)
{
// Move the next page of data to the top of the print grid.
thePrintView.myDataGrid.nextPage();
thePrintView.showPage("last");
// If the page holds the remaining data, or if the last page
// was completely filled by the last grid data, queue it for printing.
// Test if there is data for another PrintDataGrid page.
if (!thePrintView.myDataGrid.validNextPage)
{
// This is the last page; queue it and exit the print loop.
printJob.addObject(thePrintView);
break;
}
else
// This is not the last page. Queue a middle page.
{
thePrintView.showPage("middle");
printJob.addObject(thePrintView);
thePrintView.pageNumber++;
}
}
}
// All pages are queued; remove the FormPrintView control to free memory.
Application.application.removeChild(thePrintView);
}
// Send the job to the printer.
printJob.send();
}
]]>
</mx:Script>

<mx:Panel title="DataGrid Printing Example" height="75%" width="75%" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">

<mx:DataGrid id="myDataGrid" dataProvider="{dgProvider}">
<mx:columns>
<mx:DataGridColumn dataField="Index"/>
<mx:DataGridColumn dataField="Qty"/>
</mx:columns>
</mx:DataGrid>

<mx:Text width="100%" color="blue" text="Specify the number of lines and click Fill Grid first. Then you can click Print."/>

<mx:TextInput id="dataItems" text="35"/>

<mx:HBox>
<mx:Button id="setDP" label="Fill Grid" click="setdgProvider(int(dataItems.text));"/>
<mx:Button id="printDG" label="Print" click="doPrint();"/>
</mx:HBox>
</mx:Panel>
</mx:Application>


FormPrintView.mxml

<?xml version="1.0"?>
<!-- Custom control to print the DataGrid control on multiple pages. -->

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" backgroundColor="#FFFFFF" paddingTop="50" paddingBottom="50" paddingLeft="50">

<mx:Script>
<![CDATA[
import mx.core.*
// Declare and initialize the variables used in the component.
// The application sets the actual prodTotal value.
[Bindable]
public var pageNumber:Number=1;
[Bindable]
public var prodTotal:Number=0;

// Control the page contents by selectively hiding the header and
// footer based on the page type.
public function showPage(pageType:String):void
{
if (pageType == "first" || pageType == "middle")
{
// Hide the footer.
footer.includeInLayout=false;
footer.visible=false;
}
if (pageType == "middle" || pageType == "last")
{
// The header won't be used again; hide it.
header.includeInLayout=false;
header.visible=false;
}
if (pageType == "last")
{
// Show the footer.
footer.includeInLayout=true;
footer.visible=true;
}
//Update the DataGrid layout to reflect the results.
validateNow();
}
]]>
</mx:Script>

<!-- The template for the printed page, with the contents for all pages. -->
<mx:VBox width="80%" horizontalAlign="left">
<mx:Label text="Page {pageNumber}"/>
</mx:VBox>

<FormPrintHeader id="header"/>
<!-- The data grid. The sizeToPage property is true by default, so the last
page has only as many grid rows as are needed for the data. -->
<mx:PrintDataGrid id="myDataGrid" width="60%" height="100%">
<!-- Specify the columns to ensure that their order is correct. -->
<mx:columns>
<mx:DataGridColumn dataField="Index"/>
<mx:DataGridColumn dataField="Qty"/>
</mx:columns>
</mx:PrintDataGrid>

<!-- Create a FormPrintFooter control and set its prodTotal variable. -->
<FormPrintFooter id="footer" pTotal="{prodTotal}"/>

</mx:VBox>


FormPrintHeader.mxml

<?xml version="1.0"?>
<!-- Custom control for the header area of the printed page. -->

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="60%" horizontalAlign="right">

<mx:Label text="This is a placeholder for first page contents"/>
</mx:VBox>


FormPrintFooter.mxml

<?xml version="1.0"?>
<!-- Custom control for the footer area of the printed page. -->

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="60%" horizontalAlign="right">
<!-- Declare and initialize the product total variable. -->

<mx:Script>
<![CDATA[
[Bindable]
public var pTotal:Number=0;
]]>
</mx:Script>
<mx:Label text="Product Total: {pTotal}"/>
</mx:VBox>


Examples:-

Posted by 1010
반응형
FlexPrintJob

패키지 mx.printing
클래스 public class FlexPrintJob
상속 FlexPrintJob Inheritance Object

언어 버전:  ActionScript 3.0
제품 버전:  Flex 3
런타임 버전:  Flash Player 9, AIR 1.1

 

Was this helpful?Yes   No

 

 

The FlexPrintJob class is a wrapper for the flash.printing.PrintJob class. It supports automatically slicing and paginating the output on multilple pages, and scaling the grid contents to fit the printer's page size.

 

예제 보기

기타 예제

추가 정보


 


공용 속성
  속성 정의 주체
  Inherited constructor : Object
지정된 객체 인스턴스의 클래스 객체 또는 생성자 함수에 대한 참조입니다.
Object
    pageHeight : Number
[읽기 전용] The height of the printable area on the printer page; it does not include any user-set margins.
FlexPrintJob
    pageWidth : Number
[읽기 전용] The width of the printable area on the printer page; it does not include any user-set margins.
FlexPrintJob
    printAsBitmap : Boolean
Specifies whether to print the job content as a bitmap (true) or in vector format (false).
FlexPrintJob
공용 메서드
  메서드 정의 주체
   
Constructor.
FlexPrintJob
   
addObject(obj:IUIComponent, scaleType:String = "matchWidth"):void
Adds a UIComponent object to the list of objects being printed.
FlexPrintJob
  Inherited
지정된 속성이 객체에 정의되어 있는지 여부를 나타냅니다.
Object
  Inherited
Object 클래스의 인스턴스가 매개 변수로 지정된 객체의 프로토타입 체인에 있는지 여부를 나타냅니다.
Object
  Inherited
지정된 속성이 존재하고 열거 가능한지 여부를 나타냅니다.
Object
   
Sends the added objects to the printer to start printing.
FlexPrintJob
  Inherited
루프 작업에서 동적 속성을 사용할 수 있는지 여부를 설정합니다.
Object
   
Initializes the PrintJob object.
FlexPrintJob
  Inherited
로캘별 규칙에 따라 서식이 지정된 이 객체의 문자열 표현을 반환합니다.
Object
  Inherited
지정된 객체의 문자열 표현을 반환합니다.
Object
  Inherited
지정된 객체의 프리미티브 값을 반환합니다.
Object
속성 세부 정보

pageHeight

속성
pageHeight:Number  [읽기 전용]

 

언어 버전:  ActionScript 3.0
제품 버전:  Flex 3
런타임 버전:  Flash Player 9, AIR 1.1

 

 

The height of the printable area on the printer page; it does not include any user-set margins. It is set after start() method returns.



구현
    public function get pageHeight():Number

pageWidth

속성  
pageWidth:Number  [읽기 전용]

 

언어 버전:  ActionScript 3.0
제품 버전:  Flex 3
런타임 버전:  Flash Player 9, AIR 1.1

 

 

The width of the printable area on the printer page; it does not include any user-set margins. This property is set after start() method returns.



구현
    public function get pageWidth():Number

printAsBitmap

속성  
printAsBitmap:Boolean

언어 버전:  ActionScript 3.0
제품 버전:  Flex 3
런타임 버전:  Flash Player 9, AIR 1.1

 

 

Specifies whether to print the job content as a bitmap (true) or in vector format (false). Printing as a bitmap supports output that includes a bitmap image with alpha transparency or color effects. If the content does not include any bitmap images with alpha transparency or color effects, you can print in higher quality vector format by setting the printAsBitmap property to false.

기본값: true.



구현
    public function get printAsBitmap():Boolean
    public function set printAsBitmap(value:Boolean):void
생성자 세부 정보

FlexPrintJob

() 생성자
public function FlexPrintJob()

 

언어 버전:  ActionScript 3.0
제품 버전:  Flex 3
런타임 버전:  Flash Player 9, AIR 1.1

 

Constructor.

메서드 세부 정보

addObject

() 메서드
public function addObject(obj:IUIComponent, scaleType:String = "matchWidth"):void

언어 버전:  ActionScript 3.0
제품 버전:  Flex 3
런타임 버전:  Flash Player 9, AIR 1.1

 

 

Adds a UIComponent object to the list of objects being printed. Call this method after the start() method returns. Each call to this method starts a new page, so you should format your objects in page-sized chunks. You can use the PrintDataGrid class to span a data grid across multiple pages.

매개 변수

obj:IUIComponent — The Object to be printed.
 
scaleType:String (default = "matchWidth") — The scaling technique to use to control how the object fits on one or more printed pages. Must be one of the constant values defined in the FlexPrintJobScaleType class.

 

관련 API 요소

send

() 메서드  
public function send():void

언어 버전:  ActionScript 3.0
제품 버전:  Flex 3
런타임 버전:  Flash Player 9, AIR 1.1

 

 

Sends the added objects to the printer to start printing. Call this method after you have used the addObject() method to add the print pages.

start

() 메서드  
public function start():Boolean

언어 버전:  ActionScript 3.0
제품 버전:  Flex 3
런타임 버전:  Flash Player 9, AIR 1.1

 

 

Initializes the PrintJob object. Displays the operating system printer dialog to the user. Flex sets the pageWidth and pageHeight properties after this call returns.

 

반환값
Booleantrue if the user clicks OK when the print dialog box appears, or false if the user clicks Cancel or if an error occurs.
FormPrintHeader.mxml
<?xml version="1.0"?>
<!-- Custom control for the header area of the printed page. -->
<s:VGroup name="FormPrintHeader"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        width="60%"
        horizontalAlign="right" >

    <s:Label text="This is a placeholder for first page contents"/>

</s:VGroup>
FormPrintFooter.mxml
<?xml version="1.0"?>
<!-- Custom control for the footer area of the printed page. -->
<s:VGroup name="FormPrintFooter"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        width="60%"
        horizontalAlign="right" >

    <!-- Declare and initialize the product total variable. -->
    <fx:Script>
        <![CDATA[
            [Bindable]
            public var pTotal:Number = 0;
        ]]>
    </fx:Script>

    <s:Label text="Product Total: {pTotal}"/>

</s:VGroup>
FormPrintView.mxml
<?xml version="1.0"?>
<!-- Custom control to print the Halo DataGrid control on multiple pages. -->
<s:VGroup name="FormPrintView"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        xmlns="*">

    <fx:Script>
        <![CDATA[
            import mx.core.*;

            // Declare and initialize the variables used in the component.
            // The application sets the actual prodTotal value.
            [Bindable]
            public var pageNumber:Number = 1;

            [Bindable]
            public var prodTotal:Number = 0;

            // Control the page contents by selectively hiding the header and
            // footer based on the page type.
            public function showPage(pageType:String):void {
                if (pageType == "first" || pageType == "middle") {
                    // Hide the footer.
                    footer.includeInLayout = false;
                    footer.visible = false;
                }
                if (pageType == "middle" || pageType == "last") {
                    // The header won't be used again; hide it.
                    header.includeInLayout = false;
                    header.visible = false;
                }
                if (pageType == "last") {
                    // Show the footer.
                    footer.includeInLayout = true;
                    footer.visible = true;
                }
                //Update the DataGrid layout to reflect the results.
                validateNow();
            }
        ]]>
    </fx:Script>

    <!-- The template for the printed page, with the contents for all pages. -->
    <s:VGroup width="80%" horizontalAlign="left">
        <s:Label text="Page {pageNumber}"/>
    </s:VGroup>

    <FormPrintHeader id="header" />

    <!-- The data grid. The sizeToPage property is true by default, so the last
        page has only as many grid rows as are needed for the data. -->
    <mx:PrintDataGrid id="myDataGrid" width="60%" height="100%">
        <!-- Specify the columns to ensure that their order is correct. -->
        <mx:columns>
            <mx:DataGridColumn dataField="Index" />
            <mx:DataGridColumn dataField="Qty" />
        </mx:columns>
    </mx:PrintDataGrid>

    <!-- Create a FormPrintFooter control and set its prodTotal variable. -->
    <FormPrintFooter id="footer" pTotal="{prodTotal}" />

</s:VGroup>
PrintDataGridExample.mxml
<?xml version="1.0"?>
<!-- Main application to print a Halo DataGrid control on multiple pages. -->
<s:Application name="PrintDataGridExample.mxml"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        initialize="initData();">

    <fx:Script>
        <![CDATA[

        import mx.printing.*;
        import mx.collections.ArrayCollection;
        import FormPrintView;
        import mx.core.FlexGlobals;

        // Declare variables and initialize simple variables.
        [Bindable]
        public var dgProvider:ArrayCollection;
        public var footerHeight:Number = 20;
        public var prodIndex:Number;
        public var prodTotal:Number = 0;


        // Data initialization.
        public function initData():void {
            // Create the data provider for the DataGrid control.
            dgProvider = new ArrayCollection;
        }

        // Fill the dgProvider ArrayCollection with the specified items.
        public function setdgProvider(items:int):void {
            prodIndex=1;
            dgProvider.removeAll();
            for (var z:int=0; z<items; z++) {
                var prod1:Object = {};
                prod1.Qty = prodIndex * 7;
                prod1.Index = prodIndex++;
                prodTotal += prod1.Qty;
                dgProvider.addItem(prod1);
            }
        }

        // The function to print the output.
        public function doPrint():void {
            var printJob:FlexPrintJob = new FlexPrintJob();
            if (printJob.start()) {
                // Create a FormPrintView control as a child of the current view.
                var thePrintView:FormPrintView = new FormPrintView();
                FlexGlobals.topLevelApplication.addElement(thePrintView);

                //Set the print view properties.
                thePrintView.width=printJob.pageWidth;
                thePrintView.height=printJob.pageHeight;
                thePrintView.prodTotal = prodTotal;
                // Set the data provider of the FormPrintView component's data grid
                // to be the data provider of the displayed data grid.
                thePrintView.myDataGrid.dataProvider = myDataGrid.dataProvider;
                // Create a single-page image.
                thePrintView.showPage("single");
                // If the print image's data grid can hold all the provider's rows,
                // add the page to the print job.
                if (!thePrintView.myDataGrid.validNextPage)  {
                    printJob.addObject(thePrintView);
                }
                // Otherwise, the job requires multiple pages.
                else {
                    // Create the first page and add it to the print job.
                    thePrintView.showPage("first");
                    printJob.addObject(thePrintView);
                    thePrintView.pageNumber++;
                    // Loop through the following code until all pages are queued.
                    while (true) {
                        // Move the next page of data to the top of the print grid.
                        thePrintView.myDataGrid.nextPage();
                        thePrintView.showPage("last");
                        // If the page holds the remaining data, or if the last page
                        // was completely filled by the last grid data, queue it for printing.
                        // Test if there is data for another PrintDataGrid page.
                        if (!thePrintView.myDataGrid.validNextPage) {
                            // This is the last page; queue it and exit the print loop.
                            printJob.addObject(thePrintView);
                            break;
                        } else {
                            // This is not the last page. Queue a middle page.
                            thePrintView.showPage("middle");
                            printJob.addObject(thePrintView);
                            thePrintView.pageNumber++;
                        }
                    }
                }
                // All pages are queued; remove the FormPrintView control to free memory.
                FlexGlobals.topLevelApplication.removeElement(thePrintView);
            }
            // Send the job to the printer.
            printJob.send();
        }
        ]]>
    </fx:Script>

    <s:Panel title="DataGrid Printing Example"
            width="75%" height="75%"
            horizontalCenter="0" verticalCenter="0">
        <s:VGroup left="10" right="10" top="10" bottom="10">
            <mx:DataGrid id="myDataGrid" dataProvider="{dgProvider}">
                <mx:columns>
                    <mx:DataGridColumn dataField="Index"/>
                    <mx:DataGridColumn dataField="Qty"/>
                </mx:columns>
            </mx:DataGrid>

            <s:Label width="100%" color="blue"
                text="Specify the number of lines and click Fill Grid first. Then you can click Print."/>

            <s:TextInput id="dataItems" text="35"/>

            <s:HGroup>
                <s:Button id="setDP" label="Fill Grid" click="setdgProvider(int(dataItems.text));"/>
                <s:Button id="printDG" label="Print" click="doPrint();"/>
            </s:HGroup>
        </s:VGroup>
    </s:Panel>

</s:Application>
Posted by 1010
반응형


Flash CS3에서 Flex Component Skin 제작하기

[출처] http://blog.naver.com/ang_/30029082083

자세한 제작 내용은 위 출처를 참고해주세요. 여기서는 Flex Skin Templetes 자료와 준비 과정까지만을 포스팅 하겠습니다.

Flash CS3에서 Flex Component Skin을 제작하기 위해서는 직접 플래쉬로 구현하는 방법도 있겠지만 초보자들에겐 쉽지만은 않은 방법입니다. 그래서 좀 더 편한 방법으로 제공되어진게 바로 미리 제작되어진 Templetes를 이용하는 방법이 있습니다.

우선 제작하기 위해선 flex skin 파일을 다운로드 받으셔야 합니다.
다운로드 - http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex_skins#fxcompkit

위 사이트로 가시면 Flex Skin Design Extension for Flash에 있는 파일을 다운받으시기 바랍니다.

dlDownload for Windows and Macintosh (MXP, 4.44 MB) <--- 귀찮으신 분들은 여기를 클릭


(링크가 깨졌을 경우 아래 링크로 다운받으세요.)



를 다운 받으셨으면 이제 CS3 Extension Manager를 실행합니다.
Extension Manager은 아래 경로에 존재합니다.
C:\Program Files\Adobe\Adobe Extension Manager\Extension Manager.exe
Adobe Master Collection CS3 을 설치 하신 분들이라면
시작 → 모든프로그램 → Adobe Master Collection CS3 → Adobe Extension Manager CS3

(다운로드 받은 파일을 더블클릭하시면 자동으로 Extension Manager가 실행 되지만 만약 CS4를 같이 설치하신분이라면
CS4용 Adobe Extension Manager가 실행 되니 위에 나와있는 방법으로 실행하시면 됩니다.)


Extension Manager를 실행하시면 위와 같은 실행화면을 보실 수 있습니다.
 버튼을 클릭하여 다운받은
 파일을 선택하여 줍니다.


동의 창이 나오면 동의버튼을
  클릭합니다.


설치 화면이 나오고 설치 성공 화면이 나오면 확인 버틍을 클릭합니다.



Extension Manager를 종료하고 Flash CS3를 실행 시킵니다.



위 처럼 Flex Skins 라는 메뉴가 나오면 스킨 만들 준비 끝~~
그럼 이제 스킨 템플릿 파일을 열어 보겠습니다.


위와 같이 여러 콤포넌트들의 스킨을 제작할 수 있습니다.
여기서 flex_skins 파일을 선택합니다.


flex의 기본 콤포넌트의 스킨들이 모두 모아져 있습니다. 여기서 스킨을 수정 하여 swc 파일로 Export 시키셔서 flex에서 사용하시면 됩니다. 제작법과 flex에서 불러오는 법은 행복한앙님의 블로그에 자세히 나와 있으니 참고 하시기 바랍니다.
행복한앙님 블로그의 게시물 : http://blog.naver.com/ang_/30029082083

 

Posted by 1010
반응형

Adobe Flex 3 Help

Printing multipage output

You can print well-formatted multipage output under the following conditions:

  • When each control fits on a print page or less. You often encounter such jobs when printing a form with fixed-length fields.
  • When the printed output includes one or more PrintDataGrid controls that are too long to print on a single page, particularly if the control height might vary, depending on the data. A good example of this type of output is a customer order receipt, which starts with the customer information, has an indeterminate number of order line items, and ends with total information.

Printing known-length multipage output

If you know the length of each component in a multipage document, you can create a separate print layout component for each page you print, and specify each layout page in a separate addObject() method, as follows:

printJob.addObject(introPrintView, "ShowAll");
printJob.addObject(finDetailPrintView, "ShowAll");
printJob.addObject(hrDetailPrintView, "ShowAll");
printJob.addObject(summaryPrintView, "ShowAll");

Using the PrintDataGrid control for multipage grids

When a DataGrid control with many rows does not fit on a single screen in your application, you typically have scroll bars that let users view all the data. When you print the DataGrid control, the output is the same as the screen display. Therefore, if your DataGrid control has rows or columns that are not immediately visible, they do not print. If you replace the DataGrid control with a PrintDataGrid control that does not have a height specified (or has a large height), you print all the rows, but some rows could be partially printed on the bottom of one page and partially printed at the top of another, as you often see with HTML printout.

You can solve these problems by using the following features of the PrintDataGrid control. These features let you correctly print grids that contain multiple pages of data without splitting rows across pages:

sizeToPage property 

Makes the printed data grid contain only full rows.



nextPage() method 

Gets the next printable page of data.



validNextPage property 

Is true if printing the data requires an additional page.



Using the sizeToPage attribute to format pages

A PrintDataGrid page consists of the rows that are visible in the control's current view. Suppose, for example, that a PrintDataGrid control has a height of 130 pixels. The total height of each row and header is 30 pixels, and the control's data provider has 10 rows. In this situation, the printed PrintDataGrid page contains only three complete data rows, plus the header. The sizeToPage property specifies whether to include a fourth and partial data row.

The sizeToPage property, which is true by default, causes the PrintDataGrid control to remove any partially visible or empty rows and to resize itself to include only complete rows in the current view. For the data grid described in the preceding paragraph, when this property is true, the DataGrid shrinks to show three complete data rows, and no incomplete rows; if the attribute is false, the grid includes a partial row at the bottom.

The following properties provide information on page sizing that are affected by the sizeToPage property:

Property

Description

currentPageHeight

Contains the height of the grid, in pixels, that results if the sizeToPage property is true. If the sizeToPage property is true, the currentPageHeight property equals the height property.

originalHeight

Contains the grid height that results if the sizeToPage property is false. If the sizeToPage property is false, the originalHeight property equals the height property.

In most applications, you leave the sizeToPage attribute at its default value (true), and use the height property to determine the grid height.

The sizeToPage property does not affect the way the page breaks when a single PrintDataGrid control page is longer than a print page. To print multipage data grids without splitting rows, you must divide the grid items into multiple views by using the nextPage() method, as described in Using the nextPage() method and validNextPage property to print multiple pages.

Using the nextPage() method and validNextPage property to print multiple pages

The validNextPage property is true if the PrintDataGrid control has data beyond the rows that fit on the current print page. You use it to determine whether you need to format and print an additional page.

The nextPage() method lets you page through the data provider contents by setting the first row of the PrintDataGrid control to be the data provider row that follows the last row of the previous PrintDataGrid page. In other words, the nextPage() method increases the grid's verticalScrollPosition property by the value of the grid's rowCount property.

The following code shows a loop that prints a grid using multiple pages, without having rows that span pages:

// Queue the first page.
printJob.addObject(thePrintView);
// While there are more pages, print them.
while (thePrintView.myDataGrid.validNextPage) {
    //Put the next page of data in the view.
    thePrintView.myDataGrid.nextPage();
    //Queue the additional page.
    printJob.addObject(thePrintView);
}

The section Example: Printing with multipage PrintDataGrid controls shows how to use the nextPage() method to print a report with a multipage data grid.

Updating the PrintDataGrid layout

When you use a PrintDataGrid control to print a single data grid across multiple pages, you queue each page of the grid individually. If your application customizes each page beyond simply using the nextPage() method to page through the PrintDataGrid, you must call the validateNow() method to update the page layout before you print each page, as shown in Print output component.

Example: Printing with multipage PrintDataGrid controls

The following example prints a data grid in which you can specify the number of items in the data provider. You can, therefore, set the DataGrid control contents to print on one, two, or more pages, so that you can see the effects of different-sized data sets on the printed result.

The example also shows how you can put header information before the grid and footer information after the grid, as in a shipping list or receipt. It uses the technique of selectively showing and hiding the header and footer, depending on the page being printed. To keep the code as short as possible, the example uses simple placeholder information only.

The application consists of the following files:

  • The application file displays the form to the user, including TextArea and Button controls to set the number of lines and a Print button. The file includes the code to initialize the view, get the data, and handle the user's print request. It uses the FormPrintView MXML component as a template for the printed output.
  • The FormPrintView.mxml file formats the printed output. It has two major elements:
    • The print output template includes the PrintDataGrid control and uses two MXML components to format the header and footer contents.
    • The showPage() function determines which sections of the template to include in a particular page of the output, based on the page type: first, middle, last, or single. On the first page of multipage output, the showPage() function hides the footer; on the middle and last pages, it hides the header. On a single page, it shows both header and footer.
  • The FormPrintHeader.mxml and formPrintFooter.mxml files specify the contents of the start and the end of the output. To keep the application simple, the header has a single, static Label control. The footer displays a total of the numbers in the Quantity column. In a more complete application, the header page could have, for example, a shipping address, and the footer page could show more detail about the shipment totals.

The files include detailed comments explaining the purpose of the code.

Multipage print application file

The following code shows the multipage print application file:

<?xml version="1.0"?>
<!-- printing\MultiPagePrint.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    initialize="initData();">

    <mx:Script>
    <![CDATA[
        import mx.printing.*;
        import mx.collections.ArrayCollection;
        // Import the MXML custom print view control.
        import myComponents.FormPrintView;

        // Declare variables and initialize simple variables.
        // The dgProvider ArrayCollection is the DataGrid data provider.
        // It must be bindable because you change its contents dynamically.
        [Bindable]
        public var dgProvider:ArrayCollection;
        public var footerHeight:Number = 20;
        public var prodIndex:Number;
        public var prodTotal:Number = 0;
        
        // Data initialization, called when the application initializes.
        public function initData():void {
            // Create the data provider for the DataGrid control.
            dgProvider = new ArrayCollection; 
        }
        
        // Fill the dgProvider ArrayCollection with the specified items.
        public function setdgProvider(items:int):void { 
            // First initialize the index and clear any existing data.
            prodIndex=1;
            dgProvider.removeAll();
            
            // Fill the ArrayCollection, and calculate a product total.
            // For simplicity, it increases the Index field value by
            // 1, and the Qty field by 7 for each item.
            for (var z:int=0; z<items; z++) 
            {
                var prod1:Object = {};
                prod1.Qty = prodIndex * 7;
                prod1.Index = prodIndex++;
                prodTotal += prod1.Qty; 
                dgProvider.addItem(prod1);
            }
        }

        // The function to print the output.
        public function doPrint():void {
            // Create a FlexPrintJob instance.
            var printJob:FlexPrintJob = new FlexPrintJob();
            
            // Start the print job.
            if (printJob.start()) {
                // Create a FormPrintView control 
                // as a child of the application.
                var thePrintView:FormPrintView = new FormPrintView();
                addChild(thePrintView);
                
                // Set the print view properties.
                thePrintView.width=printJob.pageWidth;
                thePrintView.height=printJob.pageHeight;
                thePrintView.prodTotal = prodTotal;
                
                // Set the data provider of the FormPrintView 
                // component's DataGrid to be the data provider of 
                // the displayed DataGrid.
                thePrintView.myDataGrid.dataProvider = 
                    myDataGrid.dataProvider;
                
                // Create a single-page image.
                thePrintView.showPage("single");
                
                // If the print image's DataGrid can hold all the  
                // data provider's rows, add the page to the print job. 
                if(!thePrintView.myDataGrid.validNextPage)
                {
                    printJob.addObject(thePrintView);
                }
                // Otherwise, the job requires multiple pages.
                else
                {
                    // Create the first page and add it to the print job.
                    thePrintView.showPage("first");
                    printJob.addObject(thePrintView);
                    thePrintView.pageNumber++;
                    
                    // Loop through the following code 
                    // until all pages are queued.
                    while(true)
                    {
                        // Move the next page of data to the top of 
                        // the PrintDataGrid.
                        thePrintView.myDataGrid.nextPage();

                        // Try creating a last page.
                        thePrintView.showPage("last");  

                        // If the page holds the remaining data, or if 
                        // the last page was completely filled by the last  
                        // grid data, queue it for printing.
                        // Test if there is data for another 
                        // PrintDataGrid page.
                        if(!thePrintView.myDataGrid.validNextPage) 
                        {
                            // This is the last page; 
                            // queue it and exit the print loop.
                            printJob.addObject(thePrintView);
                            break;
                        }
                        else
                        // This is not the last page. Queue a middle page. 
                        {
                            thePrintView.showPage("middle");
                            printJob.addObject(thePrintView);
                            thePrintView.pageNumber++;
                        }
                    }
                }
                // All pages are queued; remove the FormPrintView 
                // control to free memory.
                removeChild(thePrintView);
            }
            // Send the job to the printer.
            printJob.send();
        }
    ]]>
    </mx:Script>

    <!-- The form that appears on the user's system.-->
    <mx:Form id="myForm" width="80%">
        <mx:FormHeading label="Product Information"/>
                <mx:DataGrid id="myDataGrid" dataProvider="{dgProvider}">
                <mx:columns>
                    <mx:DataGridColumn dataField="Index"/>
                    <mx:DataGridColumn dataField="Qty"/>
                </mx:columns>
            </mx:DataGrid>
        <mx:Text width="100%" 
            text="Specify the number of lines and click Fill Grid first. 
            Then you can click Print."/>
        <mx:TextInput id="dataItems" text="35"/>
        <mx:HBox>
            <mx:Button id="setDP" 
                label="Fill Grid"
                click="setdgProvider(int(dataItems.text));"/>
            <mx:Button id="printDG" 
                label="Print" 
                click="doPrint();"/>
        </mx:HBox>
    </mx:Form>
</mx:Application>

The executing SWF file for the previous example is shown below:

 

Print output component

The following lines show the FormPrintView.mxml custom component file:

<?xml version="1.0"?>
<!-- printing\myComponents\FormPrintView.mxml -->
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:MyComp="myComponents.*" 
    backgroundColor="#FFFFFF"
    paddingTop="50" paddingBottom="50" paddingLeft="50">

    <mx:Script>
        <![CDATA[
            import mx.core.*
            
            // Declare and initialize the variables used in the component.
            // The application sets the actual prodTotal value.
            [Bindable]
            public var pageNumber:Number = 1;
            [Bindable]
            public var prodTotal:Number = 0;

            // Control the page contents by selectively hiding the header and
            // footer based on the page type.
            public function showPage(pageType:String):void {
                if(pageType == "first" || pageType == "middle") {
                    // Hide the footer.
                    footer.includeInLayout=false;
                    footer.visible = false;
                }
                if(pageType == "middle" || pageType == "last") {
                    // The header won't be used again; hide it.
                    header.includeInLayout=false;
                    header.visible = false;
                }
                if(pageType == "last") {
                    // Show the footer.
                    footer.includeInLayout=true;
                    footer.visible = true;
                }
                //Update the DataGrid layout to reflect the results.
                validateNow();
            }
        ]]>
    </mx:Script>

    <!-- The template for the printed page, 
        with the contents for all pages. -->
    <mx:VBox width="80%" horizontalAlign="left">
        <mx:Label text="Page {pageNumber}"/>
    </mx:VBox>
    <MyComp:FormPrintHeader id="header"/>
    
    <!-- The sizeToPage property is true by default, so the last
        page has only as many grid rows as are needed for the data. -->
    <mx:PrintDataGrid id="myDataGrid" width="60%" height="100%">
    <!-- Specify the columns to ensure that their order is correct. -->
        <mx:columns>
            <mx:DataGridColumn dataField="Index" />
            <mx:DataGridColumn dataField="Qty" />
        </mx:columns>
    </mx:PrintDataGrid>
    
    <!-- Create a FormPrintFooter control 
        and set its prodTotal variable. -->
    <MyComp:FormPrintFooter id="footer" pTotal="{prodTotal}"/>
</mx:VBox>

Header and footer files

The following lines show the FormPrintHeader.mxml file.

<?xml version="1.0"?>
<!-- printing\myComponents\FormPrintHeader.mxml -->
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" 
    width="60%"
    horizontalAlign="right" >

    <mx:Label text="This is a placeholder for first page contents"/>
</mx:VBox>

The following lines show the FormPrintFooter.mxml file:

<?xml version="1.0"?>
<!-- printing\myComponents\FormPrintFooter.mxml -->
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" 
    width="60%"
    horizontalAlign="right">
    
    <!-- Declare and initialize the product total variable. -->
    <mx:Script>
        <![CDATA[
            [Bindable]
            public var pTotal:Number = 0;
        ]]>
        </mx:Script>

    <mx:Label text="Product Total: {pTotal}"/>
</mx:VBox>

Using the PrintAdvancedDataGrid control

The PrintAdvancedDataGrid and PrintOLAPDataGrid controls provide the same functionality for the AdvancedDataGrid and OLAPDataGrid controls as the PrintDataGrid control does for the DataGrid control. For more information, see Using the PrintDataGrid control for multipage grids.

The following example uses the PrintAdvancedDataGrid control to print an instance of the AdvancedDataGrid control.

<?xml version="1.0"?>
<!-- printing\ADGPrint.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            import mx.printing.*;
            import mx.collections.ArrayCollection;
            import mx.printing.PrintAdvancedDataGrid;
                    
            include "SimpleHierarchicalData.as";

            // Create a PrintJob instance.
            private function doPrint():void {
                // Create an instance of the FlexPrintJob class.
                var printJob:FlexPrintJob = new FlexPrintJob();
                
                // Initialize the PrintAdvancedDataGrid control.
                var printADG:PrintAdvancedDataGrid = 
                    new PrintAdvancedDataGrid();
                // Exclude the PrintAdvancedDataGrid control from layout.
                printADG.includeInLayout = false;
                printADG.source = adg;

                // Add the print-specific control to the application.                
                addChild(printADG);
                
                // Start the print job.
                if (printJob.start() == false) {                
                    // User cancelled print job.
                    // Remove the print-specific control to free memory.                
                    removeChild(printADG);
                    return;
                }

                // Add the object to print. Do not scale it.
                printJob.addObject(printADG, FlexPrintJobScaleType.NONE);

                // Send the job to the printer.
                printJob.send();

                // Remove the print-specific control to free memory.                
                removeChild(printADG);
            }
        ]]>
    </mx:Script>

    <mx:VBox id="myVBox"
        width="100%" height="100%">
        <mx:AdvancedDataGrid id="adg"
            width="100%" height="100%">
            <mx:dataProvider>
                <mx:HierarchicalData source="{dpHierarchy}"/>
            </mx:dataProvider>
            <mx:columns>
                <mx:AdvancedDataGridColumn dataField="Region"/>
                <mx:AdvancedDataGridColumn dataField="Territory_Rep"
                    headerText="Territory Rep"/>
                <mx:AdvancedDataGridColumn dataField="Actual"/>
                <mx:AdvancedDataGridColumn dataField="Estimate"/>
            </mx:columns>
        </mx:AdvancedDataGrid>    

        <mx:Button id="myButton" 
            label="Print" 
            click="doPrint();"/>
    </mx:VBox>    
</mx:Application>

The executing SWF file for the previous example is shown below:

 

This example uses the PrintAdvancedDataGrid.source property to initialize the PrintAdvancedDataGrid control from the AdvancedDataGrid control.

To support the AdvancedDataGrid control, the PrintAdvancedDataGrid control adds the following properties not available in the PrintDataGrid control:

Property

Description

allowInteractions

If true, allow some interactions with the control, such as column resizing, column reordering, and expanding or collapsing nodes. The default value is false.

displayIcons

If true, display the folder and leaf icons in the navigation tree. The default value is true.

source

Initialize the PrintAdvancedDataGrid control and all of its properties from the specified AdvancedDataGrid control.

validPreviousPage

Indicates that the data provider contains data rows that precede the rows that the PrintAdvancedDataGrid control currently displays.

 



Posted by 1010
반응형

PrintDataGrid,percentHeight and multipage layouts

Categories: actionscript, flex
Written By: sebi

I rarely had to create any complex layouts for printing with Flex, until now.
The layout has to have different pages, with different elements on them. The issue is that the PrintDataGrid calculated it’s height right (well, almost) at the first page, but maintained this value to the rest of the pages – instead of recalculating based on that structures.

There is a chapter in the Flex help discussing this scenario: Using the PrintDataGrid control for multipage grids.

I implemented the whole print layout view based on this description, and quickly realized that even the result is not exactly what I wanted.

Print result

Print result

The help suggest something that sounds relevant to this issue, but it didn’t solve my problem.

When you use a PrintDataGrid control to print a single data grid across multiple pages, you queue each page of the grid individually. If your application customizes each page beyond simply using the nextPage() method to page through the PrintDataGrid, you must call the validateNow() method to update the page layout before you print each page, as shown in Print output component.

The root of the problem is that the PrintDataGrid’s setActualSize contains an interesting line, which resets the percentHeight of the grid to NaN. As a result, the parent container of the grid won’t resize the grid, even if it’s layout changes, and we call validateNow().

	/**
	 *  @private
	 *  setActualSize() is overridden to update _originalHeight.
	 */
	override public function setActualSize(w:Number, h:Number):void
	{
		if (!isNaN(percentHeight))
		{
			_originalHeight = h;
			super.percentHeight = NaN;
			measure();
			h = measuredHeight;
		}
 
		super.setActualSize(w, h);
 
		invalidateDisplayList();
 
		if (sizeToPage && !isNaN(explicitHeight))
			explicitHeight = NaN;
	}

The whole resizing cycle of the grid seemed to be quite complex, so I decided to look for an easier solution than trying to extend-override some of it’s steps, so ended up with the following:

	public function showPage( pageType:String ):void 
	{
		switch( pageType )
		{
			case "first":
			case "single":
				meetingInfoExtended.visible 		= true;
				meetingInfoExtended.includeInLayout	= true;
				meetingInfo.visible 		= false;
				meetingInfo.includeInLayout= false;						
				break;
			case "middle":
			case "last":
				meetingInfoExtended.visible 		= false;
				meetingInfoExtended.includeInLayout	= false;
				meetingInfo.visible 		= true;
				meetingInfo.includeInLayout= true;						
				break; 
		}
		printingGrid.percentHeight = 100;
		validateNow();
	}

Basically re-apply the percentHeight setting in every paging, forcing the grid to recalculate it’s size.

There was another small glitch, what caused a scrollbar to appear in the print layout – at least it tried to appear. I have a multi-line text there, an mx:Text, and I think the text couldn’t calculate it height fast enough, but if I didn’t pass a fixed height to it, the grid miss-calculated it’s height. But only the text caused this problem with the percent heights, other components could handle it.

One Response to “PrintDataGrid,percentHeight and multipage layouts”

  1. Robert Cesaric Says:

    Thanks for post.. We were just building a print view that head custom header/footer and had the same issue. Your percentHeight fix worked perfectly.

    We’re still noticing issues priting with the datagrid variableRowHeight but I’m much happier getting this bug fixed first. Thx!

 

Posted by 1010
반응형

How to Export into PDF/ / Flex + PDF / Generate PDF From Flex

To generate PDF files from Flex all you need is some external liberies like AlivePDF.swc or generatePdf.swc.
Im my Example i use Alive PDF as its Free and easy to use.
Get AlivePDF.swc
use following save structure to add images or Ui Container to add in PDF file
Get AlivePDF Here : AlivePDF
protected function savePDF():void
{
var myPDFEncoder:PDF = new PDF (Orientation.LANDSCAPE, Unit.MM);
myPDFEncoder.setDisplayMode(Display.FULL_PAGE);
myPDFEncoder.addPage();
myPDFEncoder.addImage(ChartDetails,null,0,0,myPDFEncoder.getMargins().width,myPDFEncoder.getMargins().height);

var bytes:ByteArray = myPDFEncoder.save(Method.LOCAL);
var fx:FileReference = new FileReference();
fx.save(bytes,"ABC.pdf");
}


Posted by 1010