Crear una ventana transparente en Appcelerator


El ejemplo de hoy es crear una ventana casi transparente que este sobre otra ventana. Este ejemplo no tiene un fin en especifico, talvez les pueda ayudar a entender mejor la forma de programar con Appcelerator o lo pueden usar en alguna aplicación.

Para esto crearemos una ventana y dentro de ella tendremos un boton, el cual al darle click se abrira una ventana semitransparente. La ventana transparente se cerrara al tocarla.

 

Lo primero que agregaremos sera la estructura de la aplicación la cual consta de la ventana inicial, un boton, y la segunda ventana que estará semitransparente.

//Ventana principal de la aplicación
var ventanaPrincipal = Ti.UI.createWindow({
	backgroundColor:'#fff',
	title:'Ventana Principal'
});

//Creación del boton
var boton = Ti.UI.createButton({
	title : 'Abrir Ventana 2',
	top : '10dp',
	left : '60dp',
	height : '40dp',
	width : '200dp'
});

//Se agrega el boton a la ventana
ventanaPrincipal.add(boton);

//La magia la hace la propiedad opacidad que va de 0 a 1
var ventanaTransparente = Ti.UI.createWindow({
	opacity : .3,
	backgroundColor : '#fff'
});

A la ventana que tendra la transparencia se le agregara un label que tenga como texto ‘Cargando…’, el texto cambiara de acuerdo a lo que necesitemos, si es que lo necesitamos. El label no se asigna a una variable porque no es necesario, por lo cual no existe un add, como sucedió con el boton. Escribir el siguiente codigó al final de app.js.

ventanaTransparente.add(
	Ti.UI.createLabel({
		text : 'Cargando...',
		top : '100dp',
		width : '200dp',
		left : '60dp',
		height : '50dp',
		font : {
			fontSize : '24dp',
			fontWeight : 'bold'
		},
		textAlign:'center',
		color:'#837770'
}));

Para que al darle click al boton, este abra la ventana transparente se le debe de asignar el evento ‘click’. Con el siguiente código.

boton.addEventListener('click', function(e) {
	ventanaTransparente.open();
});

Y para que la ventana se cierre al tocarla, tambien se le agregara un evento.

ventanaTransparente.addEventListener('click', function(e) {
	ventanaTransparente.close();
});

Lo ultimo que falta es solo abrir la ventana principal, utilizando el metodo open en la ventana.

ventanaPrincipal.open();

El código se encuentra en mi Gist. Cualquier problema con el código favor de comentarlo.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

w

Conectando a %s

A %d blogueros les gusta esto: