Ejemplo 1: View como contenedor
Para el primer ejemplo, crear el directorio "ejemploView1" en la siguiente ruta:
[directorioInstalacionOpenLaszlo]/Server/lps-4.6.1
Dentro de este directorio, crear el archivo "ejemploView1.lzx", cuyo código será el siguiente:
<canvas>
<view x="25" y="25" width="200" height="200" bgcolor="#CCCCFF">
<text>Texto simple</text>
<text x="30" y="60">
<font face="Courier" size="16" weight="bold" color="#AA0000">
Texto formateado
</font>
</text>
<button x="25" y="100">Boton</button>
</view>
</canvas>
El contenedor principal es Canvas, que ocupa, por defecto todo el contenido del navegador. Dentro de este contenedor se creará el contenedor View, al que se le asignará un ancho y un alto de 200 píxeles, con un color de fondo azul claro (tirando a lila), y ela posición x(horizontal)=25, y(vertical)=25, partiendo de la esquina superior izquierda de su contenedor padre (Canvas).
A continuación se añade un componente Text por defecto. Este componente visualiza un texto. Si no se indica nada, el componente obtendrá, por defecto, un tipo de letra, un tamaño, un color y una posición dentro del componente View (en este caso x=0, y=0).
El siguiente componente Text se sitúa en las coordenadas x=30 y=60, y con una fuente Courier en negrita, de 16 puntos y de color rojo oscuro.
Por último, se añade un botón (componente Button) en las coordenadas x=25 y=100.
Lanzar la aplicación accediendo a la siguiente URL:
http://localhost:8080/lps-4.6.1/ejemploView1/ejemploView1.lzx
El aspecto final sería el siguiente:
Ejemplo 2: View como imagen
Para el segundo ejemplo, crear el directorio "ejemploView2" en la siguiente ruta:
[directorioInstalacionOpenLaszlo]/Server/lps-4.6.1
Dentro de este directorio, crear el archivo "ejemploView2.lzx", cuyo código será el siguiente:
<canvas>
<view x="25" y="25" width="200" height="200" bgcolor="#CCCCFF">
<text>Ejemplo de imagen</text>
<view x="50" y="50" resource="rafinguer.jpg"/>
</view>
</canvas>
En este ejemplo se ha utilizado un View dentro de otro View (contenedor dentro de otro contenedor). El último contenedor se sitúa en las coordenadas x=40 y=50 dentro de su contenedor padre. Asimismo, se indica que este contenedor será una imagen, y para ello se carga la imagen mediante el atributo "resource". La imagen, en este caso se carga de forma relativa (sin path), y para ello se aloja la imagen "rafinguer.jpg" en el mismo directorio que código.
El resultado sería el siguiente:
Ejemplo 3: View como audio
Lo aplicado en el ejemplo anterior para una imagen es aplicable también para reproducir música. El siguiente ejemplo reproduce un archivo en formato MP3:
<canvas>
<view x="25" y="25" width="200" height="200" bgcolor="#CCCCFF">
<text>Reproduccion de audio</text>
<view x="50" y="50" resource="http:archivoAudio.mp3"/>
</view>
</canvas>
Ejemplo 4: View como vídeo
El ejemplo más sencillo para reproducir vídeo sería aquel en el que éste es reproducido en un archivo de Flash en formato SWF:
<canvas>
<view x="25" y="25" width="200" height="200" bgcolor="#CCCCFF">
<text>Reproduccion de audio</text>
<view x="50" y="50" resource="http:videoFlash.swf"/>
</view>
</canvas>
