Flex, Getting XML attributes values.

If the XML format is like :

<root>

<banana>

<apple>

<description language=”EN” title=”title EN” id=”1″>Hello</description>

<description language=”DE” title=”title DE” id=”1″>Hello 2</description>

</apple>

<apple>

<description language=”EN” title=”title EN” id=”1″>Hello</description>

<description language=”DE” title=”title DE” id=”1″>Hello 2</description>

</apple>

</banana>

<apple>

<description language=”EN” title=”title EN” id=”1″>Hello</description>

<description language=”DE” title=”title DE” id=”1″>Hello 2</description>

</apple>

</root>

then….to parse title attribute value….do the following things:

<mx:Application xmlns:mx=http://www.adobe.com/2006/mxml initialize=”LoadXML();”>

<mx:XML id=”urlPath” source=”assets/xmlfile.xml”/>

</mx:Application>

[Bindable]

private var fruitsArray:ArrayCollection = new ArrayCollection();

public function LoadXML():void{

//Alert.show(“fruits====”+urlPath..apple.length());

for(var i:int;i < urlPath.banana.apple.length();i++){

var appleString:String = urlPath.banana.apple[i].description[0].@title;

fruitsArray.addItemAt({fruitsTitle:appleString},i);

}

}

<mx:DataGrid dataProvider=”{fruitsArray}” width=”100%” height=”100%” verticalGridLines=”false”>

<mx:columns>

<mx:DataGridColumn headerText=”Fruits” dataField=”fruitsTitle” />

</mx:columns>

</mx:DataGrid>

 

 

 

Flex Certification

http://office.realeyesmedia.com/blogs/jun/samples/certification/Flex20Blueprint.htm

http://www.adobe.com/devnet/flex/articles/flex_certification.html

http://partners.adobe.com/public/en/ace/ACE_Exam_Guide_FlexAIR.pdf

http://lucamezzalira.com/2008/12/17/i-become-adobe-certified-expert-on-flex-3-with-air-i-suggest-how-to-prepare-the-exam/

http://flex50.blogspot.com/

http://flexcertification.wordpress.com/

http://software.pxldesigns.com/attest/index.php

Adobe Flex 2.0 Developer

Certification Examination Specification

Introduction

 

This is an exam specification for Adobe Flex Developer. The specification defines the content of the exam-

ination and the relevant background and experience suggested to become a certified Adobe Flex 2.0

Developer.

 

Exam Purpose

 

This examination is based upon the most critical job activities an Adobe Flex Developer performs. The

skills and knowledge certified by this examination represent a professional level of expertise for a certified

individual. The critical job activities of a Flex Developer are:

•        Recognize effective use and reuse of code in Adobe Flex programming for application develop-

ment, exception handling, troubleshooting, forms, and work with complex data types.

•        Recognize key concepts in database interactions, client state management, and data exchange.

 

Background and Experience

 

The test specification is intended to address the knowledge and skill areas that demonstrate competency as an Adobe Flex Developer.

 

The knowledge level required is defined as having experience with non-code based software that uses

visual objects in development and the following general suggested prerequisites:

 

• Two or more years experience with one or more programming languages.

• Experience in the applied use of an enterprise-level database server.

• One or more years of experience creating applications using Adobe Flex.

  The Adobe instructor-led training courses that will assist in exam preparation are:

• Adobe Flex 2: Developing Rich Internet Applications

• Adobe Flex 2: Programming the Visual Experience

• Adobe Flex 2: Creating Dashboard Applications

• Using ActionScript 3 (final title TBD)

• Advanced Adobe Flex Data Services 2 (final title TBD)

 

The skills and knowledge measured by this examination are derived from an understanding of the jobs of

current Adobe Flex Developers. A team of highly-qualified Adobe Flex developer experts defined the test

content and wrote the test items.

 

Note: This examination blueprint includes weighting, test objectives, and example content. Example topics and concepts are included to clarify the test objectives; they should not be construed as a com-prehensive listing of the content of this examination.

 

 

 

 

 

 

 

Exam Structure

