Flex: também possui muitos atrativos

muitas pessoas vendo meus posts sobre OpenLaszlo pode até pensar que tenho algo contra o Adobe Flex, muito pelo contratio eu também reconheço que o Flex é uma excelente solução, algumas das capacidades dele podemos ver no respestivo [Link: FlexStyleExplorer]

OpenLaszlo: problemas com acentuação

esse é um dos casos que muitos acabam tendo problemas quando estão trabalhando com o OpenLaszlo, enquanto estão fazendo testes tudo funciona tranquilamente, mas quando começa a usar mais, com uma base de dados e surgem os tais caracteres especiais como os acentuados, ae eis que surge o problema.... no OpenLaszlo mostra normalmente uns quadrados ou até uns ? no lugar do caractere...

mas como resolver?

simples na saída da fonte do XML é preciso tratar o encoding, o .swf executado pelo plugin Flash trabalha com textos usando como base o encoding UTF-8, então é só ajustar o encoding no servidor =]

exemplos:
- PHP
$XML = "<tag>á é í ó ú ç ã õ ... </tag>"; 
echo utf8_encode( $XML );

- Java
no java tem uma característa um pouco diferente, para resolver os problemas de encoding resolvi criando 2 métodos...

String text = "<tag>á é í ó ú ç ã õ ... </tag>";

* para tratar os caracteres para enviar ao OpenLaszlo:

  public static String toISO88591(String text) throws Exception{
    byte p[] = text.getBytes("UTF-8");
    return new String(p, 0, p.length, "ISO-8859-1");
  }

* para tratar os caracteres recebidos do OpenLaszlo:

  public static String toUTF8(String text) throws Exception{
    byte p[] = text.getBytes("ISO-8859-1");
    return new String(p, 0, p.length, "UTF-8");
  }

OpenLaszlo: finalmente um livro =]

sim, enfim eis que surge um livro sobre o OpenLaszlo e nada mais nada menos que da série ... In Action =]



Manning: Laszlo in Action


sobre os autores: um deles é fundador da Laszlo Systems, empresa que criou a primeira versão do hoje então OpenLaszlo( Max Carlson ), Norman Klein um consultor da Laszlo Systems com mais de 20 anos de experiência em engenharia de software e Glenn MacEwen relacionado a universidade de Queen's University do Canada.

ps.: isso sim eu considero uma ótima notícia =]

OBS.: Ainda em fase de formulação / escrita =(, previsão de finalização para Agosto de 2007

OpenLaszlo: integração com FusionCharts

bom como sempre em aplicações soluções de gráficos são necessárias em algum momento para exibir dados de algo importante de modo que, facilite a compreenção dos mesmos...
em um post no Portal Java referente ao assunto de um usuário que não estava conseguindo
integrar o FusionCharts internamente em uma app Openlaszlo, fui verificar do que se tratava...

encontrei um tópico sobre o assunto no forum oficial do Openlaszlo: [ Embedding Fusion Charts], onde tinha um exemplo de como realizar tal integração, fiz um teste local com o OpenLaszlo 3.3.3 e verifiquei que funcionou...

ver um exemplo: [link]
download do exemplo: [link:forum] [link:alternativo]

ps.: nesse tópico do forum possui mais informações sobre o assunto, deem uma verificada =]

OpenLaszlo: outra mini aplicação voltada para o Portal Java

mais uma mini aplicação OpenLaszlo feita para o Portal Java, agora para o bloco das ultimas postagens no forum, atualização a cada 2 minutos, podendo ser configurado para o mínimo de 1 minuto, também possui a capacidade de configurar como irá abrir o link para o post, [self] ou [blank], padrão [self], tamanho da fonte padrão em 10px, mas pode ser alterado no intervalo de 9 a 12px, essa aplicação também possui uma novidade que é a tecla 'R' para atualizar os dados...

Obs.: use a tecla 'ESC' para acessar as configurações



download do fonte: [link]

OpenLaszlo: exemplo de organização de projeto

bom agora para exemplificar, já temos o exemplo da mini aplicação OpenLaszlo a qual mostra os dados do status do Portal Java.com e atualiza em certo intervalo de tempo, essa nova aplicação a interface é exatavamente a mesma, o que muda dela é a sua organização do projeto, a qual diferentemente da versão anterior que era tudo em um único .lzx, agora está separada em classes para possibilitar o reuso dos componentes gerados em outras aplicações...



como comentei, visualmente essa nova versão é exatamente igual a diferença está na forma que foi estruturada quanto ao código... compare ambas as versões para ver a estrutura...

download da versão anterior: [link]
download da versão estruturada em classes: [link]

com isso pode-se até traçar um paralelo das vantagens de uma programação mais organizada, quando se pensa em reuso, manutenção e até expansão de aplicação =]

OpenLaszlo: usando o relógio do Openlaszlo dentro de outra aplicação

Muitas pessoas já viram o relógio do OpenLaszlo que é usando na página principal do Laszlo-Explorer onde vemos esses tipo de relógio sendo usado dentro de uma aplicação OpenLaszlo, mas como fazer para usar esse relógio?


Download do exemplo: [link]

Observação: usa a classe do relógio disponível no Laszlo-Explorer, porém com uma costumização para funcionar diretamente, não fiz nenhum teste usando mais de 1 relógio na mesma aplicação...

[Código] Exemplo de uso:
<canvas
    title="Exemplo de uso do relógio OpenLaszlo">
    
    <!-- incluindo a classe -->
    <include href="class/relogio"/>
    
    <simplelayout axis="y" spacing="20"/>
    
    <clock name="myclock" local="true" x="40" />
    <text multiline="true">
        Usando o relógio do Openlaszlo<br/>
        dentro de uma outra aplicação<br/>
        OpenLaszlo...
    </text>
</canvas>

OpenLaszlo: um exemplo completo de mini aplicação

bom base no exemplo de uso do LzTimer, alguns amigos sugeriram fazer uma mini aplicação com OpenLaszlo que também listasse o login dos usuários logados no Portal Java.com e também possibilitasse algum tipo de configuração, bom estão lá vai um exemplo de mini aplicação com OpenLaszlo =]

Observação: para acessar a parte de configuração precione a tecla ESC para exibi a tela de configuração, e ESC novamente para voltar a tela com as informações... também foi definido um tempo inicial de atualização de dados em 5 minuto, possibilitando uma configuração para o valor, sendo o mínimo de 1 minuto de tempo de espera. ( A fonte de dados desse app é um .php )

* tamanho da aplicação: 104 kB


Código fonte da mini aplicação: [link]

Modelo dos XML das fontes de dados:
* ds_status
<pjonline>
   <membros>?</membros>
   <visitantes>?</visitantes>
   <total>?</total>
</pjonline>

* ds_user
<list>
   <item number="1" user="usuário A" />
   <item number="2" user="usuário B" />
   <item number="3" user="usuário c" />
   <item number="4" user="usuário D" />
   ...
</list>


OpenLaszlo: exemplo de LzTimer

um exemplo simples de como criar uma aplicação do genero Timer, para a cada intervalo de tempo realizar algum tipo de processamento, no caso este exemplo mostra o status em tempo real das pessoas que estão acessando ao Portal Java.com



Código fonte da aplicação: [link]
<canvas
    title="Portal Java Who is Online"
    width="200" proxied="false">
    
    <attribute name="flag" value="true" type="boolean" />
    
    <!-- dataset da aplicação -->
    <dataset
        name="ds"
        src="http:whoisonline.php"
        querytype="post"
        request="false"
        proxied="false"/>
    <!-- trata o evento de recebimento de dados pelo dataset -->    
    <handler reference="ds" name="ondata"><![CDATA[
        // verifica o tratamento de tempo para executar a cada 1 segundo
         if( typeof this.del == "undefined" ) {
            this.del = new LzDelegate( this, "atualizaInfo" );
            LzTimer.addTimer( this.del, 1000 );
        } else {
            LzTimer.resetTimer( this.del, 1000 );
        }
    ]]></handler>    
    <!-- método que trata a inicialização da aplicação -->
    <method name="init"><![CDATA[
        this.atualizaInfo();
    ]]></method>
    <!-- método para atualizar -->
    <method name="atualizaInfo"><![CDATA[
        if( this.flag ) {
            // requisita os dados para o servidor
            this.ds.doRequest();
        }
    ]]></method>    
    <!-- @BEGIN: definição visual -->
    <simplelayout axis="y" spacing="5"/>
    <text><u><b> Pessoas on-line: </b></u></text>
    <view>
        <text>Membros: </text>
        <text x="65" datapath="ds:/pjonline/membros/text()"/>
    </view>
    <view>
        <text>Visitantes: </text>
        <text x="65" datapath="ds:/pjonline/visitantes/text()"/>
    </view>
    <view>
        <text>Total: </text>
        <text x="65" datapath="ds:/pjonline/total/text()"/>
    </view>
    
    <button x="20" name="btn" text="Parar">
        <handler name="onclick"><![CDATA[
            if( canvas.flag ) {
                canvas.btn.setAttribute( "text", "Atualizar" );
                canvas.flag = false;
            } else {
                canvas.btn.setAttribute( "text", "Parar" );
                canvas.flag = true;
                canvas.ds.doRequest();
            }
        ]]></handler>
    </button>
    <!-- @END: definição visual -->    
