Thursday, December 23, 2010

A Couple of Hacks for Mobile Flex Development

The new Flex Hero 4.5 SDK has great features and the architecture for mobile applications is very cool.  Working with it over the last few months has also taught me a couple of coding hacks to share.  First let's look at how it works.

A Flex Mobile application is composed of a minimum of three files.  The first is the main entry point into the application, which has two main content areas.  The top content area (shown below in green) may contain three content areas.  These are Navigation content, Title content, and Action content. Note that these are optional and some applications might use different navigation schemes such as creating a Vector of Spark Navigators.


The gray area below the title is the main content area of an application.  This is controlled by the navigator(s).



When you set up a new Mobile application, the minimum three files are the main entry point, the first default Home or First View, and the Application Descriptor. The descriptor file has the same basic purpose as in previous versions of AIR except it has been extended to declare Android manifests and other items.  The graphic below depicts a larger project and shows some of the main components of a mobile application.


When you launch a mobile Flex application, the first view may be declared within the entry point to the application.  In the example above, MobileFileBrowser.mxml has a single declaration that points to MobileFlexBrowserHome.mxml.   This is declared in line 5 of Code Sample 1 below.

Code Sample 1

Line 6 shows a great trick.  Mobile applications may take a while to initialize and providing user feedback during that time is sometimes useful.  The splashScreenImage shows up when the application launches to let the user know the app is initializing.

Now let's take a deeper look at how the navigation works.  Below is a screenshot of the Mobile Slashdot RSS reader I am working on.  The first half of the tutorial to build it and the source code are available at http://technoracle.blogspot.com/2010/12/mobile-slashdot-rss-reader-tutorial.html. Note that the current code base has some need for optimization.


The Home view in this case contains a list and has a service call linked to it to reach out and grab an RSS feed from slashdot.org.  The service call (getData()) is initiated on an event called "viewActivate", which is fired when as the view becomes active.  When a user gets this view, they may select an item from the list and the view navigator will then pass the data object to a new view and instantiate the new view.  In this example, the RSS item is passed and details are shown in the new view.  If the user wishes to navigate backwards, they simply use the back button.  The code for this is written as pushView(View, Data) and popView().  

Here is an important tip! Consider what happens in a mobile scenario when the user examines several different RSS items and navigates backwards to the main list.  When the new view is active, the old view does not persist by default so a new service call must be performed every time the list view is shown.  If you link your service call up to the viewActive event as shown below on line 5 of Code Sample 2, your application will make the service call each time the view becomes active.

Code Sample 2


Needless to state, in many situations, this is architecturally really bad as it will eat up both bandwidth and battery/CPU life.  Luckily, this problem can be rectified with a single declaration.  The better way is to not call the service based on a viewActivate event and instead allow the user to trigger it with a button or use the applicationInitialize event.  Once you do this, you can simply add the declaration that the destructionPolicy is none as shown below in line 7 of the code snippet. If you download the current source code from part one of this tutorial, note that this has not yet been done and is being slated for part 2.


Code Sample 3


Now let's consider another way you can allow users to navigate through your application.  The Slashdot RSS reader application has an information view.  To access the information view, the call is made directly from the action content area.



When the user clicks the information icon, a call is made through the navigator.activeView object as shown in code samples 4 (below) and 2 above.

Code Sample 4


Note that on line 29 of code sample 4, the call is made to the public function on line 19 of code sample 2.  This function only requests that the navigator push the information view, in this case with no accompanying data.  Since the information view will also have the info icon in the parent container, it too must contain the showInfo() function or an error will be thrown.   If you wrote the function exactly the same as in the other views, it could lead to a recursive problem.  If the user keeps hitting the information icon, new info views get created and activated.  If the user hits the icon 25 times, they would have to hit the back button 25 times to return.

There are two ways to keep the view from being pushed more than once.  On line 10 of the code sample below is the function that gets called when a user clicks on the information icon.  Line 12 sets up a regular expression that will detect if the current view is the "InfoView".

Code Sample 5

Note that there is a "\d*" within the regular expression.  If you add a line of code to trace the name of the currently active view,  the console will show that the runtime appends some numbers to the end of the name as shown below.


Essentially the regular expression can detect if the activeView is already the InfoView and prevent it from creating another instance of itself.

The problem with this approach is that over time it becomes unmanageable.  A far better way to prevent this is to simply make the showInfo() function in the information view do nothing as shown on lines 8-11 of Code Sample 6 below.  Note that if you do not have the showInfo function in the info view, an error will be thrown when the user hits the icon.

Code Sample 6

This is a far better way to handle the problem.

Well, that is all for now.    A video tutorial will be out shortly to summarize some of these lessons and the source code for the RSS Reader will also be released.

Happy Holidays everyone!

Tuesday, December 21, 2010

My favorite 5 Slashdot Comments of 2010