The knowledge domains measured by this examination and the extent to which they are represented in the

examination are shown in the table below.

 

Domain                                                                                              % of Examination

1.0 Flex Application User Interface (UI) Creation                                25%

2.0 Flex System Architecture and Design                                              20%

3.0 Flex Application Programming Fundamentals                                35%

4.0 Interacting with Remote Data and Flex Applications                    20%

 

Total                                                                                                               100%

 

 

Response Limits

The examinee selects, from four (4) or more response options, the option(s) that best completes the state-

ment or answers the question. Distracters or wrong answers are response options that examinees with

incomplete knowledge or skill would likely choose, but are generally plausible responses fitting into the

content area defined by the test objective.

 

Test item formats used in this examination are:

 

Multiple-choice: The examinee selects one option that best answers the question or completes a statement.

 

Multiple-response: The examinee selects more than one option that best answers the question or com-

pletes a statement. The question will state how many options are correct; i.e., (Choose TWO). 

 

Sample Directions: Read the statement or question and from the response options, select only the

option(s) that represent the most correct or best answer(s) given the information provided.

 

 

1.0   Flex Application User Interface (UI) Creation

 

1.1 Identify and describe the basic UI controls used in a Flex application.

- Label, Text, TextInput, Button, DataGrid, etc.

 

Enabling Sub-skills:

• Identify how to use the following with controls: labelFunction, item editor,

dataProvider, and itemRenderers.

• Identify how to display data by using a DataGrid and DataGridColumns.

• Identify how to display data by using a list-based controls (i.e., DataGrid, List,

ComboBox, HorizontalList, TileList).

 

1.2 Identify the purpose of UI containers and when to use them.

Enabling Sub-skills:

• Recognize basic containers and their use (Application, HBox, VBox, Canvas).

• Recognize navigator containers and their use (TabNavigator, Accordion, View-

Stack, TabBar, LinkBar).

• Recognize layout containers and their use (Panel, ControlBar, Form, Applica-

tionControlBar, Tile).

• Recognize constraint-based layout containers and their use.

 

1.3 Identify how to change the look and feel of a design by using API styles and style

sheets.

 

1.4 Recognize how to customize changes, control-related presentation layouts and navi-

gation in an application by using view states, and using transitions and effects.

 

2.0   Flex System Architecture and Design

2.1 Recognize how UML and Use Cases are used in object-oriented design.

 

2.2 Identify the relationship of design patterns with respect to system architecture.

• Model, View, Controller, Singleton, Assembler, Data Access Object (DAO), and

Value Object/Transfer Object/Bean.

 

2.3 Recognize and describe event-based programming model in events.

• Event bubbling, custom event classes, and event listening

 

2.4 Identify how to build loosely-coupled components.

 

2.5 Recognize how Inheritance, Encapsulation, and Polymorphism works.

 

2.6 Recognize the structure of a J2EE architecture.

Enabling Sub-skills:

• Recognize how and why to use .war and .jar files.

• Identify and describe the directory structure of a J2EE application.

• Recognize the characteristics of a Java class used by a Flex application.

• Given a Java interface, describe that interface. Interfaces include: JMS, JTS,

JNDI, Hibernate, and JDBC.

• Describe the use of servlets and Java Server Pages.

 

 

3.0   Flex Application Programming Fundamentals

 

3.1 Identify the properties and relationships between classes and objects and how they

work in Flex.

 

Enabling Sub-skills:

• Identify class types; abstract, dynamic, final, inner.

• Recognize the difference between a class and an interface.

• Recognize the purpose of access modifier and when to use that modifier (public,

private, protected, internal, static).

• Identify the purpose and how to use properties of classes and objects.

• Identify the differences between variables, properties, and constants.

• Identify the purpose and how to use methods.

• Recognize how bindings are used to access values of objects.

• Format data by using built-in and custom formatter classes. Formatter classes

include: NumberFormatter, CurrencyFormatter, DateFormatter.

 

3.2 Identify how to display data in Flex.

Enabling Sub-skills:

• Recognize how to use the IViewCursor interface to locate, add, remove, and

bookmark data in a collection.

 

3.3 Identify how to manipulate data in Flex.

Enabling Sub-skills:

• Store complex data by using Collection classes. Collection classes include:

ArrayCollection, XMLListCollection.

• Filter data by using a filter function.

• Sort data by using the Sort class and associated SortField objects.

 

3.4 Recognize how to validate data by using built-in and custom validator classes.

(NumberValidator, CurrencyValidator, CreditCardValidator, DateValidator)

Enabling Sub-skills:

• Identify how to create a custom validator by using regular expressions.

 

3.5 Recognize how to create and use ActionScript classes.

Enabling Sub-skills:

• Identify how to use the package and class keywords to create an ActionScript

class.

• Recognize how to use a constructor in an ActionScript class.

• Identify how to create properties and methods in an ActionScript class.

 

3.6 Identify the purpose and uses of handling events in Flex.

Enabling Sub-skills:

• Identify the purpose of user events; i.e., click, change, mouseOver.

• Identify the purpose of system events; i.e., creationComplete, initialize, show.

• Recognize how to create an event handler (inline, in an ActionScript function, in

an external file).

• Identify the purpose of custom events.

• Recognize how to create a custom event class.

• Identify how to declare, dispatch, and handle a custom event.

 

3.7 Recognize how to use XML data in Flex.

Enabling Sub-skills:

• Recognize how to access attributes and elements of XML documents by using

E4X operators (e.g., dot, parentheses, attribute, and descendant accessor).

• Recognize how to populate a Tree control with XML data.

• Identify how to store XML data by using XML data structures (XMLList,

XMLListCollection).

 

3.8 Recognize how to create and use custom components in Flex.

Enabling Sub-skills:

• Identify how to use and when to use custom components.

• Identify the advantages of custom components.

• Recognize how to create a custom component by using a control as a base tag

and using a container as a base tag.

• Identify how to create properties and methods in a custom component.

• Recognize how to Instantiate a custom component.

• Recognize how to use the properties and methods of an instantiated custom

component.

• Recognize how to dispatch data from a custom component by using a custom

event.

 

3.9 Recognize how to display data using different chart types, formats, and legends.

Enabling Sub-skills:

• Recognize data structures for charting.

• Identify chart series.

• Identify how to create and use chart legends.

• Identify how to format chart axes.

• Identify how to format data tips.

• Recognize chart specific formatting; i.e., Line/Area, Pie/Doughnut.

• Identify how to create charts with multiple data series.

• Recognize ranges selection for axes.

• Recognize adding/removing series dynamically.

• Identify how to use graphical renderers.

• Identify how to style chart components.

• Identify how to style chart gridlines.

• Identify how to style chart axes.

 

 

4.0   Interacting with Remote Data and Flex Applications

 

4.1 Recognize how to use Remote Procedure Call (RPC) services.

Enabling Sub-skills:

• Identify how to retrieve remote data by using the HTTPService.

• Identify how to retrieve remote data by using the WebService.

• Identify how to retrieve remote data by using the RemoteObject.

 

4.2 Recognize how to manage data using Flex Data Services (FDS).

Enabling Sub-skills:

• Recognize how to install and configure Flex Data Services.

• Recognize the functionality and features of Flex Data Services; i.e., Data Man-

agement Service, Message Service, and RPC services.

• Identify how to configure destinations, adapters, and channels.

• Recognize how to use the Data Management service to synchronize data

between clients and servers.

• Identify how to publish, retrieve, and process messages.

• Recognize how to use FDS to implement occasionally connected clients.

• Recognize how to use FDS to handle paging of large datasets.

Flex, Changing the text color of Accordian Tabs.

<?xml version=”1.0″?>
<!– containers\navigators\AccordionStyling.mxml –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”
    width=”600″
    height=”600″
    creationComplete=”setButtonStyles();”>

    <mx:Script>
        <![CDATA[
            public function setButtonStyles():void {
                comp.getHeaderAt(0).setStyle('color', 0xAA0000);
                comp.getHeaderAt(1).setStyle('color', 0x00AA00);
            }
        ]]>
    </mx:Script>

    <mx:Accordion id=”comp”>
        <mx:VBox label=”First VBox”>
            <mx:TextInput/>
            <mx:Button label=”Button 1″/>
        </mx:VBox>
        <mx:VBox label=”Second VBox”>
            <mx:TextInput/>
            <mx:Button label=”Button 2″/>
        </mx:VBox>
    </mx:Accordion>
