Bienvenido a la serie de tutoriales de GWT.
En este tutorial, primero crearé una aplicación ajax muy simple sin ninguna comunicación con el servidor o la base de datos, luego expandiré la aplicación con la base de datos y RPC. Finalmente, será una aplicación GWT completamente funcional: Quick Notes. Google App Engine es gratuito, por lo que la aplicación está activa para que la eches un vistazo. http://udnotes.appspot.com/
La aplicación de muestra finalmente se ve así.
1. Aplicación de ejemplo de GWT (1)
2. Aplicación de ejemplo de GWT (2)
3. Aplicación de ejemplo de GWT (3)
Para crear una aplicación GWT, principalmente 3 partes, sería difícil de entender para los nuevos usuarios:
- Cree un código del lado del cliente. Se trata de una sencilla implementación de la aplicación GUI. En lugar de usar Swing Component, usa Component de GWT.
- Comunicarse con el servidor con RPC. Aquí está la parte que requiere más atención.
- Datos de usuario de Google DataStore. La parte genial está aquí.
1. Información general.
Google Web Toolkit (GWT) es un conjunto de herramientas para desarrollar aplicaciones web Ajax utilizando Java. Una vez finalizado el código Java, el compilador GWT traduce el código Java a HTML y Javascript. En realidad, es una fuente de Java para un traductor de fuentes de JavaScript. El compilador crea HTML y JavaScript específicos del navegador para admitir correctamente todos los navegadores principales. GWT admite un conjunto estándar de widgets de interfaz de usuario, tiene soporte integrado para el botón de retroceso del navegador y un marco de prueba basado en JUnit.
2. Instale el complemento Eclipse para GWT.
Instale los complementos de http://dl.google.com/eclipse/plugin/3.6 a través del administrador de actualizaciones de Eclipse. Ayuda-> Instalar nuevo software-> Agregar este sitio y luego instalar.
3. Cree un proyecto de aplicación web de Google como este:
El paquete inicial generado automáticamente es así:
El directorio «cliente» es el lugar para colocar el código que se compila para el cliente (navegador web). Para el servicio, utilizaría el paquete «servidor». Para que podamos comenzar desde el principio, elimine todos los archivos en «cliente» y «servidor».
4. Desarrollo del lado del cliente
4.1. Punto de entrada.
Cree una clase para el punto de entrada «UDNotes».
public class UDNotes implements EntryPoint { private VerticalPanel mainPanel = new VerticalPanel(); private FlexTable notesFlexTable = new FlexTable(); private HorizontalPanel addPanel = new HorizontalPanel(); private TextArea newSymbolTextBox = new TextArea(); private Button addNoteButton = new Button("Add"); private Label lastUpdatedLabel = new Label(); private ArrayList<String> NotesNames = new ArrayList<String>(); private VerticalPanel loginPanel = new VerticalPanel(); public void onModuleLoad() { // Create table for Note data. notesFlexTable.setText(0, 0, "Note"); // set button's style addNoteButton.addStyleName("addButton"); // Assemble Add Note panel. addPanel.add(newSymbolTextBox); addPanel.add(addNoteButton); // Assemble Main panel. mainPanel.add(notesFlexTable); mainPanel.add(addPanel); mainPanel.add(lastUpdatedLabel); // Associate the Main panel with the HTML host page. RootPanel.get().add(mainPanel); // Move cursor focus to the input box. newSymbolTextBox.setWidth("300px"); newSymbolTextBox.setFocus(true); // Listen for mouse events on the Add button. addNoteButton.addClickHandler(new ClickHandler() { public void onClick(ClickEvent event) { Window.alert("Button Clicked"); } }); // Listen for keyboard events in the input box. newSymbolTextBox.addKeyPressHandler(new KeyPressHandler() { public void onKeyPress(KeyPressEvent event) { if (event.getCharCode() == KeyCodes.KEY_ENTER) { Window.alert("Key Pressed"); } } }); } } |
Configure el archivo UDNotes.gwt.xml en el paquete com.programcreek.tutorials.
<?xml version="1.0" encoding="UTF-8"?> <module rename-to='udnotes'> <!-- Inherit the core Web Toolkit stuff. --> <inherits name='com.google.gwt.user.User'/> <!-- Inherit the default GWT style sheet. You can change --> <!-- the theme of your GWT application by uncommenting --> <!-- any one of the following lines. --> <inherits name='com.google.gwt.user.theme.standard.Standard'/> <!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> --> <!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/> --> <!-- Other module inherits --> <!-- Specify the app entry point class. --> <entry-point class='com.programcreek.tutorials.client.UDNotes'/> <!-- Specify the paths for translatable code --> <source path='client'/> <source path='shared'/> </module> |
Cambie UDNotes.html en el directorio war y haga que contenga solo el siguiente código entre la etiqueta del cuerpo.
<body>
<!-- OPTIONAL: include this if you want history support -->
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
<!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
<noscript>
<div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
Your web browser must have JavaScript enabled
in order for this application to display correctly.
</div>
</noscript>
</body>
|
Implemente la aplicación en el motor de aplicaciones de Google.
Funcionará así:
Antes de implementar la aplicación en el motor de la aplicación, vaya al motor de la aplicación para crear un proyecto y asignar el ID correcto al proyecto.
