Hola Mundo en Silverlight

Vamos a ver como podemos crear una sencilla página utilizando Microsoft Silverlight.

Para ello, crearemos el típico "Hola Mundo", utilizando para ello la versión 1.0 de Silverlight. Más adelante publicaremos un ejemplo utilizando la versión 2.0

Para crear proyectos en Silverlight, normalmente usaremos Expression Blend, el cual va por su versión 2. Tambien podemos utilizar Visual Studio 2008, en conjunto con Blend, y Eclipse, junto con los plugins adecuados, aunque en realidad nos sirve cualquier editor de texto, ya que todo se basa en tags y propiedades similares al XML.

Sin embargo, necesitaremos cierto codigo de inicializacion que Blend nos genera automáticamente, de ahi que sea la herramienta mas recomendable para iniciarse en esta tecnología.

Para empezar, crearemos un archivo llamado, por ejemplo, 'HolaMundo.xaml'. Este será archivo donde añadiremos los elementos graficos de la aplicación.

Para empezar, crearemos un elemento del tipo 'Canvas', que es el contenedor principal de Silverlight 1.0, con el siguiente código:

<Canvas xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Name="Page" Background="White"
Width="640" Height="480">

</Canvas>

En el especificamos el tamaño con los atributos 'Width' y 'Height', el color de fondo 'Background' y el nombre del elemento 'x:Name'.
Si hemos utilizado Blend, nos creará automaticamente el código anterior, por lo que será mas sencillo la realización del ejemplo.

Posteriormente, añadiremos nuestro mensaje 'Hola Mundo'. Para ello, utilizaremos un elemento de tipo 'TextBlock', que es el que nos permite poner texto. Este elemento y todos los que queramos incluir en la aplicación, deberán ir dentro del canvas principal.

<TextBlock Name="miTexto" Canvas.Left="250" Canvas.Top="200" Foreground="#FFFF0000" Text="Hola Mundo"/>

Utilizamos los atributos 'Canvas.Top' y 'Canvas.Left' para especificar la posición del elemento dentro del canvas contenedor, asi como el color del texto, donde las primeras dos cifras hexadecimales indican la opacidad del elemento (00 = transparente, FF = opaco) y el resto de pares de cifras indican el color RGB. Por último, el elemento atributo 'Text' indica el texto que queremos mostrar.

Una vez hecho esto, este seria el aspecto que tendria nuestro fichero '.xaml'.

Con esto tendremos finalizado nuestro fichero principal, lo que veremos en pantalla.

Sin embargo, para que todo funcione correctamente, necesitaremos los siguientes ficheros:
- Default.html, es la página contenedora, donde ira incrustado el elemento Silverlight y que incluye las librerias Javascript que vienen a continuación.
- HolaMundo.xaml.js, donde se incluye el código Javascript para controlar nuestra aplicación
- Silverlight.js, que incluye código de inicialización del plugin y del elemento Silverlight.

Como indicaba anteriormente, estos últimos ficheros son generados automáticamente por Blend, de ahi que sea recomendable su uso cuando uno se esta iniciando en esta tecnologia.

Para probar nuestra aplicación, podremos hacerlo desde el propio Blend, pulsando F5 o a través del menú 'Project/Test site'. O tambien abriendo directamente en el navegador nuestra página 'Default.html'

IconApp.com

Utilizando tecnología Adobe AIR hemos creando un tipo de aplicación que basa su utilidad en proporcionar pequeñas soluciones, utilidades y comodidades integradas directamente en el escritorio de trabajo.

http://www.iconapp.com

Hello World en BlackBerry Storm

En este post describiremos cómo crear un simple aplicación Hello World! para la BlackBerry 9530 Storm (con pantalla táctil).

Para el desarrollo de este ejemplo se ha usado el entorno de desarrollo BlackBerry JDE en su versión 4.7.0

Necesitaremos crear:
- Una clase HelloWorldDemo, que será la base de nuestra aplicación, y que extenderá de UiApplication
- Una clase HelloWorldScreen, que será la pantalla que se mostrará en la BlackBerry, y que extenderá de MainScreen. La pantalla contendrá un título, un texto y un mensaje tipo Alert al cerrar la aplicación.


De esta manera, el archivo HelloWorldDemo.java tendrá el siguiente código:


//paquete al que pertenece
package com.rim.samples.device.helloworlddemo;

//importaciones
import net.rim.device.api.ui.UiApplication;
import net.rim.device.api.ui.container.MainScreen;
import net.rim.device.api.ui.Field;
import net.rim.device.api.ui.component.Dialog;
import net.rim.device.api.ui.component.LabelField;
import net.rim.device.api.ui.component.RichTextField;

//clase de nuestra aplicación
class HelloWorldDemo extends UiApplication
{
/**
* Entry point for application.
*/
public static void main(String[] args)
{
// Create a new instance of the application.
HelloWorldDemo theApp = new HelloWorldDemo();

// To make the application enter the event thread and start processing messages,
// we invoke the enterEventDispatcher() method.
theApp.enterEventDispatcher();
}

/**
* The default constructor. Creates all of the RIM UI components and pushes the
* application's root screen onto the UI stack.
*/
private HelloWorldDemo()
{
// Push the main screen instance onto the UI stack for rendering.
pushScreen(new HelloWorldScreen());
}
}


//clase de la pantalla
//al extender de MainScreen, nos ahorramos controlar los eventos habituales en estas aplicaciones,
//aunque como es natural se pueden sobreescribir (en este ejemplo sobreescribiremos el método close)
final class HelloWorldScreen extends MainScreen
{

//constructor
HelloWorldScreen()
{
// Add a field to the title region of the screen. We use a simple LabelField
// here. The ELLIPSIS option truncates the label text with "..." if the text
// is too long for the space available.
LabelField title = new LabelField("Hello World Demo (Título)" , LabelField.ELLIPSIS LabelField.USE_ALL_WIDTH);
setTitle(title);

// Add a read only text field (RichTextField) to the screen. The RichTextField
// is focusable by default. In this case we provide a style to make the field
// non-focusable.
add(new RichTextField("Hello World! (Texto)" ,Field.NON_FOCUSABLE));
}

/**
* Display a dialog box to the user with "¡Aaaadiós!" when the application
* is closed.
*
* @see net.rim.device.api.ui.Screen#close()
*/
public void close()
{
// Display a farewell message before closing application.
Dialog.alert("¡Aaaadiós!");
System.exit(0);

super.close();
}

} //fin clase



Para probar nuestro ejemplo:
- Dentro del JDE, haremos click en Debug -> Go, o pulsaremos F5
- Se abrirá el simulador
- En el teléfono, pulsaremos la tecla de menú (logotipo de BlackBerry)
- Pulsaremos Downloads
- Buscaremos nuestra aplicación Hello World

Imagen: