<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>GWT Brasil &#187; gwm</title>
	<atom:link href="http://www.gwt.com.br/tag/gwm/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.gwt.com.br</link>
	<description>Grupo de usuários do GWT no Brasil</description>
	<lastBuildDate>Sat, 10 Oct 2009 03:37:35 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.3</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Utilizando o Gwt Window Manager</title>
		<link>http://www.gwt.com.br/2008/03/05/utilizando-o-gwt-window-manager/</link>
		<comments>http://www.gwt.com.br/2008/03/05/utilizando-o-gwt-window-manager/#comments</comments>
		<pubDate>Wed, 05 Mar 2008 15:07:32 +0000</pubDate>
		<dc:creator>Marcelo Emanoel</dc:creator>
				<category><![CDATA[Básico]]></category>
		<category><![CDATA[Tutorial]]></category>
		<category><![CDATA[desktop]]></category>
		<category><![CDATA[gwm]]></category>
		<category><![CDATA[java]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://www.gwt.com.br/2008/03/05/utilizando-o-gwt-window-manager/</guid>
		<description><![CDATA[  Para quem nÃ£o conhece existe um projeto do qual participei na elaboraÃ§Ã£o e acho bastante Ãºtil pra todo mundo. Ã‰ o GWT Window Manager o projeto consiste basicamente em usar um gerenciador de janelas para a sua aplicaÃ§Ã£o aumentando ainda mais a sensaÃ§Ã£o de se estar usando um desktop em vez do browser. [...]]]></description>
			<content:encoded><![CDATA[<p>  Para quem nÃ£o conhece existe um projeto do qual participei na elaboraÃ§Ã£o e acho bastante Ãºtil pra todo mundo. Ã‰ o <a href="http://www.gwtwindowmanager.org">GWT Window Manager</a> o projeto consiste basicamente em usar um gerenciador de janelas para a sua aplicaÃ§Ã£o aumentando ainda mais a sensaÃ§Ã£o de se estar usando um desktop em vez do browser. Nesse post vou explicar o bÃ¡sico de como se usar o GWM como Ã© conhecido no seu projeto.</p>
<p>Primeiramente crie um projeto usando o Project Creator e o Application Creator como explicado em posts anteriores. Em seguida acrescente o gwm.jar ao seu classpath e copie o diretÃ³rio themes para a pasta public do seu projeto, Ã© nela que se encontram todos os arquivos css e de imagem do gwm. Feito isso, o prÃ³ximo passo Ã© efetuar a ligaÃ§Ã£o entre a pÃ¡gina e esses arquivos. Acrescente as seguintes linhas no head do html da pÃ¡gina:<br />
<span id="more-52"></span><br />
[html]</p>
<link href="themes/alphacube.css" rel="stylesheet" />
<link />
<link href="themes/alphacube-off.css" rel="stylesheet" />
<link />
<link href="themes/citrus.css" rel="stylesheet" />
<link />
<link href="themes/citrus-off.css" rel="stylesheet" />
<link />
<link href="themes/cloudy.css" rel="stylesheet" />
<link />
<link href="themes/cloudy-off.css" rel="stylesheet" />
<link />
<link href="themes/darkX.css" rel="stylesheet" />
<link />
<link href="themes/darkX-off.css" rel="stylesheet" />
<link />
<link href="themes/mac.css" rel="stylesheet" />
<link />
<link href="themes/mac-off.css" rel="stylesheet" />
<link />
<link href="themes/sky.css" rel="stylesheet" />
<link />
<link href="themes/sky-off.css" rel="stylesheet" />
<link />
<link href="themes/spread.css" rel="stylesheet" />
<link />
<link href="themes/spread-off.css" rel="stylesheet" />
<link />
<link href="themes/theme1.css" rel="stylesheet" />
<link />
<link href="themes/theme1-off.css" rel="stylesheet" />
<link />[/html]Agora falta pouco para poder usar o framework <img src='http://www.gwt.com.br/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> O seu arquivo de mÃ³dulo do projeto deve ficar parecido com este:[xml]<br />
<module><br />
<inherits name="com.google.gwt.user.User"></inherits><br />
<inherits name="org.gwm.GwtWindowManager"></inherits><br />
<entry class="&lt;br.com.gwt.client.GWM"></entry><br />
</module><br />
[/xml]</p>
<p>Modificando o cÃ³digo que foi gerado pelo application creator ficamos com o entry point da seguinte forma:</p>
<p>[java]<br />
package br.com.gwt.client;</p>
<p>import org.gwm.client.GDesktopPane;<br />
import org.gwm.client.GInternalFrame;<br />
import org.gwm.client.impl.DefaultGDesktopPane;</p>
<p>import com.google.gwt.core.client.EntryPoint;<br />
import com.google.gwt.user.client.ui.RootPanel;<br />
import com.google.gwt.user.client.ui.Widget;</p>
<p>/**<br />
* Entry point classes define <code>onModuleLoad()</code>.<br />
*/<br />
public class GWM implements EntryPoint {</p>
<p>private GDesktopPane	desktop;<br />
private static GWM		instance;<br />
/**<br />
* This is the entry point method.<br />
*/<br />
public void onModuleLoad() {<br />
instance = this;<br />
desktop = new DefaultGDesktopPane();</p>
<p>RootPanel.get().add((Widget) desktop);<br />
}</p>
<p>/**<br />
* Singleton<br />
* @return<br />
*/<br />
public static GWM getInstance() {<br />
return instance;<br />
}</p>
<p>/**<br />
* Adicione os seus GInternalFrames ao desktop <img src='http://www.gwt.com.br/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' /><br />
* @param iframe<br />
*/<br />
public void addWindow(GInternalFrame iframe) {<br />
desktop.addFrame(iframe);<br />
iframe.setVisible(true);<br />
}<br />
}</p>
<p>[/java]</p>
<p>Agora vejamos alguns detalhes do cÃ³digo:</p>
<p>Primeiramente declaramos que iria ser usado um Desktop, o desktop nada mais Ã© do que um objeto capaz de receber janelas e gerenciÃ¡-las. AlÃ©m disso, implementamos um dos mais usados e simples padrÃµes de projeto um singleton. O Singleton garante que  somente uma instancia de um determinado objeto serÃ¡ criado. Como o mÃ©todo onModuleLoad Ã© o primeiro a ser chamado pelo gwt, e somente Ã© executado uma Ãºnica vez, Ã© bastante adequado inicializar o singleton nesse ponto. No caso de se adicionar construtores ao entryPoint eles devem ser construtores padrÃ£o sem argumentos, podendo atÃ© mesmo ser privados caso contrÃ¡rio o compilador irÃ¡ reclamar. ApÃ³s a execuÃ§Ã£o do onModuleLoad a qualquer momento serÃ¡ possÃ­vel se obter uma instancia do entryPoint atravÃ©s do mÃ©todo <em>getInstance()</em>.</p>
<p>Observem que a inicializaÃ§Ã£o do desktop se dÃ¡ atravÃ©s da classe DefaultGDesktop o que indica que a classe GDesktop na verdade Ã© uma interface, isso configura um dos vÃ¡rios pontos de extensÃ£o do framework.  Caso seja necessÃ¡rio implementar um desktop com comportamentos diferentes do original tudo que se tem que fazer apÃ³s a implementaÃ§Ã£o Ã© alterar esta linha.</p>
<p>Por ultimo, no mÃ©todo onModuleLoad Ã© adicionado esse objeto desktop ao RootPanel, que como jÃ¡ explicado anteriormente, Ã© a pÃ¡gina html. Repare aqui que a referÃªncia ao desktop nÃ£o Ã© de um widget, embora a implementaÃ§Ã£o o seja, daÃ­ a necessidade do cast.</p>
<p>Agora analisemos o mÃ©todo <strong><em>addWindow(GInternalFrame iframe)</em></strong> ele faz duas coisas:</p>
<p>1. Adiciona o GInternalFrame ao desktop, porÃ©m isso nÃ£o a torna visÃ­vel;<br />
2. Mostra a janela finalmente. Uma chamada ao mÃ©todo <em>setVisible</em> sem que a janela esteja previamente adicionada a um desktop provocaria uma ExceÃ§Ã£o em tempo de execuÃ§Ã£o por isso ela sÃ³ Ã© feita nesse ponto.</p>
<p>AtÃ© agora temos uma aplicaÃ§Ã£o com um desktop. Nada alÃ©m disso, entretanto visualmente jÃ¡ pode-se observado o seguinte:</p>
<p style="text-align: center"><a href="http://www.gwt.com.br/wp-content/uploads/2008/03/desktop.JPG" rel="lightbox[pics52]" title="Desktop sem janelas"><img src="http://www.gwt.com.br/wp-content/uploads/2008/03/desktop.thumbnail.JPG" alt="Desktop sem janelas" class="imageframe imgaligncenter" width="200" height="150" /></a></p>
<p>Entretanto isso nÃ£o Ã© nem de longe o suficiente para uma aplicaÃ§Ã£o <img src='http://www.gwt.com.br/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /><br />
Vamos criar pelo menos uma janela e brincar um pouco com ela <img src='http://www.gwt.com.br/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' /> </p>
<p>Para se criar uma janela que possa ser usada em conjunto com o GDesktop devemos criar uma classe que extenda de DefaultGInternalFrame ou entÃ£o uma que a implemente, embora eu nÃ£o recomende a implementaÃ§Ã£o do inÃ­cio por que a DefaultGInternalFrame jÃ¡ possui bastante funcionalidades e sem contar que vocÃª pode extendÃª-la facilmente.</p>
<p>Assim, vejamos, vamos criar uma janela que possa utilizar o mÃ©todo singleton que criamos anteriormente e que tenha alguma utilidade tambÃ©m <img src='http://www.gwt.com.br/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />  ai vai o cÃ³digo:</p>
<p>[java]<br />
package br.com.gwt.client;</p>
<p>import org.gwm.client.impl.DefaultGInternalFrame;</p>
<p>import com.google.gwt.user.client.ui.ChangeListener;<br />
import com.google.gwt.user.client.ui.ListBox;<br />
import com.google.gwt.user.client.ui.Widget;</p>
<p>/**<br />
* Cria uma janela com um combo box com os temas disponÃ­veis. Ao selecionar um<br />
* tema diferente altera o desktop completo.<br />
* @author Marcelo Emanoel<br />
*<br />
*/<br />
public class ThemeChanger extends DefaultGInternalFrame {</p>
<p>private ListBox	combo;</p>
<p>public ThemeChanger() {<br />
init();<br />
initLayout();<br />
attachListeners();<br />
}</p>
<p>/**<br />
*Inicializa os componentes da janela<br />
*/<br />
private void init() {<br />
combo = new ListBox();<br />
combo.addItem(&#8221;default&#8221;);<br />
combo.addItem(&#8221;alphacube&#8221;);<br />
combo.addItem(&#8221;citrus&#8221;);<br />
combo.addItem(&#8221;cloudy&#8221;);<br />
combo.addItem(&#8221;darkX&#8221;);<br />
combo.addItem(&#8221;mac&#8221;);<br />
combo.addItem(&#8221;sky&#8221;);<br />
combo.addItem(&#8221;spread&#8221;);<br />
combo.addItem(&#8221;theme1&#8243;);<br />
}<br />
/**<br />
*Inicializa o layout da Janela<br />
*/<br />
private void initLayout() {<br />
setCaption(&#8221;Seletor de temas&#8221;);<br />
setContent(combo);<br />
}<br />
/**<br />
*Adiciona algum possÃ­vel listener da janela<br />
*/<br />
private void attachListeners() {<br />
combo.addChangeListener(new ChangeListener() {<br />
public void onChange(Widget sender) {<br />
int selecao = combo.getSelectedIndex();<br />
String tema = combo.getValue(selecao);<br />
GWM.getInstance().changeTheme(tema);<br />
}<br />
});<br />
}<br />
}<br />
[/java]</p>
<p>Repare que a janela Ã© a mais simples possÃ­vel, contÃ©m apenas um combobox com o nome dos estilos css que foram adicionados no inÃ­cio. No mÃ©todo attachListeners acrescentei um ChangeListener ao combobox de maneira que sempre que ouvesse a mudanÃ§a de valor fosse possÃ­vel interceptar essa mudanÃ§a e reagir de alguma maneira, no caso chamei o mÃ©todo <em>getInstance()</em> que retorna a instancia do singleton de GWM e em seguida o mÃ©todo changeTheme passando o valor do combobox. abaixo segue o cÃ³digo que realiza a mudanÃ§a de tema:</p>
<p>[java]<br />
public void changeTheme(String newTheme){<br />
desktop.setTheme(newTheme);<br />
}<br />
[/java]</p>
<p>Simples e direto. No mÃ©todo <em>initLayout()</em> foi alterada a propriedade Caption que nada mais Ã© senÃ£o o TÃ­tulo da janela e em seguida o conteudo da janela foi setado para ser o combo box. O mÃ©todo utilizado para isso, <em>setContent()</em> foi sobrecarregado de 3 maneiras:</p>
<p>1. Receber um widget, a que provavelmente serÃ¡ a mais usada nas suas aplicaÃ§Ãµes.<br />
2. Receber uma String, supondo que seja de interesse do usuÃ¡rio adicionar somente texto Ã  janela.<br />
3. Receber uma url, tambÃ©m bastante usada para carregar uma pÃ¡gina html dentro da janela em si.</p>
<p>Existem tambÃ©m outros mÃ©todos que facilitam bastante a vida, como por exemplo, o bloqueio ou nÃ£o de propriedades como Maximizable, Minimizable, Draggable, Closable. Permitindo ou bloqueando respectivamente, maximizar, minimizar, arrastar e fechar a janela. AlÃ©m disso, Ã© possÃ­vel acrescentar ouvintes Ã  janela de maneira a interceptar os eventos anteriores alÃ©m de outros permitindo uma reaÃ§Ã£o a cada um deles.</p>
<p>Vamos revisitar agora a classe GWM jÃ¡ que vamos adicionar uma janela ao desktop. O cÃ³digo segue abaixo:</p>
<p>[java]<br />
package br.com.gwt.client;</p>
<p>import org.gwm.client.GDesktopPane;<br />
import org.gwm.client.GInternalFrame;<br />
import org.gwm.client.impl.DefaultGDesktopPane;</p>
<p>import com.google.gwt.core.client.EntryPoint;<br />
import com.google.gwt.user.client.ui.RootPanel;<br />
import com.google.gwt.user.client.ui.Widget;</p>
<p>/**<br />
* Entry point classes define <code>onModuleLoad()</code>.<br />
*/<br />
public class GWM implements EntryPoint {</p>
<p>private GDesktopPane	desktop;<br />
private ThemeChanger	themeChanger;<br />
private static GWM		instance;</p>
<p>/**<br />
* This is the entry point method.<br />
*/<br />
public void onModuleLoad() {</p>
<p>instance = this;<br />
desktop = new DefaultGDesktopPane();</p>
<p>themeChanger = new ThemeChanger();</p>
<p>changeTheme(&#8221;default&#8221;);<br />
addWindow(themeChanger);</p>
<p>RootPanel.get().add((Widget) desktop);<br />
}</p>
<p>/**<br />
* Singleton<br />
* @return<br />
*/<br />
public static GWM getInstance() {<br />
return instance;<br />
}</p>
<p>/**<br />
* Adicione os seus GInternalFrames ao desktop <img src='http://www.gwt.com.br/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' /><br />
* @param iframe<br />
*/<br />
public void addWindow(GInternalFrame iframe) {<br />
desktop.addFrame(iframe);<br />
iframe.setVisible(true);<br />
}</p>
<p>public void changeTheme(String newTheme){<br />
desktop.setTheme(newTheme);<br />
}<br />
}</p>
<p>[/java]</p>
<p>Veja que criamos uma instancia da janela ThemeChanger e a adicionamos ao desktop. Feito isso Ã© sÃ³ atualizar a pÃ¡gina do projeto e finalmente ver a janela em aÃ§Ã£o.</p>
<p style="text-align: center"><a href="http://www.gwt.com.br/wp-content/uploads/2008/03/desktopcomjanela.JPG" rel="lightbox[pics52]" title="desktopcomjanela.JPG"><img src="http://www.gwt.com.br/wp-content/uploads/2008/03/desktopcomjanela.thumbnail.JPG" alt="desktopcomjanela.JPG" class="imageframe imgaligncenter" width="200" height="149" /></a></p>
<p>A janela por default pode ser maximizada, minimizada, fechada e ser arrastada. Aproveitem e brinquem um pouco. <img src='http://www.gwt.com.br/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>Segue o cÃ³digo implementado no post. Aguardo comentÃ¡rios! <img src='http://www.gwt.com.br/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' /> </p>
<p><a href="http://www.gwt.com.br/wp-content/uploads/2008/03/gwm.zip" title="Projeto GWM">Projeto GWM</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.gwt.com.br/2008/03/05/utilizando-o-gwt-window-manager/feed/</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
	</channel>
</rss>
