Archive for the ‘Flex’ Category

« Older Entries
oliverm

The Gist of Code Sharing

Wednesday, April 17th, 2013

Agile development teams often need to share code while in the heat of battle.

At the high end of the scale, there are publicly-accessible repositories, such as GitHub. Creating a GitHub project is obviously overkill for those wishing to simply pass a few key lines of code to their buddy in the next seat.

For stand-alone, runnable demo code, sites like Plunker and JSFiddle  are great. You will see references to these sites wherever HTML, CSS and JavaScript bugs are reported; for example stackoverflow and the AngularJS Google Group.

But again, maybe overkill for just a few lines.

So what are the other options for code sharing?

  • Email – I suppose, but there may be delays in receiving the email if your server is slow.
  • Skype or other messaging service – Alright, but you lose history eventually.
  • USB Key (sneaker-net) – It works, but it is hard to share it with a lot of people and history is also an issue.
  • Gist – This has been around a couple of years but I’ve only just discovered it since it is baked into IntelliJ/WebStorm. Gist is a GitHub sub-project and is associated with your GitHub account. For example, my GitHub account is at https://github.com/oliverm2112 and my Gists are at https://gist.github.com/oliverm2112. Gist allows developers to post snippets of code in various languages and features in-place editing and syntax highlighting.

Here is a Gist home page and a code sample:

 

 

 

 

Here is a shot of IntelliJ/WebStorm’s abilitity to create a Gist from within the IDE:

Hopefully you will find this a useful way to share information.

Posted in Actionscript, AIR, Android, AngularJS, ANT, Best Practices, BlackBerry, ColdFusion, Flash Builder, Flex, General Knowledge, HTML5, Java, JavaScript, jQuery, WebWorks, WPF | No Comments »

oliverm

BlackBerry Hackathons – Come out and Play(Book)!

Wednesday, May 16th, 2012

I’m currently in Bogotá, Colombia taking part in my third Hackathon on behalf of RIM. These hackathons are two-day events where local developers get the opportunity to interact directly with experts in PlayBook development. They also get a free PlayBook just for showing up!

We typically have a team of three experts covering AIR, HTML5/WebWorks and Native development. Most of the events have been focused on game development, but I’ve also done one centred around business apps using WebWorks.

Developers, either in teams or individually, work some long hours over the two day period. At the end of the second day, their apps are judged and winners awarded additional prizes. Nothing like a bit of competition to bring out the best in a dev team!

And with BB10 on the horizon, there’s a lot of anticipation from developers. Keep your eyes open for an event coming to your city this summer. Hope to see you there!

Tags: , , ,
Posted in Actionscript, AIR, Best Practices, BlackBerry, Flash, Flex, HTML5, JavaScript, Mobile, RIM, WebWorks | 1 Comment »

Chad Upton

Fixing “Unknown Problem” in Adobe Flash Builder

Friday, March 16th, 2012

By Chad Upton - senior consultant

I’m not sure what causes it, but I was seeing it a lot for a while.

When it first appeared, I checked google to see if anyone else had the same problem. No luck there. Then I talked to Derek Santos and Alain Thibodeau and they had seen it as well. Here’s what we’ve found takes care of it:

  1. Close all open tabs in Flash Builder (middle click on tab or left click on the x on the tab)
  2. Close all open projects in Flash Builder (right click on project > close project)
  3. Close Flash Builder
  4. Open Flash Builder
  5. Open any necessary projects
  6. Clean All (Project > Clean > Clean All Projects)
  7. Build and Run

So far, that’s worked every time. You may also want to disable design view to see if that helps.

UPDATE Nov 29, 2012:
I ran into this problem again this week. None of the above worked this time, so I had to delete the workspace and create it again. That fixed it.

Tags: , , , ,
Posted in Actionscript, AIR, Flash Builder, Flex | 6 Comments »

Chad Upton

How to Disable Design View in Flash Builder

Monday, January 30th, 2012

By Chad Upton – senior consultant

Disable Flash Builder’s “Design Mode” if you want to save some memory or avoid some errors that some plugins cause when using design view. It’s pretty straight forward, go to the Window menu and click “Enable Design Mode” to remove the checkmark:

