MSR Develop Blog

Las páginas son los controles de mas arriba que no tienen padre. La representación de las paginas son lo que se muestra directamente al usuario final. Los usuarios acceden a las páginas enviando peticiones de servicio.

Cada página debe tener un archivo de template(plantilla). El sufijo del nombre del archivo debe ser “.page” . El nombre del archivo sin el sufijo es el nombre de la página. PRADO tratará de localizar un archivo clase de página dentro del directorio que contiene el archivo de página template.

Un archivo clase de página debe tener el mismo nombre que el archivo página de template pero con el sufijo “.php” . Si el archivo de clase no se encuentra, la página tomará la clase TPage.

En resumen: si tengo MiPagina.page , MiPagina.php deben estar en el mismo directorio y MiPagina.page contiene html, componentes y elementos visuales al usuario final y MiPagina.php contiene la lógica, código PHP.

PostBack

Un formulario enviado(*submiteado*) es llamado a postback(poner nuevamente) si el envío es hecho a la página que tiene el formulario. Postback puede ser considerado un evento que sucede del lado del cliente, activado por el usuario.

PRADO tratará de identificar que control del lado del servidor responder a un evento de postback. Si uno es determinado, por ejemplo, un TButton, lo llamamos el evento postback sender que traducirá el evento postback en algún evento específico del lado del servidor(ej: OnClick and OnCommand eventos del TButton).

Ciclo de vida de las páginas

Entender el ciclo de vida de las páginas es crucial para comprender la programación en PRADO. El ciclo de vida de las páginas se refiere al estado de transición de una página cuando es servida al usuario final. Puedes verlo mejor en la siguiente ilustración:

lifecycles

La imagen será traducida mas adelante…

Artículo: Fundamentals : Pages
Traducción: Martin Sagastume Rue (msr)
Fuente: http://www.pradosoft.com/demos/quickstart/index.php?page=Fundamentals.Pages

Un control es una instancia de la clase TControl o sus subclases. Un control es un componente definido junto con la interfaz de usuario. La clase base TControl define la relación padre-hijo entre los controles la cuál refleja el comportamiento y relacionamiento entre los elementos de la interfaz de usuario.

Arbol de Controles

Los controles están relacionados unos con otros mediante la relación padre-hijo. Cada control padre puede tener uno o mas controles hijos. Un control padre está a cargo de la transición del estado de sus controles hijos. El resultado de los controles hijos son usualmente usados para componer la presentación del control padre. La relacion padre-hijo trae consigo controles en forma de árbol. Una página es la raíz del arbol, la cuál su presentación es mostrada a los usuarios finales.

La relación padre-hijo es usualmente establecida por el framework a través de templates. En el código, usted puede especificar explicitamente un control como hijo de otro usando los siguientes métodos:

$parent->Controls->add($child);
$parent->Controls[]=$child;

donde la propiedad Controls se refiere a la colección del control hijo del padre.

Identificación de Controles

Cada control tiene una propiedad ID que lo identifica de forma única de los demás controles. Además, cada control tiene un UniqueID y ClientID que puede ser usado para identificar globalmente al control en el árbol que reside el control. UniqueID y ClientID son muy similares. Ambos son usados por el framework para determinar el lugar que le corresponder al control en el árbol, mientras que el último es usado principalmente del lado del cliente como tag ID’s del HTML. En general, usted no deberá confiarse de la forma explícita de UniqueID o ClientID.

Nombrando Contenedores

Cada control tiene un nombre contenedor el cuál es un control creando un namespace único para diferenciar controles que tengan el mismo ID. Por ejemplo, un control TRepeater crea multiples items, cada uno tiene controles hijo con los mismos ID’s. Para diferenciar estos controles hijos, cada item sirve como un contenedor de nombres. Por consiguiente, un control hijo puede ser identificado de forma única usando el ID de su contenedor de nombres junto con su propio ID. Como ya habrá entendido, UniqueID y ClientID se confían de los contenedores de nombres.

Un control puede servir como contenedor de nombres si implementa la interface INamingContainer

ViewState y ControlState

HTTP es un protocolo sin estados, esto significa que no provee funcionalidad para soportar interacción continua entre el usuario y el servidor. Cada request(pedido) es considerado como discreto e independiente uno del otro. Una aplicación web, sin embargo, a menudo necesita saber lo que el usuario ha hecho en sus peticiones previas. La gente introduce sessions(sesiones) para ayudar a recordar el estado de esta información.

