Posts Tagged “experiment”

Firefox 3.6 introduced a very annoying bug, and only on a Mac.

If you're using somewhere a MouseEvent.ROLL_OUT or MouseEvent.MOUSE_OUT, this event will fired even if you only click on a object without leave the object with the mouse.

Example there

The select box in the middle of the page doesn't work because a roll out event is fired when you click on it.

I didn't try yet to find a fix with MOUSE_UP and MOUSE_DOWN, but the problem is, all the existing sites that are using those events might be broken...

I believe Firefox is, or not firing the right event, or removing and putting back the flash so it loses the focus, meaning roll out is fired... A friend told me that the same things happen with java applet, didn't verify it yet.

Bug report

To test it, paste this as a document class:

Actionscript:
  1. package com.soundstep.baseui.demo {
  2.     import flash.events.MouseEvent;
  3.     import flash.display.Sprite;
  4.     public class Main extends Sprite {
  5.         public function Main() {
  6.         var s:Sprite = new Sprite();
  7.         s.graphics.beginFill(0xFF0000);
  8.         s.graphics.drawRect(0, 0, 100, 100);
  9.         s.addEventListener(MouseEvent.MOUSE_OUT, test);
  10.         addChild(s);
  11.         }
  12.         private function test(e:MouseEvent):void {
  13.             trace("ok");
  14.         }
  15.     }
  16. }

Click on the square and you'll see that the MOUSE_OUT is fired...

I hope they'll fix soon or I'll have to find a hack and change everything that is live.

Romu

Vote in HexoSearch

Comments 10 Comments »

Hi Everyone,

This is not exactly a "Soma release", but I would like to share with you my last work so we can talk about: A new AS3 MVC Framework with its own design philosophy.

Why another AS3 MVC Framework?

I've been working with different Frameworks in the last years, such as PureMVC, Cairngorm and Mate for the well-known. I've always knew that I would write my own "MVC design philosophy", without taking big words, because I would have some needs that existing Frameworks wouldn't completely fill.

That's what happened. I needed a Flash lightweight framework, not DI, event based, working both for Flex or Pure AS3. The biggest inspirations have been PureMVC for the proxies and mediators, and Mate for their event system.

I'll be starting an interesting AIR Modular app and I needed something that will easily allow me to have views and models free of Framework code, without creating tons of files or use any injection. I also wanted a Framework very flexible, so I can use it even for smaller project, being sure I'll be effective in terms of development time.

Free the views and models

First problem, free the views and models of Framework code (loose-coupling). It seems there's a wave of DI Framework but... I've never really been into DI Framework, because they tend to control the way you're doing things. If you stick to it, it is fine, but I've always felt more freedom with framework like PureMVC. I might be wrong, it is just an opinion and not even entirely true as I didn't felt that problem with Mate.

So, to solve this problem, I used the events Mate concept. A basic Flash Events that has a bubble property set to true can become Commands when they are mapped to a Command class. Those events can be intercepted, stopped and processed by the Framework (execute Commands). The great thing is, views and models are free of Framework code and can use Commands because they are just Flash native events.

Wires introduction

Second problem, was to "update" data or states in the views and models. PureMVC is using proxies and mediators and I like that approach. However, you end up by creating tons of files for the sake of loose-coupling pratice. So I've created something that I call "Wire". Now software engineers or PureMVC adept might say that what I'm doing is wrong. I have no idea, I'm no computer scientist, I do what I feel and I'm sharing it with you.

Wire are classes that can contain Framework code and they will be the links between the models, the views, the Framework and... whatever you like. Wire can be proxies, they can be mediators, but they can also be both and handle more than one view or model.

Basically, they are as free as you want them to be. They can even be optional if you don't care about good practice or loose-coupling programming. Wires have easy access to all the framework, models, commands and views. They can register create models, views, register commands or create other wires.

Update from comment:

So far I saw two ways to inject/update information into views without having framework code inside:

- Dependency Injection
- Buffer classes (such as Mediators and Proxies in PureMVC for the analogy, respectively for Views and Models). I mean "buffer" by classes that act as steward of other classes.

I've chosen the second way, and I've created a "buffer" class that I called a Wire.

Wires are completely free classes. I won't tell you how to use them (because that's up to you) but I can tell what you can do with them. Wires can be used to update views and models but they are not tight to anything. They are not even only tight to one tier. To create a wire class you extend Wire and implements IWire, and here are the roles they can take:

- a wire can act as steward of a view (such as Mediator in PureMVC)
- a wire can act as steward of a model (such as Proxies in PureMVC)
- a wire can manage both a view and a model
- a wire can manage multiple views and/or multiple models
- a wire can be considered as a subdivision of the framework and create its own views, create its own models and register its own commands. Much like you would create a specific package to hold a specific matter.

When I build something, I always try to keep a good level of freedom to handle problems how I like but most importantly, how they should be. If you like to have the framework telling you (or forcing you) how to build your application, fair enough but you won't like it.

The wires are the free elements that will let you built your application the way you like or the way it is required to be. They can make your application rigid, segmented, flexible or centralized, depending of the role you are going to give them. They are so free that I believe remove (or lesser) what I call "Framework Fight".

Let's take an example, the Cafe TownSend below.

There are 2 wires: the LoginWire and the Employee Wire. They both register their own commands to control their views and models.

The Login Wire only handles a Login View.

The EmployeeWire handles 2 views: a list of employees and an employee details. But also 1 model (the employees data), all of them only related to employees matter.

SomaCore

I temporarily named this framework SomaCore and it has nothing to do with the Framework I released on this blog (Soma). However, this framework might become the core of what will be Soma v3.

I post this code hoping to get your feedback or point of view of what might be great or wrong in this framework.

Here is a diagram:

SomaCore MVC Diagram


Click here to download a zip file containing the Framework sources code (classes and SWC).

And here are some demos. I made a Flex Cafe TownSend demo and a pure AS3 demo.

SomaCore Flex Cafe TownSend SomaCore Flash AS3 Demo
View Demo
View Source
Download Source
View Demo
View Source
Download Source

This is a very early state, this Framework has not been used yet in a real project beside the demos above. Have a look and please comment what you feel is good or wrong in the core concept.

Romu

Vote in HexoSearch

Comments 10 Comments »

Hi everyone,

As I'm close to release Soma v2 (AS3 MVC Framework) and SomaUI v2 (application to generate actionscript source code and deploy files based on Soma), I'd like to share an earlier version with some beta-testers who are interested to help me debug both the framework and the generator.

Mac and Windows available, I didn't have time to make the Linux one. The generator is in a beta state but the framework and code generated are pretty stable as it has been already used many times in real projects.

I will not send it to everyone, or I will not have time to manage this properly (depending of the feedback), sorry about that.

You can drop me an email from this blog to ask me. Please, participate only to give me a hand and by helping me with your feedback and bug reports. I can provide support, depending of my time if you wish to use it for real projects. For the curious, just be patient, the release will available very soon :)

Thanks and, happy development!

Vote in HexoSearch

Comments 3 Comments »

For a special purpose I had to extend a Singleton, to make my system fully flexible. I found complicated solutions that wasn't fully working as intended.

To use PureMVC, you have to extend a Singleton (Facade), which is the entry point of the framework. This is working only if you don't use the Facade class (the super Singleton) before using the subclass, otherwise you get an error, as the super singleton has already been instantiated.

Well this might be a simple solution but not working in my case.

First of all, they are a lot of solutions to correctly "lock" a Singleton, because in AS3, private constructor doesn't exist. Some of them have turn around, that you can solve with a bit more code, but the solution I prefer is instantiate the Singleton out of the constructor and method:

Actionscript:
  1. private static var _instance:Singleton = new Singleton();

So, if I use the super singleton with a Singleton.getInstance(), and then use the subclass with a SingletonExtended.getInstance(), this will throw an error as when the SingletonExtended is called, the Singleton is called as well and has already been instantiated.

The solution I found is compare the super class name with a static class name, basically you can't use the keyword "this" when you declare a variable, but using "super" will return the same result (well that's odd but it is what I saw):

Actionscript:
  1. private static var _className:String = getQualifiedClassName(super);

And then compare it with the super classname in the Singleton constructor:

Actionscript:
  1. if (_instance != null && getQualifiedSuperclassName(this) != _className) throw new Error

if I trace(_className + " - " + getQualifiedSuperclassName(this)) in the Singleton constructor:

- when I use the Singleton class, I get: "null - Object"
- when I use the SingletonExtended class, I get: "Singleton - Singleton", meaning the constructor has been called from a subclass.

Until now, it is working pretty well, I can use:

Actionscript:
  1. Singleton.getInstance().singletonValue
  2. SingletonExtended.getInstance().singletonValue
  3. SingletonExtended.getInstance().singletonExtendedValue

But we're not completely done. We can access to our two Singleton... but wait, "two Singleton", is that possible?