</mx:Application>

http://livedocs.adobe.com/flex/3/html/help.html?content=navigators_5.html

Flex, Creating Accordian dynamically and placing datagrid inside accordian.

http://blog.flexexamples.com/tag/accordion/

Flex, Identify Parent or Child Item on click on Tree Item.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/05/opening-branches-by-clicking-rows-in-a-tree-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.collections.ICollectionView;
            import mx.events.ListEvent;

            private function tree_itemClick(evt:ListEvent):void {
                var item:Object = Tree(evt.currentTarget).selectedItem;
                if (tree.dataDescriptor.isBranch(item)) {
                    tree.expandItem(item, !tree.isItemOpen(item), true);
                }
            }

            private function tree_labelFunc(item:XML):String {
                var children:ICollectionView;
                var suffix:String = "";
                if (tree.dataDescriptor.isBranch(item)) {
                    children = tree.dataDescriptor.getChildren(item);
                    suffix = " (" + children.length + ")";
                }
                return item[tree.labelField] + suffix;
            }
        ]]>
    </mx:Script>

    <mx:XML id="dp">
        <root>
            <folder label="One">
                <folder label="One.A">
                    <item label="One.A.1" />
                    <item label="One.A.2" />
                    <item label="One.A.3" />
                    <item label="One.A.4" />
                    <item label="One.A.5" />
                </folder>
                <item label="One.1" />
                <item label="One.2" />
            </folder>
            <folder label="Two">
                <item label="Two.1" />
                <folder label="Two.A">
                    <item label="Two.A.1" />
                    <item label="Two.A.2" />
                </folder>
            </folder>
        </root>
    </mx:XML>

    <mx:Tree id="tree"
            dataProvider="{dp}"
            showRoot="false"
            labelField="@label"
            labelFunction="tree_labelFunc"
            width="300"
            rowCount="6"
            itemClick="tree_itemClick(event);" />

</mx:Application>

http://blog.flexexamples.com/2008/04/05/opening-branches-by-clicking-rows-in-a-tree-control-in-flex/

Flex, How to automatically close open branches of a Flex Tree control.

<?xml version=“1.0″ encoding=“utf-8″?>

<mx:Application

 

 xmlns:mx=“http://www.adobe.com/2006/mxml”

 layout=“absolute”

 width=“200″

 height=“300″

 >

 

 <mx:Script>

 

  <![CDATA[

 

  import mx.collections.XMLListCollection;

  import mx.events.TreeEvent;

  import mx.controls.Tree;

  import mx.events.ListEvent;

 

  private var dpx:XML = <nav>

   

   <node label="Womens">

    <node label="Flora by Gucci" url="assets/swf/movies/flora.swf" />

    <node label="Gucci by Gucci" url="assets/swf/movies/gucci.swf" />

    <node label="Classics" url="assets/swf/movies/classics.swf" >

     <node label="Classic 1" url="http://gucci.com/class/classic1.html" />

     <node label="Classic 2" url="http://gucci.com/class/classic1.html" />

     <node label="Classic 3" url="http://gucci.com/class/classic1.html" />

    </node>

   </node>

   

   <node label="Mens">

    <node label="Pour Homme" url="assets/swf/movies/ph.swf" >

     <node label="Pour Homme 1" url="http://gucci.com/ph/classic1.html" />

     <node label="Pour Homme 2" url="http://gucci.com/ph/classic2.html" />

    </node>

   </node>

   

  </nav>;

 

  private var dp:XMLListCollection = new XMLListCollection(dpx.children());

 

  private function treeItemClick(e:ListEvent):void

  {

               var item:Object = Tree(e.currentTarget).selectedItem;

               

               /*

                Open/close the selected item if a branch

               */

               if (tree.dataDescriptor.isBranch(item))

               {  

                   tree.expandItem(item,!tree.isItemOpen(item),false,true);

               }

               else

               {

                // Clicked on an item -- DO STUFF!

               }

           }

           

           /*

            Function for accessing the Root item of the Tree

           */

           private function getRoot(childObj:Object):Object

           {

            var parentObj:Object = tree.getParentItem(childObj);

            if(parentObj != null) return getRoot(parentObj);

            else return childObj;

           }

           

           /*

            Close the branch if the open item is not in it

           */

           private function closeOpenItems(e:TreeEvent):void

           {

            var item:Object = e.item;

           

            for each(var i:Object in tree.openItems)

               {

                if(XML(getRoot(i)).@label != XML(getRoot(item)).@label)

                {

                 if(i!=item) tree.expandItem(i,false);

                }

               }

           }  

 

 ]]>

 </mx:Script>

 

 <mx:Tree

 

  id=“tree”

  width=“200″

  height=“300″

  dataProvider=“{dp}”

  labelField=“@label”

  itemClick=“treeItemClick(event)”

  itemOpen=“closeOpenItems(event)”

 

  />

 

</mx:Application>

http://blog.lyraspace.com/2009/03/31/how-to-automatically-close-open-branches-of-a-flex-tree-control/

 

Determining which item was clicked in a Flex LinkBar control

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/16/determining-which-item-was-clicked-in-a-flex-linkbar-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.events.ItemClickEvent;
            import mx.utils.ObjectUtil;

            private function linkBar_itemClick(evt:ItemClickEvent):void {
                Alert.show("index: " + evt.index + "n" +
                            "label: " + evt.label + "n" +
                            "item: " + "n" +
                            ObjectUtil.toString(evt.item),
                            evt.type);
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="One" data="1" custom="cougar" />
        <mx:Object label="Two" data="2" custom="rhino" />
        <mx:Object label="Three" data="3" custom="elephant" />
        <mx:Object label="Four" data="4" custom="penguin" />
    </mx:Array>

    <mx:LinkBar id="linkBar"
            dataProvider="{arr}"
            itemClick="linkBar_itemClick(event);" />

</mx:Application>

http://blog.flexexamples.com/2008/01/16/determining-which-item-was-clicked-in-a-flex-linkbar-control/

Flex, Triggering effects when a container is resized

http://blog.flexexamples.com/2007/09/23/triggering-effects-when-a-container-is-resized/

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/23/triggering-effects-when-a-container-is-resized/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function sizePanel(w:uint, h:uint):void {
                panel.width = w;
                panel.height = h;
            }
        ]]>
    </mx:Script>

    <mx:Resize id="resize" />

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="160x160"
                click="sizePanel(160, 160);" />
        <mx:Button label="240x160"
                click="sizePanel(240, 160);" />
        <mx:Button label="160x240"
                click="sizePanel(160, 240);" />
        <mx:Button label="320x240"
                click="sizePanel(320, 240);" />

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

        <mx:Label text="w:{panel.width}, h:{panel.height}" />
    </mx:ApplicationControlBar>

    <mx:Panel id="panel"
            title="title"
            status="status"
            width="320"
            height="240"
            resizeEffect="{resize}">
        <mx:Accordion id="accordion"
                historyManagementEnabled="false"
                width="100%"
                height="100%">
            <mx:VBox label="Shipping Information" />
            <mx:VBox label="Billing Information" />
        </mx:Accordion>
        <mx:ControlBar id="cb">
            <mx:Button />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>

Using SVN subversioning with Flex builder 3.0

http://www.flashmagazine.com/tutorials/detail/setting_up_subversion_with_adobe_flex_3/

http://sudhahariharan.wordpress.com/2007/09/12/using-svn-subversioning-with-flex-builder/

Flex, How to load animated GIFs using Adobe Flex

http://flexology.wordpress.com/2008/09/30/loadinganimated_gif_in_flex/

http://groups.google.com/group/flex_india/browse_thread/thread/eff4e02c88aeed50