JabbyPanda’s travel to RIA world

   When you want to update already existing data item in your ArrayCollection in ActionScript 3 with a new values for object’s properties you have 2 options to select from:

1. use itemUpdated(obj) ArrayCollection’s method.
2. use setItemAt(obj, index) ArrayCollection’s method.

   ActionScript code sample:

// Update an existing person in the ArrayCollection via setItemAt
    public function updatePersonViaSetItemAt():void {
        var currentlySelectedItem : Object = dg.selectedItem;
        currentlySelectedItem.first = firstInput.text;
        currentlySelectedItem.last = lastInput.text;
        ac.setItemAt(currentlySelectedItem, dg.selectedIndex);
    }

    // Update an existing person in the ArrayCollection via itemUpdated
    public function updatePersonViaItemUpdated():void {
        var currentlySelectedItem : Object = dg.selectedItem;
        currentlySelectedItem.first =  firstInput.text;
        currentlySelectedItem.last =  lastInput.text;
        ac.itemUpdated(currentlySelectedItem);

    }

   Which one to choose?

   I would strongly advice to always use ‘itemUpdated’ because of the following reasons:

• Calling setItemAt(x) on your existing data item in ArrayCollection is an equivalent to calling the removeItemAt(x) method and then calling the addItemAt(…, x) method on your data item.
  
     Thus after making the call to setItemAt(x, index) you will loose the current selection in your ArrayCollection dependant UI component (mx:DataGrid, mx:Tree, mx:Combobox.. etc..)
  
  
• If the Sort rule is already applied to your ArrayCollection then you can receive some funky results like unwanted inserting of a new row when partly changing several properties of the existing data item in ArrayCollection.

   Interactive sample with “View source” option enabled to watch the difference:
http://jabbypanda.com/labs/updateArrayCollectionItem/updateArrayCollectionItem.html

You can try the following:

1. First apply sorting to any of the DataGrid’s column
2. Select the first row in the Datagrid
3. Rename the surname of the person to something completely new starting with a new letter
4. Press “Update via setItemAt()” button control

Voilà, new unwanted row becomes visible in the Datagrid.

Kharkiv, Ukraine is quickly becoming a popular place for Ukrainian Flash and Flex developers to meet.

After intoductory meeting of Ukrainian Adobe Flash platform user group(UAFPUG) at February 2008 codenamed UAFPUG-0, the first real seminar UAFPUG-1 had quickly followed at 15th of March, 2008 at Global Logic office premises at Kharkiv, Ukraine.

Speakers list had included 3 (THREE!) talented local Flash profesionals who had presented to the audience of 45 attendees mostly from all major cities in Eastern Ukraine and Kyiv included + 1 international visitor from Russia.

The speech topics were as follows:

.

Rostyslav Syrik _rost discusses the ins and outs of PureMVC framework.

The UAFPUG-1 meeting audience was very into the subject of the seminars :).

Thank you to all of you, who had helped to make this meeting to become a reality, especially _rost, Reijji, __i, Pirrest and Global Logic team crew.

The issue:

I was stumbled upon once ago when I loaded my external SWF file authored by the Flash IDE by the help of component and suddenly (?) every content object that was originally placed outside of the Stage inside the Flash IDE became visible in my Flex 2 based web application outside of the boundaries after loading sequence for my external SWF file was over (the file is Flash8 based, AVM1 if this matters).

The corresponding task in Adobe JIRA bug-database:
http://bugs.adobe.com/jira/browse/SDK-14590

I currently fight this issue by applying the mask over the content that is loaded by the component, see the code below, may be you can find it helpful too:

