Webly

Internet + Humana

Ir para o Conteúdo
Ir para o Menu
Ir para a Busca
Ir para o Login

Assine:

Navegação

Cold Fusion 8: Ajax Tutorial 3 - Live Data Grids

Cold fusion 8: ajax tutorial 3 - live data grids

Escrito por Tofinha em ColdFusion. Data: 12/08/2007

Ver tópico original no fórum.

Salve galera!

Dando sequência a série de posts do Ben Forta, postamos agora o seu terceiro post que trata de das novas funções e incrementos que o Datagrids recebeu nesta nova versão.

Informações:
Post original: ColdFusion Ajax Tutorial 3: Live Data Grids
Autor: Ben Forta

A datagrid é essencial para todos os tipos de desenvolvimento em todos os tipos de linguagens. O ColdFusion suporta datagrids desde o ColdFusion 2 – primeiro um applet Java, depois um controle do Flash, e no ColdFusion 8 foi adicionado uma datagrid em HTML que pode ser pré-populado com dados, ou ser usada pra exibir dados carregados assincronicamente.

A datagrid pré- populada básica funciona muito parecido com o velho <CFGRID>, passa pra ele uma query e exibe os dados. Aqui tem um exemplo (que usa as tabelas de exemplo que vem com o ColdFusion):

CODE

<cfquery name="artists" datasource="cfartgallery">
SELECT artistid, lastname, firstname, email
FROM artists
ORDER BY lastname, firstname
</cfquery>

<cfform>
    <cfgrid name="artists"
          format="html"
          striperows="yes"
          query="artists">
       <cfgridcolumn name="lastname" header="Last Name" width="100"/>
       <cfgridcolumn name="firstname" header="First Name" width="100"/>
       <cfgridcolumn name="email" header="E-Mail" width="200"/>
    </cfgrid>
</cfform>

Aqui um <CFQUERY> recupera os dados, e <CFGRID> exibe os resultados. A datagrid é HTML com CSS e JavaScript. Você tem o controle sobre o visual inclusive tamanho, colunas, cores e fontes. E os usuários podem organizar a ordem, redimensionar colunas, e mais.

O novo <CFGRID> também suporta um tipo de interação AJAX, onde o dado não é pré-ocupado, mas assincronicamente carregado quando necessário. Aqui temos um exemplo da datagrid:

CODE

Essa datagrid é exibida em uma janela usando a nova tag <CFWINDOW> (Por nenhum bom motivo a não ser o fato de que gosto dela). A datagrid sozinha não tem query passada, pelo contrário, ela é ligada ao cfc artists.cfc. Quando a datagrid precisa de um dado, ela ativa uma chamada assíncrona para o método getArtists() no artists.cfc, e passa para ele quatro informações: a página atual, o tamanho da página (especificado previamente no atributo pagesize), a uma coluna sendo ordenada e ordena a direção ( se o usuário optar por ordenar os dados). O <CFGRID>, portanto, requesita dado, e simplesmente exibe qualquer retorno do ColdFusion, suportando automaticamente a paginação (lembrando que há linhas suficientes para cada ordem).

Agora o CFC:

CODE

<cfcomponent output="false">

     <cfset THIS.dsn="cfartgallery">

     [i][/i]
     <cffunction name="getArtists" access="remote" returntype="struct">
        <cfargument name="page" type="numeric" required="yes">
        <cfargument name="pageSize" type="numeric" required="yes">
        <cfargument name="gridsortcolumn" type="string" required="no" default="">
        <cfargument name="gridsortdir" type="string" required="no" default="">

        [i][/i]
        <cfset var artists="">

        [i][/i]
        <cfquery name="artists" datasource="#THIS.dsn#">
        SELECT artistid, lastname, firstname, email
        FROM artists
        <cfif ARGUMENTS.gridsortcolumn NEQ ""
           and ARGUMENTS.gridsortdir NEQ "">
           ORDER BY #ARGUMENTS.gridsortcolumn# #ARGUMENTS.gridsortdir#
        </cfif>
        </cfquery>

        [i][/i]
        <cfreturn QueryConvertForGrid(artists,
                       ARGUMENTS.page,
                       ARGUMENTS.pageSize)>
     </cffunction>

  </cfcomponent>

O método getArtists retorna uma estrutura (contendo dados no formato requerido pela datagrid), e aceita quatro argumentos, os mesmos quatro argumentos passados ao atributo de ligação no lado cliente). Os dois primeiros são sempre passados pelo cliente, então só eles são requeridos. Os dois últimos são passados somente se o usuário clicar no cabeçalho da coluna para ordenar os dados, então esses argumentos não são requeridos e passados como "". <CFQUERY> realiza a recuperação dos dados, ordenando condicionalmente o dado e se o ordenamento for requerido. E finalmente, a nova função QueryConvertForGrid() extrai o subconjunto de dados desejado (usando os valores da página passada e de tamanho da página) e formata isso como uma estrutura que é retornada para a datagrid.

Você gostou? Comente no fórum!