PRADO le pide prestado el concepto de ViewState y ControlState de Microsoft ASP.NET para proveerle un mecanismo de programacion mucho mas orientado a estados. Un valor guardado en el ViewState o ControlState puede estar disponible para las próximas peticiones si las nuevas peticiones son formularios sumisión (llamados postback) a la misma página por el mismo usuario. La diferencia entre ViewState y ControlState radica en que el ViewState puede ser deshabilitado pero el ControlState no!

ViewState y ControlState no están implementados en TControl. Son comunmente usados para definir varias propiedades de los controles. Para guardar y recuperar valores del ViewState o ControlState, use los siguientes métodos:

$this->getViewState('Name',$defaultValue);
$this->setViewState('Name',$value,$defaultValue);
$this->getControlState('Name',$defaultValue);
$this->setControlState('Name',$value,$defaultValue);

donde $this se refiere al control instanciado, Name se refiere a la clave que identifica el valor persistente, $defaultValue es opcional. Cuando recuperamos valores del ViewState y ControlState, si las correspondientes claves no existe, el valor por defecto será retornado.

Artículo: Fundamentals : Controls
Traducción: Martin Sagastume Rue (msr)
Fuente: http://www.pradosoft.com/demos/quickstart/index.php?page=Fundamentals.Controls

Un componente es una instancia de la clase TComponent o de sus clases hijas. La clase base TComponent implementa el mecanismo de las propiedades y eventos de los componentes.

Propiedades de los componentes

La propiedad de un componente puede ser vista como una variable pública que describe un aspecto específico del componente, como por ejemplo el color de fondo, el tamaño de la fuente, etc. Una propiedad es definida por la existencia de los getters &/o setters que son métodos de encapsulamiento en la clase del componente, veamos:

class TControl extends TComponent {
    public function getID() {
        ...
    }
    public function setID($value) {
        ...
    }
}

Para tener acceso al Get o al Set de la propiedad ID, podrás hacer lo siguiente (como si estuvieras trabajando con una variable) :

$id = $component->ID;
$component->ID = $id;

o también podrás hacerlo de la siguiente manera:

$id = $component->getID();
$component->setID( $id );

Una propiedad es de solo-lectura si tiene un método Get pero no tiene un método Set. Como los métodos en PHP son sensibles a las mayúsculas, los nombres de las propiedades también lo son. Una clase componente hereda todas las propiedades de sus clases *padres*.

SubPropiedades

Una subpropiedad es la propiedad de la propiedad de algún objeto-tipado. Por ejemplo, TWebControl tiene la propiedad Font que es del tipo TFont. Entonces la propiedad Name de Font es referenciada como una subpropiedad con respecto a TWebControl.

Para acceder a la subpropiedad mediante Set o Get se hace de la siguiente manera:

$name = $component->getSubProperty('Font.Name');
$component->setSubProperty('Font.Name', $name);

o también podrás hacerlo de la siguiente manera:

$name = $component->getFont()->getName();
$component->getFont()->setName( $name );

Eventos de los componentes

Los eventos de los componentes son propiedades especiales que toman el nombre de los métodos como valor. Adjuntar(o setear) un método a un evento conectará el método a los lugares en donde el evento ha sido activado.
Por lo tanto, el comportamiento de un componente puede ser modificado de tal forma que no pueda ser visto durante el desarrollo del componente.

Un evento de componente es definido por la existencia de un método el cuál su nombre empieza con la palabra “on”. El nombre del evento es el nombre del método y es sensible a las mayúsculas. Por ejemplo, en TButton, tenemos:

class TButton extends TWebControl {
    public function onClick( $param ) {
        ...
    }
}

Este código define un evento llamado OnClick, y un handler(manejador) puede ser ser adjunto al evento de alguna de estas maneras:

$button->OnClick = $callback;
$button->OnClick->add( $callback );
$button->OnClick[] = $callback;
$button->attachEventHandler( 'OnClick' , $callback );

donde la variable $callback se refiere a un callback (ej: un nombre de función, un método de clase array($objeto,’metodo’), etc.) válido de PHP.

NameSpaces