In fact, it is completely possible and it is even a problem. Let's say I have a undefined value in Singleton, like:

Actionscript:
  1. private var _myValueNotInitialized:String;

And then you have a public method that is setting a value to this variable:

Actionscript:
  1. public function initializeMyValue():void {
  2.     _myValueNotInitialized = "I am initialized";
  3. }

You can now use:

Actionscript:
  1. Singleton.getInstance().initializeMyValue();
  2. or
  3. SingletonExtended.getInstance().initializeMyValue();

But here is the problem: you still have 2 instances. One in Singleton and the other in SingletonExtended. If you use:
Singleton.getInstance().initializeMyValue();
and trace:
SingletonExtended.getInstance().myValueNotInitialized
you will get null, which is normal.

This doesn't make a lot of sense for a Singleton, does it?

The solution I found is updating the Singleton instance with the SingletonExtended one.

In the Singleton, I'm now able to update the instance:

Actionscript:
  1. public function updateInstance(instance:Singleton):void {
  2.     if (instance != null && instance is Singleton) _instance = instance;
  3.     else throw new Error("Incorrect Singleton update");
  4. }

And in the subclass SingletonExtended, I change the getInstance method:

Actionscript:
  1. public static function getInstance():SingletonExtended {
  2.     Singleton.getInstance().updateInstance(_instance);
  3.     return _instance;
  4. }

This is doing the job I needed, a fully Extended Singleton with no errors accessing the super or he subclass.

I tried to break it, but if it is possible, I didn't find the hole. And if you have a better solution, I'd be very happy to see it.

You can download the source by clicking here, or see the classes below.

The main class:

Actionscript:
  1. package {
  2.    
  3.     import flash.display.Sprite;
  4.    
  5.     /**
  6.      * <b>Author:</b> Romuald Quantin - <a href="http://www.soundstep.com/" target="_blank">www.soundstep.com</a><br />
  7.      * <b>Class version:</b> 1.0<br />
  8.      * <b>Actionscript version:</b> 3.0<br />
  9.      * <b>Date:</b> 11-2008<br />
  10.      */
  11.     
  12.     public class Main extends Sprite {
  13.        
  14.         //------------------------------------
  15.         // private properties
  16.         //------------------------------------
  17.        
  18.         //------------------------------------
  19.         // public properties
  20.         //------------------------------------
  21.        
  22.         //------------------------------------
  23.         // constructor
  24.         //------------------------------------
  25.        
  26.         public function Main() {
  27.            
  28.             trace("--- public properties ---");
  29.             trace(Singleton.getInstance().singletonValue + ">>> from Singleton");
  30.             trace(SingletonExtended.getInstance().singletonValue + ">>> from SingletonExtended");
  31.             trace(SingletonExtended.getInstance().singletonExtendedValue + ">>> from SingletonExtended");
  32.             trace(Singleton.getInstance().singletonValue + ">>> from Singleton");
  33.            
  34.             trace("--- access to public methods ---");
  35.             trace(Singleton.getInstance().publicSingletonMethod() + ">>> from Singleton");
  36.             trace(SingletonExtended.getInstance().publicSingletonMethod() + ">>> from SingletonExtended");
  37.             trace(SingletonExtended.getInstance().publicSingletonExtendedMethod() + ">>> from SingletonExtended");
  38.            
  39.             trace("--- access to private methods ---");
  40.             trace(Singleton.getInstance().accessPrivateSingletonMethod() + ">>> from Singleton");
  41.             trace(SingletonExtended.getInstance().accessPrivateSingletonMethod() + ">>> from SingletonExtended");
  42.             trace(SingletonExtended.getInstance().accessPrivateSingletonExtendedMethod() + ">>> from SingletonExtended");
  43.            
  44.             trace("--- access to protected and overriden methods ---");
  45.             trace(Singleton.getInstance().accessProtectedSingletonMethod() + ">>> from Singleton");
  46.             trace(SingletonExtended.getInstance().accessProtectedSingletonMethod() + ">>> from SingletonExtended");
  47.             trace(SingletonExtended.getInstance().accessOverridenSingletonExtendedMethod() + ">>> from SingletonExtended");
  48.            
  49.             trace("--- value not initialized ---");
  50.             trace("before = ", Singleton.getInstance().myValueNotInitialized);
  51.             Singleton.getInstance().initializeMyValue(); // or SingletonExtended.getInstance().initializeMyValue();
  52.             trace("after = ", Singleton.getInstance().myValueNotInitialized);
  53.            
  54.             // this will generate errors
  55.             // as you can't instantiate twice a Singleton or a sublass of Singleton
  56.            
  57.             //var s1:Singleton = new Singleton();
  58.             //var s2:SingletonExtended = new SingletonExtended();
  59.            
  60.         }
  61.        
  62.         //
  63.         // PRIVATE, PROTECTED
  64.         //________________________________________________________________________________________________
  65.        
  66.         //
  67.         // PUBLIC
  68.         //________________________________________________________________________________________________
  69.        
  70.     }
  71. }

