JSF – Persistência – Hibernate – Oracle – Java

Publicado: 11 de fevereiro de 2015 em Java

O Hibernate ORM permite aos desenvolvedores escrever mais facilmente as aplicações cujos dados sobrevivem ao processo da aplicação. Como um framework Object/Relational Mapping (ORM), o Hibernate está preocupado com a persistência de dados que se aplica aos bancos de dados relacionais via JDBC. Entretanto tenha em mente que utilizar dados em Java é complicado, a maneira como você acessa dados em Java é fundamentalmente diferente da maneira de fazê-lo em um banco de dados relacional. Em Java, você pode navegar de uma associação à um outro nível da rede de objetos. No entanto esta não é uma forma eficiente de recuperar dados de um banco de dados relacional. Você normalmente quer minimizar o número de consultas SQL e assim carregar várias entidades através de associações e selecionar as entidades visadas antes de começar a andar pela rede de objetos.

O Hibernate ORM ajuda de um modo eficiente seu aplicativo alcançar a persistência. Então, Persistência significa simplesmente que nós gostaríamos de que os dados do aplicativo possa sobreviver ao processo de aplicações. Em termos de Java, gostaríamos que o estado de (alguns) dos nossos objetos vivam além do âmbito da JVM para que o mesmo estado esteja disponível mais tarde, ou seja para isto precisamos grava-los e manipula-los em um banco de dados.

Hibernate: http://hibernate.org/

Persistindo Dados no Oracle Database com o Hibernate ORM

1 – Crie uma aplicação web dinâmica JSF com duas páginas XHTML uma de nome index.xhtml e outra de resultado.xhtml. Baixe a ultima versão do framework Hibernate ORM e o descompacte em uma pasta. No Eclipse nas propriedades do projeto em Build Path clique em Add Library, escolha User Library e clique em Next:

JSF - User Library

JSF – User Library

2 – Clique no botão User Library para adicionar uma nova biblioteca:

JSF - Add Biblioteca

JSF – Add Biblioteca

3 – Clique em New e crie um nome para sua biblioteca, geralmente Hibernate adicionado de sua versão:

JSF - New Library

JSF – New Library

4 – Clique em sua biblioteca e adicione os Jars externos localizados na pasta lib/required do Hibernate:

Hibernate - Lib - Required

Hibernate – Lib – Required

5 – Com a biblioteca criada, confirme todas as janelas:

Hibernate - Library

Hibernate – Library

6 – Repita o mesmo processo acima para adicionar o Driver JDBC da Oracle, neste exemplo utilizamos a biblioteca chamada ojdbc7.jar contida na pasta JDBC\lib do Client do Oracle 12c:

Oracle - JDBC - 12c

Oracle – JDBC – 12c

7 – Nas propriedades do projeto adicione as bibliotecas incluídas no projeto ao servidor de aplicação, para fazer isto vá na opção Deployment Assembly e inclua as duas bibliotecas acima ao Deployment, isto fará com que o servidor de aplicação use as bibliotecas à partir da pasta WEB-INF/Lib:

JSF - Deployment Assembly

JSF – Deployment Assembly

8 – Este projeto foi escrito sobre o Pattern J2EE conhecido como DAO, neste caso um projeto mesmo simples necessita de varias classes e de um Pattern auxiliar para a conexão com o banco de dados chamado Factory Method, deste modo o projeto separa suas partes distintas. Utilize a figura abaixo na janela Project Explorer para se orientar sobre a estrutura das packages, classes e arquivos de configuração requeridos:

JSF - Project Explorer

JSF – Project Explorer

9 – Após acrescentar todos os códigos abaixo a cada respectivo arquivo, rode a aplicação. Você pode perceber que o Design Pattern DAO, nos possibilita separar a camada de dados, das regras de negocio e da interface com o usuário. Preencha os dados e clique em enviar para que o Hibernate ORM persista os dados no bando de dados Oracle Database:

JSF - Aplicação

JSF – Aplicação

10 – Assim que os dados são inseridos uma página exibira o resultado:

JSF - Resultado

JSF – Resultado

Exemplo:

Neste exemplo utilizamos o framework de persistência Hibernate ORM para gravar dados no Oracle Database, através de uma aplicação JSF e o servidor de aplicação Apache Tomcat.

Obs: Caso queira saber como utilizar a persistência do framework Hibernate e o Oracle Database através de projetos utilizando o Apache Maven clique aqui.

Oracle – SQL

-- Desenvolvimento Aberto - Oracle
-- Cria Sequence
CREATE SEQUENCE SEQ_PARTICIPANTE
 START WITH     1
 INCREMENT BY   1
 NOCACHE
 NOCYCLE;

-- Cria tabela e PK
CREATE TABLE PARTICIPANTE 
(
  ID_PART INTEGER NOT NULL 
, NOME VARCHAR2(30) NOT NULL 
, SOBRENOME VARCHAR2(70) NOT NULL 
, CARGO VARCHAR2(30) NOT NULL 
, DATA_ADMISSAO DATE NOT NULL 
, SALARIO NUMBER(9,2) NOT NULL 
, GENERO VARCHAR2(20) NOT NULL 
, ATIVO CHAR(5) NOT NULL 
, OBSERVACAO VARCHAR2(255) 
, CONSTRAINT PARTICIPANTE_PK PRIMARY KEY 
  (
    ID_PART
  )
  ENABLE 
);

Java

org.desenvolvimento.aberto

Participante

package org.desenvolvimento.aberto;

import java.util.Date;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;


import org.desenvolvimento.aberto.Modelo.ParticipanteModelo;
import org.desenvolvimento.aberto.dao.ParticipanteDao;

// Define decoradores
@ManagedBean(name = "Participante")
@SessionScoped
public class Participante {

	// Define atributos privados
	private long id;
	private String nome;
	private String sobrenome;
	private String cargo;
	private Date data;
	private double salario;
	private String genero;
	private boolean ativo;
	private String observacao;

	// Metodos Getter e Setter
	public long getId() {
		return id;
	}

	public void setId(long id) {
		this.id = id;
	}

	public String getNome() {
		return nome;
	}

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

	public String getSobrenome() {
		return sobrenome;
	}

	public void setSobrenome(String sobrenome) {
		this.sobrenome = sobrenome;
	}

	public String getCargo() {
		return cargo;
	}

	public void setCargo(String cargo) {
		this.cargo = cargo;
	}

	public Date getData() {
		return data;
	}

	public void setData(Date data) {
		this.data = data;
	}

	public double getSalario() {
		return salario;
	}

	public void setSalario(double salario) {
		this.salario = salario;
	}

	public String getGenero() {
		return genero;
	}

	public void setGenero(String genero) {
		this.genero = genero;
	}

	public boolean isAtivo() {
		return ativo;
	}

	public void setAtivo(boolean ativo) {
		this.ativo = ativo;
	}

	public String getObservacao() {
		return observacao;
	}

	public void setObservacao(String observacao) {
		this.observacao = observacao;
	}
	
	// Grava Dados usando Hibernate
	// Você pode criar um modelo de dados para este Managed Bean
	// Optamos por usar o próprio objeto através da referencia This
	
	public String enviarDados()
	{
		// Cria objeto DAO
		ParticipanteDao participante = new ParticipanteDao();
		
		// cria objeto Modelo
		ParticipanteModelo modelo = new ParticipanteModelo();
		
		// Transfere dados ao objeto
		modelo.setNome(this.getNome());
		modelo.setSobrenome(this.getSobrenome());
		modelo.setCargo(this.getCargo());
		modelo.setData(this.getData());
		modelo.setSalario(this.getSalario());
		modelo.setGenero(this.getGenero());
		modelo.setAtivo(String.valueOf(this.isAtivo()));
		modelo.setObservacao(this.getObservacao())
		;
		// Você pode criar  
		boolean resultado = participante.insereDados(modelo);
		
		// Verifica resultado
		if (resultado){
		 
			return "resultado.xhtml?faces-redirect=true";
			
		}
		else
		{
			return null;
		}
		
		
	}

}

org.desenvolvimento.aberto.dao

IParticipanteDao

package org.desenvolvimento.aberto.dao;


import org.desenvolvimento.aberto.Modelo.ParticipanteModelo;

public interface IParticipanteDao {
	
	// Define método abstrato

	boolean insereDados(ParticipanteModelo participante);

}

ParticipanteDao

package org.desenvolvimento.aberto.dao;

import org.hibernate.Session;
import org.desenvolvimento.aberto.Factory.*;
import org.desenvolvimento.aberto.Modelo.ParticipanteModelo;

public class ParticipanteDao implements IParticipanteDao {

	@Override
	public boolean insereDados(ParticipanteModelo participante) {

		// Declara variável de resultado
		int resultado = 0;

		// Cria sessão
		Session session = DBConexaoFactory.getSessionFactory().openSession();

		// Cria transação
		session.beginTransaction();

		// Persiste dados
		resultado = (Integer) session.save(participante);

		// Confirma e encerra transação
		session.getTransaction().commit();

		// Retorna resultado
		if (resultado != 0) {
			return true;
		} else {
			return false;
		}

	}

}

org.desenvolvimento.aberto.Factory

DBConexaoFactory

package org.desenvolvimento.aberto.Factory;

import org.hibernate.SessionFactory;
import org.hibernate.cfg.Configuration;

public class DBConexaoFactory {

	private static final SessionFactory sessionFactory = buildSessionFactory();

	// Constroi sessão
	@SuppressWarnings("deprecation")
	private static SessionFactory buildSessionFactory() {
		try {
			// buildSessionFactory não será utilizado em versões superiores
			// Veremos outros métodos para criar um Factory
			// Não é necessário incluir o "hibernate.cfg.xml" no configure()
			// Incluímos somente a nível de fácil entendimento da chamada da
			// configuração.
			// Você pode retirar a chamada.
			return new Configuration().configure("hibernate.cfg.xml")
					.buildSessionFactory();
		} catch (Throwable ex) {
			// Em caso de erro
			System.err.println("Initial SessionFactory creation failed." + ex);
			throw new ExceptionInInitializerError(ex);
		}
	}

	// Retorna Factory da sessão
	public static SessionFactory getSessionFactory() {
		return sessionFactory;
	}

	// Encerra Sessão
	public static void shutdown() {
		getSessionFactory().close();
	}

}

org.desenvolvimento,aberto.Modelo

package org.desenvolvimento.aberto.Modelo;

import java.util.Date;

import javax.persistence.Column;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Entity;
import javax.persistence.SequenceGenerator;
import javax.persistence.Table;

@Entity
@Table(name = "PARTICIPANTE")
public class ParticipanteModelo {

	// Define atributos privados

	@Id
	@GeneratedValue(strategy=GenerationType.AUTO, generator="SEQ_PARTICIPANTE")
	@SequenceGenerator(name="SEQ_PARTICIPANTE", sequenceName="SEQ_PARTICIPANTE")
	@Column(name = "ID_PART")
	private int id;

	@Column(name = "NOME")
	private String nome;

	@Column(name = "SOBRENOME")
	private String sobrenome;

	@Column(name = "CARGO")
	private String cargo;

	@Column(name = "DATA_ADMISSAO")
	private Date data;

	@Column(name = "SALARIO")
	private double salario;

	@Column(name = "GENERO")
	private String genero;

	@Column(name = "ATIVO")
	private String ativo;

	@Column(name = "OBSERVACAO")
	private String observacao;

	// Metodos Getter e Setter
	public int getId() {
		return id;
	}

	public void setId(int id) {
		this.id = id;
	}

	public String getNome() {
		return nome;
	}

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

	public String getSobrenome() {
		return sobrenome;
	}

	public void setSobrenome(String sobrenome) {
		this.sobrenome = sobrenome;
	}

	public String getCargo() {
		return cargo;
	}

	public void setCargo(String cargo) {
		this.cargo = cargo;
	}

	public Date getData() {
		return data;
	}

	public void setData(Date data) {
		this.data = data;
	}

	public double getSalario() {
		return salario;
	}

	public void setSalario(double salario) {
		this.salario = salario;
	}

	public String getGenero() {
		return genero;
	}

	public void setGenero(String genero) {
		this.genero = genero;
	}

	public String getAtivo() {
		return ativo;
	}

	public void setAtivo(String ativo) {
		this.ativo = ativo;
	}

	public String getObservacao() {
		return observacao;
	}

	public void setObservacao(String observacao) {
		this.observacao = observacao;
	}

}

Resources – application.properties

# -- welcome --
welcomeTitle=Desenvolvimento Aberto
requerido.nome=O campo nome é obrigátorio.
requerido.sobrenome=O campo sobrenome é obrigátorio.
requerido.cargo=O campo cargo é obrigátorio.
requerido.data=O campo data de admissão é obrigátorio.
requerido.genero=O campo genero é obrigátorio.
requerido.salario =O campo salário é obrigatório.
validar.salario =O salário não pode ser menor que o valor minimo atual.

Configuração – hibernate.cfg.xml

<!DOCTYPE hibernate-configuration PUBLIC
        "-//Hibernate/Hibernate Configuration DTD 3.0//EN"
        "http://www.hibernate.org/dtd/hibernate-configuration-3.0.dtd">
<hibernate-configuration>
 
<session-factory>
<property name="hibernate.connection.driver_class">oracle.jdbc.driver.OracleDriver</property>
<property name="hibernate.connection.url">jdbc:oracle:thin:@localhost:1521:xe</property>
<property name="hibernate.connection.username">user</property>
<property name="hibernate.connection.password">pass</property>
<property name="hibernate.connection.pool_size">10</property>
<property name="show_sql">true</property>
<property name="hibernate.dialect">org.hibernate.dialect.OracleDialect</property>
<property name="hibernate.current_session_context_class">thread</property>
 
<mapping class="org.desenvolvimento.aberto.Modelo.ParticipanteModelo" />
 
</session-factory>
</hibernate-configuration> 

JSF – Java Server Faces

index.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">

<f:loadBundle basename="resources.application" var="msg" />

<head>
<title><h:outputText value="#{msg.welcomeTitle}" /></title>

</head>

<h:body>
	<h2>JSF - Desenvolvimento Aberto - Managed Beans -</h2>
	<h3>
		<h:outputText id="lnome"
			value="Java Server Faces- Elementos de Formulário - Hibernate - Oracle Database" />
	</h3>
	<h:form>
		<fieldset style="padding: 10px">

			<legend style="padding: 5px">Cadastro:</legend>

			<h:panelGrid columns="3" cellpadding="2px">

				<h:outputText id="lnome" value="Nome:" />
				<h:inputText id="tnome" value="#{Participante.nome}" size="30"
					required="true" label="Nome"
					requiredMessage="#{msg['requerido.nome']}">
					<f:validateRegex pattern="[a-zA-Z]+" />
				</h:inputText>
				<h:message for="tnome" style="color:red" />

				<h:outputText id="lsobrenome" value="Sobrenome:" />
				<h:inputText id="tsobrenome" value="#{Participante.sobrenome}"
					size="40" required="true" label="Sobrenome"
					requiredMessage="#{msg['requerido.sobrenome']}">
					<f:validateRegex pattern="[a-zA-Z]+" />
				</h:inputText>

				<h:message for="tsobrenome" style="color:red" />

				<h:outputText id="lcargo" value="Cargo" />
				<h:selectOneMenu id="tcargo" style="width:210px"
					value="#{Participante.cargo}" required="true"
					requiredMessage="#{msg['requerido.cargo']}">
					<f:selectItem itemValue="Vocalista" itemLabel="Vocalista" />
					<f:selectItem itemValue="Guitarrista" itemLabel="Guitarrista" />
					<f:selectItem itemValue="Baixista" itemLabel="Baixista" />
					<f:selectItem itemValue="Baterista" itemLabel="Baterista" />
					<f:selectItem itemValue="Gerente" itemLabel="Gerente de Projetos" />
					<f:selectItem itemValue="" itemLabel="" />
					<f:validateRegex pattern="[a-zA-Z]+" />
				</h:selectOneMenu>

				<h:message for="tcargo" style="color:red" />

				<h:outputText id="ldata" value="Data de Admissão" />
				<h:inputText value="#{Participante.data}" required="true"
					requiredMessage="#{msg['requerido.data']}">
					<f:convertDateTime pattern="dd/mm/yyyy" />
				</h:inputText>

				<h:message for="tdata" style="color:red" />

				<h:outputText id="lsalario" value="Salário" />
				<h:inputText id="tsalario" value="#{Participante.salario}"
					required="true" label="Salário"
					requiredMessage="#{msg['requerido.salario']}"
					validatorMessage="#{msg['validar.salario']}">
					<f:convertNumber currencySymbol="$" type="currency" />
					<f:validateDoubleRange minimum="788.00" maximum="9999.99" />
				</h:inputText>

				<h:message for="tsalario" style="color:red" />

				<h:outputText id="lgenero" value="Sexo" />
				<h:selectOneRadio id="tgenero" value="#{Participante.genero}"
					required="true" requiredMessage="#{msg['requerido.genero']}">
					<f:selectItem itemValue="Masculino" itemLabel="Masculino" />
					<f:selectItem itemValue="Feminino" itemLabel="Feminino" />
				</h:selectOneRadio>

				<h:message for="tgenero" style="color:red" />

				<h:outputText id="lativo" value="Ativo" />
				<h:selectBooleanCheckbox value="#{Participante.ativo}"></h:selectBooleanCheckbox>
				<br />

				<h:outputText id="lobservacao" value="Observação" />
				<h:inputTextarea value="#{Participante.observacao}" rows="5"
					cols="30" />

			</h:panelGrid>

		</fieldset>

		<br />

		<h:commandButton id="submit" action="#{Participante.enviarDados}"
			value="Enviar Dados" />

	</h:form>
</h:body>
</html>

resultado.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">

<f:loadBundle basename="resources.application" var="msg" />

<head>
<title><h:outputText value="#{msg.welcomeTitle}" /></title>

</head>

<h:body>
	<h2>JSF - Desenvolvimento Aberto - Managed Beans -</h2>
	<h3>
		<h:outputText id="lnome"
			value="Java Server Faces- Elementos de Formulário - Hibernate - Oracle" />
	</h3>
	<h:panelGrid columns="2">

		<h:outputLabel value="Nome:" />
		<h:outputText value="#{Participante.nome}" />

		<h:outputLabel value="Sobrenome:" />
		<h:outputText value="#{Participante.sobrenome}" />

		<h:outputLabel value="Cargo:" />
		<h:outputText value="#{Participante.cargo}" />

		<h:outputLabel value="Data de Admissão:" />
		<h:outputText value="#{Participante.data}">
			<f:convertDateTime pattern="dd/mm/yyyy" />
		</h:outputText>

		<h:outputLabel value="Salário" />
		<h:outputText value="#{Participante.salario}">
			<f:convertNumber currencySymbol="$" type="currency" />
		</h:outputText>

		<h:outputLabel value="Sexo:" />
		<h:outputText value="#{Participante.genero}" />

		<h:outputLabel value="Ativo:" />
		<h:outputText value="#{Participante.ativo}" />

		<h:outputLabel value="Observacao" />
		<h:outputText value="#{Participante.observacao}" />

	</h:panelGrid>
</h:body>
</html>

JQuery UI – Elementos – Javascript

Publicado: 9 de fevereiro de 2015 em JavaScript, JQuery

O JQuery UI permite que você utilize os elementos de interface gráfica de usuário comuns da linguagem de marcação HTML e os ligue aos elementos de sua biblioteca visual, deste modo você pode você se beneficiar de todos os efeitos visuais e recursos dos componentes modernos que o JQuery UI fornece para que você construa aplicações web altamente interativas, além de possibilitar a manipulação dos elementos de um página web de uma forma simples e fácil, utilizando a biblioteca JQuery.

Utilizando Elementos do JQuery UI

1 – Crie uma pagina HTML para o cadastro e outra para a exibição do resultado e utilize os códigos abaixo para criar sua aplicação. Entre com os dados e clique no botão para envia-los:

JQuery UI - Elementos

JQuery UI – Elementos

2 – A pagina de resultado recupera e exibe os parâmetros enviados através de Javascript e JQuery:

JQuery - Resultado

JQuery – Resultado

Exemplo:

Neste exemplo criamos um cadastro utilizando os elementos HTML e os ligando ao JQuery UI.

JQuery

index.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="Bluefish 2.2.6" />
<meta charset="utf-8" />
<title>Desenvolvimento Aberto</title>

<style type="text/css">
body {
	font: 62.5% "Trebuchet MS", sans-serif;
	margin: 50px;
}

#meucheck, #genero {
	font: 62.5% "Trebuchet MS", sans-serif;
	margin-top: 1em;
	width: 50px;
}

