* Visite o ALJUG - http://aljug.blogspot.com - Noticias sobre a comunidade java alagoana e do mundo * Visite o blog Mundo Gamificado www.mundogamificado.com.br - E vamos mudar o mundo! *

quarta-feira, 12 de dezembro de 2018

Resetando valores na p:treetable

Boa pessoALL,  quanto tempo!

Mais é assim mesmo, vivo sempre aparece!


Hoje vou falar de algo que estava tirando meu sono, e que depois de muito procurar vi que é muito simples, sobre este assunto pude encontrar várias soluções porém nenhuma deu certo, comigo, e por isso venho colocar a solução que foi de forma bastante satisfatória.

O que eu queria?

Eu queria limpar a árvore para um estado inicial, ou se houvesse três checkboolean marcados e eu desmarcasse um, a arvore fosse redenderizada e mostrasse apenas que estavam ativas. Pois bem, pense no sufoco! Mais ainda, eu queria que de um lista fosse montado uma árvore(p:treeTable) com todos as opções, exemplo:
*Futebol              *Time                    *Estádio
  - Time                 - Patrocinador         - Capacidade
  - Estádio             - Presidente             - Local
  - Jogadores         - Treinador              - Nome

Então, o cenário é adicionar os marcados em (*) asterisco e a partir deles montasse uma árvore, até aí tudo certo, montava direitinho, porém quando eu desmarcava uma opção a árvore não o tirava, ainda ficava com as três opções.

Então, qual era minha ideia, limpar a árvore e montar com as que ainda permanecem ativas.

Achei essas soluções: Clean Input e reset values , mas não obtive sucesso.

A solução abaixo foi que realizou conforme eu desejava:


public void limparArvore(TreeNode raiz){
  raiz.getChildren().clear();
  raiz.clearParent();
  System.out.println("Limpando a árvore!");
  PrimeFaces pf = PrimeFaces.current();
  pf.resetInputs("form:arvore");
  raiz = createNode();
  pf.ajax().update("form:arvore");
 }

Com esse código eu fiquei muito feliz!

Espero ter ajudado a você, dê seu feedBack!

Até a próxima.

sexta-feira, 9 de fevereiro de 2018

Mudando a cor das series dos charts primefaces

E aí pessoal, quanto tempo?

Hoje vou falar da alteração de cor das series nos charts do primefaces, algo muito simples que muitos ensinam por ai de forma muito complicada.

O exemplo de hoje é Despesa vs. Receita, então visualmente sempre colocam vermelho para despesa e verde para receita.

Pois bem, hoje iremos usar o Barchart, e com isso ao criar a instancia como abaixo:


 
     private BarChartModel barModel;

Segundo este exemplo o vermelho vem na frente e depois o verde, então nesse caso ficaria assim:


   barModel.setSeriesColors("FF0000,32CD32");

Com isso, visualmente já iria visualizar assim:


Agora caso você queira que além das barras, o texto também, aí neste caso ficaria assim:


function alterarTextoLabel() { 
    this.cfg.axes.yaxis.tickOptions = { 
     textColor : '#32CD32' 
   }; 
  this.cfg.axes.xaxis.tickOptions = { 
     textColor : '#FF0000'
   }; 
}


Isso mesmo, seria uma função javascript, pois o primefaces usa o jqplot.

Espero ter ajudado, até a próxima!

domingo, 15 de janeiro de 2017

Problema com sufixo no JSF

Por muito tempo procurei a respeito de uma falha que fazia com que a página quando tinha o sufixo .xhtml não aparecia os recursos, deixei para lá por um bom tempo, hoje peguei um projeto antigo que existia esse problema, eu rodava a plicação e não aparecia como desejava, só quando eu mudava o sufixo para .jsf. Pois bem, em primeiro lugar tenho que achar o erro, ou aonde está acontecendo o "conflito", que é na web.xml, o código estava assim:

 
<servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>*.jsf</url-pattern>
    </servlet-mapping>
    <session-config>
        <session-timeout>
            30
        </session-timeout>
    </session-config>
    <welcome-file-list>
        <welcome-file>index.jsf</welcome-file>
    </welcome-file-list>

Logo me veio o estalo, poxa! eu não estou vendo o .xhtml, então adicionei
 <welcome-file>index.xhtml</welcome-file>  
e não aconteceu como eu queria, permanecendo da mesma forma.
Então, adicionei

<url-pattern>*.xhtml</url-pattern>

no servlet Faces Servlet e neste caso funcionou como eu queria. 

Uma dica simples que pode ajudar muita gente.


Até a próxima.

segunda-feira, 18 de janeiro de 2016

Gravando arquivo do tipo byte no banco de dados com Hibernate

Olá pessoal,

Neste post vou mostrar como pode salvar um arquivo, que pode ser pdf e imagem, no banco de dados com hibernate.

Vamos colocar a mão na massa!

Primeiro iremos classificar a variável como abaixo:

    private byte[] arquivo;

Com isso você vai colocar as anotações do hibernate como no exemplo 2 deste link da documentação.

    @Lob

    @Basic(fetch = FetchType.LAZY)*

    @Column(name="arqdocumento")

    private byte[] arquivo;


* Você pode ver uma dica de quando usar o EAGER e LAZY.

Com isso você já configurou para que no banco de dados recebe o tipo byte.

E para buscar o documento você pode usar o Criteria do hibernate como abaixo:

public byte[] fileRecord(int iddocumento){
 byte[] arq = null;
    try{
        Criteria cr = sessao.createCriteria(Documento.class);
        cr.add(Restrictions.eq("iddocumento", iddocumento));
        arq = (byte[]) cr.list().get(0).getArquivo();
    }catch(Exception e){
        e.printStackTrace();
    }finally{
       sessao.close();
    }
       return arq;
 }

Essa é umas das formas que pode ser capturada , espero ter ajudado.

