First Swiz

The documentation at the Swiz site is a bit light on, but since the config is actually very simple, there is no real need for extensive documentation. I will go through an example I built up here and explain what I understand the parts to be.

The steps involved are similar to what is outlined in the docs, but I would do it in this order:

1) Create an Event Class

2) Create a Model Class

3) Create a View:

  • That references the Model
  • Dispatches the Events

4) Create a Controller:

  • That references the Model
  • That has functions for the Events (just as comments for now)

5) Configure Swiz in the Application

6) Create & Configure a Bean Loader

7) Autowire the View to the model

8) Mediate the Controller to the Events

Ok, so what does all of this mean:

1) Event Class

Create a class that has constant references to String events. This keeps it clean and reduces typo error bugs

public class NavigationEvent extends Event{

public static const CHANGE_TO_HOME_VIEW:String = “changeToHomeViewEvent”;
public static const CHANGE_TO_ECHO_VIEW:String = “changeToEchoViewEvent”;
public static const CHANGE_TO_LOGIN_VIEW:String = “changeToLoginViewEvent”;

public function NavigationEvent(type:String, bubbles:Boolean=true, cancelable:Boolean=false){
super(type, bubbles, cancelable);
}

}

Two things to make sure of:

  • Inherit from event
  • bubbles=true. This way Swiz catches events

2) Create a Model Class

The model class represents the data that the View is showing. Think of it as the non-visual version of the view. This is where you put all the Bindable data. Since the View and the Controller reference this data, it is all Bindable. The Controller updates the data in the model and the Felx Binding reflects this in the View. Initially, create just a skeleton class for the Model to get things started.

public class ApplicationViewModel{

/* The different views on the view stack.
*/
public static const LOGIN_VIEW:int         = 0;
public static const HOME_VIEW:int         = 1;
public static const ECHO_VIEW:int         = 2;

[Bindable]
public var viewStackIndex:int = LOGIN_VIEW;

}

Here I have a ViewStackIndex that is the data of the Model.

3) Create a View

Now create a View that visualises what the model holds as data. Remember to reference the Model and make it Bindable. Events are dispatched from the View using the Events created above.

<fx:Script>
<![CDATA[
import com.wl.testswiz.events.NavigationEvent;
import com.wl.testswiz.models.ApplicationViewModel;

// Link the Application Model to the View
[Bindable]
public var applicationViewModel:ApplicationViewModel;

protected function button1_clickHandler(event:MouseEvent):void
{
var returnEvent:NavigationEvent = new NavigationEvent(NavigationEvent.CHANGE_TO_HOME_VIEW);
dispatchEvent(returnEvent);
}

protected function button2_clickHandler(event:MouseEvent):void
{
var returnEvent:NavigationEvent = new NavigationEvent(NavigationEvent.CHANGE_TO_LOGIN_VIEW);
dispatchEvent(returnEvent);
}

]]>
</fx:Script>

<s:Label x=”347″ y=”143″ text=”ViewStack Index: “/>
<s:Label x=”347″ y=”167” text=”{applicationViewModel.viewStackIndex} “/>

<mx:ViewStack id=”viewstack1″ selectedIndex=”{applicationViewModel.viewStackIndex}” width=”100%” height=”242″ y=”283″>
<s:NavigatorContent label=”Login” width=”100%” height=”100%”>
<views:LoginView currentState=”LoginState” horizontalCenter=”0″ verticalCenter=”0″/>
</s:NavigatorContent>
<s:NavigatorContent label=”Home” width=”358″ height=”313″>
<views:HomeView height=”222″ width=”321″/>
</s:NavigatorContent>

</mx:ViewStack>

Notice that there is nothing here of Swiz yet. I have not done anything Swiz related.

4) Create a Controller

Next we create a controller for the Events that are fired off from the View. For now we will simply reference the Events via comments as shown below.

public class ApplicationController{

[Bindable]
public var applicationViewModel:ApplicationViewModel;

// Dummy Local event for now
// NavigationEvent.CHANGE_TO_LOGIN_VIEW”
public function login():void {
applicationViewModel.viewStackIndex = ApplicationViewModel.LOGIN_VIEW;
}

// NavigationEvent.CHANGE_TO_HOME_VIEW
public function logout():void {
applicationViewModel.viewStackIndex = ApplicationViewModel.HOME_VIEW;
}
}

