JSF – Hello World, AutoComplete

Olá, tudo bem?

Vamos tratar sobre um framework que tem sido uma mão na roda como “front end” para web: “JSF – Java Server Faces”.

Veremos aqui um tutorial do JSF 2.0 e ao final como fazer um “autocompletar” do eclipse. Lembro que, exceto pelo autocompletar ao final, esse exemplo pode ser feito em um bloco de notas.

Caso você tenha dúvidas de como criar um WebServer básico, você pode visitar esse link: Criando um WebServer. Existem também outros assuntos tratados para WebServer que você pode encontrar aqui: Tratando Exceções em uma Aplicação Web, Autenticação de Usuários (Filter/Servlet).

Vamos começar pelos downloads?

Vamos criar um novo projeto do tipo Dynamic Web Project já adicionando como servidor o Tomcat 6.0. Caso você tenha alguma dúvida de como instalar o container Tomcat você poderá ver o passo a passo aqui: Criando um WebServer. New Dynamic Project

Precisamos também copiar os arquivos “*.jar” que nós acabamos de baixar para dentro da pasta “WebContent/WEB-INF/lib”. Você irá encontrar os arquivos do JSF Mojarra dentro do arquivo que você baixou, pelo seguinte caminho “mojarra-2.0.3-FCS/lib”. Ao final teremos dentro da pasta “WebContent/WEB-INF/lib” três arquivos do tipo jar: “jsf-api.jar“, “jsf-impl.jar“, “jstl-1.2.jar“.

Vamos alterar o arquivo “web.xml”.

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
    version="2.5">
    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>*.jsf</url-pattern>
        <url-pattern>/faces/*</url-pattern>
    </servlet-mapping>
    <welcome-file-list>
        <welcome-file>faces/index.xhtml</welcome-file>
    </welcome-file-list>
</web-app>

Mesmo que não utilizemos o “faces-config.xml”, será necessária sua criação.

<?xml version="1.0"?>
<faces-config xmlns="http://java.sun.com/xml/ns/javaee"
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation="http://java.sun.com/xml/ns/javaee

http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd"

   version="2.0">
  <!--  
      Let's keep it empty. In JSF 2.0 we use annotations. 
  -->
</faces-config>

Vamos criar a classe Java que funcionará como nosso controlador. Nela iremos colocar uma mensagem de boas vindas. Em uma aplicação de grande porte, poderia ser o nome do usuário, alguma mensagem do banco de dados, etc. Nossa classe será colocada em um pacote chamado “com” e terá o nome de “Hello”:

package com;

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

@ManagedBean
@RequestScoped
public class Hello {
    
    private final String youAreWelcome = "You finished a simple hello world. Let's navigate?";

    public String getYouAreWelcome() {
        return youAreWelcome;
    }    
}

E por último vamos criar uma página chamada “WebContent/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:h="http://java.sun.com/jsf/html">
    
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />        
        <title>Hellow World JSF 2.0</title>
    </h:head>
    
    
    <h:body>
            <h:form>
                    <h:outputText value="#{hello.youAreWelcome}"/>
            </h:form>
    </h:body>
</html>

Atenção, nossa página tem que ficar dentro da pasta WebContent.

Após adicionar nosso sistema ao Tomcat, basta iniciá-lo para acessar nosso programa pelo link: “http://localhost:8080/ProjectJSF/index.jsf”. Caso você tenha alguma dúvida de como manejar o Tomcat, visite esse link: Criando um WebServer. Eu estou fazendo o passo a passo enquanto escrevo esse tutorial, então caso você não tenha conseguido visualizar a página inicial, volte e revise seu código.

E por último, vamos simular uma navegação? Vamos realizar uma soma simples, iremos alterar nossa classe “Hello” adicionando dois números onde iremos realizar uma soma. Outro campo irá registrar o nome do usuário:

package com;

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

@ManagedBean
@RequestScoped
public class Hello {
    private String userName;
    private int valueA;
    private int valueB;
    private int total;

    private final String youAreWelcome = "You finished a simple hello world. Let's navigate?";

    public String getYouAreWelcome() {
        return youAreWelcome;
    }
    
    public String mathIt(){
        total = valueA + valueB;
        
        return "result.xhtml";
    }
    
    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }

    public int getValueA() {
        return valueA;
    }

    public void setValueA(int valueA) {
        this.valueA = valueA;
    }

    public int getValueB() {
        return valueB;
    }

    public void setValueB(int valueB) {
        this.valueB = valueB;
    }

    public void setTotal(int total) {
        this.total = total;
    }

    public int getTotal() {
        return total;
    }    
}

Precisamos também alterar nossa JSP inicial “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:h="http://java.sun.com/jsf/html">
    
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />        
        <title>Hellow World JSF 2.0</title>
    </h:head>
    
    
    <h:body>
            <h:form>
                <h:outputText value="#{hello.youAreWelcome}"/><br/>
                Your Name: <h:inputText id="userName" value="#{hello.userName}"/><br/>
                First Value: <h:inputText id="valueA" value="#{hello.valueA}"/><br/>
                Second Value: <h:inputText id="valueB" value="#{hello.valueB}"/><br/>
                  <h:commandButton value="Math It" title="Math It" action="#{hello.mathIt}"/>                
            </h:form>
    </h:body>
</html>

E vamos criar uma página para exibir nosso resultado “result.xhtml” (que deve ficar dentro da pasta WebContent).

<!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:h="http://java.sun.com/jsf/html">
    
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />        
        <title>Hellow World JSF 2.0</title>
    </h:head>
        
    <h:body>
        <h:form>
            Thanks for passing by: <h:outputText value="#{hello.userName}"/><br/>
            Total: <h:outputText value="#{hello.total}"/>
        </h:form>
    </h:body>
</html>

Acessando novamente a página inicial veremos que a navegação está pronta. “http://localhost:8080/ProjectJSF/index.jsf

Um recurso que pesa muito é o “autocompletar”. E enquanto criava esse artigo eu notei que pelo fato do JSF utilizar o tipo de arquivo “xhtml” o eclipse não ativou o autocompletar. Achei diversas soluções que funcionavam para uns e não para outros. Encontrei uma bem simples que funcionou em diversos lugares que testei. Clique botão direito em cima do projeto e vá em “Properties > Project Facets”.Project properties Project Facetes Marque a opção JavaServer Faces, e pronto. Pode ir para a página index ou result que você já terá seu autocompletar funcionando. Project Facetes Autocompletar

Nos próximos posts sobre JSF iremos ver Ajax, validações, PrimeFaces, etc. O assunto é longo.

Espero que o post de hoje possa ter lhe ajudado.

Qualquer coisa, poste sua dúvida/comentário que irei responder.

Até a próxima.

Clean Code – Part 5

Hello, how are you?

My last post was too long ago because my pos graduation is taking all my time. I was doing a project and I had o hard time coding a full system. That is why I am without time to post.
Let us keep talking about clean code? The older posts you will find here: Part 01, Part 02, Part 03, Part 04

  • Copy and Paste (even in non OO codes) -> Avoid doing this copy and paste. When you got a task there is an easy way to finish it, it is very easy to copy a code from a place and past it to where we have to use it. By doing this code replication we are increasing the difficult of the code maintenance, breaking good coding patterns and even worst, propagating some bugs.Imagine if we got a complex method, and we need to use it in another place of our software; instead of doing a change to transforme the code to be more generic and apply it to every situation, some developers choose the easiest way to finish the task that is coping and pasting the method. After pasting the code the developer just have to do small changes to complete the task. Imagine now that we have a bug in this pasted code, so we fix the pasted and the original code. The problem is that the older developer did not tell us that this code was replicated more three times. Can you see the problem of replication?

    It would be easier create just one method to be invoked in all parts of the system.

    When writing your code, if you think something like: “I have done/seen something like this before…” it means that is time to you to stop and think. Be aware of any kind of replication:

    • Non OO codes -> Create just one method and use it in any place of your code.
    • OO codes -> Time to apply super-class, abstract class, etc.
  • Remove unnecessary code -> Have you notice the large amount of commented code on legacy software? By example:
    // user.setCreditCardByDate(credidCard, new Date());
    user.setCreditCard(credidCard);
    list.add(user);
    //for(int a = 0; i < list.size(); i++){
        //daoUser.deleteCredidCardHistory(list.get(i));
        //Logger.debug("im here!!!!");
    //}
    daoUser.deleteCredidCardHistory(list);

    If the commented code has no more use, why will you keep it? Sometimes it is normal keep the older code while you test the new one, but saving it? If you are not so sure about the code you wrote, it is better think twice before saving it.
    If we have a tool to control our software version, what is the purpose of saving a commented code? With this kind of versioning tool we can always check the older code.
    The committed code must be clean, easy to understand and with a straight objective. When your code has a lot of old commented code, the current code might lose its focus because the developer might try to understand the commented code and forget about the current code.
    Take a look on how the above code would be so much easier to read:

    user.setCreditCard(credidCard);
    list.add(user);
    daoUser.deleteCredidCardHistory(list);
  • Knowledge of the development language -> Always seeks to upgrade the knowledge you got in your development language. Sometimes your development language already has the method that you are trying to create. “There is no need to re-create the wheel”. Keep updated about your development language. When some task demands you to do something you never done before, research.
    Someday I found this code on certain software and became a joke on the company:

    for(int i = 0; i < 10; i++){
        //... Do stuff
        // Get inside the if when finds the condition
        if (...){
            i = 13;
        }
        // Do stuff
    }

    You can see that instead using the word break, the developer changed the counter value. That task could be done in an easier way and with more style:

    for(int i = 0; i < 10; i++){
        //... Do stuff
        // Get inside the if when finds the condition
        if (...){
            break;
        }
        // Do stuff
    }

    Maybe you think: “Well, at least was working right?!” I will answer your “Yes”, but I will also say that you will not become a joke at your company if you keep updated about your working tool. Another thing to think about the code above is: “What if we must change the counter value”? “What if we have to change the counter value?” “What if we have to change the counter value from 10 up to 100?” You would have to change at the “for” declaration and in the “if”. It’s not worth it.;

  • TODO -> The IDEs that we can find today help us with this reminder. We can easily write “// TODO”, and see this reminder all over the class/system. It is really easy to put this tag TODO in all system code, and it can remember us of everything that we have to do.

TODO

  • The problem is “as easy is to create it, the TODO will be easy to forget about it”. Once this is usual to all company, tons of TODOs codes might appear at the Task view in a short a time, doing your code dirty.One way out to avoid this kind of problem, once you know that the problem will not be fixed in a short time you will not write the tag TODO in your code (To more information about this approach: Watch out for TODO comments! By Alexandre Gazola).
    Other way out it would be to create your own tags. In your company you could agree in use the task TODO just to codes that will be fixed before the end of the task. We could use like: “// REMAKE” or “// REFACTOR” and by the IDEs we can filter by created TAGs.
  • Lose your ego -> I believe that one of the most difficulties of the human being is to lose the ego. Maybe you got a task to do, trusting in your 30 years of experience you will not talk with anyone about your task and will not gather ideas to do that. Ego it is something that only harm the human being. The best thing to do is to have a quick chat with a few people of your team to gather ideas, put them all together, and you can be sure that you code will have everything to get good design patterns, the right technologies and a good OO modeling.
    Just because someone was recently hired to the team, would mean that he does not have any knowledge. Talking and gathering ideas will take your project to another level.
    Leave your ego away; it will not take you anywhere.

That is all for today.

If you have any question, just post it. I do not know when I will post again because the Pos Graduation is taking a lot of time, but soon I will have more tutorials to post here.

See you later! o_

Código Limpo – Parte 05

Oi pessoal, tudo bem?

Realmente faz tempo que não postava algo, mas é por que o projeto de bloco da Pós-Graduação está tomando muito tempo. Então está complicado criar os posts.

Vamos continuar falando sobre Código Limpo? Os antigos posts você encontra aqui: Parte 01, Parte 02, Parte 03, Parte 04.

  • Copiar e Colar (mesmo em códigos não OO) -> Evitem isso ao máximo. Ao realizar uma tarefa existe uma enorme facilidade em copiar código de um lugar, e aplicar onde precisamos alterar. Com essa replicação de código estamos aumentando a dificuldade de manutenção, quebrando bons padrões de programação e talvez até propagando bugs.

    Imagine que existe um método com um complexo cálculo, onde é necessário aplicá-lo a outras partes do sistema. Ao invés de fazer alterações bem pensadas para deixar o método mais genérico, alguns desenvolvedores, acabam por escolher o mais fácil que seria copiar, colar. Após copiar e colar basta fazer pequenos ajustes. Imagine agora que após certo tempo nota-se que existe um erro no cálculo e alteramos o método inicial e o que foi replicado, mas o antigo programador não falou que esse código foi replicado mais 3x. Imaginou? Seria mais fácil ter criado apenas um método que fosse invocado em todas as partes do sistema.Reflita nisso. Quando você pensar “Eu já fiz esse código antes…”, quer dizer que é hora de parar, pensar e ver que está acontecendo uma provável duplicação:
    • Códigos não OO -> Crie apenas uma função e utilize-a de qualquer lugar do sistema.
    • Códigos OO -> Hora de aplicar super classes, classes abstrata, etc.
  • Remover código desnecessário -> Já reparou a quantidade códigos comentados existem em programas legados? Por exemplo:
    // user.setCreditCardByDate(credidCard, new Date());
    user.setCreditCard(credidCard);
    list.add(user);
    //for(int a = 0; i < list.size(); i++){
        //daoUser.deleteCredidCardHistory(list.get(i));
        //Logger.debug("im here!!!!");
    //}
    daoUser.deleteCredidCardHistory(list);

    Se esse método já está ultrapassado, por que mantê-lo? As vezes é normal deixar o código antigo enquanto se faz testes, mas salvá-los? Se você está incerto de sua alteração, é melhor pensar duas vezes antes de salvá-la por definitivo.
    Se tivermos um versionador qual seria o propósito de salvar um código comentado? Uma vez que temos essa ferramenta para consultar o antigo código sempre.

    O código salvo tem que ser um código limpo, que seja fácil de entender, objetivo. Quando um código apresenta vários códigos antigos comentados, o código atual perde um pouco do foco pois o desenvolvedor pode querer entender o código antigo comentado.

    Olhe como ficaria mais limpo o código:

    user.setCreditCard(credidCard);
    list.add(user);
    daoUser.deleteCredidCardHistory(list);
  • Conhecimento da linguagem -> Procure sempre aprimorar seu conhecimento na linguagem. Algumas vezes a própria linguagem já contém métodos prontos e já funcionais para você. “Não existe a necessidade reinventar a roda”. Mantenha-se informado sobre sua linguagem de desenvolvimento, se informe das novidades. Quando você receber uma tarefa que exige algo que você não fez ainda, pesquise.
    Um exemplo que uma vez encontrei, e virou piada na empresa, está no pedaço de código abaixo:

    for(int i = 0; i < 10; i++){
        //... Do stuff
        // Get inside the if when finds the condition
        if (...){
            i = 13;
        }
        // Do stuff
    }

    Vocês podem ver que ao invés de usar a palavra break, o desenvolvedor alterou o valor do contador. Sendo que poderia ser feito de forma mais fácil e com mais estilo:

    for(int i = 0; i < 10; i++){
        //... Do stuff
        // Get inside the if when finds the condition
        if (...){
            break;
        }
        // Do stuff
    }

    Talvez você pense: “Bem, estava funcionando não estava?” Eu te responderei que sim, mas também acrescento que você não irá virar piada se você estiver sempre querendo conhecer sua ferramenta de trabalho. Outra coisa a se pensar é, e se realmente fosse necessário alterar o valor do contador? Se o total subisse para 100 ao invés de 10? Teria que aumentar o valor do contador junto com o valor total de loops. Não vale a pena.

  • TODO – As IDEs de hoje nos ajudam muito com esse lembrete. Facilmente podemos escrever “// TODO” (em português “A Fazer”), e ver essas referências que estão por todo classe/sistema. Realmente é muito simples colocar esse lembrete em meio ao nosso código, pode nos lembrar de tudo que realmente está pendente.TODO
    O problema é que assim como é fácil criar é fácil esquecer. Uma vez que isso vire prática na empresa, milhares de TODOs poderão aparecer na view de Tasks em pouco tempo, com isso, vão ficar poluídos a view e seu código.
    Uma saída seria evitar esse tipo de abordagem, uma vez que você sabe que não existe previsão para realizar a alteração marcada no TODO. (Para mais informações dessa abordagem: Watch out for TODO comments! By Alexandre Gazola).
    Outra saída seria criar tags personalizadas. Para isso, a tag TODO poderia ter seu uso definido apenas para ações rápidas e que serão finalizadas antes do código ser salvo no versionador. Poderíamos criar, por exemplo: “// REMAKE …” ou então “// REFACTOR …” E pelas IDEs é possível filtrar por tags customizadas.
  • Perca seu orgulho – Creio que uma das maiores barreiras do ser humano é essa, perder o orgulho. Talvez você tenha uma tarefa a fazer, tenha 30 anos como desenvolvedor e com isso acaba por não comentar com ninguém ou trocar idéias sobre sua tarefa. Orgulho é algo que apenas prejudica o ser humano. A melhor coisa a se fazer é ter um bate papo rápido com algumas pessoas da equipe para coletar idéias, mescle todas, e pode ter certeza que seu código tem tudo para ter bons padrões de projeto, as corretas tecnologias e uma boa modelagem OO.
    Não é só por que alguém acabou de entrar na equipe que ele não irá ter conhecimento algum. Conversar e trocar idéias irá levar seu projeto a um novo patamar.
    Deixe seu orgulho de lado, ele não irá te levar a lugar algum.

Por hoje é só qualquer observação basta colocar. Não sei quando irei postar novamente por causa da Pós-Graduação, mas em breve terei várias tutoriais para colocar aqui.

Até mais! o_