Nociones de Action Script 3.0 (Parte III)

Continuamos con el apartado de programación en Action Script 3.0.

Propiedades de un objeto:

Si tenemos por ejemplo una imagen y queremos hacerlo todo a traves de código, podemos crear un .as que lo hace.

Un ejemplo seria el siguiente:

primero tendriamos que tener la imagen en la biblioteca, le decimos que exportar para .as y le ponemos un nombre a la clase, por ejemplo "Imagen".

-Desde el código, crearemos una variable y le asignaremos el tipo de dato "Imagen".

var MiImagen:Imagen = new Imagen();

y ahora si queremos insertarla en el escenario seria asi:

addChild(MiImagen); //Siempre utilizaremos en nombre de la variable instanciada

pero si queremos que salga en una posicion especifica de la pantalla, tendremos que asiganrle propiedades al objeto.

MiImageb.x = 100;

MiImagen.y = 200;

MiImagen.rotate = 20;

MiImagen.scaleY = .5;

MiImagen.scaleX = .5; //Esta propiedad escala la imagen un 50%, si quisieramos un 20% se pondria .2

en este ejemplo se situara en las coordenadas 100,200 con una rotacion de 20 grados.

---

Eventos

Si queremos asignar un avento a un simbolo, lo haremos de la siguiente forma:

sobre la linea de tiempo, en la primera posicion pulsamos F9, escribimos...

var MiGato:Gato = new Gato();

MiGato.x = 100;

MiGato.y = 100;

MiGato.rotate = 15;

MiGato.scaleX = .5;

MiGato.scaleY = .5;

addChild(MiGato);

MiGato.addEventListener(MouseEvent.CLICK, PulsarBoton);

function PulsarBoton(event:MouseEvent)

{

MiGato.x += 10;

MiGato.y += 10;

}

MiGato.buttonMode = true;

Se pulsa control+Enter para probarla y vemos lo que pasa....

Este código, instancia el simbolo Gato (que es una imagen de un gato), y lo muesta en pantalla, añadimos un listener (una especie de vigilante) que esta a la escucha.

el evento que le hemos asignado es un click de raton, y cuando se pulse, se desencadenara el evento, que es la funcion PulsarBoton.

Esa funcion lo que hace es desplazar la imagen 10 pixeles a la derecha y 10 pixeles para abajo.

Si queremos que la imagen, tenga pas propiedades de un boton, y al pasar por encima se ponga la mano...usaremos la propiedad...MiGato.buttonMode = true;

Nociones de Action Script 3.0 (Parte II)

Paso de valores por "valor" o por "referencia"

Vamos con la segunda parte del tutorial de Action Script...

Cuando creamos varables, podemos querer hacer copias de estas para asignarles otros valores, esto se puede hacer de 2 formas, por valor o por referencia.

-Valor: se utiliza con tipos de datos primitivos (buleanos, enteros, etc), y lo que se hace es hacer una copia de esa variable y hay acaba su realción, si modificamos la variable copiada, la primera variable mantendra su valor, un ejemplo seria

var num1:Number = 300;

var num2:Number = num1;

aqui num1 y num2 serian 300 pero...

num2 = 100;

aqui num1 seria 300 y num2 seria 100, con lo que cambiar el valor de num2 no varia a num1.

-referencia: los valores que se pasan por referencia, se utilizan con tipos de datos complejos (arrays, objetos, etc) , si en este caso lo que se pasa es la referencia a la memoria donde esta contenido ese objeto, con lo que si hacemos un cambio en la segunda variable, los cambios tambien se aplicaran a la primera. Un ejemlo seria el siguiente:

var array1:Array = new Array("uno","dos","tres");

var array2:Array = array1;

en este caso , array1 y array2 tendrian los mismos valores...pero....si hacemos

array2[3] = "cuatro";

estamos modificando los 2 arrays, y su contenido seria uno,dos,tres,cuatro.

hay que tener mucho cuidado con esto.

Si no queremos que esto ocurra, y romper la relacion entre los arrays, se usara el metodo "slice". que obligaria a pasar por valor el objeto.

Ejemplo

var array1:Array = new Array("uno","dos","tres");

var array2:Array = array1.slice(); //ahora tendremos 2 copias independientes.

Nociones de Action Script 3.0 (Parte I)

Buenas, hoy voy a contar por encima las nociones iniciales para empezar a trabajar con Action Script 3.0 que es el lenguaje de programación de Adobe, para Flash y Flex. los ejemplos que vienen en el articulo, son sobre Flash.

Empecemos por la primera Parte...

