Fonctionnement et limites d’un NativeProcess

Packaging de l’application

Pour diverses raisons de sécurité, une application AIR utilisant un NativeProcess doit être packagée dans le format de la plateforme cible (exe pour Windows, dmg pour Mac, rpm / deb / … pour Linux). Fini donc dans ce cas le pratique fichier .air qui marche partout !
Vous devez également indiquer dans le descripteur de l’application qu’il s’agit d’une application au profil « extendedDesktop » lui conférant donc les capacités d’exécuter un NativeProcess.
Vous devez ouvrir le fichier monAppli-app.xml et modifier la balise <supportedProfiles>

<supportedProfiles>extendedDesktop</supportedProfiles>

A partir de là, si vous tentez d’exporter un fichier .air, vous aurez un joli message d’erreur vous invitant à changer de profil.

Considérations de sécurité

Si AIR sans native process dispose de limitations de sécurité, dès lors que vous utilisez un native process, vous ouvrez la porte… Il est donc bon d’anticiper et de faire un maximum de vérifications sur vos appels pour éviter un remplacement d’un exécutable par un autre, moins sympathique, par exemple…

Prêt ? On code

Paramétrage

Un native process a besoin d’un contexte d’exécution. Ce contexte est défini à l’aide de l’objet NativeProcessStartupInfo décrivant notamment les éléments suivants :

• workingDirectory : le répertoire d’exécution
• executableFile : l’exécutable à lancer
• arguments : la liste des arguments à passer à l’exécutable (Vector.<String> sous Flash Player 10, ou un bête Array sinon)

Vous pourrez alors instancier un objet NativeProcess et lui passer cet objet de paramétrage avant de le lancer.

Lancement & suivi de l’exécution

Le lancement d’un NativeProcess est asynchrone. Il propose donc un certain nombre d’événements vous permettant de suivre son exécution une fois lancé, notamment :

• ProgressEvent.STANDARD_OUTPUT_DATA : écriture sur la sortie standard
• ProgressEvent.STANDARD_ERROR_DATA : écriture sur la sortie d’erreur
• IOErrorEvent.STANDARD_OUTPUT_IO_ERROR : déclenché lorsqu’une erreur apparaît en tentant de lire la sortie standard
• IOErrorEvent.STANDARD_ERROR_IO_ERROR : déclenché lorsqu’une erreur apparaît en tentant de lire la sortie d’erreur
• NativeProcessExitEvent.EXIT : déclenché lors que l’exécution du process est terminée

Lecture de l’entrée / sortie standard

Bien que tout à fait possible, la lecture de la sortie standard ou d’erreur via le listener ProgressEvent.STANDARD_OUTPUT_DATA ou ProgressEvent.STANDARD_ERROR_DATA n’est pas fiable à 100% concernant le contenu retourné : la sortie étant « bufferisée », vous n’aurez donc pas systématiquement le même résultat selon la machine exécutant le programme, à chaque appel de votre listener… N’utilisez donc la lecture de sortie standard que pour afficher ce qui se passe, ou à la limite récupérer la totalité du contenu écrit une fois le process terminé…

Appeler un JAR

Rappels

Pour appeler un JAR en Java, il doit être exécutable (bah oui…), et appelé en ligne de commande de la manière suivante :

java -jar monJar.jar [-cp jars du classpath]

Nous sommes dans une appli AIR, donc évitons de surcharger la commande à appeler avec un classpath, aussi je vous suggère d’utiliser les fonctionnalités d’export complets d’un JAR (si les licences associées vous l’autorisent) intégrant au final l’ensemble des sources dans un groooos JAR contenant tout ce qu’il lui faut pour fonctionner.
Notes :

• Les utilisateurs de Maven peuvent utiliser le plugin qui va bien pour ça.
• L’export eclipse, c’est pas mal non plus, il suffit de cocher la « case qui va bien » au moment d’exporter

Depuis un NativeProcess

On voit mieux ce qui se dessine:

1. Définir l’exécutable java dans vos « startup infos »
2. Définir les arguments
   • -jar
   • /chemin/vers/monJar.jar
3. Ajouter les listeners permettant de savoir lorsque l’exécution est terminée
4. Lancer le native process

Restons multi plateforme

Java est multi plateforme, oui, mais l’exécutable dépend de la plateforme, aussi il vous faudra récupérer le chemin vers votre JAVA_HOME (contenant le répertoire bin avec l’exécutable Java).
Vous avez donc deux solutions maintenant:

1. La plus simple (pour le développeur) : demander à votre gentil utilisateur où est son JAVA_HOME. Ça peut le faire si c’est un geek velu qui a compris qu’on ne parlait pas de venir danser chez lui (aïe, elle est rude celle-ci)
2. La plus compliquée (mais pratique pour l’utilisateur) : utiliser un autre exécutable (voire NativeProcess) qui remonte cette information ou permette de pointer directement sur l’exécutable en question

La seconde solution bien que séduisante est un peu plus longue à implémenter.
Pour les développeurs sous Windows, j’ai noté l’utilisation par Serge Jespers d’un petit (mais pratique) exécutable « jexe.exe » lançant le java.exe présent dans le %JAVA_HOME%\bin de la machine. L’utiliser vous évitera la première solution, sans vous lancer dans un développement spécifiquement dédié à cela (merci Serge). En revanche, si votre application est diffusée à un public d’utilisateurs non avertis, ils sont tout à fait susceptibles de ne pas avoir de variable JAVA_HOME définie sur leur machine : pensez donc à déterminer précisément votre cible avant de choisir une solution.

J’ai également noté en relisant un extrait de la licence du JRE que la redistribution est autorisée sous certaines conditions. Si vous les remplissez, vous pourriez carrément embarquer le runtime java dans votre application AIR, au risque de la faire gonfler en taille…

Un exemple ! Un exemple !

Voici un petit exemple de code permettant de lancer un JAR exécutable depuis une application AIR :

