Início Rápido Web

2015 Release 1 Xojo, Inc.

Capítulo 1

Introdução

Bem-vindo ao Xojo, O jeito mais fácil de criar aplicativos multi-plataforma para Desktop e Web.

Sobre o Início Rápido WebBem-vindo ao Xojo, a ferramenta mais fácil para criar aplicativos Desktop e Web multi-plataformas. Xojo é feito com um rico conjunto de objetos para in-terface de usuários, uma linguagem moderna orientada a objetos, um debug-ger integrado e um compilador multi-plataforma. Juntos, eles formam o Ambi-ente de Desenvolvimento Integrado Xojo, ou IDE.

Com a IDE, você pode construir interfaces de aplicativos simplesmente ar-rastando e soltando objetos nas janelas e diálogos. Neste Início Rápido, você verá como é fácil. Xojo proporciona a você todas as ferramentas que você pre-cisa para construir praticamente qualquer aplicativo que você imaginar.

Este Início Rápido é para pessoas que são novas em programação e novas em Xojo. Ele vai lhe dar uma gentil apresentação ao ambiente de desenvolvi-mento Xojo e guia-lo através do desenvolvimento de um aplicativo desktop funcional(um web browser simples). Isso vai levar cerca de 15 a 20 minutos.

Copyright

Todo conteúdo registrado 2014 por Xojo, Inc. Todos direitos reservados. Nen-huma parte deste documento ou arquivos relacionados podem ser reproduzi-dos ou transmitidos de alguma forma, por qualquer meio (eletrônico, fo-tocópia, gravação, ou outros) sem a prévia permissão por escrito do editor.

Seção 1

INICIANDO COM XOJO

1. Baixe o instalador para o seu sistema operacional de:http://www.xojo.com/download.

2. Execute o instalador.

3. Execute o Xojo.

4. Em “Project Chooser”, selecione Desktop e clique OK.

Sobre o Início Rápido Web

2

Marcas Registradas

Xojo é uma marca registrada de Xojo, Inc.

Este livro identifica nomes de produtos e serviços conhecidos por marcas, marcas registradas ou marcas de serviço de seus respectivos titulares. Eles são usados através deste livro ape-nas de uma maneira editorial. Além disso, termos suspeitos de serem marcas, marcas registradas ou marcas de serviço foram apropriadamente capitalizados, embora Xojo Inc. não possa atestar a acuracidade desta informação. O uso de um termo neste livro não afeta a validade de qualquer marca, marca registrada ou marca de servíço. Xojo Inc. não está as-sociado com nenhum produto ou vendedor mencionado neste livro.

3

O Início Rápido usa cópias de telas capturadas das versões Win-dows, OS X e Linux de Xojo. O design da interface e o conjunto de recursos são idênticos em todas as plataformas, então, as diferenças entre as plataformas são visuais, e tem a ver com a interface gráfica do Windows, OS X e Linux.

• Negrito é usado para enfatizar a primeira vez que um termo é usado e para destacar conceitos importantes. Além disso, títu-los dos livros, como em Guia do Usuário Xojo, são em itálico.

• Quando você for instruído a escolher um ítem de menu, você verá algo como “Escolher Arquivo ↠ Novo Projeto”. Isso é equivalente a “Escolha Novo Projeto no menu Arquivo”.

• Atalhos de teclado consistem em uma sequencia de teclas que devem ser pressionadas na ordem em que são listadas. No Windows e Linux, a tecla Ctrl é a modificadora; No OS X, a ⌘ (Command) é a modificadora. Por exemplo, quando você vir o atalho “Ctrl+O” ou “⌘-O”, significa apertar a tecla Control no Windows ou Linux e pressionar a tecla “O”, ou pressionar a tecla ⌘ no OS X e pressionar a tecla “O”. Você solta a tecla modificadora apenas depois de pressionar a tecla do atalho.

• Algo que você deve digitar estará entre aspas, como “GoBut-ton”.

• Algumas etapas pedem a você para digitar no editor de códi-gos. Elas aparecem em uma caixa sombreada:

ShowURL(SelectedURL.Text)

Quando você codificar, por favor observe as orientações:

• Digite cada linha impressa em uma linha de código separada. Não tente colocar duas ou mais linhas impressas na mesma linha do editor, nem dividir uma linha longa em duas ou mais.

• Não adicione espaços extras, quando não for indicado.

• Logicamente, você também pode copiar e colar o código.

Sempre que você rodar seu aplicativo, Xojo primeiro checa erros de ortografia e sintaxe. Se a checagem resulta em erro, um painel de erro aparece na parte inferior da janela para revisão.

Seção 2

