The Gist of Code Sharing

Archive for the ‘Flash Builder’ 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 »

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 »

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: design mode, design view, disable, error, flash builder, memory
Posted in Flash Builder, Flex | 1 Comment »

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 »

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 »

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!

Tags: Actionscript, AIR, BlackBerry, flash builder, Flex, Mobile, playbook
Posted in Actionscript, AIR, BlackBerry, Flash Builder, Flex, Mobile, RIM | 1 Comment »

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.

Tags: Actionscript, AIR, Flash, flash builder, Flex, HTML5, mobile development
Posted in Actionscript, AIR, Eclipse, Flash, Flash Builder, Flex, HTML5, Mobile | No Comments »

Generate a Certificate with ADT and ANT

Wednesday, August 10th, 2011

By Alain Thibodeau – Consultant

AIR and mobile applications need to be signed. Most of the time we use the same self-signed certificate to package our applications. There are times when you may want to use a different self-signed certificate or create one on the fly. This is possible using ADT and ANT.

Adobe’s documentation states the ADT certificate command use like this:

adt -certificate -cn name -ou orgUnit -o orgName -c country -validityPeriod years key-type output password

To incorporate with ANT we would do something like this:

Properties file:

cert.keystore=mycertificate.p12
cert.name=SelfSignedCertificate
cert.orgunit=Software Development
cert.orgname=newyyz
cert.country=CA
cert.keytype=2048-RSA
cert.password=mypassword

Build file:

You can find more information here: http://help.adobe.com/en_US/air/build/WS901d38e593cd1bac1e63e3d128fc240122-7ffc.html

Tags: AIR, Android, flash builder, Flex, ios, Java, mobile apps, mobile development
Posted in AIR, Android, BlackBerry, Eclipse, Flash, Flash Builder, Flash Player, Flex, General Knowledge, iOS, Java, Mobile | No Comments »