package com.lafabrick.nativeprocess
{
	import flash.desktop.NativeProcess;
	import flash.desktop.NativeProcessStartupInfo;
	import flash.events.EventDispatcher;
	import flash.events.NativeProcessExitEvent;
	import flash.events.ProgressEvent;
	import flash.filesystem.File;
	import flash.system.Capabilities;

	public class JarExec
	{
		protected var _process:NativeProcess;

		public function JarExec()
		{
		}

		public function getDefaultJavaExecutable():File
		{
			if (Capabilities.os.toLowerCase().indexOf("win") > -1)
			{
				return File.applicationDirectory.resolvePath("native/jexe.exe");
			}
			if (Capabilities.os.toLowerCase().indexOf("mac") > -1)
			{
				// TODO: Changer avec un paramètre de configuration
				return new File("/System/Library/Frameworks/JavaVM.framework/Commands/java");
			}
			throw new Error("Système non pris en charge");
			return null;
		}

		public function testJava(executablePath:String = null):void
		{
			// Tester le lancement de l'exécutable 'java'
			try
			{
				var nativeProcessStartupInfo:NativeProcessStartupInfo = new NativeProcessStartupInfo();
				nativeProcessStartupInfo.workingDirectory = File.applicationDirectory;
				nativeProcessStartupInfo.executable = (executablePath == null ? getDefaultJavaExecutable() : new File(executablePath));

				var args:Vector.<String> = new Vector.<String>();
				args.push("-version");
				nativeProcessStartupInfo.arguments = args;

				_process = new NativeProcess();
				_process.addEventListener(NativeProcessExitEvent.EXIT, onJavaTestExit);
				_process.addEventListener(ProgressEvent.STANDARD_OUTPUT_DATA, onStandardOut);
				_process.addEventListener(ProgressEvent.STANDARD_ERROR_DATA, onErrorOut);
				_process.start(nativeProcessStartupInfo);

				trace("-- Début d'exécution");
			}
			catch (e:Error)
			{
				trace("Impossible de lancer le process\n" + e.message + "\n" + e.getStackTrace());
			}
		}
		protected function onStandardOut(e:ProgressEvent):void
		{
			trace("STDOUT: " + _process.standardOutput.readUTFBytes(_process.standardOutput.bytesAvailable));
		}
		protected function onErrorOut(e:ProgressEvent):void
		{
			trace("STDERR: " + _process.standardError.readUTFBytes(_process.standardError.bytesAvailable));
		}
		protected function onJavaTestExit(e:NativeProcessExitEvent):void
		{
			trace("-- Fin d'exécution");
		}
	}
}

Cet extrait donne un aperçu, mais vous pouvez vous lancer (soyons fous) à installer le package suivant :

Pour Mac

Pour Windows

Pensez au clic droit > View Source…

Packager l’application

Comme je le disais au début de ce post, il est nécessaire de packager votre application dans le format natif du système d’exploitation visé. Vous avez deux solutions pour cela :

1. Passer par la dernière version de Flash Builder 4 qui propose cette fonctionnalité
2. Utiliser l’application PackageAssistantPro proposée par Serge Jespers (re merci Serge)

Il s’agit d’une application AIR utilisant des NativeProcess (et packagée en ligne de commande vu que l’application n’existait pas avant… Remarquez, la version 2 et plus ont probablement été packagées avec la version 1… Mais je m’égare)

Quelques liens

• Un petit exemple d’application utilisant un NativeProcess : ZXPackager
• ASDoc de la classe NativeProcess [EN]
• Un bon article pour démarrer [EN]

Autres articles sur le même sujet

• L’erreur est humaine… debuguer un projet Flex distant via Flex Builder
• Un projet Java / Flex avec Maven 2
• Google AJAX Language API… et ton Flex devient polyglotte !
• Arduino #2 : Flash, socket et Processing

Cette application propose un moyen simple de packager vos extensions CS5 développées avec le nouveau SDK Creative Suite.

Les extensions ZXP

Depuis la CS5, Adobe propose un nouveau SDK de développement et un format d’extension commun a toute la suite logicielle.
Ce SDK, disponible ici, vous permet de développer vos propres panneaux et autres menus CS5. Le premier format de sortie est le MXP, toujours disponible, vous permettant d’exporter votre extension pour un logiciel cible.
Maintenant, avec la CS5, vous disposez d’un format commun, le ZXP, qui rend compatible votre extension avec toutes la suites CS.

Un fichier ZXP est défini par un manifeste xml, définissant le fonctionnement de l’extension (type, portée logiciel, …), et contient le (les) SWF de l’extension (une extension est en fait une pseudo application AIR, basée sur le SDK CS). Un fichier ZXP est signé numériquement. Vous devez donc avoir un certificat (PKCS12, PKCS11, JKS). Vous pouvez bien entendu utiliser votre certificat auto-signé préalablement créé avec Flash/Flex Buider.

Pour plus d’informations :

• Creative Suite SDK
• le blog CSSDK

Un fichier ZXP doit (habituellement) être compilé en utilisant le packager Java UCF. Et c’est là l’idée de cette petite application : ne pas avoir a redéfinir vos certificats et autres options pour chaque package, et vous proposer une interface plus « user friendly » que le terminal.

Fonctionnement

Démarrage, et préférences

Au premier démarrage, l’application doit obtenir vos préférences de base.

• Java Home

  Vous devez indiquer le chemin vers votre JDK/JRE java, si celui-ci ne correspond pas à celui par défaut (l’application intègre le packager jar UCF, et elle doit connaître le répertoire racine de Java pour pouvoir le lancer). Les chemins racines par défaut sont:

  • Pour Windows : ‘C:\Program Files\Java\jdk1.6.0′
  • Pour Mac : ‘/System/Library/Frameworks/JavaVM.framework/Versions/1.6.0′

• Certificat

  Vous devez préciser l’emplacement de votre certificat (généralement un fichier de type .p12 ou .p11), ainsi que votre mot de passe. Ces informations sont nécessaires pour la signature de l’extension.

Définition de votre extension

Un package ZXP a besoin de 2 informations : le nom et l’emplacement de votre extension cible, et l’endroit où se trouve le répertoire « bin » de votre extension.




• Fichier cible

  Vous devez indiquer le fichier de destination. L’extension .zxp est ajoutée automatiquement.

• Source de l’extension

Les sources de l’extension, comme défini dans la nomenclature du SDK CS, doivent correspondre à ce schéma:



Ce répertoire est construit préalablement par la tâche ant de compilation, dans votre projet (cf. en fin d’article, le téléchargement du projet test d’extension)
Vous devez pointer sur le répertoire « bin ».

Une fois le packaging démarré, un message d’attente s’affiche.




Finalisation

Une fois le package créé, l’application vous propose de :

• Démarrer un nouveau package;
• Ouvrir et installer l’extension via Extension Manager (vous devez bien entendu avoir préalablement installé Extension Manager CS5)


Téléchargements

ZXPackager

Extension de test

• Projet fxp
• Archive zip du bin de test

Autres articles sur le même sujet

• [Flex 3 Beta] bug : Application File doesn’t exist
• Un projet Java / Flex avec Maven 2
• Reflex #1: une micro-architecture pour Flex… simple !
• AIR 2 : appeler un JAR exécutable via un NativeProcess

]]> http://www.lafabrick.com/blog/2010/07/28/2092-zxpackager-application-pour-l%e2%80%99empaquetage-zxp-d%e2%80%99extensions-cs5/feed/ 5 http://www.lafabrick.com/blog/2010/07/28/2092-zxpackager-application-pour-l%e2%80%99empaquetage-zxp-d%e2%80%99extensions-cs5/ http://feedproxy.google.com/~r/lafabrick/~3/P5qv9sJqmAw/ http://www.lafabrick.com/blog/2010/07/28/2023-ca-envoie/#comments Wed, 28 Jul 2010 16:17:48 +0000 laFabrickTeam http://www.lafabrick.com/blog/?p=2023 (Mais comme) ça envoie !. Vous l’avez certainement déjà vue, voire vous êtes un expert dans son emploi. Nous vous proposons aujourd’hui un passage en revue minutieux de l’expression à la mode du geek qui est en vous ! Ce post traite donc de la fameuse expression « Ca envoie… » et ses dérivés.
Un article qui envoie du pâté (facile…)


Les classiques

• « Ça envoie du gras »

  En vogue dans la communauté Nerd.

• « Ça envoie le steak »

  Remarqué l’emploi de « le », qui suggère le lancé d’un steak. Paraîtrait il que c’est une pratique courante dans les communes Beauceronnes… Une enquête est en court…

• « Ça envoie du bois »

  Le bois, symbole de résistance et de longévité, est très bien employé ici. Attention toutefois à l’usage du bois dans le temps : il serait dommage que l’emploi de ce matériaux dans l’expression donne, à terme, le sentiment de quelque chose de vieillissant.

• « Ça envoie du pâté »

  On peux aussi trouver la variante « Ça envoie le pâté », comme si s’envoyer du pâté dans la figure était « cool »…. restons sérieux tout de même.
  Si bien que l’expression a sa place dans le dico du net

Spéciales cochonou

• Le classique « Ça envoie du salami »

• « Ça envoie d’la ventrèche »

  La ventrèche, « Xingar » en Basque, est de la poitrine de porc séché. grillé au barbec, c’est un délice.

• « Ça envoie d’la saucisse de morteau »

  La particularité de celle-ci est son adaptabilité. Vous pouvez a loisir remplacer morteau par Toulouse, Strasbourg, Saint Trivier sur Moignans. (Spéciale dédicasse à Thibault)

(cf. Les Lyonnaises)

Les matériaux

• « Ça envoie son parpaing »

  Variante négative : Ça envoie son parpaing de merde (Combo x2).

• « Ca envoie de la cabane au fond du jardin »

  (après une intégrale de Francis Cabrel…).

Les lyonnaises

• « Ça envoie de la rosette »

  LE symbole lyonnais. Dans la mesure ou la rosette est bonne, vous pouvez l’utilisé dans n’importe qu’elle situation. Aucun risque de saturation (sauf si votre interlocuteur ne supporte pas la rosette…).

• « Ça envoie d’la quenelle »

• « Ça envoie d’la cervelle des canuts »

Ne prenez pas peur : les Lyonnais ne sont pas antropophages. La cervelle des canuts c’est une préparation de fromage blanc.

• « Ça envoie du Jesus »

  Variante plus classe de la rosette, mais double sens possible : risque de déplaire à Mel Gibson.

Les doubles sens

• « Ça envoie du cahier des charges »

  Suggère l’attribution d’un super cahier des charges. Le double sens vient du fait que c’est quand même rare d’obtenir un vrai cahier des charges qui ce tient…

• Voir aussi : « Ça envoie du chinchilla », « Ça envoie d’la ventrèche ardéchoise », « Ça envoie du Jesus »

Brigitte Bardot style

• « Ça envoie du chinchilla »

  Attention, double sens possible : risque de négation détectable. Très utilisé par la jet-set, et les « has been ».

• « Ça envoie de la baleine à bosse »

  Là nous sommes carrément en présence d’un gros propos qui tâche, ne vous emballez pas!

• « Ça envoie du poney »

  Plagiat direct du fameux « Ça rox du poney ». L’origine reste un mystère, tout comme le sens. Chacun aura donc ça propre interprétation, ce qui ajoute un zeste de rigolitude.

Les combos

• « Ça envoie d’la ventrèche ardéchoise »

  Vu que la ventrèche n’existe pas en ardèche (tout du moins sous cette dénomination : il faudrait dire « Ça envoie du rillon ardéchois »), envoyer de la ventrèche ardéchoise est donc absolument impossible. D’où les 2 sens suivant :

  • « Ton truc, c’est vraiment n’importe quoi » / « C’est d’la daube en boite »
  • « C’est la classe internationale » / « C’est trop super innovant »

• « Ça envoie du salami corse/basque/breton » (rayer les mentions inutiles)

  . Attention! Ne pas dire « Ça envoie du corse/basque/breton » : risque de représailles.

