Pixlib Flash Platform Framework

PixIOC – L’inversion de Contrôle with Pixlib enfin dévoilée

PixTeam — Thu, 19 Apr 2012 18:31:03 +0000

PixIOC est une extension de Pixlib permettant de réaliser des architectures IoC c’est à dire avec le concept d’inversion de contrôle.

Loin de moi l’idée de faire un court sur la conception IoC ici, les IoC’s Lover se reconnaitront.

Pour les Pixlib’s addict, sachez seulement que l’IoC a été complètement refondu, plus performante, plus puissante en terme de possibilité d’inversion et aussi plus facile à étendre, maintenir et customiser pour pourquoi supporter la définition de contexte dans d’autres structure que XML (pas JSON, etc.).

La librairie PixIOC est disponible sur la page des téléchargements.

Happy coding with Pixlib

Découverte du MVC dans Pixlib

PixTeam — Tue, 24 May 2011 14:22:41 +0000

Voici un petit article qui décrit l’organisation MVC d’un projet Pixlib 3.0.

Ce n’est pas un hasard, si le pattern MVC est décliné dans de nombreux langages et présent dans le coeur de la plupart des framework orientés applicatif. La découpe d’un projet sous la forme Modèle-Vue-Contrôleur apporte beaucoup de souplesse et donc un gain de temps non négligeable dans le maintien et l’évolution d’une application.

Courte synthèse sur le pattern Modèle-Vue-Contrôleur

Le MVC est un modèle de conception qui regroupe les classes d’une application en 3 groupes :
• le groupe des Modèles, qui correspond au code permettant de gérer et manipuler les données ;
• le groupe des Vues, qui rassemble tout ce qui sert d’interface avec laquelle l’utilisateur va interagir ;
• le groupe des Contrôleurs, qui traite les événements et notifie qui de droit des changements éventuels.

Bien que très formelle, l’organisation d’un projet sous forme de MVC offre une structure propre et solide. Plus de détails sur l’article de Wikipedia : Modèle-Vue-Contrôleur

Le MVC dans Pixlib peut aussi être appelé MVC+FC (Model-View-Command+FrontController), car la partie contrôleur est composée d’un FrontController et d’un ensemble de Commandes.

Le MVC est global dans Pixlib

Organisé autour de 3 Locators globaux, basés sur une logique de Singleton (Singleton(patron de conception)), le MVC « made Pixlib » permet d’atteindre de manière globale chaque élément de l’application.

Chaque Locator est un agrégateur :

le PXModelLocator agrège les PXModel ;
le PXViewLocator agrège les PXView ;
le PXFrontController agrège les PXCommandes.

PXView, PXModel et leurs Locators.

Le groupe des vues et des modèles fonctionne de la même manière.
PXView et PXModel sont des interfaces, qui possèdent une implémentation abstraite (Classe abstraite) (PXAbstractView et PXAbstractModel) que l’on va étendre pour en faire un usage concret.

Donc en pratique, chaque vue doit étendre la classe PXAbstractView;

public class MyView extends PXAbstractView
{
	public function MyView(viewName : String)
	{
		super(null, viewName);
	}
}

et chaque modèle doit étendre la classe PXAbstractModel.

public class MyModel extends PXAbstractModel
{
	public function MyModel(modelName : String)
	{
		super(null, modelName);
	}
}

Ces deux classes prennent comme arguments dans le constructeur : le owner que nous laisserons pour le moment à null (pour en savoir plus rendez-vous sur : La notion de Plugin, le multi-MVC dans Pixlib), et le name qui servira d’identifiant unique.

Lors de l’instanciation de ces classes, l’argument name va être utilisé comme identifiant unique par le locator (PXModelLocator pour MyModel et PXViewLocator pour MyView). Ce qui va nous permettre de récupérer les instances de modèles et de vues depuis n’importe quel endroit de notre application.

// stockage implicite dans les Locators faits lors de l'instanciation
new MyModel("idUnique");
new MyView("idUnique");
 
// qui permet une récupération des instances de manière globale.
PXModelLocator.getInstance().locate("inUnique"); // retourne l'instance de MyModel
PXViewLocator.getInstance().locate("inUnique"); // retourne l'instance de MyView

PXCommandes et PXFrontController

Légèrement différent, PXFrontController permet de lier des commandes à un identifiant et de les exécuter selon nos besoins.
Tout comme les modèles et les vues, les commandes ont une interface PXCommand et une implémentation Abstraite PXAbstractCommand qu’il faudra étendre pour l’utiliser.

Le code de base d’une commande est donc :

public class MyCommand extends PXAbstractCommand
{
	override protected function onExecute(event : Event = null) : void
	{
		// notification de fin d'exécution, car commande asynchrones!
		fireCommandEndEvent();
	}
}

Pour pouvoir l’utiliser via le contrôleur, nous devons ajouter MyCommand au PXFrontController, en utilisant un EventType comme identifiant unique.

var controller : PXFrontController = PXFrontController.getBaseController();
controller.pushCommandClass("onCommand", MyCommand);

Ce qui nous permettra depuis n’importe quel endroit de lancer l’exécution de la commande en passant au FrontController un événement qui a comme EventType l’identifiant de notre commande.

PXFrontController.getBaseController().handleEvent(new Event("onCommand"));

À noter que les commandes dans Pixlib sont asynchrones, ce qui oblige d’appeler la méthode fireCommandEndEvent() pour notifier la fin de leurs exécutions.

Qui communique avec qui ?

Maintenant que vous savez instancier et récupérer les modèles, vues et commandes au sein de Pixlib, voyons comment organiser tout ce petit monde dans une application.

Des modèles vers les vues

Le couplage faible est un maitre mot dans un projet Pixlib.
C’est pour cette raison que l’organisation de la communication entre les modèles et les vues est gérée depuis l’extérieur.

var view : PXView = new MyView("MyView");
var model : MyModel = new MyModel("MyModel");
model.addListener(view);

Les modèles ne connaissent pas les vues et vice versa.
La communication se passe via le système événementiel et la notification de changement.

En pratique, lorsqu’un modèle subit un changement, il le notifie.

public class MyModel extends PXAbstractModel
{
	public function change() : void
	{
		logger.debug("Model change", this);
		notifyChanged(new PXStringEvent("onChange", this, "ma nouvelle String"));
	}
}

La ou les vues abonnées au modèle reçoivent cette notification et réagissent en conséquence.

public class MyView extends PXAbstractView
{
	public function onChange(event : PXStringEvent) : void
	{
		logger.debug("Model send me new string " + event.value, this);
	}
}

Des vues vers les commandes

Principal point d’entrée des applications, les vues sont en général à l’origine de l’exécution des commandes.
Grâce à la méthode firePrivateEvent, les vues peuvent exécuter n’importe quelles commandes agrégées sur le PXFrontController du MVC.

// agrégation de la commande « MyCommand » sur le PXFrontController
var controller : PXFrontController = PXFrontController.getBaseController();
controller.pushCommandClass("onCommand", MyCommand);
// exécution de MyCommand depuis une vue
firePrivateEvent(new Event("onCommand"));

Les commandes vers les modèles ou les vues

Étant les gestionnaires de l’application, les commandes permettent de modifier des vues, des modèles ou l’exécution de nouvelles commandes.

public class CheckCommand extends PXAbstractCommand
{
	override protected function onExecute(event : Event = null) : void
	{
		// modification d'un modèle
		getModel("MyModel").release();
		// modification d'une vue
		getView("MyView").show();
		// execution d'une autre commande
		firePrivateEvent(new Event("onChange"));
 
		fireCommandEndEvent();
	}
}

En résumé :

le MVC dans Pixlib est global ;
chaque groupe de classe possède un Locator (PXModelLocator pour les modèles, PXViewLocator pour les vues, PXFrontController pour les commandes) ;
les modèles notifient les vues ;
les vues lancent des commandes ;
les commandes permettent de modifier les modèles et/ou les vues, ainsi que l’exécution de nouvelles commandes ;

Pour continuer :

Happy codding with Pixlib!

La notion de Plugin, le multi-MVC dans Pixlib

PixTeam — Mon, 23 May 2011 17:41:57 +0000

Comme nous l’avons vu lors de la découverte du MVC dans Pixlib. Le core de Pixlib structure les projets Flash sous la forme d’un MVC+FC, où chaque modèle, vue et commande possède un identifiant unique. Ces identifiants permettent de cibler ces derniers de manière globale dans une application Pixlib.

Le souci avec cette gestion globale du MVC est qu’il est très risqué de charger plusieurs « projets Pixlib » dans une même application (risque de télescopage au niveau des identifiants). Apparu avec lowRA (Pixlib v2), le Plugin permet de supprimer cette limitation !

Un plugin == un owner == un channel

Un plugin est égal à l’encapsulation d’un MVC+FC (composé de n modèles, n vues, n commandes + FrontController et d’PXPluginChannel).

On retrouve dans chaque instance de la classe PXAbstractPlugin (ou interface PXPlugin), une instance de PXModelLocator, PXViewLocator et PXFrontController lier au plugin. Le plugin est utilisé comme un filtre au niveau des Locators, par ce biais, les identifiants utilisés pour récupérer les PXModel, PXView et PXCommand sont uniques seulement au sein d’une instance de PXAbstractPlugin. Plus de souci donc, si deux modèles utilisent le même identifiant, du moment qu’ils sont instanciés dans deux plugins différents.

public class MyPlugin extends PXAbstractPlugin
{
	override protected function initialize() : void
	{
		super.initialize();
 
		var view : PXView = new MyView(this, "MyView");
		var model : MyModel = new MyModel(this, "MyModel");
		controller.pushCommandClass("onCheck", CheckCommand);
	}
}

En pratique, lors de l’instanciation d’un PXModel ou d’une PXView, on donne comme valeur à la propriété owner l’instance du plugin auquel elle appartient. Implicitement, le modèle ou la vue va automatiquement s’enregistrer auprès du bon Locator.

Pour récupérer une de mes instances

PXModelLocator.getInstance(MyPluginInstance).locate("MyModel");
PXViewLocator.getInstance(MyPluginInstance).locate("MyView");

Communication entre plugins

Pouvoir faire tourner plusieurs MVC dans une même application c’est bien, pouvoir les faire communiquer entre eu c’est mieux!

À l’instar de la méthode firePrivateEvent qui permet d’envoyer un événement au PXFrontController du plugin. Il existe deux méthodes au sein de la classe PXAbstractPlugin pour communiquer avec les plugins voisins.

La méthode firePublicEvent, qui permet d’envoyer un événement à tous les plugins abonnés au plugin émetteur via l’une des deux méthodes : addPluginListener, addPluginEventListener.

La méthode fireExternalEvent quant à elle permet de cibler un plugin receveur en prenant en 2e argument le PXPluginChannel du plugin cible.

// Main

var pluginB : PXPlugin = new PluginB();
var pluginC : PXPlugin = new PluginC();
 
var pluginA : PluginA = new PluginA();
pluginA.addPluginListener(pluginB);
pluginA.addPluginEventListener("onShout", pluginC);
pluginA.talk();
pluginA.shout();
pluginA.kill(pluginC.channel);

// PluginA

public class PluginA extends PXAbstractPlugin
{
	public function PluginA()
	{
		registerInternalChannel(this);
		// only use for non IoC context
		super();
	}
 
	public function talk() : void
	{
		firePublicEvent(new PXStringEvent("onTalk", this, "Hello I'm Plugin A"));
	}
 
	public function shout() : void
	{
		firePublicEvent(new PXStringEvent("onShout", this, "I'm Plugin A and I'm nervous !"));
	}
 
	public function kill(channel : PXEventChannel) : void
	{
		fireExternalEvent(new PXStringEvent("onKill", this, "I'm Plugin A and I Want kill you !"), channel);
	}
}

// PluginB

public class PluginB extends PXAbstractPlugin
{
	public function PluginB()
	{
		registerInternalChannel(this);
		// only use for non IoC context
		super();
	}
 
	public function onTalk(event : PXStringEvent) : void
	{
		logger.debug("I receive a message : " + event.value, this);
	}
}

// PluginC

public class PluginC extends PXAbstractPlugin
{
	public function PluginC()
	{
		registerInternalChannel(this);
		// only use for non IoC context
		super();
	}
 
	public function onShout(event : PXStringEvent) : void
	{
		logger.debug(event.value, this);
	}
 
	public function onKill(event : PXStringEvent) : void
	{
		logger.debug(event.value, this);
	}
}

Important, lors de l’extension de la classe PXAbstractPlugin pour un usage non IOC, il est important d’appeler la méthode registerInternalChannel(this); afin de pouvoir définir le PXPluginChannel du plugin.

À l’image du PXEventChannel dans l’API de logging, le PXPluginChannel sert de « canal de diffusion » propre au MVC du plugin.

Retrouvez les sources de l’exemple sur la page de téléchargement du Google code.

Happy coding with Pixlib

PixTMS – La localisation de vos applications

PixTeam — Sun, 08 May 2011 15:32:07 +0000

PixTMS, nouvelle extension de Pixlib, permet de réaliser facilement la localisation de vos applications Flash.

PixTMS pour Pixlib Translation Management System va permettre de gérer vos traductions avec le support de fichiers :

XML
XLIFF
MO / PO
Fichier de propriétés

Voyons comment cela fonctionne.

Tout d’abord, une présentation rapide du système de classes mis à disposition dans cette librairie.

PXLanguage est le singleton (le pilier) qui va s’occuper d’aller récupérer les traductions et ensuite un ensemble de classes permettant de définir les différents types de données gérés pour les traductions (bundle) :

PXXMLLanguageBundle : données XML
PXXLIFFLanguageBundle : données au format XLIFF
PXPropLanguageBundle : fichier de propriétés
PXPOLanguageBundle : données au format PO
PXMOLanguageBundle : données binaire MO

Ces classes tourne autour de l’interface principale PXILanguageBundle (et d’une classe abstraite PXLanguageBundle).

Le système de traduction mis en place par PixTMS permet de charger des documents externes, mais aussi d’utiliser des données qui sont packagées lors de la compilation (embeded).

1. Présentation et traductions packagées

Prenons un premier exemple avec l’utilisation de l’extension PixEmbed de Pixlib :

Tout d’abord un fichier XML de traduction rapide :

>
 >
      id="NAME">Travail de bas niveaux sur Actionscript 3.0>
 >
>

Comme déjà vu dans une précédente leçon, on va créer nos embed :

package
{
	public class MyEmbed
	{
		[Embed(source="fr-FR.xml", mimeType="application/octet-stream")]
		public var frFR : Class;
 
		[Embed(source="en-US.xml", mimeType="application/octet-stream")]
		public var enUS : Class;
	}
}

Et maintenant, on va gérer les traductions à proprement parler :

package
{
	import net.pixlib.core.PXBaseDocument;
	import net.pixlib.embed.PXEmbedEngine;
	import net.pixlib.load.PXResourceLocator;
	import net.pixlib.log.PXDebug;
	import net.pixlib.log.PXTraceLayout;
	import net.pixlib.log.addLogListener;
	import net.pixlib.tms.PXLanguage;
	import net.pixlib.tms.bundles.PXXMLLanguageBundle;
 
	import flash.events.Event;
 
	public class Sample extends PXBaseDocument
	{
		override protected function onDocumentReady() : void
		{
			//On rajoute une sortie pour les messages de Pixlib, ici le classique "trace"
			addLogListener(PXTraceLayout.getInstance());
 
			//On déclare les embed
			PXEmbedEngine.addParser("frFR", PXEmbedEngine.parseXML);
			PXEmbedEngine.addParser("enUS", PXEmbedEngine.parseXML);
			PXEmbedEngine.embed(MyEmbed);
 
			//On récupère le singleton
			var lang : PXLanguage = PXLanguage.getInstance();
 
			//On ajoutes 2 bundles en utilisant des bundles XML (PXXMLLanguageBundle) et
			//on récupère les données XML brute depuis nos ressources.
			lang.addBundle(new PXXMLLanguageBundle("fr-FR", PXResourceLocator.getInstance().locateXML("frFR")));
			lang.addBundle(new PXXMLLanguageBundle("en-US", PXResourceLocator.getInstance().locateXML("enUS")));
 
			//On écoute les changements de langue possible
			lang.addEventListener(PXLanguage.onChangeEVENT, _onChange);
 
			//On définie la langue courante, ce qui aura pour effet de charger
			//la traduction automatiquement. Et l'évènement #onChangeEvent sera
			//envoyé
			lang.current = "fr-FR";
		}
 
		private function _onChange(event : Event) : void
		{
			//On récupère la traduction identifiée par "NAME" dans notre fichier XML.
			PXDebug.DEBUG(PXLanguage.getInstance().getString("NAME"), this);
		}
	}
}

2. Les traductions externes

Bien évidement, il est aussi possible de charger des traductions depuis l’extérieur.

package
{
	import net.pixlib.core.PXBaseDocument;
	import net.pixlib.log.PXDebug;
	import net.pixlib.log.PXTraceLayout;
	import net.pixlib.log.addLogListener;
	import net.pixlib.services.PXHTTPService;
	import net.pixlib.tms.PXLanguage;
	import net.pixlib.tms.bundles.PXLoadableBundle;
	import net.pixlib.tms.bundles.PXXLIFFLanguageBundle;
 
	import flash.events.Event;
 
	public class Sample extends PXBaseDocument
	{
		override protected function onDocumentReady() : void
		{
			//On rajoute une sortie pour les messages de Pixlib, ici le classique "trace"
			addLogListener(PXTraceLayout.getInstance());
 
			//On récupère le singleton
			var lang : PXLanguage = PXLanguage.getInstance();
 
			//On charge nos traductions en utilisant un service HTTP
			lang.addBundle(new PXLoadableBundle(new PXXLIFFLanguageBundle("fr-FR"), new PXHTTPService("fr-FR.xlf")));
			lang.addBundle(new PXLoadableBundle(new PXXLIFFLanguageBundle("en-US"), new PXHTTPService("en-US.xlf")));
 
			lang.addEventListener(PXLanguage.onChangeEVENT, _onChange);
			lang.current = "en-US";
		}
 
		private function _onChange(event : Event) : void
		{
			PXDebug.DEBUG(PXLanguage.getInstance().getString("NAME"), this);
		}
	}
}

Pour le chargement externe, on utilise donc un bundle particulier qui est le PXLoadableBundle.

Ce bundle prend comme argument, le type de traduction à gérer (XML, XLIFF, PO, etc) sous forme de PXILanguageBundle et ensuite un PXService permettant de définir comment seront chargées ces traductions.

3. Gestion des fichiers de traductions

Afin de pouvoir découper vos traductions il est possible de définir un identifiant pour chaque bundle.

Pratique pour créer des traductions spécifiques pour telle ou telle partie d’une application.
Cet identifiant est un argument du constructeur :

//Bundle par défault (sans identifiant explicite)
lang.addBundle(new PXLoadableBundle(new PXMLLanguageBundle("fr-FR"), new PXHTTPService("fr/home.xml")));
 
//bundles dédiés
lang.addBundle(new PXLoadableBundle(new PXMLLanguageBundle("fr-FR", null, "home"), new PXHTTPService("fr/home.xml")));
lang.addBundle(new PXLoadableBundle(new PXMLLanguageBundle("fr-FR", null, "error"), new PXHTTPService("fr/error.xml")));

Ensuite, pour récupérer les traductions, il suffit de cibler le bundle désiré :

private function _onChange(event : Event) : void
{
	//On récupère dans le bundle par défault
	PXDebug.DEBUG(PXLanguage.getInstance().getString("NAME"), this);
 
	//On récupère dans le bundle "home"
	PXDebug.DEBUG(PXLanguage.getInstance().getString("MESSAGE", "home"), this);
}

4. Récupérer une traduction

Comme vu dans les divers exemple ci dessus, on utilise la méthode #getString() afin de récupérer la valeur d’une traduction dans le langage et le bundle désiré. Cette méthode gère aussi 2 paramètres optionnels supplémentaire afin de mieux contrôler la récupération des données.

Le 3 ème paramètre est la valeur par défaut à retourner dans le cadre où la traduction demandée n’existe pas :

private function _onChange(event : Event) : void
{
	//On récupère dans le bundle par défault. Si 'NAME' n'est pas défini
	//alors on retournera "Pixlib"
	PXDebug.DEBUG(PXLanguage.getInstance().getString("NAME", null, "Pixlib"), this);
}

Et le 4 ème paramètre lui est un tableau de substitution que l’on peut envoyer directement.

Une fois la traduction retrouvée, la substituion avec les valeurs de ce tableau sera réalisé. Les substitutions fonctionnant sous le modèle défini par la méthode PXStringUtils#substitute().

private function _onChange(event : Event) : void
{
	//On récupère dans le bundle "home", et on réalise une substitution sur la traduction.
	//Dans le fichier de traduction, notre texte devra être formaté par exemple : My name is {0} on {1}
	PXDebug.DEBUG(PXLanguage.getInstance().getString("MESSAGE", "home", null, ["Pixlib", "AS3"]), this);
}

5. Les téléchargements

la documentation
la page des téléchargements

Happy coding with Pixlib

PixPref – La gestion facile de préférences

PixTeam — Sun, 08 May 2011 15:13:48 +0000

PixPref, nouvelle extension de Pixlib, permet de gérer simplement vos préférences au niveau de votre application Flash.

En parlant de “préférences” nous parlons de “données utilisateur, configuration personnalisée etc” qui seront sauvegardées (et récupérer) au sein de votre application.

Voyons comment tout cela se passe.

Tout d’abord, PixPref à une dépendance forte avec l’extension PixService déjà livrée avec Pixlib. En effet, la gestion des préférences, de base, est gérée par le biais de services Pixlib.

Il est donc possible d”enregistrer les préférences avec :

un service AMF
un service HTTP
un service SharedObject
et l’utilisation de fichiers sur le disque (pour les applications Adobe AIR)

note : La gestion des préférences proposée en natif est standard (lecture/écriture); il est donc possible de surcharger certaines méthodes ou services afin de créer une gestion “sécurisée” et/ou”cryptée” par exemple, de vos données.

PixPref permet simplement de changer de stratégie de sauvegarde parmi les services proposés.

Prenons un exemple pour enregistrer les préférences via un SharedObject.

package
{
	import net.pixlib.core.PXBaseDocument;
	import net.pixlib.log.PXDebug;
	import net.pixlib.log.PXTraceLayout;
	import net.pixlib.log.addLogListener;
	import net.pixlib.prefs.PXPreferences;
	import net.pixlib.prefs.event.PXPreferencesEvent;
	import net.pixlib.prefs.strategy.PXSOStrategy;
 
	import flash.system.Capabilities;
 
	public class Sample extends PXBaseDocument
	{
		override protected function onDocumentReady() : void
		{
			//On rajoute une sortie pour les messages de Pixlib, ici le classique "trace" de Flash
			addLogListener(PXTraceLayout.getInstance());
 
			//On créé un groupe de préférences sous l'identifiant "system".
			var pref : PXPreferences = PXPreferences.get("system");
 
			//On utilise une solution SharedObject pour enregistrer / charger les préférences
			pref.strategy = new PXSOStrategy();
 
			//On définie quelques propriétés qui seront définies dans nos préférences.
			pref.setValue("OS", Capabilities.os);
			pref.setValue("Name", "My name is Pixlib");
 
			//On rajoute des écouteurs sur le statut des opérations
			pref.addEventListener(PXPreferencesEvent.onPreferencesSaveEVENT, _onSave);
			pref.addEventListener(PXPreferencesEvent.onPreferencesLoadEVENT, _onLoad);
 
			//On enregistre les données.
			pref.save();
		}
 
		private function _onSave(event : PXPreferencesEvent) : void
		{
			PXDebug.DEBUG("Preferences are saved, try to reload them", this);
 
			event.preferences.load();
		}
 
		private function _onLoad(event : PXPreferencesEvent) : void
		{
			PXDebug.DEBUG("Preferences are loaded", this);
 
			var pref : PXPreferences = event.preferences;
 
			PXDebug.DEBUG(pref.getValue("OS"), this);
			PXDebug.DEBUG(pref.getValue("Name"), this);
			PXDebug.DEBUG(pref.data, this);
		}
	}
}

Les préférences sont gérées par identifiant, c’est à dire que pour une même application, on peut gérer plusieurs groupes de préférences. Ici, on enregistre des préférences identifié sous le nom “system“.

On peut récupérer ou créer d’autres groupes de préférences en utilisant la méthode :

var pref : PXPreferences = PXPreferences.get("IDENTIFIANT_GROUPE_PRÉFÉRENCES");

Ensuite il suffit de définir la stratégie que l’on veut utiliser pour manipuler les préférences.
Ici on utilise un stratégie permettant de gérer les préférences dans un SharedObject de Flash :

