GWT - Widget VerticalSplitPanel

Introducción

los VerticalSplitPanelwidget representa un panel que organiza dos widgets en una sola columna vertical y permite al usuario cambiar interactivamente la proporción de la altura dedicada a cada uno de los dos widgets. Los widgets contenidos en VerticalSplitterPanel se decorarán automáticamente con barras de desplazamiento cuando sea necesario.

Declaración de clase

A continuación se muestra la declaración de com.google.gwt.user.client.ui.VerticalSplitPanel clase -

@Deprecated
public final class VerticalSplitPanel
   extends Panel

Reglas de estilo CSS

Las siguientes reglas de estilo CSS predeterminadas se aplicarán a todo el widget VerticalSpiltPanel. Puede anularlo según sus requisitos.

.gwt-VerticalSplitPanel { }

.gwt-VerticalSplitPanel vsplitter { }

Constructores de clases

No Señor.	Constructor y descripción
1	VerticalSplitPanel() Obsoleto.
2	VerticalSplitPanel(VerticalSplitPanel.Resources resources) Obsoleto. Crea un panel dividido vertical vacío.
3	VerticalSplitPanel(VerticalSplitPanelImages images) Obsoleto. reemplazado por VerticalSplitPanel (Recursos)

Métodos de clase

No Señor.	Nombre y descripción de la función
1	void add(Widget w) Obsoleto. Agrega un widget a un panel en HorizontalSplitPanel.
2	protected Element getElement(int index) Obsoleto. Obtiene el elemento de contenido para el índice dado.
3	Widget getEndOfLineWidget() Obsoleto. Obtiene el widget en el panel que se encuentra al final de la dirección de la línea para el diseño.
4	Widget getBottomWidget() Obsoleto. Obtiene el widget en la parte inferior del panel.
5	Widget getTopWidget() Obsoleto. Obtiene el widget en la parte superior del panel.
6	protected Element getSplitElement() Obsoleto. Obtiene el elemento que actúa como divisor.
7	Widget getStartOfLineWidget() Obsoleto. Obtiene el widget en el panel que se encuentra al comienzo de la dirección de la línea para el diseño.
8	protected Widget getWidget(int index) Obsoleto. Obtiene uno de los widgets contenidos.
9	boolean isResizing() Obsoleto. Indica si se está cambiando el tamaño del panel dividido.
10	java.util.Iterator<Widget> iterator() Obsoleto. Obtiene un iterador para los widgets contenidos.
11	void onBrowserEvent(Event event) Obsoleto. Se activa cada vez que se recibe un evento del navegador.
12	protected void onEnsureDebugId(java.lang.String baseID) Obsoleto. Elementos afectados: -splitter = el contenedor que contiene el elemento divisor. -derecha = el contenedor en el lado derecho del divisor. -izquierda = el contenedor en el lado izquierdo del divisor.
13	protected void onLoad() Obsoleto. Este método se llama inmediatamente después de que un widget se adjunta al documento del navegador.
14	protected void onUnload() Obsoleto. Este método se llama inmediatamente antes de que un widget se separe del documento del navegador.
15	boolean remove(Widget widget) Obsoleto. Elimina un widget secundario.
dieciséis	void setEndOfLineWidget(Widget w) Obsoleto. Establece el widget en el panel que se encuentra al final de la dirección de la línea para el diseño.
17	void setBottomWidget(Widget w) Obsoleto. Establece el widget en la parte inferior del panel.
18	void setTopWidget(Widget w) Obsoleto. Establece el widget en la parte superior del panel.
19	void setSplitPosition(java.lang.String pos) Obsoleto. Mueve la posición del divisor.
20	void setStartOfLineWidget(Widget w) Obsoleto. Establece el widget en el panel que se encuentra al comienzo de la dirección de la línea para el diseño.
21	protected void setWidget(int index, Widget w) Obsoleto. Establece uno de los widgets contenidos.

Métodos heredados

Esta clase hereda métodos de las siguientes clases:

com.google.gwt.user.client.ui.UIObject
com.google.gwt.user.client.ui.Widget
com.google.gwt.user.client.ui.Panel
java.lang.Object

Ejemplo de widget VerticalSplitPanel

Este ejemplo lo llevará a través de sencillos pasos para mostrar el uso de un widget VerticalSplitPanel en GWT. Siga los siguientes pasos para actualizar la aplicación GWT que creamos en GWT - Capítulo Crear aplicación -

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>VerticalSplitPanel Widget Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

Tengamos el siguiente contenido del archivo Java src/com.tutorialspoint/HelloWorld.java que demostrará el uso del widget VerticalSplitPanel.

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.CheckBox;
import com.google.gwt.user.client.ui.DecoratorPanel;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.VerticalSplitPanel;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;

public class HelloWorld implements EntryPoint {

   public void onModuleLoad() {
      // Create a Vertical Split Panel
      VerticalSplitPanel verticalSplitPanel = new VerticalSplitPanel();
      verticalSplitPanel.setSize("300px", "200px");
      verticalSplitPanel.setSplitPosition("35%");

      // Add some content
      String randomText = "This is a sample text.";
      for (int i = 0; i < 2; i++) {
         randomText += randomText;
      }
      verticalSplitPanel.setBottomWidget(new HTML(randomText));
      verticalSplitPanel.setTopWidget(new HTML(randomText));

      DecoratorPanel decoratorPanel = new DecoratorPanel();
      decoratorPanel.add(verticalSplitPanel);
      // Add the widgets to the root panel.
      RootPanel.get().add(decoratorPanel);
   }
}

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:

↰ Previous page