Archive for June, 2011

oliverm

PlayBook SDK and Simulator with AIR 2.7

Tuesday, June 28th, 2011

By Oliver Merk – Principal Consultant

An updated version of the BlackBerry® Tablet OS SDK for Adobe® AIR® and the included BlackBerry® PlayBook® Simulator are now available at: http://us.blackberry.com/developers/tablet/adobe.jsp

A couple of things to be aware of when upgrading.

First, make sure you have upgraded to Flash Builder 4.5.1.

Next, backup and delete the blackberry-tablet-sdk-x.x.x folder from {drive}\{Program Files}\Adobe\Adobe Flash Builder 4.5\sdks

Run the installer that you downloaded from the site above: BlackBerryTabletSDK-Air-Installer-1.1.0-2390-Win-201106171136.exe

Unlike the previous version, the SDK now gets installed under {drive}:\{Program Files}\Research In Motion\blackberry-tablet-sdk-1.1.0.

Also, the simulator is now in this new location as well, so update your VMWare® Player to point to the new VM path.

If you have any projects that you’d like to upgrade, do the following:

  • Leave the app.xml namespace at AIR 2.6 (application xmlns=”http://ns.adobe.com/air/application/2.6″). If you try 2.7 like I did, it won’t compile.
  • Remove any hacks such as the monkey-patch swc, compiler additions and extra PlayBook packaging options that you used to get your apps working with the old Simulator.
  • Ensure that the IP address of the new Simulator is updated in your Run/Debug configuration settings.
  • Clean the project and let it rip…

Please let us know if you run into any problems using the new PlayBook® SDK.

Also check out NTG’s courses for developing apps for the PlayBook using WebWorks and Flex/AIR

Derek Santos

Parsley vs. Cairngorm 2 for Building Flex Apps

Monday, June 27th, 2011

By Derek Santos – Consultant

There are definitely a good amount of Flex Frameworks out there nowadays; but choosing the right one can be a daunting task.  While Cairngorm 2 is arguably the most popular, Parsley is now a major contender. In fact, Cairngorm 3 contains similar concepts as Parsley, and even suggests it as part of its framework.  Of course, deciding which one to use all depends on what you’re trying to do, and how large and complex your application is.

The nice thing about Cairngorm 2 is its ease of use and its well defined architecture.  This doesn’t mean Parsley is difficult, but it does have a slightly steeper learning curve in exchange for more features and customization.  If you’re building a simple application, Cairngorm 2 is probably the way to go.  More and more applications, however, are beginning to require something more robust and extensible.  This is where Parsley comes in.  I’ve listed below the pros and cons of each framework.

Cairngorm 2

Pros

  • The Cairngorm 2 Event framework is familiar to Flex developers
  • Shorter learning curve
  • Small footprint compared to Parsley
  • Well known to the community

Cons

  • Hard to extend and customize
  • Use of singletons(arguable)
  • App can become polluted with boilerplate code
  • Not much support for Flex modules

Parsley

Pros

  • Dependency Injection
  • Event/Messaging framework can be customized
  • Documentation is very good
  • Lots of features that are useful in larger applications
  • Completely customizable/extensible

Cons

  • Steeper learning curve
  • View configuration can be a memory hog if not careful
  • Larger footprint
  • Requires some decisions upfront to clearly define your architecture

What I’ve mentioned above is obviously just my own opinions, I’d love to hear the communities opinions as well so please comment if your agree or disagree with what I’ve said.

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“.

andreiv

List of Tablet Screen Resolutions and Sizes

Monday, June 20th, 2011

By Andrei Vanahel – Consultant

As developers for tablets we should always consider different screen sizes and screen resolutions.  With the variety of tablets currently available on the market, it’s easy to get your UI broken especially if you are developing for Android or developing an AIR (or HTML5) based application which is intended to run on different devices. I’ve decided to put together a list of screen sizes and screen resolutions for the most common devices on the market:

Tablet Screen Size Screen Resolution OS
Samsun Galaxy Tab 7″ 1024 X 600 Android
Samsun Galaxy Tab 10.1″ 1280 X 800 Android
Motorolla Xoom 10.1″ 1280 X 800 Android
HTC Flyer 7″ 1024 X 600 Android
Acer Iconia 10.1″ 1280 X 800 Android
LG Optimum 8.9″ 1280 X 768 Android
Dell Streak 7″ 800 X 480 Android
Viewsonic Viewpad 7″ 800 X 480 Android
HP Touchpad 9.7″ 1024 X 768 webOS
iPad 9.7″ 1024 X 768 Apple iOS
iPad 2 9.7″ 1024 X 768 Apple iOS
BlackBerry PlayBook 7″ 1024 X 600 QNX
edv

NTG is on Facebook and Twitter!

Friday, June 17th, 2011

NTG has made a commitment to publish more technical blog content in order to further support our developer community. To ensure our readers are staying up to date on new posts, NTG is now on Facebook and Twitter to open provide alternative means of communication. So be sure to “like” the New Toronto Group Facebook page, or follow @NewYYZ if you want to stay up to date with the new and improved NTG blog!

If you have a request for a possible blog topic feel free to include it in the comment box.

cathyj

Creating a Custom Object in LiveCycle Designer

Tuesday, June 14th, 2011

By Cathy Jin – Consultant

To improve form development productivity, we should always think of reusing existing content as much as we can.  Adobe LiveCycle Designer provides some good features to accomplish this such as using custom objects and form fragments.

If you have some designed objects which can be reusable within multiple forms, you can first group them into a subform and then create a custom object. For example, several business forms have an employee information section including first name, last name and employee ID number.

The benefit of using the custom object is that you treat it as one object instead of multiple objects. When using it, just drag it to your form like other standard objects. You only design it once all formatting and scripts associated with the objects are retained to be reused among all forms. If you like, you can change it later to meet requirements for a specific form. Changing the custom object in one form won’t affect other forms.

The basic steps are as follows:

(1)   Add an Object Library group

(2)   Select all objects in the form and wrap them into a subform

(3)   Drag the subform in the form to the opened new Object Library group tab

(4)   Fill in the custom object name and description for the Add Library Object dialog

After creating the custom object, you can reuse it by dragging and dropping the custom object to any location you want in other forms.

Chad Upton

BlackBerry PlayBook Tips and Tricks

Wednesday, June 8th, 2011

By Chad Upton – Senior Consultant

I’ve been using the BlackBerry PlayBook for a number of weeks now and I’d like to share some useful actions, most of which are not well known.

 

PlaybookSwipes

Swipes

  • Show/hide the title bar inside an app – swipe along the path of a red arrow
  • Show/hide the keyboard – swipe along the path of the blue arrow
  • Rotate the simulator between landscape and portrait mode (simulator only) – orange arrow

Power

  • Wake up from standby – swipe from bezel to bezel (side/side or top/bottom)
  • Restart or shutdown – tap the power icon in the status bar to reveal a menu that has shutdown/reset options (OS 1.0.5+) or hold the power button for two seconds or tap the power app
  • Power cycle – hold the power button until it begins rebooting

Keyboard

  • Add an ellipse – hold down the letter M to reveal a new character menu
  • Add the copyright symbol – hold down the letter C to reveal a new character menu
  • Add the trademark symbol – hold down the letter T to reveal a new character menu
  • Add the registered symbol – hold down the letter R to reveal a new character menu
  • Add the paragraph symbol – hold down the letter P to reveal a new character menu

Other

  • Mute - Hold the play/pause button for 2 seconds
  • Screenshot - Press the volume down and volume up buttons at the same time, photos appear in the pictures gallery
  • Caps Lock – Hold the shift button on the keyboard for one second
  • Add a period – Double tap the spacebar when typing (doesn’t work in all apps), same as BlackBerry and Android phones and iPhone/iPad
  • Show calendar – Tap the clock in the status bar
  • Keyboard and mouse – pair it with a bluetooth keyboard and/or mouse (right mouse button used for bezel gestures)
oliverm

jQuery Mobile With WebWorks Gotcha

Monday, June 6th, 2011

By Oliver Merk – Principal Consultant

Since RIM’s WebWorks platform for the PlayBook is based on HTML5, it’s natural to use a popular JavaScript framework such as jQuery Mobile. One thing to be aware of when creating a WebWorks app in this way is that the jQuery Mobile framework relies on AJAX calls to load pages. When your HTML is hosted on a server, this works great. But when running a WebWorks application you’re actually running off the file system, where the URL starts with file:///. If you try to link from your main index.html to another HTML file using jQuery Mobile, the browser throws an error: XMLHttpRequest cannot load file file:///… Origin null is not allowed by Access-Control-Allow-Origin. If you run your HTML in Google Chrome and open the Developer Tools (Ctrl-Shift-i), you’ll see this error in the console. jQuery Mobile pops up a quick error message as well: Error Loading Page.

Basically, the AJAX call is failing because the browser is considering a file request as though it were a request to another domain and prevents it, for your own safety and security.

The remedy for this is to create all of your jQuery Mobile “pages” in one file. That is, having multiple page tag sets in your index.html file:

<div id="faq" data-role="page">...

To “go to” these pages requires that your anchor tags point to the id of the “page” you want:

<a href="#faq">FAQ</a>

Of course, this becomes a bit unweildy for larger applications since all layout now has to be in one file.

I’ve seen this problem reported as a Chrome bug, so it could really be a WebKit problem. Hopefully this will get fixed soon and find its way into the PlayBook’s WebKit-based browser.

Please comment if you’ve run into this or found another solution.

seanh

HTML5 vs. Flex – How Do They Compare

Friday, June 3rd, 2011

By Sean Hopen – Consultant

HTML5 is the latest version of HTML. This new standard provides HTML features that were previously offered only through plug-ins like the Flash player.  I’ve been wondering where this puts Flex and Flash. This post summarizes what I’ve recently discovered.

The new HTML5 features make it more useful for creating RIA’s (see examples here).  Some of the key new features are support for video, a canvas that can be used along with JavaScript to do animation, drag-and-drop, and some other useful features in the creation of applications.

From a Flex/Flash point of view these are nothing new or exciting. We’ve had them for years. And few designers will want to create animations using JavaScript. There are also many things you still can’t do with HTML5 (see here). This is only a starting point, HTML5 will need many tools (which are starting to be available now) that may take years to give us what Flash can do now.

From a business point of view, we want to use HTML5 as much as possible for maximum reach. One of the biggest issues for Flex is Apple’s refusal to support plug-ins on its iOS (see here). Note, we can now develop apps for the iPhone or iPad, it’s just that the browser will not allow Flash content from webpage’s to play in the plug-in.  This may force enterprises to develop simpler apps on HTML5 or modify their RIA’s to work on mobile devices. Arguably, mobile devices need a different design anyway, so creating separate apps isn’t really so onerous from a development point of view. But from a deployment point of view it’s definitely lacking — visiting a webpage beats getting an app from the AppStore, even if it’s free.

The open standard is a very good thing for business. There will be more innovation, and better sharing and collaborating via the standard. Old HTML and XML are excellent examples of how an open standard fosters competition, as opposed to single-vendor platforms where one company controls the future as well as access to the technology.

Whatever its apparent shortcomings are now, who knows what we’ll do with HTML5 in the future. From a developers standpoint it’s going to be time-consuming learning about, working around, and testing for the compatibility issues – some things may not look right, or even work on some browsers. And we have to keep track of each version; whereas Flex and Silverlight are pretty much guaranteed to look the same everywhere (somewhat like PDF does for documents).  Also HTML5 is still in draft, though some of its features are already implemented in browsers.

Third party tools and libraries can help ease the pain of creating HTML5 that looks the same everywhere. But if third parties are needed to make HTML5 easier to work with, I wonder if this doesn’t mock the open standard. We still have to choose the vendor of our tools, which if proprietary, become a de facto platform again.  The point is: chose your vendors wisely!

From a user’s point of view, the HTML5 experience is not likely to be as rich as you can get with Flash and Flex except for simpler interactions, but still way better than the old HTML (which can only be good for users in terms of cost, and quality of experience).

HTML5 will be a good choice for simpler sites that need maximum reach.  And anything that can be done in HTML5 should be in my opinion.  It’s also important to note that the choice isn’t mutually exclusive. RIA’s will work with HTML5, and Microsoft and Adobe both seem committed to making this work (ex. Adobe’s flash-to-html5 tool, and Microsoft’s focus on HTML5).

Lastly, there is a good blog post from Gartner on this topic (see here). In particular I think his last point is an important warning — that most people won’t use Flash or HTML5 to its potential because:

“Most enterprises don’t care enough about the user experience to change their habits (developer-driven, vendor-driven, stakeholder-driven). The principles of creating effective user experiences are well-known among successful external-facing ecommerce or consumer sites such as Amazon, eBay, Expedia or Facebook. Unfortunately, it will likely be a long time before these principles become part of the average enterprise skillset.”

I’m more optimistic about that, but user experience is something we still have to evangelize for.

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/