QueTwo's Blog

thouoghts on telecommunications, programming, education and technology

Tag Archives: RIA

Creating a one-time login for a mobile AIR Application

One of the aspects of Pointillism was that we wanted to minimize the amount of time that the user needed to worry about logins, passwords and signing up for the service.  This should be a pretty common goal for most mobile applications — the more you force the user to input that type of information into your app (or verify, re-verify, etc), the less chance they will use it.

We decided to base the app around the “ViewNavigatorApplication” model within Flex.  For the rest of the application, it made perfect sense as this type of app could easily be built around “screens” that were stacked as the user moved from one activity to another.  The problem was — if I wanted to force the user to login, I would either have to introduce some sort of “launching” screen that would contain the logic-check to see if the user had logged in prior, or I could not define the “firstView” property of the application tag and have some script in the Application tag decide.

My solution consisted of this — I defined the firstView to go right to the dashboard within the application (so, where a logged in user would go).  I then added a bit of code to the initialize event handler that could intercept the creation of the View and force it to go to the login screen ONLY IF the user had never logged in before.  This allowed the normal operation of launching the app after the user had logged in to go very quickly, yet still force the login in a seamless way.  This also meant that the user wasn’t subjected to multiple awkward transitions as the application decided if they were logged in or not.

<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
 initialize="preAppInit()" firstView="org.pointi.views.MainScreen" .....>

import ....
public function preAppInit():void
 var userInfo:CurrentUserManager = new CurrentUserManager();
if (!userInfo.isLoggedIn())
 navigator.defaultPushTransition = null;

You will note that I set the default “push” transition because I wanted it to seem that the application launched right to the login screen, instead of having it flip to the screen (giving the impression that the user could hit the back button to go back to another screen).  Otherwise, the rest should be pretty self-explanatory.


My Presentations at Adobe MAX 2011

This year I had the distinct honor of being asked to present at Adobe’s MAX conference.  The conference was an absolute blast.  From the Keynotes to ALL the other sessions I attended, the thing went off without a hitch.

I gave two presentations this year — one for the 360|MAX Unconference and one for the Develop Track at MAX. 

Getting Data From Here To There (with Flex)

This session was not recorded, but fairly well attended.  You can see my slides here.   In this session I talked about the different communications methods available to Flex developers, and I started to lay out a basic matrix of when to use what type of communication method, and what the pros and cons were of each type.  Not all of my demos worked due to a broken J2EE server, but I think everybody got the idea.  I don’t have great downloads for that presentation as most were specific to my server setups.

Getting Physical With Flash (Hardware Hacking)

This session was a blast to present.  We had about 140 people in the room who seemed to be really into it.  I presented on integrating the Arduino hardware prototyping kit into Flash/Flex in addition to showing how to integrate the Microsoft Kinect into Flash/Flex. I came armed with about 6 electronics projects that I showed people to inspire them to create their own.

Video Player - MAX 2011 Preso

You can download the PPT here.

You can find most of the downloads featured on my blog, but I will update this post and post the direct links to everything at a later date.

Thanks again to the entire MAX staff for making the show run so smoothly from both the speaker’s perspective and from the attendee’s perspective.  A+ work led to an A+ experience 🙂

Connecting your Flex application to BlazeDS or LiveCycle DS

If you have ever attended one of my presentations on BlazeDS, LiveCycle DS, or Flex/ColdFusion, you have heard me talk about how bad the data-connectivity wizards are in ALL of the IDEs available for the Flex SDK.  Even the new Flash Builder 4.5 dosen’t address the white-hot mess they call the data connectivity wizards that they started including in 4.0 (Side note:  I love most of the features in Flash Builder — I use it every day, but some of the wizards they included to make life easier really don’t).

Even including the services-config.xml document as a configuration option in your application will often lead you to troubles in the long-run.  This is included for you when you tell Flash Builder that you want to use ColdFusion or Java as your server model.  When you do this, the compiler inspects your services-config.xml configuration document on your server, and builds a table of the channels (endpoints) and destinations that are configured on the server.  You can then call the destination by name in theortags and not have to worry about how your client actually connects back to the server…

… untill you need to move your application…

… or you need connect your AIR application to your server…

… or you have a mobile or television application that needs resources on your server…

… or your server’s configuration changes.

Read more of this post

Debugging on embedded systems with AIR (including Adobe TV)

One of the projects I was recently involved with had me setup an unsusal enviroment — debugging an embedded device that ran Adobe AIR.  There are not a whole lot of specifics that I can talk about for that particular project, but one of its aspects I can talk about — debugging the AIR and Flex apps remotely.