In this class the ViewStack index of the Model is changed when these Events happen. We will wire everything together below.

5) Configure Swiz in the Application

Right, now we start the magic. Up to this point we have done nothing special at all. We have simply created a Model for the data, a View to show some of the data and a Controller to change the data. We will now wire in Swiz to make all of this work. Swiz is configured in the main application file using attributes as shown below. I am not going to explain each one of them, as it is well covered in the documentation.

<fx:Declarations>
<!– Configure Swiz Framework–>
<swiz:SwizConfig
strict=”true”
eventPackages=”com.wl.testswiz.events”
viewPackages=”com.wl.testswiz.views”
mediateBubbledEvents=”true”
beanLoaders=”{[ Beans ]}”
logEventLevel=”{LogEventLevel.ALL}”/>
</fx:Declarations>

<views:MainView id=”mainView”/>

Few things to note however:

  1. The view and event packages do NOT have a “.*” at the end. This is NOT a package reference.
  2. The beanLoaders array has to be in the default path else it won’t be found
  3. Since Swiz is only completely initialised once this application file is initialised, you cannot put any logic in the main file. I originally had the ViewStack code in here and it would not work. Only have references to the main view here as shown above.

6) Create & Configure a Bean Loader

Next part is to tell Swiz what you are using as Models and Controllers and add a Bean reference ID to them. These IDs will be used throughout the application.

<swiz:BeanLoader xmlns:swiz=”http://swiz.swizframework.org&#8221;
xmlns:fx=”http://ns.adobe.com/mxml/2009&#8243;
xmlns:controllers=”com.wl.testswiz.controllers.*”
xmlns:models=”com.wl.testswiz.models.*”>

<fx:Declarations>
<!– Models –>
<models:ApplicationViewModel id=”applicationViewModel”/>
<models:LoginViewModel id=”loginViewModel”/>
<models:HomeViewModel id=”homeViewModel”/>

<!– Controllers –>
<controllers:ApplicationController id=”applicationController”/>
<controllers:LoginController id=”loginController”/>
<controllers:HomeController id=”homeController”/>

<!– Delegates –>
<!– Remote Services –>

</fx:Declarations>

</swiz:BeanLoader>

Nothing fancy here at all. We reference the models and the controller classes and give them a bean name. I will discuss remote services and delegates in another post. That’s it, Swiz is now configured into your application. Now we need to strap it up in the various parts. The next two parts are what you are going to be doing for all classes to tie them to each other. The simple explanation is as follows:

  • Autowire – Tie this class to a Bean
  • Mediate – React to this Event

This will make sense below

7) Autowire the View to the model

We already have a reference to the Model in the View, but now we need to tie it to Swiz. This is done by adding the Autowire Metadata tag. Using the code from Step 3) above we add the following

……

<fx:Script>
<![CDATA[
import com.wl.testswiz.events.NavigationEvent;
import com.wl.testswiz.models.ApplicationViewModel;

// Link the Application Model to the View
[Bindable]
[Autowire (bean=”applicationViewModel”)]
public var applicationViewModel:ApplicationViewModel;

protected function button1_clickHandler(event:MouseEvent):void

………..

This ties this View to the Model. Nothing else is needed.

8) Mediate the Controller to the Events

The View fires off events and the Controller class catches them. We need to tell Swiz this. Using the controller class from step 4) above

public class ApplicationController{

[Bindable]
[Autowire(bean=”applicationViewModel”)]
public var applicationViewModel:ApplicationViewModel;

// Dummy Local event for now
[Mediate(event=”NavigationEvent.CHANGE_TO_LOGIN_VIEW”)]
public function login():void {
applicationViewModel.viewStackIndex = ApplicationViewModel.LOGIN_VIEW;
}

[Mediate(event=”NavigationEvent.CHANGE_TO_HOME_VIEW”)]
public function logout():void {
applicationViewModel.viewStackIndex = ApplicationViewModel.HOME_VIEW;
}
}

Here we wire the Controller to the Model and also catch (Mediate) the Events from the View.

That’s it. There is nothing else to it. It is simple and I think a nice light framework. The annotations make the notation easy to understand. More to follow in another post.

Advertisements

Leave a comment

No comments yet.

Comments RSS TrackBack Identifier URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s