Create Page

Introdução

Conforme comentamos na especificação do artigo Page, em determinados casos, você precisará adicionar funcionalidades como Criar, Excluir e Editar. Utilizaremos um exemplo para demonstrar o procedimento de Criação, onde precisamos criar um novo curso para a faculdade dos artigos anteriores.

Antes de iniciar

Este item exige conhecimentos sobre:

  • HTML
  • JavaScript
  • SiteBricks
  • Serviço
  • Form

Acesso rápido

Para acessar os tópicos siga o checklist abaixo: <table class="table table-bordered">

Criando o CursoCreatePage.html Criando o FormDeCurso.html Criando o CursoCreatePage.java Criando o CursoCreatePageMeta.java Criando o FormDeCurso.java Atualizando o Módulo

</table>

Criando o CursoCreatePage.html

O primeiro passo é editar o arquivo CursoPage.html e inserir um link responsável pelo redirecionamento à página de criação. Este redirecionamento (em geral) também é feito por um botão, uma ação, entre outras funcionalidades.

Nota: Omitiremos os códigos que define o estilo da página (css) para um melhor entendimento.

<!doctype html>
<html>

<head>
<script type="text/javascript"></script>
<title>Faculdade</title>
</head>

<body>

    <div>
      <ul>
        <li>
          <a href="${bricks.baseUrl}">Faculdade</a>
        </li>
      </ul>
    </div>
    
    <div>
      <ul>
        <li>
          <a href="curso/criar">Criar</a>
        </li>
      </ul>
    </div>

</body>

</html>

Crie o arquivo CursoCreatePage.html no pacote ui.page.bd com os seguintes códigos:

<!doctype html>
<html>
<body>

  <div>
    @FormDeCurso(url=formAction, method="post")
    <div></div>
  </div>

</body>
</html>

Neste passo, definimos em uma div um @FormDeCurso para que o formulário de FormDeCurso.html (ainda não criado) possa ser preenchido e o FormDeCursoCreate executado.

Importante: Estas páginas aparentam ser bem simples, mas é necessário ter conhecimentos básicos em SiteBricks.

Criando o FormDeCurso.html

Iremos começar a criar o formulário onde o usuário preencherá os dados que deverão ser cadastrados/ inseridos no banco de dados. Para maior entendimento, definiremos apenas a criação do nome do curso. Este arquivo deve estar no pacote ui.api.crud do projeto.

<!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>

Definimos através de JavaScript o formulário com o campo nome a ser preenchido.
Para mais informações sobre a biblioteca de códigos JavaScript utilizada, acesse aqui.

Criando o CursoCreatePage.java

A partir de agora, criaremos as classes das páginas já prontas. Iniciaremos pela classe CursoCreatePage no pacote ui.page.bd do projeto.

Esta classe terá todos os métodos definidos em CursoPage, porém, com um método adicional. Este método é o getFormAction(), responsável por “executar” o FormDeCursoCreate. Vejamos os códigos:

@Decorated
public class CursoCreatePage extends BasePage {

  @Inject
  public CursoCreatePage(Bricks bricks) {
    super(bricks);
  }

  public String getFormAction() {
    return getBricks().getBaseUrl() + "/api/crud/curso";
  }

  @Override
  protected MetaPageScript getPageMeta() {
    return new CursoCreatePageMeta();
  }

}

Utilize os atalhos para criar as classes como o Ctrl + 1.

Criando o CursoCreatePageMeta.java

Mais uma vez temos códigos semelhante, estes códigos estão em CursoPageMeta. Só que desta vez, especificaremos a String em onClick para a página de CursoCreatePage.html. Crie a classe no pacote ui.page.bd do projeto.

public class CursoCreatePageMeta extends AbstractPageMeta {

  @Override
  protected void pageMetaFor() {
    install(new CursoPageMeta());

    display("Novo Curso").onClick("bd/curso/criar");
  }

}

Criando o FormDeCurso.java

Esta é a classe que terá os dados preenchidos na página do formulário anterior. Crie-a no pacote ui.api.crud. Não esquece de torná-la uma subclasse de AbstractForm que se encontra no pacote br.com.objectos.comuns.sitebricks.

@Show("FormDeCurso.html")
public class FormCurso extends AbstractForm<Curso> {

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

}

Atualizando o Módulo

Para finalizar, adicione essas classes CursoCreatePage e FormDeCurso no módulo ModuloFaculdadeUI conforme os códigos a seguir:

@Override
protected void bindApiCrud() {
  at("api/crud/faculdade/curso").serve(FormDeCursoCreate.class);
  at("api/crud/faculdade/curso/:curso/aluno").serve(FormDeAlunoCreate.class);
  at("api/crud/faculdade/curso/:curso/aluno/:aluno").serve(FormDeAlunoUpdate.class);
}

@Override
protected void bindApi() {
  at("/api/bd/faculdade/curso").serve(ServicoDeCurso.class);
  at("/api/bd/faculdade/curso/:curso/aluno").serve(ServicoDeAluno.class);
}

@Override
protected void bindPages() {
  at("/").show(IndexPage.class);
  at("/faculdade/curso").show(CursoPage.class);
  at("/faculdade/curso/criar").show(CursoCreatePage.class);
}

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

Para mais informações acesse os códigos nos links abaixo:

FormDeCurso.html
FormDeCurso.java
CursoCreatePage.html
CursoCreatePage.java
CursoCreatePageMeta.java
ModuloFaculdadeUI.java

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