Apresentando as Convenções

4

Inicie o XojoSe você ainda não o fez, é hora de iniciar o Xojo.

1. Clique duas vezes no ícone do Xojo para iniciá-lo. Após ter-minar de carregar, o seletor de projetos aparece.

2. Xojo permite a construção de três tipos de aplicati-vos(Desktop, Web e Console). Para este Início Rápido,

você está criando um aplicativo web, portanto, clique em Web.

3. Agora você tem 3 campos para preencher: Application Name, Company Name e Application Identifier.Application Name é o nome do seu aplicativo. Será o nome do arquivo atual, quando ele for criado.Company Name é o nome da sua empresa. Você pode op-tar por deixar em branco.Application Identifier é um identificador único para o apli-cativo. Será preenchido automaticamente usando as infor-mações dos campos anteriores, mas você pode mudar para o que você quiser.Digite "MapViewer" em Application Name. Você pode aceitar o nome da empresa ou muda-lo.

4. Clique OK para abrir a janela principal do Xojo (chamada de Workspace), onde você começará a criar seu aplicativo.

Seção 3

Iniciando

5

Figure 1.1 Janela de seleção de projetos

Visão GeralXojo abre o Workspace com a janela default para o seu apli-cativo selecionada no Navegador e visível no Editor de Lay-outs.

Navegador: A área da esquerda mostra todos os ítens do seu projeto. Por default você vê a WebPage1 (que está sele-cionada), O objeto App e o objeto Session. Você usa o Nave-gador para percorrer o seu projeto.

Editor de Layout: A área central é o Editor de Layout. Você usa o Editor de Layouts para criar a interface de usuário nas janelas do seu aplicativo. Ele mostra a janela e uma prévia de como ela será quando rodar o aplicativo. Nesta ilustração, a janela está vazia porque você ainda não adicionou nenhum controle de interface com o usuário da Biblioteca.

Biblioteca: A área a direita é a Biblioteca, e mostra os contro-les e elementos de interface que você pode adicionar a janela ou ao projeto. Você desenha a janela arrastando con-troles da Biblioteca para ela. Você também pode adicionar um controle com um duplo clique.Você pode mudar como os controles aparecem na Biblioteca

clicando no ícone da pequena engrenagem e optando por outra configuração.

Seção 4

Espaço de Trabalho

6

Figure 1.2 O Workspace Xojo

Nota: Se a Biblioteca não estiver visível, clique no ícone da Biblioteca na barra de ferramentas para mostrá-la.

Inspetor: O inspetor não aparece na ilustração acima. Ele per-mite que você veja e modifique as propriedades do controle selecionado. Esta área da janela principal é compartilhada. Você pode mostrar o Inspetor, clicando no botão do inspetor na barra de ferramentas. O inspetor mostra informações so-bre o item selecionado no Navegador ou no Editor. O con-teúdo do Inspetor muda assim que você clica em diferentes ítens. Você pode mudar um valor no Inspetor digitando um novo valor a direita do nome da propriedade.

7

Capítulo 2

Aplicativo MapViewer

Aprenda a criar um aplicativo web simples, que mostra locais em um mapa.

Sobre o Aplicativo

A melhor maneira de aprender rapidamente como usar Xojo, é cri-ando um aplicativo simples. Neste Início Rápido, você vai criar um aplicativo web que mostra locais em um mapa.

Um aplicativo Xojo consiste em uma co-leção de objetos, cha-mados classes. Quase tudo em Xojo é uma classe, incluindo suas páginas web e os controles das pági-nas. No projeto MapViewer, você

usará a classe WebPage padrão para criar a sua página web e adicionar controles (classes de interface com o usuário)

para criar o design da página web.

O MapViewer usa três controles:

•TextField: Um controle Text Field é usado para entrar têxto. Neste projeto, o local a ser mostrado é digitado em um Text Field no topo da janela.

•Button: Um Web Button é usado para disparar uma ação. O usuário clica no botão para carregar o local do Text Field no Map Viewer.

•MapViewer: Um Map Viewer é usado para mostrar locais em um mapa (por trás das cenas ele usa o Google Ma-pas). neste projeto, é ele que mostra o local informado no Text Field.

A próxima seção acompanha você cri-

Seção 1

Visão Geral

9

Figure 2.1 O Aplicativo Web MapViewer Completo

ando a interface com o usuário e adicionando o código ne-cessário para o aplicativo funcionar.

10

Design da página webVocê deve ter o Xojo rodando e a WebPage1 aberta no edi-tor de Layout. Se não, por fa-vor, consulte o Capítulo 1, Seções 3 e 4.

Agora você está pronto para começar adicionando contro-les a página web.