</canvas>

Formato do XML recuperado com as informações:
<pjonline><membros>4</membros><visitantes>185</visitantes><total>189</total></pjonline>


Linux time line

bom a título de curiosidade uma imagem interessante relacionado as distros linux existentes até o ano de 2006

OpenLaszlo: exemplo de campo com Mascara

algo útil e que normalmente iremos nos deparar é com a necessidade de um campo com mascara para entrada de data, hora, CEP, CPF, entre outros tipos de entradas formatadas...

neste exemplo é um bem simples de como implementar um campo de mascara para CPF
onde a mascara é: xxx.xxx.xxx-xx, porém este exemplo não trata a entrada de teclado a qual também poderia ser incluída de modo simples


[Fonte]

<canvas width="200">
<view width="115" height="20" bgcolor="gray">
        <inputtext
            name="field"
            bgcolor="white"
              x="1" y="1"
              width="$once{parent.width-2}"
              height="$once{parent.height-2}" maxlength="14">
              
              <method name="init"><![CDATA[
                  super.init();
              ]]></method>
              <method event="onkeydown" args="akeycode"><![CDATA[
                Debug.write( String.fromCharCode(akeycode) + " : " + akeycode + " >> " + this.getText() );
                
                // tecla backspace
                if( akeycode != 8 ) {
                    
                    switch( this.getText().length ) {
                        case 3:
                            this.addText( "." );
                            break;
                        case 7:
                            this.addText( "." );
                            break;
                        case 11:
                            this.addText( "-" );
                            break    
                    }
                var lastP = this.getText().length;
                this.setSelection( lastP, (lastP+1) );                  
                }           
                ]]></method>
              <!-- @END: métodos do inputtext -->
          </inputtext>
</view>
</canvas>

OpenLaszlo vs Flex: Hello World

um teste por curiosidade entre OpenLaszlo e Flex no famoso programa Hello World, gerando um binário .swf em ambos para ver o tamanho do binário resultante( apenas a título de curiosidade )

OpenLaszlo:
<canvas>
    <text>Hello World!</text>
</canvas>
.swf = 72 KB

Flex:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Text x="10" y="10" text="Hello World"/>
</mx:Application>
.swf = 115 KB Õo

ambos usando o formato genérico de código sem agregar nada além do famoso texto "Hello World" na aplicação... incrível a diferença de tamanho entre ambos.

Nota: resolvi fazer o mesmo teste que foi descrito no [blog]

OpenLaszlo: distribuição SOLO

Muitos perguntam como integrar o OpenLaszlo a outras tecnologias Web, até mesmo se perguntam se isso é possível, sim é possível integrar uma aplicação OpenLaszlo com uma aplicação PHP no próprio servidor PHP, ou com ASP, no servidor IIS, ou com .NET em um servidor .NET, usando a distribuição da aplicação chamada de SOLO, que gera uma saída como muitos costuma a se referir: "como a do Flex"

SOLO > Standalone OpenLaszlo Output

mais informações ver os links:
SOLO is simple
SOLO is simple, part two
Chapter 22. Proxied and SOLO Applications
Passing Parameters to SOLO applications

OpenLaszlo: achei um lugar onde tem o antigo plugin IDE4Laszlo

Para o pessoal que estava acessando o site do Eclipse e não encontrava o plugin IDE4Laszlo, hoje lendo um material sobre OpenLaszlo achei um link para o local que mantem o antigo plugin do IDE4Laszlo...

