The World In A State of Flex » General

How to Overlay the Adobe AIR SDK for Use with the Flex SDK

Jonathan Campos — Wed, 21 Jul 2010 21:20:22 +0000

This information is in the AIR_Android_ReleaseNotes_xxxx.pdf. What I am posting here is just meant to shift to the surface some very valuable information.

I know that there are many people out there that manually merge the AIR SDK onto the Flex SDK – myself included. I knew there had to be a better way to do it but “if it ain’t broke, don’t fix it” right?

Well I’m tired of spending those tedious minutes going through folders and copying over files. Yes, if you are in windows this is just a drag and drop operation but not for a mac. We need to get into terminal to do this.

1. In terminal, “cd” to the root folder of the Flex SDK

2. Place the AIR25_mac_sdk_XXXXXXX.tbz2 file in your root folder

3. Run the following command:

1	tar jxvf AIR25_mac_sdk_XXXXXX.tbz2

If there is a file permissions problem you may need to add a “sudo chop” to the front of that command, as such:

1	sudo tar jxvf AIR25_mac_sdk_XXXXXX.tbz2

FYI. The “sudo chop” was supposed to be a joke.

HTH

Speaking at 360|Flex DC

Jonathan Campos — Tue, 20 Jul 2010 14:23:14 +0000

This is just a quick shout out to 360|Flex!

This September I’m proud to present again for 360|Flex and the conference goers in DC. I’ll be covering a hands on and best practices to developing with the Android Device using Adobe AIR.

I’m hoping many of you come out and check out this hands on. I’ll be going over environmental setup, development, best practices with development, and tips and tricks to debugging and final releases. After you leave this hands on you should be popping out Android applications just as fast as you can dream them up.

Go checkout and register for 360|Flex DC now! There are tons of A-List presenters and fun activities to be had.

Building an AIR Application with ANT

Jonathan Campos — Tue, 22 Jun 2010 14:00:04 +0000

Building on my previous Continuous Integration series I felt there were a few more points that I needed to cover to help those others that may be running into some roadblocks with their Continuous Integration scripts.

Let’s get into have to build and package an AIR application using ANT. Unlike building a web application you need more than just a SWF file to deploy your application. You will need to actually build the SWF file and then package that SWF file into an ANT file.

The Three (not so easy) Steps:
1. Build a SWF File
2. Make a Certificate
3. Package your SWF with your Certificate

Starting Out
I’ve created a simple AIR Project called “AIRCI”.

Right now the AIRCI.mxml file is super super simple.

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

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Declarations>
-- Place non-visual elements (e.g., services, value objects) here -->
fx:Declarations>
<s:layout>
<s:VerticalLayout gap="20"
paddingBottom="20"
paddingLeft="20"
paddingRight="20"
paddingTop="20"/>
s:layout>
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="0xFF0000"/>
s:fill>
s:Rect>
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="0x00FF00"/>
s:fill>
s:Rect>
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="0x0000FF"/>
s:fill>
s:Rect>
s:WindowedApplication>

And the app descriptor file that Flash Builder generated.

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<application xmlns="http://ns.adobe.com/air/application/1.5.3">

-- Adobe AIR Application Descriptor File Template.

Specifies parameters for identifying, installing, and launching AIR applications.

xmlns - The Adobe AIR namespace: http://ns.adobe.com/air/application/1.5.3
The last segment of the namespace specifies the version
of the AIR runtime required for this application to run.

minimumPatchLevel - The minimum patch level of the AIR runtime required to run
the application. Optional.
-->

-- The application identifier string, unique to this application. Required. -->
<id>AIRCIid>

-- Used as the filename for the application. Required. -->
<filename>AIRCIfilename>

-- The name that is displayed in the AIR application installer.
May have multiple values for each language. See samples or xsd schema file. Optional. -->
<name>AIRCIname>

-- An application version designator (such as "v1", "2.5", or "Alpha 1"). Required. -->
<version>v1version>