• « Ça envoie de la tartine de bécasse »

  Graal des chasseurs français, la bécasse est un genre de limicoles de la famille des Scolopacidae. Rapide et futé, l’emploi de la bécasse dans l’expression fait directement référence à l’ingéniosité du propos.

• « Ça envoie de l’époisse fondue au feu de bois »

  Combo x4, +10points.

Les hors-sujet

• « (Ça) envoie du Ricard(!) »

  Utilisable à partir de 17h (voir 8h, mais là on ne peut plus rien pour vous), fait directement référence à une beuverie en cours. Aucun intérêt.

In English

« It throws some… »

Nous entrons là dans les déclinaisons très « spéciales ». Une certaine expérience quant à la manipulation des « envois » de base est requise. Il est clair que l’emploi de cette expression devant un auditoire anglophone vous fera passer directement par la case « débile ». Attention donc au contexte d’utilisation. Ce qui en revanche peux être intéressant, c’est l’image qui vous dégagerez lors de l’emploi des variantes anglaise, devant des francophones (français, les autres pays francophone sont tout de même un poil meilleurs en langue que nous). Un atout pour imposer votre maîtrise de la langue de Shakespeare. Quelques exemples :

• « It throws some wood »

• « It throws some pâté »

• « It throws some tartine of Bécasse »

Et vous ? Vous envoyez quoi ?Autres articles sur le même sujet

• L’université Lyon 1 a besoin d’AIR et crée Climatus
• Quelques raisons de se mettre à Ruby on Rails ( ou au moins y penser … )
• La Fabrick passe la troisième…
• ZXPackager : application pour l’empaquetage ZXP d’extensions CS5

dashes contient un tableau (Array) de nombres. Les emplacements impaires du tableau définissent la taille (en pixel) des tirets. Les emplacements pair définissent la taille des espacement.

Dans le code :

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    minWidth="200" minHeight="200"
    xmlns:uigfx="http://uigfx.lafabrick.com">

    <uigfx:DashedLine
        dashes="[80, 10, 10, 20, 40, 30]"
        left="100" verticalCenter="0" right="100">

        <uigfx:stroke>
            <s:SolidColorStroke color="#FFFFFF" weight="4" caps="round" />
        </uigfx:stroke>

        <uigfx:filters>
            <s:GlowFilter blurX="4" blurY="4" alpha=".8" color="#333333" />
        </uigfx:filters>

    </uigfx:DashedLine>

    <uigfx:DashedLine
        dashes="[80, 10, 10, 20, 40, 30]"
        left="101" verticalCenter="0" right="100">

        <uigfx:stroke>
            <s:LinearGradientStroke weight="2" pixelHinting="true" caps="square">
                <s:GradientEntry color="#009EE0" />
                <s:GradientEntry color="#FF9900" />
                <s:GradientEntry color="#009EE0" />
            </s:LinearGradientStroke>
        </uigfx:stroke>

    </uigfx:DashedLine>

</s:Application>

Résultat :

Disponible bien entendu sur le google code UIGFX.
Autres articles sur le même sujet

• uigfx project : Flex4 primitives library / Fireworks extension
• Flex 4 et les layouts – Faire une ViewStack « pure » Spark
• UIGFX practice : a CircularSlider component
• Proches de l’Ohio??? Les états esthètes de Flex4

Let’s rock n’ roll…
Autres articles sur le même sujet

• La Fabrick … ou quand Fabien rencontre Erick
• Noël avant l’heure : la journée de la béta 2 sur Labs.adobe.com
• ZXPackager : application pour l’empaquetage ZXP d’extensions CS5
• Ça envoie…

Explication…

Layouts

Sans faire un article complet sur les layout (ce qui serait tout à fait possible et intéressant), on peut tout de même rappeler que le Flex 4 se distingue de Flex 3 via Spark par une volonté de mieux séparer le fond de la forme, il amène donc une notion de layout pour, comme son nom le suggère, organiser les composants d’un conteneur (par exemple un <s:Group>).
Exit donc la VBox ou la HBox (même si le VGroup ou le HGroup permettent de faire une transition en douceur), et bienvenue au Group avec layout :

<mx:VBox>
</mx:VBox>

devient donc

<s:Group>
	<s:layout>
		<s:VerticalLayout />
	</s:layout>
</s:Group>

Au premier abord on dit : c’est plus verbeux ! Oui mais… le layout a cette particularité, en tant que propriété du composant, d’être modifiable à la volée, contrairement à un composant imposant sa mise en forme. Concrètement, là où la VBox présentera toujours ses enfants verticalement (c’est son nom !), le Group pourra changer à volonté de layout, donc très facilement passer de HorizontalLayout à VerticalLayout par exemple… On comprend encore mieux l’intérêt quand on se met à écrire son propre layout pour faire des choses un peu plus poussées visuellement !

Créer son layout

Pour créer un layout, il faut étendre la classe LayoutBase et surcharger a minima la méthode updateDisplayList() et certainement la méthode measure(). Ces méthodes gardent le même rôle qu’en Flex 3, mais avec l’adaptation contextuelle au Layout :

• updateDisplayList : dispose les enfants du conteneur et définit leur taille
• measure : donne la taille globale du conteneur

Vous pouvez accéder à la propriété « target » du layout qui correspond au conteneur auquel est appliqué le layout et travailler sur les enfant via les méthodes getElementAt() ou getVirtualElementAt(). La seconde méthode sert dans le cas où le layout est dit « virtualisé ».

Apparté : virtualisation de layout

Flex 4 permet, pour des raison de performance, d’utiliser un layout en mode « virtualisé », c’est-à-dire ne calculant la disposition des seuls enfants à afficher et non l’ensemble des enfants. Ce mode de fonctionnement s’applique particulièrement bien aux composants comprenant une liste de beaucoup d’enfants, mais ne calculant l’affichage d’une poignée à la fois, le reste attendant un scroll ou une action similaire pour être éventuellement affiché.

Application : création d’un ViewStackLayout

Avec les layouts en tête, il est inutile de demander pourquoi le composant ViewStack n’existe pas dans Spark : il devrait en pratique être un layout applicable à n’importe quel conteneur ! Même si le très bon article sur la virtualisation mentionne un prometteur je cite « (Planned) StackLayout », rien ne nous empêche d’en faire un simple, adapté à l’architecture Spark, plutôt que d’attendre (oui on est impatients à la fabrick).

Voici un exemple simple :

	import mx.core.ILayoutElement;
	import mx.core.IVisualElement;

	import spark.layouts.supportClasses.LayoutBase;

	public class ViewStackLayout extends LayoutBase
	{
		protected var _index:uint;

		/**
		 * Index de l'enfant à afficher
		 */
		[Bindable]
		public function get index() : Number
		{
			return _index;
		}

		public function set index(value:Number):void
		{
			if (_index != value && target != null && value >= 0 && value < target.numElements)
			{
				_index = value;
				target.invalidateSize();
				target.invalidateDisplayList();
			}

		}

		public function ViewStackLayout()
		{
			super();
		}

		override public function updateDisplayList(width:Number, height:Number):void
		{
			super.updateDisplayList(width, height);

			var numElements:int = target.numElements;

			for (var i:uint = 0; i < numElements; i++)
			{
				var element:IVisualElement = useVirtualLayout ? target.getVirtualElementAt(i) : target.getElementAt(i);
				if (i == index)
				{
					element.visible = true;
					element.includeInLayout = true;
				}
				else
				{
					element.visible = false;
					element.includeInLayout = false;
				}
			}
		}

		override public function measure():void
		{
			var count:int = target.numElements;
			for (var i:int = 0; i < count; i++)
			{
				var element:ILayoutElement = useVirtualLayout ? target.getVirtualElementAt(i) :
					target.getElementAt(i);

				if (!element)
				{
					// En prévision de la virtualisation
					element = typicalLayoutElement;
				}
				if (element && element.includeInLayout)
				{
					var elementWidth:Number = element.getPreferredBoundsWidth();
					var elementHeight:Number = element.getPreferredBoundsHeight();
					target.measuredWidth = elementWidth;
					target.measuredHeight = elementHeight;
					break;
				}
			}
		}
	}

Vous noterez ici l’usage du getVirtualElementAt, en prévision de la gestion de la virtualisation.
Vous pouvez donc utiliser ce layout dans un DataGroup « piloté » par une tabbar par exemple comme ceci :

	<s:TabBar id="tabEditors" />
	<s:DataGroup id="editors">
		<s:layout>
			<mylayouts:ViewStackLayout index="{tabEditors.selectedIndex}" />
		</s:layout>
		<!-- Enfants... -->
	</s:DataGroup>

De cette façon, le jour où vous voudrez présenter ces éléments sous forme de CoverFlow, en mode TimeMachine… vous n’aurez pas à modifier le code de votre composant, mais uniquement votre skin.

Alors, on n’est pas mieux habillé en Spark ?

Autres articles sur le même sujet

• Reflex #1: une micro-architecture pour Flex… simple !
• Flex4 : composant personnalisé et skinning
• UIGFX practice : a CircularSlider component
• Proches de l’Ohio??? Les états esthètes de Flex4

Que vous soyez acteurs dans les nouvelles technologies ou simplement curieux de voir ce que le présent nous réserve, vous êtes conviés à venir participer au 1er BarCamp dédié aux Interfaces Riches, le 23 juin 2010 à partir de 17h, au cyberCafé du campus de la Doua à Villeurbanne.

Au programme : des conférences, des ateliers et des démonstrations de ces technologies naissantes ou déjà matures et de leurs usages dans différents domaines (commerce, enseignement, divertissement…). Aux côtés des principaux innovateurs de ce secteur, vous pourrez même, si vous le souhaitez, proposer votre propre présentation dans les tribunes libres prévues à cet effet.

Quelques présentations au menu :

• Nouvelles expériences utilisateurs multi-canal grâce aux RIA (ipTv, bornes interactives);
• OpenScales: client cartographique basé sur les technologies ActionScript3 / Flex / AIR;
• Comment développer une RIA moderne en Javascript avec RESTHub.

Rendez vous, donc, le 23 juin 2010 pour une rencontre conviviale qui vous donnera l’occasion de découvrir ou de montrer dès aujourd’hui, les interfaces de demain.

• « Flash In The Can » : hymne a l’AS3
• Virtual Cabinet, flash et interfaces riches pour l’apprentissage des langues (1)
• Virtual Cabinet, flash et interfaces riches pour l’apprentissage des langues (3)
• Interfaces tangibles : le futur du multitouch

The component

PieButton

I needed a button with 2 properties startAngle and angle, to be able to transmit these values to the skin:

package com.lafabrick.components
{
    import spark.components.Button;

    public class PieButton extends Button
    {
        public function PieButton()
        {
            super();
        }

        private var _angle : Number;
        private var _startAngle : Number;

        public function get angle():Number
        {
            return _angle;
        }
        [Bindable]public function set angle(value:Number):void
        {
            _angle = value;
            invalidateDisplayList();
        }

        public function get startAngle():Number
        {
            return _startAngle;
        }
        [Bindable]public function set startAngle(value:Number):void
        {
            _startAngle = value;
            invalidateDisplayList();
        }

    }
}

CircularSlider

This component could not extend directly SliderBase or TrackBase because the SkinPart thumb and track, as Button, are extending the TrackBase class.
I thus used the Range class, inserted the Slider architecture, and added specific geometric codes.
Check the component’s source code

Skin implementation

The design of the Skin is similar to a skin Slider standard, except that it uses a PieButton instead of a Button:

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        width="100%" height="100%"
        xmlns:components="com.lafabrick.components.*"
        >
    <!-- host component -->
    <fx:Metadata>
        [HostComponent("com.lafabrick.components.CircularSlider")]
    </fx:Metadata>

    <!-- states -->
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
        <s:State name="inactive" />
    </s:states>

    <!-- SkinParts
    name=track, type=com.lafabrick.uigfx.components.CircularButton
    name=thumb, type=com.lafabrick.uigfx.components.CircularButton
    -->

    <components:PieButton
        id="track"
        width="100%" height="100%"
        top="0" bottom="0" left="0" right="0"
        skinClass="skins.CircularTrackButtonSkin"/>

    <components:PieButton
        id="thumb"
        angle="20"
        width="100%" height="100%"
        top="0" bottom="0" left="0" right="0"
        skinClass="skins.CircularThumbButtonSkin"/>

</s:SparkSkin>

Under « thumb » and « track » Skin, the angular values are a mapped with the PieButton HostComponent. StartAngle and angle properties of the Pie primitive are directly extended from the host component.
Here follows a sample with Track Skin:

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
             xmlns:s="library://ns.adobe.com/flex/spark" 

             minWidth="21" minHeight="21"
             alpha.disabled="0.5"
             xmlns:uigfx="http://uigfx.lafabrick.com"
             xmlns:primitives="com.lafabrick.uigfx.primitives.*">

    <fx:Metadata>
        [HostComponent("com.lafabrick.components.PieButton")]
    </fx:Metadata>

    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>

    <primitives:Pie
        top="0" bottom="0" left="0" right="0"
        gap="2"
        innerOffset="-2"
        offset="-2"

        innerRadius="0.7"
        angle="{hostComponent.angle}"
        startAngle="{hostComponent.startAngle}"
        >

        <primitives:fill>
            <s:RadialGradient>
                <s:GradientEntry color="#006699" />
                <s:GradientEntry color="#009EE0" />
            </s:RadialGradient>
        </primitives:fill>

        <primitives:filters>
            <s:GlowFilter inner="true" color="#000000"
                blurX="10" blurY="10" alpha="0.4" />
        </primitives:filters>

    </primitives:Pie>

</s:SparkSkin>

Result

You can check these for more info: Link, and source code.

PS: Thanks to Hervé for review and corrections!Autres articles sur le même sujet

• Flex4 : composant personnalisé et skinning
• uigfx project : Flex4 primitives library / Fireworks extension
• Flex 4 et les layouts – Faire une ViewStack « pure » Spark
• Primitive DashedLine : une petite ligne bien utile

Un serveur série avec Processing

setup

import processing.net.*;
import processing.serial.*;

Serial port;
Server socket;
void setup() {

  println( Serial.list() );

  String usbPort = Serial.list()[0];
  port = new Serial(this, usbPort, 9600);

  socket = new Server( this, 10001 );

  port.bufferUntil('\n');

  port.write(65);
}

dessine moi un serveur

void draw() {

  socket.write( xvalue+","+yvalue );
  socket.write( zero );

  delay(100);
}

Aller hop ! Le code du serveur complet :

import processing.net.*;
import processing.serial.*;

Serial port;
Server socket;

byte zero = 0;

float xvalue = 0;
float yvalue = 0;
float zvalue = 0;

void setup() {

  println( Serial.list() );

  String usbPort = Serial.list()[0];
  port = new Serial(this, usbPort, 9600);

  socket = new Server( this, 10001 );

  port.bufferUntil('\n');

  port.write(65);
}

void draw() {

  socket.write( xvalue+","+yvalue );
  socket.write( zero );

  delay(100);
}

void serialEvent(Serial port) {

  String serialStr = port.readStringUntil('\n');
  serialStr = trim(serialStr);

  int values[] = int(split(serialStr, ','));

  if( values.length == 3 ) { 

    xvalue =calculate( values[0], 512 );
    yvalue = -calculate( values[1], 500 );

  }
}

float calculate( float returnValue, int baseValue ) {

  float diff = returnValue - baseValue;
  returnValue = (diff*90) / 115; 

  // to radian
  returnValue = PI*returnValue/180;

  // trunc value
  returnValue = round( returnValue*100 );
  returnValue = returnValue /100;

  return returnValue;
}

Flaaaaaaaaash

package
{
    import flash.events.DataEvent;
    import flash.events.Event;
    import flash.events.SecurityErrorEvent;
    import flash.net.XMLSocket;

    public class ArduinoSocket
    {
        private var _socket : XMLSocket;

        public function connect() : void
        {
            _socket = new XMLSocket();

            _socket.connect("127.0.0.1", 10001);
            _socket.addEventListener(Event.CONNECT, onConnect );
            _socket.addEventListener(DataEvent.DATA, onData);
            _socket.addEventListener(
                        SecurityErrorEvent.SECURITY_ERROR, onSecurityError);

        }

        protected function onConnect( event : Event ) : void
        {
            //connecté;
        }

        protected function onData( event : DataEvent ) : void
        {
            var str : String = event.data;
            var dataAr : Array = str.split(",");
            var pitch : Number = Number( dataAr[0] );
            var yaw : Number = Number( dataAr[1] );

            // faites ce que vous voulez ici
        }

        protected function onSecurityError( event : SecurityErrorEvent ) : void
        {
            //y'a une erreur
        }
    }
}

Et pour AIR(2)

Bonus track

Pour finir

• Flash et le streaming vidéo
• Apollo, Blaze, Moxie… une année chargée pour adobe… et pour nous !
• Google AJAX Language API… et ton Flex devient polyglotte !
• Arduino #1 : fabrique ta (presque) wiimote!

Pour ce petit tuto nous aurons besoin de :

• Un microcontrôleur Arduino
• Un accéléromètre (le « 3 axes » de Sparkfun est très bien)
• Un jeu de connecteur mâle.
• Un peu d’étain
• Un fer a souder pas pourri (ca vous évitera de transpirer pour souder, comme j’ai pu le faire…)

Compter 26euros pour la platine Arduino USB de base, une 20euros pour l’accéléromètre, et 35 centimes les 20 connecteurs. L’étain et le fer à souder ce trouvent chez votre papa/oncle/pote/voisin (sinon chez votre pépé).

Si vous êtes guerrier, des platines Bluetooth existent, et des extensions super fun pour votre board (un mini écran tactile, un pack batterie lithium,….) Mais là on va faire simple pour cette article. Pour le reste, on verra plus tard.

Un peu d’électronique

En premier, nous devons souder les broches sur l’accéléromètre, histoire de pouvoir le fixer sur le microcontrôleur.

Ensuite, il faut fixer l’accéléromètre sur la platine. Arduino a 5 « pins » de connexion analogique. Il suffit de placer l’accéléromètre dessus. Le plus dur est de ne pas se tromper de sens.

Bien !	Pas Bien !

Vous pouvez prendre un café.

Ardu, I know

Nous avons donc une magnifique platine, qui ne sait pas encore qu’elle a plein de talents pour se mouvoir gracieusement. Nous allons y remédier.

Note préliminaire

Nous avons fait les bricoleurs du Dimanche, mais je n’ai pas parlé de ce qu’est Arduino. C’est une plateforme de prototypage open source. C’est à dire un bidule électronique, qui vous sert de base pour tester un assemblage d’autres bidules électronique, plus ou moins complexe. C’est utilisé pour tout et n’importe quoi: la mise au point de carte électronique, la création de robot, l’utilisation dans l’univers artistique ou du modélisme (rien a voir, mais c’est ce que je fait). Donc une platine électronique. Avec une EEPROM que l’on peut programmer facilement, grâce à un jeu de libraire fourni.

La Programmation Arduino est basé sur Processing. C’est en fait du Java, version pas chiant, ou tout ce dont vous avez besoin est déjà là. Exit donc les Maven, Nexus et autre repository. On est là pour coder rigolo. (Ce qui ne vous empêche pas d’utiliser une librairie Java dans Processing, en la collant dans le répertoire des librairies: ça marche)

Les liens qui vont bien :

• Le site officiel : http://www.arduino.cc/
• Getting Started, à lire de préférence, et surtout pour l’installation du driver pour la Board :
  • Mac
  • Windows
  • Linux

• Tutos et description des API standards

Un programme Arduino s’articule autour de 2 fonctions principales : setup() qui va initialiser des trucs, et loop() qui va exécuter du code en boucle.

setup

Comme nous ne voulons pas que la platine fasse l’autiste, et qu’elle nous parle, nous allons lui demander d’envoyer des infos sur le port série.

void setup()
{
    // initialize the serial communications:
    Serial.begin(9600);
}

9600 est le port sur lequel la platine va balancer ces infos. Vous pouvez choisir n’importe quelle autre port, ça ne me fait rien.
Il faut ensuite lui indiquer quelle sont les « pins » qui vont l’alimenter (ouai, elle est un peu con con, mais c’est comme çà).

const int groundpin = 18;
const int powerpin = 19;
void setup()
{
    // initialize the serial communications:
    Serial.begin(9600);

    // initialize pins on the board
    pinMode(groundpin, OUTPUT);
    pinMode(powerpin, OUTPUT);
    digitalWrite(groundpin, LOW);
    digitalWrite(powerpin, HIGH);

    delay(10);
}

On ajoute à la fin le delay(10); qui lui indique de cadencer la boucle loop toute les 10 millisecondes.

loop

Dans cette boucle, nous allons lui demander de lire les infos analogiques via la méthode analogRead( pinNumber );
Nous allons aussi « lisser » ces valeurs. Les valeurs analogiques sont exprimées en millivolts: c’est la variation électrique du circuit qui nous est restituée. Comme le circuit est très précis, les variations sont importantes. Il est donc utile de lisser les nouvelles valeurs par rapport aux anciennes. J’utilise un algorithme très simple. Pour plus de précision, il serait intéressant d’intégrer des formules de lissage plus complexes. Si vous avez des électroniciens autour de vous, ils pourront vous en parler.
Enfin, nous envoyons ces valeurs sur le port série.

Le code complet :

const int groundpin = 18;                  // analog ground pin
const int powerpin = 19;                   //

const int xpin = 3;                        // x-axis of the accelerometer
const int ypin = 2;                        // y-axis
const int zpin = 1;                        // z-axis (only on 3-axis models)

int sensorx, sensory, sensorz = 0;         // store the values

int smoothedx, smoothedy, smoothedz = 0;  // smoothed results
int precision = 5;                        // amount of precision

void setup()
{
    // initialize the serial communications:
    Serial.begin(9600);

    // initialize pins on the board
    pinMode(groundpin, OUTPUT);
    pinMode(powerpin, OUTPUT);
    digitalWrite(groundpin, LOW);
    digitalWrite(powerpin, HIGH);

    delay(10);
}

void loop()
{
    // read analogic data from input pin
    sensorx = analogRead(xpin);
    sensory = analogRead(ypin);
    sensorz = analogRead(zpin);

    // smothing values
    smoothedx = smoothedx + ((sensorx - smoothedx)/precision);
    smoothedy = smoothedy + ((sensory - smoothedy)/precision);
    smoothedz = smoothedz + ((sensorz - smoothedz)/precision);

    // send values on the Serial port
    Serial.print(smoothedx);
    Serial.print(",");
    Serial.print(smoothedy);
    Serial.print(",");
    Serial.print(smoothedz);
    Serial.println();
}

Il ne vous reste plus qu’a uploader ce code dans votre platine. Toutes les infos sous ce lien.

Un peu de Processing

Ce qu’il y a de bien avec Processing, c’est qu’on peut faire ce que l’on veut avec. Du joli graphisme, à la reprogrammation de votre Micro-Onde pour qu’il congèle plus vite, vous avez de quoi faire. Là nous allons écouter le port série de notre platine Arduino pour lire les informations analogiques envoyées, et en faire quelque chose.
L’IDE Processing se télécharge ici.
Les étapes :

• Lister les ports série ouverts;
• Se connecter sur celui qu’on veut;
• Ecouter les événements provenant du port série;
• Faire des trucs avec les données reçues.

Processing c’est comme pour Arduino (normal c’est la même chose). Vous avez 2 fonctions principales : setup() et draw() (équivalent à loop() chez Arduino).