#cargo {
	width: 300px;
}

#cadastro label {
	width: 250px;
}

#cadastro label.error, #cadastro input.submit {
	color: darkorange;
	margin-left: 253px;
}
</style>
<!-- 
         Está é uma instalação do JQuery, você apenas precisa apontar
         para o respectivo script da versão que você deseja utilizar
                  
         jquery.js     = JQuery
         jquery-ui.js  = JQuery UI     
         jquery-ui.css = JQuery Theme    
    -->
<link href="./jquery-ui-1.11.2.custom/jquery-ui.css" rel="stylesheet"
	type="text/css" />
<script type="text/javascript"
	src="./jquery-ui-1.11.2.custom/external/jquery/jquery.js">
	
</script>
<script type="text/javascript"
	src="./jquery-ui-1.11.2.custom/jquery-ui.js">
	
</script>

<!-- JQuery Validator -->

<script type="text/javascript"
	src="./js/jquery-validation-1.13.1/dist/jquery.validate.js"></script>

<!-- Script JQuery - JQuery UI -->

<script type="text/javascript">
	// Declara UI e funções JQuery

	$(document).ready(function() {

		// Método de validação    
		$.validator.addMethod("regex", function(value, element, regexp) {
			var re = new RegExp(regexp);
			return this.optional(element) || re.test(value);
		}, "Please check your input.");

		// Cria regras de valicação e customiza mensagens

		$("#cadastro").validate({
			rules : {
				nome : {
					required : true,
					regex : /[a-zA-Z]+/
				},
				sobrenome : {
					required : true,
					regex : /[a-zA-Z]+/
				},
				cargo : {
					required : true,
					regex : /[a-zA-Z]+/
				},
				datepicker : {
					required : true
				},
				salario : {
					required : true,
					regex : /(?:\d*\.)?\d+/
				},

			},

			messages : {
				nome : {
					required : "O campo nome é obrigatório.",
					regex : "Campo suporta somente letras"
				},
				sobrenome : {
					required : "O campo sobrenome é obrigatório.",
					regex : "Campo suporta somente letras"
				},
				cargo : {
					required : "O campo cargo é obrigatório.",
					regex : "Campo suporta somente letras"
				},

				datepicker : {
					required : "O campo data é obrigátorio"
				},

				salario : {
					required : "O campo salário é obrigatório.",
					regex : "Campo suporta somente decimais"
				},
			},
		});

		$("#accordion").accordion({
			heightStyle : "content"
		}).accordion("option", "icons", null)

		$("#datepicker").datepicker();

		$("#genero").buttonset().find('label').width(100);

		$("#meucheck").buttonset().find('label').width(100);

		$("#abrir").button()

	});
</script>
</head>
<body>
	<h1>Desenvolvimento Aberto - JQuery - UI</h1>

	<h2>Form Validator - Validação</h2>
	<div id="accordion">
		<h3>Cadastro</h3>
		<div>
			<form id="cadastro" method="get" action="resultado.html">
				<table>
					<tr>
						<td><label for="nome">Nome:</label></td>
						<td><input id="nome" name="nome" size="27" required>
							<br></td>
					</tr>

					<tr>
						<td><label for="sobrenome">Sobrenome:</label></td>
						<td><input id="sobrenome" name="sobrenome" size="35" required>
							<br></td>
					</tr>

					<tr>
						<td><label for="cargo">Cargo:</label></td>
						<td><select id="cargo" name="cargo" required>
								<option value="Vocalista">Vocalista</option>
								<option value="Guitarrista">Guitarrista</option>
								<option value="Baixista">Baixista</option>
								<option value="Baterista">Baterista</option>
						</select>
					</tr>

					<tr>
						<td><label for="datepicker">Data de admissão:</label></td>
						<td><input type="text" id="datepicker" name="data" required></td>
					</tr>

					<tr>
						<td><label for="salario">Salario:</label></td>
						<td><input id="salario" name="salario" size="18" required>
							<br></td>
					</tr>

					<tr>
						<td><label for="genero">Gênero:</label></td>
						<td>
							<div id="genero">
								<input type="radio" id="radio1" name="genero"><label
									for="radio1">Masculino</label> <input type="radio" id="radio2"
									name="genero"><label for="radio2">Feminino</label>
							</div>
						</td>

					</tr>
					<tr>
						<td><label>Ativo:</label></td>
						<td><div id="meucheck">
								<input type="checkbox" id="ativo" name="ativo"><label
									for="ativo">Situação</label>
							</div></td>
					</tr>

					<tr>

						<td><label for="observacao">Observação:</label></td>
						<td><textarea id="observacao" name="observacao" rows="5"
								cols="40"></textarea></td>

					</tr>

				</table>
				<br>
				<button id="abrir" type="submit">Enviar Dados</button>
			</form>
		</div>
	</div>

</body>
</html>

resultado.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="Bluefish 2.2.6" />
<meta charset="utf-8" />
<title>Desenvolvimento Aberto</title>

<style type="text/css">
body {
	font: 62.5% "Trebuchet MS", sans-serif;
	margin: 50px;
}

.rotulo {
	font: 62.5% "Trebuchet MS", sans-serif;
	color: darkorange;
	font-weight: bold;
}

.dados {
	font: 62.5% "Trebuchet MS", sans-serif;
	color: cadetblue;
}
</style>
<!--
         Está é uma instalação do JQuery, você apenas precisa apontar
         para o respectivo script da versão que você deseja utilizar

         jquery.js     = JQuery
         jquery-ui.js  = JQuery UI
         jquery-ui.css = JQuery Theme
    -->
<link href="./jquery-ui-1.11.2.custom/jquery-ui.css" rel="stylesheet"
	type="text/css" />
<script type="text/javascript"
	src="./jquery-ui-1.11.2.custom/external/jquery/jquery.js">

</script>
<script type="text/javascript"
	src="./jquery-ui-1.11.2.custom/jquery-ui.js">

</script>

<!-- Script JQuery - JQuery UI -->

<script type="text/javascript">
	// Declara UI e funções JQuery

	$(document).ready(function() {

		// Cria função para recuperar paramentros

		$("#accordion").accordion({
			heightStyle : "content"
		}).accordion("option", "icons", null);

		function getUrlParameter(sParam) {
			var sPageURL = window.location.search.substring(1);
			var sURLVariables = sPageURL.split('&');
			for (var i = 0; i < sURLVariables.length; i++) {
				var sParameterName = sURLVariables[i].split('=');
				if (sParameterName[0] == sParam) {
					return sParameterName[1];
				}
			}
		}
		// Está é a URL
		// ?nome=Eddie&sobrenome=Vedder&cargo=Vocalista&data=02%2F09%2F2015&salario=1234.56&genero=on&ativo=on&observacao=teste

		// Recupera parametros

		var nome = getUrlParameter('nome');
		var sobrenome = getUrlParameter('sobrenome');
		var cargo = getUrlParameter('cargo');
		var dataAdmissao = getUrlParameter('data');
		var salario = getUrlParameter('salario');
		var genero = getUrlParameter('genero');
		var ativo = getUrlParameter('ativo');
		var observacao = getUrlParameter('observacao');

		// Mostra valores
		$("#nome").html(nome);
		$("#sobrenome").html(sobrenome);
		$("#cargo").html(cargo);
		$("#dataAdmissao").html(unescape(dataAdmissao));
		$("#salario").html("R$ " + salario);
		$("#genero").html(genero);
		$("#ativo").html(ativo);
		$("#observacao").html(unescape(observacao));

	});
</script>
</head>
<body>
	<h1>Desenvolvimento Aberto - JQuery - UI</h1>

	<h2>Form UI - Resultado - GET</h2>
	<div id="accordion">
		<h3>Resultado</h3>

		<div>

			<table>
				<tr>
					<td class="rotulo">Nome:</td>
					<td><label id="nome" class="dados"></label></td>
				</tr>

				<tr>
					<td class="rotulo">Sobrenome:</td>
					<td><label id="sobrenome" class="dados"></label></td>
				</tr>

				<tr>
					<td class="rotulo">Cargo:</td>
					<td><label id="cargo" class="dados"></label></td>
				</tr>

				<tr>
					<td class="rotulo">Data de Admissão:</td>
					<td><label id="dataAdmissao" class="dados"></label></td>
				</tr>

				<tr>
					<td class="rotulo">Salário:</td>
					<td><label id="salario" class="dados"></label></td>
				</tr>

				<tr>
					<td class="rotulo">Gênero:</td>
					<td><label id="genero" class="dados"></label></td>
				</tr>

				<tr>
					<td class="rotulo">Ativo:</td>
					<td><label id="ativo" class="dados"></label></td>
				</tr>

				<tr>
					<td class="rotulo">Observação:</td>
					<td><label id="observacao" class="dados"></label></td>
				</tr>

			</table>

		</div>

	</div>
</body>
</html>

Web Dynpro – UI Elements – SAP – Abap

Publicado: 7 de fevereiro de 2015 em Abap

O Web Dynpro fornece várias categorias com elementos de interface de usuário e estes elementos estão disponíveis no explorador Web Dynpro através de sua caixa de ferramentas em uma interface RAD para que você possa criar seu layout de um modo simples e fácil. Estes elementos da interface padrão incluem botões, etiquetas, campos de entrada e vários outros elementos.

Como sabemos podemos facilmente utilizar os dados entrados por qualquer interface e grava-los em uma tabela do banco de dados utilizando o dicionário ABAP e o Open SQL. Entretanto a linguagem de programação ABAP não possui Arrays no sentido clássico da palavra, então para que possamos popular as propriedades dos elementos que exigem um índice e valores simples criados manualmente como os ComboBox, Radio Buttons ou outros elementos da interface gráfica como normalmente é utilizado em qualquer outra linguagem de programação, precisamos recorrer a um recurso que os domínios do dicionário ABAP nos disponibilizam chamados de Fixed Values.

Os Fixed Values são faixas de valores de um domínio que especificam uma faixa de valores e podem ser ainda mais restritas, definindo apenas valores fixos. Dos valores fixos definidos para um domínio, estes são utilizados na verificação de entrada de dados em modelos de triagem nos elementos de tela. Você pode criar os valores fixos diretamente na criação de um domínio ou dinamicamente através de código ABAP.

Fixed Values: Valores fixos dos Atributos.

Utilizando os Elementos da UI Web Dynpro

1 – Primeiro precisamos criar um domínio para os elementos de valores fixos que serão utilizados como as tradicionais Arrays para popular os elementos da UI. Entre na transação SE11 e crie um Domain para campo de caixa de escolha no qual utilizaremos na pagina web, este elemento na UI será do tipo DropDownByKey:

Domain - DropDownByKey

Domain – DropDownByKey

2 – Na aba Value Range você pode alimentar os valores fixos ou cria-los manualmente através de código dinâmico:

Value Range - DropDownByKey

Value Range – DropDownByKey

3 – Após criar e ativar o domínio, crie um novo Data Type para a caixa de seleção utilizando o domínio criado, neste caso você pode utilizar o mesmo nome para o Domain e Data Type:

Data Type - DropDownByKey

Data Type – DropDownByKey

OBS: Repita os passos 1 ao 3 para o de botão de radio onde utilizaremos o elemento da UI chamado RadioButtonGroupByKey:

4 – Crie um novo componente Web Dynpro e para o seu controlador crie um node e os atributos para os campos da interface de usuário, você pode utilizar os tipos do ABAP e os Data Types criados acima para manipular os seus atributos. Neste exemplo utilizamos String para os campos Nome, Sobrenome, Salário e Observação. Os Data Types criados acima para os campos Cargo e Gênero, o tipo d para a Data de Admissão e Abap_bool para o campo Ativo:

Controller - Atributos

Controller – Atributos

5 – Crie um layout baseado na figura abaixo, link os atributos do controlador nos atributos de sua View e os ligue aos seus respectivos elementos através de suas propriedades:

View - Layout

View – Layout

6 – Salve e ative seu componente Web Dynpro, crie uma aplicação e a teste. Você pode utilizar uma nova View para exibir os valores dos atributos ou grava-los em uma tabela Z transparente que você também pode criar. Utilize o evento clique do botão para exibir a visão de resultado ou gravar os dados no banco de dados.

Web Dynpro - Aplicação

Web Dynpro – Aplicação

Exemplo:

Neste exemplo utilizamos o paradigma declarativo da interface do Web Dynpro para criar uma pagina web com os elementos básicos de entrada disponíveis pela UI do Web Dynpro. Você encontra os detalhes de como realizar cada procedimento utilizado acima para criar o layout e os elementos básicos da UI nos exemplos anteriores.

 

Ruby on Rails – Elementos – Form – Linux

Publicado: 5 de fevereiro de 2015 em Ruby on Rails

O Rails torna fácil e simples criar uma interface gráfica de usuário acabando com a complexidade na criação de elementos para seus formulários web, fornecendo ajudantes de visão para gerar a marcação HTML para seus Forms. No entanto, uma vez que esses ajudantes têm diferentes casos de uso, os desenvolvedores precisam conhecer as diferenças entre os métodos de ajuda antes de colocá-los em uso.

O Rails fornece uma série de ajudantes para gerar elementos de formulário, tais como caixas de seleção, campos de texto, botões de rádio e vários outros. Você ainda pode adicionar Widgets externos através de um GEM ou frameworks completos como o Apotomo e vários outros.

Rails Form: http://guides.rubyonrails.org/form_helpers.html

Usando Elementos de Formulários

1 – Crie um projeto Ruby on Rails para o banco de dados MySQL, o configure adequadamente, use os respectivos códigos abaixo para completar os arquivos de modelo, visão e controlador:

Migra modelo – Migrate


rails g model modelo01 nome:string sobrenome:string cargo:string data:datetime salario:float genero:string ativo:boolean observacao:string
rake db:migrate

Rails - Elementos - FORM

Rails – Elementos – FORM

Exemplo:

Neste exemplo criamos um modelo de dados e o utilizamos para gravar dados inseridos pelo usuário em um formulário web.

Ruby on Rails

Model

class Modelo01 < ActiveRecord::Base
  
  # Cria validação
  validates  :nome, :sobrenome, :cargo, :data, :salario, :genero, 
             :presence => true#{:message => "Campo obrigatório"}    
                  

  # Regex - valores alphanumericos
  validates  :nome, :sobrenome, :cargo,
             :format => {:with => /[A-Za-z]+/,
                         :message => "Permitido somente caracteres alphanuméricos"}
end

View

<h1>Desenvolvimento Aberto</h1>
<h2>Ruby on Rails - Elementos - Form </h2>

<%= form_for @modelo, :url => {:action => :create} do  |cad|%>

<% if @modelo.errors.any?  %>
<h3>Erros: </h3>
<ul style="color:red">
	<% @modelo.errors.full_messages.each do |menssagem| %>
	<li>
		<%= menssagem %>
	</li>
	<% end %>
</ul>
<% end %>
<fieldset>
	<legend>
		Cadastro:
	</legend>
	<table>
		<tr>
			<td> <%= cad.label :nome%> </td>
			<td> <%= cad.text_field :nome  %> </td>
		</tr>
		<tr>
			<td><%= cad.label :sobrenome%></td>

			<td><%= cad.text_field :sobrenome, :size => "35x10"%></td>
		</tr>

		<tr>
			<td><%= cad.label :cargo%></td>
			<td><%= cad.select :cargo, options_for_select([["Vocalista", "Vocalista"],
			["Guitarrista", "Guitarrista"] ,
			["Baixista","Baixista"],
			["Baterista","Baterista"] ]),
        html_options= {:style => "width: 100px;"} %></td>
		</tr>

		<tr>
			<td><%= cad.label :data%></td>

			<td><%= cad.date_field :data, :size => "15x10"%></td>
		</tr>

		<tr>
			<td><%= cad.label :salario%></td>
			<td><%= cad.text_field :salario, :size => "10x10"%></td>
		</tr>

		<tr>
			<td><%= cad.label :genero%></td>
			<td><%= cad.collection_radio_buttons :genero, [["Masculino", "Masculino"] ,["Feminino", "Feminino"]] ,
        :first, :last, { item_wrapper_tag: false } %></td>
		</tr>
		<tr>
			<td><%= cad.label :ativo%></td>
			<td><%= cad.check_box :ativo %></td>
		</tr>

		<tr>
			<td><%= cad.label :observacao%></td>
			<td><%= cad.text_area :observacao , :size => "40x10" %></td>
		</tr>

	</table>
</fieldset>
<p>
	<%= cad.submit "Adicionar dados" %>
</p>

<% end %>

Controller

class MeucontroleController < ApplicationController
  # Controladores
  def index
    @modelo  = Modelo01.new
  end

  def new
    @modelo  = Modelo01.new
  end

  # Cria registro
  def create
    @modelo = Modelo01.new(modelo_params)
    if @modelo.save      
      
      flash[:notice] = "Dados Salvos com sucesso."
      render "index"
    else
      # Você pode colocar uma menssagem aqui.
      render "index"
    end
  end

  # Define parametros requeridos
  private

  def modelo_params
    params.require(:modelo01).permit(:nome, :sobrenome, :cargo, :data,
                                     :salario, :genero, :ativo, :observacao)
  end

end

Django – Widgets – Python – Linux

Publicado: 4 de fevereiro de 2015 em Python

No framework Django um widget é a representação de um elemento de entrada HTML. O Widget lida com a prestação do HTML, e a extração de dados a partir de um dicionário que corresponde ao widget. Os Widgets não devem ser confundidos com os campos do formulário. Os campos do formulário lidam com a lógica de validação de entrada e são usados diretamente em modelos. Já os Widgets lidam com processamento de elementos de entrada de um formulário HTML na página web e na extração dos dados brutos apresentados. No entanto, os widgets não precisam ser atribuídos para formar campos, isto quer dizer que os campos de um formulário geram os elementos HTML básicos e um Widget pode ser atribuído ao campo para formar um componente visual mais avançado.

Widgets: https://docs.djangoproject.com/en/1.7/ref/forms/widgets/

Utilizando elementos e Widgets

Crie um projeto e uma aplicação Django, configure o banco de dados e a rota para sua visão adequadamente. Utilize os arquivos abaixo para os respectivos arquivos para o Model, View, Template e o Form:

Django - Widgets

Django – Widgets

Exemplo:

Neste exemplo criamos uma aplicação Django que utiliza um formulário de cadastro que utiliza elementos e Widgets que estão ligados em um modelo e são exibidos através de um Template.

Python

Model.py

from django.db import models

# Cria modelo
class Funcionario (models.Model):
    nome = models.CharField(max_length=30)
    sobrenome = models.CharField(max_length=50)
    cargo = models.CharField(max_length=50)
    data = models.DateField()
    salario = models.DecimalField(max_digits=19, decimal_places=10)
    genero = models.CharField(max_length=30)
    ativo = models.BooleanField()
    observacao = models.CharField(max_length=255)

    # Define unicode para o Django Admin
    def __unicode__(self):
        return self.nome

View.py

from django.shortcuts import render, render_to_response, RequestContext
from django.http import HttpResponse

# Importa form
from meusite.forms import MeuForm

# Exibe View
def home(request):

    # Cria form
    form = MeuForm(request.POST or None)   

    # Valida e salva
    if form.is_valid():
        salvar = form.save(commit=False)
        salvar.save()
        return HttpResponse("Dados inseridos com sucesso!")

    # Chama Template
    return render_to_response("devaberto.html",
                              locals(),
                              context_instance = RequestContext(request))

Template – devaberto.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Desenvolvimento Aberto</title>
		<style>
			body {

				font-family: "Times New Roman", Times, serif;
				font-size: 12px;
			}
		</style>
	</head>
	<body>

		<h1>Desenvolvimento Aberto - Django - Elementos - Widgets </h1>

		<form method="post" action="">
			<fieldset>
				<legend>
					Cadastro:
				</legend>
				{% csrf_token %}
				<table>
					<td> {{ form.as_table }} </td>
				</table>
				<hr />
				<input type="submit" />
			</fieldset>
		</form>

	</body>
</html>

Form.py

from  django import forms
from django.forms import extras
from django.core.validators import RegexValidator

# Importa modulo Regex
import re 

# cria objeto Regex
caracteres = RegexValidator(
    # regex= re.compile(r"[a-zA-Z]+"),
    regex=r"[a-zA-Z]+",
    message="Permitido somente caracteres Alpha numericos",
    code="invalid")

# Importa modelo
from models import Funcionario

# Cria classe do form para o modelo
class MeuForm(forms.ModelForm):

    # Cria Conteudo
    GENEROS = (("Masculino", "Masculino"), ("Feminino", "Feminino"))

    CARGOS = (("Vocalista", "Vocalista"),
               ("Guitarrista", "Guitarrista"),
               ("Baixista", "Baixista"),
               ("Baterista", "Baterista"))

    # Define Widgets
    nome = forms.CharField(required=True, validators=[caracteres])
    sobrenome = forms.CharField(required=True, validators=[caracteres])
    cargo = forms.ChoiceField (required=True, widget=forms.Select, choices=CARGOS)
    data = forms.DateField(required=True, widget=forms.extras.SelectDateWidget)
    salario = forms.DecimalField(required=True)
    genero = forms.ChoiceField (required=True, widget=forms.RadioSelect, choices=GENEROS)
    ativo = forms.BooleanField()
    observacao = forms.CharField(widget=forms.Textarea)    

    # Associa formulario ao modelo
    class Meta:
        model = Funcionario

    # Django Validations  - customizado campo sobrenome
    def clean_sobrenome(self):
        snome = self.cleaned_data['sobrenome']
        if len(snome) <= 3:
            raise forms.ValidationError("Sobrenome precisa conter mais de 3 caracteres.")
        return snome

ASP NET – Elementos – Controles – C#

Publicado: 3 de fevereiro de 2015 em C#

Os elementos de controles web em ASP.NET são denominados ASP.NET Web server controls, são executados quando a página é requisitada e que processa a marcação para um navegador. Muitos controles se assemelham à elementos HTML, como botões e caixas de texto . Outros controles possuem comportamento complexo, como os controles de calendário, e os controles que gerenciam conexões de dados. Você pode criar uma paginas web facilmente com os controles ASP.NET, você pode ainda mixar os controles ASP.NET com elementos HTML ou de outros Frameworks, pois além dos elementos serem intuitivos ainda contam com uma ótima interface visual RAD proporcionada pelo Visual Studio que poupará tempo significativo no desenvolvimento de suas aplicações.

Usando Elementos e Controles

1 – Crie uma aplicação ASP.NET do tipo C# Empty e crie duas paginas ASPX, uma chamada default.aspx e a outra resultado.aspx. Crie também uma classe C# para o objeto chamado Participante que será responsável pelos dados do cadastro. Utilize o código abaixo para cada respectivo arquivo e rode sua aplicação:

ASP.NET - Elementos - Controles

ASP.NET – Elementos – Controles

2 – Assim que o usuário preencher os dados corretamente será redirecionado para a pagina de resultado que mostrará o conteúdo do objeto na sessão do navegador web.

ASP.NET - Resultado

ASP.NET – Resultado

Exemplo:

Neste exemplo criamos um formulário utilizando os elementos HTML e controles ASP.NET para criar um cadastro que valida os tipos de entrada do usuário, através dos elementos criados pelos controles ASP.NET.

Objeto – Participante

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace DAWebApp001
{
    public class Participante
    {

        // Declara atributos publicos
        private long id;
        private string nome;
        private string sobrenome;
        private string cargo;
        private DateTime data;
        private double salario;
        private string genero;
        private Boolean ativo;
        private string observacao;

       // Declara propriedades
        public long Id
        {
            get { return id; }
            set { id = value; }
        }

        public string Nome
        {
            get { return nome; }
            set { nome = value; }
        }

        public string Sobrenome
        {
            get { return sobrenome; }
            set { sobrenome = value; }
        }

        public string Cargo
        {
            get { return cargo; }
            set { cargo = value; }
        }

        public DateTime Data
        {
            get { return data; }
            set { data = value; }
        }

        public double Salario
        {
            get { return salario; }
            set { salario = value; }
        }

        public string Genero
        {
            get { return genero; }
            set { genero = value; }
        }

        public Boolean Ativo
        {
            get { return ativo; }
            set { ativo = value; }
        }

        public string Observacao
        {
            get { return observacao; }
            set { observacao = value; }
        }
    }
}

Página – default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="DAWebApp001._default" %>


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .auto-style2 {
            width: 14%;
        }

        .auto-style3 {
            height: 23px;
        }

        .auto-style5 {
            width: 248px;
        }

        .auto-style6 {
            width: 54%;
        }

        .auto-style8 {
            height: 23px;
            width: 54%;
        }

        .auto-style9 {
            height: 23px;
            width: 248px;
        }
    </style>

</head>
<body>
    <h1>Desenvolvimento Aberto - ASP.NET</h1>
    <h2>Cadastro - Controles - ASP.NET</h2>
    <form id="form1" runat="server">
        <div>
            <fieldset style="padding: 20px">
                <legend style="padding: 5px">Cadastro</legend>
                <table style="width: 100%;">
                    <tr>
                        <td class="auto-style3" colspan="2">
                            <asp:Label ID="LabelMenssagem" runat="server" Text="Entre com os dados abaixo:"></asp:Label>
                        </td>
                        <td class="auto-style8"></td>
                    </tr>
                    <tr>
                        <td class="auto-style2">
                            <asp:Label ID="Label2" runat="server" Text="Nome:"></asp:Label>
                        </td>
                        <td class="auto-style5">
                            <asp:TextBox ID="TextBox1nome" runat="server" Width="142px"></asp:TextBox>
                        </td>
                        <td class="auto-style6">
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1nome" ErrorMessage="Nome é obrigatório." ForeColor="Red" ValidationGroup="AllValidator"></asp:RequiredFieldValidator>
                            <br />
                            <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="TextBox1nome" ErrorMessage="Permitido somente caractere  alphanumericos" ForeColor="Red" ValidationExpression="[a-zA-Z]+" ValidationGroup="AllValidator"></asp:RegularExpressionValidator>
                        </td>
                    </tr>
                    <tr>
                        <td class="auto-style3">
                            <asp:Label ID="Label3" runat="server" Text="Sobrenome:"></asp:Label>
                        </td>
                        <td class="auto-style9">
                            <asp:TextBox ID="TextBox2sobrenome" runat="server" Width="240px"></asp:TextBox>
                        </td>
                        <td class="auto-style8">
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="TextBox2sobrenome" ErrorMessage="Sobrenome é obrigatório." ForeColor="Red" ValidationGroup="AllValidator"></asp:RequiredFieldValidator>
                            <br />
                            <asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" ControlToValidate="TextBox2sobrenome" ErrorMessage="Permitido somente caractere  alphanumericos" ForeColor="Red" ValidationExpression="[a-zA-Z]+" ValidationGroup="AllValidator"></asp:RegularExpressionValidator>
                        </td>
                    </tr>
                    <tr>
                        <td class="auto-style3">
                            <asp:Label ID="Label4" runat="server" Text="Cargo:"></asp:Label>
                        </td>
                        <td class="auto-style9">
                            <asp:DropDownList ID="DropDownList1" runat="server" Height="16px" Width="211px">
                                <asp:ListItem></asp:ListItem>
                                <asp:ListItem>Vocalista</asp:ListItem>
                                <asp:ListItem>Guitarrista</asp:ListItem>
                                <asp:ListItem>Baixista</asp:ListItem>
                                <asp:ListItem>Baterista</asp:ListItem>
                            </asp:DropDownList>
                        </td>
                        <td class="auto-style8">
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="DropDownList1" ErrorMessage="Cargo é obrigatório." ForeColor="Red" ValidationGroup="AllValidator"></asp:RequiredFieldValidator>
                            <br />
                            <asp:RegularExpressionValidator ID="RegularExpressionValidator3" runat="server" ControlToValidate="DropDownList1" ErrorMessage="Permitido somente caractere  alphanumericos" ForeColor="Red" ValidationExpression="[a-zA-Z]+" ValidationGroup="AllValidator"></asp:RegularExpressionValidator>
                        </td>
                    </tr>
                    <tr>
                        <td class="auto-style3">
                            <asp:Label ID="Label6" runat="server" Text="Data de Admissão:"></asp:Label>
                        </td>
                        <td class="auto-style9">
                            <asp:TextBox ID="TextBox1Data" runat="server" Width="177px"></asp:TextBox>
                        </td>
                        <td class="auto-style8">
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ControlToValidate="TextBox1Data" ErrorMessage="Data de admissão é obrigatória." ForeColor="Red" ValidationGroup="AllValidator"></asp:RequiredFieldValidator>
                            <br />
                            <asp:RegularExpressionValidator ID="RegularExpressionValidator5" runat="server" ControlToValidate="TextBox1Data" ErrorMessage="Formato de data invalido, use (dd/mm/yyyy)." ForeColor="Red" ValidationExpression="^(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-|\.)(?:0?[1,3-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|\.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$" ValidationGroup="AllValidator"></asp:RegularExpressionValidator>
                        </td>
                    </tr>
                    <tr>
                        <td class="auto-style3">
                            <asp:Label ID="Label5" runat="server" Text="Salário:"></asp:Label>
                        </td>
                        <td class="auto-style9">
                            <asp:TextBox ID="TextBox4salario" runat="server"></asp:TextBox>
                        </td>
                        <td class="auto-style8">
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="TextBox4salario" ErrorMessage="Salário é obrigatório. " ForeColor="Red" ValidationGroup="AllValidator"></asp:RequiredFieldValidator>
                            <br />
                            <asp:RegularExpressionValidator ID="RegularExpressionValidator4" runat="server" ControlToValidate="TextBox4salario" ErrorMessage="Permitido somente caractere  numericos e decimais." ForeColor="Red" ValidationExpression="(?:\d*\.)?\d+" ValidationGroup="AllValidator"></asp:RegularExpressionValidator>
                        </td>
                    </tr>
                    <tr>
                        <td class="auto-style3">
                            <asp:Label ID="Label7" runat="server" Text="Sexo:"></asp:Label>
                        </td>
                        <td class="auto-style9">
                            <asp:RadioButton ID="RadioButton1" runat="server" GroupName="Grupo1" Text="Masculino" />
                            <asp:RadioButton ID="RadioButton2" runat="server" GroupName="Grupo1" Text="Feminino" />
                        </td>
                        <td class="auto-style8">
                            <br />
                        </td>
                    </tr>
                    <tr>
                        <td class="auto-style3">
                            <asp:Label ID="Label8" runat="server" Text="Ativo:"></asp:Label>
                        </td>
                        <td class="auto-style9">
                            <asp:CheckBox ID="CheckBox1" runat="server" Text="Cadastro Valido" />
                        </td>
                        <td class="auto-style8">
                            <br />
                        </td>
                    </tr>
                    <tr>
                        <td class="auto-style3">
                            <asp:Label ID="Label9" runat="server" Text="Observação:"></asp:Label>
                        </td>
                        <td class="auto-style9">
                            <asp:TextBox ID="TextBox1Observacao" runat="server" Columns="40" Rows="5" TextMode="MultiLine"></asp:TextBox>
                        </td>
                        <td class="auto-style8">&nbsp;</td>
                    </tr>
                    <tr>
                        <td class="auto-style3" colspan="3">
                            <hr />
                            &nbsp;</td>
                    </tr>
                    <tr>
                        <td class="auto-style3">

                            <asp:Button ID="Button1enviardados" runat="server" Text="Enviar Dados" OnClick="Button1enviardados_Click" ValidationGroup="AllValidator" />
                        </td>
                        <td class="auto-style9">&nbsp;</td>
                        <td class="auto-style8">&nbsp;</td>
                    </tr>
                </table>
            </fieldset>
        </div>
    </form>