1. Começando com o Text Field:Na Biblioteca, clique no Text Field e arraste-o para o canto superior esquerdo da página web no Editor de Layout.Quando você estiver perto

dos cantos da página, você verá indi-cadores de alinhamento que ajudam você a posicionar o controle.

2. O próximo é o Button:Na Biblioteca, clique no Button e arraste-o para o canto superior direito da página web.

3. O último controle é o Map Viewer:Arraste o Map Viewer para a área va-zia restante na página.

4. O passo final é redimensionar o Text Field para que fique mais largo. Clique nele para mostrar as guias de redimensionamento. Clique na guia central a direita e arraste para a di-reita até que a guia indique que você está perto o suficiente do Button.

Seção 2

Criando a Interface com o Usuário

11

Figure 2.2 Text Field na Biblioteca

Figure 2.3 Button na Biblioteca

Figure 2.4 Map Viewer na Biblioteca

O layout finalizado da sua página web deve ficar assim:

12

Figure 2.5 Layout da sua página web

O que é uma propriedade ?Uma propriedade é um valor de uma classe. Alterando valo-res de propriedades você pode mudar o comportamento da classe.

Neste projeto vamos alterar várias proprie-dades da página web e seus controles. Algu-mas coisas que você precisa fazer são:

• Renomear todos os controles (e a página web) para que descrevam melhor sua função e facilitem o referenciamento no código.

• Adicionar um título ao Button.

• Configurar propriedades de travamento para que os controles se redimensionem apropriadamente quando o tamanho da página web mudar.

InspetorO Inspetor é usado para alterar as proprie-

dades de janelas e controles. Ele divide a mesma área a direita da janela principal com a Biblioteca. Para mostrar o Inspetor, clique no botão Inspector na barra de ferramentas.

Seção 3

Propriedades

13

Figure 2.6 Propriedades da página web no Inspetor

Se você ainda não o fez, mostre o Inspetor, clicando no botão Inspector da barra de ferramentas.

Você precisa mudar as propriedades Name e Title:

1. Primeiro, na área de edição da página web, clique na barra de título para seleciona-la. O Inspetor agora mostra as propriedades da página web.

2. No campo Name (localizado no grupo ID), mude de “WebPage1” para “MapLocationPage”. Pressione Return para ver a mudança do nome no nave-gador.

3. No campo Title (localizado no grupo Frame), mude de “Untitled” para “Map Viewer”. Pressione Return e você verá a mudança do nome na barra de títulos da página web.

Seção 4

Propriedades da Página Web

14

Figure 2.7 Inspetor da Página Web

O Text Field é onde seu usuário vai digitar o local para mostrar. Você deve mudar as seguintes propriedades: Name e Locking.

1. Na página web, selecione o controle TextField1. O Inspetor muda para mostrar as propriedades do Text Field.

2. No campo Name, mude de “TextField1” para “Loca-tionField”. Pressione Return para ver a mudança no Navega-dor.

3. Agora você precisa alterar os bloqueios para que o Text Field aumente ou diminua seu ta-manho de acordo com as mu-danças no tamanho da página web. No grupo Locking veja a imagem que mostra a página web com pequenos ícones de cadeados fechados para o topo e a

esquerda, e abertos para parte inferior e a direita.Clique nos cadeados até que topo, esquerda e direita estejam fechados e a parte inferior aberta.

Seção 5

Propriedades do Text Field

15

Figure 2.8 Configurando os bloqueios para o LocationField

Seus usuários clicam no botão para mostrar o local. Você pre-cisa mudar estas propriedades: Name, Locking e Caption.

1. Na página web, selecione o controle Button1. O Inspetor muda para mostrar as propriedades do WebButton.

2. No campo Name, altere de “Button1” para “ShowLocation-Button”. Pressione Return para ver a mu-dança do nome no Navegador de Proje-tos.

3. Agora você precisa alterar os bloqueios para que o Botão continue fixo ao lado di-reito da página web quando ela tiver seu tamanho alterado.No grupo Locking veja a imagem que mostra a página web com pequenos ícones de cadeados fechados para o topo e a esquerda e pequenos ícones de cadeados abertos para a parte inferior e a direita.Clique nos cadeados até que o topo e a direita fiquem fechados, e a parte inferior e a esquerda fiquem abertos.

4. Por último, dê um título ao seu botão. No campo Caption (localizado no grupo Behavior), mude de “Untitled” para “Show Map”.

Seção 6

Propriedades do Botão

16

Figure 2.9 Configurações de bloqueio para o LocationButton

A última mudança na interface de usuário que você precisa fazer é no Map Viewer. Aqui você precisa alterar estas pro-priedades: Name e Locking.