-- Description, displayed in the AIR application installer.
May have multiple values for each language. See samples or xsd schema file. Optional. -->
-- <description>description> -->

-- Copyright information. Optional -->
-- <copyright>copyright> -->

-- Publisher ID. Used if you're updating an application created prior to 1.5.3 -->

file="${basedir}/build.properties" description="your specific properities for builds" />

name="mxmlc" classname="flex.ant.MxmlcTask" classpath="${FLEX_TASKS}"/>
name="compc" classname="flex.ant.CompcTask" classpath="${FLEX_TASKS}"/>
name="asdoc" classname="flex.ant.AsDocTask" classpath="${FLEX_TASKS}"/>

>

And the build.properties file…

1
2
3

#Flex Locations
FLEX_HOME=/Applications/Adobe\ Flash\ Builder\ 4/sdks/4.0.0
FLEX_TASKS=${FLEX_HOME}/ant/lib/flexTasks.jar

Build the SWF File
When building an AIR application we start by building the SWF file and then storing that build file to package with the certificate.

What I’ve done here is use the FlexTasks MXMLC task to build the SWF file. I’ve specified that this is an AIR build so that we use the air-config.xml provided by Adobe. This provides lots of settings for us such as manifest files and other settings. Then I specify the source folder, library folder, what file is the main application file, and finally where the built swf file will be output to.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

name="compile"
description="Compiles the AIR application to a SWF file and places SWF in a temp directory to be packaged.">
file="${SOURCE_DIR}/${APP_NAME}.${APP_EXTENSION}"
output="${BUILD_DIR}/${APP_NAME}.swf"
locale="${LOCALE}"
static-rsls="true"
accessible="true"
configname="air"
debug="${DEBUG_FLAG}"
failonerror="true"
fork="true"
maxmemory="512m">
path-element="${SOURCE_DIR}"/>

file="${FLEX_HOME}/frameworks/libs/air/airglobal.swc" append="true"/>

dir="${LIBRARY_DIR}" includes="*.swc" append="true"/>

>
>

And the properties’s file additions:

1
2
3
4
5
6
7
8
9
10
11

#App Settings
APP_NAME=AIRCI
APP_EXTENSION=mxml
SOURCE_DIR=${basedir}/src
LIBRARY_DIR=${basedir}/libs
RELEASE_DIR=${basedir}/release
BUILD_DIR=${basedir}/build

#Etc Settings
LOCALE=en_US
DEBUG_FLAG=false

Make the Certificate
Next we need to build the certificate – especially if the certificate hasn’t been made yet. In the final file we’ll check if it exists and only create the certificate if it doesn’t, but for now we’ll just build the file. We’ll use the ADT executable to achieve the certificate creation.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

name="certificate" unless="CERTIFICATE_FLAG">
jar="${ADT}" fork="true"
failonerror="true">
value="-certificate"/>
value="-cn"/>
value="${CERT_NAME}"/>
value="-ou"/>
value="${CERT_ORG_UNIT}"/>
value="-o"/>
value="${CERT_ORG_NAME}"/>
value="-c"/>
value="${CERT_COUNTRY}"/>
value="${CERT_KEY_TYPE}"/>
value="${KEYSTORE}"/>
value="${CERT_PASSWORD}"/>
>
>

And the build properties added in this step:

1
2
3
4
5
6
7
8
9

#certificate
STORETYPE=pkcs12
KEYSTORE=cert.p12
CERT_NAME=UnitedMindsetSelfSignedCertificate
CERT_ORG_UNIT=Software Development
CERT_ORG_NAME=UnitedMindset
CERT_COUNTRY=US
CERT_KEY_TYPE=2048-RSA
CERT_PASSWORD=unitedmindsetNotARealPassword

Package and Release the AIR Application
Finally we’ll create the releasable application using the ADT executable with the application descriptor file, the swf file that was previously created, and the certificate.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