Tags: , , , , ,
Posted in Flash Builder, Flex | 1 Comment »

alaint

Flex Mobile: Skinning the ActionBar

Wednesday, January 25th, 2012

By Alain Thibodeau – Consultant

In a Flex mobile application, the ActionBar is the main bar at the top which contains several content areas. These areas consists of the titleDisplay, actionGroup, titleGroup and navigationGroup skin parts. With a custom skin you can move these skin parts where you need them and add background images.

I first hit Photoshop and created my visuals for the ActionBar as shown below. (I know most of you designers out there will give me the “eye brow” with my design, but go easy on me please…)

I sliced out the logo and a 3 pixel slice of the bar. Looking like this:

      

I then created a Flex Mobile Project. In the main project file, I referenced a css file which contains this code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@namespace s "library://ns.adobe.com/flex/spark";

s|ActionBar {
skinClass:ClassReference("skins.CustomActionBarSkin");
defaultButtonAppearance: beveled;
}

s|ActionBar #titleDisplay {
fontWeight:normal;
color: #000000;
}

s|ActionBar #titleGroup {
fontWeight:normal;
color: #FFFFFF;
}

The most important part of the css file is the declaration of the skin class for our custom skin. The other styles are for the text in the titleGroup  and titleDisplay groups.

Here is the custom action bar mxml skin.  It could have been written in ActionScript, however, I did not notice any performance issues with mxml.

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
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark">

    <fx:Metadata>
        [HostComponent("spark.components.ActionBar")]
    </fx:Metadata>

    <s:states>
        <s:State name="titleContentWithActionAndNavigation"/>
        <s:State name="titleContentWithNavigation"/>
        <s:State name="titleContentWithAction"/>
        <s:State name="titleContent"/>
        <s:State name="titleWithActionAndNavigation"/>
        <s:State name="titleWithNavigation"/>
        <s:State name="titleWithAction"/>
        <s:State name="title"/>
    </s:states>

    <s:Image source="@Embed('/assets/images/bar.png')"
             left="0"
             right="0"
             scaleMode="stretch"/>

    <s:Image source="@Embed('/assets/images/logo.png')"
             horizontalCenter="0"/>

    <s:Group id="navigationGroup"
             left="12"
             top="15"/>

    <s:Group id="titleGroup"
             left="10"
             top="68"/>

    <s:Group id="actionGroup"
             right="12"
             top="15"/>

    <s:Label id="titleDisplay"
             horizontalCenter="0"
             top="8"/>
</s:Skin>

The modifications to the skin are adding the background images and moving the skin parts where we need them. In this case, my slice of the background is stretched across the width of the application. The logo is then put on top of the bar and centered, aligning itself with the lines and shadows.

What I didn’t add is consideration for different dpis. This could be accomplished by having different images for the different screen resolutions.

Lastly, here is the view that defines what goes in the content areas. We could extend the ActionBar and add more skin parts as needed. In our case we are using the “titleContent” SkinPart for some form of subtitle text area.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        title="Action Bar Skin">

    <s:navigationContent>
        <s:Button label="Back"/>
    </s:navigationContent>

    <s:titleContent>
        <s:Label text="Some Text Here"/>
    </s:titleContent>

    <s:actionContent>
        <s:Button label="Action" />
    </s:actionContent>

</s:View>

Here is what the application looks like with the custom ActionBarSkin:

Tags: , , , ,
Posted in Actionscript, AIR, Flash Builder, Flex, Mobile | 9 Comments »

Chad Upton

Creating an HRule in MXML with Spark Components

Tuesday, January 10th, 2012

By Chad Upton – senior consultant

Although there is an MX HRule component, there is not a Spark equivalent. You could still use the mx component, but it’s better to use a vector graphic for something as simple as a straight line – particularly if you’re building a mobile application.

For a horizontal rule, you can simple set the width of the line, the color, and the weight (stroke/thickness).

1
2
3
4
5
<s:Line width="100%">
    <s:stroke>
        <s:SolidColorStroke color="0x000000" weight="2"/>
    </s:stroke>