</body>
</html>

Página – default.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;


namespace DAWebApp001
{
    public partial class _default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Participante participante = new Participante();

            Session["Cadastro"] = participante;

        }

        protected void Button1enviardados_Click(object sender, EventArgs e)
        {
            if (Page.IsValid)
            {
                // Recupera objeto da Session
                Participante cad = (Participante)Session["Cadastro"];

                // Valor normalmente é um autoincremento
                // Ou pelo banco Identity (MSSQL) Sequence (Oracle, DB2, etc)
                // Ou algum framework ORM - NUNCA faça um autoincremento manualmente na aplicação
                cad.Id = 1;

                // Alimenta Objeto
                cad.Nome = TextBox1nome.Text;
                cad.Sobrenome = TextBox2sobrenome.Text;
                cad.Cargo = DropDownList1.Text;
                cad.Data = DateTime.Parse(TextBox1Data.Text);
                cad.Salario = Double.Parse(TextBox4salario.Text);

                // Verifica valores boleanos
                if (RadioButton1.Checked)
                {
                    cad.Genero = RadioButton1.Text;
                }

                if (RadioButton2.Checked)
                {
                    cad.Genero = RadioButton2.Text;
                }

                cad.Ativo = CheckBox1.Checked;
                cad.Observacao = TextBox1Observacao.Text;

                // Redireciona pagina
                Response.Redirect("resultado.aspx");

            }

        }

    }
}

Página – resultado.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="resultado.aspx.cs" Inherits="DAWebApp001.resultado" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .auto-style1 {
            width: 143px;
        }

        .auto-style2 {
            width: 143px;
            height: 23px;
        }

        .auto-style3 {
            height: 23px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <h1>Desenvolvimento Aberto - ASP.NET</h1>
            <h2>Cadastro - Controles - ASP.NET - Resultado</h2>

            <table style="width: 100%;">
                <tr>
                    <td class="auto-style1">
                        <asp:Label ID="Label1" runat="server" Text="Nome:"></asp:Label>
                    </td>
                    <td>
                        <asp:Label ID="lnome" runat="server" Text="Label"></asp:Label>
                    </td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td class="auto-style1">
                        <asp:Label ID="Label2" runat="server" Text="Sobrenome:"></asp:Label>
                    </td>
                    <td>
                        <asp:Label ID="lsobrenome" runat="server" Text="Label"></asp:Label>
                    </td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td class="auto-style2">
                        <asp:Label ID="Label3" runat="server" Text="Cargo:"></asp:Label>
                    </td>
                    <td class="auto-style3">
                        <asp:Label ID="Lcargo" runat="server" Text="Label"></asp:Label>
                    </td>
                    <td class="auto-style3"></td>
                </tr>
                <tr>
                    <td class="auto-style1">
                        <asp:Label ID="Label4" runat="server" Text="Data de Admissão:"></asp:Label>
                    </td>
                    <td>
                        <asp:Label ID="ldata" runat="server" Text="Label"></asp:Label>
                    </td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td class="auto-style1">
                        <asp:Label ID="Label5" runat="server" Text="Salário:"></asp:Label>
                    </td>
                    <td>
                        <asp:Label ID="lsalario" runat="server" Text="Label"></asp:Label>
                    </td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td class="auto-style1">
                        <asp:Label ID="Label6" runat="server" Text="Sexo:"></asp:Label>
                    </td>
                    <td>
                        <asp:Label ID="lgenero" runat="server" Text="Label"></asp:Label>
                    </td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td class="auto-style2">
                        <asp:Label ID="Label7" runat="server" Text="Ativo:"></asp:Label>
                    </td>
                    <td class="auto-style3">
                        <asp:Label ID="lativo" runat="server" Text="Label"></asp:Label>
                    </td>
                    <td class="auto-style3"></td>
                </tr>
                <tr>
                    <td class="auto-style1">
                        <asp:Label ID="Label8" runat="server" Text="Observação:"></asp:Label>
                    </td>
                    <td>
                        <asp:Label ID="lobservacao" runat="server" Text="Label"></asp:Label>
                    </td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td class="auto-style1">&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
            </table>
            <br />

        </div>
    </form>
</body>
</html>

Página – resultado.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace DAWebApp001
{
    public partial class resultado : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

            // Recupera objeto
            Participante cad = (Participante)Session["Cadastro"];

            if (Session["Cadastro"] != null)
            {
                // Alimemta valores
                lnome.Text = cad.Nome;
                lsobrenome.Text = cad.Sobrenome;
                Lcargo.Text = cad.Cargo;
                ldata.Text = cad.Data.ToString();
                lsalario.Text = cad.Salario.ToString();
                lgenero.Text = cad.Genero;
                lativo.Text = cad.Ativo.ToString();
                lobservacao.Text = cad.Observacao;
            }

        }
    }
}

Web.config

<?xml version="1.0" encoding="utf-8"?>
<!--
  For more information on how to configure your ASP.NET application, please visit
  http://go.microsoft.com/fwlink/?LinkId=169433
  -->
<configuration>
  <system.web>
    <compilation debug="true" targetFramework="4.5" />
    <httpRuntime targetFramework="4.5" />
  </system.web>

  <appSettings>
    <add key="ValidationSettings:UnobtrusiveValidationMode" value="None"/>
  </appSettings>

</configuration>

JSF – Facelets – Elementos UI – Java

Publicado: 2 de fevereiro de 2015 em Java

O termo Facelets refere-se a linguagem de declaração da visão para a tecnologia JavaServer Faces. O Facelet é uma linguagem de declaração de página poderosa, mas leve, que é usada para construir visões JSF usando modelos HTML para construir árvores de componentes. Ou seja com o elementos Facelets chamados através da marcação UI você pode criar Templates que facilitam a padronização de uma aplicação Java Enterprise. Em suma, o uso de Facelets reduz o tempo e esforço que precisa ser gasto no desenvolvimento e implantação de aplicações empresariais.

JSF – Elementos – Facelets – ui

  • <ui:insert> define conteúdos a serem colocados em um modelo.
  • <ui:include> Inclui conteúdo de uma página para outra página xhtml.
  • <ui:composition> Carrega um modelo usando o atributo do modelo.
  • <ui:define> Define os conteúdos a serem inseridos em um modelo.

Criando um Template usando Facelets

1 – Crie uma aplicação Web dinâmica JSF, Crie uma nova pagina XHTML e escolha o Template disponibilizado Common Facelet Page e a nomeie de facecomum.xhtml:

Facelets - Common Facelet Page

Facelets – Common Facelet Page

2 -Como você pode ver o Eclipse disponibilizou uma página com um template contendo um Header e um Body:

Facelets - Template - Header - Body

Facelets – Template – Header – Body

3 – Crie mais duas paginas XHTML utilizando o modelo Blank Facelet Page e nomeie as páginas de header.xhtml e conteúdo.xhtml:

Facelet - Blanck Facelet Page

Facelet – Blanck Facelet Page

4 – Neste ponto criamos uma pagina comum, use os códigos abaixo para as respectivas páginas que já foram criadas, teste a pagina facecomum.xhtm, está é sua comum, a página contém um cabeçalho e um conteúdo, você pode utilizar também um rodapé se preferir, você pode usar sua criatividade e expandir o modelo que será usado em todas as páginas de sua aplicação:

Facelets - Página Comum

Facelets – Página Comum

5 – Agora que já temos um modelo, crie mais duas paginas XHTML para serem as paginas de sua aplicação, as nomeie de pagina01.xhtml e pagina02.xhtml e use a pagina index.xhtml que foi criada automaticamente junto com seu projeto para que seja a pagina principal. Você deve ter a seguinte aplicação:

Facelets - Aplicação - index

Facelets – Aplicação – index

6 – Assim que você clicar no link que chama um conteúdo ele será exibido usando o nome de definição da região do Template para substituir o modelo comum pela pagina atual:

Facelets - Página 01

Facelets – Conteúdo Página 01

7 – A mesma coisa acontece quando você retorna a pagina índice e clica no link do segundo conteúdo:

Facelets- Conteúdo Página 02

Facelets- Conteúdo Página 02

Exemplo:

Neste exemplo criamos um Template usando Facelets para criar uma pagina comum e seus conteúdos usados para substituir os elementos do Template durante o uso da aplicação.

Java

Facelets Template- facecomum.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">

<head>
<title><ui:insert name="pageTitle">Page Title</ui:insert></title>
<style type="text/css">
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
}

.header {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
}

.bottom {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	text-align: center;
	vertical-align: middle;
	color: #8E969D;
}
</style>
</head>

<body bgcolor="#ffffff">
	<table style="border: 1px solid #CAD6E0" align="center" cellpadding="0"
		cellspacing="0" border="0" width="400">
		<tbody>

			<tr>
				<td class="header" height="42" align="center" valign="middle"
					width="100%" bgcolor="#E4EBEB"><ui:insert name="pageHeader">
						<ui:include src="header.xhtml" />

					</ui:insert></td>
			</tr>
			<tr>
				<td height="1" width="100%" bgcolor="#CAD6E0"></td>
			</tr>

			<tr>
				<td width="100%" colspan="2">
					<table width="100%" style="height: 150px" align="left"
						cellpadding="0" cellspacing="0" border="0">
						<tbody>
							<tr>
								<td align="center" width="100%" valign="middle"><ui:insert
										name="body">
										<ui:include src="conteudo.xhtml" />
									</ui:insert></td>
							</tr>
						</tbody>
					</table>
				</td>
			</tr>

			<tr>
				<td colspan="2" valign="bottom" height="1" width="100%"
					bgcolor="#CAD6E0"></td>
			</tr>
		</tbody>
	</table>