name="package" depends="compile, certificate"
description="Packages the build SWF file from a temp directory.">
jar="${ADT}" fork="true"
failonerror="true"
maxmemory="512m">
value="-package"/>
value="-storetype"/>
value="${STORETYPE}"/>
value="-keystore"/>
value="${KEYSTORE}"/>
value="-storepass"/>
value="${CERT_PASSWORD}"/>
value="${RELEASE_DIR}/${APP_NAME}.air"/>
value="${SOURCE_DIR}/${APP_NAME}-app.xml"/>
value="-C"/>
value="${BUILD_DIR}"/>
value="${BUILD_DIR}/${APP_NAME}.swf"/>
>
>

No additions were added to the build.properties file.

Final build.xml File

version="1.0" encoding="UTF-8"?>
name="Build File" basedir="." default="build">

file="${basedir}/build.properties" description="your specific properities for builds" />

name="mxmlc" classname="flex.ant.MxmlcTask" classpath="${FLEX_TASKS}"/>
name="compc" classname="flex.ant.CompcTask" classpath="${FLEX_TASKS}"/>
name="asdoc" classname="flex.ant.AsDocTask" classpath="${FLEX_TASKS}"/>

name="build" description="compiles application">
target="init"/>
target="package"/>
target="cleanup"/>
>

name="compile"
description="Compiles the AIR application to a SWF file and places SWF in a temp directory to be packaged.">
file="${SOURCE_DIR}/${APP_NAME}.${APP_EXTENSION}"
output="${BUILD_DIR}/${APP_NAME}.swf"
locale="${LOCALE}"
static-rsls="true"
accessible="true"
configname="air"
debug="${DEBUG_FLAG}"
failonerror="true"
fork="true"
maxmemory="512m">
path-element="${SOURCE_DIR}"/>

file="${FLEX_HOME}/frameworks/libs/air/airglobal.swc" append="true"/>

dir="${LIBRARY_DIR}" includes="*.swc" append="true"/>

>
>

name="certificate" unless="CERTIFICATE_FLAG">
jar="${ADT}" fork="true"
failonerror="true">
value="-certificate"/>
value="-cn"/>
value="${CERT_NAME}"/>
value="-ou"/>
value="${CERT_ORG_UNIT}"/>
value="-o"/>
value="${CERT_ORG_NAME}"/>
value="-c"/>
value="${CERT_COUNTRY}"/>
value="${CERT_KEY_TYPE}"/>
value="${KEYSTORE}"/>
value="${CERT_PASSWORD}"/>
>
>

name="package" depends="compile, certificate"
description="Packages the build SWF file from a temp directory.">
jar="${ADT}" fork="true"
failonerror="true"
maxmemory="512m">
value="-package"/>
value="-storetype"/>
value="${STORETYPE}"/>
value="-keystore"/>
value="${KEYSTORE}"/>
value="-storepass"/>
value="${CERT_PASSWORD}"/>
value="${RELEASE_DIR}/${APP_NAME}.air"/>
value="${SOURCE_DIR}/${APP_NAME}-app.xml"/>
value="-C"/>
value="${BUILD_DIR}"/>
value="${BUILD_DIR}/${APP_NAME}.swf"/>
>
>

name="init" depends="clean"
description="Cleans the deploy file">
dir="${BUILD_DIR}"/>
dir="${RELEASE_DIR}"/>
file="${KEYSTORE}" property="CERTIFICATE_FLAG"/>
>

name="clean"
description="Cleans up old files.">
dir="${BUILD_DIR}" failOnError="false" includeEmptyDirs="true" />
dir="${RELEASE_DIR}" failOnError="false" includeEmptyDirs="true" />
>

name="cleanup"
description="Cleans up old files.">
dir="${BUILD_DIR}" failOnError="false" includeEmptyDirs="true" />
>

>

Final build.properties File

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

