Html5 Builder – Hola Mundo

Html5 Builder es un entorno de desarrollo creado por la empresa Embarcadero que está inspirado en Delphi. Su objetivo es proporcionar a los desarrolladores un entorno visual que permita crear aplicaciones Php robustas. En este primer artículo sobre Html5 Builder crearemos nuestra primera aplicación web que mostrará el ya muy conocido “Hola Mundo”. Esta es claro una aplicación muy sencilla pero poco a poco iré creando artículos que profundicen en el uso de este entorno de desarrollo.

Si aún no tienes instalado Html5 Builder puedes proceder a descargarlo en el sitio web de embarcadero donde previo registro podrás usar la versión de prueba por 30 días.

Una vez instalado ejecutaremos Html5 Builder y crearemos un nuevo proyecto. El proyecto que vamos a crear es “Server Web aplication” es decir, será una aplicación que se ejecutará en un servidor web y será consumida por navegadores Web. Vamos, una típica aplicación PHP.

php-holamundo

 

Damos doble click y en ese momento Html5 Builder va a generar el formulario principal de nuestra primera aplicación php y se nos mostrará en pantalla lo siguiente:

 

html-builder-nuevo-proyecto

Si no has programado en Delphi tal vez de inicio te parezca un poco intimidante con tantas opciones pero veremos que en realidad es muy sencillo de programar aplicaciones web usando Html5 Builder. Así que suponiendo que eres nuevo en este entorno procedo a explicar las secciones importantes para este artículo:

Object Inspector.

Dado que Html5 Builder es un entorno de desarrollo visual, este ofrece a los desarrolladores un conjunto de componentes o controles visuales y no visuales que no son otra cosa que objetos especializados. Estos componentes van desde una etiqueta, un combobox, un botón hasta controles especializados como los que nos permiten mostrar mapas de google. Si, incluyendo componentes de acceso a datos. Bueno, esos componentes de acuerdo a la OOP poseen propiedades y métodos y es precisamente para las propiedades y métodos que el Objetct  Inspector está allí. Cada componente que uses podrás definirle propiedades y acciones (métodos) haciendo uso del Object Inspector.

Tool Palette

Te preguntarás hasta este punto, bueno y esos famosos controles dónde están?, pues están en la tool palette. Este panel nos muestra organizados por categorías los diferentes controles que existen en nuestro flamante entorno de desarrollo. Si expandes la rama Standard verás los siguientes controles:

htmlbuilder-toolpalette

Como puedes ver, en esta paleta tenemos botones, etiquetas, listas, etc. En artículos posteriores tendremos oportunidad de usar algunos de ellos.

Form Designer

Es el espacio más importante de nuestras aplicaciones web. Este espacio encapsula una página web y como tal, aquí podremos colocar los componentes que formaran parte de nuestros formularios y será lo que se visualizará en nuestro navegador.

Creando nuestra primera aplicación php “Hola Mundo” en Html5 Builder

Ya que sabemos lo anterior vamos a crear nuestro primer programa. Así que seleccionaremos el componente Label de la rama Standard y lo arrastraremos hasta nuestro formulario y lo soltaremos en la esquina superior izquierda:

label1-html

 

Estando seleccionado nuestro componente nos dirigiremos al Object Inspector y buscaremos la propiedad Caption, en ella colocaremos “HOLA MUNDO PHP”, luego expandiremos la propiedad font y en color daremos doble click y en la ventana de colores que se nos muestra seleccionaremos un bonito azul:

html5-webpalette

 

y por último en la propiedad font / size vamos a cambiar el 11px por un 32px.  Ajustaremos las medidas de nuestro label y tendremos lo siguiente:

holamundoazzul

 

bueno, ya casi hemos terminado. Como puedes ver hasta este momento no hemos agregado ninguna Línea de código, y eso se debe a que HTML5 builder ha hecho todo el trabajo por nosotros. Para verlo vamos a presionar la tecla F12 y se nos mostrará el editor de código, que en artículos posteriores usaremos a mayor detalle. Por esta ocasión solo bastará con ver el código que se nos ha generado:

phpcode-preview

 

presionaremos F12 para regresar a nuestro Designer y antes de continuar guardaremos nuestro proyecto de la siguiente manera: unit1 = uholamundo y project1 como pholamundo. Una vez guardado nuestro proyecto presionaremos la tecla F9 para ver nuestra primera aplicación web ejecutándose:

holamundo-php

 

En resumen, Html5 Builder es una herramienta que te permitirá crear aplicaciones web de manera rápida, sencilla y completamente orientada a objetos.


Otros temas que pueden interesarte:

HTML5 BUILDER – Conectarse a Mysql 

 

 

9 Comments

1 Trackback / Pingback

  1. HTML5 BUILDER – Usar Google Maps | Blog del Poli

Deja un comentario