Posts Tagged ‘Actionscript’

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:

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!

cathyj

Creating a DropDown List for PlayBook Applications

Monday, August 29th, 2011

By Cathy Jin – Consultant

If you’re using Flex 4.5.1 to develop a PlayBook application, you will notice that there is no DropDown list control in the Component View. This is due to the fact that DropDown list is not mobile optimized for Flex. I’ve tried to use it but had little success. There are two possible solutions:

1. You can use a Text Input box and a list popup window. You can refer to this link for an example: http://www.adobe.com/devnet/flex/samples/expense-tracker-application.html.

2. An alternative is to use a QNX component, but you will need to rewrite the code if you want the application to run on different operating systems such as iOS or Android. You can find more infromation on using QNX components at the link: http://corlan.org/2011/02/01/working-with-playbook-qnx-list-components/.

Good luck!

oliverm

Adobe's Flex Future

Friday, August 26th, 2011

By Oliver Merk – Principal Consultant

Despite the rumors, Adobe hasn’t quite thrown up their hands and accepted the HTML5 future envisioned by so many. In the following article, Andrew Shorten lauds the Flex Mobile framework and rails against the Flash FUD that Adobe always takes seriously.

Looks like Adobe could use more developers in its Flex corner. Maybe a Flash Builder for Linux after all, Andrew?

http://blogs.adobe.com/flex/2011/08/flex-where-were-headed.html

What do you think – is Flash doomed? Is HTML5 going to rule the world? Please leave a comment below.

andreiv

Actionscript: Using Weak References to Avoid Memory Leaks

Friday, August 12th, 2011

By Andrei Vanahel – Consultant

As most of us know, negligent usage of Event Listeners causes memory leaks.  Let’s use Timer as a good example.

The way we usually declare Timer objects looks similar to this:

var timer:Timer = new Timer();

timer.addEventListener(TimerEvent.Timer, timerEventHandler)

What happens here is that timerEventHandler becomes a reference to an object, and this object would never be garbage collected until Timer object is destroyed or Event Listener is removed.

The most common way to remove Event Listeners is to call the removeEventListener function:

timer.removeEventListener(TimerEvent.Timer, timerEventHandler).

But in many cases I have seen developers simply ignore or forget to clean Event Listeners, and in rare cases developers put removeEventListeners in the wrong place which causes other issues. Here is an alternative: weak references. Wikipedia defines a weak reference as “reference that does not protect the referenced object from collection by a garbage collector”.  In other words an object that has only weak references will be marked for deletion and is eligible to be garbage collected.

In order to mark references as weak we just need to set the fifth parameter of addEventListener function to true:

timer.addEventListener(TimerEvent.Timer, timerEventHandler

1
,false,0,true);

As usual, each method (removeEventLister function or weak references) has advantages and disadvantages, so it up to you to decide which one is more suitable in your situation.

oliverm

A Date with SQLite

Thursday, August 11th, 2011

By Oliver Merk – Principal Consultant

Been doing a lot with SQLite lately (sqlite.org) on the PlayBook and elsewhere and wanted to pass on a few quick notes.

First, SQLite columns are typeless.

What?

Yup. Even though you may declare fields as VARCHAR or DATETIME, you may actually store any type of data you want in them. The exception to this rule is for PRIMARY KEY fields declared as INTEGER.

I’ve found that typeless fields can lead to some problems when storing and retrieving date values. I suspect that minor version differences in SQLite are returning different CURRENT_TIMESTAMP values.

Here’s an example of some SQL which creates a table with a date field:

CREATE TABLE location (
    location_ID INTEGER PRIMARY KEY NOT NULL,
    name VARCHAR,
    latitude NUMERIC NOT NULL,
    longitude NUMERIC NOT NULL,
    addDate DATETIME DEFAULT CURRENT_TIMESTAMP);

If I INSERT a new record without specifying the addDate value, SQLite will default to inserting its CURRENT_TIMESTAMP value to populate the addDate field and I get something like 2011-08-11 12:05:10.

But if I decide to explicitly use CURRENT_TIMESTAMP in my insert statement, the value gets stored in an odd-looking decimal format. For example, 2455769.105023148.

Depending on the SQLite version, I may or may not be able to convert the returned date field using JavaScript’s date parsing functions for fields inserted with CURRENT_TIMESTAMP:

Client SQLite version Format Supports JS Date parsing
Chrome (Win) 13.0 beta 3.7.6.3 NO
Firefox (Win) 5.0 3.7.5 NO
PlayBook AIR Runtime 3.7.3 YES

My concern is that the code which now works with the PlayBook might break when it gets its next SQLite update. Guess I’ll burn that bridge when I get to it.

I should also mention a great Firefox add-on called SQLite Manager that allows you to manage these databases.

Oh, and how did I get the SQLite version?

SELECT DISTINCT sqlite_version() AS version FROM sqlite_master;

I’ll leave the rest up to you…

cathyj

Flex 4 ACE Exam

Wednesday, July 27th, 2011

By Cathy Jin – Consultant

