Flex Popup Window

 This is about how a popup window can be created to appear to the right side, with a mouse click. I have used a button bar in this code sample which would be positioned vertically and contain an image icon. Further, the button bar will dispatch an item clicked event when any of it's items is clicked. What appears subsequently is a tiled window, that would dispatch an event to hide itself when exit (x) is clicked.

 The methods to be executed when events are fired are written in a separate action script, my_action_script.as which is included in my mxml file with the line, <mx:Script source="my_action_script.as"/>. 

===================================================================

 <!--
     Code that is not relevant is omitted.
-->
<mx:Script source="my_action_script.as"/>

<mx:Array id="buttons">
        <mx:Object icon="@Embed(source='images/my_image.png')" desc="test"/>   
 </mx:Array>

 <!--
     Code that is not relevant is omitted.
-->
<mx:ButtonBar height="100%" width="2%" verticalGap="2" direction="vertical" id="buttonBar" dataProvider="{buttons}" itemClick="buttonBar_itemClick(event);" paddingTop="0" paddingBottom="{this.height - 75}" />
               
            <s:PopUpAnchor height="{buttonBar.height}" width="0"
                       popUpPosition="right" id="popAnc">
                  <s:TitleWindow id="title_window"                                                              title="XXX"   close="popUpAnchorCloseHandler(event);">
                    <mx:Panel id="my_panel" height="{buttonBar.height - acb.height}" 
                              width="{acb.width/4}" title="my panel" alpha="1">
                        <!-- add items to the panel here -->
                    </mx:Panel>
                </s:TitleWindow>
            </s:PopUpAnchor>

 <!--
     Code that is not relevant is omitted.
-->

===================================================================

 First, an array with one object, having an icon is defined. This array is the data provider of the button bar. The direction of the button bar is vertical. If an item of the button bar is clicked (in this case there is only one item) the method, buttonBar_itemClick(e:ItemClickEvent) will be called (since it is defined as itemClicked attribute).

 Popup anchor is the component used for popup. It can be customized by introducing where to popup with height, width and popUpPosition attributes. The window will appear to the right as stated in popUpPosition. This UI component engulfs a title window containing a panel. The title window will trigger popUpAnchorCloseHandler(e: CloseEvent) method as stated for it's close attribute.

 Actionscript code segments pertinent to the example are posted below.

===================================================================


/**
     * This is called when an item of the button bar is clicked.
     */
    private function buttonBar_itemClick(e:ItemClickEvent):void {
        var message:String = ObjectUtil.toString(e.item);
        if (message.indexOf("test1") != -1) {
            // open the pop-up anchor.
            FlexGlobals.topLevelApplication.popAnc.displayPopUp = true;
        }
    }

    /**
     * This is called when the title window's close event is fired.
     * Pop up anchor is closed here.
     */
    private function popUpAnchorCloseHandler(e: CloseEvent): void {
        FlexGlobals.topLevelApplication.popAnc.displayPopUp = false;
    }

===================================================================

 The first method, which is invoked when the item is clicked, converts the item into a string format and checks if "test1" is available ("test1" is the value of desc attribute of the item). If so, popup anchor is made visible. The second method will be invoked when the 'x' sign of the title window is clicked and it will make the anchor invisible.

thanks,
Shyarmal.

Flex Datagrid Example

This is a simple implementation of a data grid in Flex. It would have three columns and 2 rows. Data to be contained in the grid is initialized at application start up and bound to the same. The method, initData(), which initialized the data for the grid, is called at application start up as it is defined in the "initialize" attribute of "s:Application".

============================================================= 

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" 
               minWidth="955" minHeight="600" 
               initialize="initData();">

    <fx:Declarations>
    </fx:Declarations>

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

            private var dataArray: Array = [
                {Artist:'Danuka', Album:'storm', Price:17.97}, 
                {Artist:'Shyarmal', Album:'gloomy', Price:96.29}
            ];  

            [Bindable]
            public var gridData: ArrayCollection;

            public function initData(): void {
                gridData = new ArrayCollection(dataArray);
            }

        ]]>
    </fx:Script>
     

    <s:DataGrid id="my_grid" width="500" 
         height="500" dataProvider="{gridData}">
    </s:DataGrid>

