Astuces Flex

8/7/2019 Astuces Flex

1/12

Base de connaissance surFlex


2/12

Table des matires

1. Introduction ........................................................................................................................3

2. Empcher la saisie dans un champ de saisie simple .........................................................33. Prcaution dutilisation des dataProvider dans les arbres ..................................................34. Journalisation des vnements ..........................................................................................45. Appels de WebService asynchrones .................................................................................46. La mthode ValidateNow() ................................................................................................67. Appliquer un lissage de qualit sur un objet Image ............................................................78. Comment forcer le Garbage Collecting ..............................................................................89. Focus sur la barre dadresse dInternet Explorer ...............................................................910. Dsactivation de la tabulation standard Flex ....................................................................911. Contournement du bug de molette dans Flash ................................................................912. Focus sur le plugin Flash ...............................................................................................1113. Menu contextuel pur ..................................................................................................12


3/12

1. Introduction

Ce document regroupe divers astuces collectes pendant les dveloppements de lapplicationFMFB qui permettent de faire gagner du temps lors des prochains dveloppements.

2. Empcher la saisie dans un champ de saisie simple

Dans lapplication FMFB, il est parfois ncessaire dintercepter une touche dans unchamp de saisie et de lempcher de safficher. Pour cela Flex na pas prvu de mcanismepermettant dempcher la remonter dun vnement clavier dans un TextInput. Lastuce qui vasuivre permet de rsoudre cette problmatique de manire propre ct interface utilisateur (sansclignotement ou autre effet visuels drangeant).Pour comprendre cette technique il faut connatre trois vnements successifs susceptiblesdtre reus par les objets UITextField : KeyboardEvent.KEY_DOWN : lors de lenfoncement de la touche Event.CHANGE : lors du changement de la valeur du champ

TextEvent.TEXT_INPUT : lorsque la valeur a t modifie

Le champ de type UITextField est accessible dans lobjet TextInput par la mthode :input.mx_internal ::getTextField() dans le champ de type ComboBox par

_combo.mx_internal::getTextInput().mx_internal::getTextField(). Pour

empcher laffichage dune touche saisie il faut donc squentiellement : Prcdemment le texte de linput ainsi que la position du curseur aura t sauvegard sur

lvnement TEXT_INPUT. Dclencher les traitements sur lvnement KEY_DOWN (par exemple vidage du champ sur

saisie dans la touche du pav numrique). Indiquer par une variable du contrle que latouche ne doit pas tre affiche.

Sur lvnement CHANGE si la touche ne doit pas tre affiche on remet le texte prcdent

et on repositionne le curseur la position prcdemment sauvegarde(getTextField().setSelection(savedCaretIndex, savedCaretIndex)).

3. Prcaution dutilisation des dataProvider dans les arbres

Dans Flex 2 il est fortement dconseill dutiliser le dataProvider comme rfrence desnuds de larbre une fois que celui-ci a t affect. En effet, laffectation du champ dataProviderdun composant dclenche une cascade de traitement qui dmantle le dataProvider pour lestoquer en interne sous une autre forme. A la relecture du champ les donnes XML sont doncreconstruites et laccs un nud de larbre par son nud XML nest plus possible. Pour viter

cet inconvnient, il est conseill de sauvegarder le XML ayant servi aliment le dataProviderpour sen servir de rfrence.Il est dconseill de raffect le dataProvider trop frquemment, cette opration pouvant trecouteuse. Il est prfrable de manipuler lobjet XML ayant servi de source larbre pour desimple opration de suppression de nud ou de dplacement.


4/12

4. Journalisation des vnements

Il est possible dans Flex dintercepter tous les vnements concernant les UIComponentet dventuellement les journaliser. Le code ci-dessous illustre ce mcanisme :

import mx.core.mx_internal;

privatestaticfunction hookDispatchEvent():Boolean{

UIComponent.mx_internal::dispatchEventHook = logEventHook; returntrue;}

privatestaticfunction logEventHook( event:Event, uic:UIComponent ):void{

trace(event.toString()+" event dispatched from "+ uic.toString()+ " to"+event.currentTarget);}

Les traces gnres indiquent le nom de lvnement, la source de lvnement et lventuelobjet linterceptant.

5. Appels de WebService asynchrones

Un problme rcurent avec les objets WebService est le risque de conflit lors de lappelde plusieurs WebService en simultane. En effet, les rponses narrivent pas forcment dans lemme ordre que les questions. Pour palier ce problme, il existe lobjet AsyncToken qui peutservir de transporteur dinformation entre la question et la rponse. Celui-ci est cr lappel duWebService (retourn par la mthode send ) et on peut lui ajout des proprits qui serontrcuprable dans le ResultEvent, cf exemple ci-dessous :


5/12

import mx.rpc.AsyncToken;import mx.controls.Alert;import mx.rpc.events.FaultEvent;import mx.rpc.events.ResultEvent;import mx.rpc.soap.WebService;

