.:: klr20mg ::. Una dosis diaria de .... http://klr20mg.com Esto no necesita descripcion =) Fri, 04 Jul 2008 23:00:11 +0000 http://wordpress.org/?v=2.5.1 en Clase TiledBackground http://klr20mg.com/2008/07/04/clase-tiledbackground/ http://klr20mg.com/2008/07/04/clase-tiledbackground/#comments Fri, 04 Jul 2008 23:00:11 +0000 Tmeister http://klr20mg.com/?p=204 Que tal gente.

Hace un buen rato que no posteo, pero aquí estoy de vuelta con algo sencillo.
TiledBackground es una clase simple la cual toma una imagen externa (jpg, gif, png) y la repite tantas veces quepa en el navegador tal y como lo hiciéramos en CSS :)

Además de que tiene un par de parámetros, se puede sobreponer un gradiente radial para hacer un efecto sobre el fondo. Los colores y alphas del gradiente se pueden configurar.

TiledBackground

PLAIN TEXT
Actionscript:
  1. package net.tmeister.utils.background
  2. {
  3.  
  4.     import flash.display.BitmapData;
  5.     import flash.display.Loader;
  6.     import flash.display.Sprite;
  7.     import flash.display.Stage;
  8.     import flash.events.Event;
  9.     import flash.geom.Matrix;
  10.     import flash.net.URLRequest;
  11.     import flash.display.StageScaleMode;
  12.     import flash.display.StageAlign;
  13.     import flash.display.GradientType; 
  14.    
  15.     public class TiledBackground extends Sprite
  16.     {
  17.         private var _pattern:String;
  18.         private var _container:Sprite;
  19.         private var _image:Loader;
  20.         private var _stage:Stage;
  21.         private var _gradient:Boolean = true;
  22.         private var _gProperties:Object = {};
  23.        
  24.         public function TiledBackground(stage:Stage)
  25.         {
  26.             _stage = stage
  27.             _stage.scaleMode = StageScaleMode.NO_SCALE;
  28.             _stage.align = StageAlign.TOP_LEFT;
  29.             _stage.addEventListener(Event.RESIZE, resize);
  30.         }
  31.         public function set pattern (urlPattern:String):void
  32.         {
  33.             _pattern = urlPattern;
  34.             loadPattern();
  35.         }
  36.         public function get pattern():String
  37.         {
  38.             return _pattern;
  39.         }
  40.         public function set radialGradient(value:Boolean):void
  41.         {
  42.             _gradient = value;
  43.         }
  44.         public function get radialGradient():Boolean
  45.         {
  46.             return _gradient;
  47.         }
  48.         public function set gradientProperties(properties:Object):void
  49.         {
  50.             _gProperties = properties;
  51.         }
  52.         public function get gradientProperties():Object
  53.         {
  54.             return _gProperties;
  55.         }
  56.         private function loadPattern():void
  57.         {
  58.             var patternLoader:Loader = new Loader();
  59.             var patternUrl:URLRequest = new URLRequest(_pattern);
  60.             patternLoader.load(patternUrl);
  61.             patternLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onPatternLoaded);
  62.         }
  63.         private function onPatternLoaded(e:Event):void
  64.         {
  65.             _image = e.target.loader;
  66.             createBackground();
  67.             createRadialGradient()
  68.         }
  69.         private function createBackground():void
  70.         {
  71.             if (_container != null)
  72.             {
  73.                 removeChild(_container);
  74.                 _container = null;
  75.             }
  76.             var bitmap:BitmapData = new BitmapData (_image.width, _image.height);
  77.             bitmap.draw(_image)
  78.             _container = new Sprite();
  79.             _container.graphics.beginBitmapFill(bitmap);
  80.             _container.graphics.drawRect(0,0, _stage.stageWidth , _stage.stageHeight);
  81.             _container.graphics.endFill();
  82.             addChild(_container);
  83.         }
  84.        
  85.         private function createRadialGradient():void
  86.         {
  87.             if (! _gradient )
  88.             {
  89.                 return;
  90.             }
  91.             var matrix:Matrix = new Matrix();
  92.             var gType:String = GradientType.RADIAL;
  93.             matrix.createGradientBox(_stage.stageWidth,_stage.stageHeight,0,0,0);
  94.             var gColors:Array = [(_gProperties.insideColor) ? _gProperties.insideColor : 0xffffff, (_gProperties.outsideColor) ? _gProperties.outsideColor : 0xffffff];
  95.             var gAlphas:Array = [(_gProperties.insideColorAlpha) ? _gProperties.insideColorAlpha : .15 ,(_gProperties.outsideColorAlpha) ? _gProperties.outsideColorAlpha : 0];
  96.             var gRatio:Array = [0,255];
  97.             var bound:Sprite = new Sprite();
  98.             bound.graphics.beginGradientFill(gType,gColors,gAlphas,gRatio,matrix);
  99.             bound.graphics.drawRect(0,0,_stage.stageWidth,_stage.stageHeight);
  100.             addChild(bound);
  101.         }
  102.         private function resize(e:Event):void
  103.         {
  104.             createBackground();
  105.             createRadialGradient()
  106.         }
  107.     }
  108. }

