Eclipse RCP Creando clientes ricos con

la plataforma Eclipse

Martín Pérez Mariñánmartin@javahispano.org

Y este, ¿ quién es ?

• Martín Pérez es el responsable de contenidos del portal javaHispano.

• Arquitecto Java para la empresa DINSA Soluciones desarrollando su trabajo dentro del Hospital Juan Canalejo de A Coruña creando diversas aplicaciones en sistemas J2EE para entornos clínicos y de gestión.

• Sun Certified Programmer, Sun Certified Developer y Sun Certified Business Component Developer.

¿ Y estos de javaHispano ?

Índice1.Introducción a Eclipse2.Primeros pasos con SWT3.La librería de alto nivel JFace4.Otras APIs5.Eclipse Rich Client Platform (RCP)

Índice1.Introducción a Eclipse2.Primeros pasos con SWT3.La librería de alto nivel JFace4.Otras APIs5.Eclipse Rich Client Platform (RCP)

¿ Qué es Eclipse ?● Consorcio de software Eclipse.org● Comunidad formada por numerosas

empresas : IBM, Oracle, IONA, Borland, Red Hat, SuSE, HP, Intel...

● Eclipse IDE

– Entorno de desarrollo Open Source (CPL) cedido por IBM

– Eclipse 1.0 Noviembre 2001– 40$ million investidos por IBM– Multilenguaje ( Java, C++,

COBOL )– Muy potente: Coloreado de

sintaxis, completado de código, CVS, refactorizaciones, plantillas, etc.

¿ Qué es Eclipse ? (II)● Descargable desde

http://www.eclipse.org● Versión actual:

– Eclipse 2.1.0– Eclipse 3.0 Milestone 8

(recomendable)● Entorno de desarrollo basado en

plugins:

– J2EE– J2ME– MDA/UML– Diseño de interfaces de usuario– Acceso a base de datos– http://www.eclipse-plugins.info

DEMO

¿ Qué es Eclipse ? (III)● Multitud de productos comerciales

basados en Eclipse

– SAP, Rational, CISCO● Concurso de plugins

– GIS– ....

● Eclipse + GCJ = Entorno de desarrollo en Java totalmente libre

● La pregunta más común:

– ¿ En qué lenguaje está desarrollado Eclipse ?

● La respuesta menos esperada:

– ¡¡ JAVA !!

Índice1.Introducción a Eclipse2.Primeros pasos con SWT3.La librería de alto nivel JFace4.Otras APIs5.Eclipse Rich Client Platform (RCP)

SWT frente a Swing

● Ventajas frente a Swing– Mejor rendimiento– Mejor integración

● SWT ( Standard Widget Toolkit )– Librería de componentes gráficos y utilidades– Diseñado como alternativa a AWT/Swing– Utiliza componentes nativos de la plataforma

directamente● Si no hay un componente crea uno propio Java

– Se integra muy bien con el sistema operativo● Ej Windows: Soporte OLE, System Tray, ...

● Desventajas frente a Swing– Modelo MVC– Soporte de Look and Feel

Algunos ejemplos con SWT

Button b1 = new Button(outer, SWT.PUSH);Button b2 = new Button(outer, SWT.CHECK);Button b3 = new Button(outer, SWT.RADIO);b1.setText(“One”);b2.setText(“Two”);b3.setText(“Three”);

Label label1 = new Label(outer,SWT.NONE);label1.setText(“Usuario*”);Text text1 = new Text(outer, SWT.BORDER);Label label2 = new Label(outer, SWT.NONE);label2.setText(“Contraseña*”);Text text2 = new Text(outer, SWT.BORDER));text2.setEchoChar('*');

CCombo combo = new CCombo(outer, SWT.DROP_DOWN);combo.setItems(new String[]{“Line 1”, “Line 2”, “Line 3”, ..});

CoolBar cb = new CoolBar(outer, SWT.NONE);ToolBar tb = new ToolBar(cb,SWT.NONE);ToolItem item1 = new ToolItem(tb,SWT.PUSH);item1.setImage(new Image(...));ToolItem separator = new ToolItem(SWT.SEPARATOR);ToolItem item2 = new ToolItem(SWT.DROP_DOWN);item2.setImage(new Image(...));

