Deixando seu sistema Responsivo com Primefaces

Uma das grandes mudanças nas últimas versões do primefaces foi a responsividade. Antes os criadores do primefaces acreditavam que seria mais interessante possuir uma biblioteca de componentes totamente própria para dispositivos móveis e outra para desktop. Ainda bem que eles perceberam que esta não era a melhor ideia e introduziram a responsividade diretamente em vários componentes.

Aos poucos vemos que os componentes vão se adequando cada vez mais à todos os tipos de tela. No próprio showcase do primefaces podemos acompanhar quais componentes já possuem tal opção, confira aqui.

Para iniciar falaremos um pouco sobre o Grid CSS, irmão gêmeo do grid do bootstrap. Grid CSS é um utilitário de layout leve e otimizado para dispositivos móveis, tablets e desktops. São suportadas até 12 colunas com base no layout do fluido.

Básico

Responsivo

Aninhado

O Grid CSS é baseado em um layout de 12 colunas, sempre as colunas são prefixadas com ui-g- * e devem ser uma descendente de um recipiente com classe ui-g. Abaixo veja um layout de 3 colunas simples:

<div class="ui-g">
    <div class="ui-g-4">Col1</div>
    <div class="ui-g-4">Col2</div>
    <div class="ui-g-4">Col3</div>
</div>

Quando precisar criar uma nova linha, por exemplo quando a primeira linha exceder 12 colunas, utilize o ui-g e crie a nova linha:

<div class="ui-g">
    <div class="ui-g-6">Col1</div>
    <div class="ui-g-6">Col2</div>
</div>
<div class="ui-g">
    <div class="ui-g-6">Col3</div>
    <div class="ui-g-6">Col4</div>
</div> Para um layout mais complexo, utilize colunas anihadas, como mostrado no exemplo abaixo:

<div class="ui-g">
    <div class="ui-g-8 ui-g-nopad">
        <div class="ui-g-6">6</div>
        <div class="ui-g-6">6</div>
        <div class="ui-g-12">12</div>
    </div>
    <div class="ui-g-4">4</div>
</div>

Layout Responsivo

Para ter um layout responsivo, é preciso utilizar mais algumas classes enquanto a classe ui-g- * define
o comportamento padrão. Quatro tamanhos de tela são suportados:

Na maioria das vezes, as classes ui-md- * são usados com classes ui-g- * padrão, tanto para pequenas como para  grandes tela aplicam ui-sm, ui-lg e ui-xl podem ser utilizadas.

No exemplo abaixo, as telas grandes exibem 4 colunas, as telas médias exibem 2 colunas em 2 linhas e o comportamento padrão só é exibido em um telefone celular em que cada coluna é renderizada em um linha separada.

<div class="ui-g">
    <div class="ui-g-12 ui-md-6 ui-lg-3">ui-g-12 ui-md-6 ui-lg-3</div>
    <div class="ui-g-12 ui-md-6 ui-lg-3">ui-g-12 ui-md-6 ui-lg-3</div>
    <div class="ui-g-12 ui-md-6 ui-lg-3">ui-g-12 ui-md-6 ui-lg-3</div>
    <div class="ui-g-12 ui-md-6 ui-lg-3">ui-g-12 ui-md-6 ui-lg-3</div>
</div>

Além do Grid CSS, os próprios componentes do primefaces vem sendo modificados para aceitar e se adaptar à responsividade. Para alguns componentes podemos utilizar prioridades(atributo priority), de acordo com o tamanho da tela, ou o atributo reflow que refaz o componente se adaptando na tela. O atributo priority do componente p:column diz qual será  a prioridade de exibição das colunas, valores mais baixos tem prioridade de aparecer, por exemplo 0 sempre irá ser exibido, 1, 2 ,3 ,4 dependem do tamanho da tela para serem exibidos ou não. Abaixo vejam alguns exemplos:

DataTable

<p:dataTable var="car" value="#{dtBasicView.cars}" reflow="true" style="margin-top:20px">
        <f:facet name="header">
            DataTable
        </f:facet>
        <p:column headerText="Id">
            <h:outputText value="#{car.id}" />
        </p:column>
 
        <p:column headerText="Year">
            <h:outputText value="#{car.year}" />
        </p:column>
 
        <p:column headerText="Brand">
            <h:outputText value="#{car.brand}" />
        </p:column>
 
        <p:column headerText="Color">
            <h:outputText value="#{car.color}" />
        </p:column>
    </p:dataTable>

Acima utilizamos o atributo Reflow e abaixo prioridades para exibir as colunas. A diferença é que com o reflow, são exibidos todos os dados sempre e com priority para as colunas, algumas delas somem de acordo com o tamanho da tela:

<p:dataTable var="car" value="#{dtBasicView.cars} style="margin-top:20px">
        <f:facet name="header">
            DataTable
        </f:facet>
        <p:column headerText="Id" priority="3">
            <h:outputText value="#{car.id}" />
        </p:column>
 
        <p:column headerText="Year" priority="2">
            <h:outputText value="#{car.year}" />
        </p:column>
 
        <p:column headerText="Brand" priority="0">
            <h:outputText value="#{car.brand}" />
        </p:column>
 
        <p:column headerText="Color" priority="1">
            <h:outputText value="#{car.color}" />
        </p:column>
    </p:dataTable>

Veja no vídeo abaixo como funcionam os dois comportamentos responsivos:

Os demais componentes que aceitam responsividade você pode conferir no link do início da publicação, esse aqui. Espero ter ajudado e, em caso de dúvidas, elogios ou sugestões, deixe um comentário.

Fontes utilizadas:
https://www.primefaces.org/

Share on Facebook

Tweet

Follow us