Para programar En Action Script, podemos hacerlo de 4 formas diferentes:

-Insertar código en la linea de tiempo directamente. se pulsa en el primer fotograma de la linea de tiempo y pulsamos F9, se abrirá para insertar el cógigo que queramos, por ejemplo

Trace ("Bienvenidos a la gatera informatica");

guardamos y probamos la pelicula, saldrá ese texto en la ventana de salida.

-Crear un archivo .as y vincularlo a la linea de tiempo:

creamos un archivo .as por ejemplo "prueba.as" dentro de ese archivo. escribimos el mismo código que antes Trace ("Bienvenidos a la gatera informatica");

y guardamos, en la linea de tiempo del .fla , hacemos como antes, pulsamos F9 y ponemos

Import "Prueba.as", si probamos la pelicula, tendremos el mismo efecto que antes, pero ahora habremos importado el código de un archivo .as

-Crear una clase y vincularla a la linea de tiempo.

creamos un archivo .as , por ejemplo :

package {

// Importar las clases necesarias

import flash.display.MovieClip;

import flash.events.Event;

import flash.geom.ColorTransform;

import flash.geom.Rectangle;

public class Bola extends MovieClip {

// Velocidad y dirección Horizontal

public var velocidadX:int = 10;

// Velocidad y dirección Vertical

public var velocidadY:int = -10;

// Constructor

public function Bola() {

addEventListener(Event.ENTER_FRAME, onEnterFrame);

// Darle a la Bola un color aleatorio

var transformarColor:ColorTransform = new ColorTransform();

transformarColor.color = Math.random()*0xFFFFFF;

transform.colorTransform = transformarColor;

}

// Llamada en cada fotograma

private function onEnterFrame(event:Event):void {

// Mover la bola en la cantidad apropiada

x += velocidadX;

y += velocidadY;

// Obtener límites rectángulo para bola

var limites:Rectangle = getBounds(parent);

// Revertir dirección horizontal si colisiona a izquierda o derecha

// del escenario.

if (limites.left <> stage.stageWidth) {

velocidadX *= -1;

}

// Revertir dirección vertical si colisiona arriba o abajo

// del escenario.

if (limites.top <> stage.stageHeight) {

velocidadY *= -1;

}

}

}

}

y desde el inspector de propiedades, ponemos abajo en nombre de clase, el nombre de nuestra clase, y cuando se ejecute la pelicula, se ejecutara esa clase.

-La ultima forma es , asociar una clase, pero a un simbolo (pelicula, boton, imagen, etc, etc), el sistema es el mismo que en el tercer caso , pero asociandoselo a un simbolo cuando lo creamos. asi la accion estara solo en ese simbolo.

Hasta aqui la primera parte, seguiremos en sucesivos articulos...

Como evitar el PostBack de un boton asp.net con javascript

En ocasiones queremos parar el PostBack de nuestro boton, normalmente por temas de validación aunque podemos usarlo a nuestro gusto.

Entonces nos ponemos en la situación de que tenemos un control asp button que va al servidor cuando se hace click en el, y lo que queremos es que se ejecute en determinadas situaciones, por ejemplo si a pasado la validación.

teniendo este control asp:button
asp:button id="btBuscarVuelos" runat="server" text="Buscar" onclick="btBuscarVuelos_Click" onclientclick="return ValidarVuelos();">

vemos que cuando pulsemos el botón, se ejecutara "btBuscarVuelos_Click", porque se ejecuta el evento del click, pero como podemos ver tambien tiene un "onclientclick" que llama a una funcion javascript.

la función javascript puede ser algo así.

function ValidarVuelos() {

var V = ValidateFly();

envio(V);

if (V == 1)

return false;

if (V == 0)

return true;

}

Esta función llama a otra función javascript que valida los campos y devuelve 0 o 1 dependiendo de si esta correcto o no los campos del formulario.

Lo importante de esto es lo que devuelve esta función, si es correcto devuelve un "true" y si no devuelve un "false", con lo que si nos fijamos en el control de asp.net.

onclientclick="return ValidarVuelos();"

se ejecutara el PostBack en el servidor si esa función retorna un true, y si no se quedara en el cliente y no se ejecutara el Postback.

Espero que sirva.

Un saludo

-Uso de ClientID en c#

Vamos a explicar que es eso de ClientID, y para que se usa.

Primero comentar, que .net, usa una cosa que se llama ViewState, que en pocas palabras es un tocho encriptado, donde pone el valor de los objetos que marcamos como runat="server", para poder comunicar la parte cliente, con la parte servidor.

