FORMULÁRIO
AutoComplete
Seleção em Cascata
Tags
Editar no Lugar
Grupo de Entrada
Máscara de Entrada
Entrada de Número
Entrada de Texto
Área de Texto
Filtro de Teclado
Teclado
Botão Giratório
Caixa de Seleção Múltipla
Senha
Avaliação
Seleção Booleana
Caixa de Seleção
Botão de Escolha
Botão Radio
Menu caixa de seleção
Menu Seleção
Caixa de lista
Menu Selecionar Vários
Caixa de Seleção
Assinatura
Barra Deslizante
Numérico Giratório
Editor de Texto
Interruptor
Caixa três estados
BOTÕES
DADOS
Carrossel
Linha de Tempo
Dados em Tabelas
Mapa Mental
Ordenar Listas
Organograma
Lista de Escolhas
Roleta
Tag Nuvem
- Básico
- Alternador de Colunas
- Menu de Contexto
- Cadastro
- Prioridade de Exibição
- Colunas Dinâmicas
- Editável
- Cabeçalho e Rodapé
- Campo para Filtro
- Filtro
- Linhas de Grade
- Grupo
- Carregamento Lento
- Múltiplos Carregamentos
- Paginação
- Reordenar
- Redimensionar
- Responsivo
- Adicionar Linha
- Linhas Coloridas
- Expansão de Linhas
- Linhas Agrupadas
- Alinhado a direita
- Barras de Rolagem
- Seleção
- Tamanho
- Ordenar
- Cabeçalho Fixo
- Linhas Listradas
PAINEL
Retrátil
Cartões
Painel de Controle
Divisores
Conjunto de Campo
Painel de Saída
Painel
Painel em Grade
Divisor
Painel em Rolagem
Guia de Visualização
Barra de Ferramentas
Etapas
SOBREPOSIÇÕES
MENU
Caminho em Partes
Menu Animado
Mega Menu
Menu
Barra de Menu
Botão
Painel
Deslizante
Itens Animados
Passos
Abas
Camadas
GRÁFICOS
MENSAGENS
MULTIMÍDIA
Áudio
Código de Barras
Comparação
Fluxo de Conteúdo
Imagens e Grácos
Exibir PDF
Trocar Imagem
Vídeo
ARQUIVOS
ARRASTAR E SOLTAR
VALIDAÇÃO DO LADO CLIENTE
ESTRUTURAS DE DIÁLOGOS
VARIADOS
Avatar
Distintivos
Espaço Marcado
Rolar para o Topo
Esqueleto
Marcação
Atualizar
Rótulo de Saída
Bloqueio
Captcha
Relógio
Contexto
Efeitos
Leitor de Feed
Monitorar Atividade
Ícones
Registro
Foco
Teclas de Atalho
Impressão
Barra de Progresso
Reiniciar Entrada
Redimensionável
Destacador
Barra Fixa
Marca d'agua
Etapas
O assistente cria um fluxo de trabalho criando várias etapas em um formulário de página única. Apenas a etapa atual é processada parcialmente e a próxima etapa é exibida se a etapa atual passar nas validações. O fluxo do assistente é sequencial por padrão e pode ser gerenciado usando ajax opcional, simplesmente o resultado define a próxima etapa a ser exibida.
$render=explode(" ", $_POST["partial_render"]);
if(isset($_POST["nome"])){
$_SESSION["nome"]=$_POST["nome"];
}
if(isset($_POST["sobrenome"])){
$_SESSION["sobrenome"]=$_POST["sobrenome"];
}
if(isset($_POST["idade"])){
$_SESSION["idade"]=$_POST["idade"];
}
if(isset($_POST["endereco"])){
$_SESSION["endereco"]=$_POST["endereco"];
}
if(isset($_POST["cep"])){
$_SESSION["cep"]=$_POST["cep"];
}
if(isset($_POST["cidade"])){
$_SESSION["cidade"]=$_POST["cidade"];
}
if(isset($_POST["email"])){
$_SESSION["email"]=$_POST["email"];
}
if(isset($_POST["telefone"])){
$_SESSION["telefone"]=$_POST["telefone"];
}
if(isset($_POST["info"])){
$_SESSION["info"]=$_POST["info"];
}
if($_POST["etapas_stepToGo"]=="address"){
if($_POST["nome"]=="" or $_POST["sobrenome"]=="" ){
if($_POST["nome"]==""){
$est_nome="ui-state-error";
$m_nome="<li role="alert" aria-atomic="true"><span class="ui-messages-error-summary">Nome: Erro de validação: Valor Obrigatório.</span></li>";
}
if($_POST["sobrenome"]==""){
$est_sobrenome="ui-state-error";
$m_sobrenome="<li role="alert" aria-atomic="true"><span class="ui-messages-error-summary">Sobrenome: Erro de validação: Valor Obrigatório.</span></li>";
}
$resposta="
<div id="painel" class="ui-panel ui-widget ui-widget-content ui-corner-all" data-widget="widget_painel">
<div id="painel_header" class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all"><span class="ui-panel-title">Dados pessoais</span></div>
<div id="painel_content" class="ui-panel-content ui-widget-content">
<div id="msg" class="ui-messages ui-widget" aria-live="polite" data-global="false" data-summary="data-summary" data-severity="all,error" data-redisplay="true">
<div class="ui-messages-error ui-corner-all"><span class="ui-messages-error-icon"></span>
<ul>".$m_nome.$m_sobrenome."</ul>
</div>
</div>
<script id="msg_s" type="text/javascript">
DinarteCoelho.cw("Messages", "widget_msg", {
id: "msg"
});
</script>
<table>
<tbody>
<tr>
<td class="label">Nome: *</td>
<td class=" value"><input id="nome" name="nome" type="text" value="".$_SESSION["nome"]."" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all ".$est_nome." " aria-required="true" aria-invalid="true" data-p-label="Firstname" data-p-required="true" />
<script id="nome_s" type="text/javascript">
DinarteCoelho.cw("InputText", "widget_nome", {
id: "nome"
});
</script>
</td>
</tr>
<tr>
<td class="label">Sobrenome: *</td>
<td class=" value"><input id="sobrenome" name="sobrenome" type="text" value="".$_SESSION["sobrenome"]."" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all ".$est_sobrenome." " aria-required="true" aria-invalid="true" data-p-label="Lastname" data-p-required="true" />
<script id="sobrenome_s" type="text/javascript">
DinarteCoelho.cw("InputText", "widget_sobrenome", {
id: "sobrenome"
});
</script>
</td>
</tr>
<tr>
<td class="label">Idade: </td>
<td class=" value"><input id="idade" name="idade" type="text" value="".$_SESSION["idade"]."" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all " data-p-con="Integer" />
<script id="idade_s" type="text/javascript">
DinarteCoelho.cw("InputText", "widget_idade", {
id: "idade"
});
</script>
</td>
</tr>
<tr>
<td class="label">Pular tudo: </td>
<td class=" value"><input type="checkbox" name="pular" /></td>
</tr>
</tbody>
</table>
</div>
</div>
<script id="painel_s" type="text/javascript">
DinarteCoelho.cw("Panel", "widget_painel", {
id: "painel"
});
</script>
";
$extension="{"currentStep":"personal"}";
}else{
$resposta="
<div id="painel" class="ui-panel ui-widget ui-widget-content ui-corner-all" data-widget="widget_painel">
<div id="painel_header" class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all"><span class="ui-panel-title">Detalhes do Endereço</span></div>
<div id="painel_content" class="ui-panel-content ui-widget-content">
<div id="msg" class="ui-messages ui-widget" aria-live="polite" data-global="false" data-summary="data-summary" data-severity="all,error" data-redisplay="true"></div>
<script id="msg_s" type="text/javascript">
DinarteCoelho.cw("Messages", "widget_msg", {
id: "msg"
});
</script>
<table>
<tbody>
<tr>
<td class="label">Endereço: </td>
<td class=" value"><input id="endereco" name="endereco" value="".$_SESSION["endereco"]."" type="text" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all " />
<script id="endereco_s" type="text/javascript">
DinarteCoelho.cw("InputText", "widget_endereco", {
id: "endereco"
});
</script>
</td>
</tr>
<tr>
<td class="label">CEP: </td>
<td class=" value"><input id="cep" name="cep" type="text" value="".$_SESSION["cep"]."" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all " />
<script id="cep_s" type="text/javascript">
DinarteCoelho.cw("InputText", "widget_cep", {
id: "cep"
});
</script>
</td>
</tr>
<tr>
<td class="label">Cidade: </td>
<td class=" value"><input id="cidade" name="cidade" type="text" value="".$_SESSION["cidade"]."" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all " />
<script id="cidade_s" type="text/javascript">
DinarteCoelho.cw("InputText", "widget_cidade", {
id: "cidade"
});
</script>
</td>
</tr>
<tr>
<td class="label">Pular tudo: </td>
<td class=" value"><input type="checkbox" name="pular" /></td>
</tr>
</tbody>
</table>
</div>
</div>
<script id="painel_s" type="text/javascript">
DinarteCoelho.cw("Panel", "widget_painel", {
id: "painel"
});
</script>
";
$extension="{"currentStep":"address"}";
}
}
if($_POST["etapas_stepToGo"]=="contact"){
$resposta="
<div id="painel" class="ui-panel ui-widget ui-widget-content ui-corner-all" data-widget="widget_painel">
<div id="painel_header" class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all"><span class="ui-panel-title">Informações de Contato</span></div>
<div id="painel_content" class="ui-panel-content ui-widget-content">
<div id="msg" class="ui-messages ui-widget" aria-live="polite" data-global="false" data-summary="data-summary" data-severity="all,error" data-redisplay="true"></div>
<script id="msg_s" type="text/javascript">
DinarteCoelho.cw("Messages", "widget_msg", {
id: "msg"
});
</script>
<table>
<tbody>
<tr>
<td class="label">E-mail: *</td>
<td class=" value"><input id="email" name="email" type="text" value="".$_SESSION["email"]."" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all " aria-required="true" data-p-label="Email" data-p-required="true" />
<script id="email_s" type="text/javascript">
DinarteCoelho.cw("InputText", "widget_email", {
id: "email"
});
</script>
</td>
</tr>
<tr>
<td class="label">Telefone: </td>
<td class=" value"><input id="telefone" name="telefone" type="text" value="".$_SESSION["telefone"]."" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all " />
<script id="telefone_s" type="text/javascript">
DinarteCoelho.cw("InputText", "widget_telefone", {
id: "telefone"
});
</script>
</td>
</tr>
<tr>
<td class="label">Informação Adcional: </td>
<td class=" value"><input id="info" name="info" type="text" value="".$_SESSION["info"]."" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all " />
<script id="info_s" type="text/javascript">
DinarteCoelho.cw("InputText", "widget_info", {
id: "info"
});
</script>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script id="painel_s" type="text/javascript">
DinarteCoelho.cw("Panel", "widget_painel", {
id: "painel"
});
</script>
";
$extension="{"currentStep":"contact"}";
}
if($_POST["etapas_stepToGo"]=="personal"){
$resposta="
<div id="painel" class="ui-panel ui-widget ui-widget-content ui-corner-all" data-widget="widget_painel">
<div id="painel_header" class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all"><span class="ui-panel-title">Dados pessoais</span></div>
<div id="painel_content" class="ui-panel-content ui-widget-content">
<div id="msg" class="ui-messages ui-widget" aria-live="polite" data-global="false" data-summary="data-summary" data-severity="all,error" data-redisplay="true"></div>
<script id="msg_s" type="text/javascript">
DinarteCoelho.cw("Messages", "widget_msg", {
id: "msg"
});
</script>
<table>
<tbody>
<tr>
<td class="label">Nome: *</td>
<td class=" value"><input id="nome" name="nome" type="text" value="".$_SESSION["nome"]."" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all " aria-required="true" data-p-label="Firstname" data-p-required="true" />
<script id="nome_s" type="text/javascript">
DinarteCoelho.cw("InputText", "widget_nome", {
id: "nome"
});
</script>
</td>
</tr>
<tr>
<td class="label">Sobrenome: *</td>
<td class=" value"><input id="sobrenome" name="sobrenome" type="text" value="".$_SESSION["sobrenome"]."" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all " aria-required="true" data-p-label="Lastname" data-p-required="true" />
<script id="sobrenome_s" type="text/javascript">
DinarteCoelho.cw("InputText", "widget_sobrenome", {
id: "sobrenome"
});
</script>
</td>
</tr>
<tr>
<td class="label">Idade: </td>
<td class=" value"><input id="idade" name="idade" type="text" value="".$_SESSION["idade"]."" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all " data-p-con="Integer" />
<script id="idade_s" type="text/javascript">
DinarteCoelho.cw("InputText", "widget_idade", {
id: "idade"
});
</script>
</td>
</tr>
<tr>
<td class="label">Pular tudo: </td>
<td class=" value"><input type="checkbox" name="pular" /></td>
</tr>
</tbody>
</table>
</div>
</div>
<script id="painel_s" type="text/javascript">
DinarteCoelho.cw("Panel", "widget_painel", {
id: "painel"
});
</script>
";
$extension="{"currentStep":"personal"}";
}
if($_POST["etapas_stepToGo"]=="confirm" or $_POST["pular"]=="on"){
if($_POST["email"]==""){
$resposta="
<div id="painel" class="ui-panel ui-widget ui-widget-content ui-corner-all" data-widget="widget_painel">
<div id="painel_header" class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all"><span class="ui-panel-title">Informações de Contato</span></div>
<div id="painel_content" class="ui-panel-content ui-widget-content">
<div id="msg" class="ui-messages ui-widget" aria-live="polite" data-global="false" data-summary="data-summary" data-severity="all,error" data-redisplay="true">
<div class="ui-messages-error ui-corner-all"><span class="ui-messages-error-icon"></span>
<ul>
<li role="alert" aria-atomic="true"><span class="ui-messages-error-summary">Email: Validation Error: Value is required.</span></li>
</ul>
</div>
</div>
<script id="msg_s" type="text/javascript">
DinarteCoelho.cw("Messages", "widget_msg", {
id: "msg"
});
</script>
<table>
<tbody>
<tr>
<td class="label">E-mail: *</td>
<td class=" value">
<input id="email" name="email" type="text" value="".$_SESSION["email"]."" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all ui-state-error " aria-required="true" aria-invalid="true" data-p-label="Email" data-p-required="true" />
<script id="email_s" type="text/javascript">
DinarteCoelho.cw("InputText", "widget_email", {
id: "email"
});
</script>
</td>
</tr>
<tr>
<td class="label">telefone: </td>
<td class=" value">
<input id="telefone" name="telefone" value="".$_SESSION["telefone"]."" type="text" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all " />
<script id="telefone_s" type="text/javascript">
DinarteCoelho.cw("InputText", "widget_telefone", {
id: "telefone"
});
</script>
</td>
</tr>
<tr>
<td class="label">Informação Adcional: </td>
<td class=" value">
<input id="info" name="info" value="".$_SESSION["info"]."" type="text" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all " />
<script id="info_s" type="text/javascript">
DinarteCoelho.cw("InputText", "widget_info", {
id: "info"
});
</script>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script id="painel_s" type="text/javascript">
DinarteCoelho.cw("Panel", "widget_painel", {
id: "painel"
});
</script>
";
$extension="{"currentStep":"contact"}";
}else{
$resposta="
<div id="painel" class="ui-panel ui-widget ui-widget-content ui-corner-all" data-widget="widget_painel">
<div id="painel_header" class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all"><span class="ui-panel-title">Confirmation</span></div>
<div id="painel_content" class="ui-panel-content ui-widget-content">
<table id="confirmation">
<tbody>
<tr>
<td class="grid">
<table>
<tbody>
<tr>
<td class="label">Nome: </td>
<td class=" value"><span class="outputLabel">".$_SESSION["nome"]."</span></td>
</tr>
<tr>
<td class="label">Sobrenome: </td>
<td class=" value"><span class="outputLabel">".$_SESSION["sobrenome"]."</span></td>
</tr>
<tr>
<td class="label">Idade: </td>
<td class=" value"><span class="outputLabel">".$_SESSION["idade"]."</span></td>
</tr>
</tbody>
</table>
</td>
<td class="grid">
<table>
<tbody>
<tr>
<td class="label">Endereço: </td>
<td class=" value"><span class="outputLabel">".$_SESSION["endereco"]."</span></td>
</tr>
<tr>
<td class="label">CEP: </td>
<td class=" value"><span class="outputLabel">".$_SESSION["cep"]."</span></td>
</tr>
<tr>
<td class="label">Cidade: </td>
<td class=" value"><span class="outputLabel">".$_SESSION["cidade"]."</span></td>
</tr>
</tbody>
</table>
</td>
<td class="grid">
<table>
<tbody>
<tr>
<td class="label">E-mail: </td>
<td class=" value"><span class="outputLabel">".$_SESSION["email"]."</span></td>
</tr>
<tr>
<td class="label">Telefone </td>
<td class=" value"><span class="outputLabel">".$_SESSION["telefone"]."</span></td>
</tr>
<tr>
<td class="label">Informação: </td>
<td class=" value"><span class="outputLabel">".$_SESSION["info"]."</span></td>
</tr>
<tr>
<td class="label"></td>
<td class=" value"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<button id="BtnEnviar" name="BtnEnviar" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" onclick="DinarteCoelho.ab({s:"BtnEnviar",f:"formulario",p:"BtnEnviar",u:"alerta"});return false;" type="submit"><span class="ui-button-text ui-c">Enviar</span></button>
<script id="BtnEnviar_s" type="text/javascript">
DinarteCoelho.cw("CommandButton", "widget_BtnEnviar", {
id: "BtnEnviar"
});
</script>
</div>
</div>
<script id="painel_s" type="text/javascript">
DinarteCoelho.cw("Panel", "widget_painel", {
id: "painel"
});
</script>
";
$extension="{"currentStep":"confirm"}";
}
}
if($render[0]=="alerta"){
$resposta="
<span id="alerta" class="ui-growl-pl" data-widget="widget_alerta" data-summary="data-summary" data-detail="data-detail" data-severity="all,error" data-redisplay="true"></span>
<script id="alerta_s" type="text/javascript">
DinarteCoelho.cw("Growl", "widget_alerta", {
id: "alerta",
sticky: true,
life: 6000,
escape: true,
keepAlive: false,
msgs: [{
summary: "Sucesso",
detail: "Bem Vindo: ".$_SESSION["nome"]."",
severity: "info",
severityText: "Information"
}]
});
</script>
";
}
dc.cw("Growl", "widget_alerta", {
id: "alerta"
, sticky: true
, life: 6000
, escape: true
, keepAlive: false
, msgs: []
});
dc.cw("Messages", "widget_msg", {
id: "msg"
});
dc.cw("InputText", "widget_nome", {
id: "nome"
});
dc.cw("InputText", "widget_sobrenome", {
id: "sobrenome"
});
dc.cw("InputText", "widget_idade", {
id: "idade"
});
dc.cw("Panel", "widget_painel", {
id: "painel"
});
dc.cw("Wizard", "widget_etapas", {
id: "etapas"
, showStepStatus: true
, showNavBar: true
, steps: ['personal', 'address', 'contact', 'confirm']
, initialStep: "personal"
});