Tutorial básico: usando a API

Javascript Assíncrono e XML (AJAX)

Diagrama e Funcionamento

Cliente (PHP / TPL / HTML) A página html/php ou template tpl inclui o arquivo connector.js, e repassa a solicitação juntamente com seus parâmetros (GET/POST) A página html/php ou template tpl recebe a resposta da solicitação em sua funcão de retorno, que pode ser uma string ou um objeto qq.

Objeto Connector (JS) O objeto Connector recebe o retorno do Controller, em seu método de retorno (handler), desserializa o resultado e repassa ao cliente. O objeto Connector recebe a solicitação com os parâmetros e utilizando o objeto HttpRequest repassa ao Controller principal.

O Controller recebe a solicitação com os parâmetros, instancia o objeto requerido e executa o método, passando os parâmetros de entrada. O Controller recebe o resultado do método executado, serializa e repassa ao objeto Connector. Controller (PHP)

O objeto criado a partir da requisição do cliente executa o método solicitado. Após a execução do método solicitado, o resultado é retornado para o Controller. Esse resultado pode ser um objeto.

módulo.classe.método
e parâmetros (classe PHP)

Implementação básica (Exemplo)

No cliente (HTML, PHP ou TPL) usando o comando cExecute

<html>

<body>

<input type="button" onclick="javascript:funcao()">

</body>

</html>

<script src="js/connector.js" type="text/javascript"></script>

<script language="JavaScript" type="text/javascript">

//	função qualquer

function funcao(){

//	função interna para receber a resposta da requisição

var handler = function (responseText){

//	A resposta pode ser um objeto.

data = responseText;

}

//	Executa função pública do objeto Connector já instanciado na inclusão do js.

//	Parâmetros:

//	String args => “modulo.classe.metodo” + “&param1=valor1&param2=valor2...”

//	function handler => função interna criada para receber a resposta. Deve possuir um

//	argumento na assinatura do método

//	1. Utilizando método GET:

var args = “modulo.classe.metodo&param1=valor1&param2=valor2”;

cExecute (args, handler);

//	2. Utilizando método POST.

//	String params => “param1=valor1&param2=valor2”.

var args = “modulo.classe.metodo”;

var params = “param1=valor1&param2=valor2”;

cExecute (args, handler, params);

}

</script>

Dica1: Para executar um método de uma classe que pertença ao próprio módulo, utilize no comando cExecute o argumento “$this.classe.metodo”, ao invés de “modulo.classe.metodo”.

No cliente (HTML, PHP ou TPL) usando o comando cExecuteForm

O comando cExecuteForm deve ser utilizado quando há necessidade de se enviar um formulário HTML, que contenha upload de arquivos (enctype=“multipart/form-data”), para uma determinada classe PHP. Esse comando utiliza AJAX somente para receber o seu valor de retorno, ou seja, o envio dos dados do formulário é feito utilizando apenas um POST normal para uma url.

<html>

<body>

<form name="form1" method="post" enctype="multipart/form-data">

<input type="text" name="to">

<input type="file" name="file">

</form>

<input type="button" onclick="javascript:f_enviar()">

</body>

</html>

<script src="js/connector.js" type="text/javascript"></script>

<script language="JavaScript" type="text/javascript">

//	função qualquer

function f_enviar(){

//	função interna para receber a resposta da requisição

var handler = function (responseText){

//	A resposta pode ser um objeto.

data = responseText;

}

//	Executa função pública do objeto Connector já instanciado na inclusão do js.

//	Parâmetros:

//	String args => “modulo.classe.metodo”

//	HTMLElement document.form=> formulário criado.

args = “modulo.classe.metodo”;

cExecuteForm (args, document.form1, handler);

}

</script>

Dica2: Para executar um método de uma classe que pertença ao próprio módulo, utilize no comando cExecuteForm o argumento “$this.classe.metodo”, ao invés de “modulo.classe.metodo”.

2.3. No Servidor (exemplo de classe PHP)

<?php

class User{

function get_user_id(){

// retorna resultado (string).

return $_SESSION['userid'];

}

function verify_user($params){

// retorna resultado (Object).

return $params;

}

}

?>

2.4.Estrutura do diretório da aplicação

A estrutura segue o padrão do eGroupWare

+ modulo

inc

/ class.functions.inc.php	// Classe que contém funções comuns e utilitários

js

/ connector.js	// Connector em /js

templates

controller.php	// Controller na raiz do módulo

Dicas para utilizar objetos do eGroupware

Caso queira utilizar os objetos contidos na sessão do usuário, criados pelo eGroupware, dentro das classes acessadas via AJAX, inclua a seguinte linha na página cliente (PHP) e verifique se a variável session.auto_start = 1 no php.ini

// caso ainda não tenha sido incluído pela aplicação.

$GLOBALS['phpgw_info']['flags'] = array(

'noheader' => True,

'nonavbar' => True,

'currentapp' => 'appName',

'enable_nextmatchs_class' => True

);

include('../header.inc.php');

// popula dados no array $_SESSION

$_SESSION['phpgw_info']['expressomail']['user'] = $GLOBALS['phpgw_info']['user'];

$_SESSION['phpgw_info']['expressomail']['server'] = $GLOBALS['phpgw_info']['server'];

Carregando um arquivo js automaticamente

Para carregar um ou mais arquivos javascript (.js) automaticamente, basta copiá-lo para o diretório js do móduo, e adicionar as seguintes linha da página PHP:

// Include JS Files

$obj = createobject("modulo.functions");

echo $obj -> getFilesJs();

Ex.:

+ modulo

js

/ arquivo_1.js

/ arquivo_2.js

...

/ arquivo_n.js

IMPORTANTE: Caso um ou mais arquivos JS não possam ser carregados utilizando esse objeto, apenas inclua como parâmetro no método getFiles seus respectivos nomes, como mostra o exemplo abaixo:

echo $obj -> getFilesJs("js/connector.js, js/globals.js, js/treeS.js, js/treeShow.js, js/sniff_browser.js");

Autor: Nilton Emílio Bührer Neto (niltonneto@celepar.pr.gov.br)	Data atualização: 27/12/2005

Importante: Todas as palavras “modulo”, contidas nesse tutorial, devem ser substituídas pelo nome do diretório da aplicação.

2005-06-21T09:14:24