Versão ALPHA! Este artigo está em versão 'Alpha' e, portanto, não foi ainda revisado corretamente

Habilitando páginas de edição na web

Introdução

Em aplicações que utilizam banco de dados é muito comum a realização de rotinas do tipo update, pois as informações tendem a mudar com o passar do tempo, para a realização deste tipo de operação existem componentes gráficos como formulários, responsáveis em armazenar informações que futuramente serão enviadas ao banco de dados onde será realizado o processo de update

Acesso rápido

Para acessar os tópicos do artigo siga o checklist abaixo:

Criando a classe java que representa a página html help!
Implementando o método getFormAction help!
Implementando o método getMetaPage help!
Implementando a classe EditPageMeta help!
Habilitando a página na web help!
Crie a classe que corresponde ao form help!
Crie o formulário html help!
Crie o html do edit page help!
Alterando o módulo help!
Finalizando help!

Edit Page ?

Este artigo tem como objetivo a implementação de páginas de edição, este tipo de página é bem parecido com uma página de criação, a única diferença entre ambos é a operação CRUD que é realizada e a forma como a página de edição é acessada em relação à página de criação.

Criando a classe java que representa a página html

Crie a classe CursoEditPage no pacote br.com.faculdade.ui.page, e certifique-se de que a mesma extenda a página de detalhes da entidade na qual será realizada o update, em nosso caso Curso.

Corrija os erros de compilação que aparecerem adicionando o construtor da classe, não se esqueça de anotar o construtor da classe com @Inject, caso contrário será lançada uma NullPointerException quando a página for chamada.

public class CursoEditPage extends CursoDetailsPage {

  @Inject
  public CursoEditPage(FaculdadeBricks bricks, BuscarCurso buscarCurso) {
	super(bricks, buscarCurso);
  }

}
Ao implementar um Edit page não é preciso implementar o método get pois o mesmo já foi implementado na superclasse, lembrando que o propósito deste método é popular uma entidade do tipo curso que será utilizada em CursoEditPageMeta.

Implementando o método getFormAction

Ainda em CursoEditPage é preciso implementar o método getFormAction que é responsável em definir a url para o form que será responsável em realizar o processo de update de curso, repare que esta url é a mesma que foi definida no módulo do projeto para o form de update da entidade.

public String getFormAction() {
  String baseUrl = bricks.getBaseUrl();
  Curso curso = getCurso();
  
  return String.format("%s/api/crud/faculdade/curso/%s", baseUrl, curso.getCodigo());
}

Como foi definida uma url para acessar um recurso da aplicação é essencial a utilização de uma propriedade do tipo Bricks para capturar a url base do sistema, além do mais estamos definindo no método uma url que utiliza um caracter coringa por conta disso o método getCurso de CursoDetailsPage foi chamado, para que seja possível capturar a propriedade codigo e criar a url através do método format da classe String.

Implementando o método getMetaPage

Este método vem da superclasse e deve ser sobrescrito para que retorne um CursoEditPageMeta que é responsável em exibir na página web o caminho do recurso que está sendo acessado no momento.

public MetaPageScript getMetaPage() {
  return new CursoEditPageMeta(getCurso());
}

Não se esqueça de enviar um curso como parâmetro ao construtor da classe, ele será utilizado na exibição de informações de curso na parte superior da página de edição.

Implementando a classe EditPageMeta

Ao criar a classe certifique-se de que a mesma extenda AbstractPageMeta, corrija os erros de compilação adicionando métodos e construtor da classe não se esquecendo de declarar uma propriedade do tipo curso.

public class CursoEditPageMeta extends AbstractPageMeta {
  
  private final Curso curso;
  
  public CursoEditPageMeta(Curso curso) {
    this.curso = curso;
  }
  
  protected void pageMetaFor() {
    install(new CursoDetailsPageMeta(curso));
    
    display("Editar").onClick("faculdade", "curso", curso.getCodigo(), "editar");
  }
  
}