List list1 = new List(outer, SWT.BORDER|SWT.MULTI);list1.setItems(new String[]{“Apples”,”Oranges”..};

Tree tree1 = new Tree(outer, SWT.BORDER | SWT.MULTI | SWT.CHECK);TreeItem node1 = new TreeItem(tree1,SWT.NONE);node1.setText(“....”);node1.setImage(new Image(...));

Table table1 = new Table(outer, SWT.BORDER);TableColumn col1 = new TableColumn(table1,SWT.NONE);TableItem item1 = new TableItem(col1,SWT.NONE);item1.setText(“...”);item1.setImage(“...”);

Algunos ejemplos con SWT (II)

DirectoryDialog dd = new DirectoryDialog(outer,SWT.MODELESS);FileDialog fid = new FileDialog(outer, SWT.PRIMARY_MODAL | SWT.OPEN);FontDialog fod = new FontDialog(outer, SWT.APPLICATION_MODAL);PrintDialog pd = new PrintDialog(outer, SWT.SYSTEM_MODAL);ColorDialog cd = new ColorDialog(outer, SWT.MODELESS);

Algunos ejemplos con SWT (III)

Texto con estilo Solapas

Arboles-Tabla Barras de progreso

Escalas y barra de desplazamiento

Mensajes

Algunos ejemplos con SWT (IV)

Integración con el sistema operativo:

Algunos ejemplos con SWT (V)

Índice1.Introducción a Eclipse2.Primeros pasos con SWT3.La librería de alto nivel JFace4.Otras APIs5.Eclipse Rich Client Platform (RCP)

Introducción a JFace ● JFace

– Librería de alto nivel construida sobre SWT– Simplifica tareas de programación comunes

● Preferencias● Diálogos● Acciones ( Actions )● Asistentes ( Wizards )

– Muy recomendable su uso.– Pone orden en el desarrollo con SWT

● Tree -> TreeViewer● Table -> TableViewer● List ->ListViewer● TableTree -> TableTreeViewer

SWT

Jface

Eclipse Workbench

Acciones : org.eclipse.jface.action.Action

public class CopyAction extends Action implements ISelectionDispatchAction {

public boolean checkEnabled(IStructuredSelection selection) { if ( canCopy(selection.getFirstElement()) return true; return false; } public void run(IStructuredSelection selection) { // Copiar elemento } ........}

Selección

●Implementan el patrón Command●Reutilización de acciones●Integración con eventos de selección

Algunos ejemplos con JFace

Algunos ejemplos con JFace (II)

Visores : org.eclipse.jface.viewers.*Viewer Eventos de selección

ContentViewer

ContentProvider

LabelProvider

Gestión del contenido

Renderizado en pantalla

StructuredViewer

ViewerSorter

ViewerFilter

Ordenación de los elementos

Filtrado de los elementos

ListViewer Tableviewer AbstractTreeViewer

TableTreeViewer TreeViewer

Drag & Drop

Visores : org.eclipse.jface.viewers.* ( El resultado )

// Muestra documentos asociados a una categoría determinadapublic void setInput(Category category) {

this.category = category;if (category != null) {

viewer.setInput(category);} else {

viewer.setInput(null);}

}

Algunos ejemplos con JFace (III)

Visores : org.eclipse.jface.viewers.* ( ContentProvider )public class DocumentsContentProvider implements IStructuredContentProvider {

public Object[] getElements(Object inputElement) {

return (Document[])((Category)inputElement).getDocuments();}

public void inputChanged(Viewer viewer, Object oldInput, Object newInput) {

// Capturar y tratar eventos de cambio en el modelo}

}

Ejemplo:TableViewer viewer = new TableViewer(parent, SWT.BORDER | SWT.FULL_SELECTION);viewer.setContentProvider(new DocumentsContentProvider());viewer.setLabelProvider(new DocumentsLabelProvider());

TableColumn column = new TableColumn(viewer.getTable(), SWT.NONE);column.setWidth(20);column = new TableColumn(viewer.getTable(), SWT.NONE);column.setWidth(20);column = new TableColumn(viewer.getTable(), SWT.NONE);column.setWidth(120);column.setText("nombre");column = new TableColumn(viewer.getTable(), SWT.NONE);column.setText("repositorio");column.setWidth(80);column = new TableColumn(viewer.getTable(), SWT.NONE);column.setText("localización");column.setWidth(200);column = new TableColumn(viewer.getTable(), SWT.NONE);column.setText("descripción");column.setWidth(220);

getViewSite().setSelectionProvider(viewer);

Proveedor de selección. Al registraracciones con este proveedor, cada vez que se seleccione una fila se activarán/desactivarán las acciones

Establecemos los proveedores decontenido y de renderizado para el visor de tabla

Algunos ejemplos con JFace (IV)

Visores : org.eclipse.jface.viewers.* ( LabelProvider )public class DocumentsLabelProvider implements ITableLabelProvider {

public String getColumnText(Object element, int columnIndex) {Document document = (Document)element;switch(columnIndex) {

case 0 : return "";case 1 : return "";case 2 :

return document.getName();case 3 :

return document.getRepository().getName();case 4 :

return document.getPath();case 5 :

return document.getDescription();}return "";

}public Image getColumnImage(Object element, int columnIndex) {

Document document = (Document)element;

if (columnIndex == 0) {// Devolver imagen con la importancia del documento

} else if (columnIndex == 1) {// Devolver imagen de un favorito

} else if (columnIndex == 2) {return document.getImage();

} else if (columnIndex == 3) {return document.getRepository().getImage();

}return SharedImages.getImage(SharedImages.IMAGE_EMPTY);

}}

Algunos ejemplos con Jface (V)

Índice1.Introducción a Eclipse2.Primeros pasos con SWT3.La librería de alto nivel Jface4.Otras APIs5.Eclipse Rich Client Platform (RCP)

Draw2D● Draw2d

– Librería gráfica similar a Java2D asentada sobre SWT– Permite crear gráficas de manera muy simple : Figuras,

conexiones, colores, rellenos, etc.

Draw2D (II)● Ejemplo práctico ( visor de relaciones entre documentos )Iterator it = document.getRelations().iterator();while (it.hasNext()) { Document relation = (Document) it.next(); RelationFigure relationFigure = new RelationFigure(relation); contentsLayout.setConstraint(relationFigure, new Rectangle(x,y,-1,-1)); contents.add(relationFigure); x+=relationFigure.getSize().width + 60; // Crear conexión PolylineConnection c = new PolylineConnection(); ChopboxAnchor sourceAnchor = new ChopboxAnchor(sourceFigure); ChopboxAnchor targetAnchor = new ChopboxAnchor(relationFigure); c.setSourceAnchor(sourceAnchor); c.setTargetAnchor(targetAnchor); contents.add(c); // Llamada recursiva a esta porción de código createRelations(contents,contentsLayout,relationFigure,relation,x,y,depth+1);}

GEF y EMF● GEF ( Graphical Editing Framework )

– Añade soporte de edición sobre Draw2D: Editores, arrastrar y soltar, guardar y cargar, etc.

● EMF ( Eclipse Modelling Framework )

– Se sustenta sobre GEF– Aproximación a MDA.

● APIs para aplicaciones realmente complejas. Ej: EclipseUML

Eclipse Forms● Creación de formularios adaptados a las IU actuales

– Componentes gráficos muy atractivos– Soporte de secciones y agrupaciones– Renderizado de HTML en formularios con gestión de los

enlaces– Pontentes layouts– Interfaz de solapas muy manejable– WSAD hace uso extensivo de este API– Eclipse lo utiliza en la perspectiva de plugins

Eclipse Forms● Ejemplo:

Creación desecciones

Componentes tradicionales con aspecto más acractivo

Múltiples páginas

Índice1.Introducción a Eclipse2.Primeros pasos con SWT3.La librería de alto nivel Jface4.Otras APIs5.Eclipse Rich Client Platform (RCP)

Introducción a RCPTodo lo que hemos visto está muy bien pero queda mucho por

resolver:– Interfaz en base a las preferencias de usuario. Configurar las partes que

quiere ver en cada momento y su colocación dentro del interfaz.– Recordar todas estas preferencias del usuario.– Crear un interfaz complejo con barras de herramientas, menús, barras de

estado y de progreso, ayuda contextual, etc.– Poder editar documentos, cargarlos, guardarlos, establecer marcas en los

mismos, etc.– Crear un sistema de ayuda potente con soporte de índices, búsqueda por

tópicos, etc.– Establecer un sistema automático de actualizaciones del cliente.– Crear un motor de búsqueda para nuestras aplicaciones.– ....

Introducción a RCP (II)Pero todo eso ya está en Eclipse, ¿ no lo podría utilizar ?¡¡ SÍ !! Gracias a RCP ( Eclipse Rich Client Platform )● ¿ Qué es RCP ?

– Librería ermite la creación de clientes ricos basados en SWT/JFace, aprovechando mucha de la funcionalidad de Eclipse.

– Eclipse RCP no tiene ninguna dependencia con el IDE. Se amplía el espectro de aplicaciones objetivo. (ya no sólo plugins).

– Durante estos meses se está refactorizando Eclipse enormemente.

– Todavía no es una versión final ( Eclipse 3.0 M8 )– El desarrollador gana en productividad

Introducción a RCP (III)● La base de RCP es el Workbench genérico.

– Ofrece la estructura organizativa del UI y las estructuras con las que interacciona el usuario: Editores, vistas, perspectivas,...

– Se configura como los plugins de Eclipse: plugin.xml– Entre las partes más importantes del Workbench:

● Editores● Vistas● Perspectivas● Acciones● Ayuda● Preferencias● ....

Editores● Editores

– Permiten abrir, editar y guardar objetos. RCP no ofrece editores predefinidos pero se encarga de la gestión de su ciclo de vida.

<extension id="org.jlibrary.ui.editor" point="org.eclipse.ui.editors"> <editor name="JLibrary editor" default="true" icon="icons/edit.gif"

class="org.jlibrary.client.ui.editor.JLibraryEditor" id="org.jlibrary.client.ui.editor.JLibraryEditor"> </editor> </extension>

Editores (II)

Vistas● Vistas

– Proporcionan información sobre objetos con los que trabaja el usuario. Las vistas se pueden ocultar, mover, agrupar, etc.

<view name="Explorador de repositorios" icon="icons/jlibrary.gif" category="jlibrary" class="org.jlibrary.client.views.RepositoryView" id="org.jlibrary.client.views.repositoryView"> </view>

<view name="Recursos" icon="icons/resources.gif" category="jlibrary" class="org.jlibrary.client.views.ResourcesView" id="org.jlibrary.client.views.resourcesView"> </view>

Vistas (II)

Perspectivas● Perspectivas

– Agrupación lógica de vistas y editores. Proporcionan un entorno de trabajo para el usuario dentro de la aplicación. El usuario puede configurarlas a su gusto.

<extension point="org.eclipse.ui.perspectives"> <perspective name="Perspectiva de categorías" icon="icons/category.gif" class="org.jlibrary.client.perspectives.CategoriesPerspective" id="org.jlibrary.client.perspectives.CategoriesPerspective"> </perspective> </extension>

Perspectivas (II)● Ejemplo de creación de una perspectiva:

public class CategoriesPerspective implements IPerspectiveFactory { public void createInitialLayout(IPageLayout layout) { String editorArea = layout.getEditorArea();

IFolderLayout topLeft = layout.createFolder( "topLeft", IPageLayout.LEFT, (float)0.35, editorArea); topLeft.addFixedView("org.jlibrary.client.views.CategoryView");

IFolderLayout bottomLeft = layout.createFolder( "bottomLeft", IPageLayout.BOTTOM, (float)0.5, "topLeft"); bottomLeft.addFixedView("org.jlibrary.client.views.FavoritesView"); bottomLeft.addFixedView("org.jlibrary.client.views.ResourcesView"); bottomLeft.addFixedView("org.jlibrary.client.views.RelationsView");

IFolderLayout bottom = layout.createFolder( "bottom", IPageLayout.BOTTOM, (float)0.7, editorArea); bottom.addFixedView("org.jlibrary.client.views.DocumentsView");

layout.setEditorAreaVisible(true); }}

Perspectivas (III)

Acciones● Otros componentes del Workbench genérico :

– Acciones <extension point="org.eclipse.ui.actionSets"> <actionSet label="%NavigationActionSet.label" description="%NavigationActionSet.description" visible="false" id="org.jlibrary.client.actions.NavigationActionSet">

<action label="%NavigateSpider.label" icon="icons/spider.gif" tooltip="%NavigateSpider.tooltip" class="org.jlibrary.client.actions.NavigateSpiderAction" toolbarPath="additions" id="org.jlibrary.client.actions.NavigateSpiderAction"> </action>

<action label="%NavigateForward.label" icon="icons/right.gif" tooltip="%NavigateForward.tooltip" class="org.jlibrary.client.actions.NavigateForwardAction" toolbarPath="additions" id="org.jlibrary.client.actions.NavigateForwardAction"> </action> .........

</actionSet></extension>

Acciones (II)

Ayuda● Otros componentes del Workbench genérico :

– Ayuda <extension point="org.eclipse.help.toc"> <toc file="help/es/book.xml" primary="true"> </toc> </extension>

- book.xml : <?xml version="1.0" encoding="ISO-8859-1"?>

<toc label="JLibrary" topic="help/es/jlibrary.html"> <topic label="Descripción" href="help/es/descripcion.html"/> </toc>

– El sistema de ayuda integra:● Tomcat -> Renderizar las páginas de ayuda● Lucene -> Motor de búsqueda

Ayuda (II)

Preferencias● Gestión de preferencias

– Se integra con la gestión de preferencias de Jface– Muestra las preferencias en árbol como Eclipse– Se guardan y cargan automáticamente las preferencias del usuario

<extension point="org.eclipse.ui.preferencePages"> <page name="%preferences" class="org.jlibrary.client.preferences.JLibraryPreferences" id="org.jlibrary.client.preferences.JLibraryPreferences"> </page> <page name="%preferences.repository" category="org.jlibrary.client.preferences.JLibraryPreferences" class="org.jlibrary.client.preferences.JLibraryRepositoryPreferences" id="org.jlibrary.client.preferences.JLibraryRepositoryPreferences"> </page> <page name="%preferences.extraction" category="org.jlibrary.client.preferences.JLibraryPreferences" class="org.jlibrary.client.preferences.JLibraryExtractionPreferences" id="org.jlibrary.client.preferences.JLibraryExtractionPreferences"> </page> ....... </extension>

Preferencias (II)Ejemplo de página de preferencias:

public void createFieldEditors() {

BooleanFieldEditor field1 = new BooleanFieldEditor( "indexResources", "Indexar el contenido de los recursos...", getFieldEditorParent()); addField(field1);

BooleanFieldEditor field2 = new BooleanFieldEditor( "indexNotes", "Indexar el contenido de las notas....", getFieldEditorParent()); addField(field2);

BooleanFieldEditor field3 = new BooleanFieldEditor( "reindex", "Reindexar documentos al actualizar", getFieldEditorParent()); addField(field3);}

Preferencias (III)

DEMO

Desventajas de RCP

• ¿ Son todo ventajas ? : ¡¡ NO !!• RCP está en constante cambio y evolución

• Las APIs suelen variar con las diferentes versiones• No hay todavía una forma sencilla para generar aplicaciones

• Lo peor : LA DOCUMENTACIÓN• Muy poca orientada a RCP• Aunque siempre se pueden usar los libros de plugins y los

artículos de SWT/JFace• Al final acabas navegando por el código fuente de Eclipse

• Todo esto hace de RCP una opción recomendable sólo para equipos con márgenes de investigación.

Conclusiones

• SWT/JFace puede ser una alternativa a Swing para clientes ricos

• Por fin clientes ricos 'modernos' en Java• RCP ofrece una base importante de servicios• Los desarrolladores se pueden centrar en la lógica de la

aplicación. • Se produce un incremento notable en la productividad

una vez superado el periodo de aprendizaje• Las aplicaciones tendrán un alto rendimiento y se

integrarán muy bien con la plataforma.

¿ Dónde encontrar más?

• http://www.eclipse.org• http://www.eclipsepluginscentral.com• http://www.eclipsepowered.org• http://www.eclipse-plugins.info• Y sobre todo ....• http://www.javahispano.org