O SmartClient é um plugin para o jquery construido pela Vivina, para ajudar a criar requisições ajax, construir interfaces e tornar o desenvolvimento web, mais dinamico, leve e criativo.
O plugin se baseia na premissa de convenções são mais flexiveis do que codificação, então criou-se uma convenção de que toda tag HTML pode herdar se comportar como uma tag FORM, porém as requisições serão realizadas através de ajax. No HTML tradicional temos a seguinte configuração:
O HTML acima irá disparar uma requisição do TIPO POST, para o recurso "teste.aspx", chamando um metodo "BuscarClientePorId", enviando uma variável "companyId" com valor "1"
Com este plugin seria bem mais fácil precisando realizar apenas o seguinte:
| Atributo |
Tipo |
Condição |
| Action |
string |
Endereço do recurso, pagina, serviço ou controller que deseja acessar, exatamente igual a tag FORM
|
| Method |
string |
Função que deseja executar no recurso, diferentemente da tag FORM onde method é o VERBO rest que deseja enviar GET, POST, PUT, DELETE.
Neste caso o method pode ser uma função de um controller, um WebMethod de uma pagina ASPX ou uma função de um WebService.
|
| Params |
object |
Um objeto em notação JSON que será enviado como argumentos da função ou recurso |
| Auto |
boolean |
Quando o atributo "Auto" for setado para true em uma tag, significa que quando o navegador terminar de carregar tal elemento HTML, uma requisição ajax será disparada de acordo com o valor dos atributos "Action" e "Method".
Por exemplo: <table auto="true" method="CarregaCliente" action="SearchService.svc"> .... </table>.
Nesse caso uma requisição será disparada para o endereço "SearchService.svc/CarregaCliente"
|
| Target |
string |
Indica qual tag irá receber o conteúdo do recurso, ou será usado na renderização do jQuery.Template
Caso seja usado com um link, então a página será carregada dentro da tag. Geralmente usada no formato seletor do jQuery, permite buscar em qualquer parte da página por uma tag.
Ex:. <a href="teste.htm" target="#content">clique aqui</a>
OBS: Caso este atributo não seja definido o default é a tag que tem o atributo action definido.
|
| Template |
string |
Indica qual a tag contém o conteúdo que será parseado no jQuery.Template.
Indica qual tag irá receber e mostrar o resultado da requisição. Nesse processo, a tag referenciada no valor de
template, será replicada várias vezes de acordo com o número de registros retornados da requisição. Por exemplo em uma table:
<table auto="true" method="CarregaCliente" action="SearchService.svc" template="#content">
<thead>
<tr>
<th>
Número
</th>
<th>
Cliente
</th>
</tr>
</thead>
<tbody id="content">
<!-- a cada registro retornado, uma nova <TR> com essas colunas são criadas -->
<tr>
<td>
<$=Numero$>
</td>
<td>
<$=Nome$>
</td>
</tr>
</table>
OBS: Caso este atributo não seja definido o default é a tag que tem o atributo action definido.
|
jQuery.Template
Para complementar a criação de telas dinamicas, empregamos outro recurso que é a possibilidade de criar templates no javascript. A criação de templates no javascript potencializa toda a utilização de interfaces no navegador, sendo uma maneira mais inteligente de utilizar melhor os recursos do navegador.
Ao desenvolver usando templates no cliente, usamos melhor um dos recursos menos explorados pelos desenvolvedores web, que é o cache no navegador. O cache que o navegador faz agiliza a navegação do internauta, assim quando deixamos de fazer o desenvolvimento Web apenas ser uma eterna requisição de HTMLs modificados no servidor, com a cara que o usuário solicita, ou seja, a cada clique do usuário o servidor, processa os dados enviados, gera um HTML usando listas, combos, grids, e envia para o cliente, que por sua vez com esse novo HTML clica em outra parte da tela, enviando para o servidor novos dados, que o servidor processa gera um novo HTML e envia novamente ao usuário.
Vamos pensar de outra forma? Imagina que a tela o usuário somente recebe uma vez, e quando o usuário clica em algo na tela e envia dados para o servidor, o servidor ao inves de gerar um novo HTML e devolver, apenas processa alguns dados e devolve os dados necessários para a geração do HTML, mas essa geração quem faz é o navegador. Isso significa que uma vez essa tela configurada, o seu HTML pode ser "cacheado" pelo navegador e da próxima vez que o usuário solicitar essa tela o navegador imediatamente apresenta, só faltando os dados para preencher os campos.
Exemplo: Vamos criar uma tela com uma combo e um botão, o código para isso poderia ser o seguinte.
<asp:Literal ID="Literal1" runat="server" Text="Equipamento"></asp:Literal><br>
<asp:DropDownList ID="DropDownList1" DataSourceID="odsListaEquipamentos" runat="server" AppendDataBoundItems="true" DataTextField="Name" DataValueField="CustomerEquipmentId" Width="120px"><asp:ListItem Value="" Text=""></asp:ListItem></asp:DropDownList><br />
<asp:Button ID="btnSave" runat="server" Text="Salvar" OnClick="btnSave_Click" ValidationGroup="InsertCustomerCall" />
Temos um controle DropDownlist e um Button, o controle DropDownList, utiliza um outro controle odsListaEquipamentos que é responsável por saber como acessar o banco de dados e trazer uma lista de Equipamentos. Então o servidor transforma este controle em um HTML mais ou menos assim:
<select>
<option value="1">Equipamento A</option>
</select>
Como seria nessa nova forma? Para isso nós configuramos o HTML para que ele próprio possa saber onde está a origem dos dados, e uma vez sabendo a origem, busque apenas os dados e gere seu próprio HTML
<select auto="true" action="SearchService.svc" method="ListaEquipamentos" params="{ empresaId: 1 }">
<option value="<$=EquipamentoId $>"><$= NomeEquipamento $></option>
</select>
Como o atributo auto é "true", significa que imediatamente esta tag seja renderizada a biblioteca irá disparar o atributo action, onde "SearchService.svc" é um webservice, o metodo a ser executado está definido por method, ou seja, chamará a função ListaEquipamentos dentro de SearchService.svc, passando como parametros o atributo params que indica a empresaId como 1. Atraves de ajax este serviço é chamado que por sua vez retornará um objeto JSON que servirá para o cliente gerar seu HTML.
O HTML a ser gerado é definido pelo atributo template, como não está definido então é o pr??prio conteudo (<option value="<$=EquipamentoId $>"><$= NomeEquipamento $></option>), este conteúdo será escrito várias vezes igual a quantidade de dados retornados pelo method da action.
Para programar a interface e ter maior liberdade de criação foi criada uma convenção de interface atraves das tags <$ $> que indicam o inicio de código javascript, uma variação possivel são as tags <$= $> indicam um document.write da variável contida. No exemplo acima será escrito no atributo value da option o conteudo da variável EquipamentoId, e aparecerá na tela o conteúdo da variável NomeEquipamento.