Si desarrolla una aplicación de cliente enriquecido RCP, tarde o temprano tendrá que conocer algún diseño para organizar los widgets en su vista. Este ejemplo de código requiere que tenga una aplicación RCP con una vista. A continuación se explica cómo crear una aplicación RCP con una vista.
Este tutorial trata sobre el diseño más potente y flexible: GridLayout.
Diseño de cuadrícula
GridLayout es un diseño de uso frecuente para aplicaciones de eclipse RCP, puede diseñar sus widgets en una cuadrícula bien formada. Como su nombre, GridLayout separa la vista en una cuadrícula y coloca cada componente en una cuadrícula.
El objetivo de este ejemplo de código tiene el siguiente aspecto:
Este es un diseño compuesto integrado típico. El compuesto inferior («superior») es un GridLayout. Por supuesto, puede agregar directamente al compuesto principal o incluso agregar más capas de compuesto.
public void createPartControl(Composite parent) { Composite top = new Composite(parent, SWT.NONE); top.setLayoutData(new GridData(GridData.HORIZONTAL_ALIGN_FILL, GridData.VERTICAL_ALIGN_BEGINNING, true, false)); GridLayout layout = new GridLayout(); layout.marginHeight = 5; layout.marginWidth = 5; // the number of pixels of vertical margin that will be placed along // the top and bottom edges of the layout. layout.makeColumnsEqualWidth = true;// make each column have same width layout.numColumns = 4; // number of columns layout.verticalSpacing = 10; top.setLayout(layout); new Button(top, SWT.PUSH).setText("B1"); new Button(top, SWT.PUSH).setText("B 2"); new Button(top, SWT.PUSH).setText("Button 3"); new Button(top, SWT.PUSH).setText("B4"); new Button(top, SWT.PUSH).setText("Button 5"); new Button(top, SWT.PUSH).setText("Button 6"); new Button(top, SWT.PUSH).setText("B7"); new Button(top, SWT.PUSH).setText("Wide Button 8"); new Button(top, SWT.PUSH).setText("Button 9"); new Button(top, SWT.PUSH).setText("B10"); final Text text = new Text(top, SWT.MULTI | SWT.WRAP); text.setText("a text area"); GridData gridData = new GridData(); // here like the banner, text is added to "top". text.setText("a text area"); gridData = new GridData(); gridData.horizontalAlignment = GridData.FILL; gridData.verticalAlignment = GridData.FILL; gridData.horizontalSpan = 4; gridData.grabExcessVerticalSpace = true; gridData.grabExcessHorizontalSpace = true; text.setLayoutData(gridData); } |
Puede consultar la referencia para ver más campos disponibles de GridLayout a los que puede asignar diferentes valores.
Es trivial simplemente agregar esos componentes / widgets a su vista, pero ¿qué pasa si quiero omitir algunas celdas y dejarlas vacías?
Para omitir una celda en una cuadrícula, puede simplemente agregar una etiqueta vacía a la cuadrícula para omitir, como la siguiente:
new Label(banner, SWT.SINGLE); |
Aparentemente, esta no es la forma correcta de omitir una celda, aunque funciona muy bien. Para hacerlo correctamente, necesitamos otra clase llamada GridData.
GridData
GridData es el objeto de datos de diseño que se utiliza dentro de GridLayout. La regla para GridData es que cada componente / widget en un GridLayout debe tener un objeto GridData único. Es decir, el objeto GridData no se puede compartir entre diferentes widgets aunque sean exactamente iguales. Para configurar el objeto GridData de un widget, podemos usar el método setLayoutData.
En el siguiente examen, el botón «B10» está configurado para abarcar 2 celdas horizontalmente. Si deja que este botón se alinee a la izquierda, la siguiente celda se esquiará / estará vacía.
GridData gridData = new GridData(); gridData.horizontalAlignment = GridData.FILL; gridData.horizontalSpan = 2; button.setLayoutData(gridData); |
horizontalAlignment también podría ser GridData.BEGINNING, GridData.CENTER y GridData.END.
horizontalSpan extiende la celda a 2 celdas desde la celda actual horizontalmente.
Esto es lo mismo para la alineación vertical y verticalSpan, que utilizan los siguientes campos.
gridData.verticalAlignment = GridData.FILL; gridData.verticalSpan = 2; |
Nota: verticalSpan abarca celdas de la primera fila a la segunda fila, el vicio no funciona.
También podemos permitir que el tamaño del widget cambie o no si se arrastra el tamaño de la ventana para agrandarla. Por ejemplo, es posible que desee que el tamaño del área de texto cambie de acuerdo con el tamaño de la ventana. Esto se puede lograr simplemente usando los dos campos siguientes.
gridData.grabExcessVerticalSpace = true; gridData.grabExcessHorizontalSpace = true; |
El siguiente ejemplo permite que el «Botón 6» crezca horizontal y verticalmente, pero «B10» crezca solo horizontalmente. Al comparar el código a continuación, la razón se puede averiguar fácilmente. Los demás botones se quedaron con sus tamaños originales, ya que no añadimos nada relacionado con el agarre de espacio.
GridData gridData = new GridData(); gridData.horizontalAlignment = GridData.FILL; gridData.horizontalSpan = 2; gridData.grabExcessVerticalSpace = true; gridData.grabExcessHorizontalSpace = true; button.setLayoutData(gridData); gridData = new GridData(); gridData.verticalAlignment = GridData.FILL; gridData.horizontalAlignment = GridData.FILL; gridData.verticalSpan = 2; gridData.grabExcessVerticalSpace = true; gridData.grabExcessHorizontalSpace = true; b6.setLayoutData(gridData); |
Muchos otros diseños sofisticados son solo varias combinaciones de diferentes valores de los campos anteriores. La buena manera de resolverlo es comenzar con un proyecto y optimizar el diseño una y otra vez. Esta es exactamente la misma forma en que optimizamos el diseño CSS para la página web.
Es posible que sienta curiosidad por saber cómo cambiar el tamaño de las ventanas, esto está fuera del control del diseño.
Referencia:
1. Documento de GridLayout de eclipse
2. Documento GridData de eclipse