Un namespace se refiere a un agrupamiento lógico de nombres de clases para que puedan ser diferenciadas unas con otras aún si tienen el mismo nombre. Ya que PHP no soporta namespaces de forma nativa, usted no puede crear instancias de dos clases que tengan el mismo nombre pero diferente comportamiento.

Para diferenciarse de las clases definidas por los usuarios, todas las clases de PRADO tiene la letra ‘T’ al comienzo del nombre. Los usuarios están advertidos de no nombrar a sus clases de esta manera. Pueden hacerlo de cualquier otra forma.

Un namespace en PRADO es considerado un directorio conteniendo uno o mas archivos de clases. Una clase puede ser especificada sin ambiguedad usando el namespace seguido del nombre de la clase. Cada namespace en PRADO es especificado con el siguiente formato: PathAlias.Dir1.Dir2,

donde PathAlias es un alias para cualquier directorio, mientras que Dir1 y Dir2 son subdirectorios bajo ese directorio. Una clase nombrada MiClase definida en el directorio Dir2 puede ser accedida de la siguiente manera: PathAlias.Dir1.Dir2.MiClase

Para usar un namespace en el código puede ser de la siguiente forma:

Prado::using('PathAlias.Dir1.Dir2.*');

lo cual añade el directorio referido por PathAlias.Dir1.Dir2 en el PHP include path, asi las clases definidas bajo ese directorio pueden ser instanciadas sin necesidad de usar el prefijo de namespace. Usted también podrá incluir una definicion de clase individual de la siguiente manera:

Prado::using('PathAlias.Dir1.Dir2.MiClase');

Lo cual incluye la clase MiClase si ya no está definida.
Para mas detalles acerca de definir un alias a las rutas, vea la seccion configuracion de la aplicacion

Instanciar componentes

Instanciar componentes significa crear instancias de las clases de los componentes. Hay dos tipos de componentes instanciados: instancias estáticas e instancias dinámicas. Los componentes creados son llamados estáticos y dinámicos, respectivamente.

Instancias dinámicas de componentes

Instanciar dinamicamente a un componente significa crear instancias del componente en el código PHP. Es lo mismo a lo que comunmente se le llama creación de objetos en PHP u otros lenguajes orientados a objetos.
Un componente puede ser dinamicamente creado usando uno de los siguientes 2 métodos en PHP:

$component = new ComponentClassName;
$component = Prado::createComponent('ComponentType');

donde ComponentType refiere al nombre de una clase o al tipo nombre en un formato de namespace(ej: System.Web.UI.TControl). La segunda manera es para compensar la falta de soporte de namespace en PHP.

Instancias estáticas de componentes

Instanciar estaticamente es crear componentes vía configuraciones. La creación de estas componentes las hace el framework PRADO. Por ejemplo, en una aplicación de configuracion, uno puede configurar un módulo para ser cargado cuando la aplicación corra. El modulo es un componente estático creado por el Framework.

Instancias componentes estaticamente se usa mucho en los templates(plantillas). Cada tag componente en un template especifica un componente que será creado automáticamente por el framework cuando el template sea cargado. Por ejemplo, en una pagina template, el siguiente tag hará que se cree un componente TButton en la página:

<com:TButton Text="Register" />

Artículo: Fundamentals : Components
Traducción: Martin Sagastume Rue (msr)
Fuente: http://www.pradosoft.com/demos/quickstart/index.php?page=Fundamentals.Components

PRADO es principalmente un framework presentacional, aunque no esté limitado a serlo. El framework está enfocado en la programacion web, lo cuál trata todo el tiempo con la interacción del usuario, y está basado en componentes y eventos asi los programadores pueden ser mas productivos. El siguiente arbol de clases muestra casi todas las clases que nos provee PRADO.

classtree

Cuando una aplicación PRADO esta procesando el pedido de una página, el diagrama del objeto static  se muestra de la siguiente manera:

objectdiagram

Artículo: Fundamentals : Architecture
Traducción: Martin Sagastume Rue (msr)
Fuente: http://www.pradosoft.com/demos/quickstart/index.php?page=Fundamentals.Architecture

En esta sección, lo guiaremos para que pueda crear su primer aplicación PRADO, el famoso “Hola Mundo”.

“Hola Mundo” quizas es la aplicación interactiva mas simple que se pueda crear con PRADO. Muestra al usuario final una página con un botón de submit que tiene de titulo Clickeame. Luego que el usuario hace click, el titulo del botón se cambia por “Hola Mundo”

