Utilizando autocomplete no Maker

Bom pessoal, uma funcionalidade que muita gente utiliza hoje na web é a função de autocomplete que pode ser adicionada a uma caixa de texto comum. Neste exemplo estarei abordando mais uma vez a possibilidade de integração das aplicações Maker com bibliotecas externas. Hoje será a vez de integrar com o jQueryUI (conjunto de componentes construídos com base no jQuery) e meu exemplo está relacionado justamente a integração da funcionalidade de autocomplete com o MakerEdit (Componente caixa de texto utilizado no Maker).


Para começar é necessário que baixemos as bibliotecas do jQuery e jQuery UI, disponíveis nos links abaixo:

jQuery: http://code.jquery.com/jquery-1.8.2.js
jQuery UI : http://jqueryui.com/resources/download/jquery-ui-1.9.0.custom.zip

No meu exemplo coloquei os arquivos com extensão JS na raiz do meu contexto.

Dentro do Maker a integração será muito simples. Neste exemplo criei 2 fluxos, um no evento ao entrar do formulário para incluir as bibliotecas (Arquivos JS) no fomulário que estou utilizando e outro, vinculado ao um botão no formulário, para ativar o comportamento na caixa de texto.

O fluxo abaixo está vinculado ao evento "Ao entrar" do formulário. Nele tenho 2 processamentos, no primeiro eu incluo os arquivos JS no formulário e no segundo eu incluo o arquivo de folha de estilo. Para incluir qualquer biblioteca JS utilizo a função "Executar Javascript", disponível na API de funções do Maker, como parâmetro para essa função passei o seguinte trecho de código em JS:

webrun.include("jquery-1.8.2.js");
webrun.include("jquery-ui.js"); 

O outro fluxo utilizado nesse exemplo está vinculado ao botão "Adicionar autocomplete ao componente texto" (Fluxo abaixo), nesse fluxo tenho um único processamento utilizando a função "Executar javascript", que é responsável por vincular a funcionalidade de autocomplete ao componente MakerEdit. 

/*Obtenho a referencia do componente, WFRInput3 é o nome da caixa de texto interna do componente MakerEdit, esse nome é formado pela junção de "WFRInput" + Código do componente, no caso deste exemplo estarei obtendo a referência da caixa de texto WFRInput3*/

var comp = findNode(document, 'WFRInput3');

//Crio o array com os itens que poderão ser utilizados pelo autocomplete

        var availableTags = [

            "ActionScript",

            "AppleScript",

            "Asp",

            "BASIC",

            "C",

            "C++",

            "Clojure",

            "COBOL",

            "ColdFusion",

            "Erlang",

            "Fortran",

            "Groovy",

            "Haskell",

            "Java",

            "JavaScript",

            "Lisp",

            "Perl",

            "PHP",

            "Python",

            "Ruby",

            "Scala",

            "Scheme"

        ];

//Associo a funcionalidade de autocomplete ao componente

        jQuery(comp).autocomplete({

            //Na opção source pode ser passada uma URL também.

            source: availableTags, 

            appendTo: $("MakerEdit1").div

        });

Notem uma coisa importante quando utilizamos jQuery no Maker, não devemos utilizar o alias "$", pois o mesmo já esta em uso dentro do Maker, utilizo sempre "jQuery".

Muito simples integrar recursos de autocomplete no Maker não? Espero ter ajudado. O FRZ deste exemplo pode ser obtido no link abaixo. Abraços e até o próximo post!!

Link do exemplo: https://www.dropbox.com/s/36t07zq2nw2749c/Exemplo%20-%20Autocomplete.FRZ