[Logo] Mentawai Forum - Mentawai Web Framework
  [Search] Search   [Recent Topics] Recent Topics   [Members]  Member Listing   [Groups] Back to home page 
[Register] Register / 
[Login] Login 

Forum Read-Only! Check the new site and forum here!

InPlaceEditor com MentaAjax  XML
Forum Index -> F.A.Q.
Author Message
robertwgil


[Avatar]
Joined: 23/02/2007 17:22:13
Messages: 745
Location: São Paulo - SP - Brasil
Offline

O menta agora dispõem de uma tag cujo conceito é In Place Editor,
ou seja, digamos que temos uma tabela com dados e ao clicar em uma
célula, a mesma se torna um input onde o cidadão altera o valor e
ao pressionar "Enter" é enviado uma requisição ajax para o servidor.

Agora mão na massa!

Quem aqui não conhece as dynTags inputDate, inputMoney, inputMask, inputText e select?

Agora para transformá-las em InPlaceEditors, basta encapsular na nova tag

<mtw:inplace />

Esta tag apresenta várias variações, e pode ser utilizar sem as dyntags, porem estarei
dando exemplo utilizando-as.

Code:
 <td>
 	<mtw:inplace url="TestAction.mtw" event="dblclick">
 		<mtw:inputMoney name="moneyName" value="123456789"/>
 	</mtw:inplace>
 </td>
 


O parametro url é a url que será requisitada quando o cidadão pressionar "Enter".
O parametro event é o evento que tornará aquele element em um input.
e no corpo a nossa querida tag inputMoney.

No exemplo acima, ao dar dois clicks encima da td, a célula se tornará um
input, input este que terá a mesma ação que o inputMoney normal, mascarando o valor
digitado etc.

Ao alterar o valor e digitar "Enter" será "Targueteado" a seguinte URL:
TestAction.mtw?name=moneyName&value=OqueFoiDigitado

Na action voce pegará normalmente estes valores:
Code:
 public String execute() {
 	String name = input.getStringValue("name");
 	String value = input.getStringValue("value");
 
 	
 	ajax(value);
 
 //	OU
 //	ouput.setValue(AjaxConsequence.KEY, value);
 	
 }
 


E deve retornar via ajax o valor que será atualizado na celula.

E no ApplicationManager, o de sempre:
Code:
 action( TestActin.class )
 	.ajaxOk( new JSONGenericRenderer() );
 // Ou
 // action( TestActin.class )
 //	.on(SUCCESS, new AjaxConsequence( new JSONGenericRenderer() );
 
 


Para utilizar com as outras dyntags é o mesmo conceito.
Code:
 	<mtw:inplace url="AajaxTeste.jsp" event="dblclick">
 		<mtw:inputMask name="mask2" maskCustom="99 99 9999" value="99 99 9999"/>
 	</mtw:inplace>
 	
 	<br>
 
 	<mtw:inplace url="AajaxTeste.jsp" event="dblclick">
 		<mtw:inputDate name="date2" dateFormat="dd/mm/yyyy" value="15/12/1985"/>
 	</mtw:inplace>
 	
 	<br>
 	
 	<mtw:inplace url="AajaxTeste.jsp" event="dblclick">
 		<mtw:inputMoney name="money2" value="123456789"/>
 	</mtw:inplace>
 


Obs: estas tags usam o MentaAjax e as dyntags, portanto no header
faz-se necessário o <mtw:ajaxConfig /> e os <mtw:inputDateConfig /> etc..

Duvidas, postem no fórum..

[Thumb - inplace.jpg]
 Filename inplace.jpg [Disk] Download
 Description Tag inputDate
 Filesize 15 Kbytes
 Downloaded:  803 time(s)


Robert Gil
Coordenador de Desenvolvimento / Administrador de Redes.

Twitter
[Email] [MSN]
IceW0lf


[Avatar]

Joined: 16/03/2006 08:33:38
Messages: 1546
Location: Brasília
Offline

Parabéns Robert!

Leiber Wallace
Voixy ::: Soluções em Telecomunicações
robertwgil


[Avatar]
Joined: 23/02/2007 17:22:13
Messages: 745
Location: São Paulo - SP - Brasil
Offline

Agora, todas DynTags do menta estão integradas com o inplace.
segue uma página jsp funcional de como utilizar, se bem que não muda
nada, apenas é encapsulado na tag inplace:

Code:
 <%@ taglib uri="/WEB-INF/lib/mentawai.jar" prefix="mtw" %>
 <html>
 	<head>
 
 		<mtw:ajaxConfig/>
 		<mtw:inputDateConfig/>
 		<mtw:inputMaskConfig/>
 		<mtw:inputMoneyConfig/>
 		
 	</head>
 
 	<body>
 	
 			
 		<fieldset style="width: 300px; height: 500px; float: left;">
 			<legend>Menta Default</legend>
 
 				Select:<br>
 				<mtw:select list="listaJustificativa" name="selectInPlace"/>
 				
 				<br><br>
 				InputText:<br>
 				<mtw:inputText name="inputTextInPlace" value="Default Value"/>
 				
 				<br><br>
 				InputMoney<br>
 				<mtw:inputMoney name="inputMoneyInPlace"/>
 				
 				<br><br>
 				InputDate<br>
 				<mtw:inputDate name="inputDateInPlace"/>
 				
 				<br><br>
 				InputMask CEP<br>
 				<mtw:inputMask name="inputMaskInPlace" maskDefined="CEP"/>
 				
 				<br><br>
 				InputMask CPF<br>
 				<mtw:inputMask name="inputMaskInPlace" maskDefined="CPF"/>
 				
 				<br><br>
 				InputMask IP<br>
 				<mtw:inputMask name="inputMaskInPlace" maskCustom="999.999.999.999"/>
 			
 		</fieldset>
 		
 		
 		
 		<fieldset style="width: 300px; height: 500px;">
 			<legend>Menta In Place Editor</legend>
 
 				Select:<br>
 
 				<mtw:inplace url="AajaxTeste.jsp" event="dblclick" value="Evento">
 					<mtw:select list="listaJustificativa" name="selectInPlace"/>
 				</mtw:inplace>
 				
 				<br><br>
 				InputText:<br>
 
 				<mtw:inplace url="AajaxTeste.jsp" event="dblclick" value="Some Value">
 					<mtw:inputText name="inputTextInPlace" value="Default Value"/>
 				</mtw:inplace>
 				
 				<br><br>
 				InputMoney<br>
 
 				<mtw:inplace url="AajaxTeste.jsp" event="dblclick" value="120,00">
 					<mtw:inputMoney name="inputMoneyInPlace"/>
 				</mtw:inplace>
 				
 				<br><br>
 				InputDate<br>
 
 				<mtw:inplace url="AajaxTeste.jsp" event="dblclick" value="15/12/1985">
 					<mtw:inputDate name="inputDateInPlace"/>
 				</mtw:inplace>
 				
 				<br><br>
 				InputMask CEP<br>
 
 				<mtw:inplace url="AajaxTeste.jsp" event="dblclick" placeHolder="Your Cep">
 					<mtw:inputMask name="inputMaskInPlace" maskDefined="CEP"/>
 				</mtw:inplace>
 				
 				<br><br>
 				InputMask CPF<br>
 
 				<mtw:inplace url="AajaxTeste.jsp" event="dblclick" value="Your CPF">
 					<mtw:inputMask name="inputMaskInPlace" maskDefined="CPF"/>
 				</mtw:inplace>
 				
 				<br><br>
 				InputMask IP<br>
 
 				<mtw:inplace url="AajaxTeste.jsp" event="dblclick" value="Your IP">
 					<mtw:inputMask name="inputMaskInPlace" maskCustom="999.999.999.999"/>
 				</mtw:inplace>
 		</fieldset>
 
 	
 	</body>
 </html>
 


AajaxTeste.jsp
Code:
 ${param.name} = ${param.value}
 

Esta página pega os parametros passados pela requisição e printa.

Caso alguem vá rodas esta página jsp, não se esqueça que a tag
select precisa de um list. no exemplo com o nome de
listaJustificativa

Robert Gil
Coordenador de Desenvolvimento / Administrador de Redes.

Twitter
[Email] [MSN]
albertoleal


[Avatar]
Joined: 14/01/2008 09:13:58
Messages: 55
Offline

Conversei ontem sobre isso com um amigo. Agora o menta tem isso!

Robert, parábens!

Alberto Leal
Blog: http://www.albertoleal.eti.br
[WWW]
 
Forum Index -> F.A.Q.
Go to:   
Powered by JForum 2.1.6 © JForum Team