Usando o jQuery para Aprimorar a Aparência e a Facilidade de Uso de uma Página Web

O jQuery é uma biblioteca JavaScript leve que permite aos programadores adicionar melhorias de maneira fácil e rápida à aparência e aos comportamentos de suas páginas Web. A sintaxe do jQuery é concisa e utiliza variáveis na forma de seletores CSS como uma maneira de conectar um efeito a qualquer elemento alvo do DOM, seja um elemento exclusivo (id) ou um conjunto de elementos (class) ou algum arbitrariamente escolhido. Como o jQuery é um JavaScript, ele pode ser incorporado em qualquer projeto onde o JavaScript possa ser aplicado.

Este tutorial demonstrará como começar a usar o jQuery em projetos NetBeans e tirar vantagem do IDE ao trabalhar em qualquer projeto de frontend que envolva arquivos HTML, CSS e JavaScript. Inicialmente, será mostrado como chamar a funcionalidade autocompletar código nas funções e usar o suporte à API integrado. Também serão abordados os conceitos-chave do jQuery, incluindo a chamada de função $(document).ready , o uso de objetos jQuery tipo seletor CSS e o encadeamento de efeitos e comportamentos do jQuery. Também serão explorados os benefícios da biblioteca de IU jQuery ao definir um simples documento de exemplo da “lista de contatos” e aplicar o widget accordion do jQuery a ele.

Para obter um exemplo de como usar jQuery em uma aplicação HTML5, consulte o tutorial Conceitos Básicos sobre Aplicações HTML5.

Conteúdo

O conteúdo desta página se aplica ao NetBeans IDE 7.2, 7.3 e 7.4

Para concluir este tutorial, você precisará dos recursos a seguir:

Software ou Recurso Versão Necessária
NetBeans IDE, Java EE ou pacote PHP 7.0 ou superior
JDK (Java Development Kit) 6 ou 7
Biblioteca Core do jQuery 1.4.2 ou superior
Widget Accordion do jQuery 1.8.1 ou superior
Recursos do Projeto n/d

Observações:

  • Os recursos do projeto contêm arquivos JPG necessários para concluir este tutorial.
  • Se você quiser comparar seu projeto com uma solução de trabalho, você pode fazer o download do projeto de amostra. (Inclui as versões PHP e Java Web.)
  • Se planeja trabalhar em um projeto Java, considere configurar um servidor para o seu ambiente de desenvolvimento. O GlassFish Server está incluído no download Java do IDE e está configurado para ser executado no NetBeans por default.
  • Se você planeja trabalhar em um projeto PHP, será necessário fazer o download do PHP e configurar seu ambiente. Para obter mais informações, consulte a Trilha de Aprendizado do PHP.
  • Este tutorial pressupõe que você tenha alguma experiência com programação ou algum conhecimento básico de HTML, CSS e JavaScript.

