Swiz Log output

Found this in my searching to see what Swiz is doing. Put this in your main application

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

<mx:TraceTarget id=”logTarget”
includeDate=”true”
includeTime=”true”
includeCategory=”true”
includeLevel=”true”
/>

</fx:Declarations>

When you run debugging on Flex now, you will see what Flex is up to

Advertisements

SVN setup on STS

There are two parts to the install.

Go to Software install in eclipse and add these two sites:

http://download.eclipse.org/technology/subversive/0.7/update-site/

* Subversive plug-in update site

    Required feature, which should be installed unconditionally:

  • SVN Team Provider – The Eclipse Team Provider for the Subversion version control system.
  • Optional integrations with other plug-ins, which can be installed if you use these plugins and want to have them integrated with Subversive:

    Other optional features:

  • JDT Ignore Extensions – The feature is useful for Java development because it allows to interpret output folders as ignored resources automatically.
  • SVN Team Provider Sources – The sources of the Eclipse Team Provider for Subversion.

http://www.polarion.org/projects/subversive/download/eclipse/2.0/update-site/

* Subversive SVN Connectors update site

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.

MVC Frameworks

Been looking into Model-View-Controller frameworks to use with Flex and Java backend. The usual suspects are there, but we settled on Mate a while ago. The nice thing about Mate is that the View is completely clean of any notation if you use Injectors. This was really cool.

In looking at Mate and trying to understand it well, I also kept coming across Swiz. Now in comparison, Swiz is not as well documented and there are many varying examples which makes it difficult to get your head around it, but in the end it is very slick. The one thing I had to accept was the fact that there are Swiz specific annotations in the view Classes and thus these are not as portable as they were with Mate. Having said that, I think the design and the layout of Swiz is much better than Mate. It is more logical and easier to follow, once you understand it. I will explain what I know here and reference some of the sites I used to get an understanding of Swiz.