BlackBerry Hackathons – Come out and Play(Book)!

Archive for the ‘Flash’ Category

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 »

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 »

Flash Profiler: getting object references to fix a memory leak.

Monday, October 24th, 2011

Usually it takes some time and effort to allocate a memory leak; to be precise, to find out what exactly causes the objects to stay in memory rather than being garbage collected. As we all know, an object is not eligible to be garbage collected if this object is referenced by other objects. However, it’s not always obvious what exactly is holding the object.

With the help of the Flash Profiler, you can get the exact line of code where the reference what holds the object is created. I should mention that it doesn’t always work as expected, but in most cases it’s pretty helpful.

1. Run Flash Profiler.
2. On the Connection Established pop up check “Generate object allocation stack traces”

3. Take a memory snapshot.
4. Double click on just created Memory Snapshot. This should open a Memory Snapshot view where
you will see all object what are currently in memory.
5. Find the object you need in the Class column
6. Double click on this object, that should open an Object References view where
you will see all the instances of the selected object. Each instance has a reference tree.
7. Expand the tree and select the lowest “leaf”, that should update the “Allocation trace:” widget with
the information about call stack for that instance.
8. Walking through the Allocation trace you can get a location and exact line of code where the reference is set.

Tip: Double clicking on the entries in the allocation trace widget opens the class and navigates you to the line of code you looked for.

Posted in Flash, Uncategorized | No Comments »

Live From Adobe MAX 2011 – Day 3

Wednesday, October 5th, 2011

Third day notes from Adobe MAX 2001 in Los Angeles. A lot of these comments are my raw reactions at the time (apologies in advance).

CSS Takes Over the World Session

- Presenter: Jonathan Snook from Yahoo!

- CSS taking over from JS many visual effects

- Can use CSS and jQuery to abstract some funcitonality such hover effects

- Validation in HTML5/CSS3 in the early stages – still need to validate data on server side

- Animation can be done w jQuery or new CSS3

- Once CSS3 better supported, we can use transitions/animations to reduce overall page size.

- CSS filters spec coming soon (blur, saturate, invert, grayscale, sepia…)

- CSS shaders slao coming soon – uses openGL

- Session basically an intro to HTML5/CSS3

Desktop AIR Tips & Tricks Session

- James Polanco/Aaron Pederson DevelopmentArc – co-authored several Flex whitepapers

- Some OS differences between AIR apps

- Native chrome vs custom chrome: if you go custom, it’s risky: there may be inconsistensies with expected user experience

- Global menus (OSX) vs Window-specific menus

- File access – path separators

- Possible file locking or permissions errors depending on OS: use try/catch

- Security – use encrypted local storage; OSX users may deny access to their keychain

- Local DB: check for existence

- Storing user prefs; many options: app storage, DB, online. Determined by level or security required.

- Licensing: 3rd party (e.g. Shafiry) or roll your own

- AIR 3: no 3D for mobile yet; native extensions; captive runtime (issues with updating)

AIR Extensions for Mobile Session

- Most of this over my head when he went to the C code

- Good option for legacy code reuse

- AS API

- can write in Java

- extensions available onadobe dev net

- fb 4.6 – load swc

- android can be extended

- command line to create an .ANE (AIR Native Extension) file

- extensions should fail gracefully…

Node.js Session

- This is just cool.

- Will investigate further, but looks like a powerful way to leverage client-side JS skills on the server.

- Lots of libraries to help with basic server functionality, sockets, database access.

- Check out Sencha Connect Node.js library

- use npm to register libraries

- Check out LearnBoost

- Sim Bateman is the best speaker at MAX that I’ve seen in a long time.

Keeping Current with ColdFusion Session

- Cool new HTML5-based charts coming; fallback to Flash (!)

- WebSockets (from HTML5) support from CF: bi-di comm between client/server

- New CFWebSocket tag – nice demo: sent message from one page, updated HTML5 chart in another

- Call wsPublish, specify channel and message

- OSMF-based media player (HTML5 video w Flash fallback); full control over playback

- Geolocation

- jQuery Mobile integrated

- CF being called “Enterprise Glue”; integrates with many technologies (app servers, mail, etc.)