#Flex Locations
FLEX_HOME=/Applications/Adobe\ Flash\ Builder\ 4/sdks/4.0.0
FLEX_TASKS=${FLEX_HOME}/ant/lib/flexTasks.jar

#Compilers
ADL=${FLEX_HOME}/bin/adl
ADT=${FLEX_HOME}/lib/adt.jar

#App Settings
APP_NAME=AIRCI
APP_EXTENSION=mxml
SOURCE_DIR=${basedir}/src
LIBRARY_DIR=${basedir}/libs
RELEASE_DIR=${basedir}/release
BUILD_DIR=${basedir}/build

#Etc Settings
LOCALE=en_US
DEBUG_FLAG=false

#certificate
STORETYPE=pkcs12
KEYSTORE=cert.p12
CERT_NAME=UnitedMindsetSelfSignedCertificate
CERT_ORG_UNIT=Software Development
CERT_ORG_NAME=UnitedMindset
CERT_COUNTRY=US
CERT_KEY_TYPE=2048-RSA
CERT_PASSWORD=unitedMindsetNotARealPassword

One error you may see when trying to package your application is:
[java] /Users/jonbcampos/Documents/work/dflex/AIRCI/src/AIRCI-app.xml(43): error 105: application.initialWindow.content contains an invalid value

This is because the content in your application descriptor file isn’t set. When Flash Builder builds an AIR file it replaces the content tag in the application descriptor file.

1
2

>[This value will be overwritten by Flash Builder in the output app.xml]>

You may want to just switch it out for the name of your swf file:

1
>AIRCI.swf>

HTC Evo

Jonathan Campos — Mon, 21 Jun 2010 16:00:36 +0000

Last week after D-Flex I got home to find a little cardboard box by my door, inside was my brand new Evo.

I did have some issues originally using the Evo – I kept trying to swipe everything. So for the first few hours of very little interaction I could barely make a phone call. Then Friday evening I decided it was time to sit down and customize my Evo. Within a few minutes I had figured out how to get around and the phone quickly felt very friendly.

Now, the Good, the Bad, and the awesome!

The Good:

Google search everywhere!
All over the phone is Google Search. Search the web, search your stuff, search everything. And on top of that is the ability to speak your searches. The first night in a bind (while driving) I did a search for a bar I was trying to reach. I held the search button and immediately the phone was waiting for me to talk. I said “map to _________” and the phone switched right to Google maps with a route right to the location.

DONE! It was awesome.

Beyond that every application seems to have the ability to search. No reason to scroll through lists, instead everything starts with a search.

Speech to text
I brought it up earlier a bit – speech to text. That was something I was always annoyed with on the iPhone. Simple text messages and long notes always required typing… why? Now with the Google services we can get speech to text immediately everywhere that text needs to be entered. Heck, most of this blog post was written with this feature. The trick is that you need to do it one sentence at a time, but other than that it works really well.

The marketplace
Everyone talks about the AppStore like it is the end all be all location for applications. It took about 5 seconds after getting a list of cool apps from Rachel and Magnus to download all of the recommended applications. The download process was easier and faster than the AppStore, search was faster and download was faster… though I’m sure the 4g helped.

Widgets!
The way that applications can have both a widget form and full application form is wonderful. With the ability to set up main home screens with quick views and controls into your favorite application you save so much time and effort. I enjoy having a “utility” screen with the quick ability to turn on and off screen brightness, wifi, 4g, bluetooth and so on. It’s my screen for keeping my battery in check.

But I enjoy other widgets, like having my calendar or favorite call lists right on the main screen. Or even a Mint.com summary and my music together. In the end there is no limit to what you can set up and how helpful the phone can be.

Friends feeds

This is more of a widget than actual feature but it is still cool. When the phone first came on I went through a quick wizard and connected into my facebook and twitter accounts. Now my contacts are tied with my friends lists and I have a Friends Feed that aggregates all my facebook and twitter friends activity. When looking through my contact list I thought it was interesting to see under an entries name their last twitter or facebook post.

