Librairie lafabrick : parce que je le vaut bien
Le développement du simulateur Climatus demande une bonne dose d’architecture pour ne pas ce noyer dans les classes. Et quoi de mieux qu’un petit framework pour structurer tout ça ?!
J’ai donc démarré le développement d’une librairie de composants, avec un ensemble de classes pour la gestion de mes vues, que j’utilise directement dans le simulateur. 3 composants principaux pour l’instant, dérivés de TitleWindow :
- DraggableWindow et ResizableWindow : un TitleWindow draggable et resizable (on s’en serait douté !), inspiré de plusieurs travaux sur des composants Flex glané sur le web. La notion de Skin à une place importante, et, je l’espère, moins limitative que certain exemple que l’on peux trouver… et d’autres petites “features” que je vous laisse découvrir !
- ExpandedWindow est le concentré des 2 autres, avec une gestion d’évenements “minimize” et “maximize”, à la manière de l’évenement “close” du TitleWindow.
Je vous propose de découvrir cette petite librairie, via le googleCode “lafabrick” (pour changer !)
UPDATE
Un petit exemple, avec les sources.
N’hésitez pas à me faire part de vos réactions, remarques et idées qui me permettront d’améliorer et d’étoffer cette librairie.
Tags: component, Flex, opensource, UI Design
--> 7 décembre 2007 ( 10:27 )
Tu n’aurais pas un petit exemple pré-compilé de ce que ça donne une fois monté pour ceux qui n’ont pas trop le temps de s’y plonger ?
--> 7 décembre 2007 ( 12:04 )
Tout pareil que Tek
Bonne initiative en tout cas
EKA+
--> 7 décembre 2007 ( 12:51 )
ok ! j’essaye de vous faire ca pour ce soir !
--> 7 décembre 2007 ( 19:46 )
Voila pour l’exemple, en update dans le post !
--> 2 janvier 2008 ( 14:53 )
Bonjour j’aimerais utiliser la fonction de réduction du TitleWindow mais j’ai du mal à le faire
minimize="{Alert.show('maximize event');}"
maximize="{Alert.show('maximize event');}"
par quoi doit on remplacer cela pour que l’on puisse réduire la fenêtre à la taille du titre merci d’avance
--> 3 janvier 2008 ( 15:36 )
il suffit d’écrire les petites fonctions minimize et maximize qui vont bien, ou plus simplement utiliser Resize :
- - - - - - - - - - - - - - - - - - - -
Exemple 1 avec Resize :
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml&q...
layout="absolute"
xmlns:lafabrick="com.lafabrick.components.*">
<mx:Resize target="{expWin}" id="minimizeEffect" heightTo="30" />
<mx:Resize target="{expWin}" id="maximizeEffect" heightTo="300" />
<lafabrick:ExpandedWindow
id="expWin"
x="376"
y="159"
width="300"
height="300"
minimizeEnabled="true"
minimize="{minimizeEffect.play();}"
maximize="{maximizeEffect.play();}">
</lafabrick:ExpandedWindow>
</mx:Application>
- - - - - - - - - - - - - - - - - - - -
Exemple 2 avec des fonctions :
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml&q...
layout="absolute"
xmlns:lafabrick="com.lafabrick.components.*">
<mx:Script>
<![CDATA[
public function minimizeFunc() : void {
maximizeEffect.stop();
minimizeEffect.play();
}
public function maximizeFunc() : void {
minimizeEffect.stop();
maximizeEffect.play();
}
]]>
</mx:Script>
<mx:Resize target="{expWin}" id="minimizeEffect" heightTo="30" />
<mx:Resize target="{expWin}" id="maximizeEffect" heightTo="300" />
<lafabrick:ExpandedWindow
id="expWin"
x="376"
y="159"
width="300"
height="300"
minimizeEnabled="true"
minimize="{minimizeFunc();}"
maximize="{maximizeFunc();}">
</lafabrick:ExpandedWindow>
</mx:Application>
Le fait d’utiliser des fonctions permet d’enrichir le comportement de mouvement (utilisation du stop() des effets), et avoir une animation plus fluide au cas ou ‘utilisateur s’acharne sur les boutons minimize/maximize