Check it out here: http://labs.adobe.com/technologies/livecycle_dataservices3/.

Andrew Trice said:

The two big features in LCDS 3.0 seem to be Model Driven Development and Quality of Service/throttling/caching from the server side.

in his article on insideRIA and I agree with him.

Also LCDS 3.0 beta comes with a plugin for Flash Builder 4. IT allows data modeling from Flash Builder itself.

This is a short article letting you know that you can have it and play with it.

More about LCDS 3.0 beta:
http://www.insideria.com/2009/06/lcds-30-available-on-adobe-lab.html
http://labs.adobe.com/technologies/livecycle_dataservices3/
http://www.adobe.com/devnet/livecycle/articles/lcdses3_whatsnew.html
http://www.dcooper.org/blog/client/index.cfm?mode=day&day=17&month=6&year=2009

Download link:
https://www.adobe.com/cfusion/entitlement/index.cfm?e=labs_livecycle_dataservices3

About Fiber/Model Driven Development:
http://labs.adobe.com/technologies/livecycle_dataservices3/gettingstarted.html
http://labs.adobe.com/technologies/livecycle_dataservices3/videos/

Table of contents

1. Some Stats About Flash Player and Browsers
2. Flash Player Version Penetration

Last year on 1st of August I presented some stats on Flash Player Penetration. Now we have some new stats regarding the versions of Flash Player.

What to notice?

1. That in a few month Flash Player 10 will overcome Flash Player 9.
2. That Japan is the fastest adopting country of Flash Player 10.
3. That in half of an year any new version of Flash Player is fully adopted.

The stats are here: http://www.adobe.com/products/player_census/flashplayer/version_penetration.html.

Regarding the enterprise medium Adobe give us this: http://www.adobe.com/products/player_census/flashplayer/enterprise_penetration.html.

All this shows us that Flash Player is a central part of the internet.

<flexer:myComp width="400" height="200" myNewSetter="{_myData}" />
<mx:Script>
    [Bindable]
    private var _myData:String= "";
</mx:Script>

And when we do this

_myData = "new_val_1";

the myComp component should know that _myData has changed and should modify itself according to the new value.

This is quite simple. Do the following:

1. On the getter, just above it, use the bindable meta tag like this
    

   [Bindable(event="mySpecialEvent")]

2. On the setter, at the end but in the setter’s body (just before closing the setter), dispatch the event used at point 1 like this
    

   dispatchEvent(new Event("mySpecialEvent"));

Let me show you the following example…

The second text area field is not a TextArea compoment but a new created component that is extending the regular TextArea. I called it AlteredTextArea because the new property it has will alter its content. This is our component that implements a new property called alteration that is bindable.

The combo box will say to the AlteredTextArea component in which way to alter the content: lowercase or uppercase.

Now the code. It is short, commented and has 2 files: the main application and the AlteredTextArea component.

This is our component AlteredTextArea…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

<?xml version="1.0" encoding="utf-8"?>
<mx:TextArea xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
            // private variable saving the current alteration
            private var _alteration:String = "";
 
            // Getter
            // Allow other components to bind to this property
            [Bindable(event="changeAlteration")]
            public function get alteration():String
            {
                return _alteration;
            }
 
            // Setter
            public function set alteration(s:String):void
            {
                _alteration = s;
 
                // We dispatch an event when the value changes
                dispatchEvent(new Event("changeAlteration"));
             }
 
             // overiding the text setter
             override public function set text(value:String):void
             {
                 // adding alteration to the text
                 var newValue:String = "";
                 switch (_alteration) 
                 {
                     // applying lowercase
                     case "toLowerCase":
                         newValue = value.toLowerCase();
                         break;
                     // applying uppercase
                     case "toUpperCase":
                         newValue = value.toUpperCase();
                         break;
                     // no alteration
                     default:
                         newValue = value;
                         break;
                 }
                 // calling the super
                 super.text = newValue;
             }
        ]]>
    </mx:Script>
</mx:TextArea>

