viernes, 29 de octubre de 2010

Growler Lib - Ejemplo


Please upgrade your Flash Player
This is the content that would be shown if the user does not have Flash Player 6.0.65 or higher installed.


Aqui les dejo el AIR para que puedan ver como funciona el growler, los codigos del ejemplo estan dentro del air, se le puede hacer clic derecho VIEW SOURCE.

Codigo Main

<?xml version="1.0" encoding="utf-8"?>
<s:Group 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:www="http://www.flex-tutorial.fr/2009"
   left="10" right="10" bottom="10" top="10"
   >

 <fx:Script>
  <![CDATA[
   import mx.graphics.GradientEntry;
   
   import net.developyourdream.growler.Growler;
   import net.developyourdream.growler.growlers.GrowlerTypeUbuntu;
   import net.developyourdream.view.growler.GrowlerTypeCustom;
   import net.developyourdream.view.growler.GrowlerTypeCustomTwo;
   

   protected function basicSkinClickHandler(event:MouseEvent):void
   {
    var growler:Growler = new Growler;
    growler.dispach();
   }
   
   protected function ubuntuSkinClickHandler(event:MouseEvent):void
   {
    var growler:GrowlerTypeUbuntu = new GrowlerTypeUbuntu;
    growler.width = 200;
    growler.theTitle = myTitle.text;
    growler.message = myMessage.text;
    growler.dispach();
   }
   
   protected function customSkinClickHandler(event:MouseEvent):void
   {
    var growler:GrowlerTypeCustom = new GrowlerTypeCustom;
    growler.theTitle = myTitle.text;
    growler.story = myStory.text;
    growler.message = myMessage.text;
    growler.gradientFillColors = [new GradientEntry(Math.random()*0xFFFFFF,NaN,0.8),new GradientEntry(Math.random()*0xFFFFFF,NaN,0.8)];
    growler.dispach();
   }
   
   protected function custom2SkinClickHandler(event:MouseEvent):void
   {
    var growler:GrowlerTypeCustomTwo = new GrowlerTypeCustomTwo;
    growler.dispach();
   }
  ]]>
 </fx:Script>

 <fx:Declarations>
  <!-- Place non-visual elements (e.g., services, value objects) here -->
 </fx:Declarations>
 <s:layout>
  <s:VerticalLayout/>
 </s:layout> 
 
 <mx:Image source="../../../assets/image/LogoLargo.png"  width="400"/>
 <s:Label text="TITLE" />
 <s:TextInput id="myTitle" text="Develop Your Dream Lib" width="100%"/>
 <s:Label text="STORY" />
 <s:TextInput id="myStory" text="Este campo solo es para el CUSTOM GROWLER" width="100%"/>
 <s:Label text="MESSAGE" />
 <s:TextArea id="myMessage" width="100%" text="A los growlers del lib no se ajuntan al texto por lo tanto se le debe especificar su WIDTH y HEIGHT. &#13;&#13;Para lograr que los growler se ajusten dinamicamente se pueden hacer GROWLERS CUSTOM extendiendo de la clase GROWLER, se calcula el tamaño de los hijos y se sobre escribe el metodo updateDisplayList. &#13;&#13;Ejemplo: CUSTOM SKIN 1."
 />
 <s:Group width="100%" height="100%">
  <s:layout>
   <s:TileLayout/>
  </s:layout>
  <s:Button label="Lib Basic Skin" click="basicSkinClickHandler(event)"/>
  <s:Button label="Lib Ubuntu Skin" click="ubuntuSkinClickHandler(event)"/>
  <s:Button label="Custom Skin 1" click="customSkinClickHandler(event)"/>
  <s:Button label="Custom Skin 2" click="custom2SkinClickHandler(event)"/>
 </s:Group>
 
</s:Group>

Para crear un Growler Básico, se crea una instancia y se puede mostrar con el metodo dispatch().

El método dispach solo se usa cuando estamos seguros que el growler esta listo para mostrarse, en mejores palabras una ves que se le coloca el Width y el Height y se le setea los parámetros bien sea propio o personalizados.

No hay comentarios.:

Publicar un comentario