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

Transcrição

1 Início Rápido Desktop 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 para Desktop 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 para Desktop 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 seletora 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 desktop, portanto, clique em Desktop. 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 "SimpleBrowser" 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 Window1 (que está selecionada), O objeto App e o objeto MainMenuBar. 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 e optando por outra configuração. Nota: Se a Biblioteca não estiver visível, clique no ícone da Biblioteca na barra de ferramentas para mostrá-la. 6

8 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 Browser Simples Aprenda como criar um aplicativo simples de Web Browser.

10 Seção 1 Visão Geral Sobre o Aplicativo A melhor maneira de aprender rápido como usar o Xojo, é criando um aplicativo. Para este Início Rápido, você vai criar um web browser simples. Um aplicativo Xojo consiste de uma coleção de objetos, chamados classes. Quase tudo em Xojo é uma classe, incluindo suas janelas e seus controles. No projeto Simple- Browser, você vai usar a classe Window default para criar a sua janela e adicionar controles (classes de interface com o usuário) a janela para criar o design. O aplicativo usa três controles: Text Field: Um controle Text Field é usado para digitar têxto. neste projeto, a URL a ser mostrada é digitada em um Text Field no topo da janela. Figure 2.1 O aplicativo Simple Web Browser completo Button: Um Button(botão) é usado para disparar uma ação. O usuário clica no botão para carregar a URL digitada no HTML Viewer. HTML Viewer: Um HTML Viewer(visualizador HTML) é usado para mostrar HTML (uma página web). Neste projeto, é ele que irá mostrar o site digitado na URL. As próximas seções guiarão você através da criação da interface e adição do código necessário para fazer o aplicativo funcionar. 9

11 Seção 2 Construindo a Interface do Usuário Desenhando a Janela Você deve ter o Xojo rodando e a Window1 aberta no Editor de Layout. Se não, por favor consulte Prefácio, Seções 3 e 4. Agora você está pronto para iniciar, adicionando controles a janela: 1. Comece com o Text Field: Na Biblioteca, clique no ícone Text Field e arraste-o para o canto superior esquerdo da janela no editor de layouts. Quando você estiver perto das bordas, você verá indicadores de alinhamento que ajudam a posicionar o controle. 2. O próximo é o Button: Figure 2.2 Usando um Text Field da Biblioteca na Biblioteca, clique no ícone Default Button e arraste-o para o canto superior direito da janela. 3. O controle final é o HTML Viewer: Arraste o ícone do HTML Viewer para a área vazia que resta na página (você pode ter que rolar os controles para baixo para vê-lo). Redimensione o controle (usando as alças de seleção para que ele preencha a maior parte da janela abaixo do Text Field e Button). Figure 2.3 Escolha HTMLViewer na Biblioteca 4. O passo final é redimensionar o Text Field de modo que cresça. Clique nele para que mostre as alças de seleção. Clique na alça central direita e arraste para a direita, até que a guia de alinhamento informe que está perto o bastante do Botão. 10

12 Seu layout finalizado da janela, deve parecer assim: Figure 2.4 Layout finalizado 11

13 Seção 3 Propriedades O que é uma Propriedade? Uma propriedade é um valor de uma classe. Mudando valores de propriedades, você consegue mudar o comportamento de uma classe. clique no botão do inspetor na barra de ferramentas ou pressione -I (Ctrl+I no Windows e Linux). Para este projeto, você quer mudar várias propriedades da janela e seus contoles. Algumas das coisas que você precisa fazer são: Renomear todos os controles (e a janela) para que descrevam melhor o seu comportamento e sejam fáceis de entender no código. Adicionar título ao botão. Definir propriedades de bloqueio, assim os controles serão redimensionados apropriadamente quando a janela tiver seu tamanho alterado. Inspetor O Inspetor é usado para mudar as propriedades da janela e dos controles. Ele compartilha a mesma área a direita da janela principal com a Biblioteca. A fim de mostrar o Inspetor, 12

14 Seção 4 Propriedades da Janela Se você já não tiver feito, mostre o Inspetor clicando no botão do Inspetor na barra de ferramentas. Você precisa mudar as propriedades Name e Title: Figure 2.5 Janela do Inspetor 1. Primeiro, no Editor de Layouts, clique no título da janela para seleciona-lo. O Inspetor agora mostra as propriedades da janela. 2. Em Name field (localizado no grupo ID), mude o nome de Window1 para BrowserWindow. Pressione Return para ver o nome mudar no Navegador. 3. Em Title field (localizado no grupo Frame), mude o nome de Untitled para Web Browser. Pressione Return e você vai ver a mudança do nome na barra de título da janela. 13

15 Seção 5 Propriedades do Text Field O Text Field é onde seu usuário irá digitar a URL que ele quer ver no browser. Você deve mudar as seguintes propriedades: Name e Locking parte inferior e a direita. Clique nos cadeados para que topo, esquerda e direita sejam bloqueados e a parte inferior fique liberada. 1. Na janela, selecione o controle TextField1. O Inspetor muda para mostrar as propriedades do Text Field. 2. No campo Name, mude de TextField1 para o nome AddressField. Pressione Return para ver a mudança do nome no Navegador. 3. Agora você precisa alterar os bloqueios(locking) para que o Text Field cresça ou diminua conforme a janela for redimensionada. No grupo Locking veja a imagem que mostra a janela com cadeados fechados para o topo e a esquerda e pequenos cadeados abertos para a Figure 2.6 Bloqueios para o controle AddressField 14

16 Seção 6 Propriedades do Button Seus usuários clicam no botão para mostrar a página web. Você precisa mudar as propriedades: Name, Locking e Caption. 1. Na window, selecione o controle PushButton1. O Inspetor muda para mostrar as propriedades do botão. Clique nos cadeados para que o topo e direita fiquem bloqueados, e parte inferior e esquerda fiquem liberados. 4. Por fim, você quer dar um título ao seu botão. No campo Caption (localizado no grupo Behavior), mude de OK para Go. 2. No campo Name, mude de PushButton1 para GoButton. Pressione Return para ver a mudança do nome no Navegador. 3. Você precisa mudar os bloqueadores para que o botão continue fixo ao lado direito da janela quando ela for redimensionada. No grupo Locking veja a imagem que mostra a janela com pequenos cadeados fechados para o topo e esquerda e abertos para parte inferior e direita. Figure 2.7 Bloqueios para o GoButton 15

17 Seção 7 Propriedades do HTML Viewer A última mudança na interface que você precisa fazer é no HTML Viewer. Aqui você precisa mudar estas propriedades: Name e Locking Clique nos cadeados, até que todos os lados fiquem bloqueados. 1. Na window, selecione o controle HTMLViewer1. O Inspetor muda para mostrar as propriedades do HTML Viewer. 2. No campo Name, mude de HTMLViewer1 para Web- Viewer. Pressione Return para ver a mudança do nome no Navegador. 3. Finalmente, você precisa mudar os bloqueios, para que o HTML Viewer continue preenchendo a janela quando ela for redimensionada. No grupo Locking veja a imagem que mostra os cadeados bloqueados para topo e esquerda, e liberados para parte inferior e direita. Figure 2.8 Bloqueios para o WebViewer 16

18 Seção 8 Adicionando Código Editor de Códigos Seu aplicativo está quase completo. Agora é hora de adicionar o código que dirá ao HTML Viewer que página web exibir. Xojo usa uma linguagem de programação orientada a objeto que é bastante fácil de aprender. Você precisa apenas de uma linha de código para finalizar seu projeto! Os passos que você tem que seguir são: 1. Descobrir quando seu usuário clica no GoButton, chamado de Go na janela. 2. Obter a URL que seu usuário digita em AddressField. 3. fazer o WebViewer mostrar o site. Siga estes passos para adicionar código: 1. Na janela dê um duplo clique no contole GoButton, nomeado Go. A janela Add Event Handler aparece. Quando um usuário clica em um botão, seu aplicativo executa qualquer código no manipulador de eventos Action. Isto significa que você quer adicionar seu código no manipulador de eventos Action, então selecione Action da lista Event Handler e clique OK. Note que o Navegador atualiza para mostrar o evento Action sob o Figure 2.9 Janela para adicionar manipulação de eventos (Event Handler) controle GoButton e o Editor de Códigos aparece. Este passo resolve o seu primeiro problema, de como saber quando o usuário clica no botão GoButton. 2. Agora você precisa obter URL que o usuário digita. O valor que um usuário digita em um Text Field é gravado na propriedade Text do Text Field. Você acessa a propriedade Text desta forma: 17

19 AddressField.Text 3. O último passo é ter o WebViewer mostrando a página web. Isto é feito chamando o método LoadURL do controle e enviando a ele a URL que o usuário digitou. Seu código agora se parece com isso: WebViewer.LoadURL(AddressField.Text) 4. Vá em frente e adicione este código no Editor de Códigos. Comece por clicar no espaço em branco abaixo do nome do evento Action() e então digite este código (faça digitando ao invés de copiar e colar): WebViewer.LoadURL(AddressField.Text) É isto! Seu primeiro aplicativo está completo. 18

20 Seção 9 Testando o Browser Simples E AGORA? O Início Rápido apresentou você ao Xojo. Você aprendeu a desenhar uma janela, 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 periódicamente e sempre antes de executar o seu projeto. 1. Salve o projeto escolhendo File Save. 2. Nomeie o projeto como SimpleBrowser e clique em Save. Executando seu Projeto Agora você pode testar seu projeto finalizado: 1. Clique no botão Run button na barra de ferramentas para executar. O aplicativo abre em uma janela própria. 2. Digite a URL que você quiser, como e clique no botão Go. 3. Você verá a página web. 4. Quando você terminar de fazer experiências com o aplicativo Simple Browser, você pode fechar a janela para retornar ao Xojo. No OS X, escolha SimpleBrowser.debug Quit para para encerrar o aplicativo. 19