Now the main application…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" xmlns:flexer="com.flexer.*" 
    height="299" width="459">
    <mx:ComboBox id="alterationCombo" x="118" y="138" width="158"
        dataProvider="{_alterations}" 
        change="handleAlterationChanges(event)"/>
    <mx:Label x="10" y="140" text="Alteration:" width="100"/>
    <mx:Label x="10" y="11" text="Input text:" width="100"/>
    <mx:Label x="10" y="169" text="Output:" width="100"/>
    <mx:TextArea id="inputText" x="118" y="10" 
        width="330" height="120" 
        text="{_testText}"/>
    <flexer:AlteredTextArea x="118" y="168"
        id="alteredText" 
        width="330" height="120" 
        text="{inputText.text}" 
        alteration="{_currentAlteration}"
        editable="false"/>
 
    <mx:Script>
        <![CDATA[
            // alteration available
            [Bindable]
            private var _alterations:Object = [
                {label:"Default",value:""},
                {label:"Lowercase",value:"toLowerCase"},
                {label:"Uppercase",value:"toUpperCase"}
            ];
 
            // the test to start with
            [Bindable]
            private var _testText:String = "Test TEST test";
 
            // the current alteration
            [Bindable]
            private var _currentAlteration:String = "";
 
            // handler for changes
            private function handleAlterationChanges(e:Event):void 
            {
                // setting current alteration
                _currentAlteration = e.target.selectedItem.value;
                // setting the text again
                alteredText.text = inputText.text;
            }
        ]]>
    </mx:Script>
 
</mx:Application>

I think you already noticed the get alteration and set alteration methods and understood how is done.

If you want to know more take a look inside the TextArea component which has lots of getters and setters using this tehnique.

It seems that it can even be used like this

[Bindable("changeAlteration")]

without saying “event=“. But to be make the code more readable I use the first case.

Also on DevNet found the following resources:

• http://www.adobe.com/devnet/flex/quickstart/building_components_in_mxml/ (go to the end and see the last example)
• http://www.adobe.com/devnet/flex/quickstart/building_components_in_mxml/src/MxmlComponentAdvanced/index.html

Happy coding!

The crash looks like this…

This can be easily fixed by going to adobe.com/support/flash/downloads.html and download the 10.0.2 Flash CS4 Professional Update.

Numerous bug fixes and improvements were added with this update. Some of them are listed bellow.

• Performance issues when dragging objects on stage, scrubbing the timeline, entering symbol edit mode in large AS 2.0 and AS 3.0 files.
• Performance issues when opening large files or files with many nested symbols.
• Performance issues when working in the library such as scrolling, selecting items in the library, dragging item to stage, editing symbol from library.
• Crash when selecting text field on stage with many fonts on user’s system.
• Text Property Inspector is stuck and some controls on the PI are not drawn with certain fonts on user’s system.
• Crash when creating a text object on stage when there are corrupted fonts.

More regarding the fixes on KB407415 and on Galvan on Flash blog.

Hope this will help you improving your Flex CS4 Professional experience.

Quoting Janis Stipins, Software Engineer at Google:

This means that when a SWF file loads content from some other file - whether it’s text, HTML, XML, another SWF, etc. - we can index this external content too, and associate it with the parent SWF file and any documents that embed it.

If you didn’t know what kind of Flash indexing was before please read these articles from Google Web Master Central and Adobe Developer Connection:

• Improved Flash indexing
• SWF searchability FAQ

These time this is what is new:

• Index textual content displayed as a user interacts with the file.
• Discover links within Flash files.
• Load external resources and associate the content with the parent file.
• Support common JavaScript techniques for embedding Flash, such as SWFObject and SWFObject2.
• Index sites scripted with AS1, AS2 and AS3, even if the ActionScript is obfuscated. The ActionScript version isn’t particularly relevant in indexing process.

Guys from Flash’n'SEO did some experiments before this improvements and you can read their findings on their site.

Waiting for new experiments that will test these new improvements.

Table of contents

1. How to skin a container with padding in Flex 4 SDK - Spark
2. How to skin a button with icon in Flex 4 SDK - spark

It’s recommended to use same SDK version components in same file, so I skin a button in Flex SDK 4 using only Spark components.

In Halo we use to add an icon to a button using icon property:

    <mx:Button width="120"
        icon="@Embed(source='ico/add-blue.gif')" 		
        label="New comment" />