Por ejemplo

.net esta metiendo el valor de esta label en el ViewState de la pagina para almacenar tu valor, si desde la parte servidor (el pagina.ascx.cs) ponemos esto lblHola.Text podremos capturar el valor del objeto Label.

Ahora bien, nuestro amigo .net, no deja ese id tal cual lo usamos nosotros, crea un id Unico para evitar colisiones con otros ids. entoces si queremos capturar el valor de esa variable desde Jquery o Javascript por ejemplo, nos dara un "undefined" , porque no localiza el id que le estamos pasando. Un ejemplo seria el siguiente... (en Jquery)

var valor = $('#lblHola').val(); Esto daria undefined, porque no encuentra el valor del Label.

alert(valor);

Ahora podemos probar otra cosa, en vez de usar un control .net , vamos a usar un control Html.

con lo que ahora seria.

un input type "label" con el mismo id que antes.

Si ahora probamos el Jquery,:

var valor = $('#lblHola').val();

alert(valor); //Ahora nos sale "hola", que es el valor del label.

¿y porque va ahora? por lo que comentaba antes, no esta localizando el id que le pasamos el selector de jquery.

Usando un control de .net, hay que usar ClientID, que recupera el id que crea .net para evitar las colisiones.

ahora lo vemos en un ejemplo:

var valor = $('#tbNombrePas0').val();

alert(valor);

el control de .net sera asi.

asp:TextBox ID="tbNombrePas0"

runat="server" Width="100%"

Como vemos, hemos metido el valor del textbox en una variable NombrePas, y lo mostramos en un alert.

Espero que esto ayude a lo que esteis haciendo.

-Como convertir Un float o double a entero en c#

Bueno, esta entrada va a ser corta, pero no es la primera vez que me preguntan como se hace esto, y como es bien sencillo, pues lo dejo aqui reflejado.

Cuando quieres pasar un float o un double a un entero por ejemplo, no se puede usar el int.parse(variable), hay que usar un parseo normal y corriente. es decir hacer esto..

float numero = 56.78;
int numeroEntero = (int)numero;

ahora numeroEntero sera 56.

Esto es valido para cualquier parseo, double, etc etc

-Como crear ids de .net accesibles, usando un repeater

-Como asignar el valor de un ClientID a otro control en un repeater
Para ponernos en situación, queremos hacer lo siguiente.

Tenemos un repeater, que itera sobre unos datos pasados desde el codeBehind.

A su vez tenemos un pluggin de jquery que muestra unos Tooltips dependiendo del item por el que se pase encima.

Pues bien , el problema viene cuando tenemos que asignar un panel a cada enlace en cada item, me explico.

tendremos un enlace, que al pasar por encima, saldran unos datos determinados de ese item, entoces hay que asignar en el pluggin de Jquery, el Id del panel que contiene esos datos.

pero claro, problema, cuando hay un control en un repeater, asp (muy majo el) genera un id unico para evitar colisiones, con lo que si ponemos un runat server a ese panel, como conseguiriamos el id??

Hay que tener en cuenta una cosa muy importante, lo que hay dentro de un repeater, hasta que no se bindean los datos, no existe en el ambito de la aplicación , con lo que si ponemos ...
<%= pnlDesglose.ClientID%> dara un error de que no encuentra ese objeto en el ambito....entoces solo nos queda una solución.

hacerlo desde el code behind.usease codigo del servidor.

Y ahora de como seria el codigo de servidor, como vemos, tenemos que hacerlo en el itemDataBound del repeater, que es donde tendremos la visibilidad de cada item del repeater.

protected void RptrLinks_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
HtmlAnchor link = ((HtmlAnchor)e.Item.FindControl("lnka"));
Panel pan = ((Panel)e.Item.FindControl("pnlDesglose"));

link.Attributes["rel"] = "#"+pan.ClientID;

HtmlAnchor es lo mismo que decir (control de link , o en lenguaje html "a")
Pues bien aqui vemos el funcionamiento. por cada iteracción del repeater, buscamos el control...

HtmlAnchor link = ((HtmlAnchor)e.Item.FindControl("lnka"));
Panel pan = ((Panel)e.Item.FindControl("pnlDesglose"));

y se asigna a las variables que acabamos de crear
despues añadimos un nuevo atributo al link

link.Attributes["rel"] = "#"+pan.ClientID;

Esto en pocas palabras, hace que en el codigo de cliente quede algo asi

runat="server"
href=""
class="localtip"
rel = "#ctl001_blablabla_pnlDesglose"
title="Desglose" >
Desglose