Programando com o MIOLO

Tutorial – O infame “Hello World!”

Como seria um sacrilégio quebrar a tradição, vamos usar o infame “Hello World!” para mostrar algumas funcionalidades básicas do MIOLO, bem como a estrutura mínima necessária para uma aplicação funcionar dentro do framework. Começamos com o mais simples possível e vamos agregando funcionalidades.

Passo 1 – Estrutura do módulo HelloWorld

Criar o diretório “helloworld” dentro do diretório <miolo>/modules

Criar o diretório “etc” dentro do diretório <miolo>/modules/helloworld

Criar o diretório “handlers” dentro do diretório <miolo>/modules/helloworld

Passo 2 – Arquivo de configuração do módulo

Criar o arquivo “module.conf” dentro do diretório <miolo>/modules/helloworld/etc, com o seguinte conteúdo:

<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>

<conf>

<options>

<startup>helloworld</startup>

</options>

<theme>

<module>miolo</module>

<main>clean</main>

<lookup></lookup>

<title>Miolo - Hello World!</title>

</theme>

<login>

<check>0</check>

</login>

</conf>

Esta configuração estabelece o módulo “helloworld” como o módulo inicial da aplicação (sobrepassando o módulo common) e define qual tema será usado. O tema “clean” (localizado na estrutura do Miolo, e não do módulo) renderiza apenas a área de conteúdo (não exibindo header, menus, ou statusbar). A opção “title” define o título da janela no browser. O login.check igual a 0 define que não é necessário autenticar o usuário.

Passo 3 – Classe Handler

Criar o arquivo “handler.class” dentro do diretório <miolo>/modules/helloworld/handlers, com o seguinte conteúdo:

<?php

class HandlerHelloWorld extends Handler

{

}

?>

Todos os módulos têm uma classe que herda da classe Handler e é nomeada como Handler<nome_do_módulo>. Através dos métodos desta classe é que são executados os handlers, ou seja os códigos de programa responsáveis por tratar a requisição feita pelo usuário. Neste exemplo, não há nenhuma particularidade de tratamento no módulo HelloWorld, então ele simplesmente herda da classe Handler.

Passo 4 – Handler principal

Criar o arquivo “main.inc” dentro do diretório <miolo>/modules/helloworld/handlers, com o seguinte conteúdo:

<?

$theme->SetContent(new Label('Hello World!'));

?>

Todos os módulos têm um arquivo “main.inc” que é o handler principal do módulo. Em uma aplicação, a função deste handler geralmente é mostrar um menu que aponta para outros handlers. Neste exemplo sua única função é escrever “Hello World!”. Para isso instanciamos um controle Label, e indicamos que o conteúdo do tema será apenas este controle.

Passo 5 – Executar

http://miolo.dominio/index.php/helloworld

Agregando funcionalidade

Os passos anteriores demonstraram uma aplicação mínima. No passos seguintes, vamos adicionar algumas funcionalidades como exemplo da forma de programação com o MIOLO.

Passo 6 – Substituir o Label por um Botão; executar

Alterar o arquivo “main.inc” dentro do diretório <miolo>/modules/helloworld/handlers, com o seguinte conteúdo:

<?

$theme->SetContent(new MButton('btnHello','Hello World!'));

?>

A execução da URL (passo 5) exibe um botão. Nesta altura, clicar no botão causa um postback (submissão dos dados do formulário), mas que ainda não é tratado pela aplicação.

Passo 7 – Tratar o evento de click no botão

Para que o código tenha alguma funcionalidade é necessário tratar o evento de click do botão criado no passo anterior. Isto é feito associando-se um “event handler” ao botão, ou seja uma função ou método que será executado automaticamente pelo MIOLO quando solicitarmos o tratamento de eventos do tema. Alteramos o arquivo “main.inc” dentro do diretório <miolo>/modules/helloworld/handlers, com o seguinte conteúdo:

<?

1: $button = new MButton('btnHello','Click Me!');

2: $button->AttachEventHandler('click','OnBtnHelloClick');

3: $theme->SetContent($button);

4: $theme->EventHandler();

5: function OnBtnHelloClick($sender)

6: {

7: global $theme;

8: $theme->AppendContent(new Label('Hello World!'));

9: }

?>

Obs: os números das linhas não devem constar do arquivo; são usados apenas para referência.

Linha 1: criação do botão. O primeiro parâmetro é o nome do controle (id) e o segundo é o label a ser exibido.

Linha 2: associação do evento. A função ‘OnBtnHelloClick’ é associada ao evento ‘click’ do botão ‘btnHello’. Durante o tratamento de eventos do tema, o MIOLO irá verificar se o botão ‘btnHello’ foi clicado e executará a função asoociada.

Linha 3: o botão é colocado na área de conteúdo do tema.

Linha 4: é chamado o tratamento de eventos do tema. Este método deve ser executado após a colocação dos controles no tema.

Linha 5: função de tratamento do click no botão btnHello. Todas as funções (ou métodos) que funcionam como ‘event handler’ recebem como primeiro parâmetro o objeto que disparou o evento ($sender). Esta função será executada durante a chamada realizada na linha 4.

Linha 7: declaração para acessar o tema que está sendo usado. Uma alternativa ao uso de variáveis globais seria acessar o método do objeto manager (que representa o MIOLO) que retorna o tema em uso:

7: $theme = $sender->manager->GetTheme();

Linha 8: O label com o texto ‘Hello World!’ é acrescentado (append) ao tema, sendo exibido depois do botão ‘btnHello’.

Passo 8 – Trabalhando com um formulário

No MIOLO todas as páginas HTML geradas funcionam como um formulário HTML, onde colocamos os controles que serão utilizados pelo usuário. Assim, quando falamos em “formulários” (ou forms) estamos nos referindo a uma instância do controle MForm, que funciona como um container para outros controles que são posicionados e tratados conjuntamente. Uma vez que uma aplicação é geralmente baseada em formulários (para entrada e saída de dados), estes recebem um tratamento diferenciado na estrutura do módulo, sendo armazenados em um diretório próprio. Neste passo, vamos criar um formulário e posicionar os controles vistos até aqui (um label e um botão) dentro deste formulário, acrescentando já o tratamento do evento ‘click’ do botão.

Criar o diretório “forms” dentro do diretório <miolo>/modules/helloworld

Alterar o arquivo “main.inc” dentro do diretório <miolo>/modules/helloworld/handlers, com o seguinte conteúdo:

<?

1: $ui = $MIOLO->GetUI();

2: $form = $ui->GetForm('helloworld','frmMain');

3: $theme->SetContent($form);

?>

Linha 1: instanciar o objeto UI. Este objeto implementa o padrão Factory, permitindo instanciar objetos de classes diferentes (forms, grids, images, etc) através da indicação do nome da classe. A variável global $MIOLO é o objeto que representa o framework.

Linha 2: instanciar o formulário. Através do método GetForm do objeto UI o formulário é instanciado. São passados como parâmetro o nome do módulo (‘helloworld’) e o nome do formulário (‘frmMain’) – o que permite reutilizar formulários já existentes em outros módulos. O formulário deve existir como uma classe frmMain, declarada dentro do arquivo frmMain.class no subdiretório ‘forms’ do módulo.

Linha 3: o formulário é colocado na área de conteúdo do tema.

Criar o arquivo “frmMain.class” dentro do diretório <miolo>/modules/helloworld/forms, com o seguinte conteúdo:

<?

1: class frmMain extends Form

2: {

3: function __construct()

4: {

5: parent::__construct('Hello World!');

6: $this->SetFormCSS(100,400,10,10);

7: $buttons = array(

8: new MButton('btnHello', 'Click Me!')

9: );

10:	$this->SetButtons($buttons);

11: $this->btnHello->attachEventHandler('click','OnBtnHelloClick');

12: $this->EventHandler();

13:	}

14:

15: function OnBtnHelloClick($sender)

16: {

17: $this->AddField(new Label('Hello World!'));

18: }

19: }

?>

Linha 1: declaração da classe do formulário, herdando do controle Form todas as funcionalidades necessárias.

Linha 5: chama o construtor da classe pai. O parâmetro é o Caption do formulário.

Linha 6: determina as dimensões e o posicionamento do formulário (implementados via CSS). Os parâmetros são, respectivamente, a altura (height), a largura (width), o deslocamento vertical (top) e o deslocamento horizontal (left). Os deslocamentos são referentes ao canto superior esquerdo.

Linha 7-9: cria um array com os botões que serão exibidos no formulário. Neste passo estamos criando apenas um botão. Por default os botões do formulário são do tipo ‘submit’, ou seja, ao serem clicados geram um POST do formulário.

Linha 10: associa os botões ao formulário, com o método SetButtons.

Linha 11: associa um tratador de evento ao botão ‘btnHello’. Como estamos dentro de uma classe, o parâmetro ‘OnBtnHelloClick’ se refere a um método do controle-pai (parent) do botão – neste caso o próprio formulário.

Linha 12: executa o método para tratamento dos eventos, caso exista algum.

Linha 17: usa o método AddField do formulário para acrescentar um controle. Por padrão, os formulários são divididos em duas áreas: uma para os campos (fields) e uma para os botões (buttons). As duas áreas são separadas por uma linha horizontal. Assim, quando o botão for clicado, será exibido um novo campo (o label) na parte superior do formulário, acima do separador.

Passo 9 – Acrescentando campos ao formulário

Neste passo vamos acrescentar mais alguns controles (campos) ao formulário criado no passo anterior.

Alterar o arquivo “frmMain.class” dentro do diretório <miolo>/modules/helloworld/forms, com o seguinte conteúdo:

1:<?

2: class frmMain extends Form

3: {

4: function __construct()

5: {

6: parent::__construct('Hello World!');

7: $this->SetFormCSS(110,400,10,10);

8: $fields = array(

9: new TextField('myMsg','','Message',30,'Your message to the world'),

10: new TextField('myName','','Name', 20,'Your name')

11: );

12: $this->SetFields($fields);

13: $buttons = array(

14: new MButton('btnHello', 'Click Me!'),

15: );

16: $this->SetButtons($buttons);

17: $this->btnHello->attachEventHandler('click','OnBtnHelloClick');

18: $this->EventHandler();

19:	}

20:

21: function OnBtnHelloClick($sender)

22: {

23: $this->setFieldAttr('myMsg','visible',false);

24: $this->setFieldAttr('myName','visible', false);

25: $this->setFieldAttr('btnHello','visible', false);

26: $this->AddField(new Label('Hello World!'));

27: $this->AddField(new Label($this->myMsg->GetValue()));

28: $this->AddField(new Label($this->myName->GetValue()));

29: $this->AddButton(new MButton('btnBack', 'Back!'));

30: }

31: }

32:?>

Linha 8-11: cria um array com os campos que serão exibidos no formulário.

Linha 12: associa os compôs ao formulário, com o método SetFields.

Linha 23-25: Alteração dos atributos dos campos, através do método SetFieldAttr.

Linha 27-28: Adicionando campos ao formulário com o conteúdo (value) dos campos de entrada. Alternativamente poderiam ser usadas as linhas:

27: $this->AddField(new Label($this->GetFieldValue('myMsg')));

28: $this->AddField(new Label($this->GetFieldValue('myName')));

Linha 29: Adicionando um botão para reapresentar o formulário.

Shimoda

2005-01-15T03:26:00

Vilson Gartner