/** Gestion de la rponse du WebService */privatefunction onSuccess(response:ResultEvent):void{

// on affiche la rponse du serveur ainsi que la proprit

// passe dans le token

echo.text = String(response.result+" "+response.token.myProperty);}

/** En cas d'erreur on affiche une pop-up */privatefunction onFault(fault:FaultEvent):void{

Alert.show(fault.fault.faultString);}

/** Sur click du bouton on appelle le web service */privatefunction shout():void{var webService:WebService = new WebService();

webService.loadWSDL("http://localhost/Share/servlet/XFireServlet/FlexViewer?wsdl");

webService.echo.addEventListener(ResultEvent.RESULT, onSuccess);webService.echo.addEventListener(FaultEvent.FAULT, onFault);// on appelle la mthode et on rcupre l'AsyncToken

var token:AsyncToken = webService.echo(yell.text);// on cre une proprit personnalise qu'on rcuprera

// dans la rponse

token.myProperty = new Date().getTime();}

]]>


6/12

6. La mthode ValidateNow()

Flex est une technologie trs optimise qui est capable daccumuler les traitements graphiquepour les excuter de manire fluide, vitant ainsi les clignotements ou autres artefact visuels.

Ceux-ci sont mis en attente et excutez entre 2 traitements interactifs. Il est donc importantde savoir que la modification dune proprit impactant le visuel dun UIComponent ne peut tresuivie dune relecture de la proprit elle-mme ou dautres lies aux composants fils, parexemple :

fait un validateNow

privatefunction resizeValidateNow():void{

myImage.height = myImage.height / 2;myImage.validateNow();Alert.show("myImage.height = "+myImage.contentHeight);

}// remise zero du test

privatefunction

reset():void

{myImage.height = 432;

}]]>

file:///C|/Documents and Settings/epa/My

Documents/1610FF0908760A4A3C24EE2B9FFDF0E6ite1458855_~img_p0_w2378_r0.png


7/12

Dans le dtail la fonction appelle sur le composant et tous ses enfants les 6 mthodessuivantes : validateProperties() : Appelle commitProperties commitProperties() : Effectue le calcul des proprits si celle-ci sont interdpendantes validateSize() : Calcul les dimensions du composant measure() : Calcul les dimensions par dfaut du composant

validateDisplayList() : Ajuste les composants situs lintrieur du composant courant updateDisplayList() : Dessine le composant et ses enfants

7. Appliquer un lissage de qualit sur un objet Image

Lobjet Flex standard pour charger les images sappelle mx.controls.Image. Il permet desmanipulations simples telles que rotation, redimensionnement, effets. Malheureusement leseffets sont appliqus aprs les redimensionnements, il est donc trs difficile dappliquer un effetde lissage limage en pleine taille pour optimiser la qualit. Il faut, donc, manipuler leBitmapData de limage directement en accdant la proprit content de lImage. Ci-dessous

un exemple :

// filtrage du contenu de l'image dans sa taille d'origine, prcision

accrue

privatefunction qualityFilter(event:Event = null):void{

if (event==null){

invoice.addEventListener(Event.COMPLETE, qualityFilter);invoice.load();

invoice.filters = null;}

else{

invoice.removeEventListener(Event.COMPLETE, qualityFilter); var bitmap:Bitmap = Bitmap(invoice.content); // activation du lissage hardware de Flash si les dimensions sontmultiples de 4 ou 8

bitmap.smoothing = true; // filtrage de l'image amlior en plus du smoothing

bitmap.bitmapData.applyFilter(bitmap.bitmapData,new Rectangle(0, 0, bitmap.bitmapData.width, bitmap.bitmapData.height),new Point(0,0),

new BlurFilter(1.4, 1.4, BitmapFilterQuality.MEDIUM));}

}// filtrage du contenu de l'image rduit, prcision faible

privatefunction standardFilter(event:Event = null):void{

if (event==null){

invoice.addEventListener(Event.COMPLETE, standardFilter);invoice.load();


8/12

} else

{invoice.removeEventListener(Event.COMPLETE, standardFilter);

var filter:BlurFilter = new BlurFilter(1.4, 1.4,BitmapFilterQuality.MEDIUM);

invoice.filters = [filter];}

}]]>

8. Comment forcer le Garbage Collecting

Lors dopration manipulant de grosse quantit de mmoire, il peut tre utile de forcer legarbage collecting pour allger la mmoire du navigateur. Il nexiste malheureusement pasdinstruction spciale pour dclencher cette opration. Le code ci-dessous provoque unerorganisation de la mmoire par effet de bord :

try {new LocalConnection().connect('foo');new LocalConnection().connect('foo');} catch (e:*) {}


9/12

9. Focus sur la barre dadresse dInternet Explorer

Par dfaut le plugin Flash sous Internet Explorer permet de tabuler en dehors dune

application Flex pour changer ladresse du site. Malheureusement sur certaine application cecomportement est plus perturbant que pratique. Pour dsactiver ce mcanisme il suffit dajouterle paramtre suivant dans la dclaration du plugin dans la page HTML :