I post a lot of stuff on Slashdot.org.  Here are some of my favorites:

1. http://slashdot.org/comments.pl?sid=1827706&cid=33945232

I guess people are worried that our state of the art igloo geometric designs, dogsled aerodymanics and maple syrup chemistry are in danger if poltical decisions are made without the benefit of science. Luckily there are only 78 of us in the whole country. We can probably sort it out in about a fortnight over a few Molson's beers while watching ice hockey. duane "Who won the damn gold medals at the last Olympics anyways?"
--
"Question everything, including this!" - http://technoracle.blogspot.com/

2. http://slashdot.org/comments.pl?sid=1788824&cid=33599702

Because there are lots of us who work at Adobe who have been very vocal internally about ensuring that Linux is a first class O/S and released at the same time as the other O/S's. That is why Linux is getting the 64 bit Flash Player. More and more of us are using Ubuntu and RHEL on the server (our enterprise ESB uses RHEL/(WebSphere || Weblogic || JBoss) as a reference implementation!). Now if we could only talk our bosses into CS5 for Linux.....

3. http://slashdot.org/comments.pl?sid=1694512&cid=32656498

On Flash and having a Choice:

You could say you are also forced to use a browser then. You have a choice. If you want to see certain sites in their entirety, you can choose flash. If you want to experience only the text, use wget. If you want to see something in between, use a browser. your choice. There are still some old guys who don't even like to load images and only read the alt text. Can't make everyone happy so giving people choice is the only path we can take.

4. http://slashdot.org/comments.pl?sid=1606598&cid=31724840

130 mb of ram while sitting idle? Then it's perfect for windoze and osx.... So what are the alternatives for *nix users now? dn grep this: s/$your_beliefs/$common_sense/i;

5. http://slashdot.org/comments.pl?sid=1575150&cid=31404260

you are right. The way Flash (the swf format only, not the whole platform) was written circa 2003, it wasn't optimized to go to mobile devices. There were some issues and technical hurdles to get around. Some of them were simple (like stopping FP instances that are not in the visible part of the screen) or simply reducing the frame rates of flash applications that are using battery power when they are not in focus). Some required much more thinking such as form fields receiving focus when the tab is hit from an HTML form element above a flash form element). To scale to mobile was a challenge which has been met with the Flash PLayer 10.1. The Google Nexus 1 phone (which I own) does a great job of running the full version of Flash (not Flash Lite). The FP 10.1 has *huge* technical improvements from previous versions Adobe is full on excited about HTML 5 too. There are some really cool possibilities about using HTML 5 features side by side with Flash. Serge Jespers did a great job of showing this on his blog late last week: http://www.webkitchen.be/2010/03/05/the-html5-flash-marriage-geolocation/ [webkitchen.be] The fact is that HTML being updated is not something everyone asked for, but in it's execution, there are some obvious features that I am glad to see such as the Video element. I do share some concerns about how more advanced API's get implemented (such as the document.evaluate(); API) for complex XSLT processing but hope the industry will figure it out. DN

"Any technology can be used for good or for evil. The only question is how you decide to use your coding time in between "
- Gandalf

Saturday, December 18, 2010

1001 Gifts for all of you

This year my family and I decided to give gifts of hope and inspiration for the holidays.  We  donated $1001 towards educating, feeding and helping entire villages become self sustaining via http://www.plancanada.ca.  This donation is made in the names of you, our friends and family and those who have inspired us over the years to think beyond what we need ourselves.

The gifts include a variety of items including mango trees, education materials, lifestock and home birthing kits.

Our only ask is that if you were planning on sending us a card, please use the money and effort, no matter how minute, to help those less fortunate instead.  We have everything we need and are truly blessed!

Merry Christmas, Happy Holidays everyone and thank you!

Wednesday, December 15, 2010

Mobile Slashdot RSS Reader Tutorial - Free Source Code

NOTE:  This is Part 1 of a two part series.  Part two is now posted here: http://technoracle.blogspot.com/2011/01/this-is-part-2-of-tutorial-to-build.html

This post will sum up a new AIR for Android tutorial I have been working on.  The video will explain everything (will be posted shortly).    The project is an RSS reader for Android mobile devices.  I chose Slashdot (News for Nerds. Stuff that Matters!) and used their RSS feed from this URL.  The end result was a functioning mobile application that installed and worked on both the Google Nexus One phone and the Samsung Galaxy Tab.  There are some lessons to be learned though as you will see from the video.


Building an Android Mobile RSS Reader in 30 Minutes from Technoracle on Vimeo.

The source code for the project is available here: SlashdotRSS.fxp
The Slashdot.apk (Android installer package) is here: SlashdotRSS.apk

Here are some screenshots.  I plan to upload a complete tutorial soon!

   

Here are some of the source code views:

Tuesday, December 07, 2010

Adobe molehill 3D APIs - real 3D!

I've been asked a lot lately about the Molehill project. "Molehill" is an internal Adobe code name for a set of low-level, GPU-accelerated 3D APIs we announced at MAX 2010 (another reason never to miss Adobe MAX)!   The new Molehill APIs enable advanced 3D experiences across screens through the Flash runtimes and allow developers to leverage GPU hardware acceleration for significant performance gains. 


How it works today in Flash Player 10.1


Flash Player 10.1 renders thousands of non z-buffered triangles at approximately 30 Hz.  For true 3D, z-buffering is required.  This refers to the management of image depth coordinates in three-dimensional (3-D) graphics models.  It is very difficult to accomplish in real time due to the immense processing power required.  Unlike X and Y coordinates where there is a physical boundary, Z coordinates can extend infinitely, although the range of human eye perception is somewhat limited.


You can spoof 3D effects today using the Flex attributes "rotationX, rotationY and rotationZ".  Here is a project I made using a simple photo that moves it in 3 axis based on user input.  This is not true 3D however.



The source code for this project:






The Adobe website on Molehill states: "With the new 3D APIs, developers can expect hundreds of thousands of z-buffered triangles to be rendered at HD resolution in full screen at around 60 Hz. Using the new 3D APIs in Flash Player and AIR will make it possible to deliver sophisticated 3D experiences across almost every computer and device connected to the Internet.


The 3D capabilities enabled by the new APIs will also be available to the broader developer community through popular ActionScript® 3D frameworks, such as Alternativa3D, Away3d, Flare3D, Sophie3D or Yogurt3D."


Probably the single best description is from Thibault's video embedded below.  I cannot wait to get my hands on the technology!



http://tv.adobe.com/watch/adc-presents/molehill-3d-apis

Monday, December 06, 2010

Generating a PKCS12 certificate for Android Market

I've been writing several Android applications lately (Video,   Scribbler,  FileBrowser) with the Flash Builder 4.5 (Burrito) preview release.  During the process of uploading one *.apk file I can across an error within the Android Market form.  Well, it wasn't a real error per se, more or less an oversight from me.  The error stated:


"Market requires that the certificate used to sign the apk be valid until at least October 22, 2033. Create a new certificate."






This is a requirement which I had overlooked.  By default, creating a certificate via Flash Builder (File > Export > Release Build) will not work as it is not valid for the length required by the Android Marketplace.  


I set out to make a proper certificate however there was not a lot of very current information available.  After a lot of searching, I found the answer right in front of me.  Using the AIR 2.5 SDK, you can create a self signed certificate using the line command tool.  If you have the same issue, follow these instructions:



  1. If not done already, download and save the Adobe AIR 2.5 SDK from http://www.adobe.com/products/air/sdk/

  2. With a line command tool, navigate to the /bin directory.

  3. Copy and paste the following command, replacing the values in braces with your own values.
    ./adt -certificate -cn (duaneallannickull) -ou (adobesystems) -o (sharkwithfrigginglaserbeamsinc) -c (CA) -validityPeriod 25 2048-RSA (./androidsigner.p12) (password)
  4. The country code must be in upper case characters and correspond to an ISO country code. For example, this is what I entered to create mine:

    ./adt -certificate -cn duaneallannickull -ou adobesystems -o sharkwithfrigginglaserbeamsinc -c CA -validityPeriod 25 2048-RSA ./androidsigner.p12 password

  5. Now enter the command "dir" (Windows) or "ls" (Linux || Unix) and you should see your certificate.  A screenshot is below. 

That's pretty much it.  You can use this to sign your applications in a variety of ways, depending on which development tools you use.  For Adobe Flash Builder 4.5, you can reference this certificate during the release process as shown below.

Thursday, December 02, 2010

Video Article - Comparing AIR for Android Development Processes

Yesterday I made a post about my experiences with the new Flash Builder 4.5 and 4.1 IDEs while developing mobile applications. Today, we follow this up with a video to illustrate some of the key points you'll need to get started.



Flash Builder 4.5 download

FileBrowser.fxp (Flash Builder 4.01/AIR 2.5 SDK project - 76 kb)
FileBrowser.apk (Android Package - 1.02 MB)
Installed application size = 1.02 MB (without graphics, icons, splash images etc)

MobileFileBrowser.fxp (Flash Builder 4.5 project - 840 kb)
MobileFileBrowser.apk (Android Package -1.78 MB)
Installed application size = 768 kb (with graphics, icons, splash images etc)

Have fun!

Wednesday, December 01, 2010

Mobile Development with Flash Builder (Tutorial and Source Code)


Today I am releasing a set of two applications, one built using the Flex 4.1 SDK and one built using the Flex 4.5 SDK (Burrito version of Flash Builder using the "Hero" framework).  Although the base application is essentially the same, the differences are astounding in terms of development ease and performance. 

The project itself is a simple project to demonstrate how to read/write to a file system.  The application is named LetMeC (“let me see”).   The screenshot below is of the application built using Flash Builder 4.01 overlaid with the AIR 2.5 SDK.  This one uses the FileSystemDataGrid component and has several helper classes.  The source code for the AIR 2.5 project is available here: 

FileBrowser.fxp (Flash Builder 4.01/AIR 2.5 SDK project - 76 kb)
FileBrowser.apk (Android Package - 1.02 MB)
Installed application size = 1.02 MB (without graphics, icons, splash images etc)



This second screenshot (below) is basically the same application written using the Flash Builder 4.5 Burrito preview.  This application is open and you can use it or install it on your device:

MobileFileBrowser.fxp (Flash Builder 4.5 project - 840 kb)
MobileFileBrowser.apk (Android Package -1.78 MB)
Installed application size = 768 kb (with graphics, icons, splash images etc)



Note that the installed sizes of the applications vary.  The first one is larger even though I never used any graphics for icons, splash screens or other bits.  The Flash Builder 4.5 Burrito application has a larger installer, however on the Google Nexus 1 disk, the installed application is only 768 kb, of which roughly 398 kb is images alone coupled with 230 kb of icons!  The Hero framework rocks! Here is a screenshot.




The differences in development are vast and I am definitely favoring the direction Adobe is running towards with respect to the Hero framework.  Mobile development in Flash Builder 4.5 is much easier.  For starters, there is a notion of "views" and features such as screen orientation are supported.  The first thing you will notice is that the list of components is greatly reduced.  The version of this I built using 4.1 used the component.  This component by itself is very heavy weight (it is still MX or Halo qualified, not Spark).  The scroll bars are difficult to use as the hit area on a touch screen is very small.  Also the orientation is something you have to do manually if you want your application to resize and reorient when the phone is tilted.

One item that works well on PC, Mac, and Linux is AIR’s “openWithDefaultApplication()” method.  No such luck on Android as the architecture uses a notion of “intents”.   It is easy to write code to access the functionality rather than accessing the notion of a "file".  One line of code will open up an SMS, URL, or even phone someone.  As the code samples from James Ward illustrate below:



Last thoughts?  I am now addicted to mobile development!  Adobe Flash Builder 4.5 rocks (even though it is a preview and somewhat "beta").  The most beautiful thing is that I can use 95% of my code for a desktop application too.

Try it for yourself.  Download the Flash Builder 4.5 preview from http://labs.adobe.com

I will post a video of this whole process very shortly on this blog.

Peace, love and may your code compile on the first try!

Thursday, November 25, 2010

Closing Thoughts from Infonex Social Media for Public Sector

Infonex only recently asked me to chair the event in Ottawa this week; however, I am very glad I had the opportunity to do so.  A special shout out to Philippe Renoir (@philipperenoir) who jumped in to co-chair the event.  Almost every speaker had a good message or some important lessons to impart.

Some items that distinguish Social Media from regular media:

Reach
- enables anyone to reach a global audience (potentially for free).
Accessibility – industrial media typically owned privately; social media tools are generally available to anyone at little or no cost.
Bi-directional – Conversation rather than publish pattern. Synchronous vs. Asynchronous!
Usability - industrial media production typically requires specialized skills. Most social media sites do not. Some define new skills, so anyone can operate the means of production.
Concurrency/Speed - the time lag by conventional media = long. Social media is virtually instantaneous responses; participants determine any delay in response).
Mutability - industrial media, once created, cannot be changed easily, whereas social media can be altered almost instantaneously by comments or editing. Newspapers are technically out of date the moment they leave the press and any notes scribbled on them are not seen by all readers.
Uncontrollable – no central point of control.
Measurable - unlike normal media you can determine who has spent time ingesting your message (not true for all forms of media)

Here is a quick summary of some of the messages I heard about public sector social media:

  1. Look before you leap: Before starting on a social media project, take the time to understand what you are getting into.  Use experience (yes - consultants) if required.
  2. Realize that is it better to be part of the conversation than being defined by it! Some people had issues with risk adverse managers who insisted that somehow the conversations in social media being negative to them are not happening.  Be part of the conversation and help your community.
  3. Determine whose voice you are talking with.  Are you talking for your department in an official capacity or are you a person who is sharing personal experiences?
  4. Conduct you social media campaigns with a strong ethics policy.  Identify yourself if commenting on a subject you are part of.  Disclose conflicts of interest. Be authentic (thanks @philipperenoir!)
  5. Be accountable.  Set a clear and consistent policy for communications and ensure it is regularly reviewed.  This also prevents potential issues if employees are dismissed for non-adherence.
  6. Ensure everyone in your government department buys in.  Make sure they have knowledge of the policy mentioned above and have a chance to provide input.
  7. Have clear, concise goals and metrics to judge your goals.  Understand what you are attempting to do and use the social media networks wisely.
  8. Don’t build it yourself!  Your chances of attracting a critical mass on your own platform are probably fairly small.  Using existing platforms is likely a better path (if possible).
  9. Start with baby steps.  Small manageable projects to start with will probably have better results.
  10. Don’t try to control social media!  You cannot and trying to do so will be like pouring gasoline on a fire.

