Conteúdo


ICEfaces e o Google Translate

Enriqueça seus aplicativos da Web com a capacidade de tradução

Comments

Este tutorial descreve como desenvolver aplicativos da Web interessantes usando o JSF com a opção de tradução. Você também aprenderá sobre os componentes de interface com o usuário do ICEfaces e as funções básicas da API do Google. Finalmente, você criará um arquivo WAR e o implementará no WebSphere® Community Edition (Community Edition).

Objetivos

Dentro deste tutorial, você:

  • Aprenderá sobre diferentes controles de GUI
  • Aprenderá as funções básicas da API do Google Translate
  • Aprenderá como usar o backing bean em aplicativos baseados no JSF
  • Aprenderá como criar páginas JSF com o Eclipse Web Tools Platform (WTP)

Pré-requisitos

É necessário ter qualificações de programação básicas na linguagem Java antes de começar este tutorial.

Requisitos do sistema

Para completar com sucesso este tutorial, será necessário o software a seguir:

  • Rational Application Developer Versão 6 ou Eclipse WTP
  • WebSphere Application Server Community Edition

Consulte Recursos para fazer download desses dois pacotes de software.

Algumas informações básicas

O WebSphere Application Server Community Edition (Community Edition) é o servidor de aplicativos baseado em software livre que suporta o padrão Java EE 5. É construído sobre o Apache Geronimo e integrado com as melhores tecnologias de software livre disponíveis como Apache Tomcat, Apache Axis2 e Apache MyFaces. Seu conjunto de ferramentas de desenvolvimento baseado no Eclipse acelera o desenvolvimento de aplicativos, e seu feature pack para a Web 2.0 fornece uma solução suportada pela IBM para a criação de aplicativos e mashups baseados em Ajax.

Por padrão, a Community Edition tem três conectores Tomcat:

  • HTTPS
  • AJP
  • HTTP

A Community Edition unifica todos os aplicativos executando na plataforma sob uma estrutura de segurança compartilhada e fundamentada em padrões que se baseia no Java Authorization Contract for Containers (JACC). Ao centralizar o gerenciamento de usuários, a Community Edition facilita a configuração e manutenção de sistemas separados de gerenciamento de usuários para os seus aplicativos.

A versão mais recente da Community Edition contém novos recursos de armazenamento em cluster e balanceamento de carga na camada Web, juntamente com opções de implementação hot e remota baseadas em diretório. Há também um conjunto de ferramentas aprimoradas do plug-in do Eclipse e um novo console administrativo. O plug-in do Eclipse Community Edition fornece um ambiente de desenvolvimentos simples para criar, implementar e depurar seus aplicativos na estrutura do Eclipse. O perfil J2EE assegura que esses aplicativos sejam facilmente móveis em todo o portfólio do WebSphere Application Server.

Mais detalhes sobre os recursos e funções da Community Edition podem ser vistos no Web site de documentação, que apresenta as informações em 11 idiomas. (Consulte Recursos para obter mais informações).

Como criar uma página JSF com capacidade de tradução

O aplicativo mostrado neste tutorial fornecerá funções de tradução para o usuário. O usuário cola texto em um componente ice:textarea, escolhe um idioma para o texto original através do (ice:selectOneMenu), escolhe um idioma de destino para o texto, clica em ice:commandButton, e finalmente recebe o texto traduzido (mostrado em ice:outputText).

A lógica do aplicativo exige a implementação no backing bean.

O aplicativo neste tutorial consiste de uma caixa de texto para digitar o texto, alguns botões, e um campo de texto de saída. Essa lógica pode ser facilmente incorporada em um aplicativo mais complexo. A Figura 1 mostra o layout básico.

Figura 1. A página principal do aplicativo
A screenshot of the tutorial application in a browser, with a large text-entry box labeled 'Text to translate:' followed by two drop boxes for language selection, currently showing 'FRENCH' and 'ENGLISH' and two buttons labeled 'reset' and 'translate.'
A screenshot of the tutorial application in a browser, with a large text-entry box labeled 'Text to translate:' followed by two drop boxes for language selection, currently showing 'FRENCH' and 'ENGLISH' and two buttons labeled 'reset' and 'translate.'

Dentro deste tutorial, você construirá o aplicativo ICEfaces chamado Google Translate a partir do código de origem e o implementará em um servidor Community Edition local. Algum código adicional pode ser necessário para suportar determinados idiomas, mas o exemplo serve para mostrar os componentes básicos do ICEfaces e a API do Google Translate.

A operação geral do aplicativo ICEfaces Google Translate é:

  1. O usuário digita o texto a ser traduzido usando o teclado no componente ice:inputTextArea.
  2. Abaixo da ice:inputTextArea, há listas suspensas chamadas ice:selectOneMenu no ICEfaces que, quando selecionadas, adicionam parâmetros de idioma para a função de tradução da API do Google que foi implementada no backing bean.
  3. No canto superior direito há dois botões. O primeiro, Reset, limpa os dados antigos do componente ice:textArea para reconfigurar algumas variáveis no backing bean. O segundo botão, Translate, serve como um acionador que executa a ação de tradução.
  4. Após a execução da tradução, o resultado é mostrado na página com o ice:outputText. O texto traduzido será também destacado usando o efeito Highlight do ICEfaces.

A Figura 2 mostra esse processo.

Figura 2. O aplicativo de tutorial Translate em ação
A screenshot of the                    tutorial application in a browser, with a large text-entry box labeled                    'Text to translate:' followed by two drop boxes for language selection,                    currently showing 'FRENCH' and 'ENGLISH' and two buttons labeled                    'reset' and 'translate.' There is French wording in the Text to                    translate box, and it's translated to English in the translated text                    box.
A screenshot of the tutorial application in a browser, with a large text-entry box labeled 'Text to translate:' followed by two drop boxes for language selection, currently showing 'FRENCH' and 'ENGLISH' and two buttons labeled 'reset' and 'translate.' There is French wording in the Text to translate box, and it's translated to English in the translated text box.

Essas três etapas nesse tutorial estão organizadas na estrutura de diretórios mostrada na Figura 3. Ao trabalhar no tutorial, é assumido que você tenha familiaridade com a configuração do seu ambiente para ICEfaces, para assegurar que o seu ambiente seja configurado adequadamente para implementar e executar aplicativos ICEfaces em seu servidor de aplicativos J2EE. Para obter mais detalhes, veja a documentação para o seu ambiente e consulte a documentação do ICEfaces (consulte Recursos).

Figura 3. O aplicativo ICEFacesAndGoogleTranslate no explorador de projetos
A directory                    tree showing ICEFacesAndGoogleTranslate subdirectories
A directory tree showing ICEFacesAndGoogleTranslate subdirectories

Etapa 1. Como criar o aplicativo JSF

A primeira etapa é criar uma versão normal do aplicativo da Web Google Translate no JavaServer Faces (JSF) usando componentes padrão do JSF. Todos os arquivos para esta parte do tutorial estão localizados no diretório WebContent.

A primeira iteração do aplicativo Google Translate tem um componente panelGroup na parte superior para comportar o panelDivider que divide a página em duas partes. A primeira parte contém:

  • Um componente outputText, que é usado como um rótulo
  • Um componente inputTextArea para entrada do texto do usuário
  • Dois controles de IU selectOneMenu para selecionar os idiomas de origem e destino
  • Um componente graphicImage para definir uma seta

A segunda parte tem:

  • Dois componentes outputText (um usado como Rótulo, enquanto que o segundo mostra o texto traduzido)
  • Dois controles de IU commandButton. Um para reiniciar, o segundo para traduzir

A Listagem 1 mostra o código da página main.jspx.

Listagem 1. Página main.jspx
<?xml version="1.0" encoding="UTF-8" ?>
<jsp:root version="1.2" xmlns:jsp="http://java.sun.com/JSP/Page"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ice="http://www.icesoft.com/icefaces/component">
	<jsp:directive.page contentType="text/html;charset=UTF-8"
		pageEncoding="UTF-8" />