Laszlo Ide for Eclipse

veja também um tutorial introdutório sobre OpenLaszlo( em inglês )[link], relativamente atual esse tutorial: 11 de Outubro de 2006

OpenLaszlo: usar Include ou Import, qual a diferença?

Algo interessante relacionado ao OpenLaszlo na hora de desenvolver aplicações mais otimizadas está relacionado no uso das referentes tags: include ou import ambas possuem a mesma finalidade de incluir um recurso, ou .lzx, para ser utilizado na aplicação OpenLaszlo, porém a tag include irá incluir o recurso, ou as classes no tempo de compilação, caso seja uma aplicação SOLO irá compilar tudo para um único binário final .swf, caso seja utilizado a tag import, essa tag irá incluir o recurso em runtime, caso em uma aplicação SOLO irá gerar mais de um SWF final, um .swf da parte principal da aplicação e outros .swf dos recursos e classes, utilizando dessa forma otimizamos de certa forma a performance e uso dos recursos e classes, reduzindo o tamanho inicial do swf carregado na máquina do usuário, com isso reduzindo o tempo de acesso à aplicação...

ver os respectivos links sobre o assunto:
performance-tuning
tag import
tag include
SOLO is simple, part two
Import Statement
Dynamic Libraries
Chapter 14. Program Structure

OpenLaszlo: tags Canvas e Library

uma das grandes dúvidas das pessoas que começam a utilizar o OpenLaszlo é quanto ao uso das respectivas tags: canvas e library

de forma análoga...

- Tag canvas:
comparado com o java seria como o método de execução public static void main, em outras palavras é o ponto de execução da aplicação, desenho, apresentação da aplicação e execução das classes... Obs.: um .lzx pode ter apenas uma única tag canvas

- Tag library:
é utilizado para os demais arquivos .lzx onde dentro desta tag serão alocados as classes de funcionalidades desenvolvidas para a aplicação, ou mesmo rotinas de códigos que poderão ser reutilizadas n vezes dentro da aplicação, ou mesmo, em outras novas aplicações no intuito de reduzir o tempo de desenvolvimento de novas aplicações...

OpenLaszlo: trabalhando com Classes

uma das grandes vantagens no OpenLaszlo que também foi um dos motivos do meu interesse inicial por esta tecnologia VIEW, foi o fato de ter sido anunciado que era capaz de programar um interface de aplicação web usando conceitos de POO, isso mesmo, o paradigma que o pessoal do java e outras linguagens Orientada a Objetos estão acostumados, no caso classes, herança e outras funcionalidade...

nesse post o foco são as classes, o OpenLaszlo te possibilita organizar a sua aplicação em classes aumentando ao máximo a reusabilidade de código, sendo uma classe alguma funcionalidade de processamento, ou então uma classe que represente um componente visual costumizado como um novo botão, ou mesmo tela de formulário genércio que pode ser muitas vezes reaproveitados no mesmo sistema, ou melhor ser utilizado como base para novos sistemas reduzindo o tempo gasto no desenvolvimento...

Obs.: o OpenLaszlo disponibiliza um conjunto muito grande de classes, tanto de componentes quanto de funcionalidades prontas para uso, porém em se tratando de interface para as quais estamos acostumados, lembrando o genero de interface de aplicações desktop notamos que os componentes disponibilizados pelo OpenLaszlo são genericos, tem como utiliza-los para sistemas simples, mas quando formos trabalhar com aplicações de verdade iremos nos deparar com a necessidade de desenvolver o nosso proprio conjunto de componentes padrão que usamos em aplicações, como por exemplo um campo com formatação de texto, numério, ou mesmo um campo de CPF com validação do CPF digitado... com isso fica uma dica, avalie e liste os componentes que normalmente se utiliza e gaste um tempo desenvolvendo o seu próprio conjunto de componentes visando a reusabilidade para reduzir o tempo gasto futuramente, tornando a montagem da interface como "brincar de lego", declarar as tags das classes dos componentes, ajustar e pronto temos uma nova interface.

Classe
[link: guia de referência]
[link: documentação]

Herança
Outro ponto importante no OpenLaszlo é o fato de suportar herança isso ajuda muito, digamos que você desenvolva seus componentes genéricos iniciais, mas futuramente em um caso de uso, existe a necessidade de um componente mais especializado, não tem problema basta herdar a sua classe existente e codificar as especializações para o novo componente

*** Exemplo *** [link]

O problema: famosa repetição de código

<canvas width="200">
   <simplelayout spacing="5"/>
   <view height="100" width="100" bgcolor="red"/>
   <view height="100" width="100"    bgcolor="red"/>
   <view height="100" width="100" bgcolor="red"/>
</canvas>

A solução: definir uma classe e reutilizar

<canvas width="200">
   <simplelayout spacing="5"/>
   <class name="box" height="100" width="100" bgcolor="red"/>
   <box/>
   <box/>
   <box/>
</canvas>

Herança: reusabilidade e especialiação

<canvas width="200">
   <simplelayout spacing="5"/>
   <class name="box" height="100" width="100" bgcolor="red"/>
   <class name="borderedbox" extends="box">
      <view bgcolor="yellow"
         x="3" y="3"
         width="${parent.width-6}"
         height="${parent.height-6}"/>
   </class>
   <borderedbox/>
   <borderedbox/>
   <borderedbox/>
</canvas>

ver na documentação oficial:
capítulo 25 - classes
capítulo 30 - extendendo classes

OpenLaszlo: como intergrar em um HTML ?

outra duvida que vejo o pessoal um pouco perdido é como integrar o OpenLaszlo com o HTML, sendo este gerado por um .jsp, .asp, .php ou qq outra tecnologia web...

lembrando que o OpenLaszlo na versão 3.x ele disponibiliza 2 formas de publicar uma aplicação desenvolvida com o OpenLaszlo:

- Proxied : a qual utiliza um suporte no server-side de libs e java
- SOLO : essa é similar, ou até digamos que a mesma modalidade utilizada pelo Flex, no qual você irá gerar um .SWF da aplicação e disponibilizar em qualquer servidor web de qualquer tecnologia de sua preferência...

* agora como fazer para integrar?

existem 2 formas de fazer isso, uma é utilizando a tag para integrar um .swf em um HTML, como no exemplo a seguir:

<object type="application/x-shockwave-flash"
      data="suaAplicacao.lzx?lzt=swf&debug=false&lzr=swf7"
      width="800" height="100%">
   <param name="movie" value="suaAplicacao.lzx?lzt=swf&debug=false&lzr=swf7" />
   <param name="quality" value="high" />
   <param name="scale" value="noscale" />
   <param name="salign" value="LT" />
   <param name="menu" value="false" />
</object>

ou então usando o suporte javascript da plataforma OpenLaszlo que irá gerar isso por trás e exibir sua aplicação dentro de um HTML, onde é necessário incluir o javascript:

<script src="/NomeAplicacao/lps/includes/embed.js" type="text/javascript"></script>

e no local onde for exibir a aplicação inserir o respectivo script:

<script type="text/javascript">
   lzEmbed({url: 'suaAplicacao.lzx?lzt=swf&debug=false&lzr=swf7', bgcolor: '#ffffff', width: '800', height: '100%', id: 'lzapp', accessible: 'false'});
</script>

outras informações podem ser vistas nesse [link]

ver capítulo 32 da documentação oficial: Integração com o Browser

OpenLaszlo: sessionrpc

Voltando ao assunto de sessões com o OpenLaszlo, uma funcionalidade legal para trabalhar com sessões que o OpenLaszlo disponibiliza é a tag sessionrpc

Obs.: porém esta é relacionado a um suporte java no lado do servidor, pelo menos em suma pelo que compreendi, de acordo com o especificado no guia de referência da documentação oficial do OpenLaszlo [link: sessionrpc]

Exemplo: [link]
Código fonte: [link]

OpenLaszlo: uma aplicação de e-learning

navegando no forum oficial do OpenLaszlo vi uma aplicação muito interessante
feita com Openlaszlo de ensino...

segue o [link]

post no forum do OpenLaszlo [link], outras implementações feitas pela mesma empresa [link]

Obs.: grupo de designers Chineses

agora uma aplicação que eles fizeram de exemplo na modalidade que vem sendo debatida nas web o chamado Webtop [link], minha opinião sobre esta, ficou muito impressionante o resultado da aplicação...

outras aplicações feitas com OpenLaszlo:
- no forum [link]
- no wiki [link]