Guides

Criação de aplicações a partir de templates Luar

1. Introdução

Como todo sistema de processamento de templates, o Luar possui uma linguagem e um processador de templates. Neste tutorial apresentaremos alguns conceitos básicos do sistema, o processador e a linguagem Luar.

A seguir abordaremos detalhadamente os primeiros passos para utilização do sistema.

2. Criação de Projeto

A utilização do sistema inicia-se com a criação de um projeto Luar realizado pelo comando:

luar create-project nome_do_projeto

Após criado é possível visualizar a estrutura de diretórios como a seguir:

nome_do_projeto/ |-- main.luar |-- media | |-- audio | |-- image | |-- lua | |-- ncl | |-- others | |-- text | `-- video
`-- target

O arquivo main.luar é onde desenvolvemos as aplicações e especificamos os templates a serem utilizados. Este é o arquivo que é processado pelo sistema para geração do código NCL final.

O diretório media é o local onde deve ser colocado as mídias, os subdiretórios são respectivos ao tipo de mídia.

O target é o diretório onde será gerado o código NCL final.

3. Linguagem Luar

Com o objetivo de facilidade de aprendizagem e desenvolvimento pelos desenvolvedores NCL, a linguagem Luar possui uma sintaxe simples, sendo concebida com intuito de embutir a linguagem Lua em código NCL. Esta abordagem é similar a do Lua Server Pages, o que muda é que ao invés embutir Lua em HTML, Luar o faz em NCL. A linguagem Lua é embutida no código NCL como scriptlets, pequenos trechos de código entre as tags delimitadoras <% código Lua >. Assim o desenvolvedor não necessita aprender uma nova sintaxe, apenas misturar as duas por meio da tag < %>. O código abaixo apresenta parte do código de um passador de slides NCL.

<body>
  <port id="pStart" component="slide1"/>
  <%
    for i=1, #slides do
      print('<media id="slide'..i..'" src="'..slides[i]..'" descriptor="dSlide"/>')
    end
  %>

O código da acima é um exemplo simples da linguagem Luar. A primeira e a segunda linha possuem código NCL, sendo criada uma porta para inicialização da aplicação pela mídia “slide1”. O código de um slide e seu funcionamento de passar e voltar são comuns a todos. No desenvolvimento utilizando NCL diretamente, o desenvolvedor provavelmente copiaria e colaria o mesmo trecho de código para cada slide e trocaria alguns atributos.

Nas linhas 3 até 7 temos um scriptlet Lua. O código apresenta um laço de repetição com a quantidade de repetições de acordo com o número de slides desejado pelo utilizador do template. A linha 5 cria a media que representará cada slide, definindo o atributo “id” com numeração de acordo com a ordem passada pelo utilizador e o atributo “src” indicando o caminho do arquivo que representa o slide. No mesmo contexto ainda existem scriptlets para gerar o código de passar e voltar slides causando uma grande economia de código.

A autoria de documentos NCL com Luar pode ser realizada de três formas distintas: usando templates completos, templates componentes e sem uso de templates. O passador de slides apresentado nesta seção é um exemplo de desenvolvimento sem uso de templates. Nas próximas seções serão apresentadas a outras duas formas distintas de autoria.

4. Utilização de Templates Completos

Os templates completos geram uma aplicação completa bastando apenas o preenchimento de alguns dados. O template LSlideShow é um exemplo de template completo que é capaz de gerar um documento NCL para apresentação de slides, bastando apenas à indicação dos arquivos de mídia que representam os slides. O preenchimento dos dados é realizado no documento main.Luar. O código a seguir apresenta um exemplo da instanciação do template LSlideShow.

<%
  slides = {
    "image1.png",
    "paisagem.png",
    "animal.png",
  }
  includeTemplate('LSlideShow')
%>