Uso:

PLAIN TEXT
Actionscript:
  1. package
  2. {
  3.     import flash.display.Sprite;
  4.     import net.tmeister.utils.background.TiledBackground
  5.    
  6.     public class sampleTiled extends Sprite
  7.     {
  8.         public function sampleTiled()
  9.         {
  10.             var background:TiledBackground = new TiledBackground(stage);
  11.             background.pattern = "bg1.gif"
  12.             background.gradientProperties = {insideColor:0xffffff, outsideColor:0xffffff, insideColorAlpha:.05, outsideColorAlpha:0}
  13.             addChild(background)
  14.         }
  15.     }
  16. }

Aquí el ejemplo y como siempre los archivos fuente están disponibles.

Archivos para descarga

download

Download: TiledBackground.zip
Version: 0.1
Updated: July 04 2008
Size: 12.42 KB

Saludos!!

]]> http://klr20mg.com/2008/07/04/clase-tiledbackground/feed/ Sitio fuera de línea.. http://klr20mg.com/2008/04/29/sitio-fuera-de-lnea/ http://klr20mg.com/2008/04/29/sitio-fuera-de-lnea/#comments Tue, 29 Apr 2008 23:52:40 +0000 Tmeister http://klr20mg.com/2008/04/29/sitio-fuera-de-lnea/ Por descuido de mi parte el sitio estuvo fuera de línea unos días, debido a que por tanto trabajo y cansancio se me olvido hacer el pago de la renovación del dominio. Es por ello que aparecían unos horrendos links de publicidad..

Pero bueno al parecer ya todo quedo en orden y aun hay Klr20mg por un bien rato, si es que el trabajo me lo permite. :p

No me olvido de los post prometidos, están en proceso, ya que por estar jugando con mi máquina y querer instalar MacOS en mi Dell y unas cuantas distribuciones de Linux perdí toda la información que tenia... pero bueno.. ya estaré posteando.

Saludos!!

]]> http://klr20mg.com/2008/04/29/sitio-fuera-de-lnea/feed/ Obteniendo los hijos de un DisplayObject [AS3] http://klr20mg.com/2008/04/01/obteniendo-los-hijos-de-un-displayobject-as3/ http://klr20mg.com/2008/04/01/obteniendo-los-hijos-de-un-displayobject-as3/#comments Tue, 01 Apr 2008 20:51:28 +0000 Tmeister http://klr20mg.com/?p=201 Está en una clase simple pero muy útil, al menos para mí, que recorre todos los hijos contenidos en un DisplayObject, la clase cuenta con 2 funciones:

getAllChilds

Regresa todos los hijos contenidos en el “target”

getChildsByType

Regresa solo los hijos que sean de un tipo específico, por ejemplo solo MovieClips, o solo Botones.

DisplayObjectUtils

PLAIN TEXT
Actionscript:
  1. package net.tmeister.utils
  2. {
  3.     /**
  4.      * @author Enrique Chavez aka Tmeister
  5.      */
  6.     import flash.display.DisplayObject;
  7.     public class DisplayObjectUtils
  8.     {
  9.         /**
  10.          *
  11.          * @param   target
  12.          * @return Array
  13.          */
  14.         public static function getAllChilds(target:*):Array
  15.         {
  16.             var listTmp:Array = []
  17.             for (var a = 0; a <target.numChildren; a++ )   
  18.             {
  19.                 listTmp.push (target.getChildAt(a) )
  20.             }
  21.             return listTmp
  22.         }
  23.         /**
  24.          *
  25.          * @param   target
  26.          * @param   type
  27.          * @return
  28.          */
  29.         public static function getChildsByType(target:*, type:*):Array
  30.         {
  31.             var listTmp:Array = []
  32.             for (var a = 0; a <target.numChildren; a++ )   
  33.             {
  34.                 if (target.getChildAt(a) is type)
  35.                 {
  36.                     listTmp.push (target.getChildAt(a) )
  37.                 }
  38.             }
  39.             return listTmp
  40.         }
  41.     }
  42. }