All these are of course nonexclusive and perceived with my own filter!  Your actual mileage may vary.  Please comment if I missed something.

Time to fly back to snowy Vancouver!


Monday, November 22, 2010

Adobe in the Enterprise, HTML5 and LiveCycle ES

This is an interview I did in Los Angeles during the Adobe MAX event.  From the description:

"In this interview, we cover a wide range of topics with Adobe's Duane Nickull during the Adobe MAX 2010 conference.  Nickull looks at the state of the mobile web, HTML5 and it's role at Adobe, Flash Builder and the ease of deployment to multiple form factors, PDFs and their growing utility for the enterprise, and Adobe's involvement in cloud technology."

Monday, November 15, 2010

Free Android App with source code

James Ward and I collaborated and wrote a simple demo app called "Scribbler".  It demonstrates some really simple concepts such as detecting screen capture and saving to the local file system on Android.  This application is a regular Flex applications that uses standard Flex 4 components (Not the new Hero/Slider framework) hence demonstrating that in some cases you can use MXML to build mobile apps.    The application is available now on the Google Android Marketplace.  We made this lame icon with "Sp" based on an indecisive moment of what to call the damn app.  If you end up having to explain it to someone say SP stands for "Sribbler Pad".



The full source code is downloadable from here.  Have fun with it!  Please tweet this (button is below) if you think others might like it.  More to follow if we are encouraged properly!

Thursday, November 11, 2010

A Week in the Life of an Adobe Evangelist

I've heard many people tell our team that they would love to be on the evangelism team. It sort of sounds glamorous and full of adventure. This is half of the truth. The adventure is there but the downside is complete chaos. When my friends hear my schedule they get visions of me sitting around a sunny terrace in Southern Italy casually sipping a chilled pinot gris while relaxing. Below is the reality. I have removed various names to protect the identity of those who I meet with but this leaves you with the impression.

Duane's Schedule from Nov 13 to Nov 19 2010.

Saturday November 13, 2010

3:00 – Taxi to YVR airport
6:15 PM - Air Canada Flight Number: 854
Sleep on plane

Sunday November 14, 2010

11:50 - Arrive: London Heathrow, UK
15:25 - Lufthansa German Airlines Flight Number: 2477
18:15 - Arrive: Munich, Germany
18:40 - Taxi to hotel
19:00 - Check in to Hotel (Sofitel Munich Bayerpost)
19:30 Meet A.P. fur Abendessen.

Monday Nov 15, 2010

9:00 PK will pick me up from hotel, take me to Augsburg and back to Munich. 80 km drive.
10:00 – 12:00 Partner Meeting, Augsburg
12:00 - 13:00 Drive back to Munich
14:00 – 16:30 Second Meeting
16:10 - Taxi back to Hotel
18:15 - Leave for UG meeting in Taxi 15 min
19:00 - Munich Flex UG
Adobe Munich office
Georg-Brauchle-Ring 58
(anyone is welcome to come to this meeting!)
21:00 After meeting activities.
24:00 - back to hotel

Tuesday Nov 16
07:45 - awake and packed
08:30 Check out of Hotel & walk to Munich hauptBahnhof
08:55 Travel from Munich to Frankfurt 8:55 ICE 724 to Frankfurt
12:07 – Arrive Frankfurth HBh
12:30 - taxi to meeting
13:00 – 16:00 Partner Meeting
16:00 - Taxi to Frankfurt HBh
17:17 Dept., ICE 814 to Cologne (1:22)
18:39 Arrive Cologne HBH – Taxi to UG meeting
19:00 PM – Cologne Flex UG meeting
Adobe Cologne office
Anna-Scheider-Steig 10
(Note: this is an open User Group meeting - please join me)

21:00 - 24:00 After UG meeting activities (eat, drinks)
24:00 - Go to Hotel:
art'otel cologne, by Park Plaza
Holzmarkt 4, Cologne, Germany 50676,

Wednesday Nov 17

07:30 – leave for Cologne HBh.
08:10 - ICE 616 Cologne Dept. 8:10 to Essen HBh
Taxi to Meeting place(15 Min)
9:30 – 12:00 Meeting
12:00 – Taxi to HBH
12:59 - Train (ICE 510) Travel from Essen Station to Frankfurt Airport
17:20 PM – Lufthansa German Airlines Flight Number: 276
Depart: Frankfurt, Germany 5:20 Pm November 17, 2010
Arrive: Milan Linate, Italy 6:30 Pm November 17, 2010
19:00 - get bags and take taxi to hotel
19:30 - Check in Art Hotel Navigli (2 nights)
Via Angelo Fumagalli 4
20143 Milan, Italy

Thursday Nov 18

08:00 - awake and ready to travel
10:00 – 14:00 Meetings
14:00 - 15:00 Taxi to different meeting area
15:00 – 18:00 Meetings
18:30 - back to Hotel

Friday Nov 19

04:00 - awake
05:00 - Check out of hotel - taxi to Malpensa Airport
7:10 AM - Lufthansa German Airlines Flight Number: 3770
Depart: Milan Malpensa, Italy 7:10 Am November 19, 2010
08:05 Arrive: London Heathrow, UK
13:00 – LHR to YVR Air Canada 855
15:00  - Arrive: Vancouver, Canada 3:00 Pm November 19, 2010
Total Flight Time: 10 Hours 0 Minutes Non-Stop


OK - that is this week. Next week starts again at 04:00 AM Monday with a trip to Ottawa, CA.  This is an average week in the life of an Adobe Evangelist.

Don't try this at home or at all. 

;-)

Thursday, November 04, 2010

AIR for Android Tutorial (Part 2)

In the first AIR for Android tutorial, we showed just how to get started.  This tutorial is a complete video along with the source code.  This blog post includes the necessary instructions for building your first application and then adding a transform gesture.  With many smartphones using touch screens, the desired behavior is to allow an application to scale upwards but never scale below a certain minimum size.  This tutorial and the accompanying source code or Flash Builder 4.1 project explain how to accomplish this task.

Untitled from Technoracle on Vimeo.


Source Code: (download)

Wednesday, November 03, 2010

AIR for Android Tutorial

I've been developing a few AIR applications using AIR 2.5 and packaging them up as *.apk's for Android O/S.  The steps are relatively easy. You must have the following items to complete this tutorial:
  1. An unlocked and tethered Google Android device with Android 2.2 or later installed;
  2. Flash Builder 4.1;
  3. The Adobe AIR 2.5 SDK;
  4. The Google Android SDK;
First you need to get Flash Builder 4.1 and overlay the AIR 2.5 SDK.  Copy the AIR 2.5 from the Adobe Labs site to your desktop.

Copy the AIR SDK to the directory where you installed Flash Builder /sdks/.
Before unpackaging the AIR SDK to that directory, make a copy of the sdk you will overlay the AIR SDK on to.
With a terminal window, navigate to the directory /sdks/ and type:


       tar -jxvf AIR25_mac_sdk_XXXXXX.tbz2


This should unpackage the *.tar file and overlay your SDK. 


2. Building your AIR application

1.     Start a new project in Flash Builder with the following parameters:

Application Type: AIR
SDK: 4.1 (use the SDK you wrote AIR 2.5 into above)

2.     Change the root element from <s:WindowedApplication> to <s:Application>.

3.     Open the application descriptor file and navigate to lines 154 and175. Uncomment the entire android manifest section.


4.     Navigate to line 96 and uncomment, make “mobileDevice”.

5.     Save the descriptor and close it.

3. Packaging and putting your app onto your device

1.     Open a terminal and navigate to
             /AIR25_mac_sdk_20100930/bin

         For example:


              
     cd /Users/duane/Desktop/Android/AIR25_mac_sdk_20100930/bin

2.     Using finder, copy the SWF and the app descriptor from the Flash Builder /bin-debug folder of your workspace over to the SDK.  (N.B. SDK must be the same version!)

3.     In the terminal, type in the following.  You will need a PKCS12 certificate set up to do this and modify the path to point at your certificate.  The next parameter is the name of the output *.apk (in this example "Android-REST.apk") following by parameters of the XML descriptor and the main swf file.

./adt -package -target apk -storetype pkcs12 -keystore ../../certificates/Sharkswithlaserbeamsinc.p12 Android-REST.apk ./Main-app.xml ./Main.swf


4.     In your terminal, CD to /android-sdk-mac_86/tools.  Test the device connection by running the ADB devices command:

./adb devices

5. Install your application by typing ./adb install -r ../../AIR25_mac_sdk_20100930/bin/Main.apk
Substitute the path to the newly created *.apk.
Launch the app on Android.  It should run as any other app but the name of the original *.mxml file will be the name of the app.

Monday, November 01, 2010

Flash and the City 2!

I have just received word that I'll be back to next year's Flash and the City event in New York. Event organizers have found a larger venue for the event and have expanded the length to include some half day workshops. The goal is to repeat the MAX AIR 2 Code Camp in one of these time slots. This is a course that ended up being ranked very well including a score of 4.96/5 with 70 evaluations.

See you at FATC2011!

Friday, October 29, 2010

Pimp My App - Adobe MAX Keynote

This is a video of our antics during the day 2 keynote.  I had never seen the TV show "Pimp my Automobile" before so I had no idea what the script was getting at in terms of slang.  Paul, Ming, Lee and I put this together in 4 days with minimal rehearsal and an ever changing script.  This was fun and I love my co-actors!

Saturday, October 23, 2010

Catch me if you can in LA and win Prizes!

Find me at Adobe MAX, have your photo taken with me and win tons of really cool prizes!

That's correct. The “I’m With Adobe CEM” photo contest is simple. Find me at MAX. I’ll be carrying a sign that says “I’m With Adobe CEM.” Take your photo with me and tweet the pic to our @AdobeCEM Twitter handle to be entered to win. Full details are here.

If you find me, you can also get one of 99 exclusive LiveCycle ES Developer tattoos!  All you have to do is show me you're registered for at least one LiveCycle ES session and say the magic passphrase.  If you don't know the passphrase, you may have to do some searching.  It is linked to the outcome of the best hockey game ever, the 2010 Olympic finals between Canada and the USA!

If you have not registered for a LiveCycle ES session yet, I'll be at this really cool one Monday from 5:00 - 6:30 PM called Extending LiveCycle ES for Java Developers and we still have a few seats left!

That's it.  Now I am going to disguise myself and start running really fast.  Catch me if you can!

Wednesday, October 20, 2010

VMWare and Flex at Adobe MAX

I just got word from my good friend Pratima Rao that she will be speaking on a pivotal session at Adobe MAX this year.  Pratima has god-like intelligence and has been leading a Flex project at VMWare for the VMWare View product.  This advanced project required some really state of the art technology and new management console work.  The real world experience sessions like the one she will deliver are my favorite type of sessions at MAX as they give the opportunity to ask questions about what went right and what could have been done better.  Real world use of Flex in a critical enterprise setting is something that is now becoming more popular and this session should provide some great insights.

Here is the session (highly recommended on my list):

Title: The New Standard for VMware Management Consoles
Description: Flex is already in use in two VMware applications in the VMware management suite: VMware View (which delivers personalized virtual desktops as a managed service) and VMware vCloud Director (which enables provisioning, deploying, and managing virtualized workloads in internal and external clouds). Moving forward, the Flex footprint expands into VMware's broad customer base with its next-generation management console for vSphere. VMware's 25,000-plus strong partner and customer ecosystems will soon be able to leverage Flex to integrate their solutions into the VMware management UIs. Join the VMWare team to hear about how they use Flex to improve VMware product experiences.

Speakers:
Pratima Rao, Harish Dhurvasula, Saul Bancroft
Times:
Monday, October, 25th, 2:00 pm - 3:00 pm

Tuesday, October 19, 2010

Sometimes a Picture says it all.

We do use and love Firefox. We support Mozilla fully.

Monday, October 18, 2010

Silicon Valley Code Camp Cloud Session

Last weekend I taught two sessions at the Silicon Valley Code Camp in Sunnyvale, CA.  One of the sessions was on cloud computing called "Manipulating PDF with Java on the Cloud: For fun and profit!".  The slide deck is available to anyone who wants to have it.  Please email me if you wish to get it.

The slide deck was not the main part however.  Here are the steps required to repeat the code camp.

1. First, you have to have an instance of LiveCycle ES2 up and running on the cloud.  Adobe has this all bundled up for you and if you are a member of the Adobe Enterprise Developer Program (AEDP), you have ten free hours per month (YAMMV).  You can also set up another cloud account and install it yourself.  I've looked around and found some cloud accounts that seem to be good for this.  See the note at the end of this post for more details.

2. Log in to the cloud and start your instance. 

3. Press the start instance button.  When your instance is up and running, there are two methods to use to connect.  The easiest is to download and install the Developer Express Desktop network client.  This simply intercepts all traffic bound for localhost (http://127.0.0.1) on port 8080 and redirects it to the cloud.  The second methods is to use the public URL for the cloud instance.  Either way is fine.

Note: the rest of this tutorial will assume you are using the network desktop client.



4. If using the LiveCycle Desktop networking application, log in with the same credentials you used to log into the cloud.

5. Start up Eclipse and start a new Java project.  Within your project, add a new package, then add a Java class called "CreatePDF".

6. You will need several core Java libs from the LiveCycle ES install.  These are located under the /sdks directory.  For this example, you will need the following *.jars:
  • adobe-encryption-client.jar
  • adobe-livecycle-client.jar
  • adobe-usermanager-client.jarThese JAR files are located in the following path:
    {install directory}/LiveCycle/LiveCycle_ES_SDK/client-libs/common
  • adobe-utilities.jar This file is located in the following path:
    {install directory}/LiveCycle/LiveCycle_ES_SDK/client-libs/jboss
  • jbossall-client.jar This file is located in the following path:
    {install directory}/LiveCycle/jboss/client
    (Use a different JAR file if LiveCycle ES is not deployed on JBoss.)
  • You will also need the third-party JAR files to use the SOAP stack rather than EJB endpoints. If you want to invoke a remote LiveCycle ES instance and there is a firewall between the client application and LiveCycle ES, then it is recommended that you use the SOAP mode. When using the SOAP mode, you have to include additional JAR files located in the following path:

    {install directory}/LiveCycle/LiveCycle_ES_SDK/client-libs/thirdparty
    Within your class, you should see some skeleton code under your new project. Highlight all code, delete it and replace the deleted skeleton code with this source code:

    package org.duanesworldtv.samples;

    /*
     * This Java Quick Start uses the following JAR files
     * 1. adobe-distiller-client.jar
     * 2. adobe-livecycle-client.jar
     * 3. adobe-usermanager-client.jar
     * 4. adobe-utilities.jar
     * 5. jbossall-client.jar (use a different JAR file if LiveCycle ES is not deployed
     * on JBoss)

     *
     *  These JAR files are located in the following path:
     * /LiveCycle/LiveCycle_ES_SDK/client-libs
     *
     * For complete details about the location of these JAR files,
     * see "Including LiveCycle ES library files" in Programming
     * with LiveCycle ES
     */
    import java.io.File;
    import java.io.FileInputStream;
    import java.util.Properties;
    import com.adobe.livecycle.generatepdf.client.CreatePDFResult;
    import com.adobe.idp.Document;
    import com.adobe.idp.dsc.clientsdk.ServiceClientFactory;
    import com.adobe.idp.dsc.clientsdk.ServiceClientFactoryProperties;
    import com.adobe.livecycle.distiller.client.DistillerServiceClient;
     
    public class CreatePDF {
     
     public static void main(String[] args)
     {
      try
      {
          //Set connection properties required to invoke LiveCycle ES                                          
          Properties ConnectionProps = new Properties();
          ConnectionProps.setProperty(ServiceClientFactoryProperties.DSC_DEFAULT_SOAP_ENDPOINT, "http://127.0.0.1:8080");
          ConnectionProps.setProperty(ServiceClientFactoryProperties.DSC_TRANSPORT_PROTOCOL,ServiceClientFactoryProperties.DSC_SOAP_PROTOCOL);        
          ConnectionProps.setProperty(ServiceClientFactoryProperties.DSC_SERVER_TYPE, "JBoss");
          ConnectionProps.setProperty(ServiceClientFactoryProperties.DSC_CREDENTIAL_USERNAME, "administrator");
          ConnectionProps.setProperty(ServiceClientFactoryProperties.DSC_CREDENTIAL_PASSWORD, "{password}");
     
      // Create a ServiceClientFactory instance
      ServiceClientFactory factory = ServiceClientFactory.createInstance(ConnectionProps);
     
      DistillerServiceClient disClient = new DistillerServiceClient(factory );
     
      // Get a PS file document to convert to a PDF document and populate a com.adobe.idp.Document object
      String inputFileName = "/Users/duane/Desktop/eclipse/workspace/JavaOne2009-docs/test.ps";
      FileInputStream fileInputStream = new FileInputStream(inputFileName);
      Document inDoc = new Document(fileInputStream);
      
      //Set run-time options
      String adobePDFSettings = "Standard";
      String securitySettings = "No Security";
        
      //Convert a PS  file into a PDF file
      CreatePDFResult result = new CreatePDFResult();
      result = disClient.createPDF(
        inDoc, inputFileName, adobePDFSettings,
        securitySettings, null, null
      );
         
      //Get the newly created document
      Document createdDocument = result.getCreatedDocument();
         
      //Save the PDF file
      createdDocument.copyToFile(new File("/Users/duane/Desktop/eclipse/workspace/JavaOne2009-docs/DuanesWorldTest.pdf"));
      }
      catch (Exception e) {
       e.printStackTrace();
      }
     }
    }
     
    Be sure to replace the package name, class name and paths with your own.
    7. Now compile your class and run it.  When Eclipse runs this, it should try to hit 127.0.0.1:8080 to make the request.  This will be intercepted by the desktop networking client and forwarded to the cloud instance where the invocation request will be fulfilled.  When completed, you should find a new instance of a PDF document under the path you used at the end of this code!

    We've also been doing some research into cloud computing providers.  While Adobe uses The Amazon cloud for various reasons (including legal, compliance, support and technical), We've found some hidden gems.   After testing a few, we found the best VPS Cloud Hosting at sherweb.com.  Regardless of where you go for cloud hosting, this tutorial should work fine once you get Livecycle ES up and running.