</s:Line>

You can also draw a line from point to point:

1
2
3
4
5
<s:Line xFrom="10" xTo="20" yFrom="10" yTo="20">
    <s:stroke>
        <s:SolidColorStroke color="0xFF0000" weight="1"/>
    </s:stroke>
</s:Line>

Be sure to “like” us on facebook to stay in the loop and checkout our course calendar for flex, html5, javascript, and other platform training programs — online and in the classroom.

Tags: , , , , , , , , ,
Posted in AIR, Flex | No Comments »

Derek Santos

Flex IMXMLObject Interface

Friday, January 6th, 2012

By Derek Santos – Consultant

This hidden gem in Flex can really help keep your MXML code clean and separated from your view logic. A great way to use it is to encapsulate your view logic into a ViewHelper. IMXMLObject has only one function.

1
function initialized(document:Object, id:String):void;

Here is Adobe’s documentation for this function:

“Called after the implementing object has been created and all component properties specified on the MXML tag have been initialized.”

What this means is that once the parent is created and has intialized its properties, it will pass a reference of the parent to your IMXMLObject implementation. So, as an example, let’s create a simple ViewHelper. First, create a class and implement IMXMLObject.

ViewHelper.as

1
2
3
4
5
6
7
8
9
class ViewHelper implements IMXMLObject {
   
    public var view:MyView;

    public function initialized(document:Object, id:String):void {
        this.view = document as MyView;
    }
   
}

Notice that I am keeping a reference of the view by assigning the value of document to an instance variable called view. Once you do this, you can work with your view and apply any logic you may need.

Once you’ve created your ViewHelper, you simply need to declare it in your MXML file. In this case, that would be MyView.

MyView.mxml

1
2
3
4
5
6
7
8
9
10
11
<s:Group
   xmlns:fx="http://ns.adobe.com/mxml/2009"
   xmlns:s="library://ns.adobe.com/flex/spark"
   xmlns:local="*"
   >

    <fx:Declarations>
        <local:ViewHelper id="helper" />
    </fx:Declarations>
   
</s:Group>

Notice that you do not need to pass a reference to “this” anywhere. This keeps your MXML very clean and makes the ViewHelper a little more portable. Comments are welcome!

Tags: , , ,
Posted in Actionscript, AIR, Flash, Flash Builder, Flash Player, Flex | No Comments »

alaint

Flex Mobile: IconItemRenderer Example

Thursday, January 5th, 2012

By Alain Thibodeau – Consultant

For Flex mobile applications you should use the mobile optimized item renderers. The default base class for mobile renderers is the LabelItemRenderer. Extending this is the IconItemRenderer, which is a handy renderer that includes an icon area, label and message.

Here is an example of using IconItemRenderer in the simplest form:

MyIconItemRenderer.mxml

1
2
3
4
5
6
7
8
9
10
<!--?xml version="1.0" encoding="utf-8"?-->
<s:IconItemRenderer
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    iconField="icon"
    labelField="label"
    messageField="message"
    iconWidth="45"
    iconHeight="45"
    />

HomeView.mxml

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
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark">
    <s:List
        width="100%"
        height="100%"
        itemRenderer="MyIconItemRenderer"
        >
        <s:dataProvider>
            <s:ArrayList>
                <fx:Object
                    label="Title 1"
                    icon="http://www.adobe.com/homepage/include/style/homepage/adobe_logo_45x45.jpg"
                    message="This is a message"
                    />
                <fx:Object
                    label="Title 2"
                    icon="http://www.adobe.com/homepage/include/style/homepage/adobe_logo_45x45.jpg"
                    message="This is a message"
                    />
                <fx:Object
                    label="Title 3"
                    icon="http://www.adobe.com/homepage/include/style/homepage/adobe_logo_45x45.jpg"
                    message="This is a message"
                    />
                <fx:Object
                    label="Title 4"
                    icon="http://www.adobe.com/homepage/include/style/homepage/adobe_logo_45x45.jpg"
                    message="This is a message"
                    />
                <fx:Object
                    label="Title 5"
                    icon="http://www.adobe.com/homepage/include/style/homepage/adobe_logo_45x45.jpg"
                    message="This is a message"
                    />
                <fx:Object
                    label="Title 6"
                    icon="http://www.adobe.com/homepage/include/style/homepage/adobe_logo_45x45.jpg"
                    message="This is a message"
                    />
            </s:ArrayList>
        </s:dataProvider>
    </s:List>