RE:setup

Pour le truc, nous allons initialiser une scène OpenGL (pour au final afficher un cube, et le faire bouger). Super!

void setup() {
    size( 800, 800, OPENGL );
}

Pour se connecter au port série, c’est extrêmement simple, Processing dispose d’une lib faite pour ça : processing.serial. Pour trouver le bon port, nous allons lister les ports série ouverts. Dans mon cas, la platine se connecte sur le port 0. Il suffit de récupérer le nom du port, créer une connexion série, et l’initialiser :

void setup() {
    size( 800, 800, OPENGL );

    println( Serial.list() );

    String usbPort = Serial.list()[0];
    port = new Serial(this, usbPort, 9600);

    port.bufferUntil('\n');

    port.write(65);
}

Et je l’écoute comment le port série?

Très bonne question ! En fait Processing et la librairie serial expose le port série entrant via la fonction serialEvent(Serial port). Vous n’avez pas de point d’écoute à monter. C’est magique, c’est pas chiant.
Arduino nous envoie les valeurs sous forme de texte comme ceci : « valeurX,valeurY,valeurZ ». Nous devons donc lire le port série, et découper le texte, comme ci-dessous :

void serialEvent(Serial port) {

    String serialStr = port.readStringUntil('\n');
    serialStr = trim(serialStr);

    int values[] = int(split(serialStr, ','));
    ...

Plus qu’a lire les infos contenu dans le tableau values[]
(voir plus bas pour le code complet)

draw (comme loop en fait)

Pour le cube 3D, il faut placer un point de vue virtuel au centre de la scène, placer une lumière, créer le cube, rotationner le point de vue en fonction des valeurs de l’accéléromètre, et lui dire de recommencer toutes les 100 millisecondes. Ouf ! ça c’est de la phrase ! Heureusement en terme de code c’est moins long :

void draw() {

    background(0);
    stroke(255);
    translate(800/2,800/2,0);
    lights();

    rotateX(xvalue);
    rotateY(yvalue);
    box(300,300,300);

    delay(100);
}

super total

Le code complet pour la partie processing :

import processing.net.*;
import processing.opengl.*;
import processing.serial.*;

Serial port;

byte zero = 0;

float xvalue = 0;
float yvalue = 0;
float zvalue = 0;

void setup() {
    size( 800, 800, OPENGL );

    println( Serial.list() );

    String usbPort = Serial.list()[0];
    port = new Serial(this, usbPort, 9600);

    port.bufferUntil('\n');

    port.write(65);
}

void draw() {

    background(0);
    stroke(255);
    translate(800/2,800/2,0);
    lights();

    rotateX(xvalue);
    rotateY(yvalue);
    box(300,300,300);

    delay(100);
}

void serialEvent(Serial port) {

    String serialStr = port.readStringUntil('\n');
    serialStr = trim(serialStr);

    int values[] = int(split(serialStr, ','));

    if( values.length == 3 ) {

        xvalue =calculate( values[0], 512 );
        yvalue = -calculate( values[1], 500 );

    }
}

float calculate( float returnValue, int baseValue ) {

    float diff = returnValue - baseValue;
    returnValue = (diff*90) / 115;

    // to radian
    returnValue = PI*returnValue/180;

    // trunc value
    returnValue = round( returnValue*100 );
    returnValue = returnValue /100;

    return returnValue;
}

Dans la fonction calculate, qui transforme les valeurs en volt vers des valeurs angulaires, vous verrez un truc bizarre. Je divise par 115 un nombre. Ce n’est pas du pifomètre ! En fait cette valeur correspond à la moitié de la variation en volt des valeurs. Plus clairement : Les valeurs analogiques varient entre un minimum et un maximum. Sur mon accéléromètre (un ADXL 335), les valeurs X et Y on une variation de 330 millivolts, avec comme valeur médiane 512 millivolts (soit une valeurs comprise entre 397 et 627 millivolts). Tout ceci est fonction de votre accéléromètre. Il vous faudra donc farfouiller dans les spécifications du circuit, qui doivent être disponibles là où vous l’achetez, pour connaître ces variations.

Jouons !

Voilà !
Connectez votre platine, lancez votre programme Processing, et faites bouger le cube avec « rythm ».

Vous l’aurez peut être remarqué : je n’utilise que 2 axes de l’accéléromètre (x et y). Pour obtenir une information correcte sur l’axe z, il s’avère nécessaire d’avoir un gyroscope électronique : un DOF (Degree Of Liberty) comme on les appelle. Il en existe plein : 3DOF, 5DOF, … ils peuvent s’utiliser couplés à un accéléromètre, en connectant les axes du DOF et ceux de l’accéléromètre sur les mêmes « pins » analogiques de la board Arduino. Les calculateurs des 2 circuits, travaillant ensemble, vous retourneront les bonnes valeurs spatiales de la platine. Je vous ferais un p’tit article sur le sujet si cela vous intéresse.

2ème remarque, que vous avez forcement remarqué : je n’ai JAMAIS mis les mots FLASH ou FLEX dans cet article. « Ouaaa ! Quel exploit! », « merci, merci! Cela m’a demandé beaucoup d’entraînement ». Rassurez vous : le prochain article va vous expliquer comment utiliser tout ce biniou électronique avec votre actionscript préféré, et surtout comment faire VOTRE serveur de port série. Classe ! (et finalement j’aurais quand même placer ces mots… Je suis faible)

Je vous invite fortement à lire (et écouter) Vincent Maitray dans ces UNBELIEVABLE articles (featuring Nicolas Gans) concernant Arduino. Ca va loin, et vous aurez absolument toutes les cartes en main pour ajouter des p’tits boutons et avoir au final une VRAI wiimote « made by me ».
Sinon vous avez un autre montage, version poilu, de « la Grotte du Barbu » sous ce lien.

• La manette Wii sur mac / pc… enfin presque
• Quoi de neuf dans la béta 2 de AIR ?
• Arduino #2 : Flash, socket et Processing
• UIGFX practice : a CircularSlider component