In Spark we have to skin our button in order to put an icon on the button. I made a skin for a button with round corners and an icon that will be changed as well as background color on different states.

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark"  
    alpha.disabled="0.5"> 
 
     <fx:Metadata> 
        [HostComponent("spark.components.Button")] 
    </fx:Metadata> 
 
    <fx:Script> 
        <![CDATA[         
            static private const exclusions:Array = ["labelElement"]; 
            override public function get colorizeExclusions():Array
            {
            	return exclusions;
            } 
        ]]>        
    </fx:Script> 
 
    <s:states> 
        <s:State name="up" /> 
        <s:State name="over" /> 
        <s:State name="down" /> 
        <s:State name="disabled" /> 
    </s:states>  
 
    <!-- UP SKIN-->
    <s:Rect radiusX="8" radiusY="8" width="120" height="30" includeIn="up" >
    <s:stroke>
    	<s:Stroke color="#999999" alpha="1"/>
    </s:stroke> 
         <s:fill> 
              <s:LinearGradient rotation="90"> 
                   <s:entries>  
                        <s:GradientEntry ratio="0" alpha="1" color="#EE9819"/>
                   		<s:GradientEntry ratio="1" alpha="1" color="#FAE38F"/>
                  		<s:GradientEntry ratio="0" alpha="1" color="#FFFFFF"/>
                  		<s:GradientEntry ratio="1" alpha="0" color="#FFFFFF"/> 
                   </s:entries> 
              </s:LinearGradient> 
         </s:fill> 
    </s:Rect>
 
    <!-- Over SKIN-->
    <s:Rect radiusX="8" radiusY="8" width="120" height="30" includeIn="over" >
    <s:stroke>
    	<s:Stroke color="#999999" alpha="1"/>
    </s:stroke> 
        <s:fill> 
              <s:LinearGradient rotation="90"> 
                   <s:entries> 
                        <s:GradientEntry ratio="0" alpha="1" color="#8EB3E7"/>
                    	<s:GradientEntry ratio="1" alpha="1" color="#DCEBFE"/>
                   	 	<s:GradientEntry ratio="0" alpha="1" color="#FFFFFF"/>
                    	<s:GradientEntry ratio="1" alpha="0" color="#FFFFFF"/> 
                   </s:entries> 
              </s:LinearGradient> 
         </s:fill> 
    </s:Rect>
 
    <!-- DOWN SKIN-->
    <s:Rect radiusX="8" radiusY="8" width="120" height="30" includeIn="down" >
    <s:stroke>
    	<s:Stroke color="#999999" alpha="1"/>
    </s:stroke> 
        <s:fill> 
              <s:LinearGradient rotation="-90"> 
                   <s:entries> 
                        <s:GradientEntry ratio="0" alpha="1" color="#8EB3E7"/>
                    	<s:GradientEntry ratio="1" alpha="1" color="#DCEBFE"/>
                   	 	<s:GradientEntry ratio="0" alpha="1" color="#FFFFFF"/>
                    	<s:GradientEntry ratio="1" alpha="0" color="#FFFFFF"/>  
                   </s:entries> 
              </s:LinearGradient> 
         </s:fill> 
    </s:Rect>
 
    <!-- UP ICON -->
    <s:BitmapImage source="@Embed('ico/add-blue.gif')" 
    	verticalCenter="0" left="5" includeIn="up" />
 
    <!-- OVER ICON -->
    <s:BitmapImage source="@Embed('ico/add-green.gif')" 
    	verticalCenter="0" left="5" includeIn="over" />
 
    <!-- DOWN ICON -->
    <s:BitmapImage source="@Embed('ico/add-red.gif')" 
    	verticalCenter="0" left="5" includeIn="down" />
 
    <!-- Text SKIN-->
    <s:SimpleText id="labelElement" 
             textAlign="center" 
             verticalAlign="middle" 
             lineBreak="toFit" 
             truncation="1" 
             color="0x000099"
             horizontalCenter="0" verticalCenter="1" 
             left="25" right="10" top="2" bottom="2"> 
    </s:SimpleText> 
 
</s:SparkSkin >

I’m not a good designer but I will make a round button, just as an example, in order to see how to skin a button, and to let you understand the Flex SDK 4 graphic possibilities:

<?xml version="1.0" encoding="utf-8"?> 
<s:SparkSkin 
	xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark" 
	minWidth="60" minHeight="60" 
	alpha.disabled="0.5"> 
 
	<fx:Metadata> 
		[HostComponent("spark.components.Button")] 
	</fx:Metadata> 
 
	<fx:Script> 
	<![CDATA[         
		static private const exclusions:Array = ["labelElement"]; 
		override public function get colorizeExclusions():Array 
		{
			return exclusions;
		} 
	]]>        
	</fx:Script> 
 
	<s:states> 
		<s:State name="up" /> 
		<s:State name="over" /> 
		<s:State name="down" /> 
		<s:State name="disabled" /> 
	</s:states> 
 
	<s:Ellipse width="100%" height="100%">
 
		<s:stroke>
			<s:Stroke color="#cccccc" alpha="1" weight="1" /> 
		</s:stroke> 
 
		<s:fill.up> 
			<s:RadialGradient> 
				<s:entries>  
					<s:GradientEntry color="0x0000AA" 
						ratio="0" alpha=".5"/> 
					<s:GradientEntry color="0xAAAAAA" 
						ratio="0.8" alpha=".5"/> 
				</s:entries> 
			</s:RadialGradient> 
		</s:fill.up>  
 
		<s:fill.over>  
			<s:RadialGradient> 
				<s:entries>  
					<s:GradientEntry color="0xAA0000" 
						ratio="0" alpha=".5"/> 
					<s:GradientEntry color="0xAAAAAA" 
						ratio="0.8" alpha=".5"/> 
				</s:entries> 
			</s:RadialGradient> 
		</s:fill.over>  
 
		<s:fill.down>  
			<s:RadialGradient> 
				<s:entries>  
					<s:GradientEntry color="0x00AA00" 
						ratio="0" alpha=".5"/> 
					<s:GradientEntry color="0xAAAAAA" 
						ratio="0.9" alpha=".5"/> 
				</s:entries> 
			</s:RadialGradient> 
		</s:fill.down> 
 
	</s:Ellipse>
 
	<s:SimpleText id="labelElement"  
				  textAlign="center" 
				  verticalAlign="middle" 
				  lineBreak="toFit" 
				  truncation="1" 
				  color="0xFFFFFF"
				  fontWeight="bold"
				  rotation.up="180" rotation.over="0" 
				  rotation.down="0" rotation.disabled="180"    
				  horizontalCenter="0" verticalCenter="1" 
				  left="10" right="10" top="2" bottom="2"> 
	</s:SimpleText> 
 
</s:SparkSkin>

Please download the project and have a look around.

Table of contents

1. How to skin a container with padding in Flex 4 SDK - Spark
2. How to skin a button with icon in Flex 4 SDK - spark

Now Flash Builder 4 and Flex SDK 4 are available, so we can play around in beta version.

As you probably already know there are same changes regarding skinning from Halo to Spark, I search the web, I read the manual and I think that I got some skills :).

It will be a series of articles regarding skinning in Flex 4 SDK and for know I’m going to show you a small example about how to skin a container.

<?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/halo" 
    minWidth="450" minHeight="250">
 
    <s:SkinnableContainer 
        horizontalCenter="0" verticalCenter="0"
        minWidth="400" minHeight="200" 
        skinClass="com.flexer.skin.ContainerSkin" > 
 
        <s:BitmapImage 
            source="@Embed('img/fxr.jpg')" 
            width="100%" height="100%"
            horizontalCenter="0" verticalCenter="0" />
 
    </s:SkinnableContainer> 
 
</s:Application>

As you see there are some changes in name spaces, the Spark components are using “s”, old Halo components are using “mx”. You can have both, Spark and Halo, component in the same project.

SkinnableContainer it’s the skinnable container available in Flex 4 and if you want to change the skin you have to use skinClass in order to tell the component where the skin it’s in the project.

The skinning component it’s looking like this:

<?xml version="1.0" encoding="utf-8"?> 
<s:SparkSkin 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/halo" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    alpha.disabled="0.5">
 
    <fx:Metadata>
        [HostComponent("spark.components.SkinnableContainer")]
    </fx:Metadata> 
 
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
 
    <s:Rect 
        left="0" right="0" top="0" bottom="0"  
        radiusX="20" radiusY="20" >
 
        <s:stroke>
            <s:SolidColorStroke color="0x000099" weight="3"/>
        </s:stroke>
 
        <s:fill> 
            <s:LinearGradient rotation="-90"> 
                <s:entries> 
                    <s:GradientEntry ratio="0" alpha="1" color="#8EB3E7"/>
                    <s:GradientEntry ratio="1" alpha="1" color="#DCEBFE"/>
                    <s:GradientEntry ratio="0" alpha="1" color="#FFFFFF"/>
                    <s:GradientEntry ratio="1" alpha="0" color="#FFFFFF"/>  
                </s:entries> 
            </s:LinearGradient> 
        </s:fill> 
 
    </s:Rect>
 
    <s:Group id="contentGroup" 
        left="20" right="20" top="20" bottom="20">
 
        <s:layout>
            <s:BasicLayout/>
        </s:layout> 
 
    </s:Group> 
 
</s:SparkSkin>

As you see, it’s much clear than in SDK 3.

HostComponent is the component that we want to change. All states that you have for this component are declared in states tag.

We also have some graphical elements, a rectangle with a border (3px stroke) and gradient fill for background. All future children of this component will be added into contentGroup.

Because for SkinnableContainer you can set padding property, we use a little trick ans use left, right, top and bottom property for content group in order to have the padding that we need.

