Un petit article pour un petit "tip" sur Flex 3. Le problème se produit en fait lorsque l'on définit la largeur d'un label en pourcentage, comme par exemple:
<mx:Label text="This is a really long label" width="100%"/>
Si le conteneur qui est autour de ce composant Label est plus petit que la largeur du texte, celui-ci sera coupé de manière stricte. Le plus propre serait de tronquer le label en affichant "…" à la fin avec la valeur en toolTip. C'est ce qui se passe de base si vous donnez une largeur fixe au champ texte.
Il existe une propriété qui se nomme "truncateToFit" qui semble être la solution à tous nos problèmes. Seulement, si vous passez cette propriété à true, vous ne verrez aucun changement.
Il y a en revanche une solution trouvée par Daniel R. dans cet article:
Truncating labels that use a percentage width
La solution est en fait de donner une "minWidth" de 0 pour que le comportement soit correct. Vous n'avez en fait même pas besoin de la variable truncateToFit:
<mx:HBox width="100" horizontalScrollPolicy="off">
<mx:Label text="This is a very very very long text" width="100%" minWidth="0" />
</mx:HBox>
Une des points les plus différents entre Flex 3 et Flex 4 est sûrement la séparation entre conteneur et Layout qui est faîte en Flex 4.
Pour rappel, avec Flex 3, c'était le conteneur qui décidait de la disposition des éléments "enfant". Pour changer la disposition, il fallait le plus souvent changer de composant ce qui n'était pas le must (passage d'une VBox à une TileLayout par exemple).
Avec Flex 4, le conteneur ne décide pas tout seul de la disposition de ses éléments, et on doit lui donner un objet Layout. Ces changements ont introduit une batterie de conteneurs tels que Group, SkinnableContainer, NavigatorContent (…) et de nombreux Layout (TileLayout, VerticalLayout, …).
Il est parfois difficile de s'y retrouver mais les gens de chez http://flexlayouts.org/ ont tenté de résumer le comportement de ces composants en quelques PDF. C'est grâce à un post sur le DevGirl's blog que j'ai découvert ces documents:
Using Flex Containers – Tips and Reference
Cet article donne pas mal d'informations sur quel composant préférer pour quelle situation, etc. Voici un petit exemple de récap bien pratique:

Sur flexlayout, vous pouvez retrouver ces informations avec des démonstrations interactives de chaque Layout:
http://flexlayouts.org/
Bonne lecture!
Tutorial Flex écrit par Eric de People In Action (http://blog.piaction.com/)
Publiez vous aussi sur flex-tutorial!
SharePoint est une série de logiciels pour applications web et portails, développée par Microsoft. Les fonctionnalités des produits SharePoint sont la gestion de contenu, les moteurs de recherche, la gestion électronique de documents, les forums, la création de formulaires et de statistiques décisionnelles.

Presque toutes les informations dans SharePoint sont stockées dans des listes et cette plateforme offre un ensemble de services pour les manipuler (services web, RPC, …).
Dans l’exemple suivant, nous allons développer une application Flex qui utilise des données stockées dans SharePoint. Pour cela nous allons créer un composant Flex qui appelle une «Assemblée» retournant une liste SharePoint. Ce composant mettra à jour le titre d’un élément de la liste par le biais d’un service web

Création de l’application Flex
Lancez Flash Builder et créez un nouveau «Projet Flex».
Ouvrez le fichier d’application principal de votre projet et copiez le code suivant:
<?xml version="1.0" encoding="utf-8"?>
<spark:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:spark="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
initialize="onInit()">
<fx:Declarations>
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
[Bindable]
private var sharePointList:ArrayCollection;
private function onInit():void
{
}
private function searchItems():void
{
}
private function searchResultHandler(event:ResultEvent):void
{
}
private function faultHandler(event:FaultEvent):void
{
Alert.show(event.fault.message, "Warning");
}
private function updateItemResultHandler(event:ResultEvent):void
{
}
]]>
</fx:Script>
<spark:VGroup horizontalAlign="left">
<spark:VGroup horizontalAlign="right">
<mx:Form labelWidth="100" paddingRight="0" paddingBottom="0">
<mx:FormItem label="Site Address">
<spark:Label text="{siteAddress}"/>
</mx:FormItem>
<mx:FormItem label="List GUID">
<spark:TextInput id="list" width="300"/>
</mx:FormItem>
<mx:FormItem label="View GUID">
<spark:TextInput id="view" width="300"/>
</mx:FormItem>
</mx:Form>
<spark:Button label="search" click="searchItems()"/>
</spark:VGroup>
<mx:DataGrid id="allItems" dataProvider="{sharePointList}" width="100%">
<mx:columns>
<mx:DataGridColumn dataField="ows_ID" headerText="Id" width="15"/>
<mx:DataGridColumn dataField="ows_Title" headerText="Title" width="90"/>
<mx:DataGridColumn dataField="ows_Modified" headerText="Modified" width="50"/>
</mx:columns>
</mx:DataGrid>
</spark:VGroup>
</spark:Application>
Récupération des paramètres
Nous avons choisi d’utiliser les flashVars pour passer des paramètres à notre composant. Pour y accéder nous utilisons la propriété « parameters » de l’objet «FlexGlobals.topLevelApplication». Pour accéder à la valeur de son paramètre, il suffit de procéder ainsi : parameters.nomDuParametre
Nous définissons le paramètre suivant :
- siteAddress : adresse de votre site SharePoint.
Nous récupérons ce paramètre lors de l’envoi de l’événement initialize par l’application.
J'en avais parlé il y a quelques semaines, David Deraedt a mis à disposition gratuitement ses applications Lupo Manager, Lupo Translator et Lita:
Lupo Manager et Lupo Translator disponibles gratuitement: à télécharger !
Il parlait aussi de dévoiler le code source de ces applications. Et bien, c'est chose faite! Vous pouvez télécharger les librairies et les projets sur ce billet de son blog:
Lita and Lupo now officially open source: come and join us!
Ce code est propre et de bonne qualité, n'hésitez pas à vous en inspirer!
Prenons tout d’abord le composant HSlider de base de Flex 4 :

Comme on l’a vu dans l'article précédent, dans la déclaration des SkinPart, on a "thumb" et "track" qui sont des boutons. On va laisser de côté, pour cet exemple, la Skin du DataTip. Pour créer une Skin, on va donc créer deux Skins de Button, un peu comme on l’a fait dans l’exemple précédent.
Pour la "track", on va simplement créer un rectangle arrondi avec un remplissage et une ombre portée. Ce fichier s’appellera MyTrackSkin.mxml:
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<s:Rect radiusX="2" radiusY="2" top="0" right="0" bottom="0"
left="0" height="3">
<s:fill>
<s:SolidColor color="0xFF3300"/>
</s:fill>
<s:stroke>
<s:SolidColorStroke color="0x3E3E3E" weight="1" />
</s:stroke>
<s:filters>
<s:DropShadowFilter blurX="5" blurY="5"
alpha="0.32" distance="2" />
</s:filters>
</s:Rect>
</s:Skin>
Pour la "thumb", on va simplement créer une ellipse avec un remplissage. Ce fichier s’appellera MyThumbSkin:
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<s:Ellipse width="12" height="12">
<s:fill>
<s:SolidColor color="0xFF33FF"/>
</s:fill>
<s:stroke>
<s:SolidColorStroke color="0x3E3E3E" weight="1" />
</s:stroke>
</s:Ellipse>
</s:Skin>
Il ne nous reste plus qu’à créer la Skin du Slider à proprement parler. Celle-ci sera constituée de nos deux composants. Notez leurs propriétés « id », liées aux SkinPart que l’on a décrit plus haut :
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Metadata>
[HostComponent("spark.components.HSlider")]
</fx:Metadata>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
</s:states>
<s:Button id="track" left="3" right="3" top="3" bottom="3" skinClass="MyTrackSkin"/>
<s:Button id="thumb" top="0" bottom="0" width="12" height="5" skinClass="MyThumbSkin" />
</s:Skin>
Il ne nous reste plus qu’à donner notre Skin à notre composant dans l’application Flex principale :
<?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">
<s:layout>
<s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
</s:layout>
<s:HSlider skinClass="MySliderSkin" width="150"/>
</s:Application>
Voici le résultat de notre Skin très simpliste :