Most developers are used to the enviroment where they have a single computer where they run their app, and if something breaks, they can launch the debugger and on the computer and debug the app.  When you are working with embedded devices, mobile devices, or simply devices that don’t have Windows/MacOS running on them, debugging can be a pain.  Unfortunatly, the documentation for AIR (and Flex) is pretty poor at telling you how to set this up — and the IDE fights you if you don’t know exactally what you are doing. Read more of this post

Creating Mobile Applications from a Photoshop Prototype

Thanks to Dr. Coursaris for this photo.

At the WUD Conference, East Lansing, MI

This past Thursday, I was given the opportunity to present on a really cool, but obscure topic — creating mobile applications from Photoshop prototypes, for the World Usability Day Conference.  Essentially, my job was to show people a workflow that is possible when using Adobe Device Central to create a Photoshop file, that is then turned into a working prototype using Adobe Catalyst, and then programmed using Adobe Flash Builder. 

All in all, the conference was excellent, and I was honored to be on stage after notable presenters from the State of Michigan, Motorola, Nokia and well, even the University of Michigan.  The focus of this year’s conference was on usability, and how it relates with mobile applications and devices, which was a perfect match for the presentation I was doing.

After my quick introduction to the subject, I demoed making a complete application from scratch and deployed it to a series of working phones.  I was able to accomplish this workflow in under a half hour, which was completely amazing for not only myself, but the audience too.  It is really cool to realize that the technologies that I’ve been using as betas for so long have actually matured to the point where I can use them to make real applications.

The session was recorded and hopefully will be posted online soon.  You can view my powerpoint here (I did have to disable the live voting, but I did keep the results for historical purposes), and download ALL the source code that and asset files that we used during the presentation here.  Please keep in mind, that the logos in the demo code are subject to the use standards found here

Thanks to the WUD East Lansing team for inviting me!

OAuth and Flex/AIR — Making Twitter work again.

Quite a while ago I posted an entry on how to make a quick Twitter Client.  Over the past few months, Twitter decided that basic authentication was no longer the best way to go, and they needed some way to help users protec their accounts.  Their solution is the OAuth protocol, which is now required for any functions that require authentication. 

I never really paid attention to this new authentication scheme until I went to create my VW “App My Ride” app that interacted with Twitter.  That app made me re-engineer my APIs and classes to meet the new authentication scheme.

What does this mean for the Flex or AIR developer?  Well, it means that you now have to incorporate the OAuth mechanism into your app, and if you were planning on using Twitter in a way that removed it from a web-browser completely — well, you rethink your authentication schemes.  Like so many of the authentication schemes that I have to deal with on a daily basis like Shibbloth, the authentication method forces you to open a trusted website to give your credentials to, which then pass back some sort of token to the application you are using.  This means the application must be well known to the authenticator, and it no longer directly holds the login and password information (but rather a revokble key). 

So, where does that leave you?  First, you have to head over to the OAuth enabled service that you wish to authenticate to, and register your application.  For example, for twitter, you will want to login to twitter, and head to http://dev.twitter.com.  There is a link to “Register your application”.  Once you have your two magic tokens (called the “Consumer Secret” and “Consumer Key”), you are ready to go.

From here you have two choices — you can either implement your own OAuth module yourself, or you can grab Dan Petitt’s (@coderanger) library and get a leg up.  His blog post where he introduces the module is available here : http://www.coderanger.com/blog/?p=59

In my case, I first imported the OAuth source code as downloaded from the blog above.  They should end up in the /src/com/coderanger folder (giving a package of com.coderanger).  Next, we will want to instantiate the OAuthManager class, passing in our Consumer Key and Consumer Secret that we got from Twitter.  You would do this like:

var oauth:OAuthManager = new OAuthManager();
oauth.usePinWorkflow = true;
oauth.oauthDomain = "twitter.com";
oauth.consumerKey = "insert your consumer key here";
oauth.consumerSecret = "insert your consumer secret here";

After the OAuth component returns, it will be populated with a few key pieces of data, and will fire the “OAuthEvent.ON_ACCESS_TOKEN_RECEIVED” event.  With this, you will get the AccessToken and the AccessTokenSecret, which, when combined with the PIN (this is not sent back, but will be supplied by the end-user), will allow authentication.  In order to call your OAuth enabled site, you will need the following bits of information for each call:

  • The OAuth Domain
  • The Consumer Key (Specific to your app)
  • The Consumer Secret (Specific to your app)
  • The PIN (Provided by User, after they get the OAuth website from the requestToken() call)
  • The Access Token (Returned by a successful RequestToken() call, and is specific to the user, and their PIN)
  • The Access Token Secret (Returned by a successful RequestToken() call, and is specific to the user and their PIN)

