Flex Attitude ;-)

Après de longue recherche sur le net j’ai trouvé l’astuce que je cherchais pour réaliser une fonction en Action script 3 qui réalise l’équivalent de la fonction str_replace de PHP.

Cette astuce provient du site flexfanatic

private function str_replace( replace_what:String, replace_by:String, original:String ):String
{
var array:Array = original.split(replace_what);
return array.join(replace_by);
}

Lorsque l’on utilise des DataGrid pour afficher des informations provenant par exemple d’une base de donnée il n’est pas rare de constater que les largeurs de colonne sont insuffisantes.

Dans ce cas deux solutions sont possible, élargir les colonnes mais on se retrouve alors confronté a l’apparition de scroll barre l’autre solution plus esthétique consiste à afficher une info bulle au passage de la souris sur le contenu de la colonne en question.

Voici la méthode pour mettre en œuvre la deuxième solution.

1°) Définir une fonction qui sera appelé par le gestionnaire d’évènement du composant DataGrid

/* mouse over tp */
private function infoBulle(item:Object):String{
var myString:String = "";
if(item != null) {
myString = myString + "Méthode : " + item.methode + "\n";
myString = myString + "Prix : " + item.prix + "€\n";
}
return myString;
}
2°) Configurer notre DataGrid en précisant la fonction appelée pour formater le texte afficher dans l’info bulle (attribut : dataTipFunction) ainsi que les colonnes utilisant cet artifice (attribut : showDataTips).

<mx:DataGrid id="methodeLivraison" dataProvider="methodesExpedition" headerHeight="0" sortableColumns="false" dataTipFunction="infoBulle">
<mx:columns>
<mx:DataGridColumn editable="false" dataField="titre" headerText="Nom" showDataTips="false" />
<mx:DataGridColumn editable="false" dataField="methode" headerText="Méthode" wordWrap="false" width="200" showDataTips="true" />
<mx:DataGridColumn editable="false" dataField="prix" headerText="Prix" showDataTips="true" />
</mx:columns>
</mx:DataGrid>


Si vous désirez obtenir une application transparente et ainsi voir le background de la page HTML qui intègre votre application Flex il convient de modifier le fichier HTML généré par FlexBuilder ainsi que d’ajouter une propriété à votre mx:Application.

Pour le composant mx:Application ajouter la propriétée :  backgroundAlpha="0"

Pour le fichier HTML intégrant votre application Flex le mieux est de modifier le fichier template utilisé par FlexBuilder lors de chaque compilation.

Éditer le fichier index.template.html situé dans le dossier html-template et ajouter le code javascript suivant dans l’appel de la fonction AC_FL_RunContent (vers les lignes 68 et 85) : "wmode", "transparent",

Faite de même dans la déclaration du <noscript><object … ajouter ceci comme paramètre : <param name="wmode" value="transparent"/>

et enfin ajouter cet attribut à la balise <embed … : wmode="transparent"

Si votre application est une application complexe il sera peut être judicieux de la fractionner en plusieurs fichiers.

Dés lors il convient de définir un namespace au quel vous ferez référence dans votre application principale via l’attribut xmlns:MonNameSpace="*", vous pourrez ensuite intégrer vos sous fichiers en utilisant la syntaxe suivante <MonNameSpace:ButtonMXML/> ou ButtonMXML est le nom d’un fichier représentant une partie de votre application.

Vous l’avez certainement remarqué Flex ne propose aucun élément de style permettant de réaliser l’équivalent du strike en html balise <s>.

Si comme moi vous avez besoin de barré des composants Text de flex voici la méthode à suivre pour étendre les fonctionnalités de Flex dans ce domaine.

1°) Vous devrez réalisé une classe dérivé de l’objet Flex sur lequel vous souhaitez obtenir la possibilité de barré le texte, ici ce sera le composant « mx:Text »

package components {
import mx.controls.Text;
public class StrikeThroughText extends Text {
public function StrikeThroughText() {
super();
}
private var _strikethrough: Boolean = false;
public function set strikethrough(bool: Boolean): void {
this._strikethrough = bool;
this.invalidateDisplayList();
}
public function get strikethrough(): Boolean {
return this._strikethrough;
}
override protected function updateDisplayList(unscaledWidth: Number, unscaledHeight: Number): void {
super.updateDisplayList (unscaledWidth, unscaledHeight);
this.graphics.clear();
if (this._strikethrough) {
this.graphics.lineStyle(1, this.getStyle("color"));
this.graphics.moveTo(0, unscaledHeight);
this.graphics.lineTo(unscaledWidth, 0);
}
}
}
}
Ce fichier doit être placé dans le dossier components de votre application Flex.

2°) Il faut ensuite ajouter la déclaration du domaine de nom à l’application principale devant utiliser ce composent xmlns:components="components.*"

3°) Voila vous pouvez désormais insérer un composent du type défini à l’étape 1 comme ceci
<components:StrikeThroughText textAlign="center" htmlText="Voici du texte barré" strikethrough="true" />

Remarque : vous pouvez « dé-barré » le texte via action script ou un bouton en passant l’attribut strikethrought à false.

Si vous utilisez des ItemRenderer il est parfois indispensable d’accéder aux fonctions et/ou variables définies dans l’application parente.

Il faut alors utiliser l’objet Application et vous assurer qu’aucun conteneur parent ne définit l’attribut mouseChildren= »false », par exemple pour accéder à la fonction « voirFicheProduit » définit dans l’application principale depuis un itemRenderer il faudra utiliser la syntaxe :
<mx:Button label="Voir le produit" click="Application.application.voirFicheProduit();"/>
Plus d’informations ici.

Seul quelques composants comme le « LinkButton » affiche par défaut un curseur en forme de main au survol de la souris.

Si vous souhaitez faire en sorte que vos composants flex soient associés au curseur en forme de main au passage de la souris il convient d’ajouter les attributs suivants sur vos composants.
useHandCursor="true" buttonMode="true"

Remarque : Vous pouvez ajouter un mouseChildren="false" si vous ne souhaitez pas autorisé les composants enfant de définir leur propre curseur mais attention cela désactive également le click des composants en question.

Comment passer un paramètre à un bouton déclarer en XML

Je cherche le moyen de passer un paramètre à une fonction appelée sur le clique d’un bouton

<mx:Button label= »Qui sommes nous ? » click= »appelPageWeb(‘quisommesnous’) »/>

N’ayant pas trouvé de solution malgré plusieurs recherches sur le web je vous livre ici la solution alternative que j’ai utilisé.

<mx:Button label= »Qui sommes nous ? » click= »pageWeb=’quisommesnous’;appelPageWeb() »/>

Si vous avez une solution je suis preneur

L’outil le plus simple à utiliser pour commencer à réaliser une application Flex est la version démo de FlexBuilder utilisable pendant 60 jours.

Flex Builder est un IDE basé sur le célèbre IDE open source fournit par IBM le bien nomé : « Eclipse ».

Si vous avez besoin de communiquer avec une couche serveur via webservice ou autre vous serez surement amenés à utiliser le language PHP pour réaliser vos scripts côté serveur.

Pour pouvoir editer vos fichiers PHP sans changer d’IDE il vous faudra ajouter le plug in PHP à « Flex Builder » en suivant la procédure décrite ici.