</body>

</html>

Facelets Template – header.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html">

<ui:composition>
	<h1>Desenvolvimento Aberto</h1>
</ui:composition>
</html>

Facelets Template- conteudo.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html">

<ui:composition>
	<h1>Meu Conteudo.</h1>
</ui:composition>
</html>

JSF- index.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">

<f:loadBundle basename="resources.application" var="msg" />

<head>
<title><h:outputText value="#{msg.welcomeTitle}" /></title>
</head>
<h:body>
	<ui:composition template="facecomum.xhtml">
		<ui:define name="body">
			<br />
			<br />
			<h:panelGrid cellpadding="20px">
				<h:link value="Meu Conteudo 1" outcome="pagina01" />
				<h:link value="Meu Conteudo 2" outcome="pagina02" />
			</h:panelGrid>
			<br />
			<br />
		</ui:define>
	</ui:composition>
</h:body>
</html>

JSF – pagina01.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html">

<h:body>
	<ui:composition template="facecomum.xhtml">
		<ui:define name="header">
			<h2>header</h2>
		</ui:define>
		<ui:define name="body">
			<h2>Conteudo da Página 01</h2>
			<h:link value="Volar a página inicial" outcome="index" />
		</ui:define>
	</ui:composition>
</h:body>
</html>

JSF – pagina02.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html">

<h:body>
	<ui:composition template="facecomum.xhtml">
		<ui:define name="header">
			<h2>header</h2>
		</ui:define>
		<ui:define name="body">
			<h2>Conteudo da Página 02</h2>
			<h:link value="Volar a página inicial" outcome="index" />
		</ui:define>
	</ui:composition>
</h:body>

</html>

JSF – Elementos – HTML e Core – Java

Publicado: 2 de fevereiro de 2015 em Java

Você pode utilizar os elementos HTML e Core disponibilizados pelos JSF para criar uma interface gráfica poderosa e completa sem precisar escrever códigos Java. O JSF suporta todos os componentes de IU entretanto pode ser turbinado utilizando frameworks adicionais como o PrimeFaces, RichFaces e BootsFaces, para que você utilize a ultima palavra em componentes ricos para suas interfaces de usuário Java EE.

JSF Elementos HTML – h 

  • <h:outputText> Processa um texto HTML.
  • <h:inputText> Processa uma entrada HTML do tipo = “text“, caixa de texto.
  • <h:commandButton> Processa um input type = HTML do botão “enviar”.
  • <h:selectOneMenu> Processa uma caixa de combinação HTML (ComboBox).
  • <h:selectOneRadio> Processa um único botão de opção HTML.
  • <h:selectBooleanCheckbox> Processa uma caixa única de seleção HTML.
  • <h:inputTextarea> Processa um campo de área para texto HTML.
  • <h:panelGrid> Processa uma tabela HTML em forma de grade.
  • <h:message> Processa mensagem para um componente de interface JSF.

JSF – Elementos – Core – f

  • <f:loadBundle> Carrega um pacote de recursos para a localidade da visão atual e armazena-o como um Mapa no escopo de solicitação
  • <f:validateRegex> Valida componente JSF com uma expressão regular.
  • <f:validateDoubleRange> Valida gama de valor flutuante.
  • <f:selectItem> Adiciona item selecionável em um campo de seleção.
  • <f:convertDateTime> Converte uma string em uma data de formato desejado.
  • <f:convertNumber> Converte uma string em um número de formato desejado.

 Criando um Formulário JSF

1 – Crie uma aplicação web dinâmica JSF e utilize o código abaixo para rodar sua aplicação no servidor de aplicação de sua preferencia:

JSF - HTML e Core

JSF – HTML e Core

2- Preencha os dados no formulário e os envie para ver o resultado.

JSF - Resultado

JSF – Resultado

Exemplo:

Neste exemplo criamos um formulário e exibimos seu resultado através do elementos do framework JSF.

Managed JavaBean  – Participante

package org.desenvolvimento.aberto;

import java.util.Date;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

// Define decoradores
@ManagedBean(name = "Participante")
@RequestScoped
public class Participante {

	// Define atributos privados
	private long id;
	private String nome;
	private String sobrenome;
	private String cargo;
	private Date data;
	private double salario;
	private String genero;
	private boolean ativo;
	private String observacao;

	// Metodos Getter e Setter
	public long getId() {
		return id;
	}

	public void setId(long id) {
		this.id = id;
	}

	public String getNome() {
		return nome;
	}

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

	public String getSobrenome() {
		return sobrenome;
	}

	public void setSobrenome(String sobrenome) {
		this.sobrenome = sobrenome;
	}

	public String getCargo() {
		return cargo;
	}

	public void setCargo(String cargo) {
		this.cargo = cargo;
	}

	public Date getData() {
		return data;
	}

	public void setData(Date data) {
		this.data = data;
	}

	public double getSalario() {
		return salario;
	}

	public void setSalario(double salario) {
		this.salario = salario;
	}

	public String getGenero() {
		return genero;
	}

	public void setGenero(String genero) {
		this.genero = genero;
	}

	public boolean isAtivo() {
		return ativo;
	}

	public void setAtivo(boolean ativo) {
		this.ativo = ativo;
	}

	public String getObservacao() {
		return observacao;
	}

	public void setObservacao(String observacao) {
		this.observacao = observacao;
	}

}

Index.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">

<f:loadBundle basename="resources.application" var="msg" />

<head>
<title><h:outputText value="#{msg.welcomeTitle}" /></title>

</head>

<h:body>
	<h2>JSF - Desenvolvimento Aberto - Managed Beans -</h2>
	<h3>
		<h:outputText id="lnome"
			value="Java Server Faces- Elementos de Formulário - Cadastros:" />
	</h3>
	<h:form>
		<fieldset style="padding: 10px">

			<legend style="padding: 5px">Cadastro:</legend>

			<h:panelGrid columns="3" cellpadding="2px">

				<h:outputText id="lnome" value="Nome:" />
				<h:inputText id="tnome" value="#{Participante.nome}" size="30"
					required="true" label="Nome"
					requiredMessage="#{msg['requerido.nome']}">
					<f:validateRegex pattern="[a-zA-Z]+" />
				</h:inputText>
				<h:message for="tnome" style="color:red" />

				<h:outputText id="lsobrenome" value="Sobrenome:" />
				<h:inputText id="tsobrenome" value="#{Participante.sobrenome}"
					size="40" required="true" label="Sobrenome"
					requiredMessage="#{msg['requerido.sobrenome']}">
					<f:validateRegex pattern="[a-zA-Z]+" />
				</h:inputText>

				<h:message for="tsobrenome" style="color:red" />

				<h:outputText id="lcargo" value="Cargo" />
				<h:selectOneMenu id="tcargo" style="width:210px"
					value="#{Participante.cargo}" required="true"
					requiredMessage="#{msg['requerido.cargo']}">
					<f:selectItem itemValue="Vocalista" itemLabel="Vocalista" />
					<f:selectItem itemValue="Guitarrista" itemLabel="Guitarrista" />
					<f:selectItem itemValue="Baixista" itemLabel="Baixista" />
					<f:selectItem itemValue="Baterista" itemLabel="Baterista" />
					<f:selectItem itemValue="" itemLabel="" />
					<f:validateRegex pattern="[a-zA-Z]+" />
				</h:selectOneMenu>

				<h:message for="tcargo" style="color:red" />

				<h:outputText id="ldata" value="Data de Admissão" />
				<h:inputText value="#{Participante.data}" required="true"
					requiredMessage="#{msg['requerido.data']}">
					<f:convertDateTime pattern="dd/mm/yyyy" />
				</h:inputText>

				<h:message for="tdata" style="color:red" />

				<h:outputText id="lsalario" value="Salário" />
				<h:inputText id="tsalario" value="#{Participante.salario}"
					required="true" label="Salário"
					requiredMessage="#{msg['requerido.salario']}"
					validatorMessage="#{msg['validar.salario']}">
					<f:convertNumber currencySymbol="$" type="currency" />
					<f:validateDoubleRange minimum="788.00" maximum="9999.99" />
				</h:inputText>

				<h:message for="tsalario" style="color:red" />

				<h:outputText id="lgenero" value="Sexo" />
				<h:selectOneRadio id="tgenero" value="#{Participante.genero}"
					required="true" requiredMessage="#{msg['requerido.genero']}">
					<f:selectItem itemValue="Masculino" itemLabel="Masculino" />
					<f:selectItem itemValue="Feminino" itemLabel="Feminino" />
				</h:selectOneRadio>

				<h:message for="tgenero" style="color:red" />

				<h:outputText id="lativo" value="Ativo" />
				<h:selectBooleanCheckbox value="#{Participante.ativo}"></h:selectBooleanCheckbox>
				<br />

				<h:outputText id="lobservacao" value="Observação" />
				<h:inputTextarea value="#{Participante.observacao}" rows="5"
					cols="30" />

			</h:panelGrid>

		</fieldset>

		<br />

		<h:commandButton id="submit" action="resultado.xhtml"
			value="Enviar Dados" />

	</h:form>
</h:body>
</html>

Resultado.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">

<f:loadBundle basename="resources.application" var="msg" />

<head>
<title><h:outputText value="#{msg.welcomeTitle}" /></title>

</head>

<h:body>
	<h2>JSF - Desenvolvimento Aberto - Managed Beans -</h2>
	<h3>
		<h:outputText id="lnome"
			value="Java Server Faces- Elementos de Formulário - Resultado" />
	</h3>
	<h:panelGrid columns="2">

		<h:outputLabel value="Nome:" />
		<h:outputText value="#{Participante.nome}" />

		<h:outputLabel value="Sobrenome:" />
		<h:outputText value="#{Participante.sobrenome}" />

		<h:outputLabel value="Cargo:" />
		<h:outputText value="#{Participante.cargo}" />

		<h:outputLabel value="Data de Admissão:" />
		<h:outputText value="#{Participante.data}">
			<f:convertDateTime pattern="dd/mm/yyyy" />
		</h:outputText>

		<h:outputLabel value="Salário" />
		<h:outputText value="#{Participante.salario}">
			<f:convertNumber currencySymbol="$" type="currency" />
		</h:outputText>

		<h:outputLabel value="Sexo:" />
		<h:outputText value="#{Participante.genero}" />

		<h:outputLabel value="Ativo:" />
		<h:outputText value="#{Participante.ativo}" />

		<h:outputLabel value="Observacao" />
		<h:outputText value="#{Participante.observacao}" />

	</h:panelGrid>