You will need to populate the OAuthManager instance with each of the above for it to work.  To actually make an authenticated call to Twitter at this point, you need to build an HTTP request that contains the above information encrypted. My code looks like this (the HTTP request will come back and return the data as XML) :

http = new HTTPService();
http.useProxy = false;
http.contentType = "application/x-www-form-urlencoded";
http.addEventListener(FaultEvent.FAULT, gotTwitterFail);
http.addEventListener(ResultEvent.RESULT, gotTwitterResult);
var postData:String = oauth.getSignedURI("GET", "http://api.twitter.com/1/statuses/home_timeline.xml");

http.url = "http://api.twitter.com/1/statuses/home_timeline.xml";
http.method = "GET";
http.send( new QueryString(postData).toPostObject() );

It is really not too hard, but it is different. I’ve also been able to authenticate to additional services since writting this particular Twitter app, such as some of the MSN and WordPress services.

Flash Builder Client-Side Data Management vs. LCDS

One question I am asked fairly regularly is this : “Now that Flash Builder will include what they call Client-Side Data Management, why would anybody need Adobe’s LiveCycle Data Services?” 

Until this latest version of Flash/Flex Builder and Flex, there was a very clear distinction for when you needed LiveCycle Data Services and when you could simply use BlazeDS.  If you wanted seemless interactions between your database and your client, you by default went to LCDS.  If all you cared about was sharing data between clients, then you could get away with BlazeDS.

With the upcoming version of Flash Builder there is a new set of wizards called the DCD or the Client-Side Data Management Wizards.  These wizards will emulate a lot of the functions and features that were previously only available to LCDS users.  Things like having changes to an ArrayCollection (via a DataGrid) auto-commit to the database are now available, as well as data pagination and some other time-saving features.  All of this work is done on the client-side with little work on the server.

You don’t get all the features of LCDS, however.  LCDS’s Data-Management features allow you to have the concept of ‘managed’ data on the server.  This means that you have a middle-ware application that stores a copy of your data in RAM and keeps track of which clients are accessing which parts of that data.  The concept allows you to do things like real-time conflict-resolution (client-side only supports last-in-wins) where both clients are notified if the data is changed in any connected client.  It also allows for real-time data updates — for example, if you have client-A update their data, client-B who is also viewing that data is instantly notified that their view is old and updated with the changed set.  This is immensely critical where you have data that is viewed and possibly updated in realtime by multiple people — and it is only available in LCDS.  LCDS also allows you to do lazy-loading out of the box, which is not available in the client-side version.

Adobe’s LiveCycle DS 3 also introduced the “Data Modeling” workflow in this past release.  This plugin to the Eclipse framework allows users to model their database (or pull in an existing database and have it modeled for them) and make changes to that database, regardless of what database server is in the backend.  This is using UML-like diagramming, and is extremely powerful.  LCDS Data Modeling View can then take that UML model and auto-create forms (with validation), data views, etc. with a few clicks of the mouse.  With this model, no server-side coding is required at all.

Flash Builder’s Client-Side Data Management emulates the form-building aspect of this, however it is not nearly as automated or point-and-click.  It will write some stub classes for you, and set you up with the basics, but things like validation have to be written by hand.  Furthermore, you have to customize your back-end server coding to match how DCD expects your classes/cfcs to work. 

Pretty much, to sum it up, if you need you plan on having your clients view and edit the same piece of data at the same time, you may still want to consider LCDS.  If you don’t want to write any back-end code, LCDS is also worth looking at as well.  Otherwise, see what Client-Side Data Management can do for you.  But remember, Adobe no longer offers their Community Edition / 1 CPU edition / Free Edition / Office Edition, so LCDS has become quite costly to get into.  I wish that wasn’t the case 😦

Introducing InsideRIA.com

I got this tidbit in one of my emails..   Should be a really neat project between O’Reilly and Adobe. 

InsideRIA LogoWhat is InsideRIA?:

InsideRIA.com is an online community developed by O’Reilly and sponsored by Adobe Systems Incorporated. Our goal is to create an invaluable resource for information on the ever-changing state of design and development of rich Internet applications (RIAs).

InsideRIA brings some of the leading members of the RIA community together, where you can engage with them in an ongoing narrative about where RIA technology is headed. We hope InsideRIA will become your first-stop resource to stay on top of news, events, opinions, and learning. The site and the community will evolve over time, and you’ll see a healthy amount of tweaking (based on your feedback) in the coming months.

We’ve started with general topic areas on Design, Development, and Standards, which will feature blog posts and multimedia content. InsideRIA will also feature articles each month on a variety of RIA-centric topics. Community involvement is extremely important to the success of InsideRIA, and you and other members of the community can participate by sharing your ideas through feedback on articles, videos, tutorials and other features. We’re hoping some of you will even join us as guest bloggers.