The Singleton class:

Actionscript:
  1. package {
  2.  
  3.     import flash.utils.getQualifiedClassName;
  4.     import flash.utils.getQualifiedSuperclassName;
  5.  
  6.     /**
  7.      * <b>Author:</b> Romuald Quantin - <a href="http://www.soundstep.com/" target="_blank">www.soundstep.com</a><br />
  8.      * <b>Class version:</b> 1.0<br />
  9.      * <b>Actionscript version:</b> 3.0<br />
  10.      * <b>Date:</b> 11-2008<br />
  11.      */
  12.     
  13.     public class Singleton {
  14.        
  15.         //------------------------------------
  16.         // private properties
  17.         //------------------------------------
  18.        
  19.         private static var _instance:Singleton = new Singleton();
  20.         private static var _className:String = getQualifiedClassName(super);
  21.        
  22.         private var _myValueNotInitialized:String;
  23.        
  24.         //------------------------------------
  25.         // public properties
  26.         //------------------------------------
  27.        
  28.         public var singletonValue:String = "Singleton value";
  29.        
  30.         //------------------------------------
  31.         // constructor
  32.         //------------------------------------
  33.        
  34.         public function Singleton() {
  35.             if (_instance != null && getQualifiedSuperclassName(this) != _className) throw new Error("Singleton is obviously... Singleton.");
  36.         }
  37.        
  38.         //
  39.         // PRIVATE, PROTECTED
  40.         //________________________________________________________________________________________________
  41.        
  42.         private function privateSingletonMethod():String {
  43.             return "privateSingletonMethod";
  44.         }
  45.        
  46.         protected function protectedSingletonMethod():String {
  47.             return "protectedSingletonMethod";
  48.         }
  49.        
  50.         //
  51.         // PUBLIC
  52.         //________________________________________________________________________________________________
  53.        
  54.         public function initializeMyValue():void {
  55.             _myValueNotInitialized = "I am initialized";
  56.         }
  57.        
  58.         public function updateInstance(instance:Singleton):void {
  59.             if (instance != null && instance is Singleton) _instance = instance;
  60.             else throw new Error("Incorrect Singleton update");
  61.         }
  62.  
  63.         public static function getInstance():Singleton {
  64.             return _instance;
  65.         }
  66.        
  67.         public function publicSingletonMethod():String {
  68.             return "publicSingletonMethod value";
  69.         }
  70.        
  71.         public function accessPrivateSingletonMethod():String {
  72.             return privateSingletonMethod();
  73.         }
  74.        
  75.         public function accessProtectedSingletonMethod():String {
  76.             return protectedSingletonMethod();
  77.         }
  78.        
  79.         public function get myValueNotInitialized():String {
  80.             return _myValueNotInitialized;
  81.         }
  82.     }
  83. }

The SingletonExtended class:

Actionscript:
  1. package {
  2.  
  3.     /**
  4.      * <b>Author:</b> Romuald Quantin - <a href="http://www.soundstep.com/" target="_blank">www.soundstep.com</a><br />
  5.      * <b>Class version:</b> 1.0<br />
  6.      * <b>Actionscript version:</b> 3.0<br />
  7.      * <b>Date:</b> 11-2008<br />
  8.      */
  9.     
  10.     public class SingletonExtended extends Singleton {
  11.        
  12.         //------------------------------------
  13.         // private properties
  14.         //------------------------------------
  15.        
  16.         private static var _instance:SingletonExtended = new SingletonExtended();
  17.        
  18.         //------------------------------------
  19.         // public properties
  20.         //------------------------------------
  21.        
  22.         public var singletonExtendedValue:String = "SingletonExtended value";
  23.        
  24.         //------------------------------------
  25.         // constructor
  26.         //------------------------------------
  27.        
  28.         public function SingletonExtended() {
  29.             if (_instance != null) throw new Error("SingletonExtended is obviously also... Singleton.");
  30.         }
  31.        
  32.         //
  33.         // PRIVATE, PROTECTED
  34.         //________________________________________________________________________________________________
  35.        
  36.         private function privateSingletonExtendedMethod():String {
  37.             return "privateSingletonExtendedMethod";
  38.         }
  39.        
  40.         override protected function protectedSingletonMethod():String {
  41.             return "protectedSingletonMethod overriden in SingletonExtended, value in super.protectedSingletonMethod(): " + super.protectedSingletonMethod();
  42.         }
  43.        
  44.         //
  45.         // PUBLIC
  46.         //________________________________________________________________________________________________
  47.        
  48.         public static function getInstance():SingletonExtended {
  49.             Singleton.getInstance().updateInstance(_instance);
  50.             return _instance;
  51.         }
  52.        
  53.         public function publicSingletonExtendedMethod():String {
  54.             return "publicSingletonExtendedMethod value";
  55.         }
  56.        
  57.         public function accessPrivateSingletonExtendedMethod():String {
  58.             return privateSingletonExtendedMethod();
  59.         }
  60.        
  61.         public function accessOverridenSingletonExtendedMethod():String {
  62.             return protectedSingletonMethod();
  63.         }
  64.    
  65.     }
  66. }

Vote in HexoSearch

Comments 2 Comments »

The ScrollPane component is a nice tool to use if you need to scroll a content or a list with more than text.

If you like to have everything a bit "tweened" in the sites you developed, you will feel the scroll movement of the scrollpane a bit straightforward.

There is an easy way to get this done.

When the user is scrolling the content with the scrollbar of the ScrollPane, the component dispatch an event:

ScrollEvent.SCROLL

The idea is to stop the movement of the content when this event is dispatched using:

e.stopImmediatePropagation()

And then handle the scrolling using a tweener.

I made an simple example with the CanvasUI class I built as it is using a ScrollPane component for the content, but you can use this code for a normal ScrollPane instance.

Here is the demo and the source, code of the main class below for a quick look.

Actionscript:
  1. package {
  2.  
  3.     import flash.display.Sprite;
  4.     import fl.events.ScrollEvent;
  5.     import fl.containers.ScrollPane;
  6.     import fl.controls.ScrollBarDirection;
  7.     import gs.TweenMax;
  8.    
  9.     import com.soundstep.ui.layouts.*; 
  10.     import com.soundstep.ui.*; 
  11.  
  12.     /**
  13.      * <b>Author:</b> Romuald Quantin - <a href="http://www.soundstep.com/" target="_blank">www.soundstep.com</a><br />
  14.      * <b>Actionscript version:</b> 3.0<br />
  15.      */
  16.     
  17.     public class Main extends Sprite {
  18.  
  19.         //------------------------------------
  20.         // private properties
  21.         //------------------------------------
  22.        
  23.         private var _canvas:CanvasUI;
  24.        
  25.         //------------------------------------
  26.         // public properties
  27.         //------------------------------------
  28.        
  29.        
  30.  
  31.         //------------------------------------
  32.         // constructor
  33.         //------------------------------------
  34.        
  35.         public function Main() {
  36.             _canvas = new CanvasUI();
  37.             addChild(_canvas);
  38.             _canvas.canvasAlpha = .2;
  39.             _canvas.horizontalCenter = 0;
  40.             _canvas.verticalCenter = 0;
  41.             _canvas.width = 300;
  42.             _canvas.height = 300;
  43.             _canvas.addChildUI(new ContentText());
  44.             _canvas.refresh();
  45.             _canvas.scrollPane.addEventListener(ScrollEvent.SCROLL, scrollHandler, true);
  46.         }
  47.        
  48.         //
  49.         // PRIVATE, PROTECTED, INTERNAL
  50.         //________________________________________________________________________________________________
  51.        
  52.         private function scrollHandler(e:ScrollEvent):void {
  53.             e.stopImmediatePropagation();
  54.             switch (e.direction) {
  55.                 case ScrollBarDirection.HORIZONTAL:
  56.                     TweenMax.to(_canvas.scrollPane.content, .5, {x:e.position*-1});
  57.                     break;
  58.                 case ScrollBarDirection.VERTICAL:
  59.                     TweenMax.to(_canvas.scrollPane.content, .5, {y:e.position*-1});
  60.                     break;
  61.             }
  62.         }
  63.        
  64.         // PUBLIC
  65.         //________________________________________________________________________________________________
  66.        
  67.        
  68.        
  69.     }
  70. }

Vote in HexoSearch

Comments 2 Comments »