Category Archives: Framework

SignalCommandMap extension, a pure AS3 example

Currently busy learning the Starling framework; but as I recently decided to apply Joel Hooks SignalCommandMap extension to a project I was working on, I decided to do a quick typeup slash demo project of this extension. The demo which can be downloaded here as a zipped project is not Flex based in difference to the original demo located here.

This extension been around for a long time so no big news in this post, just providing a pure AS3 example.

The SignalCommandMap extension let’s you eliminate all native Flash Events in your application and since Object rather than String based, ripe the benefits of not having to deal with String based Custom Events. (Not long ago I had two custom events not working cause despite differently named constants the string identifier by mishap was identical, a genre…)

Below is a minimalist example of the SignalCommandMap extension at work. Events are passed to the framework from the NavigationViewMediator using a Signal that carries a ValueObject which tells wether the User selected a tomato or an orange. A Command is mapped to this Signal and when recieved, sets the data upon the Model which notifies the Framework. As a result the ContentView which holds a ScrollPane updates with either a tomato or an orange:

Get Adobe Flash player

This is the code for the NavigationViewMediator. As you can see it dispatches the ValueObject as a parameter: addItem.dispatch(action) where action is our ValueObject:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
package view.mediator {
   import model.vo.ItemVO;
   import org.robotlegs.mvcs.Mediator;
   import signals.AddItem;
   import view.component.NavigationView;

   public class NavigationViewMediator extends Mediator {

      [Inject]
      public var view:NavigationView;

      [Inject]
      public var addItem:AddItem;

      public function NavigationViewMediator() {
         super();
      }

      override public function onRegister():void {
         this.view.itemSelected.add(handleItemSelected);
      }

      protected function handleItemSelected(action:ItemVO):void {
         addItem.dispatch(action);
      }
   }
}

The Signal itself is pretty simple. Note that in the super constructor we pass the relevant ValueObject:

1
2
3
4
5
6
7
8
9
package signals {
   import model.vo.ItemVO;
   import org.osflash.signals.Signal;
   public class AddItem extends Signal {
      public function AddItem() {
         super(ItemVO);
      }
   }
}

The Command mapped to the Signal is mapped inside another Command or could (as in the original example – and perhaps better you could say) be mapped directly in the Context. To be able to map a Signal to a Command in a Command, as I like to use Commands to bootstrap my application, all we need to do however is to make sure that the Command extends the SignalCommand class:

1
2
3
4
5
6
7
8
9
10
11
package controller.command {
   import org.robotlegs.mvcs.SignalCommand;
   import signals.AddItem;

   public class PrepSignalCommand extends SignalCommand {
      override public function execute():void {
         injector.mapSingleton(AddItem);
         signalCommandMap.mapSignalClass(AddItem, AddItemCommand);
      }
   }
}

And that’s it! I recommend a download of the original example by Joel Hooks to see the difference perhaps, and a download of my example in case you want to take the pure AS3 approach!

This post is now included in the robotlegs knowledgebase here
http://knowledge.robotlegs.org/discussions/resources/33-links-to-robotlegs-resources-examples-tutorials

Small note and afterthought: I wrote this pretty fast so in effect ideally I would not have had the images embed in the View class but be set in VO from Model…

Robotlegs, read-only config Value Objects

FlashdevelopI’ve decided to knock a bad habit of using too many static constants in my code. A Config VO provides a less coupled but also injectable recipe. To enforce ‘read-only-mode’ the config VO is mapped to an interface.

In Robotlegs, to map to interface we use mapSingletonOf:

1
injector.mapSingletonOf(IConfig,ConfigVO);

The interface enforces the usage of getters only in our ConfigVO class and could for example look like:

1
2
3
4
5
6
package com.domain.project.feature.api.core {
   public interface IConfig {
      function get numrows():int;
      function get numimages():int
   }
}

What’s needed in our ConfigVO implementation should be evident from the IConfig Interface. Dependency Injection now makes it a breeze to access the ConfigVO from any Model:

1
2
   [Inject]
   public var configVO:IConfig;

Where we type the instance to the Interface!
-(Thanks to RL forum support for clearing out my confusion about this).

Loading external Papervision3D Models, a Simple Robotlegs Example

Actually the title for this post was gonna be ‘Preoading external Papervision3D Models, a Simple Robotlegs Example” but unless I have some strong Coffe, I think it best to add the preoloader part in next update. Below is a really simple example of an external DAE model Loaded in, the classes structured within the Robotlegs framework.

Get Adobe Flash player

One of the many fun things with Robotlegs is that it helps us structure data and hand out single responsibilites for tasks to classes. For loading remote data we create a Service class which can connect to a webservice.

However for data that is loaded locally and not really said to be remote the word/concept of a Proxy meaning “Something that stands in for something else to achieve something” can be useful.
In this case our proxy is called DAELoaderProxy and looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
package model.proxies
{
import model.data.DataLogic;

import org.papervision3d.events.FileLoadEvent;
import org.papervision3d.objects.parsers.DAE;
import org.robotlegs.mvcs.Actor;

public class DAELoaderProxy extends Actor
{
[Inject]
public var dataLogic:DataLogic;

private var mod:*;
private var _pathtomod:String;

public function DAELoaderProxy()
{
}

public function loadModel ():void {
mod = new DAE();
mod.load(this.pathtomod)
mod.addEventListener(FileLoadEvent.LOAD_ERROR, onModelLoadError);
mod.addEventListener(FileLoadEvent.LOAD_COMPLETE, onModelLoaded);
//TODO :PRELOADER THAT NOTIFIES MODEL OF PROGRESS, MODEL NOTIFIES PRELOADER MEDIATOR OF PROGRESS, PRELOADER VIEW UPDATES
}

private function onModelLoaded(event:FileLoadEvent):void
{
dataLogic.deemodel = mod;
}

private function onModelLoadError(event:FileLoadEvent):void
{
trace("error")
}

//get - set
public function set pathtomod (value:String):void {
_pathtomod = value;
}

public function get pathtomod ():String {
return _pathtomod;
}
}
}

The DAELoaderProxy does one thing: it (obviously) loads a DAE model for our cool Papervision3d. Once the 3D model is loaded the Proxy class calls a setter upon the data Model class (in this case called DataLogic.as) and passes the 3D model to it.

This way the responsibility of updating the framework is handed over to the Model. The Model dispatches an event with the DAE 3d model as payload and our ViewMediator catches the event and adds the model to our 3D View.

Proxies seem to me very single minded. We can in effect write an alternative KMZLoaderProxy class for google Sketchup models without needing to know more than the code that gets that particular job done. Of course we might as well call the DAELoaderProxy class for ‘DAELoader’ but for me personally I like the word proxy as it underlines the “Stand in” part.

And whereas a loader in not structured code often ends up notifying the Observers the proxy does not. It let’s Model do it’s part instead.

You can download project files here (Flashbuilder project). It should contain all needed to run locally.

Augmented reality, lab 1

Better late than never as I’ve began to delve into Augmented Reality.

There’s much inspiring work going on in the AR community. The QT movie above is just a brief demo based on the start toolkit for FLAR over at http://saqoosha.net/en/flartoolkit/start-up-guide/ – slimmed down by me for Flashdevelop. The bitmap material is from Scuba’s latest album, Triangulation…

I’m currently looking at learning more about markers; and it’s been pointed out to me that there’s a useful marker generation tool here: http://flash.tarotaro.org/blog/2009/07/12/mgo2/.

Papervision3D, FlashDevelop template

Flashdevelop Here’s a simple FlashDevelop template to speed up the creation of a 3D render in Papervision3D 2.0. Download the template from here or copy the code below and save it as View3D.as.fdt.

In FlashDevelop go to Tools –> Application files. This will open your Explorer: Now go into the folder Templates > ProjectFiles > AS3Project and drop the template in there.

You will now if you left click on your src package and go to Add > see the option ‘BasicView’ in the menu that pops up.

The custom arguments available for template creation are listed at http://www.flashdevelop.org/community/viewtopic.php?t=1521

Here’s the template:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
package $(Package) $(CSLB){

   import flash.events.Event;
   import org.papervision3d.view.BasicView;

   public class $(FileName) extends BasicView {
      $(EntryPoint)
      /**
      * $(FileName)
      */

     
      public function $(FileName)():void {
         init();
         startRendering();
      }

      private function init():void {
      }
     
      override protected function onRenderTick(e:Event=null):void{
         super.onRenderTick();
      }
   
   }
}

Lastly, a good set of templates can be found over at http://www.actionscriptdeveloper.co.uk/puremvc-first-thoughts-flashdevelop-templates/

Papervision3D, interactive material

It’s easy to create an interactive papervision 3D primitive such as this Cube (click on it’s sides):


Get Adobe Flash player

The cube uses the BitmapMaterial class (the sides are embedded jpg’s) and all we need to do to make them interactive is to remember to set interactive to true:

1
2
bitmapMaterial6.name = "6";
bitmapMaterial6.interactive = true;

Once we created our cube the last bit is just to add the event listener to the InteractiveScene3DEvent which is dispatched by the Cube. And we can use the event property evt.face3d.material.name of the current material side clicked to retrieve the name of the same:

1
2
3
4
5
6
7
// create a cube based on the list
primitive = new Cube(materiallist, 400, 400, 400, 3, 3, 3);
primitive.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, handleClick);
//.../
private function handleClick (evt:InteractiveScene3DEvent) :void {
testText.text = "__side clicked : " +evt.face3d.material.name;
}

The InteractiveScene3DEvent is not limited to click events however, the documentation at http://papervision3d.googlecode.com/svn/trunk/as3/trunk/docs/org/papervision3d/events/InteractiveScene3DEvent.html – shows that we can also listen for MOVE, OVER, OUT, etc. Nice.

If you would like to get hold of the full code for this example then you can download it here (Flashdevelop project).

Theres some great Papervision tutorials over at http://www.madvertices.com where I’ve taken several myself!