Início Rápido Web Release 1 Xojo, Inc.

Transcrição

1 Início Rápido Web 2015 Release 1 Xojo, Inc.

2 Capítulo 1 Introdução Bem-vindo ao Xojo, O jeito mais fácil de criar aplicativos multi-plataforma para Desktop e Web.

3 Seção 1 Sobre o Início Rápido Web INICIANDO COM XOJO 1. Baixe o instalador para o seu sistema operacional de: 2. Execute o instalador. 3. Execute o Xojo. 4. Em Project Chooser, selecione Desktop e clique OK. Sobre o Início Rápido Web Bem-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 interface de usuários, uma linguagem moderna orientada a objetos, um debugger integrado e um compilador multi-plataforma. Juntos, eles formam o Ambiente de Desenvolvimento Integrado Xojo, ou IDE. Com a IDE, você pode construir interfaces de aplicativos simplesmente arrastando 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ê precisa 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 desenvolvimento 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. Nenhuma parte deste documento ou arquivos relacionados podem ser reproduzidos ou transmitidos de alguma forma, por qualquer meio (eletrônico, fotocópia, gravação, ou outros) sem a prévia permissão por escrito do editor. 2

4 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 apenas 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á associado com nenhum produto ou vendedor mencionado neste livro. 3

5 Seção 2 Apresentando as Convenções O Início Rápido usa cópias de telas capturadas das versões Windows, 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ítulos 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 GoButton. Algumas etapas pedem a você para digitar no editor de códigos. 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. 4

6 Seção 3 Iniciando Inicie o Xojo Se você ainda não o fez, é hora de iniciar o Xojo. 1. Clique duas vezes no ícone do Xojo para iniciá-lo. Após terminar de carregar, o seletor de projetos aparece. Figure 1.1 Janela de seleção de projetos 2. Xojo permite a construção de três tipos de aplicativos(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 optar por deixar em branco. Application Identifier é um identificador único para o aplicativo. Será preenchido automaticamente usando as informaçõ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. 5

7 Seção 4 Espaço de Trabalho Visão Geral Xojo abre o Workspace com a janela default para o seu aplicativo selecionada no Navegador e visível no Editor de Layouts. Figure 1.2 O Workspace Xojo Navegador: A área da esquerda mostra todos os ítens do seu projeto. Por default você vê a WebPage1 (que está selecionada), O objeto App e o objeto Session. Você usa o Navegador 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 controles e elementos de interface que você pode adicionar a janela ou ao projeto. Você desenha a janela arrastando controles 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 por outra configuração. e optando 6

8 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 permite 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 sobre o item selecionado no Navegador ou no Editor. O conteú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

9 Capítulo 2 Aplicativo MapViewer Aprenda a criar um aplicativo web simples, que mostra locais em um mapa.

10 Seção 1 Visão Geral Sobre o Aplicativo A melhor maneira de aprender rapidamente como usar Xojo, é criando 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 coleção de objetos, chamados classes. Quase tudo em Xojo é uma classe, incluindo suas páginas web e os controles das páginas. 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. Figure 2.1 O Aplicativo Web MapViewer Completo 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 Mapas). neste projeto, é ele que mostra o local informado no Text Field. A próxima seção acompanha você cri- 9

11 ando a interface com o usuário e adicionando o código necessário para o aplicativo funcionar. 10

12 Seção 2 Criando a Interface com o Usuário Design da página web Você deve ter o Xojo rodando e a WebPage1 aberta no editor de Layout. Se não, por favor, consulte o Capítulo 1, Seções 3 e 4. Figure 2.2 Text Field na Biblioteca dos cantos da página, você verá indicadores 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. Figure 2.3 Button na Biblioteca Agora você está pronto para começar adicionando controles 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 3. O último controle é o Map Viewer: Arraste o Map Viewer para a área vazia 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 direita até que a guia indique que você está perto o suficiente do Button. Figure 2.4 Map Viewer na Biblioteca 11

13 O layout finalizado da sua página web deve ficar assim: Figure 2.5 Layout da sua página web 12

14 Seção 3 Propriedades O que é uma propriedade? Uma propriedade é um valor de uma classe. Alterando valores de propriedades você pode mudar o comportamento da classe. Neste projeto vamos alterar várias propriedades da página web e seus controles. Algumas 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. Inspetor Figure 2.6 Propriedades da página web no Inspetor O Inspetor é usado para alterar as propriedades 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. 13

15 Seção 4 Propriedades da Página Web 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. Figure 2.7 Inspetor 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 navegador. 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. 14

16 Seção 5 Propriedades do Text Field O Text Field é onde seu usuário vai digitar o local para mostrar. Você deve mudar as seguintes propriedades: Name e Locking. 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. 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 LocationField. Pressione Return para ver a mudança no Navegador. 3. Agora você precisa alterar os bloqueios para que o Text Field aumente ou diminua seu tamanho de acordo com as mudanç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 Figure 2.8 Configurando os bloqueios para o LocationField 15

17 Seção 6 Propriedades do Botão Seus usuários clicam no botão para mostrar o local. Você precisa 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. 4. Por último, dê um título ao seu botão. No campo Caption (localizado no grupo Behavior), mude de Untitled para Show Map. 2. No campo Name, altere de Button1 para ShowLocation- Button. Pressione Return para ver a mudança do nome no Navegador de Projetos. Figure 2.9 Configurações de bloqueio para o LocationButton 3. Agora você precisa alterar os bloqueios para que o Botão continue fixo ao lado direito 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. 16

18 Seção 7 Propriedades do Map Viewer A última mudança na interface de usuário que você precisa fazer é no Map Viewer. Aqui você precisa alterar estas propriedades: Name e Locking. Clique nos cadeados até que o topo, a parte inferior, a esquerda e a direita estejam bloqueados. 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 MapViewer1 para LocationMap. Pressione Return para ver as mudanças no Navegador. Figure 2.10 Configuração de bloqueios para o LocationMap 3. Finalmente, você precisa mudar os bloqueios 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. 17

19 Seção 8 Adicionando Código Editor de Código Seu aplicativo está quase completo. Agora é hora de adicionar 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 ShowLocationButton, 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 adicionar seu código no manipulador de eventos Action, então, selecione Action da lista de manipuladores de eventos e clique OK. Figure 2.11 Janela de adição de Manipuladores de Eventos 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: 18

20 a. O que seu usuário digita é gravado em uma propriedade 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 propriedade. Neste caso o Text Field é chamado de LocationField, 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 WebMapLocation location.address = LocationField.Text 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 WebMapLocation location.address = LocationField.Text LocationMap.GoToLocation(location) LocationMap.AddLocation(location) É Isso! Seu primeiro aplicativo web está completo. Figure 2.12 Aplicativo Web MapViewer Completo. 3. O último passo é o LocationMap mostrar o local. Isto é feito pelo chamado de dois métodos da classe: GoToLocation e AddLocation GoToLocation 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 19

21 Seção 9 Testando seu Aplicativo 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. Salvando seu Projeto Você 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 Projeto Agora 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 carregado) para retornar ao Xojo. 20