</h:body>
</html>

Application.properties

# -- welcome --
welcomeTitle=Desenvolvimento Aberto
requerido.nome=O campo nome é obrigátorio.
requerido.sobrenome=O campo sobrenome é obrigátorio.
requerido.cargo=O campo cargo é obrigátorio.
requerido.data=O campo data de admissão é obrigátorio.
requerido.genero=O campo genero é obrigátorio.
requerido.salario =O campo salário é obrigatório.
validar.salario =O salário não pode ser menor que o valor minimo atual.

Em ciência da computação teórica e teoria da linguagem formal, uma expressão regular abreviada de Regex ou Regexp e, por vezes chamado de uma expressão racional é uma sequência de caracteres que forma um padrão de pesquisa, principalmente para uso na correspondência de padrões com Strings, ou sequência correspondente, ou seja, como operações de localizar e substituir. O conceito surgiu na década de 1950, quando o matemático americano Stephen Kleene formalizava a descrição de uma linguagem regular, e entrou em uso comum com os utilitários Unix de processamento de texto.

Cada caractere em uma expressão regular ou é entendido como um MetaCharacter com seu significado especial, ou um caractere regular com o seu significado literal. Em conjunto, eles podem ser usados para identificar material textual de um determinado padrão, ou processar um número de instâncias do mesmo que podem variar de uma igualdade exata para uma semelhança muito geral do padrão.

O Regex pode ser usado para analisar rapidamente grandes quantidades de texto para encontrar padrões de caracteres específicos; para extrair, editar, substituir ou excluir substrings de texto, também é comum serem utilizadas para validar campos.

Regular Expression

Existe muito material sobre expressões regulares, inclusive a API do Javascript contempla métodos para combinar sequências de caracteres contra padrões especificados por expressões regulares

Regex: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Regular_Expressions

Por outro lado existem alguns sites que proporcionam ótimos materiais sobre Regex e permitem que você crie e teste sua própria expressão regular antes de a utilizar.

RegExr: http://regexr.com/

Expressão regular que contempla caracteres maiúsculos e minúsculos: Pattern [a-zA-Z]+

Regex - [a-zA-Z]+

Regex – [a-zA-Z]+

Expressão regular que contempla números inteiros e flutuantes: Pattern (?:\d*\.)?\d+

Regex - (?:\d*\.)?\d+

Regex – (?:\d*\.)?\d+

Usando Expressões Regulares

1 – Crie uma página web, utilize os scripts JQuery adequados no qual você pode conferir no código abaixo:

JQuery UI - Validação - Regex

JQuery UI – Validação – Regex

Exemplo:

Neste exemplo utilizamos expressões regulares para validar o conteúdo dos campos de uma aplicação JQuery. Na aplicação se um campo de texto conter caracteres que não correspondem a expressão serão automaticamente invalidados.

JQuery

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Desenvolvimento Aberto</title>

<style type="text/css">
body {
	font: 62.5% "Trebuchet MS", sans-serif;
	margin: 50px;
}

#cadastro label {
	width: 250px;
}

#cadastro label.error, #cadastro input.submit {
	color: darkorange;
	margin-left: 253px;
}
</style>
<!--
         Está é uma instalação do JQuery, você apenas precisa apontar
         para o respectivo script da versão que você deseja utilizar

         jquery.js     = JQuery
         jquery-ui.js  = JQuery UI
         jquery-ui.css = JQuery Theme
    -->
<link href="./jquery-ui-1.11.2.custom/jquery-ui.css" rel="stylesheet"
	type="text/css" />
<script type="text/javascript"
	src="./jquery-ui-1.11.2.custom/external/jquery/jquery.js">

</script>
<script type="text/javascript"
	src="./jquery-ui-1.11.2.custom/jquery-ui.js">

</script>

<!-- JQuery Validator -->

<script type="text/javascript"
	src="./js/jquery-validation-1.13.1/dist/jquery.validate.js"></script>

<!-- Script JQuery - JQuery UI -->

<script type="text/javascript">
	// Declara UI e funções JQuery

	$(document).ready(function() {

		// Método de validação  - Adiciona método JQuery Validation
		$.validator.addMethod("regex", function(value, element, regexp) {
			var re = new RegExp(regexp);
			return this.optional(element) || re.test(value);
		}, "Menssagem substituída pela mensagem do Plug-in JQuery Validation.");

		// Cria regras de validação e customiza mensagens

		$("#cadastro").validate({
			rules : {
				nome : {
					required : true,
					regex : /[a-zA-Z]+/
				},
				sobrenome : {
					required : true,
					regex : /[a-zA-Z]+/
				},
				cargo : {
					required : true,
					regex : /[a-zA-Z]+/
				},
				salario : {
					required : true,
					regex : /(?:\d*\.)?\d+/
				},

			},

			messages : {
				nome : {
					required : "O campo nome é obrigatório.",
					regex : "Campo suporta somente letras."
				},
				sobrenome : {
					required : "O campo sobrenome é obrigatório.",
					regex : "Campo suporta somente letras."
				},
				cargo : {
					required : "O campo cargo é obrigatório.",
					regex : "Campo suporta somente letras."
				},
				salario : {
					required : "O campo salário é obrigatório.",
					regex : "Campo suporta somente decimais."
				},
			},
		});

		$("#accordion").accordion({
			heightStyle : "content"
		}).accordion("option", "icons", null)

		$("#abrir").button()

	});
</script>
</head>
<body>
	<h1>Desenvolvimento Aberto - JQuery - UI</h1>

	<h2>Form Validator - Validação</h2>
	<div id="accordion">
		<h3>Cadastro</h3>
		<div>
			<form id="cadastro" method="get" action="">
				<table>
					<tr>
						<td><label for="nome">Nome:</label></td>
						<td><input id="nome" name="nome" size="27" required>
							<br></td>
					</tr>
					<tr>
						<td><label for="sobrenome">Sobrenome:</label></td>
						<td><input id="sobrenome" name="sobrenome" size="35" required>
							<br></td>
					</tr>
					<tr>
						<td><label for="cargo">Cargo:</label></td>
						<td><input id="cargo" name="cargo" size="28" required>
							<br></td>
					</tr>
					<tr>
						<td><label for="salario">Salario:</label></td>
						<td><input id="salario" name="salario" size="18" required>
							<br></td>
					</tr>
				</table>
				<br>
				<button id="abrir" type="submit">Enviar Dados</button>
			</form>
		</div>
	</div>

</body>
</html>

JQuery UI – Validation Plug-in – Linux

Publicado: 31 de janeiro de 2015 em JavaScript, JQuery

O JQuery possui uma gama de plug-ins escritos sob o código aberto que permitem que você estenda as funcionalidades do JQuery, o JQuery Validation faz a validação de formulários do lado cliente de um modo simples e fácil, enquanto continua a oferecer uma abundância de opções de personalização. Faz dele uma boa escolha se você está construindo algo novo a partir do zero, mas também se você está tentando integrar algo em uma aplicação existente com muita marcação.

O JQuery Validation é open source e escrito sob a licença MIT e foi construído por um desenvolvedor líder na equipe jQuery UI, com o plug-in você pode validar campos requeridos de uma forma simples, ou customizar suas validações contando com inúmeras possibilidades, desde simples mensagens personalizadas até complexas validações sob regras que você pode definir. O download do JQuery Validation conta com vários exemplos de como utilizar o plug-in.

JQuery Validation: http://jqueryvalidation.org/

JQuery Validation

JQuery Validation

Exemplo:

Neste exemplo utilizamos o JQuery Validation para validar automaticamente os campos requeridos de um formulário. Para utiliza-lo basta efetuar o download e usar o arquivo contido na pasta Dist.

JQuery

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="Bluefish 2.2.6" />
<meta charset="utf-8" />
<title>Desenvolvimento Aberto</title>

<style type="text/css">
body {
	font: 62.5% "Trebuchet MS", sans-serif;
	margin: 50px;
}

#cadastro label {
	width: 250px;
}

#cadastro label.error, #cadastro input.submit {
	color: darkorange;
	margin-left: 253px;
}
</style>
<!-- 
         Está é uma instalação do JQuery, você apenas precisa apontar
         para o respectivo script da versão que você deseja utilizar
                  
         jquery.js     = JQuery
         jquery-ui.js  = JQuery UI     
         jquery-ui.css = JQuery Theme    
    -->
<link href="./jquery-ui-1.11.2.custom/jquery-ui.css" rel="stylesheet"
	type="text/css" />
<script type="text/javascript"
	src="./jquery-ui-1.11.2.custom/external/jquery/jquery.js">
	
</script>
<script type="text/javascript"
	src="./jquery-ui-1.11.2.custom/jquery-ui.js">
	
</script>

<!-- JQuery Validatr -->

<script type="text/javascript"
	src="./js/jquery-validation-1.13.1/dist/jquery.validate.js"></script>

<!-- Script JQuery - JQuery UI -->

<script type="text/javascript">
	// Declara UI e funções JQuery
	$(document).ready(function() {

		$("#cadastro").validate();

		$("#accordion").accordion({
			heightStyle : "content"
		}).accordion("option", "icons", null)

		$("#abrir").button()

	});
</script>
</head>
<body>
	<h1>Desenvolvimento Aberto - JQuery - UI</h1>

	<h2>Form Validator - Validação</h2>
	<div id="accordion">
		<h3>Cadastro</h3>
		<div>
			<form id="cadastro" method="get" action="">
				<table>
					<tr>
						<td><label for="nome">Nome:</label></td>
						<td><input id="nome" name="nome" size="27" required>
							<br></td>
					</tr>
					<tr>
						<td><label for="sobrenome">Sobrenome:</label></td>
						<td><input id="sobrenome" name="sobrenome" size="35" required>
							<br></td>
					</tr>
					<tr>
						<td><label for="cargo">Cargo:</label></td>
						<td><input id="cargo" name="cargo" size="28" required>
							<br></td>
					</tr>
					<tr>
						<td><label for="salario">Salario:</label></td>
						<td><input id="salario" name="salario" size="18" required>
							<br></td>
					</tr>
				</table>
				<br>
				<button id="abrir" type="submit">Enviar Dados</button>
			</form>
		</div>
	</div>

</body>
</html>