No próximo post vou mostrar como exibir um relatório em uma nova aba.

Até mais!

sábado, 2 de janeiro de 2016

Tag it com JSF 2

Olá pessoa!

Antes de mais nada gostaria de agradecer a DEUS por permitir mais um ano que passou e pedi a Ele mais um ano de graças e bênçãos. Um feliz 2016 a todos!

Hoje, neste primeiro post do ano, vou falar sobre uma integração do plugin TagiT do Jquery que você pode encontrar neste site.

No ano passado, precisei fazer um cadastro de Tags e claro que essa ferramenta veio para ajudar, e vou compartilhar essa experiência.

Primeiro tenho que falar que neste exemplo não uso o primefaces ou qualquer outra implementação do JSF, mas sim ele puro.

Então mãos a obra.

1º Passo:

Tenho que inserir três arquivos externos, duas css e um arquivo js que são:

<h:outputStylesheet library="css" name="jquery.tagit.css"></h:outputStylesheet>
<h:outputStylesheet library="css" name="tagit.ui-zendesk.css"></h:outputStylesheet>
<h:outputScript library="js" name="tag-it.min.js"></h:outputScript>

Lembro que esses arquivos deverão está contidos na pasta resources. e acima nada mais é que a aplicação do exemplo do site que citei anteriormente bem como o código abaixo;

2º Passo

Criar dentro do <h:head> a tag <script></script> e adicionar o código abaixo:

 $(document).ready(function() {
var $tags = $("#myTags");
$tags.tagit({
availableTags: "tags[]",
            // This will make Tag-it submit a single form value, as a comma-delimited field.
            singleField: true,
            singleFieldNode: $('.test')
            });
    });

Então começamos a adaptar o código do exemplo do site, primeiro temos o valor tag[], pelo simples fato que não temos inicialmente um valor, pois será incrementando a partir do momento em que a aplicação dar um request no beans para trazer a list com os valores, ou simplesmente não trazer nenhum valor sem a necessidade da requisição no banco de dados.

E por último:

3º Passo:

Criar a div para armazenar o componente h:inputText, como abaixo:

<div>
   <label for="tag" class="control-label">Tag</label>
   <ul id="myTags"></ul>
<p class="help-block">Enter, vírgula ou espaço para criar uma
nova tag, Backspace or Delete para remover a última.</p>
<h:inputText id="test" styleClass="test"
                   value="#{bean.tagsinseridas}"></h:inputText>
</div>

Então, nesse código teve algumas alterações para a necessidade que eu tive mas, basicamente, permaneceu o que tinha no exemplo do plugin, eu atribuir o styleClass pelo fato de que o id no jsf é adicionado o j_id.... então por isso o singleFieldNode é a classe atribuída no styleClass.

Espero ter ajudado com mais essa dica. Nos veremos nos próximos post, até lá!


quarta-feira, 23 de dezembro de 2015

Atribuindo Imagens em Java SE

Olá pessoal,

Estava trabalhando em um sistema para uso pessoal e fiquei apanhando para colocar uma imagem tipo  "favicon" para sistemas desktop,Java SE, não em um jLabel, mas sim no ícone principal do jFrame.

Como há dois ambientes, desenvolvimento e produção, estava trabalhando com a imagem funcionando no desenvolvimento e na produção a imagem não aparecia, e aí muitos podem está passando pela dificuldade que eu passei, e muitos também pode está rindo deste post.

Segue o exemplo que estava no ambiente de desenvolvimento:

private File caminhoImagem;
private Image iconTitulo;

//Dentro do construtor atribuía
this.caminhoImagem = new File("./src/imagens/radar32.png");
this.iconTitulo=Toolkit.getDefaultToolkit().getImage(this.caminhoImagem.getAbsolutePath());
this.setIconImage(this.iconTitulo);

Então eu fazia deste modo acima, porém tinha o x da questão, no desenvolvimento aparecia mas na produção NÃO! Então como fazer para aparecer nos dois.
Como sabemos, no Netbeans, tem o modo gráfico e na propriedade, por exemplo, de um jLabel tem a opção Icon, então fui analisar como se comportava e o netbeans atribuía assim:


