The Gist of Code Sharing

Archive for the ‘AIR’ Category

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 »

Getting started with AIR and BB10

Wednesday, May 23rd, 2012

I just started to play with the latest BB10 SDK for Adobe AIR. I had a couple of issues right away so I’m going to document them here to save you the headache.

First, make sure you download the correct SDK. Sounds simple, I know, but it wasn’t immediately apparent that there are currently two different SDKs available for download.

BlackBerry PlayBook SDK for Adobe AIR, easy to find but not the one I wanted
BlackBerry 10 SDK for Adobe AIR beta, the one I wanted but tucked out of the way

The Tools link in the bottom half of the page points to Tablet OS SDK for Adobe AIR v2.0 which is not the right version. If you’re after the BB10 SDK, you have to click on the rotating banner above the Tools link when it comes around to the “BlackBerry 10 SDK for Adobe AIR beta now available” section. That will eventually bring you to the page where you can download the BlackBerry 10 SDK for Adobe AIR v3.0 beta. Here’s the page https://bdsc.webapps.blackberry.com/air/beta/download/sdk/ where you’ll also find the link to download the new simulator. Moral of the story: don’t ignore rotating banners.

After installing the SDK and the BB10 simulator, I tried to run the Hello World sample as described here https://bdsc.webapps.blackberry.com/air/beta/documentation/aa_getting_started_bb10/Create_your_first_application_FB_ms_2006005_11.html and I got some errors on the imports for classes from the qnx.dialog package.

I had checked this option: Project Properties > ActionScript Build Packaging > BlackBerry > Add platform specific libraries to the class path so I went on the hunt for qnx.dialog. This is what I found.

I found two entries in the forums which led me to the solution but to summarize, here’s what you have to do in Flash Builder 4.6:

Project Properties > ActionScript Build Path > Add Folder > C:\Program Files (x86)\Research In Motion\blackberry-tablet-sdk-3.0.0\frameworks\libs\qnx\ane

Project Properties > ActionScript Build Packaging > BlackBerry > Native Extensions tab > turn on all the Package checkboxes (might have to scroll horizontally to see them)

This links in the additional extensions required to use all the APIs.

Read this for the background story: http://supportforums.blackberry.com/t5/Adobe-AIR-Development/BB10-Error-1065-SkinAssets-is-not-defined/td-p/1720721

You may have to rework some imports in the sample code to refer to the qnx classes instead of the flash classes but that should do it. It’s also worth noting that this doesn’t seem to be a problem with FDT, only Flash Builder.

Happy coding.

Tags: AIR BB10 BlackBerry PlayBook ActionScript Native Extension
Posted in Actionscript, AIR, BlackBerry, Flash Builder, RIM | No Comments »

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: AIR, HTML5, Native, WebWorks
Posted in Actionscript, AIR, Best Practices, BlackBerry, Flash, Flex, HTML5, JavaScript, Mobile, RIM, WebWorks | 1 Comment »

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:

Close all open tabs in Flash Builder (middle click on tab or left click on the x on the tab)
Close all open projects in Flash Builder (right click on project > close project)
Close Flash Builder
Open Flash Builder
Open any necessary projects
Clean All (Project > Clean > Clean All Projects)
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: error, flash builder, Flex, flex problem, unknown problem
Posted in Actionscript, AIR, Flash Builder, Flex | 6 Comments »

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: Actionscript, AIR, flash builder, Flex, Mobile
Posted in Actionscript, AIR, Flash Builder, Flex, Mobile | 9 Comments »

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: 4.6, Flex, hrule, line, mx, sdk, solidcolorstroke, spark, vector, vrule
Posted in AIR, Flex | No Comments »

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: Actionscript, Flex, IMXMLObject, ViewHelper
Posted in Actionscript, AIR, Flash, Flash Builder, Flash Player, Flex | No Comments »

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

<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 »

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

Amazon SimpleDB (homepage)
SimpleDB summary (wikipedia)

Libraries

Documentation

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

Tags: amazon, Chad Upton, cloud, M/DB, simpledb, web services
Posted in Actionscript, AIR, Flash, Flex | No Comments »

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 »