O JQuery possui métodos para que você possa manipular elementos e seus atributos de varias maneiras diferentes, permitindo que você adicione, copie ou remova atributos dos elementos.

  • addClass() – Adiciona classes especificadas nos elementos designados.
  • removeClass() – Remove classes especificadas nos elementos designados.

Você pode saber mais sobre outros métodos de manipulação de atributos no seguinte link:

Manipulation: http://api.jquery.com/category/manipulation/

JQuery - Manipulação

JQuery – Manipulação

Exemplo:

Neste exemplo utilizamos o recurso de manipulação para inserir e remover uma classe CSS nos atributos da imagem.

JQuery

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta charset="utf-8" />
        <title>Desenvolvimento Aberto</title>
        <style type="text/css">
         .imagem {
                border-style: dashed;
                border-width: 10px;
            }
        </style>

        <!-- Está é uma instalação do JQuery, você apenas precisa apontar
             para o respectivo script da versão que você deseja utilizar -->

       <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"> </script>

       <!-- Este é um script JQuery básico que manipula o CSS e um evento de clique.
            Todo o script roda no evento equivalent ao OnLoad da pagina html-->    

       <script>

       // Declara eventos de clique
       $( document ).ready(function() {

           // Manipulação de atributos

           $( "#bnt01" ).click(function() {
               $("img").addClass("imagem");
               });

           $( "#bnt02" ).click(function() {
               $("img").removeClass("imagem");
               });           

        });       

       </script>
    </head>

    <body>

    <h1>Desenvolvimento Aberto - Manipulação de Atributos</h1>

    <img src="Imagem/tecnologia.jpg" alt="tecnologia">
    <p>
        Escolha uma opção:
        </p>
    <button id="bnt01">Adicionar Classe CSS</button>
    <button id="bnt02">Remover Classe CSS</button>

    </body>
    </html>

Um servidor de aplicação Java processa paginas JSP e a transforma em um Servlet, mesmo o mais simples código HTML contido em uma pagina JSP é transformado em um Servlet pelo servidor de aplicação, após a obtenção do Servlet este é compilado para uma linguagem intermediaria chamada de ByteCode que então é interpretada pela maquina virtual Java responsável por executar a aplicação.

Com ajuda do servidor de aplicação Java se dá o processo do protocolo de comunicação para que possamos utilizar a pagina processada e interpretada através do nosso navegador web. Deste modo JavaBeans e Servlets são amplamente utilizados na tecnologia Java Server Pages, seja de um modo implícito ou explicito.

JSP

JSP

Ao criarmos uma simples pagina JSP do tipo HTML o servidor Tomcat a converterá em um Servlet para que possa ser compilada para Bytecode para ser executada pela maquina virtual Java. Você pode ver este processo navegando na aba Server do Eclipse escolhendo a opção Browse Deployment Location e navegando na pasta temporária que o Tomcat utiliza para sua aplicação:

Workspace do Eclipse: C:\Desenvolvimento Aberto\Java\workspace\

Pasta temporária do Tomcat: [workspace] .metadata\.plugins\org.eclipse.wst.server.core\tmp0\work\Catalina\localhost\DaWebApp\org\apache\jsp

Para nossa pagina JSP chamada NewFile.jsp o servidor a transforma em NewFile.jsp.java e em seguida em NewFile.jsp.class

NewFile.jsp

NewFile.jsp

NewFile.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Desenvolvimento Aberto</title>
</head>
<body>
<p>Está página se tornará um Servlet</p>
</body>
</html>

NewFile.jsp.Java (Convertida automaticamente em Servlet pelo Tomcat)

/*
 * Generated by the Jasper component of Apache Tomcat
 * Version: Apache Tomcat/8.0.14
 * Generated at: 2014-11-04 21:02:55 UTC
 * Note: The last modified time of this file was set to
 *       the last modified time of the source file after
 *       generation to assist with modification tracking.
 */
package org.apache.jsp;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.jsp.*;