I passed the Flex 4 ACE Exam (#9A0-129) today!  The following learning resources will be helpful if you’re also looking to be certified for Flex 4.

1. Flex 4 ACE Exam Preparation Guide

http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/en/devnet/flex/pdfs/ace_exam_guide_flex4.pdf

2. Adobe Authorized Technical Training Course Learning Guide:

New Toronto Group is an Adobe Authorized Training Partner and provides instructor-led training courses on Flex 4 and AIR 2.0.

Flex4: Developing Rich Internet Applications

Flex4 and LiveCycle Data Services 3: Data Driven Development

Air 2.0: Building Beyond the Browser with Adobe Flex 4

3. Practice exam engine – Attest 3

http://software.pxldesigns.com/attest3/

4. Flex in a Week video training

http://www.adobe.com/devnet/flex/videotraining.html

5. Adobe Flex 4 online documentation

http://help.adobe.com/en_US/flex/using/index.html

6. ActionScript 3.0 Reference

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/index.html

7. Tour de Flex

http://www.adobe.com/devnet/flex/tourdeflex.html

 

Good luck!

alaint

Adobe Flash Builder 4.5.1, AIR 2.7 and iOS

Monday, June 20th, 2011

By Alain Thibodeau – Consultant

Before today, we could only get AS3 projects created with Flash Builder 4.5 onto an iOS device. Adobe has now released Flash Builder 4.5.1 which includes the option of creating a Flex project and exporting it to your iOS device. This long awaited release brings us relief from having to manually create our ipa files with ADT and the command line.

Last week, Adobe also released Air 2.7. This release brings great improvements to rendering for iOS which is said to be up to 4 times faster. Take note that Flash Builder 4.5.1 does not ship with Air 2.7, but includes the Air 2.7 packager for iOS, taking advantage of the new enhancements. You will have to manually update Air 2.6 to 2.7 if you want to use it with Flash Builder.

It is easier to create ipa files from Flash Builder 4.5.1, however the same process hasn’t changed for Apple. Here is a brief explanation of what is needed:

1. Register as an Apple developer
2. Sign on to the iOS developer program – $99
3. In your iOS provisioning portal get a developer certificate:

  • Generate a signing request; if you are on windows you can use openSSL
  • Get your certificate approved by your corporate account manager, or approve it yourself if you are and admin
  • Download your certificate and convert into a p.12

More information here.

4. In your iOS provisioning portal register your development device with Apple.
5. In your iOS provisioning portal create a development provisioning profile.
6. Once your ipa is created, use iTunes to transfer your application to your iOS device.

Serge Jespers created a few videos on how to create an ipa file from Flash Builder 4.5.1 and Flex, take a look at his blog.

Also be sure to take a look at NTG’s training courses: “AIR 2: Building Beyond the Browser” and “Complete iPhone/iPad Software Development“.

alaint

Adobe AIR on Televisions

Thursday, June 2nd, 2011

By Alain Thibodeau – Consultant

While everyone is trying to figure out who has the best tablet, there is an exciting phenomenon happening in the world of home entertainment. Industry leaders are bringing the Internet to the television and Blue-ray players.

In the past several years there have been several options like the D-Link Boxee Box, but take a look at the televisions and blue-ray players on sale at your local store now and notice that most of them can connect to the Internet directly. Every manufacturer seems to now have their version of the future. LG has NetCast, Samsung has Smart TV, Panasonic has Viera Cast. There are also several platforms emerging such as GoogleTV and Yahoo Connected TV.

Several years ago however, before all these new televisions came along, Adobe started the Open Screen Project. It has the primary function of enabling rich experiences across any device, anywhere. While the Open Screen Project has a much larger ambition (take a look at the video), bringing the Internet to the television is just part of it. Amidst all this new technology, Samsung has announced earlier this year that their 2011 line of televisions and blue ray players will support Adobe Air and Flash Player 10.1. They are the first to support Adobe AIR and Flash Player since the Open Screen Project was started.

This announcement not only brings the new possibilities of porting your AIR/Flash applications to the television, but opens the door to a whole new world of applications! Are you ready?

Here are some resources to get you started:

http://www.samsungdforum.com/

http://www.adobe.com/devnet/devices/flash_platform_tv.html

http://tv.adobe.com/watch/max-2010-envision/learn-about-the-samsung-sdk-to-distribute-your-air-apps-to-samsung-smart-tvs/

http://tv.adobe.com/watch/open-screen-project/rich-media-apps-powered-by-adobe-air-for-tv/

Derek Santos

Flex Code Coverage in Flash Builder

Wednesday, March 2nd, 2011

If you’ve ever written an automated test, then you know that code coverage can be invaluable to your team.  It lets you know how much of your code is  being tested and where improvements can be made.  For Flex, tools like FlexCover have served this purpose.  Since September 2010 however, you can use a coverage plugin for Flash Builder.  This plugin for Flash Builder allows you to see code coverage from right within your IDE.

AS3 Code Coverage Plugin

AS3 Code Coverage Plugin

You can find the plugin here.