Hay muchas maneras de hacer esto. Una de ellas seria hacerle submit de la página al servidor, examinar la variablede POST y generar una nueva página con el titulo del botón actualizado. O simplemente usar JavaScript para actualizar el título del boton usando el evento OnClick.

PRADO promueve una programacion web basada en componentes y eventos. El botón es representado por un objeto del tipo TButton. Encapsula el titulo del boton en la propiedad Text y la asocia la accion de click en el botón con un evento OnClick del lado del servidor. Para responder al click del usuario en el botón, uno simplemente necesita adjuntarle una función al evento OnClick del botón.

Y en la función, la propiedad Text del botón es modificada a “Hola Mundo”. El siguiente diagrama muestra la secuencia de funcionamiento de todo esto:

sequenciaNuestra aplicación PRADO consiste de estos tres archivos, index.phpHome.page y Home.php, los cuales son reconocidos de la siguiente manera:

directory

Cada directorio (los cuales estan nombrados en ingles) los vamos a explicar ahora. Note que la estructura de directorios de mas arriba pueden ser modificiados. Por ejemplo, usted puede mover el directorio protected para afuera del directorio Web. Usted sabrá hacer esto luego de terminar este tutorial.

  • assets – directorio que guarda los archivos publicados privados. Ver la sección assets para mas detalles.Este directorio debe ser escribible  por el servidor Web.
  • protected – ruta de la aplicación donde se guarda los datos y los scripts privados. Este directorio debe ser configurado como inaccesible a los usuarios finales.
  • runtime – ruta de la aplicación donde se guarda la informacion de runtime(tiempo de ejecución), como el estado de la aplicación, data guardada, etc. Este directorio debe ser escribible por el servidor Web.
  • pages – ruta base para guardar todas las paginas PRADO

Consejo: Usted puede usar framework/prado-cli.php script de linea de comando para crear la estructura de projecto PRADO, como la que se muestra en la imagen de mas arriba. Por ejemplo, puede ejecutar el siguiente comando: php /ruta/hacia/prado-cli.php -c helloworld  ,  o en español /ruta/hacia/prado-cli.php -c holamundo

Los tres archivos necesarios son los siguientes:

  • index.php – el script de entrada para la aplicacion PRADA. Este archivo es requerido por todas las aplicaciones PRADO y es el único script accesible por los usuarios finales. El contenido de index.php consiste basicamente de estas siguientes tres lineas:
require_once('path/to/prado.php');  // incluye el script prado

$application=new TApplication;      // crea una instancia que hace referencia al objeto de la clase TApplication

$application->run();                // corre la aplicacion
  • Home.page – el template para la pagina por defecto retornado cuando los usuarios no especifican la pagina pedida. Un template especifica la capa de presentacion de componentes. En este ejemplo, usamos dos componentes, TForm y TButton los cuales corresponden a los tags HTML <form> e <input> respectivamente. El template tiene el siguiente contenido:
<html>
  <body>
    <com:TForm>
      <com:TButton Text="Clickeame" OnClick="buttonClicked" />
    </com:TForm>
  </body>
</html>

 

  • Home.php -Class para la pagina Home page. Basicamente contiene el método que responde al evento OnClick del botón.
class Home extends TPage
{
    public function buttonClicked($sender,$param)
    {
        // $sender refers to the button component
        $sender->Text="Hola Mundo!";
    }
}

Esta aplicación esta ahora lista para ser accesible desde: http://direccion-servidor-web/helloworld/index.php, asumiendo que el directorio helloworld esta dentro del directorio principal raiz del servidor. Pruebe como práctica cambiar el TButton en Home.page a TLinkButton y ver que pasa 🙂

Consejo : Generalmente la dirección del servidor web es Localhost si esta trabajando en su computador personal y tiene apache corriendo. Pruebe acceder desde : http://localhost/helloworld/ o http://localhost/helloworld/index.php

Puede probar este ejemplo online.

Artóculo: My first PRADO application
Traducción: Martin Sagastume Rue (msr)
Fuente: http://www.pradosoft.com/demos/quickstart/index.php?page=GettingStarted.HelloWorld

Correcciones, comentarios o sugerencias.. déjelo en este post.