pref.strategy = new PXSOStrategy();

Pour les autres stratégies déployées dans PixPref, voici leur utilisation :

pref.strategy = new PXAMFStrategy(“gateway.php”, “PrefService”, “load”, “save”);
pref.strategy = new PXHTTPStrategy(“load.php”, “save.php”, URLRequestMethod.POST);
pref.strategy = new PXFileStrategy();

note : quand la stratégie utilisée est PXFileStrategy, le fichier manipulé se trouve dans le dossier de l’application sous le nom de l’identifiant choisi pour les préférences.

Les préférences peuvent être ensuite chargées ou sauvegardées via les méthodes load() ou save(), quelque soit la stratégie utilisée.

Enfin, des écouteurs peuvent être définis pour écouter l’état des préférences :

PXPreferencesEvent#onPreferencesLoadEVENT : quand les préférences sont chargées
PXPreferencesEvent#onPreferencesSaveEVENT : quand les préférences sont enregistrées
PXPreferencesEvent#onPreferenceEditEVENT : quand un champ des préférences est modifié
PXPreferencesEvent#onPreferenceDeleteEVENT : quand un champ des préférences est supprimé

Afin de personnaliser l’enregistrement et le chargement des préférences (par exemple une gestion cryptée des données), il est possible de déterminer des “serializer et deserializer” de données directement depuis la classe PXPreference; par exemple :

var pref : PXPreferences = PXPreferences.get("system");
pref.serializer = new AESSerializer();
pref.deserializer = new AESDeserializer();

Ceci permettant tout type de traitement sur les données enregistrées et/ou chargées.

Enfin, si vous désirez créer une nouvelle stratégie pour manipuler vos préférences, il suffit d’implémenter l’interface PXPreferencesStrategy.

Plus simplement encore, vous pouvez étendre la classe abstraite PXAbstractStrategy qui étant déjà cette interface et qui donne en plus des comportements par défaut utilise à la gestion des données.

Les différents liens pour les téléchargements:

Page de téléchargements
la documentation

Happy coding with Pixlib

PixKey – Pixlib et les raccourcis claviers

PixTeam — Wed, 16 Mar 2011 21:33:39 +0000

Nouvelle petite extension pour Pixlib avec PixKey, permettant une gestion rapide et facile des raccourcis clavier dans vos applications Flash.

PixKey permet de créer des groupes de raccourcis clavier que vous pouvez activer tous en même temps dans votre application ou bien activer à la demande, groupe par groupe, suivant vos besoins.

Voyons comment utiliser cette extension.

Dans sa forme la plus simple, PixKey permet de gérer des raccourcis clavier (avec une touche ou une combinaison de touches) de manière très simple :

package
{
	import net.pixlib.commands.PXDelegate;
	import net.pixlib.core.PXBaseDocument;
	import net.pixlib.key.PXKey;
	import net.pixlib.key.PXKeyBundle;
	import net.pixlib.key.PXKeyShortcutEvent;
	import net.pixlib.log.PXDebug;
	import net.pixlib.log.PXTraceLayout;
	import net.pixlib.log.addLogListener;
 
	public class Sample extends PXBaseDocument
	{
		override protected function onDocumentReady() : void
		{
			//On rajoute une sortie pour les messages de Pixlib, ici le classique "trace" de Flash
			addLogListener(PXTraceLayout.getInstance());
 
			//On créé un groupe de raccourci clavier identifié sous le nom "UserPanel"
			var bundle : PXKeyBundle = new PXKeyBundle("UserPanel");
			bundle.pushCommand(new PXDelegate(_test), PXKey.Y);
			bundle.pushCommand(new PXDelegate(_test), PXKey.CONTROL, PXKey.Y);
 
			//Par défaut les raccourcis clavier créés ne sont pas activés
			//dans l'application; on charge donc notre groupe ici.
			bundle.load();
 
			//On envoie un raccourci clavier
			bundle.fire(PXKey.Y);
		}
 
		private function _test(event : PXKeyShortcutEvent) : void
		{
			//Un message apparait à chaque fois que le raccourci clavier est activé,
			//soit par l'utilisateur, soit par la méthode "fire()"
			PXDebug.DEBUG("Activated " + event.shortcut, this);
		}
	}
}

L’utilisation est simple, on crée un groupe avec un identifiant unique auquel nous affectons une combinaison de “raccourcis clavier / commandes”.
Par défaut un groupe de raccourcis n’est pas activé, il faut utiliser la méthode “load()“. Une fois chargé, à chaque fois que l’utilisateur utilisera la combinaison de raccourci clavier définie, la commande associée sera exécutée.
On peut aussi, comme cela est illustré dans l’exemple, forcer l’activation d’un raccourci clavier via la méthode “fire()” de notre groupe.

Maintenant, voyons la gestion de groupes multiples.
Par le biais de la classe PXKeyBundleManager, nous allons pouvoir contrôler différents groupes de raccourcis clavier.
De manière globale ou de manière unique suivant l’utilisation et le comportement dont aurons besoin dans notre application.

1. Utilisation simultanée
Dans ce cas, tous les groupes enregistrés dans le gestionnaire PXKeyBundleManager sont activés dans notre application.

package
{
	import net.pixlib.commands.PXDelegate;
	import net.pixlib.core.PXBaseDocument;
	import net.pixlib.key.PXKey;
	import net.pixlib.key.PXKeyBundle;
	import net.pixlib.key.PXKeyBundleManager;
	import net.pixlib.key.PXKeyShortcutEvent;
	import net.pixlib.log.PXDebug;
	import net.pixlib.log.PXTraceLayout;
	import net.pixlib.log.addLogListener;
 
	public class Sample extends PXBaseDocument
	{
		override protected function onDocumentReady() : void
		{
			//On rajoute une sortie pour les messages de Pixlib, ici le classique "trace" de Flash
			addLogListener(PXTraceLayout.getInstance());
 
			//On créé un nouveau groupe de définition de raccourci clavier à gérer.
			//Ici, notre groupe sera défini pour des interactions nommées "UserPanel"
			var userBundle : PXKeyBundle = new PXKeyBundle("UserPanel");
			userBundle.pushCommand(new PXDelegate(_bundleUserHandler), PXKey.O);
			userBundle.pushCommand(new PXDelegate(_bundleUserHandler), PXKey.CONTROL, PXKey.S);
 
			//On créé un nouveau groupe de raccourcis clavier qui seront utilisés
			//et référencés pour les "Dialog".
			var dialogBundle : PXKeyBundle = new PXKeyBundle("Dialog");
			dialogBundle.pushCommand(new PXDelegate(_bundleDialogHandler), PXKey.Y);
			dialogBundle.pushCommand(new PXDelegate(_bundleDialogHandler), PXKey.N);
			dialogBundle.pushCommand(new PXDelegate(_bundleDialogHandler), PXKey.ESCAPE);
 
			//Notre manager va pouvoir traiter tous les paquets simultanément
			PXKeyBundleManager.getInstance().mode = PXKeyBundleManager.MULTI_BUNDLE;
 
			//On enregistre ici nos deux groupes précédemment créés
			PXKeyBundleManager.getInstance().register(userBundle, true);
			PXKeyBundleManager.getInstance().register(dialogBundle, true);
 
			//Maintenant, les deux groupes sont activés en même temps. Tous
			//les raccourcis clavier (dans "UserPanel" ou "Dialog") sont disponibles
		}
 
		private function _bundleUserHandler(event : PXKeyShortcutEvent) : void
		{
			//On affiche un message quand un raccourci du groupe "UserPanel"
			//est activé
			PXDebug.DEBUG("Activated " + event.shortcut, this);
		}
 
		private function _bundleDialogHandler(event : PXKeyShortcutEvent) : void
		{
			//On affiche un message quand un raccourci du groupe "Dialog"
			//est activé
			PXDebug.DEBUG("Activated " + event.shortcut, this);
		}
	}
}

Ici nous avons créé 2 groupes distincts de raccourcis clavier et indiqué au gestionnaire de prendre en charge tous les groupes (PXKeyBundleManager.MULTI_BUNDLE).
Si l’utilisateur réalise un raccourci clavier défini dans l’un ou l’autre de nos groupes (“UserPanel” et “Dialog“) la commande associée sera alors exécutée.

2. Utilisation unique

Nous allons réaliser pratiquement la même chose, mais notre gestionnaire ne prendra en compte qu’un seul groupe à la fois (PXKeyBundleManager.SINGLE_BUNDLE).

package
{
	import net.pixlib.commands.PXDelegate;
	import net.pixlib.core.PXBaseDocument;
	import net.pixlib.key.PXKey;
	import net.pixlib.key.PXKeyBundle;
	import net.pixlib.key.PXKeyBundleManager;
	import net.pixlib.key.PXKeyShortcutEvent;
	import net.pixlib.log.PXDebug;
	import net.pixlib.log.PXTraceLayout;
	import net.pixlib.log.addLogListener;
 
	public class Sample extends PXBaseDocument
	{
		override protected function onDocumentReady() : void
		{
			//On rajoute une sortie pour les messages de Pixlib, ici le classique "trace" de Flash
			addLogListener(PXTraceLayout.getInstance());
 
			//On créé un nouveau groupe de définition de raccourci clavier à gérer.
			//Ici, notre groupe sera défini pour des interactions nommées "UserPanel"
			var userBundle : PXKeyBundle = new PXKeyBundle("UserPanel");
			userBundle.pushCommand(new PXDelegate(_bundleUserHandler), PXKey.O);
			userBundle.pushCommand(new PXDelegate(_bundleUserHandler), PXKey.CONTROL, PXKey.S);
 
			//On créé un nouveau groupe de raccourcis clavier qui seront utilisés
			//et référencés pour les "Dialog".
			var dialogBundle : PXKeyBundle = new PXKeyBundle("Dialog");
			dialogBundle.pushCommand(new PXDelegate(_bundleDialogHandler), PXKey.Y);
			dialogBundle.pushCommand(new PXDelegate(_bundleDialogHandler), PXKey.N);
			dialogBundle.pushCommand(new PXDelegate(_bundleDialogHandler), PXKey.ESCAPE);
 
			//Notre manager ne pourra traiter qu'un groupe à la fois.
			PXKeyBundleManager.getInstance().mode = PXKeyBundleManager.SINGLE_BUNDLE;
 
			//On enregistre ici nos deux groupes précédemment créés
			PXKeyBundleManager.getInstance().register(userBundle);
			PXKeyBundleManager.getInstance().register(dialogBundle);
 
			//On charge le groupe de raccourcis "UserPanel"
			PXKeyBundleManager.getInstance().load("UserPanel");
		}
 
		private function _bundleUserHandler(event : PXKeyShortcutEvent) : void
		{
			//On affiche un message quand un raccourci du groupe "UserPanel"
			//est activé
			PXDebug.DEBUG("Activated " + event.shortcut, this);
 
			//On charge le groupe de raccourcis "Dialog". Maintenant, seul ce groupe
			//est activé, les anciens raccourcis du groupe "UserPanel" ne sont plus
			//écoutés.
			PXKeyBundleManager.getInstance().load("Dialog");
		}
 
		private function _bundleDialogHandler(event : PXKeyShortcutEvent) : void
		{
			//On affiche un message quand un raccourci du groupe "Dialog"
			//est activé
			PXDebug.DEBUG("Activated " + event.shortcut, this);
 
			//On charge le groupe de raccourcis "UserPanel". Maintenant, seul ce groupe
			//est activé, les anciens raccourcis du groupe "Dialog" ne sont plus
			//écoutés.
			PXKeyBundleManager.getInstance().load("UserPanel");
		}
	}
}

Au début de notre application, seul le groupe “UserPanel” est activé et donc seuls les raccourcis définis dans ce groupe peuvent être réalisés.
Mais une fois déclenché, comme illustré dans notre exemple, on active l’autre groupe “Dialog” et à ce moment-là, seuls les raccourcis du groupe “Dialog” peuvent être réalisés.

Voilà un outil simple et complet qui vous permettra de rajouter rapidement une couche d’”interactivité clavier” dans vos applications Flash.

Les différents liens pour les téléchargements:

Page de téléchargements
la documentation

Happy coding with Pixlib !

PixEmbed – Nouvelle extension de Pixlib pour faciliter l’intégration d’éléments

PixTeam — Sat, 12 Mar 2011 12:07:58 +0000

PixEmbed est une petite et rapide extension de Pixlib qui simplifie beaucoup la vie.

En effet, pour optimiser les chargements ou pour d’autres raisons, il peut être pratique d’intégrer (embed) des éléments directement au niveau de la compilation d’un projet Flash.
PixEmbed arrive pour faire le pont entre Embed et le PXResourceLocator de Pixlib. Le PXResourceLocator devenant de plus en plus un cœur des éléments disponibles dans les projets Pixlib.

L’utilisation de PixEmbed est vraiment très simple. Tout d’abord il faut créer une classe intégrant les éléments :

package
{
	public class MyEmbed
	{
		[Embed(source="list.xml", mimeType="application/octet-stream")]
		public var DataXML : Class;
 
		[Embed(source="list.xml", mimeType="application/octet-stream")]
		public var RawXML : Class;
 
		[Embed(source="picto.jpg")]
		public var DataJPG : Class;
	}
}

Ensuite, il faut dire à Pixlib que nous allons utiliser cette classe pour gérer nos éléments :

package
{
	import net.pixlib.core.PXBaseDocument;
	import net.pixlib.embed.PXEmbedEngine;
	import net.pixlib.load.PXResourceLocator;
	import net.pixlib.log.PXDebug;
	import net.pixlib.log.PXTraceLayout;
	import net.pixlib.log.addLogListener;
 
	import flash.display.DisplayObject;
	import flash.utils.ByteArray;
 
	public class Sample extends PXBaseDocument
	{
		override protected function onDocumentReady() : void
		{
			addLogListener(PXTraceLayout.getInstance());
 
			//Ici on rajoute un traitement pour que notre "DataXML" soit tranformée en XML (sinon on a un simple ByteArray).
			PXEmbedEngine.addParser("DataXML", PXEmbedEngine.parseXML);
 
			//On intégre nos éléments
			PXEmbedEngine.embed(MyEmbed);
 
			//On  récupère le logo via le PXResourceLocator
			var logo : DisplayObject = PXResourceLocator.getInstance().locate("DataJPG") as DisplayObject;
			PXDebug.DEBUG(logo, this);
 
			//On  récupère le xml sachant qu'on a défini un "parser" plus haut pour ça
			var xml : XML = PXResourceLocator.getInstance().locateXML("DataXML");
			PXDebug.DEBUG(xml, this);
 
			//On  récupère un embed de XML classique, c'est à dire un ByteArray
			var ba : ByteArray = PXResourceLocator.getInstance().locate("RawXML") as ByteArray;
			PXDebug.DEBUG(new XML(ba.readUTFBytes(ba.length)), this);
		}
	}
}

PixEmbed est simple à utiliser et facilite la vie dans les développements. On peut passer par une phase de chargement externe à une phase d’intégration dans le code vraiment rapidement.

La librairie PixEmbed est disponible sur la page des téléchargements, les sources sur le SVN et la documentation ici.

Happy coding with Pixlib

Made with Pixlib

PixTeam — Mon, 07 Mar 2011 15:07:33 +0000

Sites produits, événementiels, outils de créations, jeu multijoueurs, causales games, bornes interactives…
C’est en voyant la diversité des projets que l’on réalise la flexibilité qu’apporte Pixlib.

NRJ, Bouygues Telecom, Audi, Ubisoft, Electronic Art…
Que ça soit dans un simple navigateur ou décliné sur des téléphones portables; au fil des années, les plus grandes marques ont pu se mettre en valeur sur les supports digitaux grâce à la puissance et la stabilité de ce framework.

Rendez-vous sur la page références pour découvrir une sélection de projets réalisés avec Pixlib.

À titre d’exemple «OnDemand David Guetta», Adobe Site of the Day d’avril 2010.

Le framework Pixlib et son extension PixIoC ont été retenus pour OnDemand 2009, car nous étions confrontés à un développement as3 exprimant des besoins en totale conformité avec les principes de l’IoC: réalisation d’une application complexe (principes de “Separation Of Concerns” et “Component Oriented Programming”) déclinée pour de nombreux clients finaux (Configuration Management against “Scattered Configuration”) et évolutive (Handling “Unpredictable Lifecycle”). À la différence de simples librairies ou classes utilitaires as3 IoC, l’implémentation IoC de Pixlib qui s’inscrit dans un cadre architectural connu (MVC/FC) nous aura permis de développer de manière structurée et collaborative.

N’hésitez pas à nous contacter pour y ajouter vos projets!

Happy coding with Pixlib !

Pixlib Services – L’extension pour les appels distants

PixTeam — Fri, 04 Mar 2011 08:52:56 +0000

Nouvelle leçon, cette fois-ci sur l’utilisation de l’extension PixService permettant de réaliser des appels distants.

Appels qui permettront de charger des données simplement et aussi faire des appels à des services distants (AMF, HTTP…) complexes.

L’extension PixService contient plusieurs implémentations concrètes :

PXHTTPService : Appels à des pages distantes retournant des données ;
PXStreamService : Appels à des pages distantes retournant un objet URLStream ;
PXSharedObjectService : Appels à un SharedObject ;
PXAMFService : Appel à un service AMF ;
PXAMFMultipleServices : Appels multiples à des services AMF (en une passe).

L’API définie dans le core de Pixlib permet pour chacun de ces services de :

définir des arguments à ajouter lors de l’appel ;
d’abonner des écouteurs pour suivre l’état de l’appel ;
définir un processus de dé sérialisation des données, si besoin.

Prenons un premier exemple avec la classe PXHTTPService.

package
{
	import net.pixlib.core.PXBaseDocument;
	import net.pixlib.log.PXDebug;
	import net.pixlib.log.PXTraceLayout;
	import net.pixlib.log.addLogListener;
	import net.pixlib.services.PXHTTPService;
	import net.pixlib.services.PXService;
	import net.pixlib.services.PXServiceEvent;
 
	import flash.net.URLRequestMethod;
 
	public class Sample extends PXBaseDocument
	{
		override protected function onDocumentReady() : void
		{
			addLogListener(PXTraceLayout.getInstance());
 
			var username : String = "Anonymous";
			var pwd : String = "";
 
			var service : PXService = new PXHTTPService("http://www..../getSession.php", URLRequestMethod.POST);
			service.setArguments("login", username, "pass", pwd);
			service.addEventListener(PXServiceEvent.onDataResultEVENT, _onResult);
			service.execute();
		}
 
		private function _onResult(event : PXServiceEvent) : void
		{
			PXDebug.DEBUG(event.result, this);
		}
	}
}

Ci-dessus nous effectuons donc un simple appel à la page “getSession.php” en spécifiant que nous enverrons des arguments en mode “POST”.

Nous passons ensuite nos deux arguments via la méthode “setArguments()” qui pour le PXHTTPService fonctionne sous forme de paire “nom/valeur”. Ici la propriété “login“, puis sa valeur, puis la propriété “pass” et sa valeur.

On ajoute ensuite un écouteur pour surveiller le résultat renvoyé par cet appel.

Bien entendu, il est possible d’utiliser directement la classe PXHTTPService au lieu de passer par l’interface PXService. Ceci permettant d’utiliser les méthodes spécifiques à cette classe.

var service : PXHTTPService = new PXHTTPService("http://www..../getSession.php", URLRequestMethod.POST);
service.addVariable("login", username);
service.addVariable("pass", pwd);
service.addEventListener(PXServiceEvent.onDataResultEVENT, _onResult);
service.execute();

Cette règle est applicable à toutes les classes de PixService.

Les autres appels fonctionnent de la même manière (merci PXService), mais voyons le cas un peu plus spécifique de la classe PXAMFMultiServices.

package
{
	import net.pixlib.core.PXBaseDocument;
	import net.pixlib.log.PXDebug;
	import net.pixlib.log.PXTraceLayout;
	import net.pixlib.log.addLogListener;
	import net.pixlib.services.PXAMFMultiServices;
	import net.pixlib.services.PXService;
	import net.pixlib.services.PXServiceEvent;
 
	public class Sample extends PXBaseDocument
	{
		override protected function onDocumentReady() : void
		{
			addLogListener(PXTraceLayout.getInstance());
 
			var username : String = "Anonymous";
			var pwd : String = "";
 
			var services : PXAMFMultiServices = new PXAMFMultiServices("http://www.../index.php");
			services.addService("HelloWorld", "getPrompt");
 
			// listen for specific service response and pass specific arguments
			var session : PXService = services.addService("SessionService", "getSession");
			session.setArguments(username, pwd);
			session.addEventListener(PXServiceEvent.onDataResultEVENT, _onSession);
 
			// listen for global response
			services.addEventListener(PXServiceEvent.onDataResultEVENT, _onResult);
			services.execute();
		}
 
		private function _onSession(event : PXServiceEvent) : void
		{
			PXDebug.DEBUG(event.result, this);
		}
 
		private function _onResult(event : PXServiceEvent) : void
		{
			PXDebug.DEBUG(event.result, this);
		}
	}
}

La classe PXAMFMultiServices permet d’attaquer plusieurs services AMF en un seul appel distant. Via la méthode “addService()” il est donc possible d’ajouter de nouveaux appels avec pour chacun d’entre eux des paramètres et même des écouteurs; chaque service étant des PXService à part entière.

La librairie PixService est disponible sur la page des téléchargements, les sources sur le SVN et la documentation ici.

Happy coding with Pixlib

PixShare extension – Partager en toute simplicité

PixTeam — Wed, 02 Mar 2011 21:41:49 +0000

Présentation et petite leçon sur une nouvelle extension de Pixlib, la bien nommée PixShare.

PixShare, permet de réaliser du partage d’informations de manière rapide.
PixShare, dans son implémentation actuelle, permet de partager sur les réseaux sociaux comme :

Facebook
Twitter
Google Buzz
LinkedIn
Delicious
Orkut

ainsi que par le biais d’un simple

E-Mail

Voyons comment utiliser cette nouvelle extension.

Exemple pour partager un lien sur Facebook.

package
{
	import net.pixlib.core.PXBaseDocument;
	import net.pixlib.share.PXPostSharing;
	import net.pixlib.share.strategy.sharing.PXFacebookSharing;
 
	import flash.display.Sprite;
	import flash.events.MouseEvent;
 
	public class Sample extends PXBaseDocument
	{
		override protected function onDocumentReady() : void
		{
			var button : Sprite = addChild(new Sprite()) as Sprite;
			with(button.graphics) {
				beginFill(0x000000, 1);
				drawRect(0, 0, 50, 30);
				endFill();
			}
			button.buttonMode = true;
			button.addEventListener(MouseEvent.CLICK, _onClick);
		}	
 
		private function _onClick(event : MouseEvent) : void
		{
			event.StopImmediatePropagation();
 
			var post : PXPostSharing = new PXPostSharing();
			post.platform = new PXFacebookSharing();
 			post.share("New Pixlib 3.0 Flash Framework", "http://blog.pixlib.net");
		}
	}
}

Au click sur le bouton, le navigateur ouvrira une “popup” pour afficher le système de partage de Facebook (ce qui est le comportement par défaut).

Pour les applications hors navigateur, une stratégie existe pour ouvrir une fenêtre Adobe AIR.(d’autres supports verront ou pourront voir le jour dans le futur).

var post : PXPostSharing = new PXPostSharing();
post.platform = new PXFacebookSharing();
post.support = new PXAIRWindowStrategy();
post.share("New Pixlib 3.0 Flash Framework", "http://blog.pixlib.net");

Le format du partage, par défaut, est le suivant :

un titre
un lien

Mais pour certains réseaux comme Orkut par exemple, ou bien simplement pour les envois par E-Mail, il est possible de passer un 3e paramètre, optionnel, à la méthode #share(), afin d’accéder à des paramètres complémentaires.

var opts : PXSharingOptions = new PXSharingOptions();
opts.message = "This is the Email's body";
 
var post : PXPostSharing = new PXPostSharing();
post.platform = new PXEmailSharing();
post.share("New Pixlib 3.0 Flash Framework", "http://blog.pixlib.net", opts);

ou encore :

var opts : PXSharingOptions = new PXSharingOptions();
opts.thumbnail = "http://blog.pixlib.net/thumbnail.jpg";
 
var post : PXPostSharing = new PXPostSharing();
post.platform = new PXGoogleBuzzSharing();
post.share("Incredible site here", "http://blog.pixlib.net", opts);

La classe PXSharingOptions est une classe dite dynamique, vous pouvez donc lui ajouter les paramètres que vous souhaitez si vous désirez créer vos propres stratégies de partage.

PixShare extension :

Happy coding with Pixlib