</s:View>

Outcome:

 
 

Here is an example of IconItemRenderer using messageFunction, labelFunction to display content other than what is directly in our dataprovider. I added a color property to my dataprovider objects.

Updated HomeView.mxml

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"?>
<s:View
        xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    title="HomeView"
    >
           <s:List
        width="100%"
        height="100%"
        itemRenderer="MyIconItemRenderer"
        >
        <s:dataProvider>
            <s:ArrayList>
                <fx:Object
                    label="Title 1"
                    icon="http://www.adobe.com/homepage/include/style/homepage/adobe_logo_45x45.jpg"
                    message="This is a message"
                    color="Red"
                    />
                <fx:Object
                    label="Title 2"
                    icon="http://www.adobe.com/homepage/include/style/homepage/adobe_logo_45x45.jpg"
                    message="This is a message"
                    color="Blue"
                    />
                <fx:Object
                    label="Title 3"
                    icon="http://www.adobe.com/homepage/include/style/homepage/adobe_logo_45x45.jpg"
                    message="This is a message"
                    color="Green"
                    />
                <fx:Object
                    label="Title 4"
                    icon="http://www.adobe.com/homepage/include/style/homepage/adobe_logo_45x45.jpg"
                    message="This is a message"
                    color="Pink"
                    />
                <fx:Object
                    label="Title 5"
                    icon="http://www.adobe.com/homepage/include/style/homepage/adobe_logo_45x45.jpg"
                    message="This is a message"
                    color="Brown"
                    />
                <fx:Object
                    label="Title 6"
                    icon="http://www.adobe.com/homepage/include/style/homepage/adobe_logo_45x45.jpg"
                    message="This is a message"
                    color="Yellow"
                    />
            </s:ArrayList>
        </s:dataProvider>
    </s:List>
</s:view>

And here is the modified MyIconItemRenderer.mxml:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?xml version="1.0" encoding="utf-8"?>
<s:IconItemRenderer
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    iconField="icon"
    labelField="label"
    labelFunction="getLabel"
    messageField="message"
    messageFunction="getMessage"
    iconWidth="45"
    iconHeight="45" >
    <fx:Script>
        <![CDATA[
            private function getMessage(item:Object):String {
                return item.message + " - " + new Date().toDateString();
            }
                          private function getLabel(item:Object):String {
                return item.message + " - " + item.color;
            }
        ]]>
    </fx:Script>
</s:IconItemRenderer>

Outcome:

 

 

For online and in-person Flex and AIR training, checkout our course finder.

Posted in Actionscript, AIR, Android, Flash, Flash Builder, Flash Player, Flex, iOS, Mobile | No Comments »

Chad Upton

Introduction to Amazon SimpleDB for Adobe Flex and AIR Apps

Monday, November 21st, 2011

By Chad Upton – senior consultant

Flex is a great platform for building applications quickly. Amazon SimpleDB is a cloud database with similar characteristics along with some unique advantages and trade-offs compared to traditional databases.

SimpleDB is a non-relational database that focuses on small data sets. It is built in Erlang and intended to run in the Amazon cloud, but there is an offline/local implementation that you can use for testing called M/DB.

It is not a database you’d use for everything; it focuses specifically on data sets that require high availability and low consistency, or “eventual” consistency to be more accurate. If you’re new to this concept, you might not even be able to think of a database use case where consistency is not important. It is perfect for many “social” web applications and non-customer facing features too.

Here’s how it works. When you write some data and then immediately try to that read data, the data may not be available yet. This happens because the database is distributed (replicated) across many servers. This is generally invisible to you since you read and write data from and to the same destination. Behind the scenes, Amazon routes your read/write requests to many different servers to give you the fastest response time and the highest possible availability and redundancy. So, the server you wrote the data to, may not be the same server that you tried to read the data from. This means you end up with temporary inconsistencies.