Configurando um Projeto NetBeans

  1. Comece criando um novo projeto. Selecione Arquivo > Novo Projeto (Ctrl-Shift-N; ⌘-Shift-N no Mac).
  2. Se você deseja trabalhar em um projeto PHP, selecione a categoria PHP e depois selecione Aplicação PHP.

    Se você deseja trabalhar em um projeto Java Web, selecione a categoria Java Web e depois selecione aplicação Web.
  3. Clique em Próximo e nomeie o projeto como jqproject. Além disso, especifique o diretório no computador onde deseja salvar o projeto. Clique em Próximo.
  4. Na Etapa 3, para os propósitos deste tutorial, aceite as definições default fornecidas no assistente.

    Observação: Se estiver criando um projeto PHP pela primeira vez e precisar de ajuda, consulte Configurando seu Ambiente para Desenvolvimento PHP na Trilha de Aprendizado do PHP.

  5. Clique em Finalizar para concluir o assistente e criar um novo projeto. O jqproject será aberto na janela Projetos e o arquivo de boas-vindas do projeto, aberto no editor.
  6. Crie um arquivo HTML simples, no qual você poderá trabalhar para o restante deste tutorial. Devido ao código jQuery que será adicionado não exigir qualquer comunicação com um servidor de backend, o arquivo HTML será executado em um browser para exibir os resultados.

    Clique com o botão direito do mouse no nó do projeto e selecione Novo > Arquivo HTML (Ctrl-N).
  7. Nomeie o arquivo como index e clique em Finalizar. Na janela Projetos, observe que o novo arquivo index.html está listado no projeto, e que o arquivo abre no editor.
  8. Veja como é a aparência da página de boas-vindas no browser. Para isso, clique com o botão direito do mouse no nó do index.html na janela Projetos e selecione Exibir. (Também é possível selecionar Exibir no menu de contexto do arquivo do editor.) A página será exibida em uma janela do browser.
    Index.html exibida no browser
  9. No arquivo index.html do editor do NetBeans, digite jQuery Test Project entre as tags <title> e crie um par de tags <style> dentro das tags <head> da página. (Alterações em negrito.)
    <html>
      <head>
        <title>jQuery Test Project</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
    
        </style>
      </head>
      <body>
        TODO write content
      </body>
    </html>
  10. Configure seu projeto para que o index.html seja exibido como o arquivo de boas-vindas quando a aplicação estiver implantada e em execução. Para isso, clique com o botão direito do mouse no nó jqproject na janela Projetos e selecione Propriedades.
    • Projetos PHP: Selecione a categoria Executar Configuração e, em seguida, digite index.html no campo Arquivo de Índice.
    • Projetos Java Web: Selecione a categoria Executar e, em seguida, digite index.html no campo URL Relativo.
  11. Clique em OK para fechar a janela Propriedades do Projeto e salvar as alterações.
  12. Neste estágio, é possível deletar o arquivo original de índice criado com o seu projeto. Em projetos PHP, este é o arquivo index.php; em projetos Java Web, este é o arquivo index.jsp.

    Para deletar o arquivo, clique com o botão direito do mouse no arquivo na janela Projetos e selecione Deletar. Na caixa de diálogo de confirmação que será exibida, clique em Sim.

Adicionando a Biblioteca do jQuery ao Projeto

Antes de começar a trabalhar com o jQuery, é necessário adicionar a biblioteca do jQuery ao projeto. Caso ainda não tenha feito isso, faça o download da biblioteca do jQuery em http://jquery.com/.

Escolha a versão descompactada, ou seja, “Development”, antes de fazer o download. O uso da versão descompactada permitirá que você examine o código JavaScript no editor e ajudará em nos processos de depuração.