</s:Application>

=============================================================

<s:DataGrid id="my_grid" width="500" height="500" dataProvider="{gridData}"></s:DataGrid> introduces a flex grid. The attribute dataProvider binds data to the grid. In this example, "gridData" is an ArrayCollection holding that data, which is initialized through initData() method. In the method, gridData is initialized with a predefined array (dataArray). The symbol, [Bindable] above gridData makes it a source to be bound to a component (This enables gridData to be used as the source of data of the grid).

Output:

thanks,
Shyarmal.

Flex "Hello World" Application

This is my first mxml script. Here I have used a label to display "Hello World". This is a flex web application.

==================================================================

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" 

               minWidth="955" minHeight="600">

    <fx:Declarations>

    </fx:Declarations>

    <s:Label id="lb" x="350" y="350" text="hello world" />

</s:Application>

==================================================================

     <s:Label id="lb" x="350" y="350" text="hello world" /> - introduces a label component to the application. [id is the attribute by which this component will be referred, x and y define the coordinates and text holds what's to display. ]

This mxml is further enhanced, adding a button which will change the text of the label.

==================================================================

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" 

               minWidth="955" minHeight="600">

    <fx:Declarations>

    </fx:Declarations>

    <s:Label id="lb" x="350" y="350" text="hello world" />
    <s:Button id="btn" x="350" y="400" 

        label="click" click="changeLabel();"/>

    <fx:Script>
        <![CDATA[

             private function changeLabel() : void {
                if (lb.text == "hello world")
                    lb.text = "good bye ..";
                else 
                    lb.text = "hello world";
            }

         ]]>
    </fx:Script>

</s:Application>

==================================================================

Here,     <s:Button id="btn" x="350" y="400" label="click" click="changeLabel();"/>  adds a button component to the application. [id is the attribute by which this component will be referred, x and y define the coordinates and label is the caption and click triggers a function that is to be called when the button is clicked. ]

fx:Script encloses actionscript code in an mxml script. Here a function, changeLabel() is defined, which is to be called when a user clicks on the button (The function is bound to "on click" event of the button). This function changes the text of the label to "good bye .." if it is "hello world" and visa-verse.

thanks,
Shyarmal.

Configure remote repository for Maven

Remote repository can be changed by configuring settings.xml in conf folder of maven. 

<?xml version="1.0" encoding="UTF-8"?>

<settings xmlns="http://maven.apache.org/SETTINGS/1.0.0"

          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

          xsi:schemaLocation="http://maven.apache.org/SETTINGS/1.0.0 http://maven.apache.org/xsd/settings-1.0.0.xsd">

  <!--

  Maven local repository defaults to ~/.m2/repository.

To change the path to the local repository, have the following tag.

  -->

 <localRepository>/path/to/local/repo</localRepository>

  <pluginGroups>

  </pluginGroups>

  <proxies>

    <proxy>

      <id>optional</id>

      <active>true</active>

      <protocol>http</protocol>

      <username>proxyuser</username>

      <password>proxypass</password>

      <host>proxy.host.net</host>

      <port>80</port>

      <nonProxyHosts>local.net|some.host.com</nonProxyHosts>

    </proxy>

  </proxies>

  <servers>

    <!-- 

To configure your credentials to access the remote repository

    -->

    <server>

      <id>xxxxx</id>

      <username>your_username</username>

      <password>your_password</password>

    </server>

  </servers>

  <mirrors>

    <!--

Remote repository can be configured here.

     -->

    <mirror>

      <id>artifactory</id>

      <mirrorOf>*</mirrorOf>

      <name>my repo name</name>

      <url>https://www.location_of_my_repo/repo</url>

    </mirror>

  </mirrors>

  <profiles>

    <!-- profile

    <profile>

      <id>jdk-1.4</id>

      <activation>

        <jdk>1.4</jdk>

      </activation>

      <repositories>

        <repository>

          <id>jdk14</id>

          <name>Repository for JDK 1.4 builds</name>

          <url>http://www.myhost.com/maven/jdk14</url>

          <layout>default</layout>

          <snapshotPolicy>always</snapshotPolicy>

        </repository>

      </repositories>

    </profile>

    -->

  </profiles>

</settings>

thanks,
Shyarmal.