We will pickup from where we left in the last article . So lets redesign the feedreader application built in one of the previous post. Before continuing I ll suggest you to go through the previous two posts I have mentioned or else you will feel off track. At the end of the post you will have fairly good understanding on ViewHelper.

Create a new MXML application file which will be the “default” application file in our case. For the sake of understanding we will name it “FeedreaderUsingCairngorn.mxml“. This mxml is the main view of the application for which we will have a viewHelper, where all the view interaction code will be written.  Lets call it “FeedreaderViewHelper.as”

Download the complete example from here.

package com.brupp.view
{
  public class FeedreaderViewHelper extends ViewHelper
  {
public function FeedreaderViewHelper()
    {
       super();
    }
  }
}

Note the helper class should extend the Cairngorm’s ViewHelper. Next is how to provide the “view” access to this helper class. It’s dead simple, just instantiate the helper object in the “FeedreaderUsingCairngorn.mxml” file.

<view:FeedreaderViewHelper id="viewHelper"  />

Now the catch is the “id” that you give to the helper that actually serves as an identification to locate the helper from any class through the Singleton class “ViewLocator” (part of Cairngorm architecture). What happens is that the helper thus instantiated registers its identity mapped with its “id”, while doing so the “ViewHelper.as” class (Cairngorm framework class which is the parent class of our FeedreaderViewHelper) also stores the instance of “FeedreaderUsingCairngorn” in a property named “view” from where it was created. This is an internal mechanism (Will discuss in Advance Cairngorm tutorial series). So now our helper class can access the main view through “view” property like this:

package com.brupp.view
{
  public class FeedreaderViewHelper extends ViewHelper
  {
public function FeedreaderViewHelper()
       {
       super();
       }
...
        public function onItemClick(e:ListEvent):void
{
               <strong>FeedreaderUsingCairngorm(this.view)</strong>.....
}

...
  }
}

see next page...