More to come.

Table of contents

1. Flex 4 Tour - Bucharest PitStop
2. Registration for Adobe User Group Tour 2009 - Flex 4 Tour - Bucharest Pit Stop Now Available
3. Agenda for Flex 4 Tour - Bucharest Pit Stop
4. Bucharest Pit Stop Passed

Yesterday (10.06.2009) at Adobe Systems Romania offices took place the Adobe User Groups Tour - Bucharest Pit Stop event. The event was a success - great things presented. Even all tickets were sold out long time before the event only 40 persons showed up at the event.

The event was about new beta products that were launched by Adobe at the beginning of this month: Flash Catalyst, Flash Builder 4 and Flex 4 SDK. But you already knew this by reading the event’s agenda.

What we learned…

• Flash Catalyst is a product targeting the designers
• Flash Catalyst integrates with Photoshop, Illustrator, Fireworks and Flash Builder 4
• Flash Catalyst makes use of some Flash Professional concepts and interactions
• Flex 4 SDK has language modifications but the both Halo and Spark components can be used together
• Separation of behavior from appearance
• Some Halo components will not be present in Spark
• New graphical primitives in Flex 4 SDK which are not derived from UIComponent (MXML Graphics Library)
• New FXG format based in MXML understood by Illustrator, Photoshop, Fireworks, After Effects, Flash Professional, Flash Catalyst and Flash Builder
• New Flash Text Engine
• 2-way binding
• Advanced CSS
• New states
• Flash Builder 4 Plugin for Eclipse can be installed over a Zend Studio this way having debugging in both Actionscript/Flex and PHP
• New tab in Flash Builder 4 - Data Services
• Drag and drop binding to components
• Lots of new wizards to easy and increase the productivity
• Package explorer
• Getter/setter/event handlers generators
• Network monitor
• New FXP file type used by Flash Catalyst and Flash Builder 4

… and other things not mentioned here.

The Bucharest Pit Stop wasn’t recorded neither transmitted through Adobe Connect so who was present got home with new info about the Flash Platform and some stuff from Adobe and Fx{r}.

Presentations and source files from the event are available at the end. Still have to tell you that some of the presentations are in Romanian but most of them are in English.

Other articles about the event:
http://groups.adobe.com/posts/bdbc2a5190
http://myadobe.ro/2009/06/10/flex-4-tour-bucharest-pit-stop/

Table of contents

1. Flex 4 Tour - Bucharest PitStop
2. Registration for Adobe User Group Tour 2009 - Flex 4 Tour - Bucharest Pit Stop Now Available
3. Agenda for Flex 4 Tour - Bucharest Pit Stop
4. Bucharest Pit Stop Passed

As was expected we have at this time a final agenda for this event.

17:00 - 17:30
Registration participants
17:30 - 17:45
Opening Message
17:45 - 19:00
Flash Builder 4 & Catalyst, Cornel Creanga & Michael Corlan
19:00 - 19:45
Break for pizza and beer
19:45 - 20:15
Flex 4 SDK, Michael Pricop
20:15 - 20:45
PHP Services in Flash Builder 4, Andrei Ionescu
20:45 - 21:00
Break
21:15 - 21:45
Skinning in Fx4 - Stelian Crisan
21:45 - 22:00
Closing Message

See you there in one week :).

So, Transylvania Flex Group invites you all to the firs ever Flex camp to take place in Cluj-Napoca. You will be able to witness all the news related to the Adobe Flash Platform, Flash Catalyst, Flash Builder 4 and Flex 4. There will be adobe evangelists as well as members of the Transylvania Flex Group.

Agenda:

10:30 – 11:00 – Opening presentation – Cornel Creanga (Adobe Platform Evangelist), George Iosif (TFXG)
11:00 – 12:00 – Flash Catalyst - Cornel Creanga
12:00 – 12:10 – Coffee break
12:10 – 12:50 – Applications built using Adobe Flex: Case study Betfair – Daniel Ursan, Claudiu Ursica
12:50 – 13:50 – Flash Builder (Flex 4) - Cornel Creanga
13:50 – 14:00 – Coffee break
14:00 – 14:30 – Introduction in Adobe AIR – George Iosif
14:30 – 15:00 – Lunch break
15:30 – 17:00 – Flex & AIR Seminary: boot camp - introduction to Flex, AIR & RIA. Concepts, how to use Flex Builder & APIs

In order to register and more info please visit Transylvania Flex Group page at: http://groups.adobe.com/posts/a36a47fae4.