In practice, that data may appear to be missing for a brief amount of time while it is replicated to all the servers. Until it is replicated across all the server, it’s hit or miss if you will be able to read that data. That’s the downfall of this approach and for some applications, that is not acceptable. But, there is a huge benefit too: the services are extremely fault tolerant and the database can handle extremely large loads because it is distributed across many servers and geographies. This means that all of your eggs are not in the same basket. If there is a critical failure in one location, you probably won’t even notice.

Amazon has indicated that NetFlix uses SimpleDB for part of their business. It’s hard to say what they use it for, but we can make some guesses. They probably don’t use it for storing which discs you currently have out. To avoid sending you more discs than you pay for, they would need to have high consistency on that data. But, when you rate a movie 5 stars, that data gets combined with ratings of thousands of other people. While your rating is important in the long run, it’s not a big deal if it is not immediately counted in the average rating of the movie. Amazon SimpleDB is a perfect fit for this type of social feature: high availability, eventual consistency.

SimpleDB is also great for storing things like usage and error logs or high score data from games. Anytime you want the server to always be online to receive the read/write requests, but lag in consistency is tolerable given the higher availability. It’s also great for some content management type data such as a product database. The high availability is great, you always want your visitors to see your product catalog. A short delay between the time you add the product and the time it shows up on your site is usually acceptable.

How long is that delay?

I haven’t seen any delay in my tests. But, with large data sets it is bound to happen. From my experience with web sites that rely on similar data storage techniques, I have seen replication lags up to ~15 seconds. For most of the examples I have described, that’s completely acceptable.

SimpleDB plays well with ActionScript applications, especially if you use Cafe Silencio’s library. I’m going to build an app that uses SimpleDB in a future post; in the meantime, check out this collection of links to help you get started using SimpleDB in your ActionScript projects.

Info

Libraries

Documentation

If you want to learn more about Flex, check out our selection of onsite and online training classes.

Tags: , , , , ,
Posted in Actionscript, AIR, Flash, Flex | No Comments »

alaint

Publishing your Air app on Amazon Appstore for Android

Wednesday, November 9th, 2011

By Alain Thibodeau – Consultant

If you are thinking about publishing your Adobe Air Mobile application on the Amazon Appstore, there is one gotcha you must know.  The actual publishing process is about the same as on the Android Market, if not easier. But, if you miss this step, you will waste time and get an email back from Amazon refusing your app.

Amazon wants you to point the Adobe Air download to their Appstore, and not leave it to the default Android Market. What this means is that, if the user does not have Adobe Air installed, they will be pointed to the Android Market to install it. Makes sense that Amazon wants to bring traffic back to them and not the Android Market. So, there is one change you need to do in order to make this happen.

When you export a build release, on the “Packaging Settings” window, there is a Deployment tab. Under Application Store Settings, change the value of the AIR download URL to the Amazon Appstore.

You can also use the command line compiler and use the airDownloadURL option. Make sure you have the latest URI, it seems to change once in a while.

-airDownloadURL http://www.amazon.com/gp/mas/dl/android?p=com.adobe.air

Example Ant target:

...
<property
    name="amazon.uri"
    value="http://www.amazon.com/gp/mas/dl/
    android?p=com.adobe.air"/>

<target name="package.amazon">
    <exec executable="${ADT}" dir="${android.dir}">
    <arg value="-package"/>
    <arg line="-target apk"/>
    <arg line="-airDownloadURL ${amazon.uri}"/>
    <arg line="-storetype pkcs12"/>
    <arg line="-keystore ${cert}" />
    <arg line="-storepass ${cert.password}" />
    <arg value="${app.name}_amazon"/>
    <arg value="${app.name}-app.xml"/>
    <arg value="${app.name}.swf"/>
</exec>
...

For more information about Amazon Appstore for Android and Adobe Air, click here.

 

 

Posted in Actionscript, AIR, Android, Flex, General Knowledge, Mobile | No Comments »

« Older Entries