| // |
| // Licensed to the Apache Software Foundation (ASF) under one |
| // or more contributor license agreements. See the NOTICE file |
| // distributed with this work for additional information |
| // regarding copyright ownership. The ASF licenses this file |
| // to you under the Apache License, Version 2.0 (the |
| // "License"); you may not use this file except in compliance |
| // with the License. You may obtain a copy of the License at |
| // |
| // http://www.apache.org/licenses/LICENSE-2.0 |
| // |
| // Unless required by applicable law or agreed to in writing, |
| // software distributed under the License is distributed on an |
| // "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| // KIND, either express or implied. See the License for the |
| // specific language governing permissions and limitations |
| // under the License. |
| // |
| |
| = Conceitos Básicos sobre Aplicações em HTML5. |
| :jbake-type: tutorial |
| :jbake-tags: tutorials |
| :jbake-status: published |
| :icons: font |
| :syntax: true |
| :source-highlighter: pygments |
| :toc: left |
| :toc-title: |
| :description: Conceitos Básicos sobre Aplicações em HTML5. - Apache NetBeans |
| :keywords: Apache NetBeans, Tutorials, Conceitos Básicos sobre Aplicações em HTML5. |
| |
| Este documento demonstra como criar um projeto em HTML5 no IDE e algumas das funcionalidades no IDE que suportam o uso de JavaScript e CSS no seu projeto. Neste documento, você cria uma aplicação simples em HTML5 que usa uma biblioteca jQuery JavaScript para modificar uma lista em uma página Web. |
| |
| Este documento demonstra também como instalar a extensão NetBeans Connector para o browser Chrome na Chrome Web Store. |
| |
| Para assistir a um screencast deste tutorial, consulte link:../web/html5-gettingstarted-screencast.html[+Vídeo com Conceitos Básicos das Aplicações em HTML5+]. |
| |
| Para obter um tutorial sobre como usar o jQuery em uma aplicação Web Java do NetBeans, consulte o tutorial link:../web/js-toolkits-jquery.html[+Usando jQuery para Aprimorar a Aparência e a Usabilidade de uma Página Web+]. |
| |
| == Para concluir este tutorial, você precisará dos recursos a seguir: |
| |
| |=== |
| |Software ou Recurso |Versão Necessária |
| |
| |link:https://netbeans.org/downloads/index.html[+NetBeans IDE, Java+] |7.4, 8.0 |
| |
| |link:http://www.oracle.com/technetwork/java/javase/downloads/index.html[+JDK (Java Development Kit)+] |versão 7 ou 8 |
| |
| |link:http://www.google.com/chrome[+Browser Chrome+] |-- |
| |
| |link:https://chrome.google.com/webstore/detail/netbeans-connector/hafdlehgocfcodbgjnpecfajgkeejnaa?utm_source=chrome-ntp-icon[+Extensão NetBeans Connector para Chrome+] |1.0.0 ou acima |
| |
| |link:https://netbeans.org/projects/samples/downloads/download/Samples/Web%20Client/HTML5Demo-projectresources.zip[+Recursos do projeto de Demonstração em HTML5+] |-- |
| |
| |link:https://netbeans.org/projects/samples/downloads/download/Samples/Web%20Client/HTML5DemoSiteTemplate.zip[+ Modelo de site do projeto finalizado+] |-- |
| |=== |
| |
| *Observações:* |
| |
| * O link:https://netbeans.org/projects/samples/downloads/download/Samples/Web%20Client/HTML5Demo-projectresources.zip[+arquivo zip com recursos do projeto+] contém imagens JPG e o arquivo CSS de que você precisa para adicionar ao projeto neste tutorial. |
| * Se você quiser comparar seu projeto com uma solução em funcionamento, poderá fazer download do link:https://netbeans.org/projects/samples/downloads/download/Samples/Web%20Client/HTML5DemoSiteTemplate.zip[+modelo de site+] do projeto acabado. |
| * Este tutorial pressupõe que você tenha alguma experiência com programação ou algum conhecimento básico de HTML, CSS e JavaScript. |
| |
| |
| == Usando o IDE com o Browser Chrome |
| |
| Para tirar o máximo proveito de algumas ferramentas disponíveis no IDE que suportam o desenvolvimento da aplicação em HTML5, é recomendável usar o browser Chrome e instalar a extensão Conector NetBeans da link:https://chrome.google.com/webstore/[+Chrome Web Store+]. Você só precisa instalar a extensão uma vez. |
| |
| Quando instalada, a extensão NetBeans Connector adiciona um menu Ações do NetBeans que é acessível na barra de localização de URL quando você executa um projeto NetBeans em HTML5 no browser Chrome. O menu Ações do NetBeans permite ativar o Modo Inspecionar no NetBeans e redimensionar rapidamente a janela do browser para as dimensões dos dispositivos de exibição comum. O depurador de JavaScript também é ativado automaticamente quando você executa uma aplicação em HTML5. |
| |
| |
| === Instalando a Extensão na Chrome Web Store |
| |
| Você será automaticamente solicitado a instalar a extensão NetBeans Connector se executar um projeto da aplicação em HTML5 do NetBeans no IDE e selecionar o Chrome com Integração com o NetBeans como browser de destino. Este exercício demonstra como instalar a extensão criando e executando um projeto fictício em HTML5. Você pode ignorar esse exercício e instalar a extensão quando for solicitado pelo IDE ou instalar a extensão NetBeans Connector diretamente da Chrome Web Store. |
| |
| *Observação.* O IDE abrirá a Chrome Web Store no browser default. Se o Chrome não estiver definido como browser default para o IDE, você deverá abrir a janela Opções e selecionar Chrome na lista drop-down Web Browser, na categoria Geral, antes de executar as próximas etapas. |
| |
| 1. Selecione Arquivo > Novo Projeto para abrir o assistente de Novo Projeto. |
| 2. Selecione Aplicação em HTML5 na categoria HTML/JavaScript. Clique em Próximo. |
| 3. Especifique um Nome e um Local para o projeto. Clique em Próximo. |
| |
| Para este exercício, o nome não é importante. |
| |
| |
| [start=4] |
| . Selecione Nenhum Modelo de Site. Clique em Finalizar. |
| |
| Quando você clicar em Finalizar, o IDE criará um novo projeto em HTML5 e abrirá o ``index.html`` no editor. |
| |
| |
| [start=5] |
| . Confirme que Chrome com Integração NetBeans está selecionado na lista drop-down, na Barra de Ferramentas. |
| |
| [start=6] |
| . Clique em Executar na barra de ferramentas. |
| |
| [start=7] |
| . Clique em Ir para Chrome Web Store na caixa de diálogo Instalar Extensão Chrome. |
| image::images/html5-offline-extension1.png[title="Caixa de diálogo Instalar Extensão Chrome"] |
| |
| Quando você clica em Ir para Chrome Web Store, a página NetBeans Connector é aberta na Chrome Web Store, no browser Chrome. |
| |
| *Observação.* A janela Instalar Extensão Chrome exibe um botão no qual você clicará depois da instalação da extensão. |
| |
| image::images/html5-rerun-dialog.png[title="Caixa de diálogo Instalar Extensão Chrome"] |
| |
| [start=8] |
| . Vá para o browser Chrome e clique em Adicionar ao Chrome na página NetBeans Connector. Clique em Adicionar quando você for solicitado a confirmar se deseja adicionar a extensão. |
| image::images/html5-chrome-netbeanshome.png[title="Página do NetBeans Connector na Chrome Web Store"] |
| |
| Quando a extensão for instalada, você verá uma notificação de que a extensão foi adicionada. O ícone do NetBeans Connector ficará visível na barra de localização de URL quando você executar um projeto em HTML5 no NetBeans no browser Chrome. |
| |
| image::images/html5-install-extension2.png[title="Confirmação de que a extensão foi instalada"] |
| |
| [start=9] |
| . No IDE, clique em Executar Projeto Novamente na caixa de diálogo Instalar Extensão Chrome. |
| |
| Quando você clica em Executar Projeto Novamente, uma nova guia é aberta no browser Chrome e você vê a página de índice da aplicação em HTML5. |
| |
| Depois que a extensão é instalada, você vê o ícone NetBeans Connector na barra de localização de URL quando executa um projeto HTML5 no NetBeans no browser Chrome. |
| |
| Se você abrir a página Extensões Chrome ( ``chrome://extensions/`` ) para o browser Chrome, verá que a extensão agora está ativada. |
| |
| image::images/html5-install-extension3.png[title="A extensão NetBeans Connector está ativada nas Extensões do Chrome"] |
| |
| *Observação.* Como alternativa, você pode instalar a extensão NetBeans Connector diretamente da Chrome Web Store, executando as etapas a seguir. |
| |
| 1. Inicie o browser Chrome e vá para a link:https://chrome.google.com/webstore/[+Chrome Web Store+]. |
| 2. Procure a extensão NetBeans Connector na Chrome Web Store. |
| 3. Clique em Adicionar ao Chrome nos resultados da pesquisa e clique em Adicionar quando for solicitado a adicionar a extensão. |
| image::images/html5-install-extension1.png[title="Extensão NetBeans Connector na Chrome Web Store"] |
| |
| |
| === Instalação Off-line da Extensão |
| |
| Se você não consegue estabelecer conexão com a Chrome Web Store, pode instalar a extensão NetBeans Conector incorporada ao IDE. Se você executa um projeto NetBeans em HTML5 e for solicitado a instalar a extensão NetBeans Connector, poderá executar as etapas a seguir para instalar a extensão, caso não consiga acessar a Chrome Web Store. |
| |
| 1. Clique em Não Conectado na caixa de diálogo Instalar Extensão Chrome. |
| image::images/html5-offline-extension1.png[title="Caixa de diálogo Instalar extensão Chrome"] |
| |
| [start=2] |
| . Clique em *localizar* na caixa de diálogo para abrir a pasta de instalação do NetBeans IDE no seu sistema local que contém a extensão * ``netbeans-chrome-connector.crx`` *. |
| image::images/html5-offline-extension2.png[title="A extensão NetBeans Connector está ativada nas Extensões do Chrome"] |
| |
| [start=3] |
| . Abra a página de extensões Chrome ( ``chrome://extensions/`` ) no seu browser Chrome. |
| image::images/html5-offline-extension3.png[title="A extensão NetBeans Connector está ativada nas Extensões do Chrome"] |
| |
| [start=4] |
| . Arraste a extensão ``netbeans-chrome-connector.crx`` para a página Extensões no browser e clique em Adicionar para confirmar que deseja adicionar a extensão. |
| |
| Depois de adicionar a extensão, você verá que a extensão NetBeans Connector foi adicionada à lista de extensões instaladas. |
| |
| |
| [start=5] |
| . Clique em *Sim, o plug-in está instalado agora* na caixa de diálogo Instalar Extensão Chrome para abrir o projeto do NetBeans em HTML5 no browser Chrome. Você verá o ícone do NetBeans Connector na barra de localização da guia do browser. |
| |
| |
| == Usando o Browser com Kit Web Incorporado |
| |
| É recomendável executar suas aplicações em HTML5 no browser Chrome com a extensão NetBeans Connector instalada, quando você estiver desenvolvendo a aplicação. A opção *Integração de Chrome com NetBeans* é selecionada por padrão como destino de execução quando você cria uma aplicação em HTML5. No entanto, também é possível executar a aplicação em HTML5 no Browser com Kit Web Incorporado integrado ao IDE. |
| |
| Quando você executa a aplicação em HTML5 no Browser com Kit Web Incorporado, o IDE abre a janela Web Browser no IDE. O Browser com Kit Web Incorporado suporta muitas funcionalidades ativadas no browser Chrome quando a extensão NetBeans Connector é instalada, incluindo modo Inspecionar, diversas opções de tamanho de tela e depuração de JavaScript. |
| |
| *Observação.* Quando você escolhe Janela > Web > Web Browser no menu principal, o IDE abre o browser especificado como Web Browser na janela Opções. |
| |
| Execute as etapas a seguir para executar uma aplicação em HTML5 no Browser com Kit Web Incorporado. |
| |
| 1. Selecione Browser com Kit Web Incorporado na lista drop-down na barra de ferramentas. |
| image::images/html5-embedded1.png[title="Lista de browsers de destino para aplicações em HTML5 na lista drop-down na barra de ferramentas."] |
| |
| [start=2] |
| . Clique em Executar na barra de ferramentas ou clique com o botão direito do mouse no nó do projeto na janela Projetos e selecione Executar. |
| |
| Quando você executa a aplicação, a janela Web Browser é aberta no IDE. |
| |
| image::images/html5-embedded2.png[title="Janela Browser com Kit Web Incorporado"] |
| |
| É possível clicar nos ícones da barra de ferramentas da guia Web Browser para ativar o modo Inspecionar e alternar rapidamente entre os diferentes tamanhos de exibição. |
| |
| |
| == Criando um projeto NetBeans em HTML5 |
| |
| Neste exercício, você usará o assistente de Novo Projeto no IDE para criar um novo projeto em HTML5. Para este tutorial, você criará um projeto em HTML5 muito básico que tem apenas um arquivo ``index.html`` . No assistente, você também selecionará algumas bibliotecas jQuery JavaScript para usar no projeto. |
| |
| 1. Selecione Arquivo > Novo Projeto (Ctrl-Shift-N; ⌘-Shift-N no Mac) no menu principal para abrir o assistente Novo Projeto. |
| 2. Selecione a categoria *HTML5*e, em seguida, selecione *Aplicação HTML5*. Clique em Próximo. |
| image::images/html5-newproject1.png[title="Modelo de Aplicação em HTML5 no assistente de Novo Projeto"] |
| |
| [start=3] |
| . Digite *HTML5Demo* para Nome do Projeto e especifique o diretório no seu computador onde você quer salvar o projeto. Clique em Próximo. |
| |
| [start=4] |
| . Na Etapa 3. Modelo de Site, selecione Nenhum Modelo de Site. Clique em Próximo. |
| image::images/html5-newproject2.png[title="Painel Modelos de Site no assistente da Nova Aplicação em HTML5"] |
| |
| Quando você seleciona a opção Nenhum Modelo de Site, o assistente gera um projeto básico em branco do NetBeans em HTML5. Se você clicar em Finalizar agora, o projeto conterá apenas uma pasta Root do Site e um arquivo ``index.html`` nessa pasta. |
| |
| A página Modelo de Site do assistente permite selecionar em uma lista de modelos on-line populares de projetos em HTML5 ou especificar o local de um arquivo compactado ``.zip`` de um modelo de site. Você pode digitar o URL do arquivo compactado ``.zip`` ou clicar em Procurar para especificar uma localização no seu sistema local. Quando você cria um projeto com base em um modelo de site, os arquivos, as bibliotecas e a estrutura do projeto são determinados pelo modelo. |
| |
| *Observação:* Você deve estar on-line para criar um projeto baseado em um dos modelos on-line da lista. |
| |
| |
| [start=5] |
| . Na Etapa 4. Arquivos de JavaScript, selecione as bibliotecas JavaScript ``jquery`` e ``jqueryui`` no painel Disponível e clique no ícone de seta para a direita ( > ) para mover as bibliotecas selecionadas para o painel Selecionado do assistente. Por default, as bibliotecas são criadas na pasta ``js/libraries`` do projeto. Para este tutorial, você utilizará as versões "minimizadas" das bibliotecas JavaScript. |
| |
| Você pode usar o campo de texto no painel para filtrar a lista de bibliotecas JavaScript. Por exemplo, digite *jq* no campo para ajudá-lo a encontrar as bibliotecas ``jquery`` . Você pode usar Ctrl-clique nos nomes das bibliotecas para selecionar várias bibliotecas. |
| |
| image::images/html5-newproject3.png[title="Painel Bibliotecas de JavaScript no assistente da Nova Aplicação em HTML5"] |
| |
| *Observações.* |
| |
| * Você pode clicar no número de versão da biblioteca na coluna Versão para abrir uma janela pop-up que permite selecionar a ordem das versões de biblioteca. Por default, o assistente exibe a versão mais recente. |
| * As versões minimizadas das bibliotecas JavaScript são versões compactadas e o código não é abrangente quando exibido em um editor. |
| |
| [start=6] |
| . Clique em *Finalizar* para concluir o assistente. |
| |
| Quando você clicar em Finalizar, o IDE criará o projeto e exibirá um nó para o projeto na janela Projetos,e abrirá o arquivo ``index.html`` no editor. |
| |
| image::images/html5-projectswindow1.png[title="Painel Bibliotecas de JavaScript no assistente da Nova Aplicação em HTML5"] |
| |
| Se você expandir a pasta ``js/libs`` na janela Projetos, poderá ver que as bibliotecas JavaScript que você especificou no assistente do Novo Projeto foram automaticamente adicionadas ao projeto. Você pode remover uma Biblioteca JavaScript de um projeto clicando com o botão direito do mouse no arquivo JavaScript e escolhendo Deletar no menu pop-up. |
| |
| Para adicionar uma biblioteca JavaScript a um projeto, clique com o botão direito do mouse no nó do projeto e escolha Propriedades para abrir a janela Propriedades do Projeto. Você pode adicionar bibliotecas no painel Bibliotecas JavaScript da janela Propriedades do Projeto. Como alternativa, é possível copiar um arquivo JavaScript que está no sistema local diretamente na pasta ``js`` . |
| |
| Agora, você pode testar se o projeto é exibido corretamente no browser Chrome. |
| |
| |
| [start=7] |
| . Confirme que Chrome com Integração do Conector NetBeans está selecionado na lista drop-down do browser, na barra de ferramentas. |
| image::images/html5-js-selectbrowser.png[title="Browser selecionado na lista drop-down na barra de ferramentas"] |
| |
| [start=8] |
| . Clique com o botão direito do mouse no nó na janela Projetos e selecione Executar. |
| |
| Quando você seleciona Executar, o IDE abre uma guia no browser Chrome e exibe á página ``index.html`` default da aplicação. A janela Browser DOM é aberta no IDE e exibe a árvore DOM da página que é aberta no browser. |
| |
| image::images/html5-runproject.png[title="Guia Aplicação no browser Chrome"] |
| |
| Você perceberá que há uma barra amarela na guia do browser que o notifica que o NetBeans Connector está depurando a guia. O IDE e o browser são conectados e podem se comunicar um com o outro quando a barra amarela está visível. Quando você inicializa uma aplicação HTML5 do IDE, o depurador JavaScript é ativado automaticamente. Quando você salva as alterações em um arquivo ou faz alterações em uma folha de estilos CSS, não precisa recarregar a página, pois a janela do browser será atualizada automaticamente para exibir as alterações. |
| |
| Se você fechar a barra amarela ou clicar em Cancelar, quebrará a conexão entre o IDE e o browser. Se você interromper a conexão, será necessário executar novamente a aplicação em HTML5 a partir do IDE. |
| |
| Você obsevará também que o ícone do NetBeans ficará visível no campo do local do URL do browser. É possível clicar no ícone para abrir um menu que oferece várias opções para alterar o tamanho de exibição do browser e para ativar o modo Inspecionar no NetBeans. |
| |
| image::images/html5-runproject2.png[title="Menu NetBeans na guia do browser Chrome"] |
| |
| Se você selecionar um dos dispositivos default no menu, a janela do browser se redimensionará de acordo com as dimensões do dispositivo. Isso permite que você veja como será a aparência da aplicação no dispositivo selecionado. As aplicações em HTML5 geralmente são projetadas para responder ao tamanho da tela do dispositivo em que são exibidas. Você pode usar regras de JavaScript e CSS que respondam ao tamanho da tela e modificar a forma como as aplicações são exibidas, de maneira que o layout seja otimizado para o dispositivo. |
| |
| |
| == Editando o Arquivo HTML |
| |
| Neste exercício, você adicionará os recursos do projeto ao projeto e editará o arquivo ``index.html`` para adicionar links aos recursos e adicionar algumas regras de CSS. Você verá como alguns seletores simples de CSS, quando combinados com JavaScript, podem alterar significativamente a forma como a página é exibida em um browser. |
| |
| 1. Faça download do arquivo compactado link:https://netbeans.org/projects/samples/downloads/download/Samples/Web%20Client/HTML5Demo-projectresources.zip[+recursos do projeto+] e extraia o conteúdo. |
| |
| O arquivo compactado zip contém duas pastas com arquivos que você precisa adicionar ao projeto: ``pix`` e ``css`` . |
| |
| |
| [start=2] |
| . Copie as pastas ``pix`` e ``css`` na pasta Root do Site. |
| |
| *Observação.* Se você estiver observando a estrutura de diretório do projeto, deverá copiar as pastas na pasta ``public_html`` . |
| |
| image::images/html5-fileswindow.png[title="Menu NetBeans na guia do browser Chrome"] |
| |
| [start=3] |
| . Abra `index.html` no editor (se ainda não estiver aberto). |
| |
| [start=4] |
| . No editor, adicione referências para as bibliotecas JavaScript que você adicionou quando criou o projeto, adicionando o seguinte código (em negrito) entre as tags ``<head>`` de abertura e fechamento existentes. |
| |
| [source,xml] |
| ---- |
| |
| <html> |
| <head> |
| <title></title> |
| <meta charset=UTF-8"> |
| <meta name="viewport" content="width=device-width"> |
| *<script type="text/javascript" src="js/libs/jquery/jquery.js"></script> |
| <script type="text/javascript" src="js/libs/jqueryui/jquery-ui.js"></script>* |
| </head> |
| <body> |
| TODO write content |
| </body> |
| </html> |
| ---- |
| |
| Você pode utilizar a funcionalidade de autocompletar código no editor para ajudá-lo. |
| |
| image::images/html5-editor1.png[title="Autocompletar código no editor"] |
| |
| [start=5] |
| . Remova o comentário default '`TODO write content`' e digite o seguinte entre as tags ``body`` . |
| |
| [source,html] |
| ---- |
| |
| <body> |
| <div> |
| |
| <h3><a href="#">Mary Adams</a></h3> |
| <div> |
| <img src="pix/maryadams.jpg" alt="Mary Adams"> |
| <ul> |
| <li><h4>Vice President</h4></li> |
| <li><b>phone:</b> x8234</li> |
| <li><b>office:</b> 102 Bldg 1</li> |
| <li><b>email:</b> m.adams@company.com</li> |
| </ul> |
| <br clear="all"> |
| </div> |
| |
| <h3><a href="#">John Matthews</a></h3> |
| <div> |
| <img src="pix/johnmatthews.jpg" alt="John Matthews"> |
| <ul> |
| <li><h4>Middle Manager</h4></li> |
| <li><b>phone:</b> x3082</li> |
| <li><b>office:</b> 307 Bldg 1</li> |
| <li><b>email:</b> j.matthews@company.com</li> |
| </ul> |
| <br clear="all"> |
| </div> |
| |
| <h3><a href="#">Sam Jackson</a></h3> |
| <div> |
| <img src="pix/samjackson.jpg" alt="Sam Jackson"> |
| <ul> |
| <li><h4>Deputy Assistant</h4></li> |
| <li><b>phone:</b> x3494</li> |
| <li><b>office:</b> 457 Bldg 2</li> |
| <li><b>email:</b> s.jackson@company.com</li> |
| </ul> |
| <br clear="all"> |
| </div> |
| |
| <h3><a href="#">Jennifer Brooks</a></h3> |
| <div> |
| <img src="pix/jeniferapplethwaite.jpg" alt="Jenifer Applethwaite"> |
| <ul> |
| <li><h4>Senior Technician</h4></li> |
| <li><b>phone:</b> x9430</li> |
| <li><b>office:</b> 327 Bldg 2</li> |
| <li><b>email:</b> j.brooks@company.com</li> |
| </ul> |
| <br clear="all"> |
| </div> |
| </div> |
| </body> |
| ---- |
| |
| [start=6] |
| . Salve as alterações. |
| |
| Quando você salvar as alterações, a página é automaticamente recarregada no browser e deve ter aparência semelhante à da imagem. |
| |
| image::images/html5-runproject3.png[title="Página recarregada na guia browser Chrome"] |
| |
| [start=7] |
| . Digite as seguintes regras de CSS em linha entre as tags ``<head>`` no arquivo. |
| |
| [source,xml] |
| ---- |
| |
| <style type="text/css"> |
| ul {list-style-type: none} |
| img { |
| margin-right: 20px; |
| float:left; |
| border: 1px solid; |
| } |
| </style> |
| ---- |
| |
| Pressione Ctrl-espaço para usar o recurso autcompletar código no editor quando você adicionar as regras de CSS. |
| |
| image::images/html5-editor2.png[title="Recurso autocompletar código das regras CSS no editor"] |
| |
| Se você abrir a janela do Browser DOM, poderá visualizar a estrutura atual da página. |
| |
| image::images/dom-browser.png[title="A janela Browser DOM que mostra a árvore DOM"] |
| |
| [start=8] |
| . Adicione o link a seguir à folha de estilo (em *negrito*) entre as tags `<head>`. |
| |
| [source,xml] |
| ---- |
| |
| <head> |
| ... |
| <script type="text/javascript" src="js/libs/jqueryui/jquery-ui.js"></script> |
| *<link type="text/css" rel="stylesheet" href="css/basecss.css">* |
| ... |
| </head> |
| ---- |
| |
| A folha de estilo ``basecss.css`` é baseada em algumas das regras de CSS definidas na folha de estilo de CSS personalizada no tema "UI lightness" de jQuery. |
| |
| É possível abrir a folha de estilo ``basecss.css`` no editor e modificá-la para adicionar as regras de CSS que você adicionou na etapa anterior ou criar uma nova folha de estilos para as regras de CSS. |
| |
| |
| [start=9] |
| . Adicione o seguinte código entre as tags ``<head>`` para executar um script de jQuery quando os elementos da página são carregados. |
| |
| [source,xml] |
| ---- |
| |
| *<script type="text/javascript"> |
| $(document).ready(function() { |
| |
| }); |
| </script>* |
| </head> |
| ---- |
| |
| O jQuery funciona conectando atributos e comportamentos do JavaScript aplicados dinamicamente a elementos do DOM (Modelo de Objetos do Documento). As instruções jQuery usadas neste exemplo deverão ser executadas somente depois de todos os elementos do DOM serem carregados pelo browser. Isso é importante porque os comportamentos do jQuery se conectam a elementos do DOM e esses elementos devem estar disponíveis para o jQuery para obtermos os resultados esperados. O jQuery cuida disso com sua função incorporada `(document).ready`, que segue o objeto jQuery, representado por `$`. |
| |
| Você também pode usar a versão abreviada desta função a seguir. |
| |
| |
| [source,java] |
| ---- |
| |
| $(function(){ |
| |
| }); |
| ---- |
| |
| As instruções para o jQuery tomam a forma de um método JavaScript, com uma literal opcional de objeto representando um array de parâmetros, e devem ser colocadas entre chaves `{}` dentro da função `(document).ready` para serem executadas somente no momento apropriado, que é após o DOM ser completamente carregado. |
| |
| |
| [start=10] |
| . Adicione o seguinte código (em negrito) na função `(document).ready`, entre as chaves `{}`: |
| |
| [source,xml] |
| ---- |
| |
| <script type="text/javascript"> |
| $(document).ready(function() { |
| *$("#infolist").accordion({ |
| autoHeight: false |
| });* |
| }); |
| </script> |
| </head> |
| ---- |
| |
| Esse código chamará o script do link:http://jqueryui.com/demos/accordion/[+widget accordion do jQuery+] que está incluído na link:http://jqueryui.com/[+biblioteca de IU do jQuery+]. O script do accordion modificará os elementos dentro do objeto do DOM identificado como ``infolist`` . Nesse código, `#infolist` é um seletor de CSS conectado a um elemento de DOM exclusivo que tem um atributo `id` com valor `infolist`. Ele é conectado usando notação de ponto ('`.`') típica do JavaScript à instrução jQuery que usa o método `accordion()` para exibir esse elemento. |
| |
| Na próxima etapa, você identificará um elemento na página como ``infolist`` . |
| |
| *Observação.* Você também especificou '`autoHeight: false`' no snippet de código acima. Isso impede o widget accordion de definir a altura de cada painel com base na parte mais alta do conteúdo contida na marcação. Para obter mais informações, consulte a link:http://docs.jquery.com/UI/Accordion[+documentação da API do accordion+]. |
| |
| A seção ``<head>`` do arquivo `index.html` deve ter a aparência a seguir. |
| |
| |
| [source,xml] |
| ---- |
| |
| <html> |
| <head> |
| <title></title> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width"> |
| <script type="text/javascript" src="js/libs/jquery/jquery.js"></script> |
| <script type="text/javascript" src="js/libs/jqueryui/jquery-ui.js"></script> |
| <link type="text/css" rel="stylesheet" href="css/basecss.css"> |
| |
| <style type="text/css"> |
| ul {list-style-type: none} |
| img { |
| margin-right: 20px; |
| float:left; |
| border: 1px solid; |
| } |
| </style> |
| <script type="text/javascript"> |
| $(document).ready(function() { |
| $("#infolist").accordion({ |
| autoHeight: false |
| }); |
| }); |
| </script> |
| </head> |
| ---- |
| |
| Você pode organizar seu código clicando com o botão direito do mouse no editor e selecionando Formato. |
| |
| |
| [start=11] |
| . Modifique o elemento ``<div>`` que circunscreve a página Conteúdo adicionando o seguinte seletor e valor `id` (em negrito). |
| |
| [source,html] |
| ---- |
| |
| <body> |
| <div *id="infolist"*> |
| |
| ---- |
| |
| Esse elemento `<div>` abrange o conteúdo da página (os quatro conjuntos de tags `<h3>` e tags `<div>` que você adicionou anteriormente no tutorial). |
| |
| É possível adicionar o seletor ao elemento na caixa de diálogo Editar Regras de CSS. Para abrir a caixa de diálogo Editar Regras de CSS, clique com o botão direito do mouse na tag ``<div>`` do editor e escolha Editar Regras de CSS no menu pop-up. Como opção, se o cursor de inserção estiver na tag ``<div>`` do editor, clique no botão Editar Regras de CSS (image::images/newcssrule.png[title="Autocompletar código no editor"]) na janela Estilos de CSS (Janela > Web > Estilos de CSS). |
| |
| image::images/html5-cssstyles.png[title="Janela Estilos de CSS"] |
| |
| Na caixa de diálogo Regras de CSS, selecione ``id`` como o Tipo de Seletor e digite *infolist* como o Seletor. Confirme que a opção Aplicar Alterações ao Elemento está selecionada. |
| |
| image::images/html5-cssrules.png[title="Caixa de diálogo Editar Regras de CSS"] |
| |
| Quando você clicar em OK na caixa de diálogo, uma regra CSS para o seletor ``infolist`` será automaticamente adicionada à folha de estilo ``basecss.css`` . |
| |
| |
| [start=12] |
| . Salve suas alterações de ``index.html`` (Ctrl-S; ⌘-S no Mac). |
| |
| Quando você salva as alterações, a página no web browser é recarregada automaticamente. Você pode ver que o layout da página mudou e que a página agora usa as regras de estilo de CSS definidas na folha de estilo ``basecss.css`` . Uma das listas abaixo de ``<h3>`` está aberta, mas as demais foram recolhidas. Você pode clicar em um elemento ``<h3>`` para expandir a lista. |
| |
| image::images/html5-runproject5.png[title="O projeto final carregado no browser"] |
| |
| A função accordion do jQuery agora modifica todos os elementos da página que estão contidos no objeto DOM ``infolist`` . Na janela Navegador, você pode ver a estrutura do arquivo HTML e o elemento ``div`` identificado por ``id=infolist`` . |
| |
| image::images/navigator3.png[title="janela Browser DOM"] |
| |
| Você pode clicar com o botão direito em um elemento na janela Navegador e selecionar Ir para Origem para navegar rapidamente para o local desse elemento no arquivo de origem. |
| |
| Na janela Browser DOM, você pode ver os elementos DOM na página que é renderizada no browser e os estilos JQuery aplicados aos elementos. |
| |
| image::images/dom-browser3.png[title="janela Browser DOM"] |
| |
| Quando o modo Inspecionar no NetBeans está ativado no browser, a seleção de um elemento na janela do browser destaca o elemento na janela Browser DOM. |
| |
| |
| [[template]] |
| == Salvando o Projeto como Modelo de Site |
| |
| Você pode salvar seu projeto modelo como um modelo de site para ser usado como modelo para criar outros sites em HTML5 baseados no projeto. O site modelo pode incluir bibliotecas JavaScript, arquivos CSS, imagens e modelos para arquivos HTML. O IDE fornece um assistente para ajudá-lo a selecionar os arquivos que você deseja incluir no modelo do site. |
| |
| 1. Clique com o botão direito do mouse na janela Projetos e escolha Salvar como Modelo no menu pop-up. |
| 2. Digite *HTML5DemoSiteTemplate* no campo Nome e especifique o local em que você quer salvar o modelo. |
| 3. Confirme se todos os arquivos foram selecionados. Clique em Finalizar. |
| |
| Se você expandir os nós da árvore na caixa de diálogo, poderá ver os arquivos que serão incluídos no modelo de site. |
| |
| image::images/html5-sitetemplate.png[title="Caixa de diálogo Criar Modelo de Site"] |
| |
| É possível ver que esse modelo de site incluirá o arquivo ``index.html`` , a folha de estilo CSS, as imagens usadas no projeto e as bibliotecas de JavaScript. O site modelo também pode incluir quaisquer arquivos e testes de configuração. |
| |
| Quando você clicar em Finalizar, o IDE gerará o modelo de site como um arquivo compactado ``.zip`` . |
| |
| Quando você quiser criar um projeto baseado no modelo de site, especifique o local do arquivo compactado ``.zip`` no painel Modelo do Site no assistente do Novo Projeto. |
| |
| |
| [[summary]] |
| == Resumo |
| |
| Neste tutorial, você aprendeu como criar um projeto em branco em HTML5 que usa algumas bibliotecas jQuery JavaScript. Você também aprendeu a instalar a extensão NetBeans Connector para o browser Chrome e a executar projetos em HTML5 no browser. Quando você editou o arquivo ``index.html`` , viu que o IDE oferece algumas ferramentas que podem ajudá-lo a editar arquivos HTML e CSS. |
| |
| link:/about/contact_form.html?to=3&subject=Feedback:%20Getting%20Started%20with%20HTML5%20Applications[+Enviar Feedback neste Tutorial+] |
| |
| |
| |
| |
| [[seealso]] |
| == Consulte Também |
| |
| Para obter mais informações sobre suporte para aplicações no HTML5 no IDE, consulte os seguintes recursos em link:https://netbeans.org/[+netbeans.org+]: |
| |
| * link:html5-editing-css.html[+Trabalhando com Folhas de Estilo de CSS em Aplicações em HTML5+]. Um documento que continua com a aplicação que você criou neste tutorial que demonstra como usar alguns assistentes de CSS e janelas do IDE e como usar o modo Inspecionar no browser Chrome para localizar visualmente os elementos nas origens do projeto. |
| * link:html5-js-support.html[+Depurando e Testando JavaScript em Aplicações em HTML5+]. Um documento que demonstra como o IDE oferece ferramentas que podem ajudá-lo a depurar e testar arquivos JavaScript no IDE. |
| |
| Para obter mais informações sobre o jQuery, consulte a documentação oficial: |
| |
| * Home Page Oficial: link:http://jquery.com[+http://jquery.com+] |
| * Home Page da IU: link:http://jqueryui.com/[+http://jqueryui.com/+] |
| * Tutoriais: link:http://docs.jquery.com/Tutorials[+http://docs.jquery.com/Tutorials+] |
| * Página Principal da Documentação: link:http://docs.jquery.com/Main_Page[+http://docs.jquery.com/Main_Page+] |
| * Demonstrações de IU e Documentação: link:http://jqueryui.com/demos/[+http://jqueryui.com/demos/+] |
