INTRODUÇÃO Rico é um framework JavaScript de código aberto

INTRODUÇÃO
Rico é um framework JavaScript de código aberto usado para criar aplicações web ricas e
altamente interativos. Rico é baseado no Prototype Javascript Framework e é liberado sob a
licença Apache.
Ele inclui funções de apoio:
drag-and-drop
Elementos HTML arredondados
Efeitos de animação
Acordeão e painéis com guias
Calendário, cor-picker, e árvore controles
Número e formatação de data
Pop-up "janelas" (div 's) e menus com sombras
Grids de rolagem com colunas congeladas e títulos que podem ser preenchidos com conteúdo
estático ou carregados dinamicamente via AJAX, além de suporte para edição de conteúdo da
rede.
Vários idiomas para os menus de grade e calendário - traduções para o francês, alemão,
italiano, português, espanhol, chinês, japonês, coreano, russo e ucraniano são incluídos
A distribuição Rico é dividido em três subdiretórios:
src - contém o núcleo do Rico, incluindo javascript, css, e arquivos de imagem.
plugins - contém o código que é executado no servidor para suportar LiveGrids e SimpleGrids.
Plug-ins são atualmente previsto ASP, PHP e. Net. A Perl plug-in com funcionalidade limitada
também está incluído.
Exemplos - contém código de exemplo para ASP, PHP, net, Perl e HTML. O diretório de dados
examples / contém dados de amostra para os exemplos relativos à LiveGrid. Bancos de dados
são fornecidos para MS Access, Oracle e MYSQL. As instruções para instalar os dados no SQL
Server também estão incluídas.
COMO INSTALAR
Basta descompactar o arquivo de distribuição Rico e copiar a estrutura do diretório resultante
para o caminho do seu serviço web deve ser suficiente para obter a maioria, se não todos, os
exemplos de funcionamento. Se você tem instalado em um diretório chamado "rico" na raiz do
serviço web, então você deve ser capaz de apontar seu navegador para o seguinte endereço
para acessar os exemplos:
http://myserver.mydomain.com/rico/examples/
Ou se você tiver instalado no seu computador pessoal, então acessá-lo como:
http://localhost/rico/examples/
Configuração do IIS
Rico pode ser servido a partir de qualquer servidor web. Esta seção descreve alguns problemas
de configuração específicas para o IIS no Windows.
Em um servidor com IIS6 ou superior, você terá que alterar as configurações de segurança para
ASP, a fim de executar os exemplos ASP. Em particular, você precisará habilitar arquivos ASP
para fazer referência incluir arquivos no diretório pai. Para fazer isso, siga estes passos:
Abra o Gerenciador de ISS
Botão direito do mouse em "Default Web Site" e selecione "Propriedades" no menu de
contexto
Clique na aba "Home Directory"
Clique no botão "Configuração"
Clique na aba "Options" da nova janela
Marque a caixa "Ativar caminhos pai"
Para que os scripts de exemplo para ler o banco de dados Northwind em um computador com
IIS7 (por exemplo PCs Vista), você terá que desativar a configuração LoadUserProfile usando
este comando:
% Windir% \ system32 \ inetsrv \ appcmd set-seção de configuração:. ApplicationPools /
[name = 'DefaultAppPool'] processModel.loadUserProfile: false
A técnica descrita neste artigo. Se você preferir não alterar a configuração LoadUserProfile, a
alternativa é carregar o banco de dados Northwind no SQL Server ou MySQL e alterar as
configurações de conexão no arquivo applib relevante, conforme descrito abaixo.
Exemplos LiveGrid
Muitos dos exemplos LiveGrid buscar dados do banco de dados de exemplo Northwind. A fim
de obter estes exemplos para o trabalho que você precisa fazer duas coisas:
Criar o banco de dados Northwind
Modificar as configurações de conexão de banco de dados que residem no applib. * Arquivo
Criando o banco de dados Northwind
O diretório de dados examples / contém vários formatos diferentes de banco de dados
necessários para executar a maior parte do Rico LiveGrid ASP,. Net, e os exemplos de PHP.
Os dados são fornecidos nos seguintes formatos:
Northwind.mdb - esta é a base de dados Adamastor padrão fornecido pela Microsoft, com a
ressalva de que os [Detalhes do Pedido] tabela foi renomeada para Detalhes_Pedido. . Se você
vai estar acessando os exemplos ASP net ou, então, nenhuma configuração de banco de dados
é necessário - esses exemplos vai acessar diretamente este banco de dados usando o driver do
Microsoft Jet.
mysql-northwind.sql - um arquivo de backup para MySQL (criada usando MySQL versão 4.1)
mysql-Adamastor-dblquote.sql - o mesmo que acima, exceto todas as ocorrências de \ 'foram
alterados para'' (recomendado para MySQL versão 5 ou superior)
ORA-expdat.dmp - um arquivo de exportação do Oracle para o esquema Adamastor - gerada
usando o "exp" utilidade no Oracle XE. A senha para este esquema é "password".
Uma versão para MS SQL Server 2000 e 2005 está disponível como um download gratuito a
partir de msdn.microsoft.com. Depois de baixá-lo, você deve seguir intruções da Microsoft
para instalá-lo. Finalmente, você precisará renomear o [Detalhes do Pedido] mesa para
Detalhes_Pedido ou criar uma vista nomeada Order_Details usando a seguinte instrução SQL:
criar vista Order_Details como SELECT * FROM [Detalhes do Pedido]
Configurações de conexão de banco de dados
Instruções específicas dependem de seu ambiente:
LIVE GRID
A biblioteca Rico suporta dois tipos diferentes de redes: LiveGrid e SimpleGrid. LiveGrid dados
é sempre tamponada em uma matriz de JavaScript 2-dimensional. À medida que o usuário rola
verticalmente através da grelha, os dados são copiados dinamicamente a partir da matriz para
a grelha. SimpleGrids por outro lado, são não tamponado - todos os dados para a rede
existente no DOM, não de uma estrutura de dados JavaScript.
Ambos os tipos de grades compartilham algumas características comuns, incluindo:
cabeçalhos das colunas que ficam fixo e não rolar para fora da parte superior da tela
colunas fixas do lado esquerdo da grelha
colunas redimensionáveis
comum estilo css - estilos desenvolvidos para LiveGrids também trabalhar para SimpleGrids e
vice-versa
compatibilidade com idiomas que são lidos da direita para a esquerda (RTL) - exemplos ASP e
PHP estão incluídos
compatibilidade com menus pop-up Rico (contexto)
LiveGrid
Rico oferece muito suporte para carregar um buffer LiveGrid. O buffer pode pode ser
carregado a partir de:
uma consulta de banco de dados SQL
um arquivo XML
uma tabela HTML
uma matriz javascript
Conectando LiveGrid para um banco de dados
Para simplificar a tarefa de carregar um LiveGrid com os resultados da consulta SQL, Rico vem
com um conjunto de "plug-ins", que ligar o seu banco de dados para o seu LiveGrid. Rico plugins foram testados com as seguintes bases de dados:
MySQL a Oracle DB2 SQL Server MS Access
PHP
ASP
. Net
Rico compatibilidade plug-in/database a partir de novembro 2007
* O plug-in usa ADO ASP e. Plug-in net usa ADO.net,
e, portanto, deve ser capaz de se conectar com qualquer fonte de dados que é compatível com
ADO
LiveGrid utiliza tecnologia AJAX de modo que apenas uma porção do resultado da consulta do
SQL é enviado para o cliente de cada vez. Como o usuário rola a grade, o código JavaScript
determina que parte dos resultados da consulta são necessários e envia uma solicitação AJAX
volta para o plug-in. O plug-in recupera os resultados do banco de dados e retorna-los de volta
para o cliente. Então, se sua consulta retorna 10 linhas ou 100 mil linhas, LiveGrid pode exibir
os resultados de forma rápida e facilmente com uma interface de usuário intuitiva.
Finalmente, se os usuários estão autorizados a fazer alterações aos dados, o plug-ins Rico fazer
essa muito fácil. Apenas definem sua grade usando formas LiveGrid - Adicionar, editar e excluir
seleções de registro será adicionado ao menu de contexto da grade (pop-up).
Quando Adicionar ou Editar é selecionada, uma forma de pop-up será apresentado para o
usuário.
Quando o usuário "salva" a forma, os dados enviada de volta para o roteiro original, que grava
os resultados de volta para o banco de dados.
Se parece complicado, não se preocupe! Todo esse trabalho é feito pelo plug-in. Veja o
exemplo "ex2edit" para uma demonstração de como é fácil, tanto para o usuário eo
programador. "Ex4edit" demonstra como fazer várias redes em uma página editável.
Preenchendo LiveGrid com XML
Enquanto plug-ins se torna mais fácil para carregar dados em um LiveGrid, eles não são
necessários. Um tampão LiveGrid pode ser carregado com dados XML a partir de qualquer
fonte, desde que os dados seguem o seguinte formato:
<ajax-response>
<response type='object' id='MyGridId_updater'>
<rows update_ui='true' offset='0'>
<tr> <td> dados para linha 1, célula 1 </ td> <td> dados para a linha 1, célula 2 </ td> </ tr>
<tr> <td> dados para a linha 2, célula 1 </ td> <td> dados para a linha 2, célula 2 </ td> </ tr>
</ Linhas>
</ Response>
</ Ajax-resposta>
Veja os exemplos tempo e foto, que recuperam dados de tempo e Yahoo Flickr,
respectivamente, e reformatar os dados para a estrutura mostrada acima. Estes exemplos
estão disponíveis em PHP e. Versões líquidas, mas não ASP.
Preenchendo LiveGrid com dados de uma tabela HTML
A LiveGrid também podem ser facilmente criados em uma página web que contém uma tabela
HTML tradicional. Apenas atribuir um id para a mesa e passar esse id em LiveGrid durante a
inicialização. Os títulos serão tomadas a partir da seção thead da tabela e os dados do tbody.
Nenhuma AJAX é realizado neste caso, mas os dados ainda é tamponado em uma matriz de
JavaScript. Vários exemplos estão incluídos na distribuição Rico, olhar para os marcados
"Buffer LiveGrid-Static"
SimpleGrid
SimpleGrid de são novos Rico 2.0 e partilhar algumas das mesmas funcionalidades como
LiveGrids - colunas redimensionáveis, colunas congelados, e os títulos congelados. No entanto,
ao contrário de um LiveGrid, os dados são estáticos e reside no DOM - por isso não buffering,
não refresca AJAX, sem classificação, sem filtro. Por que você usaria um SimpleGrid?
Porque é mais flexível em que cada célula pode conter - células de uma coluna não têm todos
de ser do mesmo tipo.
Em algumas circunstâncias, pode melhor no cliente que executam LiveGrid, particularmente
em um cliente lento exibindo uma grade com muitas colunas.
Finalmente, um SimpleGrid pode conter elementos de entrada (caixas de seleção, listas de
seleção, etc.) Enquanto um LiveGrid também podem conter elementos de entrada, porque os
valores dos elementos são armazenados no buffer LiveGrid, submetendo os valores de volta
para o servidor pode ser complicado. SimpleGrids não sofrem deste problema. Você pode
simplesmente cercar toda a rede com o padrão <form> </ form> marcas e quaisquer
elementos de entrada dentro da grade serão enviados de volta ao servidor.
O exemplo mais sofisticado de um SimpleGrid é a planilha incluída nesta distribuição. Você
pode inserir fórmulas e vai recalcular quando você muda as entradas - assim como uma
planilha comercial. Um link para o exemplo de planilha pode ser encontrada na seção
"Exemplos HTML" do menu de exemplos. Quando na planilha, clique no botão para ver tudo o
que pode fazer.
SimpleGrids pode ser criado de duas maneiras:
Ao usar um dos plug-ins SimpleGrid. Plug-ins existentes para PHP, ASP e. Net.
Usando XSLT. Rico inclui um arquivo XSL que irá converter uma tabela HTML padrão para um
SimpleGrid.
Criando um SimpleGrid usando um plug-in
Cada plug-in define uma classe SimpleGrid. Dentro da classe, existem métodos para iniciar
linhas de cabeçalho e as linhas de dados - apenas chamar um desses métodos em todos os
lugares que você iria colocar uma tag <tr> em uma tabela HTML. Há também um método para
criar uma célula - apenas chamá-lo em todos os lugares que você iria colocar uma tag <th> ou
<td> em uma tabela HTML. Quando você terminar de definir o conteúdo da tabela, basta
chamar o método render (exceto no plugin net. Onde renderização é chamado
automaticamente). É muito fácil!
Criando um SimpleGrid usando XSLT
Se a sua página web é compatível com XHTML, então não há outra maneira de gerar um
SimpleGrid. Basta usar a folha de estilo XSL "ricoSimpleGrid.xsl" para transformar as tabelas
em sua página para SimpleGrids. A folha de estilo olha para tabelas com um nome de classe de
"ricoSimpleGrid" e, em seguida, faz a transformação para você. Ao mesmo tempo, Rico
apoiaram a fazer essa transformação no cliente. No entanto, devido a mudanças na biblioteca
protótipo, este não é mais possível. Portanto, se você optar por usar essa abordagem, a
transformação XSLT deve ser executada no servidor.