<f:view>
	<ice:outputDeclaration doctypeRoot="HTML"
		doctypePublic="-//W3C//DTD HTML 4.01 Transitional//EN"
		doctypeSystem="http://www.w3.org/TR/html4/loose.dtd" />
	<html>
	<head>
	<title><ice:outputText value="Translate Tutorial" /></title>
	<ice:outputStyle href="./xmlhttp/css/xp/xp.css" />
	</head>
	<body>
	<ice:outputText value="Welcome to Translate Tutorial" />
	<ice:form partialSubmit="true">
		<ice:messages />
	<ice:panelGroup id="pnlGrp" >
	<ice:panelDivider id="pnlDiv" orientation="vertical"
		style="width:100%;">
		<f:facet name="first">
			<ice:panelGrid id="firstPartTrsltPnlGrp" columns="1"
						style="padding: 10px;width: 100%" >
			<ice:outputText id="outTxtTrnslt" value="Text to translate:"
						style="line-height:2em;"  />
			<ice:inputTextarea id="inputTextTrnslt" style="width:100%"
						cols="20" rows="5" partialSubmit="true"
						value="#{translate.text}" >
			</ice:inputTextarea>
			<ice:panelGroup id="menues" style="width:100%" >
			<ice:selectOneMenu id="slcOnMenuOrigLang"
				   value="#{translate.selectedOriginalLanguage}"  
                           valueChangeListener="#{translate.originalLangChanged}">
					<f:selectItems  
                                   value="#{translate.ORIGINAL_LANGUAGES}" />
			</ice:selectOneMenu>
			<ice:graphicImage id="imgArrowRight"
						url="/images/arr_ani_01e.gif">
			</ice:graphicImage>
			<ice:selectOneMenu id="slcOnMenuTrasltLang" 
                          value="#{translate.selectedTranslatedLanguage}" 
                          valueChangeListener="#{translate.translateLangChanged}">
			   <f:selectItems value="#{translate.TRANSLATION_LANGUAGES}"  />
			</ice:selectOneMenu>
			</ice:panelGroup>
			</ice:panelGrid>
		</f:facet>
      	<f:facet name="second">
			<ice:panelGroup id="secPartPblGrp" style="padding: 10px;">
				<ice:outputText id="trnsltTxt" value="Translated text"
								style="line-height:2em" />
				<ice:panelGrid id="scndPartTrnsltTxtPnlGrd" columns="1">
						<ice:outputText id="outPtTxtScndPrt"
						      value="#{translate.outputText}"  
                                         effect="#{translate.textEffect}">
						</ice:outputText>
				<ice:panelGrid id="pnlGrdButtonsSecondPart" columns="2">
					<ice:commandButton id="btnResetScndPart" 
                                       value="reset"
     				         actionListener="#{translate.resetAll}" />
					<ice:commandButton id="btnTranslitScndPart" 
                                      value="translate"
	                               actionListener="#{translate.updateText}" />
				</ice:panelGrid>
				</ice:panelGrid>
			</ice:panelGroup>
		</f:facet>
	</ice:panelDivider>
	</ice:panelGroup>
	</ice:form>
	</body>
	</html>
</f:view>
</jsp:root>

A maioria dos componentes é ligada dinamicamente a backing JavaBeans através de ligações de linguagem de expressão do JSF, conforme mostrado na Listagem 2.

Listagem 2. Componentes ligados a backing JavaBeans
value="#{translate.outputText}"
value="#{translate.selectedOriginalLanguage}"
valueChangeListener="#{translate.originalLangChanged}"
value="#{translate.ORIGINAL_LANGUAGES}"
value="#{translate.selectedTranslatedLanguage}" 
valueChangeListener="#{translate.translateLangChanged}"
value="#{translate.TRANSLATION_LANGUAGES}"
value="#{translate.outputText}"
effect="#{translate.textEffect}"
actionListener="#{translate.resetAll}"
actionListener="#{translate.updateText}"

Etapa 2. Como criar o backing JavaBean (GoogleTranslate.java)

A classe com.ibm.translate.GoogleTranslate é o backing bean para a página main.jspx. O bean armazena o estado atual das seleções e todas as informações de tradução do Google.

A Listagem 3 mostra o código da classe GoogleTranslate.java.