<?xml version=“1.0″ encoding=“utf-8″?>
<mx:VBox xmlns:mx=“http://www.adobe.com/2006/mxml“
    resize=“applyMask()“ >

    <mx:Script>
        <![CDATA[
            private function applyMask() : void {
                if (swf != null &&
                    swf.content != null &&
                    swf.content.loaderInfo.width > 0 &&
                    swf.content.loaderInfo.height > 0) {
                    var scaleRatioX : Number = swf.content.loaderInfo.width /
                                                    this.width;
                    var scaleRatioY : Number = swf.content.loaderInfo.height /
                                                   (this.height - this.controlBar.height);
                    var scaleRatio : Number = Math.max(scaleRatioX, scaleRatioY);

                    swf.width = swf.content.loaderInfo.width > 0 ?
                          Math.round(swf.content.loaderInfo.width / scaleRatio)  : 100;
                    swf.height = swf.content.loaderInfo.height > 0 ?
                          Math.round(swf.content.loaderInfo.height / scaleRatio) : 100;

                    var s : Shape = new Shape();
                        s.graphics.beginFill(0xFFFFFF);
                     s.graphics.drawRect(0, 0,  swf.width, swf.height);
                     s.graphics.endFill();
                     swf.addChild(s);
                     s.visible = false;
                     swf.mask = s;
                }
            }
    ]]>
    </mx:Script>
    <mx:SWFLoader id=“swf“
        complete=“applyMask()“
        source=“navigation.swf“/>

</mx:VBox>

The steps I underwent:

1. I had installed Flex Builder 3 beta 2 (FB 3 beta 2) as a plugin on my Eclipse 3.2
2. Opened my Flex SWF Library projects inside of Flex Builder 3 beta 2
3. Selected Flex 3 M3 (Beta 2) SDK at the dialog (default value)
4. Flex Buidler 2 had given me the following error in my log file: (full error info skipped for the sake of text clarity)

java.lang.IllegalArgumentException: Attempted to beginRule: P/FlexLibrary, does not match outer scope rule: P/as3corelib
at com.adobe.flexbuilder.project.actionscript.internal.FlexProjectPreferences.setUpgradeFlexSDK
(FlexProjectPreferences.java:147)
at com.adobe.flexbuilder.project.actionscript.internal.ActionScriptProjectSettings$2.runInUIThread
(ActionScriptProjectSettings.java:285)

5. Nevertheless of the received error, I was able to compile ALL my Flex 2 based projects that relies on my Flex SWC Library projects in FB 3 Beta 2
6. Then I had reopened my plain Flex projects inside Flex Builder 2 again, because at the company we are using currently Flex Builder 2 for the production.
7. But Flex Builder 2 constantly had failed to recompile all Flex SWC Library projects that were previously opened at least once at FB 3 beta2.

My resolution to this issue was to delete manually a config file created by FB 3 beta 2 and located at each Flex SWC library project folder at the following path:

c:\workspace\\.settings\com.adobe.flexbuilder.project.prefs

Mine Flex 2 authored SWF is 19 levels deep in its full glory:

_level0.index0.VBox5.GradientBox25.indexViewStack.
mainPage.contentPane.mainViewStack.customerViewStack.
presentationViewer.swf.FlexLoader396.instance458.sfiViewer.
bank.foreground.sa04d14eaa39b3fd.content.clip

As my coworker Sergey Kovalyov today had found out by submitting search query to Google with “Adobe Air” keywords that Adobe Air is not only “a cross-operating system runtime”, but for more than 65 years, AdobeAir has redefined the standards of quality in evaporative coolers.

I wonder how copyright claims works in this case….

With this post I want to make my Amazon wishlist visible to Adobe filled with some really really good Adobe Flex 2 books that I’ve never could yet afford to purchase.

I promise to Adobe to distribute some of the books within my company ( 4 full time Adobe Flex developers) and within our small, but growing community of Adobe Flex developers in Ukraine.

Here is my shared Amazon wishlist:

ps

I was inspired by the post of Dan Wilson who had recently enjoyed receiving a package with learning materials from Adobe.

    Sometimes the look of <mx:LinkButton> look is not enough to satisfy the designer’s requirement to display hyperlinks inside you Flex 2 application in a way we got used to see them in HTML world, e.g. to display hyperlinks inside Flex 2 in a plain text.

Luckily Flash 9 supports pseudo CSS style selectors like a:hover, a:link, a:active. Let’s use this fact to our advantage!

Source MXML code of the example project:

<?xml version=“1.0″ encoding=“utf-8″?>
<mx:Application
    xmlns:mx=“http://www.adobe.com/2006/mxml“
    layout=“vertical“
    xmlns:text=“jabbypanda.controls.*“
    width=“100%“ height=“100%“
    horizontalAlign=“center“
    backgroundGradientColors=“[#000000, #282828]“ backgroundColor=“#282828“
    verticalAlign=“middle“ viewSourceURL=“srcview/index.html“>
 <mx:Script>
     <![CDATA[
         import jabbypanda.controls.HyperLink;
         import jabbypanda.controls.events.HyperlinkEvent;

        private function onLinkClick(evt : HyperlinkEvent) : void {
            // here you can invoke loading of external web-page if you want    via URLRequest
             var hControl : HyperLink = HyperLink(evt.target);
            txtDataUrl.text = “You just had clicked ‘” + hControl.linkText + “‘”;
            txtDataUrl.visible = true;
          }

          private function changeStyle() : void {
              hLink.setStyle(”colorLink”, 0xFFFF00);
              hLink.setStyle(”colorHover”, 0xFFFF00);
              txtDataUrl.visible = false;
          }
     ]]>
 </mx:Script>
 <mx:Style>
     HyperLink {
         colorLink : #FF0000;
         colorHover : #00FF00;
         colorActive : #0000FF;
     }

     Label {
         color : #CCCCCC;
         fontSize : 16;
     }

 </mx:Style>
  <text:HyperLink linkText=“Click me! I am a hypertext link“ id=“hLink“ linkClick=“onLinkClick(event)“/>
  <mx:Button id=“btn“ label=“Change the style“ click=“changeStyle()“/>
  <mx:Label id=“txtDataUrl“ visible=“false“/>
</mx:Application>

See the demo below.

Example: http://jabbypanda.com/labs/hyperLink/htmlText.html
Source files: http://jabbypanda.com/labs/hyperLink/srcview/index.html

ps
I marked this component version as 0.1 because I feel there is a open room for suggestion how to correct/ extend Hyperlink component to make it more useful.

Tell me frankly, does this hyperlink component look good enough to match a view and feel of plain old <a href> tag from HTML world?

Acknowledgments

Hyperlink component example written by Tracy Spratt

    Problem: Unoccupied space with tree items inside Tree component is always filled with black color if “depthColors” style is applied to Tree UI component from Flex 2.0.1. SDK.

   Fix: My ExtendedTree class fixes this error by reusing the old code from method implementation ‘drawRowBackgrounds’ in Tree.as from old Flex 2.0 SDK.

Example: http://jabbypanda.com/labs/treeDepthColors/treeDepthColors.html
Source files: http://jabbypanda.com/labs/treeDepthColors/srcview/index.html

   I like using a:hover pseudo CSS class for styling hyperlinks in HTML and I would like to do the similar with hyperlinks inside text displayed with Flex 2.0.1 SDK UI components such as mx:TextArea and mx:Text.

   In Flex 2.0.1 SDK the support for a:hover pseudo CSS classes is done via runtime style sheets.

   <mx:TextArea> component starting from Flex 2.0.1 SDK supports setting CSS stylesheet at runtime right from the box.
   <mx:Text> is not that ready to accomplish the similar task, fortunately for us it is easy to extend <mx:Text> component and add the required functionality to it - see the code below.

package com.jabbypanda.controls {
    import mx.controls.Text;
    import flash.text.StyleSheet;

    public class ExtendedText extends Text {

        public function ExtendedText() {
            super();
        }

        public function get styleSheet() : StyleSheet {
             return textField.styleSheet;
        }

        public function set styleSheet(value : StyleSheet) : void {
            textField.styleSheet = value;
        }
    }
}

Example: http://jabbypanda.com/labs/hoverCSS/HoverCSSFlexSupport.html
Source files: http://jabbypanda.com/labs/hoverCSS/srcview/index.html

Acknowledgements:

    In my experiments I was both inspired by the quote from Flex 2 livedocs:‘You can also define a:link, a:hover, and a:active styles for anchor tags by using style sheets’ and by reading a great article followed by very useful comments published at FlashLit blog titled “Styling Flex TextArea content with CSS”.