The Kickstand
I know it seems stupid but the kickstand is really cool. It’s nice to watch Uruguay in the World Cup live on the phone with the phone kicked up.

Removable Battery
As soon as I opened the box a smile came on my face when I saw the battery separate from the phone. I no longer have to watch the battery slowly die away fearing for the end of the phone’s life. Now I can switch out batteries as I please.

The Bad:

Battery life

I seriously feel like I should keep a second battery with me at all times. I carry around the usb charging cord like a safety blanket. Even when I turn off 4g, WiFi, and close applications the battery seems to run down quickly. I’m putting up with it for now, but I am hoping for a system update to help with power.

The Evo comes with a program to show what program and process used what percentage of power. Last night while taking a handful of photos I found out that the camera used TONS of power.

Consistency is Key
Also, there isn’t a great level of consistency even within the base applications. Some navigate through and initiate actions via long press. Some applications do it from the menu button. It’s a bit annoying when something doesn’t work right and you have to try both.

The Awesome:

4G
Absolutely beyond awesome is the 4g. It is so freaking fast that I really don’t see any reason to use the computer to search through the web. Applications and whatnot come down so freaking fast that there is no more waiting to do anything.

The Camera and Video Chat
I was only able to play with this shortly, but it was the coolest thing. Running on 4g it was instantly available. The dual cameras really help and the quality is perfect.

Conclusion
As you can tell I’m really happy with my new Evo. I’d really liked the iPhone before this, but with all the crap that Crazy Steve has been doing with the iPhone and Flash I am putting my money where my mouth is and ultimately I like having a device that I can develop for along with enjoy for the day to day.

I’m really looking forward to creating some fun apps and test cases in the near future with AIR for Android and my new Evo.

The Difference Between Skin and SparkSkin

Jonathan Campos — Wed, 02 Jun 2010 15:00:20 +0000

When learning and looking at Spark Skinning I noticed that some skins where made from the Skin class and some where based from the SparkSkin.

I found this really confusing mainly because I wanted a clear definition in my mind as to when I use one over the other. So I tracked down Deepa and asked her. The answer she gave was..

Use SparkSkin when you are planning on doing styles, and Skin when you are not.

More information on Skins
To start looking at the details, Group dervices from UIComponent, and Skin derives from Group and SparkSkin derives from Skin.

Details
All classes that subclass UIComponent have the getStyle() method.

The Skin class is the most lightweight class to include the HostComponent functionality.

The SparkSkin class includes arrays to effect the child component’s styles.

Override the updateDisplayList() function to include your own styles.

9 Slice Scaling with Spark Skinning

Jonathan Campos — Thu, 27 May 2010 15:00:05 +0000

Doing 9 Slice Scaling in Flex 4 Skins is actually very very easy however there were a few hurdles you had to be ready for if you want to do it right. Luckily the Flex team made some much requested changes to 9 Slice Scaling and now it is super easy.

Let’s start by making a Spark Button in our Application and resizing it a few times:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<?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">
<fx:Script>
[CDATA[
import com.unitedmindset.skins.ScalableSkin;
]]>
fx:Script>
<fx:Declarations>
-- Place non-visual elements (e.g., services, value objects) here -->
fx:Declarations>
<s:layout>
<s:VerticalLayout gap="20" paddingBottom="20" paddingLeft="20" paddingRight="20" paddingTop="20"/>
s:layout>
<s:Button skinClass="com.unitedmindset.skins.ScalableSkin" width="20" height="20"/>
<s:Button skinClass="com.unitedmindset.skins.ScalableSkin" width="100" height="100"/>
<s:Button skinClass="com.unitedmindset.skins.ScalableSkin" width="300" height="100"/>
s:Application>