Listagem 3. GoogleTranslate.java
public class GoogleTranslate {
private Hashtable languages = new Hashtable();
private Hashtable langLabels = new Hashtable();
private Effect textEffect;
protected SelectItem[] ORIGINAL_LANGUAGES;
protected SelectItem[] TRANSLATION_LANGUAGES;

public void updateText(ActionEvent event) throws 
Exception{
	if(this.getText().length() > 1 ){
		this.setOutputText(translate(getText()));
	}
}
	
public void resetAll(ActionEvent event){
	this.setText("");
	this.setOutputText("");
}

public String translate(String input) throws Exception{
	String out = "";
	if(input != null){
		out = Translate.translate(this.getText(), 
                     getSelectedOriginalLanguage(), 
                     getSelectedTranslatedLanguage());
		invokeTextEffect();
	}
	return out;
}

public SelectItem[] getORIGINAL_LANGUAGES() {
	if(ORIGINAL_LANGUAGES == null){
		this.setLanguages();
		this.setLangLabels();
		Enumeration en = this.languages.keys();
		Enumeration enLbls = this.langLabels.keys();

		ORIGINAL_LANGUAGES = new 
                              SelectItem[languages.size()];
	for (int i = 0; i < languages.size(); i++) {
		ORIGINAL_LANGUAGES[i] = new SelectItem(
         (String)this.langLabels.get(enLbls.nextElement()),                  
         (String) this.languages.get(en.nextElement()));
	}
	}
	return ORIGINAL_LANGUAGES;
}

public SelectItem[] getTRANSLATION_LANGUAGES() {
	if(TRANSLATION_LANGUAGES == null){
		this.setLanguages();
		this.setLangLabels();
		Enumeration en = this.languages.keys();
		Enumeration enLbls = this.langLabels.keys();
		TRANSLATION_LANGUAGES = new 
                              SelectItem[languages.size()];
	for (int i = 0; i < languages.size(); i++) {
        TRANSLATION_LANGUAGES[i] = new SelectItem(
        (String) this.langLabels.get(enLbls.nextElement()),  
        (String) this.languages.get(en.nextElement()));
		}
	}
	return TRANSLATION_LANGUAGES;
}

public void setLanguages() {
	this.languages.put(Language.ARABIC, "ARABIC");
	this.languages.put(Language.CHINESE_SIMPLIFIED, 
                                "CHINESE_SIMPLIFIED");
	this.languages.put(Language.CHINESE_TRADITIONAL, 
                                "CHINESE_TRADITIONAL");
	this.languages.put(Language.DUTCH, "DUTCH");
	this.languages.put(Language.ENGLISH, "ENGLISH");
	this.languages.put(Language.FRENCH, "FRENCH");
	this.languages.put(Language.GERMAN, "GERMAN");
	this.languages.put(Language.GREEK, "GREEK");
	this.languages.put(Language.ITALIAN, "ITALIAN");
	this.languages.put(Language.JAPANESE, "JAPANESE");
	this.languages.put(Language.KOREAN, "KOREAN");
	this.languages.put(Language.PORTUGESE, "PORTUGESE");
	this.languages.put(Language.RUSSIAN, "RUSSIAN");
	this.languages.put(Language.SPANISH, "SPANISH");
}

public void setLangLabels() {
	this.langLabels.put(new Integer(0), 
                                     Language.PORTUGESE);
	this.langLabels.put(new Integer(1),Language.KOREAN);
	this.langLabels.put(new Integer(2), 
                                        Language.JAPANESE);
	this.langLabels.put(new Integer(3), Language.SPANISH);
	this.langLabels.put(new Integer(4), Language.GERMAN);
	this.langLabels.put(new Integer(5), Language.FRENCH);
	this.langLabels.put(new Integer(6), Language.ITALIAN);
	this.langLabels.put(new Integer(7), 
                              Language.CHINESE_SIMPLIFIED);
	this.langLabels.put(new Integer(8), Language.ARABIC);
	this.langLabels.put(new Integer(9), Language.RUSSIAN);
	this.langLabels.put(new Integer(10),Language.GREEK);
	this.langLabels.put(new Integer(11), 
                                         Language.ENGLISH);
	this.langLabels.put(new Integer(12), Language.DUTCH);
	this.langLabels.put(new Integer(13), 
                             Language.CHINESE_TRADITIONAL);
	}
 }
}

O código completo para o exemplo do GoogleTranslate é fornecido como um download (consulte Recursos para download).

Agora, vamos dar uma olhada ao que está acontecendo em mais detalhes.

No início do backing bean, dois arrays SelectItem foram definidos.

OSelectItem representa um único item na lista de itens suportados associados com um componente UISelectMany ou UISelectOne. Neste caso, é um componente ice:selectOneMenu. Essa classe tem dois métodos que nos interessam. Um é o setLabel(Rótulo de cadeia de caracteres), que define o rótulo deste item para ser renderizado de forma visível para o usuário. O segundo é setValue(Valor de objeto), que define o valor deste item a ser entregue para o modelo, se este item for selecionado pelo usuário.

Para cada membro da classe GoogleTranslate, é necessário gerar seus getters e setters. O Eclipse fornece uma função para fazer isso. Use a função "Generate Getters and Setters" no menu Source ou no menu Context em um campo, tipo ou seleção de texto em um tipo selecionado para abrir a janela. A janela "Generate Getters and Setters" mostra getters e setters para todos os campos do tipo selecionado. Os métodos são agrupados pelos campos do tipo. Os nomes dos métodos getter e setter são derivados do nome do campo. Ao pressionar OK, todos os getters e setters selecionados são criados.

No meu código, há duas hashtables. Como mencionado anteriormente, o componente selectOneMenu usa um array SelectItem, usado pela hashtable de idioma para definir valores para ORIGINAL_LANGUAGES ou TRANSLATION_LANGUAGES.

A hashtable langLabels é usada para configurar os rótulos do array SelectItem.

Quando um usuário selecionar um idioma, este é passado para a função de tradução da API do Google.

Nota: Existe também outra abordagem. Em vez de usar duas hashtables, seria usado um dicionário com chaves e valores que poderiam ser armazenados como String[]. Para fazer isso, seria necessário implementar essa estrutura de dados.

O exemplo aqui usa um efeito Highlight que inicia depois que alguma informação tenha sido alterada ou enviada. O valor do backing bean será destacado para um inputText. O texto enviado no componente inputText aparece em um painel e é destacado.

Etapa 3. Como criar arquivos web.xml e faces-config.xml

O arquivo web.xml fornece informações de configuração e implementação para os componentes da Web que compreendem um aplicativo da Web. Ele deve residir no diretório WEB-INF sob o contexto da hierarquia de diretórios que existe para um aplicativo da Web.

A Listagem 4 mostra o arquivo web.xml.

O arquivo faces-config.xml é o arquivo de configuração do JavaServer Faces. Este arquivo lista os recursos e regras de navegação do bean. A Listagem 5 mostra o código para o arquivo faces-config.xml.

Listagem 5. O arquivo faces-config.xml
<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE faces-config PUBLIC
    "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN"
    "http://java.sun.com/dtd/web-facesconfig_1_1.dtd">

<faces-config>
	<managed-bean>
		<managed-bean-name>translate</managed-bean-name>
		<managed-bean-class>
                                    com.ibm.translate.GoogleTranslate
               </managed-bean-class>
		<managed-bean-scope>request</managed-bean-scope>
	</managed-bean>
</faces-config>

Conclusão

Este tutorial forneceu os componentes básicos para construir um componente de tradução simples usando a API do Google Translate. Após montar o código em seu projeto, deve ser possível executá-lo e implementá-lo como qualquer aplicativo da Web. A partir daí, seria fácil construir em torno desse código para traduzir texto colado, ou fornecer traduções instantâneas de informações dentro de seu aplicativo da Web. Explore as possibilidades e entre em contato comigo com questões ou sugestões.


Recursos para download


Temas relacionados


Comentários

Acesse ou registre-se para adicionar e acompanhar os comentários.

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=80
Zone=Tecnologia Java
ArticleID=432432
ArticleTitle=ICEfaces e o Google Translate
publish-date=09082009