Su uso es el siguiente:

Primero creamos unos Movieclips y unos botones para tener algo que buscar.

PLAIN TEXT
Actionscript:
  1. import net.tmeister.utils.DisplayObjectUtils;
  2. import fl.controls.Button
  3.  
  4. createMovieClips()
  5. createButtons()
  6. getChilds()
  7.  
  8. function createButtons()
  9. {
  10.     for(var a:Number = 0; a<2; a++)
  11.     {
  12.         var tmp:Button = new Button();
  13.         tmp.x = Math.random()*400
  14.         tmp.y = Math.random()*400
  15.         tmp.label = "buton"+a
  16.         addChild(tmp)
  17.     }
  18. }
  19. function createMovieClips()
  20. {
  21.     for(var a:Number = 0; a<5; a++)
  22.     {
  23.         var tmp:MovieClip = new MovieClip();
  24.         tmp.graphics.beginFill(0x2a2a2a, .5)
  25.         tmp.graphics.drawRect(Math.random()*500, Math.random()*300, Math.random()*100, Math.random()*100);
  26.         tmp.graphics.endFill();
  27.         tmp.name = "mc"+a;
  28.         addChild(tmp)
  29.     }
  30. }
  31. function getChilds()
  32. {
  33.     trace("All Childs: " + DisplayObjectUtils.getAllChilds(this) )
  34.     trace("=====================================================================================")
  35.     trace("Movieclips:  " + DisplayObjectUtils.getChildsByType(this, MovieClip))
  36.     trace("=====================================================================================")
  37.     trace("Buttons:  " + DisplayObjectUtils.getChildsByType(this, Button))
  38.  
  39. }

]]> http://klr20mg.com/2008/04/01/obteniendo-los-hijos-de-un-displayobject-as3/feed/ Advanced round class AS3 http://klr20mg.com/2008/03/31/advanced-round-as3/ http://klr20mg.com/2008/03/31/advanced-round-as3/#comments Tue, 01 Apr 2008 01:06:02 +0000 Tmeister http://klr20mg.com/?p=200 Esta es una clase de mucha ayuda para cuando queramos redondear números de una forma más avanzada.

AS3 cuenta con su Math.round pero esta función lo único que hace es redondear el numero al entero más cercano. Pero qué pasa si quiero redondear un número en múltiplos de 5 por ejemplo.

Para ello escribí esta sencilla clase que lo permite.

PLAIN TEXT
Actionscript:
  1. package net.tmeister.utils
  2. {
  3.     /**
  4.      *
  5.      * Advanced Round Class
  6.      * @version 0.1
  7.      * @author Enrique Chavez aka Tmeister
  8.      *
  9.     */
  10.     public class MathUtils
  11.     {
  12.         /**
  13.          *
  14.          * Rounds a Number to the nearest multiple
  15.          * @param   number Number to Round
  16.          * @param   precision multiple to be rounded
  17.          * @return  A number round
  18.          *
  19.          */
  20.         public static function roundToNear(number:Number, precision:Number)
  21.         {
  22.             return Math.round( number / precision) * precision;
  23.         }
  24.         /**
  25.          *
  26.          * Rounds a Number up to the nearest multiple
  27.          * @param   number Number to Round
  28.          * @param   precision multiple to be rounded
  29.          * @return  A number Up round
  30.          *
  31.          */
  32.         public static function roundToUpNear(number:Number, precision:Number)
  33.         {
  34.             return Math.ceil( number / precision) * precision;
  35.         }
  36.         /**
  37.          *
  38.          * Rounds a Number down to the nearest multiple
  39.          * @param   number number Number to Round
  40.          * @param   precision multiple to be rounded
  41.          * @return  A number down round
  42.          *
  43.          */
  44.         public static function roundToDownNear(number:Number, precision:Number)
  45.         {
  46.             return Math.floor( number / precision) * precision;
  47.         }
  48.     }
  49. }

Modo de uso es tan simple como esto.

PLAIN TEXT
Actionscript:
  1. import net.tmeister.utils.MathUtils;
  2.  
  3. const number:Number = 38
  4. const precision:Number = 5
  5.  
  6. trace(MathUtils.roundToNear(number, precision)) // 40
  7. trace(MathUtils.roundToUpNear(number, precision)) // 40
  8. trace(MathUtils.roundToDownNear(number, precision)) // 35

Enjoy ;)

]]> http://klr20mg.com/2008/03/31/advanced-round-as3/feed/ PureMVC :: ValueObjects http://klr20mg.com/2008/03/26/puremvc-valueobjects/ http://klr20mg.com/2008/03/26/puremvc-valueobjects/#comments Thu, 27 Mar 2008 05:34:09 +0000 Tmeister http://klr20mg.com/?p=199 Los ValueObjects son indispensables al momento de trabajar con MVC o sin el :).

Voy a tratar hacer una definición de los ValueObjects sin ser muy técnico. de ahora en adelante al usar VO me estaré refiriendo a los ValueObjects. Los puntos mas importantes de los VO son:

  1. Los VO son contenedores de información representada por una clase individual.
  2. Los VO son serializables, es decir, pueden ser enviados entre un servidor y un cliente mantenido sus propiedades.

Imaginemos que vamos a hacer un listado de mensajes para un guestbook, pero no sabemos quien, que o como nos van a proveer la información, lo único sabemos son los atributos que contendrá cada mensaje, estos son:

  • idUnique
  • author
  • url
  • content

Los mensajes siempre contendrán estas propiedades vengan de donde vengan.

Según el punto 1 esta información es representada por una clase individual entonces como nuestro cliente será hecho el FLEX creamos nuestro clase en AS3 la cual representara nuestros VO en el cliente.

PLAIN TEXT
Actionscript:
  1. package com.klr20mg.pureMVC.guestbook.model.vo
  2. {
  3.     [RemoteClass(alias="MessagesVO")]   
  4.     [Bindable]
  5.     public class MessagesVO
  6.     {
  7.         public var idUnique:String;
  8.         public var author:String;
  9.         public var url:String;
  10.         public var content:String;
  11.         public function MessagesVO(author:String=null, url:String=null, content:String=null)
  12.         {
  13.             this.idUnique = ""
  14.             this.author = author;
  15.             this.url = url;
  16.             this.content = content;
  17.         }   
  18.     }
  19. }

Hay 2 formas comunes de "poblar" los VO mediante el constructor, como en este ejemplo o mediante getters y setters, yo prefiero la primera.

Ahora vamos crear un VO a partir de la clase anterior

PLAIN TEXT
Actionscript:
  1. package com.klr20mg.pureMVC.guestbook
  2. {
  3.     import com.klr20mg.pureMVC.guestbook.model.vo.MessagesVO
  4.     public class someClass
  5.     {
  6.         public function someClass()
  7.         {
  8.             var miVO:MessagesVO = new MessagesVO("Tmeister", "http://tmeister.net", "Este es un mensaje de prueba");
  9.             trace(miVO)
  10.         }
  11.     }
  12. }

Con esto hemos creado un VO de acuerdo a la primera clase.

Los VO son "compatibles" entre el cliente y el servidor según el punto numero 2, y al usar AMFPHP, WebOrb entre otros podemos enviar arrays de VO's entre el server y el cliente sin ningún problema, pero entonces debemos de crear nuestros VO's en el servidor en este caso usando PHP para poder "mapear" esta información.

PLAIN TEXT
PHP:
  1. <?php
  2. class MessagesVO
  3. {
  4.     public $idUnique;
  5.     public $author;
  6.     public $url;
  7.     public $content;
  8.  
  9.     public function MessagesVO()
  10.     {
  11.     }
  12.     public function mapObject($data)
  13.     {   
  14.         $this->idUnique = $data["idUnique"];
  15.         $this->author = $data["author"];
  16.         $this->url = $data["url"];
  17.         $this->content = $data["content"];
  18.     }
  19. }
  20. ?>

Como pueden ver es el mismo concepto encapsular la información en una clase.

Con esto, repito, no importa si la información viene de archivos de texto, de un webservice, de una base de datos, siempre podremos almacenar, consultar y modificar la información mediante nuestros VO's.

Espero que con esto quede claro que son y para que usan los ValueObjects

Saludos :)

]]> http://klr20mg.com/2008/03/26/puremvc-valueobjects/feed/ Klr20mg sobre WP 2.5 RC2 http://klr20mg.com/2008/03/26/klr20mg-sobre-wp-25-rc2/ http://klr20mg.com/2008/03/26/klr20mg-sobre-wp-25-rc2/#comments Wed, 26 Mar 2008 22:55:06 +0000 Tmeister http://klr20mg.com/?p=192 Que tal gente,

No me he aguantado las ganas de hacer el upgrade del blog a la versión de Wordpress 2.5 RC2.

Hasta ahora no veo ningún problema, todo parece funcionar bien. Como ya sabrán las mayores mejoras de esta versión son para el administrador, cabe decir que se ve muy bien voy a investigar todo lo nuevo que trae la versión.

En fin, Si encuentran algún problema por favor avísenme de inmediato se los agradeceré infinitamente :)

Aqui una imagen del header del Dashboard

]]> http://klr20mg.com/2008/03/26/klr20mg-sobre-wp-25-rc2/feed/ Introducción a PureMVC http://klr20mg.com/2008/03/19/introduccion-a-puremvc/ http://klr20mg.com/2008/03/19/introduccion-a-puremvc/#comments Wed, 19 Mar 2008 22:15:53 +0000 Tmeister http://klr20mg.com/2008/03/19/introduccion-a-puremvc/ La Teoría

PureMVC es un framework open source que implementa el modelo MVC para crear aplicaciones usando ActionScript 3 bajo Flash CS3 y Flex, creado originalmente por Cliff Hall .

Dentro de los planes de desarrollo podemos encontrar que se intenta implementar este framework en diversos lenguajes de programación, tales como:

  • ActionScript 2
  • ColdFusion
  • CSharp
  • Java
  • Perl
  • PHP
  • Python
  • Ruby

Al implementar el patrón MVC (Modelo-Control-Vista) podemos separar los datos de la aplicación, las vistas (Interfaz de usuario) y la lógica de control en tres "componentes", para poder reutilizar código y sobre todo hacer nuestras aplicaciones escalabres y mantenibles.

PureMVC separa estos 3 componentes en 3 "actores" dentro del framework:

  • Proxies
  • Mediators
  • Commands

En donde:

Los datos, remotos o locales son manejados por los Proxies.
Las vistas o interfaz de usuario, son manejados por los Mediators.
La lógica de la aplicación es manejada por los Commands los cuales pueden interactuar con los Proxies, los Mediators y pueden activar o ejecutar otros Commands.

Existe un cuarto elemento en PureMVC llamado Facade el cual provee una interfaz simple de comunicación para que los 3 actores principales puedan comunicarse entre sí. Además de que PureMVC implementa un esquema de notificaciones (Eventos) mediante los cuales se puede activar/ejecutar una o varias acciones.

La Práctica Hello PureMVC

Wow. Tanto para solo un Hello World? No siempre trabajar con frameworks significa menos código, además la potencia de estos frameworks se nota al trabajar en aplicaciones medianas-grandes, yo recomiendo usarlo y ustedes mismos verán las ventajas.

En fin espero les sea útil, además de decir que este es el primer video-tutorial de Klr20mg, que piensan al respecto, seguimos con los tutos escritos o seguimos con video?

Enjoy :)

Enlaces:

PureMVC Home, Download PureMVC

Download Sources

Files

download

Download: HelloPureMVC.zip
Version: 0.1
Updated: March 21 2008
Size: 285.13 KB
]]> http://klr20mg.com/2008/03/19/introduccion-a-puremvc/feed/ Frameworks | PureMVC && Cairngorm | http://klr20mg.com/2008/03/17/frameworks-puremvc-cairngorm/ http://klr20mg.com/2008/03/17/frameworks-puremvc-cairngorm/#comments Tue, 18 Mar 2008 04:22:27 +0000 Tmeister http://klr20mg.com/2008/03/17/frameworks-puremvc-cairngorm/