A utilização de um template completo é simples, definida em um scriptlet Luar. O autor do documento especifica os dados do template, como acontece nas linhas 2 até 6 do código acima, e indica qual o template deseja utilizar. A linha 7 mostra a função utilizada para indicar o template desejado.

Os atributos a serem preenchidos de cada template são listados com o comando:

luar list-attributes nome_do_template

Exemplo:

luar list-attributes LSlideShow

Para saber quais templates completos o sistema possui deve ser digitado o comando:

luar list-templates

5. Utilização de Templates Componentes

Na engenharia de software, componentes são elementos de software independentes que podem ser reunidos para formar um sistema complexo.

A partir dessa ideia foi criado o conceito de templates componentes. Durante a autoria de um documento NCL o autor pode utilizar os templates de componentes para adicionar código que representa partes da aplicação, por exemplo, grupo de botões, teclado virtual, formulário, widget, passador de imagens e outros.

O documento NCL pode ser composto por vários templates componentes, com a inclusão destes templates em qualquer parte do código NCL. A seguir é apresentado um trecho de código NCL com inclusões de templates componentes.

<body>
  <port id="pStart" component="sidebar"/>
  <link id="lkStartApp" xconnector="onBeginStart">
    <bind role="onBegin" component="sidebar"/>
    <bind role="start" component="botoes"/>
  </link>
  <%
    id="sidebar" 
    relative=true
    leftLS={image="esquerda.png", width=20, height=100}
    rightLS={image="direita.png", width=20, height=100}
    includeComponent('LSidebar')
  %>
  <%
    width=24
    height=45
    x=10
    y=50
    padding=6
    button={}
    button.width=82
    button.height=17
    button[1] = {unselected="botao.png", selected="botao_selecionado.png", start="noticias", label={text="Notícias",size=14,font="Vera",position="center", color={0,0,0,255}}}
    button[2] = {unselected="botao.png", selected="botao_selecionado.png", start="estadios", label={text="Estádios",size=14, font="Vera",position="center", color={0,0,0,255}}}
    button[3] = {unselected="botao.png", selected="botao_selecionado.png", start="agenda", label={text="Agenda da Copa",size=14, font="Vera",position="center", color={0,0,0,255}}}
    button[4] = {unselected="botao.png", selected="botao_selecionado.png", start="fotos", label={text="Galeria de Fotos",size=14, font="Vera",position="center", color={0,0,0,255}}}
    relative=true
    id="botoes" 
    includeComponent('LButtonGroup')
  %>

No exemplo acima é possível observar a inclusão de dois templates componentes, o LSidebar, que cria barras laterais na aplicação, e o LButtonGroup, que gera um grupo de botões. A forma de inclusão de um template componente no código é similar aos templates completos. A diferença está na função de inclusão apresentada nas linhas 12 e 29.

Existe outro detalhe nessa abordagem de desenvolvimento que deve ser levado em consideração. Os templates são tratados como objetos de mídia, e possui obrigatoriamente um identificador “id” para manipulação dos seus estados. Necessariamente um template componente precisa ao mínimo ser iniciado (start) e parado (stop) em algum instante, assim como os objetos de mídia. O template componente ao ser criado deve levar em consideração esse detalhe de autoria.

Na linha 2 podemos observar a porta “pStart” iniciando o componente “sidebar”, exemplo de como um template componente é tratado como um objeto de mídia.

Este modelo de autoria bem como o sem utilização de templates, permite que seja adicionado à linguagem Lua em qualquer documento NCL. Esta adição de Lua ao NCL por meio de Luar o transforma em um documento Luar que pode ser processado e transformado em um documento NCL.

Para saber quais templates componentes o sistema possui deve ser digitado o comando:

luar list-components

6. Geração de Código NCL da Aplicação

Após a conclusão da autoria de um documento Luar, o autor deve solicitar o processamento do mesmo digitando no diretório raiz do projeto Luar o comando:

luar generate-app

O sistema fará o processamento do documento main.luar gerando o código NCL e copiando as mídias no diretório target.