Atenção as chamadas aos métodos install e display em pageMetaFor, ambos são responsáveis em exibir na tela o caminho até a página atual, equanto install exibe todo o caminho até CursoDetailsPage, display exibe o restante do caminho até a página atual.

Dica: Sempre que implementar um Edit Page certifique-se de que o método install chame o DetailsPageMeta da entidade que estiver trabalhando.

Habilitando a página na web

Após implementar as classes que representão o EditPage é preciso habilitar o form na web, para isso é preciso implementar o form html, uma classe auxiliar que representa o form e o arquivo html que equivale ao edit page de curso, essas três implementações foram separadas em tópicos abaixo.

Crie a classe que corresponde ao form

Antes de criar o arquivo html correspondente ao form crie a classe que representa o form em br.com.faculdade.ui.api.crud e certifique-se de que a classe extenda FormAbstrato, como esta classe utiliza generics é preciso informar o tipo de entidade a ser utilizada, em nosso caso, Curso.

@Show("FormDeCurso.html")
public class FormDeDefinicaoDeConjunto extends FormAbstrato<Curso> {

  public String getNome() {
    return pojo != null ? pojo.getNome() : "";
  }

}

Adicione o método getNome que equivale a única propriedade a ser alterada em curso, não se esqueça de adicionar a validação no retorno do método como é feito acima.

Dica: Para cada propriedade, ou melhor, para cada campo que existir no form, deve existir um getter para a propriedade do campo nesta classe.

Crie o formulário html

No pacote br.com.faculdade.ui.api.crud crie o html correspondente ao form, atente a sua implementação.

<!doctype html>
<html>
<head>
@Require
<script type="text/javascript">
  window.addEvent('domready', function() {
    new Bd.Form({
      fields : {

        nome : {
          type : 'text',
          'label' : 'Nome',

          elementProperties : {
            'class' : 'span5',
            'value' : '${nome}'
          }
        }
    
      }
    });
  });
</script>
</head>
<body>
  <form id="crud-frm" action="${url}" method="${method}">
  </form>
</body>
</html>

Crie o html do edit page

Crie no pacote br.com.faculdade.ui.page.bd o html que corresponde a página de edição

<!doctype html>
<html>
<body>

  @HdBd(title='Editar Curso: ' + curso.nome)
  <div></div>

  <div id="content" class="content">
    @FormDeCurso(url=formAction, method="put", pojo=definicao)
    <div></div>
  </div>

</body>
</html>
Importante: Repare que logo no início do html temos uma chamada a curso.nome, para que isso seja possível é preciso um método getter para Curso em CursoEditPage, caso contrário uma exceção será lançada dizendo que o método em questão não existe.

Alterando o módulo

Abra o módulo do projeto e adicione os binds para os arquivos criados nos seguintes métodos

private void bindBricks() {
  embed(FormDeCurso.class).as("FormDeCurso");
}

private void bindPages() {
  at("/bd/faculdade/curso/:curso/editar").show(CursoEditPage.class);
}

Finalizando

Agora basta adicionar o botão que acessa o edit page em CursoDetailsPage, abra o arquivo html correspondente e adicione o botão logo acima da exibição dos detalhes de Curso.

  <div class="span4">
    <div class="meta">
      <h3>Detalhes</h3>

      <ul class="unstyled meta-actions">
        <li>
          <a id="edit-btn" href="${curso.codigo}/editar" class="btn small danger">editar</a>
        </li>
      </ul>
    </div>
    <dl>
      <dt>Código</dt>
      <dd>${curso.codigo}</dd>
      <dt>Nome</dt>
      <dd>${curso.nome}</dd>
    </dl>
  </div>

</div>

Leia mais uma vez! Revisar!


 
 

objectos, Fábrica de Software LTDA

  • R. Demóstenes, 627. cj 123
  • 04614-013 - Campo Belo
  • São Paulo - SP - Brasil
  • +55 11 5093-8640
  • +55 11 2359-8699
  • contato@objectos.com.br