Para adicionar a biblioteca do jQuery ao seu projeto NetBeans, basta copiar a pasta da biblioteca da sua localização no computador e colá-la diretamente no seu projeto na janela Projetos do IDE. Detalhes a seguir:

  1. No IDE, crie uma pasta chamada js e adicione-a ao seu projeto. Para fazer isso, clique no botão Novo Arquivo (Botão Novo Arquivo) na barra de ferramentas do IDE. (Como alternativa, pressione Ctrl-N; ⌘-N no Mac.)
  2. Selecione a categoria Outro e, em seguida, selecione Pasta.
  3. Nomeie a pasta como js.

    Nos projetos Java Web, coloque a pasta js na raiz da Web do projeto. Para fazer isso, digite web no campo Pasta Pai.
  4. Clique em Finalizar para sair do assistente.
  5. Localize a biblioteca do jQuery obtida por download no computador. No momento, a versão atual da biblioteca é 1.4.2, portanto, o arquivo é normalmente chamado de jquery-1.4.2.js. Copie o arquivo para a área de transferência (Ctrl-C; ⌘-C no Mac).
  6. Cole o arquivo da biblioteca na nova pasta js. Para isso, clique com o botão direito do mouse em js e selecione Colar (Ctrl-V; ⌘-V no Mac). O nó do arquivo jquery-1.4.2.js será exibido na pasta.

    Projeto PHP:

    Projeto Java Web:

    Biblioteca do jQuery exibida na janela Projetos do IDE Biblioteca do jQuery exibida na janela Projetos do IDE
  7. No editor, referencie a biblioteca do jQuery no arquivo index.html. Para tanto, adicione um par de tags <script> e use o atributo src para indicar o local da biblioteca. (Alterações em negrito.)
    <html>
      <head>
        <title>jQuery Test Project</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="js/jquery-1.4.2.js"></script>
    
        <style type="text/css">
    
        </style>
      </head>
      ...
  8. Salve o arquivo (Ctrl-S; &#8984-S no Mac).

Agora, a biblioteca do jQuery está incluída no projeto jqproject e será referenciada no arquivo index.html. Podemos começar adicionando recursos jQuery à página.


Familiarizando-se com o JQuery

O jQuery funciona conectando atributos e comportamentos do JavaScript aplicados dinamicamente a elementos do DOM (Modelo de Objetos do Documento). Adicione um elemento ao DOM e tente afetar suas propriedades. Criaremos um cabeçalho que altera a cor de preto para azul quando clicado.

  1. Começaremos criando o cabeçalho, estruturalmente um elemento <h1>. Remova o comentário 'TODO write content' e digite o seguinte entre as tags <body>:
    <h1>Test.</h1>
  2. Agora, criaremos uma classe CSS que faz com que um elemento apareça azul quando ela for aplicada. Digite o seguinte entre as tags <style> no <head> do documento:
    .blue { color: blue; }
  3. A seguir, iremos configurar um local para colocar nossos comandos jQuery. Adicione um novo conjunto de tags <script> no <head> do documento, por exemplo, após as tags <script> vinculadas à biblioteca jQuery. (Alterações em negrito.)
    <html>
        <head>
            <title>jQuery Test Project</title>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    
            <script type="text/javascript">
    
            </script>
    
            <style type="text/css">
                .blue { color: blue; }
            </style>
        </head>
        ...

    Você pode organizar seu código clicando com o botão direito do mouse no editor e selecionando Formato.

    As instruções jQuery que adicionaremos 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 $.
  4. Digite esta construção entre as tags de script recém-criadas:
    $(document).ready(function(){
    
    });

    Há também uma versão abreviada dessa função que pode ser usada como alternativa:

    $(function(){
    
    });
    Nossas 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.

    Neste estágio, o arquivo index.html deve se parecer com o seguinte:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
        <head>
            <title>jQuery Test Project</title>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    
            <script type="text/javascript">
                $(document).ready(function(){
    
                });
            </script>
    
            <style type="text/css">
                .blue { color: blue; }
            </style>
        </head>
        <body>
            <h1>Test.</h1>
        </body>
    </html>
  5. Para demonstrar como a sintaxe do jQuery funciona, tentaremos algo simples. Adicionaremos instruções jQuery à nossa página que farão com que a palavra 'Teste' fique azul quando clicarmos nela. Para fazer isso, queremos que o jQuery adicione a classe CSS .blue ao elemento <h1> do DOM quando ele for clicado.

    Digite o seguinte código na função (document).ready, entre as chaves {}:
    $("h1").click(function(){
    	$(this).addClass("blue");
    });
  6. Salve o documento (Ctrl-S; &#8984-S no Mac), e, em seguida, clique com o botão direito do mouse no editor e escolha Exibir para carregá-lo em seu Web browser. Teste para ver se funciona. Quando você clicar na palavra 'Teste', ela deverá ficar azul.
    Texto azul no browser

    Esse exemplo usa a função click() do jQuery para chamar a função addClass() do jQuery quando um elemento que corresponde ao seletor do CSS "h1" é encontrado. O $(this) refere-se ao elemento chamador. Se fôssemos adicionar mais <h1>s à nossa página, o mesmo comportamento seria aplicado a todos eles com esse único conjunto de regras e cada um interagiria com o jQuery de forma independente. (Tente você mesmo como um rápido exercício.)
  7. Outra qualidade importante do jQuery é que as funções podem ser simplesmente encadeadas para criar comportamentos mais complicados ou em sequência. Para demonstrar isso, vamos adicionar uma instrução jQuery de um fadeOut lento à nossa função click(). Coloque uma função jQuery fadeOut("slow") depois da função addClass para que a linha de código fique dessa forma:
    $(this).addClass("blue").fadeOut("slow");
    A função jQuery completa agora deve ter a seguinte aparência:
    $(document).ready(function(){
        $("h1").click(function(){
            $(this).addClass("blue").fadeOut("slow");
        });
    });
  8. No browser, atualize a página e a seguir clique em 'Teste'. Você verá que ela fica azul e esmaece, desaparecendo da página. (Para tentar novamente, é preciso atualizar a página.)


Adicionando o Widget Accordion do jQuery ao Projeto

Criamos o teste simples acima, usando comportamentos do JavaScript que estão incluídos na biblioteca Core do jQuery. Agora, examinaremos um exemplo mais real definindo uma lista de contatos de funcionários usando marcação básica de HTML. A seguir, aplicaremos o widget accordion do jQuery à lista de contatos.

O widget accordion faz parte da biblioteca de IU do jQuery. A biblioteca de IU é construída sobre a biblioteca Core e fornece uma abordagem modular para ativar interações, widgets e efeitos em suas páginas Web. Você pode manter os tamanhos dos arquivos ao mínimo e selecionar somente os componentes de que precisa na interface de download do jQuery em http://jqueryui.com/download.

Caso ainda não o tenha feito, acesse http://jqueryui.com/download e faça o download do widget accordion de navegação. Observe que, ao selecionar o widget accordion, a biblioteca Core de IU e a Widget Factory também serão automaticamente selecionadas. Observe também que, na página de download, o tema 'UI lightness' é selecionado por default e é incluído no pacote de download. Aplicaremos esse tema à nossa lista de contatos na seção a seguir.

  1. Cole o código a seguir no seu documento no lugar de <h1>Test.</h1>.
    <div id="infolist">
    
        <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> </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> </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> </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> </li>
            </ul>
            <br clear="all">
        </div>
    </div>
    Observe que o elemento circundado <div> recebe um atributo id com um valor de infolist. Dentro desse elemento <div>, há quatro conjuntos de tags <h3> e <div> tags que contêm uma imagem e uma lista não ordenada.
  2. Adicione algumas regras CSS em linha na marcação acima. Delete a regra de estilo .blue criada acima para fins de teste. Em seu lugar, adicione as regras a seguir. (Alterações em negrito.)
    <style type="text/css">
        ul {list-style-type: none}
        img {padding-right: 20px; float:left}
    
        #infolist {width:500px}
    </style>

    Ao digitar nas tags <style>, aproveite a funcionalidade autocompletar código CSS integrada do IDE pressionando Ctrl-Espaço.

  3. Salve o arquivo (Ctrl-S; &#8984-S no Mac).
  4. Agora, adicionaremos os retratos JPG referenciados no fragmento de código acima ao nosso projeto. Recupere o diretório pix dos recursos do projeto obtidas por download anteriormente e copie o diretório inteiro para a pasta do projeto, colocando-o no mesmo nível que index.html. Depois de um breve momento, o NetBeans automaticamente atualiza a janela Projetos para refletir que um novo diretório foi manualmente adicionado ao projeto.
  5. Alterne para o browser e atualize a página.
    Lista estruturada exibida em um browser

    Há uma série de problemas com este documento que trataremos. Primeiramente, é mais difícil do que o necessário varrer a lista rapidamente para encontrar a pessoa que você procura: é preciso rolar a página e inspecionar visualmente várias informações que não interessam no momento. É possível gerenciar quatro contatos em uma lista, mas, se o número crescer para, digamos, 50, será muito mais difícil utilizar a lista. Em segundo lugar, o documento é visualmente simples e é improvável que combine esteticamente com a maioria dos designs de site, particularmente, designs que tenham uma forte identidade gráfica. Trataremos esses problemas usando o widget accordion do jQuery juntamente com o tema default da IU do jQuery.
  6. Para produzir o efeito do accordion, navegue para o local em seu computador em que você fez o download do widget accordion. Na pasta obtida por download, você encontrará uma pasta chamada 'development-bundle'. Na pasta development-bundle, expanda a pasta ui e localize os três scripts a seguir:
    • jquery.ui.core.js
    • jquery.ui.widget.js
    • jquery.ui.accordion.js

    As versões de desenvolvimento de scripts do kit de ferramentas não são minimizadas, o que significa que seu código pode ser lido pelas pessoas quando exibido em um editor. Normalmente, você alternaria para as versões compactadas e minimizadas de uma aplicação pronto para a produção, de forma a economizar o tempo de download.

  7. Copie (Ctrl-C; &#8984-C no Mac) os três scripts e, de volta ao IDE, cole-os na pasta js que você criou anteriormente na pasta de seu jqproject.

    É possível colar pressionando Ctrl-V (&#8984-V no Mac) ou clicando com o botão direito do mouse na pasta js e selecionando Colar.

    A pasta development-bundle > ui também contém um arquivo chamado jquery-ui-1.8.1.custom.js. Esse arquivo combina os três scripts listados anteriormente em um único script. Você também pode colar esse arquivo em seu projeto, em vez dos três scripts individuais.

  8. Referencie os scripts na página index.html inserindo três tags <script> vinculadas a esses novos arquivos JavaScript. Você pode adicionar as tags <script> imediatamente após as tags <script> que referenciam a biblioteca Core do jQuery jquery-1.4.2.js. Use as tags <script> existentes como modelo.
  9. Delete o código de teste que criamos dentro da função (document).ready. ele não será mais necessário.

    As tags <head> de seu arquivo devem ter a seguinte aparência:
    <head>
        <title>jQuery Test Project</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
        <script type="text/javascript" src="js/jquery-1.4.2.js"></script>
        <script type="text/javascript" src="js/jquery.ui.core.js"></script>
        <script type="text/javascript" src="js/jquery.ui.widget.js"></script>
        <script type="text/javascript" src="js/jquery.ui.accordion.js"></script>
    
        <script type="text/javascript">
            $(document).ready(function(){
    
            });
        </script>
    </head>
  10. Para que façamos com que nossa lista estática e sem estilo obtenha o comportamento do accordion, basta adicionar uma linha única de código jQuery. Digite esta linha na função (document).ready. (Alterações em negrito.)
    $(document).ready(function(){
        $("#infolist").accordion({
            autoHeight: false
        });
    });
    Nessa linha de código, #infolist está um seletor CSS conectado a um único elemento do DOM que tem um atributo id com o valor infolist; em outras palavras, nossa lista de contatos. Ele é conectado usando notação de ponto ('.') típica do JavaScript à instrução jQuery que usa o método accordion() para exibir esse elemento.

    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 documentação da API do accordion.

  11. Salve o arquivo (Ctrl-S; &#8984-S no Mac).
  12. Retorne ao Web browser e atualize-o. Clique em um dos nomes (que não seja o mais acima) para ver o efeito do accordion em ação. O widget accordion do jQuery trata todos os detalhes do manuseio do DOM e da resposta aos cliques do mouse do usuário.
    Lista do accordion exibida no browser

Utilizando o Tema Default do jQuery para Aprimorar o Estilo

Agora, nosso projeto tem o comportamento que desejados, mas parece muito simples e ainda não tem uma aparência bem organizada. Vamos tratar isso incorporando o tema 'UI lightness' default do jQuery.

  1. Navegue até o local do seu computador em que você fez o download do widget accordion. Dentro da pasta de download, expanda a pasta development-bundle > themes > ui-lightness.
  2. Dentro da pasta ui-lightness, copie (Ctrl-C; &#8984-C no Mac) o arquivo jquery-ui-1.8.1.custom.css e a pasta images, que contém todas as imagens necessárias para que o tema seja renderizado adequadamente.
  3. No IDE, crie uma nova pasta dentro do projeto chamada css. Essa pasta conterá o tema 'UI lightness' para o widget accordion.

    Para tanto, clique com o botão direito do mouse no nó do projeto e selecione Nova > Pasta. (Se Pasta não aparecer como uma opção, clique no botão Novo Arquivo ( Botão Novo Arquivo ) da barra de ferramentas do IDE, em seguida, selecione Outra > Pasta no assistente de Novo Arquivo.) Chame a pasta css e coloque-a no mesmo diretório que o arquivo index.html.

    Nos projetos Java Web, coloque a pasta css na raiz da Web do projeto. Para fazer isso, digite web no campo Pasta Pai.
  4. Coloque os dois itens diretamente na nova pasta css. Para isso, clique com o botão direito do mouse no nó da pasta css e selecione Colar. A pasta do projeto deve ser semelhante ao seguinte:

    Projeto PHP:

    Projeto Java Web:

    Janela dos Projetos - tema default do jQuery contido no projeto Janela dos Projetos - tema default do jQuery contido no projeto
  5. Referencie o arquivo jquery-ui-1.8.1.custom.css de dentro da sua página Web index.html. Adicione a tag <link> a seguir ao cabeçalho da página.
    <link rel="stylesheet" href="css/jquery-ui-1.8.1.custom.css" type="text/css">
  6. Salve o arquivo (Ctrl-S; &#8984-S no Mac).
  7. Retorne ao browser e atualize a página. Observe que a lista agora é exibida usando o tema default do jQuery, o que representa uma melhoria estética em relação à versão simples e não estilizada.
    Lista accordion exibida no browser com o tema default do jQuery

Resumo

Neste tutorial, você aprendeu como adicionar bibliotecas do jQuery ao seu projeto, bem como escrever algumas instruções básicas usando a sintaxe do jQuery. Você também aprendeu como o jQuery interage com o DOM (Modelo de Objetos de Documento) usando variáveis que lembram seletores CSS para afetar a aparência e o comportamento dos elementos em uma página Web.

Finalmente, você explorou brevemente os recursos da biblioteca de IU do jQuery aplicando o widget accordion a uma lista de contatos simples. Depois de implementar o efeito accordion, você aplicou o tema de estilo default do jQuery à lista. Agora você é capaz de apreciar melhor como o jQuery pode ser usado para criar páginas Web dinâmicas, ao mesmo tempo em que melhora a aparência geral e a facilidade de uso.



Consulte Também

Para obter mais informações sobre o jQuery, consulte a documentação oficial:


Para obter mais informações sobre o JavaScript e as funcionalidades do kit de ferramentas do JavaScript em netbeans.org, consulte os seguintes recursos:

  • Conectando um Dojo Tree a uma ArrayList utilizando JSON. Uma introdução ao kit de ferramentas Dojo é fornecida e as etapas são passadas mostrando como interagir com um servidor de backend usando Ajax e JSON.
  • Editando JavaScript. Um documento que descreve as funcionalidades básicas de edição JavaScript fornecidas pelo IDE.
  • Introdução ao Ajax (PHP). Descreve como construir uma aplicação simples usando a tecnologia PHP, ao mesmo tempo em que ensina o fluxo de processo subjacente de uma solicitação do Ajax.
  • Introdução ao Ajax (Java). Descreve como construir uma aplicação simples usando a tecnologia de servlet, ao mesmo tempo em que ensina o fluxo de processo subjacente de uma solicitação do Ajax.
get support for the NetBeans

Support


By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2013, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo