(Nota: sim estender não extender)
Uso, e recomendo, a utilização do Smarty em qualquer projeto PHP. Porque?
Bem tenho inúmeros motivos para fazer esta recomendação, mas neste post vou me limitar a apenas citar alguns, pois não é o objetivo.
- Separar PHP e HTML: código limpo, manutenção fácil
- Code e Layout em paralelo: agilidade no trabalho em equipe
- Funções de maquiagem: formatar data, wordwrap, funções que dizem respeito a visualização, ficam na visualização
- Funções customizadas: estender o Smarty é simples e útil
É neste ponto, o número 4 que vou focar este post, utilizando o tinyMCE como exemplo.O Smarty possui inúmeros “modifiers” e “plugins” que podem facilitar muito a vida de qualquer programador. Diferenças:
- Modifier – É aplicado às variaveis, alterando seu valor ou formato de apresentação. Exemplo: date_format ({$var|date_format:’%d/%m/%Y’), upper ({$title|upper})
- Functions (Funções) – Executam funções variadas, recebendo parametros e executando operações, retornando o código após execução
A peça chave do Smarty é que ele permite que você crie suas prórias funções ou modificadores, para executar as funções que você precisa no seu dia a dia. Com isso você pode criar funções específicas ao seu sistema que facilite tarefas de “layout” repetitivas ou extensas.
Um exemplo disso é o código usado pelo OpenAds para mostrar um banner de uma zona, criando uma função de Smarty que receba o código da zona, você pode rapidamente implementar um banner em determinado local com algo semelhante a:
[smarty]{ OpenAds zone=2}[/smarty]
Simples e direto.
Outro exemplo, que eu vou apresentar a fundo neste post, é a aplicação do TinyMCE, editor de HTML largamente utilizado por varios sistemas. Sua implementação é simples, o que indica que talvez não seja apropriado a ser objeto de uma função, mas na realidade temos alguns detalhes a serem observados na implementação.
O uso do script tem básicamente duas partes, inclusão de arquivos .js e a inicialização do editor ligado aum textarea. A complicação vem na inclusão dos arquivos, vejamos estes dois casos:
- Site sem ponto central – Cada página que irá usar um editor deve conter o código de inclusão dos arquivos, repetitivo e cansativo
- Site com ponto central – Os arquivos são incluidos no ponto central, com isso páginas que não usam o editor incluem os arquivos de qualquer forma, mais download e carga.
Levando estas situações em consideração fica claro que é necessario a utilização de algo que permita que os códigos sejam incluidos apenas quando realmente são utilizados, e que não seja preciso repetir 10-15 linhas cada vez que se deseja incluir um TinyMCE. Criando uma função do Smarty podemos utilizar algo como o código a seguir que inclua or arquivos (se necessário) e inicialize o editor:
[smarty]{tinyMCE mode=’exact’ elements=’textarea_id’}[/smarty]
A função se encarrega de verificar se é necessário inserir os arquivos .js, e inserir o script de inicialização, utilizando os parametros padrões, ou os que você definir. Desta forma o uso do tinyMCE se torna pontual e otimizado, evitando os problemas citados acima.
Como implementar esta função
O primeiro passo para implementar esta função é incluir um arquivo na pasta de plugins do Smarty, com o nome da função: function.tinyMCE.php
Com este arquivo criado devemos agora seguir os padrões de desenvolvimento definidos pelo Smarty. Primeiro documente a função, como todo programador nunca faz deveria fazer, e ai seguimos para a declaração da função, que deverá receber dois parametros por padrão. O primeiro é um array com todos parametros passado na chamada e o segundo é o objeto Smarty sendo usado atualmente.É importante notar que o nome da função é padronizado em “smarty_function_name“, onde substituimos name por “tinyMCE” neste caso.
/* * Smarty plugin * ------------------------------------------------------------- * Type: function * Name: tinyMCE * Version: 0.8 * Date: 07 Mar, 2007 * Author: Rafael Dohms <rafael@rafaeldohms.com.br> * Purpose: inserts TinyMCE Code and inicializes editor * Input: mode = modo de seleção dos campos * elements = textarea alvo para editor * * ------------------------------------------------------------- */ function smarty_function_tinyMCE($params, &$smarty) { ... }
A seguir define-se os parametros “padrão”, que serão usados no caso de nada ser enviado que sobrescreva estes valores. Para isso criei um array chamado atribs que recebe valores e usa o nome das propriedades como chave. Logo a seguir precisamos transformar o array de parametros de entrada em atributos do tinyMCE, sobrescrevendo os valores padrão, mas ignorando parametros que se iniciam com “_”, que serão usados para configurações internas da função, e não do editor.
//Valores padrao $atribs['mode'] = 'specific_textareas'; $atribs['theme_advanced_toolbar_location'] = 'top'; $atribs['theme_advanced_toolbar_align'] = 'left'; $atribs['theme_advanced_blockformats'] = "address,pre,h1,h2,h3,h4,h5,h6"; $atribs['theme_advanced_resizing'] = "true"; $atribs['theme_advanced_buttons1'] = "bold,italic,underline,separator,justifyleft,justifycenter,justifyright,separator,bullist,numlist,separator,outdent,indent,separator,link,unlink,image,separator,sup,sub,separator,charmap"; $atribs['theme_advanced_buttons2'] = "undo,redo,code"; $atribs['theme_advanced_buttons3'] = ""; $atribs['force_br_newlines'] = "true"; $atribs['plugins'] = "advimage"; $atribs['dialog_type'] = "modal"; $atribs['language'] = "pt_br"; $atribs['convert_newlines_to_brs'] = "true"; //Iterar pelos atributos passados foreach($params as $_key => $_val) { if (substr($_key,0,1) == '_'){ $key = substr($_key,1); $$key = $_val; }else{ $atribs[$_key] = $_val; } }
Em seguida iremos iniciar a implementação dos códigos. Primeiro verificamos o parametro altsrc para ver se uma fonte alternativa da biblioteca foi fornecida, ou se devemos incluir a biblioteca do local padrão setado. Em seguida verificamos uma variável global que indica se a biblioteca já foi incluida por uma chamada anterior da função que estamos criando. Após isso teremos o código javascript de inserção pronto.
//Definir path do arquivo do tiny $src = ($altsrc != '')? $altsrc:"jsglobal/tiny_mce/tiny_mce.js"; //Verificar se devemos ou não inserir biblioteca if (!$GLOBALS['smarty']['tinyMCE']['JS']){ $code = '<script language="javascript" type="text/javascript" src="'.$src.'"></script>'; }
Agora montamos o código de incialização do editor, iterando pelos atributos do array atribs e jogando eles na sintaxe utilizada pelo tinyMCE. Neste ponto foi incluida uma propriedade “blank: none” apenas para nao quebrar a sintaxe, pois o foreach deixa uma virgula solta no final das iterações, e esta solução custa menos que qualquer if que possa ser usado.
//Iniciar código de inicialização do editor $code .= '<script language="javascript" type="text/javascript">'; $code .= 'tinyMCE.init({'; //Iterar por atributos foreach($atribs as $atr=>$value){ $code .= $atr.': "'.$value.'",'; } //Finalizar $code .= 'blank: "none"'; //Evitar problem de virgula perdida $code .= '});'; $code .= '</script>';
Em seguida setamos a variável global que determina se já incluimos ou não a biblioteca (.js), esta que foi verificada acima. Depois disso precisamos apenas retornar o código usando uma chamada return e tudo será impresso no template, no local da chamada.
//Setar variavel global de biblioteca inserida $GLOBALS['smarty']['tinyMCE']['JS'] = true; //Retornar código return $code; }
Pronto, agora a chamada indicada no início da explicação irá fazer a inserção de um editor tinyMCE customizado à nossa situação com apenas uma linha de código, e algumas simples palavras. Todo esforço de escrever as linhas normais de implementação esta nas mãos do Smarty e o processo todo se torna indolor e rápido, melhorando tempo de desenvolvimento da aplicação.
Vejam o código completo aqui
Instalando em seu servidor
A instalação deste script deve ser indolor, faça o download do tinyMCE, e salve em uma pasta de seu servidor, em uma aplicação que já utilize Smarty. Copie o arquivo da função para a pasta de plugins do Smarty e ajuste os parametros parões e o path padrão da biblioteca, insira o código abaixo no template, de acordo com o que deseja e de acordo com a sintaxe do tinyMCE.
[smarty]{tinyMCE mode=’exact’ elements=’textarea_id’ language=’pt-br’}[/smarty]
Faça o download do arquivo da função aqui.
Bacana! tenho usado o smarty em alguns projetos, sem arrependimentos!
É a segunda vez que vejo você falar bem do smarty, vou acabar dando uma olhada.
Mas hoje em dia com o CSS estando presente em todos os browsers e cheio de recursos fica fácil mudar o visual do site, mesmo mudanças radicais. Isso não torna o Smarty dispensável?
E lá na formatação da data, a própria função date() do PHP já não faz isso?
Resposta curta: não
Resposta longa:
O ponto que você levanta é interessante, mas de forma alguma o CSS e etc torna o Smarty dispensável. Pelo contrário, acredito que potencializa.
O que o Smarty possibilita não é apenas “estético” e sim funcional, a separação do código facilita, melhora a estrutura, por exemplo com smarty se você quiser mover um bloco X do topo da página para o final, voce só muda a tag {}, se tivesse no PHP, voce teria de mover todo um bloco de lógica de lugar, e ai se preocupar com variáveis perdidas e lógica de programação.
Sim a função date() faz a mesma coisa, mas porque o programador deve tratar o dado para o designer? Com esta função podemos facilmente deixar o designer fazer a alteração de como deseja “apresentar” o dado. Imagine que você usa a data em formato UNIX no seu programa em dois pontos, ou você vai ter duas variáveis, uma legível e outra pra código, ou você vai ter problemas. Com smarty voce mantem a data em unix e joga pro template, ele decide o que fazer.
A questão é por ai, mas posso elaborar mais em outro post específico, se tiver alguma duvida entre em contato.
Obrigado pelo feedback, Abraço
CSS trabalha a interface da página (layout, disposição de elementos, cores, fontes etc.). Já o Smarty trabalha com a lógica da apresentação (Conteúdo, forma de apresentação da informação, ordem de apresentação etc.). Assim, não há confusão entre CSS e Smarty, pois cada um tem uma função diferente do outro.
Caras, tenho um site com Smarty em um servidor americano e ele não está mostrando a acentuação.
Tem alguma coinfiguração no Smarty a ser feita para mostrar os textos acentuados?
Valeu, abraço.
Cara… tem como me enviar um exemplo prático? Não to conseguindo usar!
Obrigado!
Olá, acredito ter feito tudo corretamente e me ocorreu o seguinte erro ao colocar no template,
“Fatal error: Cannot use object of type Smarty as array in C:\Documents and Settings\Administrador\Meus documentos\sites\clinicamonteiro\libs\plugins\function.tinyMCE.php on line 50”
Talvez seja algo simples que não estou conseguindo arrumar. Ficaria muito grato caso consiga me ajudar. Abraços
Verdade, aqui deu o mesmo problema.
“Fatal error: Cannot use object of type Smarty as array in …\function.tinyMCE.php on line 50″
No localhost funciona (php 4.3.x) mas no servidor (php5) dá este problema.
Estou pesquisando, se alguém souber, nos diga por favor.
Olá
Conseguí corrigir o erro trocando todas as ocorrências de:
$GLOBALS[‘smarty’]
por:
$GLOBALS[‘Smarty’]
(colocando o “S” de Smarty em maiúscula)
Quanto ao problema de acentuação, acredito que basta passar o valor pelo utf8_encode() e resolve o problema…
exemplo:
$variavelNoPHP = “É Nois”;
$objSmarty->assign(“variavelNoSmarty”, utf8_encode($variavelNoPHP));
$objSmarty->display(“template.tpl”);
abraços.
Ola, tentei utilizar o codigo na minha aplicação mais nao funfou
poderia ensinar como chamar o tinyMCE,
pois quando chamo no template ele nao aparece
é soh colocar o codigo {tinyMCE mode=’exact’ elements=’textarea_id’ language=’pt-br’} em qualquer lugar ou tem que fazer mais alguma coisa
desculpe a pergunta mais sou iniciante nesta area de programação.
Abraços
Vitor,
Para usar o exemplo deste artigo, você precisa estar usando o Smarty em seu site e ter instalado este plugin (na pasta de plugins), somente assim poderá usar o tinyMCE desta forma, caso contrário, procure o site do tinyMCE para tirar dúvidas.
Rafael,
ja tenho o Smart instalado e a pasta plugins que fica dentro de uma pasta chamada libs no meu localhost(www)
quando tento executar o arquivo simplesmente ele nao mostra nada nem gera erro no firebug
gostaria de entender como utilizar esse plugin pois aqui utilizei 3 arquivos para criação do meu campo noticias
um chamado:
adicionaNoticia.php:esse contem meu codigo php o include da configuração do Smart, chama tambem o meu template atraves do comando $smarty->display(‘adicionaNoticia.tpl’); entre outros.
adicionaNoticia.tpl: esse é meu template com os input e todo meu html.
noticia.class.php: Esse php contem selects inserts.
Esses tres arquivos fazem interação e possuem o Smart.
Acho que to fazendo algo de errado, pq coloquei o plugin na pasta plugin como vc citou e apenas copiei o : {tinyMCE mode=’exact’ elements=’textarea_id’ language=’pt-br’} pra dentro do meu template mais nao mostra nada.
Desculpe a amolação ai mais gostaria muito de aprender a utilizar os plugins..
Abraços
Pessoal, consegui usar o tinyMCE mais achei outro problema
quando clico em salvar na minha aplicação ele nao salva o campo que tem o TinyMCE no banco de dados
e quando tiro e o TinyMCE da minha aplicação ele salva normal!
sera que alguem poderia me ajudar!!!
Uso o firebird como banco de dados.
abraços
@Vitor Você tem de verificar com qual nome o textarea esta indo, geralmente é o nome do textarea, outra maneira é imprimir o array POST no arquivo que recebe.
@Gerson Novais mudando o file encoding para utf-8 tb resolve
@all a versão 3.2.4.1 do TinyMCE não vem com a linguagem pt-br, sómente en(glish), para funcionar o exemplo altera a linguagem de pt-br para en