Arquivo de fevereiro, 2015

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.