1. Na Página Web, selecione o controle MapViewer1. O Inspetor muda para mostrar as propriedades do Web-MapViewer.

2. No campo Name, mude de “MapView-er1” para “LocationMap”. Pressione Re-turn para ver as mudanças no Navega-dor.

3. Finalmente, você precisa mudar os blo-queios para que o Mapa continue preenchendo a página web conforme seu tamanho muda.No grupo Locking veja a imagem que mostra a página web com pequenos ícones de cadeados fechados para o topo e a esquerda e pequenos cadeados abertos, para a parte inferior e para a direita.

Clique nos cadeados até que o topo, a parte inferior, a esquerda e a direita estejam bloqueados.

Seção 7

Propriedades do Map Viewer

17

Figure 2.10 Configuração de bloqueios para o LocationMap

Editor de CódigoSeu aplicativo está quase completo. Agora é hora de adi-cionar o código que vai dizer ao MapViewer que local mostrar. Xojo usa uma linguagem de programação orientada a objetos que é muito fácil de aprender. Você vai precisar de apenas 4 linhas de código para finalizar o projeto!

As etapas que você precisa são:

1. Saber quando um usuário clicar no botão ShowLocationButton, chamado “Show Map” na página web.

2. Pegar o local que o usuário digitar no LocationField.

3. Fazer o LocationMap mostrar o local.

Siga estes passos para adicionar o código:

1. Na página web, dê um duplo clique no controle ShowLo-cationButton, nomeado “Show Map”. A janela Add Event Handler aparece. Quando um usuário clicar em um WebButton, o código no manipulador de

eventos Action é executado.Isso significa que você precisa adi-cionar seu código no manipulador de eventos Action, então, selecione Action da lista de manipuladores de eventos e clique OK.Note que o Navegador atualiza para mostrar o evento Action abaixo do controle ShowLocationButton e o editor de códigos aparece.Este passo resolve seu primeiro problema, de saber quando um usuário clica no controle ShowLocationButton.

2. Agora você precisa pegar a localização, e existem duas etapas para isso:

Seção 8

Adicionando Código

18

Figure 2.11 Janela de adição de Manipuladores de Eventos

a. O que seu usuário digita é gravado em uma proprie-dade da classe Text Field chamada Text. Você acessa valores das propriedades informando o nome da classe, seguido de um “.” e então o nome da proprie-dade. Neste caso o Text Field é chamado de Location-Field, então você escreve: LocationField.Text

b. Você precisa converter este têxto em um local usando a classe WebMapLocation.

Estes dois passos são realizados com este código:

Dim location As New WebMapLocationlocation.Address = LocationField.Text

3. O último passo é o LocationMap mostrar o local.Isto é feito pelo chamado de dois métodos da classe: GoToLocation e AddLocationGoToLocation move o mapa para o local e AddLocation faz cair um pino no local. Seu código se parece com isso:

LocationMap.GoToLocation(location) LocationMap.AddLocation(location)

4. Agora você pode ir em frente e adicionar este código ao Editor de Códigos. Comece clicando no espaço em branco

abaixo do nome do evento Action() e então digite o código (digite ao invés de copiar e colar...):)

Dim location As New WebMapLocationlocation.Address = LocationField.TextLocationMap.GoToLocation(location)LocationMap.AddLocation(location)

É Isso! Seu primeiro aplicativo web está completo.

19

Figure 2.12 Aplicativo Web MapViewer Completo.

Salvando seu ProjetoVocê deve salvar seu trabalho periodicamente e sempre antes de executar o projeto.

1. Salve o projeto escolhendo File ↠ Save.

2. Nomeie o projeto como “MapViewer” e clique Save.

Executando seu ProjetoAgora você pode testar seu aplicativo finalizado:

1. Clique no botão RUN na barra de ferramentas para executar o projeto.O aplicativo web abre no browser default do sistema.

2. Digite um local de sua escolha, talvez sua cidade natal, e clique no botão “Show Map”.

3. Você verá um mapa do local com um alfinete fixado precisamente na localização.

4. Quando você terminar de testar o aplicativo Map Viewer, você pode fechar o browser (tab ou janela, dependendo de como ele foi carre-gado) para retornar ao Xojo.

Seção 9

E AGORA ?

O Início Rápido apresentou você ao Xojo. Você aprendeu a desenhar uma página web, adicionar controles, adicionar código e então executar o seu projeto.

Você deve agora trabalhar com o Tutorial e então explorar o Guia e a Referência de Linguagem para continuar aprendendo como criar grandes aplicativos usando Xojo.

Testando seu Aplicativo

20