You’ll notice I already have made my ScalableSkin, but right now it’s empty. This is just a stripped out version of the ButtonSkin created when using the “New > MXML Skin” Command.

The file current looks like this:

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
51
52
53

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

--

ADOBE SYSTEMS INCORPORATED
Copyright 2008 Adobe Systems Incorporated
All Rights Reserved.

NOTICE: Adobe permits you to use, modify, and distribute this file
in accordance with the terms of the license agreement accompanying it.

-->

--- The default skin class for the Spark Button component.

@see spark.components.Button

@langversion 3.0
@playerversion Flash 10
@playerversion AIR 1.5
@productversion Flex 4
-->
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009" minWidth="10" minHeight="10" alpha.disabled="0.5">

-- host component -->
<fx:Metadata>
[CDATA[
/**
* @copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.Button")]
]]>
fx:Metadata>

-- states -->
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
s:states>

-- text -->
<s:Label id="labelDisplay"
textAlign="center"
verticalAlign="middle"
maxDisplayedLines="1"
horizontalCenter="0" verticalCenter="1"
left="10" right="10" top="2" bottom="2">
s:Label>

s:SparkSkin>

Just a blank skin with the label.

My Problem with Early Beta Builds
When I first got into 9 Slice Scaling I thought that all you had to do is make a s:Group – which has scale9 build into it. However at the time if you didn’t include a background element that engulfed the entirety of the scaled item, then the skin came out horribly wrong.

Current Solution
The Flex team has since listened to our pain and updated the 9 Slice Scaling process. Now my current solution looks as such:

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
51
52
53
54
55
56
57
58
59
60
61

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

--

ADOBE SYSTEMS INCORPORATED
Copyright 2008 Adobe Systems Incorporated
All Rights Reserved.

NOTICE: Adobe permits you to use, modify, and distribute this file
in accordance with the terms of the license agreement accompanying it.

-->

--- The default skin class for the Spark Button component.

@see spark.components.Button

@langversion 3.0
@playerversion Flash 10
@playerversion AIR 1.5
@productversion Flex 4
-->
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009" minWidth="10" minHeight="10" alpha.disabled="0.5">

-- host component -->
<fx:Metadata>
[CDATA[
/**
* @copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.Button")]
]]>
fx:Metadata>

-- states -->
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
s:states>

<s:Group left="0" right="0" top="0" bottom="0" scaleGridLeft="2" scaleGridRight="8" scaleGridTop="2" scaleGridBottom="8">
<s:Path data="M 0 2 L 2 0 H 8 L 10 2 V 8 L 8 10 H 2 L 0 8 V 0 2">
<s:fill>
<s:SolidColor color="0x000000"/>
s:fill>
s:Path>
s:Group>

-- text -->
<s:Label id="labelDisplay"
textAlign="center"
verticalAlign="middle"
maxDisplayedLines="1"
horizontalCenter="0" verticalCenter="1"
left="10" right="10" top="2" bottom="2">
s:Label>

s:SparkSkin>

And we get the result that we see from the above image. The Group defines the Left/Right/Bottom/Top scale slices and the s:Path defines the shape to scale within the Group.

Again, this is a huge improvement to skinning with 9 Slice Scaling in Flex 3.

If you want more information on Spark Skinning check out some of my other posts:
Flex 4 Spark Skinning
New Spark Skinning Workflow
Spark Skinning with Flash Catalyst

Thoughts on Spark and Skinning

Jonathan Campos — Wed, 19 May 2010 14:08:43 +0000

Recently while talking to other D-Flex developers about the new Spark Architecture and Spark Skinning I’ve been hearing lots of complaints. Without talking about other projects like Reflex and their pros and cons there are many people that seen to have some sort of fundamental issue with Spark Skinning and the Spark Component model.

I start by saying that I honestly like the Spark model and decoupling the view from the component’s logic.

I want to go into a few argument points that seem to keep coming up and my thoughts on them. I will let you know now that as I am starting to write this I’m not 100% sure where this post will end up – but there is some fun in that right?

Spark Skinning breaks inheritance and causes for lots of code rewrite.
The first argument I keep hearing is how you can’t follow inheritance with Spark Skinning. People keep complaining that to make a simple change requires an entire new skin and that it is a waste of coding.

Why are you reusing skins? Usual design skins are going to be unique to the project and piece you are making, if you are really needing to reuse the skin just apply the skin to another component. But if I want to make one small change I have to make a new skin? Really? Have you not heard of CSS? Many developers that I’ve seen getting into Spark Skinning seemed to have forgotten that they can use CSS on their Spark Skins. You have some amazing skin that you want to change from Red to Blue? Go for it! Add a simple style and use CSS. Now your skin can be used and changed while keeping the same underlying code.

But you still say you want to reuse your skins and CSS isn’t enough? Go for it, break down and make the skin in total Actionscript, it’s really not that hard, and you can use your inheritance. Now is all that coding really worth it to be able to make the Skins that support inheritance? If so congrats, you’ve done a good job. If not, maybe you should have just copied and pasted a skin together and made the one change you needed to make that CSS couldn’t handle.

I’m honestly tired of all the developers on their high horse preaching about perfect architecture when they can’t even get their job done because they spent so long debating which design pattern would be best to handle some crazy problem.

I am a fan of good architecture and like to make sure that a plan is followed and standards are achieved, but when there isn’t any real benefit and you’re arguing over semantics then I think you are arguing for arguing sake and I’m not listening.

I don’t like MXML, I want to Skin in Actionscript
Okay, go for it. No one is stopping you. And you can do anything that is done in MXML in Actionscript.

Doesn’t using a specific HostComponent tightly couple a Skin to a Component?!
Yes, but when are you going to be using a List skin on a Button? The Skin needs to know what it is being attached to. This is a one way coupling and makes sense to me. How would you repurpose a skin without changing what component it is going to?

Skinning takes to long
Yes, skinning takes a while. If you want something to look custom, then you’ll have to put in the time to make it. If you don’t like skinning then just use CSS and the styles that the Flex team has provided. That’s basically all the options you had in Flex 3 anyways.

Skinning creates twice as many visual components as Flex 3 components
Actually, while there are plenty of visual components that are created, I think that one thing many people forget is that the main component actually isn’t a visual component. All that code is actually lifted off the visual display list.

Skinning allows for coding to go on in the skinning class
Yes you CAN do a lot of coding in the skinning class. These classes follow the full Flex component lifecycle and you can make an entire application with code in your skin class… not that you SHOULD.

Some people see this as a major flaw to the entire skinning architecture, I see it as choice.

While I don’t appreciate junior dev putting services in a skin file, I do appreciate the option to have it there for that one weird case that coding like this makes sense. However the architecture and framework shouldn’t limit you, that would just make our jobs harder as we do lots of code around.

We all should learn best practices, code in ways that reduce confusion, keep code DRY, respect encapsulation, and maintain reusability but we should be free to bend these rules.

New Position in Dedo Interactive Inc.

Jonathan Campos — Fri, 30 Apr 2010 13:59:39 +0000

For the last two years I have been proud to work for the clients of M. Miller & Associates. For our clients we have created some amazing rich internet applications and data visualizations using Flex and the Flash Platform with many other complimenting technologies. But now this must come to an end… ish.

Now…

Over the last few months M. Miller & Associates has started a new company called Dedo Interactive Inc.. Our focus has been to redefine how users interact with their data. We are using our years of experience in creating enterprise level applications with our knowledge in creating new and custom interactive displays to give our clients a whole new way to interact and collaborate with their data.

I am very happy to keep working with some of the best bosses and an extremely talented team headed up by Danny Dura and myself. I will serve at Dedo as the Director of Software Development, lending my experience of application development and my extreme perfectionist attitude of code quality to all of our running projects.

Over the next few months we hope to continue to push what is possible with the Flash Platform and other technologies – along with making things not possible with HTML5. I’m sure you will continue to see the fruits of our labor and I hope to be able to inspire others as much as others have inspired myself.

Connect Pro Available in iTunes Store

Jonathan Campos — Wed, 24 Feb 2010 22:42:41 +0000

This new Adobe Product release allows for full interaction with Adobe Connect for iPad and iPhone devices. So now you can watch, list, and interact with real-time presentations from your mobile device. More information and key features provided in the following video.

Oh… and it’s FREE!

Hint: Search “Adobe Connect” to find the app.

Sorry, it's a video and HTML5 just isn't there yet.

More details at the Adobe Connect Pro Blog Site.

RIA Job Trends 2010

Jonathan Campos — Wed, 03 Feb 2010 15:00:31 +0000

Last year around this time I was asked to make a presentation on RIA trends to developers. With the down economy (something just don’t change do they?) people in the group were really interested in the job trends for some of the different RIA development languages. Using indeed.com I was able to find the following stats.

I’ve made some updates to this to make it a bit more specific in the search. Hopefully the new results are more reflective of the actual current environment.

((flex developer) or (macromedia flex) or (adobe flex) or (actionscript flex)), ((silverlight) or (microsoft silverlight)), dojo, ((openlaszlo) or (open laszlo)), javafx, jquery Job Trends

((flex developer) or (macromedia flex) or (adobe flex) or (actionscript flex)) jobs – ((silverlight) or (microsoft silverlight)) jobs – dojo jobs – ((openlaszlo) or (open laszlo)) jobs – javafx jobs – jquery jobs

Breaking out the individual sections you will see…

Adobe Flex (Macromedia Flex)
Keeping strong and great growth!

((flex developer) or (macromedia flex) or (adobe flex) or (actionscript flex)) Job Trends

((flex developer) or (macromedia flex) or (adobe flex) or (actionscript flex)) jobs

Microsoft Silverlight
Wow! Look at that growth!

((silverlight) or (microsoft silverlight)) Job Trends

((silverlight) or (microsoft silverlight)) jobs

OpenLaszlo
It jumped for a bit, but I think this is the last year to include this chart.

((openlaszlo) or (open laszlo)) Job Trends

((openlaszlo) or (open laszlo)) jobs

Ajax (Specifically Dojo and JQuery)
Ajax is a hard one to include. Not because I don’t believe that it is an RIA technology, but because of how encompassing the word is. For this I will break it down to Dojo & JQuery, two of the specific frameworks. Similar to how Actionscript is to Flex, Javascript is to Dojo/JQuery. I would argue that Dojo/JQuery are the most popular Javascript framework for creating RIAs.

dojo, jquery Job Trends

dojo jobs – jquery jobs

JavaFx
Last year it was the new kid on the block and has had it’s ups and downs.

Javafx Job Trends

Javafx jobs

New Additions
This year I wanted to add a few more to my search. Obviously there are other technologies that go into RIAs, but to just say “Flash” or “HTML” would definitely get a different result then what we are looking for. And yes, I didn’t include any server-side technologies as I am focusing on front-end pieces. Though they are also important in the RIA stack.

Objective-C
Had to include this in there as a representative of the iPhone Apps market.

objective-c Job Trends

objective-c jobs

GWT (Google Web Toolkit)
By request, the addition of GWT. Again, strong growths as in all RIA sectors.

GWT Job Trends

GWT jobs

And Finally, the Superchart with all the technologies together. This just tells me that RIA technologies are just growing immensely.

((flex developer) or (macromedia flex) or (adobe flex) or (actionscript flex)), ((silverlight) or (microsoft silverlight)), dojo, ((openlaszlo) or (open laszlo)), javafx, jquery, objective-c, gwt Job Trends

And finally, the salary trend comparison for each:

Salary Comparison

Salary Trends