Criando um Editor de texto com GRails e RichUI Plugin
Postado em
02/04/2008 00:00
0
0
Olá pessoal,
Como a idéia desse fórum é dar guide lines rápidos e objetivos, neste tópico vamos criar um Editor de textos usando um ótimo plugin para o GRails, que é o RichUI, ideal para melhorar os CRUDs e dar mais liberdade ao usuário.
Bom, em primeiro lugar, vamos criar uma simples app chamada textarea e acessá-la
O próximo passo é instalar o plugin do richui.
Pronto, agora a nossa app já está pronta para usar os recursos deste plugin.
Vamos criar um controller que vai servir para acessarmos a página
Agora, vamos editar o nosso controller e criar uma action chamada "simple" (a primeira textarea será do tipo simples), sem lógica, apenas para chamar o nosso arquivo simple.gsp (que criaremos em grails-app/textarea/simple.gsp com o conteúdo abaixo).
action simple
simple.gsp
Pronto, vamos fazer um teste inicial, rodar a aplicação e acessar nossa action "simple"
e acessá-la através da url
Pronto, com isso temos na tela a mensagem "Um simples editor html usando GRrails e RichUi plugin"
Agora, para inserir o textarea, vamos incluir as dependencias de javascript que o componente tem, e para isto basta dentro do head da página, incluir a tag:
e no body da página, fazer a chamada para nosso richtexteditor:
Deixando finalmente nosso simple.gsp da maneira abaixo:
Pronto, acessando novamente a url, vemos a imagem abaixo e temos um editor pronto a ser usado!
Simple
Agora, vamos criar mais 3 editores (medium, advanced e full). Para cada um deles, criaremos uma action no controller, uma view simples, e alterar o parâmetro type que passamos na tag resource! O resultado final se parece com as screenshots abaixo, basta acessar:
Medium
Advanced
Full
É isso aí! Simples e objetivo!
[]s,
Como a idéia desse fórum é dar guide lines rápidos e objetivos, neste tópico vamos criar um Editor de textos usando um ótimo plugin para o GRails, que é o RichUI, ideal para melhorar os CRUDs e dar mais liberdade ao usuário.
Bom, em primeiro lugar, vamos criar uma simples app chamada textarea e acessá-la
grails create-app rich
cd rich
O próximo passo é instalar o plugin do richui.
grails install-plugin richui
Pronto, agora a nossa app já está pronta para usar os recursos deste plugin.
Vamos criar um controller que vai servir para acessarmos a página
grails create-controller textarea
Agora, vamos editar o nosso controller e criar uma action chamada "simple" (a primeira textarea será do tipo simples), sem lógica, apenas para chamar o nosso arquivo simple.gsp (que criaremos em grails-app/textarea/simple.gsp com o conteúdo abaixo).
action simple
def simple = { }
simple.gsp
<html>
<head>
<title>Editor de texto com GRails</title>
</head>
<body>
<h1>Um simples editor html usando GRrails e RichUi plugin</h1>
</body>
</html>
Pronto, vamos fazer um teste inicial, rodar a aplicação e acessar nossa action "simple"
grails run-app
e acessá-la através da url
http://localhost:8080/rich/textarea/simple
Pronto, com isso temos na tela a mensagem "Um simples editor html usando GRrails e RichUi plugin"
Agora, para inserir o textarea, vamos incluir as dependencias de javascript que o componente tem, e para isto basta dentro do head da página, incluir a tag:
<resource:richTextEditor type="simple"/>
e no body da página, fazer a chamada para nosso richtexteditor:
<richui:richTextEditor name="texto" width="600"/>
Deixando finalmente nosso simple.gsp da maneira abaixo:
<html>
<head>
<title>Editor de texto com GRails</title>
<resource:richTextEditor type="simple"/>
</head>
<body>
<h1>Um simples editor html usando GRrails e RichUi plugin</h1>
<richui:richTextEditor name="texto" width="600"/>
</body>
</html>
Pronto, acessando novamente a url, vemos a imagem abaixo e temos um editor pronto a ser usado!
Simple
Agora, vamos criar mais 3 editores (medium, advanced e full). Para cada um deles, criaremos uma action no controller, uma view simples, e alterar o parâmetro type que passamos na tag resource! O resultado final se parece com as screenshots abaixo, basta acessar:
http://localhost:8080/rich/textarea/medium
http://localhost:8080/rich/textarea/advanced
http://localhost:8080/rich/textarea/full
Medium
Advanced
Full
É isso aí! Simples e objetivo!
[]s,
lucastex
Pontos: 17
Pontos: 17