AC_FL_RunContent("src", "${swf}","width", "${width}","height", "${height}","align", "middle","id", "${application}","quality", "high","bgcolor", "${bgcolor}","name", "${application}",

"SeamlessTabbing","false","flashvars",'stamp=' + stamp + '&historyUrl=history.htm%3F&lconid=' +lc_id + '',

"allowScriptAccess","sameDomain","type", "application/x-shockwave-flash","pluginspage", "http://www.adobe.com/go/getflashplayer"

Lexemple ci-dessus est repris de la page HTML gnre par Flex, SeamlessTabbing false signifie quil nest pas possible de sortir du plugin avec les tabulations, le focus resteconstamment lintrieur.

10. Dsactivation de la tabulation standard Flex

Pour dfinir un mcanisme de tabulation personnalis qui ne tient pas compte des taborder des champs, il est ncessaire de dsactiver le comportement standard. Pour cela, ilsuffit de mettre la proprit tabChildren du DisplayObjectContainer contenant les contrles false .

DisplayObjectContainer(getComponent()).tabChildren = false;

11. Contournement du bug de molette dans Flash

Sur certaines machines un logiciel gestionnaire de souris tourne en tche de fond etdtourne le comportement standard de la molette. Cest notamment le cas des nouvellesmachines Dell. La consquence sur le plugin Flash et limpossibilit de recevoir les vnementsMouseEvent.MOUSE_WHEEL. Pour contourner ce problme le code JavaScript ci-dessouspermet dappeler une mthode ActionScript dans lapplication Flex :


10/12

/* SWFMouseWheel v1.0 alpha1 This software is released under the MIT License

*/

var jsReady = false;

function isReady(){

return jsReady;}

function pageInit(){

jsReady = true;}

function getSWF(id){

return (navigator.appName.indexOf("Microsoft") != -1) ? window[id] :document[id];}

function sendToAS(val){

if (val-50){

getSWF('WebIndexing').jsdelta(val);}

}

function handler(delta)

{ if (delta < 0){

sendToAS(delta);}else{

sendToAS(delta);}

}

function wheel(event){

var delta = 0;

if (!event) event = window.event;if (event.wheelDelta){

delta = event.wheelDelta/120;if (window.opera){

delta = delta;}

}


11/12

else if (event.detail){

delta = -event.detail/3;}if (delta){

value = Math.round(delta)handler(value);

}if (event.preventDefault){

event.preventDefault();}event.returnValue = false;

}

if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel,false);window.onmousewheel = document.onmousewheel = wheel;

Le code Flex correspondant est le suivant :

ExternalInterface.addCallback("jsdelta",wheelZoom);publicfunction wheelZoom(delta:Number):void{

// do something with the delta}

La fonction Flex wheelZoom est appel chaque tour de molette quelque soit laposition du curseur de la souris. Il convient donc de tester le positionnement du curseur de lasouris avec la mthode hitTest avant tout traitement.

12. Focus sur le plugin Flash

Pour permettre la saisie immdiate dans un champ de formulaire Flex il est ncessairede donner le focus au plugin Flash au chargement de la page HTML sinon les touches saisiessont interprtes par le navigateur et non le plugin. Pour dclencher la prise de focus, il faut quele plugin soit compltement charg. La meilleure mthode pour sassurer que ce soit le cas estdappeler la mthode de focus partir de Flex dans linitialisation de lapplication. Ci-dessous setrouve un exemple de code :

ExternalInterface.call("focusBrowser");

Ct JavaScript cela donne :

function focusBrowser(){

document.${application}.focus();}


12/12

Ce mcanisme fonctionne partir dInternet Explorer 6 et Firefox 3.

13. Menu contextuel pur

Par dfaut Flex affiche un menu contextuel assez riche sur le click droit de la souris. Cemenu peut amener les utilisateurs avoir accs des actions peu recommandes comme lezoom qui risque de planter lapplication. Pour palier ce problme il suffit de cacher toutes lesactions facultatives au niveau des deux plus hauts objets dans la hirarchie dobjets graphiquesde lapplication Flex.

Le premier de ces objets est de type mx.core.Application (instance

application). Il est le pre de tous les composants Flex, donc en thorie de tous les

composants graphique de lapplication. Malheureusement certains composants comportants desanimations chappent cette hrarchie comme les menus droulants, les curseurs. On nepeux, donc, contrler ltat de tous les menu contextuels directement depuis application.

Pout cela il faut complter en utilisant lobjet de type SystemManager appel

systemManager qui est le pre de tous les objets Flash (anctres des objets Flex). Il faut le

transtyper en MovieClip pour pouvoir affecter la proprit contextMenu.Ces deux objets possdent une proprit contextMenu quil suffit daffecter comme dcrit

ci-dessous :

application.contextMenu = new ContextMenu();application.contextMenu.hideBuiltInItems();MovieClip(systemManager).contextMenu = application.contextMenu.clone();