- CFSharepoint (can write Webparts)

- REST services

- ORM improvements

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

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 »

Why is Flash Still Relevant?

Tuesday, July 12th, 2011

By Rod Nolan – Consultant and Senior Instructor

We, as a company, frequently share interesting technical information that we stumble across in our daily travels. Recently, this message appeared on our internal techie email list.

Why do we need Flash, again?
http://paperjs.org/

Short message. Important question.

The paperjs examples (http://paperjs.org/examples/) are pretty cool. I’d encourage you to check them out. They remind me of some of the neat experimental examples from some much earlier days in the Flash world (http://www.bit-101.com/flafiles/). Interactive vector graphics in the browser is nothing new. How old is Flash now? But could it be be possible that this type of functionality works in the plugin-less browser now? Could it really be true?

Sorry, no. Of course not. The examples don’t work in Internet Explorer 8. And the developers openly acknowledge this fact (http://paperjs.org/about/#browser-support). The “Let’s move forward” comment speaks volumes.

A follow up message in our email thread:

Yup – “to hell with IE8″ seems to be the mantra for anyone implementing HTML5 features like the canvas. Can’t say I disagree. The alternative is to wait ten years for everyone to be on IE9 or higher.

So I wondered if IE8 and other older browsers are still relevant? The w3Schools site (http://www.w3schools.com/browsers/browsers_stats.asp) puts IE8 at 14% and IE9 at just 3%. Wow, that’s a lot lower than I expected! Of course, your web server logs (or Google Analytics) would paint a more accurate picture of what browsers are hitting your site. But, the simple fact remains that in our business, “No, we don’t care about supporting IE” is simply never heard. We will never will have the luxury of thumbing our noses at older browsers.

I can’t wait ten years (or any number of years, for that matter) for IE9 (or any browser) to become the standard. Because that will never happen. The browser vendors are not cooperating in any real way to push a common agenda. Just look at the current state of HTML 5. Which browsers support which features? How many workaround, fall back, browser specific tags and tag attributes are around today? The browser vendors always have and always will push their own agendas. And that will always add up to challenges for developers who use browser based technologies, especially for public facing sites.

But back to the question: Why do we need Flash, again? To be fair, I don’t think that paperjs was ever intended to replace Flash. The foundation for this kind of coup just doesn’t exist. I don’t think we’ll ever see a day where we can use JavaScript / HTML / CSS to develop the same types of applications that Flash allows us to write with that “write once/run anywhere” mentality. Flash means cross browser capabilities AND rich functionality. It makes cool, functional applications possible and it makes life easier for developers. Today.

We would love to hear some other opinions on this. Please feel free to summarize your thoughts in a comment below.

Tags: Flash, HTML5
Posted in Flash, General Knowledge, HTML5 | 1 Comment »

Packaging Flex/Flash Applications to iOS with ADT

Tuesday, July 5th, 2011

By Alain Thibodeau – Consultant

The release of Flash Builder 4.5.1 took care of exporting mobile applications for iOS and made it a lot simpler. However, there are times when you still need to use ADT or when you simply don’t have Flash Builder 4.5.1.

At first, it can be confusing if you are not familiar with ADT and the command line to package your swf to iOS (there is plenty of documentation on the subject on Adobe’s site). To help with the process, Peter Vullings built a helper tool for us.

ADT helper tool (found here) can speed up the use of ADT and can help you learn the syntax. Follow the instructions on the site and make sure to point ADT helper to the AIR 2.7 SDK. If you don’t already have it, you can get it here. Once you hit “the deploy to iOS” button, ADT helper will create an iOS directory in your project. This directory will include your generated application file and a build.bat. If you need to deploy again, you can simply run the bat file. If you open the bat file you can get a better understanding of how to use ADT to deploy your swf to iOS.

Take note that it is assumed that you have all the prerequisites needed to deploy, such as a provisioning file and certificates. For more information you can see my previous post.

Tags: AIR, Flash, flash builder, Flash Player, Flex, ios, mobile development
Posted in Actionscript, AIR, Flash, Flash Builder, Flash Player, Flex, General Knowledge, iOS | No Comments »