GWT - Widgets personalizados
GWT ofrece tres formas de crear elementos de interfaz de usuario personalizados. Hay tres estrategias generales a seguir:
Create a widget by extending Composite Class- Esta es la forma más común y sencilla de crear widgets personalizados. Aquí puede utilizar los widgets existentes para crear una vista compuesta con propiedades personalizadas.
Create a widget using GWT DOM API in JAVA- Los widgets básicos de GWT se crean de esta manera. Aún así, es una forma muy complicada de crear un widget personalizado y debe usarse con precaución.
Use JavaScript and wrap it in a widget using JSNI- Por lo general, esto solo debe hacerse como último recurso. Teniendo en cuenta las implicaciones de los métodos nativos en varios navegadores, se vuelve muy complicado y también más difícil de depurar.
Crear widget personalizado con clase compuesta
Este ejemplo lo llevará a través de sencillos pasos para mostrar la creación de un widget personalizado en GWT. Siga los siguientes pasos para actualizar la aplicación GWT que creamos en GWT - Capítulo de Widgets básicos -
Aquí vamos a crear un widget personalizado ampliando la clase Composite, que es la forma más sencilla de crear widgets personalizados.
Paso | Descripción |
---|---|
1 | Cree un proyecto con un nombre HelloWorld en un paquete com.tutorialspoint como se explica en el capítulo GWT - Crear aplicación . |
2 | Modifique HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html y HelloWorld.java como se explica a continuación. Mantenga el resto de los archivos sin cambios. |
3 | Compile y ejecute la aplicación para verificar el resultado de la lógica implementada. |
A continuación se muestra el contenido del descriptor de módulo modificado src/com.tutorialspoint/HelloWorld.gwt.xml.
<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
<!-- Inherit the core Web Toolkit stuff. -->
<inherits name = 'com.google.gwt.user.User'/>
<!-- Inherit the default GWT style sheet. -->
<inherits name = 'com.google.gwt.user.theme.clean.Clean'/>
<!-- Specify the app entry point class. -->
<entry-point class = 'com.tutorialspoint.client.HelloWorld'/>
<!-- Specify the paths for translatable code -->
<source path = 'client'/>
<source path = 'shared'/>
</module>
A continuación se muestra el contenido del archivo de hoja de estilo modificado war/HelloWorld.css.
body {
text-align: center;
font-family: verdana, sans-serif;
}
h1 {
font-size: 2em;
font-weight: bold;
color: #777777;
margin: 40px 0px 70px;
text-align: center;
}
A continuación se muestra el contenido del archivo de host HTML modificado war/HelloWorld.html.
<html>
<head>
<title>Hello World</title>
<link rel = "stylesheet" href = "HelloWorld.css"/>
<script language = "javascript" src = "helloworld/helloworld.nocache.js">
</script>
</head>
<body>
<h1>Custom Widget Demonstration</h1>
<div id = "gwtContainer"></div>
</body>
</html>
Tengamos el siguiente contenido del archivo Java src/com.tutorialspoint/HelloWorld.java que demostrará la creación de un widget personalizado.
package com.tutorialspoint.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.CheckBox;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
public class HelloWorld implements EntryPoint {
/**
* A composite of a TextBox and a CheckBox that optionally enables it.
*/
private static class OptionalTextBox extends Composite implements
ClickHandler {
private TextBox textBox = new TextBox();
private CheckBox checkBox = new CheckBox();
private boolean enabled = true;
public boolean isEnabled() {
return enabled;
}
public void setEnabled(boolean enabled) {
this.enabled = enabled;
}
/**
* Style this widget using .optionalTextWidget CSS class.<br/>
* Style textbox using .optionalTextBox CSS class.<br/>
* Style checkbox using .optionalCheckBox CSS class.<br/>
* Constructs an OptionalTextBox with the given caption
* on the check.
* @param caption the caption to be displayed with the check box
*/
public OptionalTextBox(String caption) {
// place the check above the text box using a vertical panel.
HorizontalPanel panel = new HorizontalPanel();
// panel.setBorderWidth(1);
panel.setSpacing(10);
panel.add(checkBox);
panel.add(textBox);
// all composites must call initWidget() in their constructors.
initWidget(panel);
//set style name for entire widget
setStyleName("optionalTextWidget");
//set style name for text box
textBox.setStyleName("optionalTextBox");
//set style name for check box
checkBox.setStyleName("optionalCheckBox");
textBox.setWidth("200");
// Set the check box's caption, and check it by default.
checkBox.setText(caption);
checkBox.setValue(enabled);
checkBox.addClickHandler(this);
enableTextBox(enabled,checkBox.getValue());
}
public void onClick(ClickEvent event) {
if (event.getSource() == checkBox) {
// When the check box is clicked,
//update the text box's enabled state.
enableTextBox(enabled,checkBox.getValue());
}
}
private void enableTextBox(boolean enable,boolean isChecked){
enable = (enable && isChecked) || (!enable && !isChecked);
textBox.setStyleDependentName("disabled", !enable);
textBox.setEnabled(enable);
}
}
public void onModuleLoad() {
// Create an optional text box and add it to the root panel.
OptionalTextBox otb = new OptionalTextBox(
"Want to explain the solution?");
otb.setEnabled(true);
RootPanel.get().add(otb);
}
}
Una vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación en modo de desarrollo como hicimos en el capítulo GWT - Crear aplicación . Si todo está bien con su aplicación, esto producirá el siguiente resultado:
You can notice following points
La creación de un widget personalizado ampliando el widget compuesto es bastante fácil.
Hemos creado un widget con widgets incorporados de GWT, TextBox y CheckBox, utilizando así el concepto de reutilización.
TextBox se deshabilita / habilita según el estado de la casilla de verificación. Hemos proporcionado una API para habilitar / deshabilitar el control.
Hemos expuesto estilos de widgets internos a través de estilos CSS documentados.