jLabel1.setIcon(new javax.swing.ImageIcon(getClass().getResource("/imagens/refresh-icon.png"))

O atributo dentro do setIcon deve ser do tipo Icon e no jframe tem que ser Image. Então como eu conseguir ter o resultado esperado? Se eu tenho um Objeto de ImageIcon nele tem a propriedade getImage() e aí vem o segredo. Ao invés de digitar tudo o que fiz da primeira vez, eu posso substituir por uma linha só e funciona para os dois ambientes, como segue abaixo:

this.setIconImage(new javax.swing.ImageIcon(getClass().getResource("/imagens/radar32.png")).getImage());

Então fica a dica, sei que é bem iniciante, eu acredito que seja, mas eu me passei.
Depois vou fazer um post sobre este sistema.
Até a próxima

sábado, 1 de agosto de 2015

Dynamic components Primefaces - Final Part

Hello everybody, we go to the end of the development of dynamic components Primefaces, I reiterate here that the same way I'm doing with the components of Primefaces, is also done with the components of jsf HtmOutputText and HtmlInputText.

So let's continue, we in the statement below:



 expressionFactory = app.getExpressionFactory();


Recalling that the expressionFactory is to create a factory of EL expression and thus be able to declare the expression as we in the JSF bean.variavel #{bean.variavel}.


Then we instance created with the set values ​​for the components such as the value and the OutputLabel For longer concatenating with InputText ID below:
 opl.setValue ("Field" + (z + 1) + "");
            opl.setId ("lbcampo" + z);
            opl.setFor ("campoID" + z);
            in InputText = new ();
            in.setId ("campoID" + z);
            in.setSize (2);



You can're asking because only instantiated or created a new instance for the inputText, remember that we include expressionLanguage this component and so we must make this action if it does not do that would show the NullPointerException. Done with that we know that according to the value of Z will field 1,2,3,4 ...
 < p:outputLabel value="Field 1" id="lbcampo0" for="campoID0" /> 

And we know that temporarily inputText will
 < p:inputText id="campoID0" size="2" / > 

Now let's put the icing on the cake, that is, we include the expression for the component to take the value in view and to make it as below:
ValueExpression ve = expressionFactory.createValueExpression (elContext, "#{bean.campo[" + z + "]},"String.class);

See who now declare ValueExpression with this we are adding what accustomed to only the view, include a parameter to capture the value that the user typed. Note that is a expressionFactory creating value taking the context and set the class that will have value in the view, in this case the value is a string, but can be changed according to your need. Now we must add the ValueExpression to be included in inputText component
 in.setValueExpression ("value", ve); 

The name value must be placed always as it represents the value of the tag inputText component and a variable ve which is the EL. To give the final touch we should add the components in the panel we created in the beginning as follows:
panel.getChildren().add(opl).;
            panel.getChildren().add(in).;

With this added dynamic components within the panel.

So this is personal, any questions I am available only comment here and then send an e-mail. To the next!

Componentes Dinâmicos com Primefaces - Parte 3(Final)

Olá pessoal, vamos para parte final do desenvolvimento dos componentes dinâmicos com primefaces, reitero aqui que da mesma forma que estou fazendo com os componentes do primefaces, também é feito com os componentes do jsf HtmOutputText e HtmlInputText.

Então vamos continuar, ficamos na parte da declaração abaixo:



expressionFactory = app.getExpressionFactory();


Lembrando que o expressionFactory é para criar uma fabrica de expressão EL e assim poder declarar a expressão como costumamos no JSF #{bean.variavel}.


Então com a instância criada vamos definir valores para os componentes como, por exemplo o valor e o For do OutputLabel já concatenando com a ID do InputText, abaixo:
 opl.setValue("Campo " + (z + 1) + ": ");
            opl.setId("lbcampo" + z);
            opl.setFor("campoID" + z);
            in = new InputText();
            in.setId("campoID" + z);
            in.setSize(2);



Você pode está perguntando porque só instanciou ou criou uma nova instância para o inputText, lembra que vamos incluir a expressionLanguage neste componente e por isso devemos fazer essa ação, caso não fizesse isso iria aparecer o NullPointerException. Pronto com isso já sabemos que de acordo com o valor do Z teremos Campo 1,2,3,4...
 <p:outputLabel value="Campo 1" id="lbcampo0" for="campoID0"/>

E também sabemos temporariamente que o inputText ficará
<p:inputText id="campoID0" size="2"/>

Agora vamos colocar a cereja no bolo, ou seja, vamos incluir a expressão para que o componente pegue o valor na view e para isso faça como abaixo:
ValueExpression ve = expressionFactory.createValueExpression(elContext, "#{bean.campo[" + z + "]}", String.class);

Veja que agora declaramos o ValueExpression, com isso estamos adicionando o que acostumamos fazer somente na view, incluir um parâmetros para capturar o valor que o usuário digitou. Note que é uma expressionFactory criando o valor pegando o contexto e definido a classe que terá o valor na view, neste caso o valor foi uma string, mas poder ser mudado de acordo com sua necessidade. Agora devemos adicionar a ValueExpression para ser incluída no componente inputText
 in.setValueExpression("value", ve);

O nome value dever ser colocado sempre, pois representa a tag value do componente inputText e a variavel ve que é o EL. Para dar o toque final deveremos adicionar os componentes no panel que criamos no inicio como abaixo:
panel.getChildren().add(opl);
            panel.getChildren().add(in);

Com isso adicionamos os componentes dinâmicos dentro do panel.

Então é isso pessoal, qualquer dúvida estou a disposição só comentar aqui ou então enviar um e-mail. Até a próxima!

quarta-feira, 15 de julho de 2015

Dynamic components Primefaces - Part Two

Hello guys, let's continue with the dynamic components through the bean.

As we have stated the panelGrid component in the bean builder and as we have already created the code in view, go to next step.

let's make a method called criarPanel (); , Void even as below:


 public void createPanel(){ } 

Let's put it inside the InputText and OutputLabel. If you want to create more than one, then use the FOR repeating structure, for example, want to create six components, then we will use as follows:


 for(int i= 0; i < 6; i++){
  //Code, which will be explained below.
}

Within this is we will assign value to components for this we must get the context for that there is FacesContext, the javax.faces.context.FacesContext package, with getCurrentInstance() method as follows:

FacesContext.getCurrentInstance().getApplication().createComponent(OutputLabel.COMPONENT_TYPE);

In the code above we take the context, your application so we created the component and within the createComponent method declare which component we want, in this case the OutputLabel, only that all this code is not the OutputLabel type and so we have to cast.


 
opl = (OutputLabel) FacesContext.getCurrentInstance().getApplication().createComponent(OutputLabel.COMPONENT_TYPE);


in = (InputText) FacesContext.getCurrentInstance().getApplication().createComponent(InputText.COMPONENT_TYPE);

Then we have to get separate first the current context, then the context of the expression Language ELContext after the application in order to declare a factory of expression, as we can see in the code below:


context = FacesContext.getCurrentInstance();

elContext = context.getELContext();

Application app = context.getApplication();

ExpressionFactory expressionFactory = app.getExpressionFactory();


With this we are almost over for the post not be so great, let's stop here and continue next week.

Any questions can make a comment that I'll be happy to answer even more!

domingo, 12 de julho de 2015

Componentes Dinâmicos com Primefaces - Parte 2

Olá pessoal, vamos continuar com os componentes dinâmicos através do bean.

Como já declaramos o componente PanelGrid no construtor do bean e como já criamos o código na view, vamos para próximo passo.

vamos fazer um metodo chamado criarPanel(); , void mesmo como abaixo:


 public void criarPanel(){ } 

Nele vamos colocar dentro o InputText e OutputLabel. Se quiser criar mais de um, então use a estrutura de repetição FOR, por exemplo, quero criar 6 componentes, então usaremos da seguinte forma:


 for(int i= 0; i < 6; i++){
  //Código, que vai ser explicado abaixo.
}

Dentro deste for iremos atribuir valor aos componentes para isso devemos pegar o contexto, para isso existe o FacesContext, do pacote javax.faces.context.FacesContext, com o método getCurrentInstance() como abaixo:

FacesContext.getCurrentInstance().getApplication().createComponent(OutputLabel.COMPONENT_TYPE);

No código acima pegamos o contexto, sua aplicação com isso criamos o componente e dentro do metodo createComponent declaramos qual o componente que queremos, neste caso o OutputLabel, só que todo esse código não é do tipo OutputLabel e por isso temos que fazer um cast.


 
opl = (OutputLabel) FacesContext.getCurrentInstance().getApplication().createComponent(OutputLabel.COMPONENT_TYPE);


in = (InputText) FacesContext.getCurrentInstance().getApplication().createComponent(InputText.COMPONENT_TYPE);

Depois temos que pegar separado, primeiro o contexto atual, depois o contexto da expression Language o ELContext, depois a aplicação para poder decalrar uma fabrica de expressão, como podemos ver no código abaixo:


context = FacesContext.getCurrentInstance();

elContext = context.getELContext();

Application app = context.getApplication();

ExpressionFactory expressionFactory = app.getExpressionFactory();


Com isso já estamos quase acabando, para o post não ficar tão grande, vamos parar por aqui e continuar na próxima semana.

Qualquer dúvida pode fazer um comentário que eu terei o maior prazer de responder, até mais!

terça-feira, 7 de julho de 2015

Maven e JSF 2 OutputStyleSheet, OutputScript

Olá pessoal,

antes de continuar com o post dos componentes dinâmicos, venho aqui postar ago que estava apanhando para fazer funcionar e só conseguir agora, já estava com dois dias só na tentativa e nada.

Como agora estou fazendo só projetos com maven eu não sabia antes para referênciar os dois componentes, outputStyleSheet e outputScript,  eu criava uma pasta resousces em Páginas Web, criava as subpastas para ficar organizado e fazia a referência na página JSF, pois bem, no maven o projeto já vem tudo subdivido, pelo menos no eclipse, na pasta Java Resources há uma pagina src/main/resources, que eu fiz a mesma organização anterior, porém existe a webapp, pura desatenção.

Quando quiserem refereniciar com o h:outputScript ou h:outputStyleSheet em umprojeto Maven, basta criar uma subpasta resources na webapp e subpastas para organizar como css, js, font e image e na página JSF fazer a referência como abaixo:


  <h:outputStylesheet library="css" name="style.css"></h:outputStylesheet>
  <h:outputScript library="js" name="slide.js"></h:outputScript>    



E eu me "brigando" para fazer funcionar.


Valeu pessoal espero ter ajudado com este post!

sábado, 4 de julho de 2015

Dynamic components with Primefaces - Part One

Hello guys,

I am here to write another post that I think will be very useful for when I needed to, I found everything very tailored, one part in a post, elsewhere in another post and so on. I want to remind that I do here components created through the bean, for code and called on the binding tag of JSF components and will use Primefaces, but can use the same way to the jsf own components that works the same way.

What is the idea?

The idea is to create a panel with a number choosing outputLabel and inputText.

So what variables need?


We will need the variables below:


FacesContext context; 
ELContext elContext; 
private InputText in;
private OutputLabel opl;
private PanelGrid panel;



We will need to take the context and also OutputLabel and InputText, without forgetting the panelGrid.

Packets that are the components are:


import org.primefaces.component.inputtext.InputText;
import org.primefaces.component.outputlabel.OutputLabel;
import org.primefaces.component.panelgrid.PanelGrid;


Okay, so we have the components in the bean, now we need to know if it will actually work to create, so the bean builder declare:


panel = new PanelGrid(); (1) 
panel.setId("pnlDinamico"); (2) 
panel.setColumns(2); (3)



Above we started creating the panel (1), we set his id (2), this case is unique because it is just a panel and declare the number of column that was in view would be that way:


<p:panelgrid columns="2" id="pnlDinamico"></p:panelgrid>



To see if it worked really must put the following code:

<p:panelGrid binding="#{bean.panel}">
 <f:facet name="header"> 
      Panel Dinamico 
 </f:facet> 
</p:panelGrid>



Ready with that vcoê code will display a panelGrid without any data only named Dynamic Panel. In the next post we continue. Until then!

Continue in the part two!

Componentes Dinâmicos com Primefaces - Parte 1

Olá pessoal,

Estou aqui para escrever mais um post que acho que vai ser bastante útil, pois quando eu precisei, achei tudo muito costurado, uma parte em um post, outra parte em outro post e assim por diante. Quero lembrar que vou fazer aqui componentes criados através do bean, por código e chamado na tag binding dos componentes do JSF e usarei o primefaces, mas podem usar da mesma forma para componentes do próprio jsf que funciona da mesma forma.

Qual será a ideia?


A ideia é criar um painel com um número a escolha de outputLabel e inputText.

Então que variáveis precisamos?

Precisaremos das variáveis abaixo:

 FacesContext context;
 ELContext elContext;
 private InputText in;
 private OutputLabel opl;
 private PanelGrid panel;

Precisaremos pegar o contexto e também os OutputLabel e InputText, sem esquecer do PanelGrid.

Os pacotes que estão os componentes são:

import org.primefaces.component.inputtext.InputText;
import org.primefaces.component.outputlabel.OutputLabel;
import org.primefaces.component.panelgrid.PanelGrid;


Pronto, com isso temos os componentes no bean, agora precisamos saber se realmente vai funcionar a criação, por isso no construtor do bean declaramos:


        panel = new PanelGrid(); (1)
        panel.setId("pnlDinamico"); (2)
        panel.setColumns(2); (3)

Acima inciamos criando o Painel (1), setamos o id dele (2), neste caso é único, pois é um painel apenas e declaramos o número de coluna que se fosse na view seria desta maneira:


<p:panelgrid columns="2" id="pnlDinamico"></p:panelgrid>

Para ver se realmente funcionou devemos colocar o seguinte código:


<p:panelGrid binding="#{bean.panel}">
<f:facet name="header">
    Panel Dinamico
</f:facet>
</p:panelGrid>


Pronto com esse código vcoê vai visualizar um panelgrid sem nenhum dado somente com o nome Panel Dinâmico.

No próximo post a gente continua. Até lá!

Link para parte 2

sábado, 13 de junho de 2015

Gráficos[Charts] Primefaces com JSF/Hibernate

Olá pessoal.

Estamos de volta e agora para atualizar um post antigo meu quando eu falei sobre o pieChart com hibernate.

O que me motivou esse post foi a Cláudia que devido ao post antigo entrou em contato comigo e pediu uma ajuda com o código dela, com isso decidir fazer um exemplo funcionando para todos terem como referência, pois eu fiquei sem entender no manual do usuário e também no showcase, pois em uma mostra um exemplo e no showcase mostra com outro exemplo. 

Neste exemplo estou usando a versão 5.2 do primefaces, todo código está no bitbucket.

Eu criei duas classes:
1. Info que pode ser alguma dado para fazer de referência, como ,por exemplo, o dólar que sempre tem uma variação a cada dia.
2 . InfoValores que seria uma classe para registrar a variação da referencia cadastrada, neste caso como estamos falando do dólar, com isso temos que cadastrar a data e o valor.

Para este exemplo vamos usar o tipo LineChart, para isso vamos criar o método para inicializar o gráfico como o código abaixo:

 
private LineChartModel linearModel;//Declarando a varivel

/**
* Método de Inicialização
*/
public LineChartModel  initLineModel(){
 
 linearModel = new LineChartModel();
 
 LineChartSeries series1 = new LineChartSeries();
       //Serie1 é a linha que será os dados para demonstração do gráfico
 List<InfoValores> dados = getListaDeValores();
 series1.setLabel("Dollar");
 
 for (int x=0;x < dados.size();x++ ){
  series1.set(dados.get(x).getDatacadastro(),dados.get(x).getValorinfo());
 }
 //Aqui é o mais importante, quando você diz que os dados atribuídos 
        //deverão aparecer no gráfico
       linearModel.addSeries(series1);
       linearModel.setZoom(true);
       linearModel.getAxis(AxisType.Y).setLabel("Dólar");
 /** Adicionando o formato de informações do tipo data ao eixo X 
  * da Classe Axis.
  */
 DateAxis axis = new DateAxis("Datas");
        axis.setMin(menorData.toString());
       /**
  * O set Tick FOrmat é o formato que vai aparece no gráfico, 
            neste caso é o brasilseiro
  * e pode ser encontrado em http://www.jqplot.com/docs/files/plugins/jqplot-dateAxisRenderer-js.html
  */
 axis.setTickFormat("%#d %#m %Y");
 linearModel.getAxes().put(AxisType.X,axis);
 
 return linearModel;
 
}
Depois deveremos informar ao código que a incialização deverá ser atribuido a variavel que vai ser atribuido na view como no código abaixo:

public void createLineModels(){
        //A variavél recebe a inicialização
 linearModel = initLineModel();
        linearModel.setTitle("Variação do Dollar");
        linearModel.setLegendPosition("e");
        Axis yAxis = linearModel.getAxis(AxisType.Y);
        Axis xAxis = linearModel.getAxis(AxisType.X);
}


Para que funcione devemos informar ao ciclo do JSF que depois de construir incialize o gráfico como no código abaixo:
  @PostConstruct
     public void init() {
         createLineModels();
     }

Já na página XHTML você declara da mesma forma que está no showcase do Primefaces:

<p:chart type="line" model="#{infoValoresController.linearModel}" style="height:300px;"/>



View:



Então Pessoal, fica atento no bitbucket que estarei atualizando para aprimorar cada vez mais o código, qualquer dúvida é só da o feedback deste post. Até a próxima!

terça-feira, 26 de maio de 2015

Ícones para buttons Primefaces

Olá pessoal, grande satisfação está novamente dando dicas e sempre uma nova experiência eu post aqui, estou agora mais focado em gamificação e por isso estou deixando um pouco de lado outras áreas que também gosto, mas estou mais fascinado nessas nova caminhada que escolhi.

Mas não é por isso que eu vou deixar de postar coisas valiosas, agora como o título do post fala é os ícones do primefaces que ajuda no visual do sistema há no link abaixo de uma lista completa com os artefatos:

Jqueryui-icons

Para usa-los basta declarar como no codigo abaixo:

<p:commandButton id="save" value="Save" icon="ui-icon-check"/>

Com isso aparecerá a imagem correspondente.
Bem fácil não é?

Até Mais!
Qualquer coisa comenta aqui que eu responderei! Valeu!

quinta-feira, 14 de maio de 2015

Tetris game: A hint of gamification?

They know that Tetris is a game, then by definition of gamification is far from being related to that matter, is it?
  The answer is yes because they know that according to Silvio Alves Júnior (2014) gamification is a process that uses elements, mechanical and dynamic games for engaging and driving behavior of players within the context of games, and when he analyzes the game tetris, that´s a game.

But studies say that games are good for health, as the matter published on the CNN website published by Barthelemy (2009), explains five races that the video game is good for health which are:

1. View
2. Brain
3. Balance
4. Good shape
5. Motor Coordination

There's even a game called "Dig Rush" that aids in the treatment of amblyopia, better known as "tired eye" or "lazy eye". But that is a type of serious game where it is, according Clack C. Abt, Abt (1987, p 11), is to combine the analytical concentration and questioning the scientific point of view with the intuitive freedom and rewards imaginative acts artistic. That is, games that help perform some real-world task with the simulation game.

  And Tetris is not far because studies show that this game can increase the efficiency of the brain, which was conducted by researchers from Albuquerque in the United States (US). What can make it a serious games.

What else can convince?

  Remember that this game was created in June 1984 seconds Wikipedia (2015), by Alexey Pajitnov, Dmitry Pavlovsky and Vadim Gerasimov. And coincidentally this "serious games" there are elements as:

Figura 1: Tela do jogo Tetris
Fonte:ORLAND, Kyle. Not a joke: A Tetris movie is being made. 2014. Disponível em: <http://arstechnica.com/gaming/2014/09/not-a-joke-a-tetris-movie-is-being-made/>. Acesso em: 12 maio 2014.

 It can be seen that the points reflects its ability and evolution in the level, the difficulty will make the game as in Figure 1. The level is over the progression of the user due to the acquisition of the points, the more points the level will rise.
  When you lose the game there is a leaderboard in which appears the positions according to the score and who does not remember the fruit that appeared when you reached a certain level, which would be the badges.
  Therefore tetris games can be considered serious when it has the function of aiding brain stimulation, but by itself is a match but others enter the function of the game context.

REFERENCES

SANTOS JÚNIOR, Sílvio Alves dos. Gamificação: introdução e conceitos básicos: O futuro é um jogo, aperte start agora ou é game over. [s. L.]: Gamificando.com.br, 2014. 15 p. Disponível em: <http://gamificando.com.br/2014/11/25/livro-gamificacao-introducao-e-conceitos-basicos-2/>. Acesso em: 12 maio 2015.

BARTHELEMY, Claire. Are video games good for your health? 2009. Disponível em: <http://edition.cnn.com/2009/HEALTH/10/27/gaming.health.senses/index.html>. Acesso em: 12 maio 2015.

ABT, Clark C.. Serious Games. [s. L.]: University Press Of America, 1987. 176 p.

WIKIPEDIA. Tetris. Disponível em: <http://pt.wikipedia.org/wiki/Tetris>. Acesso em: 12 maio 2015.

terça-feira, 12 de maio de 2015

Jogo Tetris: Um indicio de gamificação?

  Sabem que tetris é um jogo, então por definição de gamificação estar longe de ser relacionado a esse assunto, será?
  A resposta é sim pois sabem que segundo Sílvio Alves Júnior(2014) gamificação é um processo que usa elementos, mecânicas e dinâmicas de jogos para engajar e direcionar comportamentos de jogadores dentro de um contexto de jogos, e quando analisa o jogo tetris, já é um jogo.

  Porém estudos falam que jogos são bons para saúde, conforme a matéria publica no site da CNN publicada por Barthelemy (2009), explica cinco provas que o vídeo game faz bem para saúde que são: 

  1. Visão
  2. Cérebro
  3. Equilíbrio
  4. Boa forma
  5. Coordenação Motora
  Inclusive há um jogo chamado "Dig Rush" que auxilia no tratamento da ambliopia, mais conhecida como "olho cansado" ou "olho preguiçoso". Mas que é um tipo de serious game, onde este é, segundo Clack C. Abt, Abt(1987, pag 11), é combinar a concentração analítica e de questionamento do ponto de vista científico com a liberdade intuitiva e recompensas de imaginativas, atos artísticos. Ou seja, jogos que ajudam a realizar alguma tarefa do mundo real com a simulação do game.

  E o tetris não está longe pois estudos comprovam que este jogo pode aumentar a eficiência do cérebro, que foi realizado por pesquisadores de Albuquerque nos Estados Unidos (EUA). O que pode torna-lo um serious games.

E o que mais pode convencer? 

  Lembra que este jogo foi criado em junho de 1984 segundo Wikipédia (2015), por Alexey Pajitnov, Dmitry Pavlovsky e Vadim Gerasimov. E coincidentemente neste "serious games" há elementos como:

Figura 1: Tela do jogo Tetris
Fonte:ORLAND, Kyle. Not a joke: A Tetris movie is being made. 2014. Disponível em: <http://arstechnica.com/gaming/2014/09/not-a-joke-a-tetris-movie-is-being-made/>. Acesso em: 12 maio 2014.

  Pode ser visto os pontos que traduz a sua habilidade e a evolução no level, na dificuldade que tornará o jogo como na figura 1. O level representa mais a progressão do usuário devido a aquisição dos pontos, quanto mais pontos o nível subirá.
  Quando você perde no jogo há um leaderboard  no qual aparece as posições de acordo com a pontuação e quem não lembra das frutas que apareciam quando alcançava um certo nível, que seria os badges.
  Portanto o tetris pode ser considerado serious games quando tem a função de auxiliar a estimulação do cérebro, porém por si só é um jogo mas que entra na função do contexto alheio ao jogo.


REFERÊNCIAS

SANTOS JÚNIOR, Sílvio Alves dos. Gamificação: introdução e conceitos básicos: O futuro é um jogo, aperte start agora ou é game over. [s. L.]: Gamificando.com.br, 2014. 15 p. Disponível em: <http://gamificando.com.br/2014/11/25/livro-gamificacao-introducao-e-conceitos-basicos-2/>. Acesso em: 12 maio 2015.


BARTHELEMY, Claire. Are video games good for your health? 2009. Disponível em: <http://edition.cnn.com/2009/HEALTH/10/27/gaming.health.senses/index.html>. Acesso em: 12 maio 2015.



ABT, Clark C.. Serious Games. [s. L.]: University Press Of America, 1987. 176 p.



WIKIPEDIA. Tetris. Disponível em: <http://pt.wikipedia.org/wiki/Tetris>. Acesso em: 12 maio 2015.

sexta-feira, 20 de fevereiro de 2015

Valor Total no final da página JasperReport - Parte I

Olá pessoal, vou neste post passar mais uma dica de relatório que por muito tempo fiquei procurando e acabei aprendendo sozinho.
Faz tempo que queria escrever este post, mas só agora tive um tempo.

Como colocar o valor total na última pagina em um relatório criado no Ireport/JasperReport.

Nesse primeiro post vou explicar com uma base vinda de um arquivo XML.


Primeiro como atribuir o aquivo XML para ser uma base de dados, fácil, veja só:

1. Crie um novo relatório, com o modelo da sua preferência;
2. Quando chegar na etapa DataSource, em DataAdapter, como na figura abaixo, clique em [new];

Figura 1.Imagem da aba Data Source

3. Escolha a opção XML document;
4.Denomine um nome para o adaptador, procure o arquivo XML e marque a opção Use the report Xpath expression when filling the report.
5. Caso queria definir um padrão específico de data, como padrão brasileiro dd/MM/yyyy, é só digitar no campo Date pattern e também um padrão específico de numero, é só digitar no campo Number pattern, caso queria escolher um já predefinido é só apertar em create e escolher, em ambos os campos;
6. Aperte em Finish;
7. Aparecerá outra janela, desta vez, com as ramificações do arquivo XML, que fica ao seu critério, caso você deseja escolher a ramificação principal, ou as filhas, depois aperte em Next;
8. Escolha os campos que deseja utilizar no relatório;
9. Escolha o campo que deseja agrupar, aperte em next e depois aparecerá uma mensagem de Parabéns o processo terminou.

Pronto agora que começa a brincadeira de criarmos a variável que vai ser exibida na última pagina do relatório, para isso vamos criar a banda Last Page Footer; Veja na figura abaixo a banda:
Figura 2. Aba OutLine

Veja que está cinza, em cima dela click com o botão direito e escolha a opção Add Band, você vai notar que agora não está mais cinza, estará "vivo".
Agora nesta mesma aba tem um nó desta árvore que possui o nome de Variables clique com o botão direito do mouse e escolha a opção Create Variable, note que no lado esquerdo apareceu uma nova aba, como na figura abaixo:

Figura 3. Aba Variable

Uma coisa que chamo atenção é que, pelo menos neste arquivo xml que escolhi, todos os campos estão em String, então é necessário mudar para Double, pois aqui estou utilizando valores monetários, e para fazer isso no campo Value Class Name eu mudo para java.lang.Double. Defino um nome para a variável como ValorTotal, no campo Calculation coloco a função SUM e no campo expressão, coloco o campo que representa o valor, neste caso o campo Receita, que ficaria deste modo:


new Double($F{Receita})

Com isso vai transformar meu campo que é uma String, em uma variável Double.

Outra dica é no campo Increment Type é outro segredo da soma, do jeito que está agora [None] quer dizer que não vai haver nenhuma intervenção e será somado os valores de todos sem interrupção, caso você queira soma por página é só colocar a opção Page, se você agrupou e quer a soma do agrupamento então vai escolher a opção [Group] NomeDoCampo e assim por diante. Como eu quero todos os valores então eu vou deixar None.

Agora na aba OutLine, Figura 2, Veja que no nó Variable, apareceu o nome da variável que você criou, arraste até a aba Last Page Footer, pronto com isso você garante a soma no final da última pagina.

Outra Dica: Lembre-se de colocar o padrão, neste caso monetário, no campo, para isso é só selecionar o campo ir na opção Text Field e no campo pattern clicar em  [...] e escolher a opção mais apropriada.


Espero ter ajudado. Até qualquer dia, qualquer hora!
No próximo post a gente fala de como utilizar em arquivos que são referenciados a um banco de dados.


quinta-feira, 27 de junho de 2013

PieChart Primefaces with Hibernate

Post updated in the new version of Primefaces

  Hello everybody, I come once again leaving a nice tip of programming. Now I'm a bit of time due to the projects and also that realizing a dream of being a teacher, which is rare these days, a college, but teaching database that is also part of my daily life, very good by the way.
 As the title of this post, I will talk about assembling a PieChart with hibernate as soon as notice that we run a little, but I'll do everything for everyone to understand what I'm doing.
  First of all I have two classes, andamento  and status do andamento class at the first have information like: id, comment, status, date and justification, on the other have only id and description. What is the purpose? The goal is to show how the graph gaits exist for each status description, for example, the status "In Progress" has 32 records andamentos,the status "In review" is 5 andamentos records, and so on. So with that we have a scenario to play around with the logic and data, as well as the Data Access Objects will do our research, we first get all the descriptions of existing status in the database :
Code 0:
 public List <Status> Search() {  
     return findAll(Status.class);  
   }  
In class piechart that equals the bean primefaces site´s sample added in the method private void createPieModel () the class variable tempos as follows:
Code 1:
  private List<String> status;
  statusdescricao = stDAO.Search();  
     for (int z = 0; z < statusdescricao.size();z++){  
     status.add(statusdescricao.get(z).getDescricao());  
     }  
  This will be added to this list all the descriptions as you can see below:
Code 2:
 System.out.println("Lista do Status "+status);  
     >> Lista do Status [Em Andamento, Análise, Em avaliação]  

  We conclude the first step, the next step is to bring the figures for these descriptions so it is easy when you know who's the description, because only need a where clause description = String variable. How do the following:
Code 3:
  public int numberTotalOfAndamento(String status) throws NoResultException  

  Making logic with inner join, as in this case I am dealing with two different tables, try the amount of tempos when the id of the status equals the id field in the table id_status progress, for example:
Code 4:
 Query query = manager.createQuery("SELECT count(*) FROM "  
         + "andamento a inner join status s"  
         + " on(a.status = s.id) where s.descricao=:descricao");  
     query.setParameter("descricao", status);  

  In this case ,poses no the function Group by. Done that would add to the method createPieModel the following code snippet:

Code 5:
  for (int i = 0;i < status.size();i++){  
       pieModel.set(status.get(i), andDAO.numberTotalOfAndamento(status.get(i)));  
     }  

  Note that with the list, in this case, with three dice will have to walk, so with each line is we'll get to the method get (index), because the method requires pieModel.set a string and a variable numeral, so in the above code the description "in Progress", represented in code 2, the variable would be the method numberTotalOfAndamento will search and return an integer to compose this method. With that would pieModel.set ("In Progress", 5); Five was the result that was returned.

And to complete the method would look like this:
Code 6:
 private void createPieProcesso() {   
     pieModel = new PieChartModel();   
     statusdescricao = stDAO.Search();   
     for (int z = 0; z &lt; statusdescricao.size();z++){  
     status.add(statusdescricao.get(z).getDescricao());  
     }  
     System.out.println("Lista do Status "+status);  
     for (int i = 0;i &lt; status.size();i++){  
       pieModel.set(status.get(i), andDAO.numberTotalOfAndamento(status.get(i))); 
     }  

And in the JSF page would be represented by the code:
Code 7:
  <p:pieChart value="#{charts.pieModel}" legendPosition="e" fill="false" showDataLabels="true"   
         title="Estatística dos Andamentos" style="width:400px; height:300px" sliceMargin="5" diameter="150" />  

The result will be:
I have helped over this tip up any day.

PieChart PrimeFaces com Hibernate

Post atualizado para versão mais nova do Primefaces 

  Olá pessoal, venho mais uma vez deixar uma bela dica de programação e como sempre dica de JSF2 + Primefaces. Agora estou com um pouco de tempo devido aos projetos e também por que conseguir realizar um sonho de ser professor, o que é raro nos dias atuais, em uma faculdade, mas lecionando Banco de dados que também faz parte do meu dia a dia, muito bom por sinal.
  Como diz o título deste post, vou falar sobre como realizar a montagem de um pieChart com o hibernate, logo já aviso que vamos rodar um pouco, mas vou fazer de tudo para que todos entendam o que estou fazendo.
  Primeiro de tudo tenho duas classes, andamento e status do andamento, na primeira tenho informações como: id,observação, status,data e justificativa, na outra tenho apenas id e descrição. Qual o objetivo? O objetivo é mostra no gráfico quantos andamentos existem para cada descrição do status, por exemplo, o status "Em andamento" possui 32 registros de andamentos o status "Em análise" existe 5 registros de andamentos, e assim por diante. Então com isso temos um cenário para fazer a lógica e brincarmos com os dados, pois bem nos Objetos de acesso a dados(Data Object Acess - DAO´s) faremos nossa pesquisa, primeiro iremos pegar todas as descrições dos status existentes no banco de dados:
Código 0:
 public List <Status> Search() {  
     return findAll(Status.class);  
   }  
Na classe do piechart que é igual ao bean de exemplo do site primefaces adicionei no método private void createPieModel() a variável da classe andamentos da seguinte maneira:
Código 1:
  private List<String> status;
  statusdescricao = stDAO.Search();  
     for (int z = 0; z < statusdescricao.size();z++){  
     status.add(statusdescricao.get(z).getDescricao());  
     }  
Com isso vai ser adicionada neste list todas as descrições existentes como pode ver abaixo:
Código 2:
 System.out.println("Lista do Status "+status);  
     >> Lista do Status [Em Andamento, Análise, Em avaliação]  

Concluímos o primeiro passo, o seguinte passo é trazer os números relativos às essas descrições, então fica fácil quando sabemos quem é a descrição, pois só precisaremos de uma clausula where descricao = váriavel String. Como faremos a seguir:
Código 3:
  public int numberTotalOfAndamento(String status) throws NoResultException  

Fazendo a lógica com inner join, já que neste caso estou lidando com duas tabelas diferentes, procuraremos pela quantidade de andamentos quando o id do status é igual o id do campo id_status na tabela andamento, por exemplo:
Código 4:
 Query query = manager.createQuery("SELECT count(*) FROM "  
         + "andamento a inner join status s"  
         + " on(a.status = s.id) where s.descricao=:descricao");  
     query.setParameter("descricao", status);  

Neste caso dispensaria o Group by. Feito isso adicionaríamos ao método createPieModel o seguinte trecho de código:

Código 5:
  for (int i = 0;i < status.size();i++){  
       pieModel.set(status.get(i), andDAO.numberTotalOfAndamento(status.get(i)));  
     }  

Veja que com a lista, neste caso, com três dados teremos que passear, então com o for pegaremos cada linha com o método get(index), pois o método pieModel.set exige uma string e uma variável numeral , por isso no código acima a descrição "Em Andamento", representado no código 2, seria a variável que o método numberTotalOfAndamento irá procurar e retornar um inteiro para compor esse método. Com isso ficaria pieModel.set("Em Andamento",5); Cinco foi o resultado que foi retornado.

E para concluir o método ficaria desta maneira:
Código 6:
 private void createPieProcesso() {   
     pieModel = new PieChartModel();   
     statusdescricao = stDAO.Search();   
     for (int z = 0; z &lt; statusdescricao.size();z++){  
     status.add(statusdescricao.get(z).getDescricao());  
     }  
     System.out.println("Lista do Status "+status);  
     for (int i = 0;i &lt; status.size();i++){  
       pieModel.set(status.get(i), andDAO.numberTotalOfAndamento(status.get(i))); 
     }  

E na página JSF seria representado pelo código:
Código 7:
  <p:pieChart value="#{charts.pieModel}" legendPosition="e" fill="false" showDataLabels="true"   
         title="Estatística dos Andamentos" style="width:400px; height:300px" sliceMargin="5" diameter="150" />  

O resultado seria:
Espero ter ajudado com mais esta dica, até qualquer dia.