public final class NewFile_jsp extends org.apache.jasper.runtime.HttpJspBase
    implements org.apache.jasper.runtime.JspSourceDependent {

  private static final javax.servlet.jsp.JspFactory _jspxFactory =
          javax.servlet.jsp.JspFactory.getDefaultFactory();

  private static java.util.Map<java.lang.String,java.lang.Long> _jspx_dependants;

  private javax.el.ExpressionFactory _el_expressionfactory;
  private org.apache.tomcat.InstanceManager _jsp_instancemanager;

  public java.util.Map<java.lang.String,java.lang.Long> getDependants() {
    return _jspx_dependants;
  }

  public void _jspInit() {
    _el_expressionfactory = _jspxFactory.getJspApplicationContext(getServletConfig().getServletContext()).getExpressionFactory();
    _jsp_instancemanager = org.apache.jasper.runtime.InstanceManagerFactory.getInstanceManager(getServletConfig());
  }

  public void _jspDestroy() {
  }

  public void _jspService(final javax.servlet.http.HttpServletRequest request, final javax.servlet.http.HttpServletResponse response)
        throws java.io.IOException, javax.servlet.ServletException {

final java.lang.String _jspx_method = request.getMethod();
if (!"GET".equals(_jspx_method) && !"POST".equals(_jspx_method) && !"HEAD".equals(_jspx_method) && !javax.servlet.DispatcherType.ERROR.equals(request.getDispatcherType())) {
response.sendError(HttpServletResponse.SC_METHOD_NOT_ALLOWED, "JSPs only permit GET POST or HEAD");
return;
}

    final javax.servlet.jsp.PageContext pageContext;
    javax.servlet.http.HttpSession session = null;
    final javax.servlet.ServletContext application;
    final javax.servlet.ServletConfig config;
    javax.servlet.jsp.JspWriter out = null;
    final java.lang.Object page = this;
    javax.servlet.jsp.JspWriter _jspx_out = null;
    javax.servlet.jsp.PageContext _jspx_page_context = null;

    try {
      response.setContentType("text/html; charset=ISO-8859-1");
      pageContext = _jspxFactory.getPageContext(this, request, response,
      			null, true, 8192, true);
      _jspx_page_context = pageContext;
      application = pageContext.getServletContext();
      config = pageContext.getServletConfig();
      session = pageContext.getSession();
      out = pageContext.getOut();
      _jspx_out = out;

      out.write("\r\n");
      out.write("<!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">\r\n");
      out.write("<html>\r\n");
      out.write("<head>\r\n");
      out.write("<meta http-equiv=\"Content-Type\" content=\"text/html; charset=ISO-8859-1\">\r\n");
      out.write("<title>Desenvolvimento Aberto</title>\r\n");
      out.write("</head>\r\n");
      out.write("<body>\r\n");
      out.write("<p>Está página se tornará um Servlet</p>\r\n");
      out.write("\r\n");
      out.write("</body>\r\n");
      out.write("</html>");
    } catch (java.lang.Throwable t) {
      if (!(t instanceof javax.servlet.jsp.SkipPageException)){
        out = _jspx_out;
        if (out != null && out.getBufferSize() != 0)
          try {
            if (response.isCommitted()) {
              out.flush();
            } else {
              out.clearBuffer();
            }
          } catch (java.io.IOException e) {}
        if (_jspx_page_context != null) _jspx_page_context.handlePageException(t);
        else throw new ServletException(t);
      }
    } finally {
      _jspxFactory.releasePageContext(_jspx_page_context);
    }
  }
}

Utilizando um Servlet e um Javabean

Agora que já sabemos como o servidor de aplicação Java Tomcat funciona em seus bastidores, também sabemos que não precisamos de uma pagina JSP em si para criar uma aplicação web, já que sabemos que ela é transformada em um Servlet de qualquer modo, podemos criar um Servlet diretamente.

Vamos então utilizar um Servlet para criar uma pagina web utilizando seu método de extensão do protocolo HTTP chamado doGet e utilizar um Javabean para criar uma classe do objeto de dados. Não utilizaremos um Database neste exemplo básico mas sim uma lista contendo Arrays de dados que serão exibidos em uma tabela HTML:

Servlet e JavaBeans

Servlet e JavaBeans

Exemplo:

Neste exemplo utilizamos um Servlet para criar uma pagina html e inicializar dados do objeto JavaBean. Um objeto JavaBean por convenção precisa ter um construtor padrão que possa ser inicializado sem precisar de qualquer parâmetro, mas para facilitar a manipulação do JavaBean pelo Servlet declaramos um construtor Overload, possibilitando que o Servlet mantenha o padrão regido por sua convenção e também possibilite a criação de parâmetros na inicialização do Bean.

Java

Servlet

package org.desenvolvimento.aberto;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

// Ler Servlet ao iniciar
@WebServlet(urlPatterns="/MeuJServlet", loadOnStartup = 1)

public class MeuJServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	public MeuJServlet() {
		super();
	}

	public void init(ServletConfig config) throws ServletException {		

		// Inicia configuração
		super.init(config);

		// Cria uma Lista com o objeto JavaBean
		List<MeuJavaBean> registros = new ArrayList<MeuJavaBean>();

		// Insere dados na lista
		registros.add(new MeuJavaBean("Ricardo", "Olá Pessoal"));
		registros.add(new MeuJavaBean("Mantovani",
				"Bem-vindos ao Desenvolvimento Aberto"));
		registros
				.add(new MeuJavaBean("Ricardo",
						"Fiquem atualizados com as novas e classicas técnicas de programação"));
		registros.add(new MeuJavaBean("Mantovani",
				"Participem dos projetos de código Aberto."));

		// Define um atributo para o contexto do servlet
		getServletContext().setAttribute("registros", registros);

	}

	protected void doGet(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {

		// Recupera contexto do JavaBean
		@SuppressWarnings("unchecked")
		List<MeuJavaBean> registros =  (List<MeuJavaBean>) getServletContext().getAttribute("registros");

		// Cria página HTML
		PrintWriter html = response.getWriter();

		html.println("<!DOCTYPE html>");
		html.println("<head><Title>Desenvolvimento Aberto</title>");

		// CSS
		html.println("<style>");
		html.println("td, th {");
		html.println("border: none;");
		html.println("background-color: #dddddd;");
		html.println("padding: 5px;");
		html.println("width: 200px; }");

		html.println("</style>");
		html.println("</head>");

		//  Corpo da página
		html.println("<html>");
		html.println("<body>");
		html.println("<h1>Desenvolvimento Aberto</h1>");
		html.println("<h2>Usando Java Servlets e JavaBeans</h2>");

		// Cria tabela
		html.println("<table>");
		html.println("<tr>");
		html.println("<th>Nome:</th>");
		html.println("<th>Comentário:</th>");
		html.println("</tr>");

		for (MeuJavaBean reg : registros) {
			html.println("<tr>");
			html.println("<td>" + reg.getNome() + "</td>");
			html.println("<td>" + reg.getComentario() + "</td>");
			html.println("</tr>");
		}

		html.println("</table>");

		html.println("</body>");
		html.println("</html>");
	}

	protected void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {

		// Chama método GET
		doGet(request, response);
	}

}

JavaBean

package org.desenvolvimento.aberto;

public class MeuJavaBean {
	// Declara atributo
	private String nome;
	private String comentario;

	// Construtor Default da classe
	public MeuJavaBean() {

	}

	// Construtor Overload
	public MeuJavaBean(String nome, String comentario) {
		this.nome = nome;
		this.comentario = comentario;
	}

	// Métodos Getter e Setter
	public String getNome() {
		return nome;
	}

	public void setNome(String nome) {
		this.nome = nome;
	}

	public String getComentario() {
		return comentario;
	}

	public void setComentario(String comentario) {
		this.comentario = comentario;
	}

}

 

JSP – JavaBeans Scope – Session – Java

Publicado: 2 de novembro de 2014 em Java

O escopo de um objeto descreve a disponibilidade de sua abrangência e quem tem acesso a ele. Por exemplo, se um objeto é definido para ter alcance a uma pagina página, então ele está disponível apenas durante a duração da solicitação atual nessa página antes de ser destruído pelo contêiner. Neste caso, somente a página atual tem acesso a esses dados, e ninguém mais pode lê-lo. No outro extremo da escala, se um objeto tem espaço de aplicação, em seguida, qualquer página pode utilizar os dados porque ele estará disponível durante toda a aplicação, o que significa até que o contêiner seja destruído.

Escopos de um JavaBean

  • Page: Os objetos com escopo de página são acessíveis apenas dentro da página em que são criados.
  • Request: Os objetos com escopo de solicitação são acessíveis a partir de páginas que processão o o mesmo pedido em que eles foram criados.
  • Session: Os objetos com escopo de sessão são acessíveis a partir de páginas processadas que estão na mesma sessão em que eles foram criadas.
  • Application: Os objetos com escopo de aplicação são acessíveis a partir de páginas JSP que residem na mesma aplicação. Isso cria um objeto global que está disponível para todas as páginas.

 

Criando uma aplicação com o escopo de Sessão

Caso você não defina um escopo quando você declara o uso de um Bean em uma pagina JSP, o escopo padrão estabelecido será por pagina, ou seja apenas a pagina no qual o Bean pertence poderá acessar os valores das propriedades nelas modificadas.

Quando utilizamos o escopo por sessão os Beans funcionam de certo modo como objetos estáticos ou seja toda a sessão poderá acessar os mesmos valores de suas propriedades não importa a quantidade de paginas existentes na aplicação que utilizam o mesmo Bean. Se aberto uma nova sessão o Bean então será  inicializado de acordo com seus valores no construtor do objeto.

1 – Crie uma aplicação Web com duas paginas JSP chamadas de index.jsp e index2.jsp. Crie um classe chamada de MeuBean.java e utilize os códigos abaixo em cada respectivo arquivo. Note que estamos utilizando o método que altera a propriedade Setter do Bean com parâmetros. Assim que você compilar sua aplicação o construtor do Bean inicializará o valor da propriedade cor do texto do Box como vermelho (Red), utilize manualmente o parâmetro para mudar a cor do texto para azul (Blue) dentro do navegador do Eclipse cujo nos propicia uma sessão única:

?cor=blue
Session - parâmetro cor

Session – parâmetro cor

2 – Apague o parâmetro e mude manualmente a URL do navegador do Eclipse para a index2.jsp, você notará que o Bean manteve a cor da propriedade que definimos na pagina anterior, isto é devido estarmos na mesma sessão, deste modo o construtor da classe não reinicializou o valor da propriedade cor:

Session - Página 2

Session – Página 2

3 – Para abrir outra sessão você precisa somente copiar a URL da pagina 2 do navegador do Eclipse e colar no seu Browser, você verá que quando outra sessão da aplicação web é inicializada o Bean é inicializado novamente. Você pode agora brincar com a aplicação no navegador do Eclipse e no navegador externo, para entender melhor como funciona os JavaBeans por sessão:

Sessão - Firefox

Sessão – Firefox

Exemplo:

Neste exemplo criamos duas paginas JSP e um JavaBean que interage entre as paginas pela sessão do navegador, você poderá brincar com as propriedades de cores no texto da pagina para entender como é utilizado o recurso de sessão de um objeto Bean utilizando o navegador do Eclipse e um navegador externo ao mesmo tempo.

Java

package org.desenvolvimento.aberto;

public class MeuBean {

  // Declara atributo
  private String cor;

  // Construtor da classe
  public MeuBean()
  {
	  cor = "Red";
  }

  // Método Getter
  public String getCor()
  {
	  return cor;
  }

  // Método Setter
  public void setCor(String cor)
  {
	  this.cor = cor;
  }

}

JSP – index.jsp

<html>
<head>
<title>Desenvolvimento Aberto</title>

<!-- Inicializa o JavaBean -->
<jsp:useBean id="meubean" class="org.desenvolvimento.aberto.MeuBean" scope="session" />
<style type="text/css">

div {
    background-color: lightgrey;
    width: 300px;
    padding: 25px;
    border: 25px solid black;
    margin: 25px;
}

</style>
</head>
<body>

	<h1>JavaBeans e Páginas JSP</h1>

	<h2>Escopo: Session - Pagina 1 </h2>

	<h4>Este é o valor da cor:</h4>

	<jsp:setProperty name="meubean" property="cor" param="cor" /> 

	<div style="color: <jsp:getProperty name="meubean" property="cor" />">
	Desenvolvimento Aberto <br> Página 1</div>

	<p>
		<jsp:getProperty name="meubean" property="cor" />
	</p>

</body>
</html>

JSP – index2.jsp

<html>
<head>
<title>Desenvolvimento Aberto</title>

<!-- Inicializa o JavaBean -->
<jsp:useBean id="meubean" class="org.desenvolvimento.aberto.MeuBean" scope="session"/>
<style type="text/css">

div {
    background-color: lightgrey;
    width: 300px;
    padding: 25px;
    border: 25px solid black;
    margin: 25px;
}

</style>
</head>
<body>

	<h1>JavaBeans e Páginas JSP</h1>

	<h2>Escopo: Session - Pagina 2 </h2>

	<h4>Este é o valor da cor:</h4>

	<jsp:setProperty name="meubean" property="cor" param="cor" /> 

	<div style="color: <jsp:getProperty name="meubean" property="cor" />">
	Desenvolvimento Aberto <br> Página 2</div>

	<p>
		<jsp:getProperty name="meubean" property="cor" />
	</p>

</body>
</html>

A especificação JavaBeans foi desenvolvida com o proposito de criar componentes gráficos, mas os JavaBeans representam um padrão de Design Patterns para componentes também sem rosto em um aplicativo do lado do servidor. Os componentes JavaBeans podem ser usado como blocos de construção em aplicações, assim, um usuário pode estar usando algum tipo de ferramenta de criação para se conectar e personalizar um conjunto de componentes para atuar como um aplicativo, por exemplo, um botão em uma aplicação gráfica seria um Bean.

Outros componentes JavaBeans são como aplicações regulares, que pode então ser criadas em conjunto em documentos compostos. Assim, uma planilha Bean pode ser incorporada dentro de uma página Web.

Especificações JavaBean: http://www.oracle.com/technetwork/java/javase/tech/spec-136004.html

Propriedades – Getter e Setter

Propriedades são atributos que afetam a aparência ou o comportamento de um Bean, em algumas linguagens de scripts estas são acessadas diretamente pelos campos de seu objeto, como em javascript:

objeto.label = "rotulo"; // escrita
objeto.label;            // leitura

Um JavaBean por convenção possui propriedades que devem sempre ser acessadas ​​através de chamadas de métodos em seu objeto proprietário. Para propriedades legíveis haverá um método Getter para ler o valor da propriedade. Para propriedades graváveis ​​haverá uma método Setter para permitir que o valor da propriedade seja atualizado:

objeto.setLabel("rotulo"); // escrita
objeto.getLabel();         // leitura

Tipos de Propriedades JavaBeans

  • Read-only – Somente métodos Getters.
  • Write-only – Somente métodos Setters.
  • Read/write – Getters e Setters.

Utilizando Propriedades de um Bean

Em paginas JSP podemos acessar os métodos Getter e Setter de um JavaBean através de propriedades das tags <jsp: / >, que também são conhecidos pelo nome de Scriptlets. Utilizamos um projeto do tipo Maven com o arquétipo Web App, mas caso você queira pode utilizar um projeto dinâmico para web. Crie uma pagina JSP e uma classe Java e utilize o código abaixo para cada respectivo arquivo:

1 – Você pode notar que o primeiro valor utilizado é inicializado no construtor do Bean, para isto você deve excluir a primeira chamada do método Setter da pagina JSP, utilize os comentários no código para saber mais onde excluir:

Valor inicializado no construtor

Getter – Valor inicializado no construtor

2 – Escrevendo a chamada do primeiro método Setter de volta na pagina JSP você estará definindo o valor para o Bean dinamicamente:

Setter - Valor dinâmico

Setter – Valor dinâmico

3 – Se você utilizar um parâmetro na URL do navegador o segundo método Setter irá definir um valor para a propriedade, use este exemplo e ao final da URL digite:

?parametro=Valor+Modificado+Pelo+parametro
Setter - Parâmetros

Setter – Parâmetros

Exemplo:

Neste exemplo criamos um JavaBean e utilizamos suas propriedades para definir e recuper valores em uma pagina JSP.

Java

package org.desenvolvimento.aberto;

public class MeuBean {

  // Declara atributo
  private String nome;

  // Construtor da classe
  public MeuBean()
  {
	  nome = "Desenvolvimento Aberto";
  }

  // Método Getter
  public String getNome()
  {
	  return nome;
  }

  // Método Setter
  public void setNome(String nome)
  {
	  this.nome = nome;
  }

}

JSP

<html>
<head>
<title>Desenvolvimento Aberto</title>
  <style type="text/css">
    p { color:blue }
  </style>
</head>
<body>
	<!-- Inicializa o JavaBean -->

	<jsp:useBean id="meubean" class="org.desenvolvimento.aberto.MeuBean" /> 

	<!-- Exclua está propriedade para utilizar o valor incializado no construtor do Bean --> 

	<jsp:setProperty name="meubean" property="nome" value="Valor modificado pelo metodo Setter" />	

	<!-- Para usar o Setter utilizando um parâmetro: -->

	<jsp:setProperty name="meubean" property="nome" param="parametro" />

	<h1>JavaBeans e Páginas JSP</h1>

	<h2>Propriedades - Getter e Setter</h2>

	<h4>Este é o valor do meu método Getter do Bean:</h4>

	<p>
	   <jsp:getProperty name="meubean" property="nome" />
	</p>		

</body>
</html>

JSP – JavaBean Components – Java

Publicado: 31 de outubro de 2014 em Java

Um JavaBean também conhecido como Bean é uma especificação que define um conjunto de convenções de programação para classes Java que são usadas como componentes conectáveis​​. Os Beans geralmente representam classes como Produtos, Fornecedores, Pessoas entre outras e podem ser utilizados em paginas JSP puras ou juntamente com os Servlets. É importante não confundir os JavaBeans com os Enterprise JavaBeans, ambos são amplamente utilizados em aplicações web escritas em Java, e veremos muito mais sobre eles nos próximos posts da categoria Java.

Um JavaBean pode encapsular todas as informações sobre o item que ele representa em um pacote simples. Suponha que você tenha um Bean contendo informações sobre um funcionário, como o nome do funcionário, data de admissão, e-mail, endereço e etc. Você pode passar este Bean para outros componentes, fornecendo todas as informações sobre o funcionário de uma única vez. Você também pode adicionar mais informações sobre o funcionário, basta criar mais propriedades no JavaBean. Um outro benefício da utilização de um Bean é poder encapsular todas as regras sobre suas propriedades.

JavaBean

JavaBean

Para usar um Javabean em uma página, você deve informar ao contêiner JSP o tipo de Bean e associá-lo com um nome e uma classe, em outras palavras, você deve declarar o Bean. Você pode fazer isto utilizando as tags JSP:

<jsp:useBean id="meubean" class="org.desenvolvimento.aberto.MeuBean" />

Após ter declarado o JavaBean você pode utilizar suas propriedades para retornar ou adicionar o valor correspondente a uma propriedade, para retornar um valor você pode utilizar a instrução getProperty, adicionando aos atributos o identificador do seu Bean e a propriedade que deseja retornar:

<jsp:getProperty name="meubean" property="arquivos" />

Exemplo:

Neste exemplo utilizamos o JavaBean criando uma classe Java bem comum que serve para inicializar uma lista de imagens em uma pagina JSP.

Obs: O projeto criado no Eclipse na imagem acima utiliza o tipo Apache Maven com um arquétipo webapp e o Apache Tomcat, apesar de você poder utilizar um projeto web dinâmico padrão do Java EE, o ideal é manter esta configuração pois é a configuração utilizada em projetos profissionais, você encontra informações de como instalar, configurar e utilizar o Apache Maven e o Tomcat ou qualquer outra ferramenta utilizada neste site na categoria Java.

Java

package org.desenvolvimento.aberto;

import java.util.*;

public class MeuBean {

	// declara propriedades
	private static int indice = -1;
	private List<String> arquivos;

	// Construtor da classe
	// Por convenção um Java Bean não possui
	// parâmentros no construtor
	public MeuBean() {
		listaInicial();
	}

	// Método Getter
	public String getArquivos() {

		indice++;

		if (indice > arquivos.size() - 1)
		{
			indice = 0;
		}

		return (String) arquivos.get(indice);
	}

	// Metodo inicializado no construtor da classe
	private void listaInicial()
	{
		arquivos = new ArrayList<String>();
		arquivos.add("imagem-verde.jpg");
	}
}

JSP

<html>
<head>
<title>Desenvolvimento Aberto</title>
</head>
<body>
	<h1>JavaBean e Páginas JSP</h1>

	<jsp:useBean id="meubean" class="org.desenvolvimento.aberto.MeuBean" />

	<img src="<jsp:getProperty name="meubean" property="arquivos" />">		

</body>
</html>

 

O Brackets é um projeto de código aberto, inicialmente criado pela Adobe, agora mantido por uma comunidade de desenvolvedores ativa e crescente. O Brackets se encontra sob a licença MIT, e é atualmente mantido no GitHub, seu download está disponível para as plataformas para Mac, Windows e Linux.

O Brackets é um novo editor de código para HTML, CSS e JavaScript construídos com HTML, CSS e JavaScript. O Brackets possui vários recursos inovadores entre eles ​​atualizações HTML e CSS em tempo real (sem recarregar o navegador) e também possui realce de elementos selecionados em arquivos HTML e CSS que são destacados dentro do navegador, mas para estes recursos o Brackets requer trabalho em conjunto com Google Chrome. O Brackets também completa automaticamente código JQuery.

Projeto Brackets: http://brackets.io/

Outros Projetos Adobe OpenSource: http://html.adobe.com/opensource/

Instalando o Google Chrome no Ubuntu

Para instalar o Google Chrome no Ubuntu precisamos instalar alguns pacotes adicionais que podem ser encontrados no site de pacotes do Ubuntu.

1 – Primeiro baixe o Google Chrome: http://www.google.com.br/chrome/browser/

Google Chrome Downloads

Google Chrome Downloads

2 – Escolha a versão adequada a seu computador e aceite a licença:

Licença

Licença

3 – Baixe o pacote LibIndicator7: http://packages.ubunu.com/trusty/libs/libindicator7

libindicator7

libindicator7

4 – Baixe o pacote Libappindicator1: http://packages.ubuntu.com/trusty/libappindicator1

Libindicatator1

Libindicatator1

5 – Instale os três pacotes com a extensão Debian e instale o Brackets utilizando um PPA para o Ubuntu:

sudo dpkg -i libindicator7_12.10.2+14.04.20140402-0ubuntu1_amd64.deb
sudo dpkg -i libappindicator1_12.10.1+13.10.20130920-0ubuntu2_amd64.deb
sudo dpkg -i google-chrome-stable_current_amd64.deb

sudo add-apt-repository ppa:webupd8team/brackets
sudo apt-get update
sudo apt-get install brackets
Terminal

Terminal

6 – Você pode abrir o Google Chrome caso deseje testar a instalação:

Google Chrome

Google Chrome

7 – Abra o Brackets e utilize o código abaixo:

Brackets Editor

Brackets Editor

8 – Clique no ícone do raio localizado no canto superior direito do editor, chamado Live Preview para verificar o resultado do código:

Live Preview

Live Preview

Exemplo:

Verifique que o Brackets possui um ótimo editor cheio de recursos para desenvolvimento web, note que entre os recursos o Brackets auto completa seu código JQuery. Para saber como utilizar o Brackets clique no link a seguir:

Usando o Brackets: https://github.com/adobe/brackets/wiki/How-to-Use-Brackets

JQuery

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta charset="utf-8" />
        <title>Desenvolvimento Aberto</title>

        <!-- Está é uma instalação do JQuery, você apenas precisa apontar
             para o respectivo script da versão que você deseja utilizar -->

       <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"> </script>

       <!-- Este é um script JQuery básico que manipula o CSS e um evento de clique.
            Todo o script roda no evento equivalent ao OnLoad da pagina html-->    

       <script>
       $( document ).ready(function() {

        // Seletores - seleciona todos os elementos
        // $(*).css("color", "blue");  

       // Seleciona por elemento
           $("body").css("background-color", "#FFFFFF");

        // Seleciona por ID
           $("#header").css("background-color", "#36648B")
                       .css("color", "white")
                       .css("padding", "5px")
                       .css("text-align","center");                  

           $("#section").css("width", "740px")
                        .css("float","left")
                        .css("padding","15px");

           $("#footer").css("background-color", "#36648B")
                       .css("color", "white")
                       .css("clear", "both")
                       .css("text-align", "center")
                       .css("padding","5px");

           // Seleciona por Classe
           $(".caixa").css("-moz-box-shadow", "5px 5px 5px 5px #777777")
                      .css("-webkit-box-shadow", "5px 5px 5px 5px #777777")
                      .css("box-shadow", "5px 5px 5px 5px #777777")
                      .css("padding", "20px");

           $(".imagem").css("padding", "5px")
                       .css("border", "10px");

           $("a").css("color", "#000000");

           $("p").slideUp(100).slideDown(3000);      

        $( "a" ).click(function( event ) {
            alert( "Desenvolvimento Aberto.\nObrigado por visitar!" );
        });
        });       

       </script>
    </head>

    <body>
    <div id="header">
    <h1>Desenvolvimento Aberto</h1>
    </div>

    <div id="section">

      <p class="caixa">

        <img src="Imagem/imagem01.jpg" width="350" height="300" alt="minha imagem" align="left" class="imagem"/>

        Desenvolvimento Aberto é uma organização voltada para o aprendizado e discussão de técnicas de
        desenvolvimento focado em algumas linguagens de programação sendo parcialmente/totalmente abertas ou
        com licenças gratuitas para desenvolvedores de cada uma de suas respectivas marcas registradas.<br />  <br />
        Desenvolvimento Aberto foi escrito e desenvolve utilizando ferramentas gratuitas disponibilizadas
        pelas melhores empresas de software da atualidade, incluindo a própria hospedagem e design deste site,
        sendo assim, também proporciona conteúdo gratuito, isso quer dizer que você não paga nada para aprender
        e utilizar as tecnologias de ponta que podem ser manuseadas através das linguagens de programação mais
        requisitadas pelas empresas no mercado atual.       

        </p>
        <a href="#">Clique aqui!!!</a>
            </div>

    <div id="footer">
    Desenvolvimento Aberto © desevolvimento.aberto@live.com
    </div>

    </body>
    </html>

O JQuery emprestou do CSS o conceito de seletores para tornar fácil manipular qualquer elemento em uma pagina da web. Os seletores permitem acesso direto aos elementos de uma pagina utilizando varias técnicas diferentes, como seleção por atributos, seletores básicos, por filhos, utilizando filtros, forms, hierarquia, visibilidade e outros.

Você pode saber mais sobre os seletores de formulários no seguinte link:

Basic Filter: http://api.jquery.com/category/selectors/form-selectors/

Seletores de Formulários

Seletores de Formulários

Exemplo:

Neste exemplo utilizamos tipos de seletores para selecionar e modificar os elementos CSS da pagina web.

JQuery

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta charset="utf-8" />
	<title>Desenvolvimento Aberto</title>

	<!-- Está é uma instalação do JQuery, você apenas precisa apontar
	     para o respectivo script da versão que você deseja utilizar -->

   <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"> </script>

   <!-- Este é um script JQuery básico que manipula o CSS e um evento de clique.
        Todo o script roda no evento equivalent ao OnLoad da pagina html-->     

   <script>
   $( document ).ready(function() {

    // Seleciona por ID
   	 $("#header").css("background-color", "#000000")
   	             .css("color", "white")
   	             .css("padding", "5px")
   	             .css("text-align","center");               	 

       $("#section").css("width", "350px")
                    .css("float","left")
                    .css("padding","15px");

       $("#legenda").css("width", "500px")
                    .css("float","right")
                    .css("padding","5px");       

       $("#footer").css("background-color", "#000000")
                   .css("color", "white")
                   .css("clear","both")
                   .css("text-align", "center")
   	             .css("padding","5px");

       // Seleciona por Classe
       $(".caixa").css("-moz-box-shadow", "5px 5px 5px 5px #777777")
                  .css("-webkit-box-shadow", "5px 5px 5px 5px #777777")
                  .css("box-shadow", "5px 5px 5px 5px #777777")
                  .css("padding", "10px");

       // Seleciona por elementos
       $("td, th").css("border","none")
                  .css("background-color","#dddddd")
                  .css("padding","5px")
                  .css("width","100px")

   	 $("a").css("color", "#000000");

       // ******************************
       // ** Seletores de Formulários **
       // ******************************	 

       $(":text").css("background-color","yellow");
       $(":password").css("background-color","limegreen");
       $(":radio").parent().css("background-color","aqua");
       $(":submit").css("background-color","fuchsia");

	});       

   </script>
</head>

<body>
<div id="header">
<h1>Desenvolvimento Aberto</h1>
</div>

<div id="section">

    <fieldset class="caixa">
        <legend>Desenvolvimento Aberto - JQuery</legend>
        <p>
          Nome: <br>
          <input type="text" name="nome">
        </p>
        <p>
          E-mail: <br>
          <input type="text" name="email" size="35">
        </p>

        <p>
          senha: <br>
          <input type="password" name="pwd">
        </p>
        <p>
          <input type="radio" name="usuario" value="registrado">Registrado <br>
          <input type="radio" name="usuario" value="naoregistrado">Não Registrado
        </p>
        <p>
          <hr>
          <input type="submit" name="enviar" size="35">
        </p>
    </fieldset>

	</div>

	<div id="legenda">
   <p>
        <span style="background-color:yellow;font-weight:bold">Formulário</span> seleciona elemento de texto.
   </p>
   <p>
        <span style="background-color:limegreen;font-weight:bold">Formulário</span> seleciona elemento de senha.
   </p>
   <p>
        <span style="background-color:aqua;font-weight:bold">Formulário</span> seleciona elemento de radio.
   </p>
   <p>
        <span style="background-color:fuchsia;font-weight:bold">Formulário</span> seleciona elemento de botão.
   </p>
   </div>

<div id="footer">
Desenvolvimento Aberto © desevolvimento.aberto@live.com
</div>

</body>
</html>

O JQuery emprestou do CSS o conceito de seletores para tornar fácil manipular qualquer elemento em uma pagina da web. Os seletores permitem acesso direto aos elementos de uma pagina utilizando varias técnicas diferentes, como seleção por atributos, seletores básicos, por filhos, utilizando filtros, forms, hierarquia, visibilidade e outros.

Você pode saber mais sobre os seletores de atributos no seguinte link:

Basic Filter: http://api.jquery.com/category/selectors/attribute-selectors/

JQuery - Seletores de Atributos

JQuery – Seletores de Atributos

Exemplo:

Neste exemplo utilizamos tipos de seletores para selecionar e modificar os elementos CSS da pagina web.

JQuery

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta charset="utf-8" />
	<title>Desenvolvimento Aberto</title>

	<!-- Está é uma instalação do JQuery, você apenas precisa apontar
	     para o respectivo script da versão que você deseja utilizar -->

   <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"> </script>

   <!-- Este é um script JQuery básico que manipula o CSS e um evento de clique.
        Todo o script roda no evento equivalent ao OnLoad da pagina html-->     

   <script>
   $( document ).ready(function() {

    // Seleciona por ID
   	 $("#header").css("background-color", "#000000")
   	             .css("color", "white")
   	             .css("padding", "5px")
   	             .css("text-align","center");               	 

       $("#section").css("width", "400px")
                    .css("float","left")
                    .css("padding","15px");

       $("#footer").css("background-color", "#000000")
                   .css("color", "white")
                   .css("clear","both")
                   .css("text-align", "center")
   	             .css("padding","5px");

       // Seleciona por Classe
       $(".caixa").css("-moz-box-shadow", "5px 5px 5px 5px #777777")
                  .css("-webkit-box-shadow", "5px 5px 5px 5px #777777")
                  .css("box-shadow", "5px 5px 5px 5px #777777")
                  .css("padding", "8px");

       // Seleciona por elementos
       $("td, th").css("border","none")
                  .css("background-color","#dddddd")
                  .css("padding","5px")
                  .css("width","100px")                

   	 $("a").css("color", "#000000");

   	 // ***********************************
       // ** Seletores de Filtro Atributos **
       // ***********************************	 

       // Atributo nome
       $("td[colspan]").css("background-color", "yellow");

       // Atributo valor
       $("td[colspan=3]").css("background-color", "limegreen");

       // Atributo por partes do conteudo
       $("td[title*=Achar]").css("background-color", "aqua");

       // Atributo por partes finais do conteudo
       $("td[title$=final]").css("background-color", "fuchsia");
	});       

   </script>
</head>

<body>
<div id="header">
<h1>Desenvolvimento Aberto</h1>
</div>

<div id="section">

    <table class="caixa">
			<tr>
				<th></th>
				<th>10:00</th>
				<th>14:00</th>
				<th>16:00</th>
				<th>19:00</th>
			</tr>
			<tr>
				<th>Segunda</th>
				<td colspan="2"><span>Java</span></td>
				<td>C++</td>
				<td title="Achar um valor no conteudo do atributo">C#</td>
			</tr>
			<tr>
				<th>Terça</th>
				<td colspan="3">Ruby</td>
				<td>Rails</td>
			</tr>
			<tr>
				<th>Quarta</th>
				<td colspan="2">Javascript</td>
				<td>CSS</td>
				<td title="Procure minha palavra final">JQuery</td>
			</tr>
			<tr>
				<th>Quinta</th>
				<td colspan="3">Python</td>
				<td>Linux</td>
			</tr>
			<tr>
				<th>Sexta</th>
				<td colspan="3" >Abap</td>
				<td><span>NetWeaver</span></td>
			</tr>
		</table>
		  </div>

   <p>
     <span style="background-color:yellow;font-weight:bold">Atributo</span> busca um atributo da tag.
   </p>
   <p>
     <span style="background-color:limegreen;font-weight:bold">Atributo</span> busca um atributo da tag por valor.
   </p>
   <p>
     <span style="background-color:aqua;font-weight:bold">Atributo</span> busca um atributo da tag por partes do valor.
   </p>
   <p>
     <span style="background-color:fuchsia;font-weight:bold">Atributo</span> busca um atributo da tag pelo valor final.
   </p>	

<div id="footer">
Desenvolvimento Aberto © desevolvimento.aberto@live.com
</div>

</body>
</html>

O JQuery emprestou do CSS o conceito de seletores para tornar fácil manipular qualquer elemento em uma pagina da web. Os seletores permitem acesso direto aos elementos de uma pagina utilizando varias técnicas diferentes, como seleção por atributos, seletores básicos, por filhos, utilizando filtros, forms, hierarquia, visibilidade e outros.

Os seletores de filtro de conteúdo são divididos em quatro tipos, eles são:

  • $(elemento:contains) – Seleciona todos os elementos que contem um texto especifico.
  • $(elemento:empty) – Seleciona todos os elementos vazios.
  • $(elemento:has()) – Seleciona todos elementos que coincidem com os elementos especificados.
  • $(elemento:parent) – Seleciona todos os elementos que possuem pelo menos um parente.
JQuery - Filtro de Conteúdo

JQuery – Filtro de Conteúdo

Exemplo:

Neste exemplo utilizamos tipos de seletores para selecionar e modificar os elementos CSS da pagina web. Preste atenção ao código HTML que contem tags que são os elementos especificados para se utilizar a seleção por filtro de conteúdo.

JQuery

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
	<meta charset="utf-8" />
	<title>Desenvolvimento Aberto</title>
	
	<!-- Está é uma instalação do JQuery, você apenas precisa apontar
	     para o respectivo script da versão que você deseja utilizar -->
	     
   <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"> </script>
           
   <!-- Este é um script JQuery básico que manipula o CSS e um evento de clique.
        Todo o script roda no evento equivalent ao OnLoad da pagina html-->     
           
   <script>    
   $( document ).ready(function() {
                                  
    // Seleciona por ID
   	 $("#header").css("background-color", "#000000")
   	             .css("color", "white")
   	             .css("padding", "5px")
   	             .css("text-align","center");               	 
   	 
       $("#section").css("width", "900px")
                    .css("float","left")
                    .css("padding","15px");
       
       $("#footer").css("background-color", "#000000")
                   .css("color", "white")
                   .css("text-align", "center")
   	             .css("padding","5px");
   	             
       // Seleciona por Classe
       $(".caixa").css("-moz-box-shadow", "5px 5px 5px 5px #777777")
                  .css("-webkit-box-shadow", "5px 5px 5px 5px #777777")
                  .css("box-shadow", "5px 5px 5px 5px #777777")
                  .css("padding", "8px");
       
       // Seleciona por elementos
       $("td, th").css("border","none")
                  .css("background-color","#dddddd")
                  .css("padding","5px")
                  .css("width","100px")                
         	 
   	 $("a").css("color", "#000000");
   	 
   	 // *********************************
       // ** Seletores de Filtro Conteúdo **
       // *********************************	 
       
       // Filtro contem
       $("td:contains(Abap)").css("background-color", "yellow");
       
       // Filtro vazio
       $("td:empty").css("background-color", "limegreen");
       
        // Filtro contem um elemento
       $("td:has(span)").css("background-color", "aqua");
       
       // Filtro elemento parente
       $( "th:parent" ).css("background-color", "fuchsia")
                       .fadeTo( 2500, 0.3 );
       
	});       

   </script>
</head>
 
<body>
<div id="header">
<h1>Desenvolvimento Aberto</h1>
</div>
 
<div id="section">
    
    <table class="caixa">
			<tr>
				<th></th>
				<th>10:00</th>
				<th>14:00</th>
				<th>16:00</th>
				<th>19:00</th>
			</tr>
			<tr>
				<th>Segunda</th>
				<td colspan="2"><span>Java</span></td>
				<td>C++</td>
				<td>C#</td>
			</tr>
			<tr>
				<th>Terça</th>
				<td colspan="3">Ruby</td>
				<td></td>
			</tr>
			<tr>
				<th>Quarta</th>
				<td colspan="2">Javascript</td>
				<td>CSS</td>
				<td>JQuery</td>
			</tr>
			<tr>
				<th>Quinta</th>
				<td colspan="3">Python</td>
				<td></td>
			</tr>
			<tr>
				<th>Sexta</th>
				<td colspan="3" >Abap</td>
				<td><span>NetWeaver</span></td>
			</tr>
		</table>
		  </div>
		  
   <p>
     <span style="background-color:yellow;font-weight:bold">Filtro</span> busca um conteúdo. 
   </p>
   <p>
     <span style="background-color:limegreen;font-weight:bold">Filtro</span> conteúdos vazios. 
   </p>
   <p>
     <span style="background-color:aqua;font-weight:bold">Seletor</span> contem a tag (span). 
   </p>
   <p>
     <span style="background-color:fuchsia;font-weight:bold">Seletor</span> contem pelo menos um parente.
   </p>	
   
<div id="footer">
Desenvolvimento Aberto © desevolvimento.aberto@live.com
</div>

</body> 
</html>

O JQuery emprestou do CSS o conceito de seletores para tornar fácil manipular qualquer elemento em uma pagina da web. Os seletores permitem acesso direto aos elementos de uma pagina utilizando varias técnicas diferentes, como seleção por atributos, seletores básicos, por filhos, utilizando filtros, forms, hierarquia, visibilidade e outros.

Você pode saber mias sobre os seletores de filtros básicos no seguinte link:

Basic Filter: http://api.jquery.com/category/selectors/basic-filter-selectors/ 

JQuery - Filtros Básicos

JQuery – Filtros Básicos

Exemplo:

Neste exemplo utilizamos tipos de seletores para selecionar e modificar os elementos CSS da pagina web.

JQuery

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta charset="utf-8" />
	<title>Desenvolvimento Aberto</title>

	<!-- Está é uma instalação do JQuery, você apenas precisa apontar
	     para o respectivo script da versão que você deseja utilizar -->

   <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"> </script>

   <!-- Este é um script JQuery básico que manipula o CSS e um evento de clique.
        Todo o script roda no evento equivalent ao OnLoad da pagina html-->     

   <script>
   $( document ).ready(function() {

    // Seleciona por ID
   	 $("#header").css("background-color", "#000000")
   	             .css("color", "white")
   	             .css("padding", "5px")
   	             .css("text-align","center");               	 

       $("#section").css("width", "900px")
                    .css("float","left")
                    .css("padding","15px");

       $("#footer").css("background-color", "#000000")
                   .css("color", "white")
                   .css("text-align", "center")
   	             .css("padding","5px");

       // Seleciona por Classe
       $(".caixa").css("-moz-box-shadow", "5px 5px 5px 5px #777777")
                  .css("-webkit-box-shadow", "5px 5px 5px 5px #777777")
                  .css("box-shadow", "5px 5px 5px 5px #777777")
                  .css("padding", "8px");

       // Seleciona por elementos
       $("td, th").css("border","none")
                  .css("background-color","#dddddd")
                  .css("padding","5px")
                  .css("width","100px")                

   	 $("a").css("color", "#000000");

   	 // *********************************
       // ** Seletores de Filtro Básicos **
       // *********************************	 

       // Filtro: primeiro e ultimo
       $("table span:first").css("background-color","yellow");
       $("table span:last").css("background-color","yellow");

       // Filtro: valores impares= odd / pares= even
       $("table td:odd").css("background-color","limegreen");

       // Filtro valores exato
       $("table td:eq(6)").css("background-color","aqua");

       // Filtro comparação
       $("table td:gt(9)").css("background-color","fuchsia");
	});       

   </script>
</head>

<body>
<div id="header">
<h1>Desenvolvimento Aberto</h1>
</div>

<div id="section">

    <table class="caixa">
			<tr>
				<th></th>
				<th>10:00</th>
				<th>14:00</th>
				<th>16:00</th>
				<th>19:00</th>
			</tr>
			<tr>
				<th>Segunda</th>
				<td colspan="2"><span>Java</span></td>
				<td>C++</td>
				<td>C#</td>
			</tr>
			<tr>
				<th>Terça</th>
				<td colspan="3">Ruby</td>
				<td>Rails</td>
			</tr>
			<tr>
				<th>Quarta</th>
				<td colspan="2">Javascript</td>
				<td>CSS</td>
				<td>JQuery</td>
			</tr>
			<tr>
				<th>Quinta</th>
				<td colspan="3">Python</td>
				<td>Linux</td>
			</tr>
			<tr>
				<th>Sexta</th>
				<td colspan="3" >Abap</td>
				<td><span>NetWeaver</span></td>
			</tr>
		</table>
		  </div>

   <p>
     <span style="background-color:yellow;font-weight:bold">Filtro</span> primeiro e ultimo (tag: span).
   </p>
   <p>
     <span style="background-color:limegreen;font-weight:bold">Filtro</span> valores impares.
   </p>
   <p>
     <span style="background-color:aqua;font-weight:bold">Seletor</span> valores exatos.
   </p>
   <p>
     <span style="background-color:fuchsia;font-weight:bold">Seletor</span> valores maior que.
   </p>	

<div id="footer">
Desenvolvimento Aberto © desevolvimento.aberto@live.com
</div>

</body>
</html>