Modernize Your Real-World Application with Eclipse 4 and JavaFX
-
Upload
cole-markham -
Category
Technology
-
view
874 -
download
6
description
Transcript of Modernize Your Real-World Application with Eclipse 4 and JavaFX
![Page 1: Modernize Your Real-World Application with Eclipse 4 and JavaFX](https://reader034.fdocuments.net/reader034/viewer/2022052321/554c59f9b4c905452e8b4ef9/html5/thumbnails/1.jpg)
MODERNIZE YOUR REAL-WORLD APPLICATION WITH
E4 AND JAVAFXCOLE MARKHAM SENIOR SOFTWARE ENGINEER THE WELLAND COMPANY
!!
![Page 2: Modernize Your Real-World Application with Eclipse 4 and JavaFX](https://reader034.fdocuments.net/reader034/viewer/2022052321/554c59f9b4c905452e8b4ef9/html5/thumbnails/2.jpg)
WELLAND BACKGROUND
• Welland Company celebrating 24 years
• Flagship products
• EXPORT
• FORMS
• IBM / Rocket Business Partner
• Perform support for UniVerse / UniData sites
![Page 3: Modernize Your Real-World Application with Eclipse 4 and JavaFX](https://reader034.fdocuments.net/reader034/viewer/2022052321/554c59f9b4c905452e8b4ef9/html5/thumbnails/3.jpg)
EXPORT PRODUCT OVERVIEW
• Transfers U2 data into an SQL compliant database
• Access data for reporting, warehousing, and web services
• Empowers users to build reports and queries with industry-standard tools.
![Page 4: Modernize Your Real-World Application with Eclipse 4 and JavaFX](https://reader034.fdocuments.net/reader034/viewer/2022052321/554c59f9b4c905452e8b4ef9/html5/thumbnails/4.jpg)
EXPORT ARCHITECTURE
U2 Database
EXPORT Server
SQL Database
EXPORT Client
![Page 5: Modernize Your Real-World Application with Eclipse 4 and JavaFX](https://reader034.fdocuments.net/reader034/viewer/2022052321/554c59f9b4c905452e8b4ef9/html5/thumbnails/5.jpg)
MAKE IT LOOK LIKE IT WASN’T BUILT IN 1995!
![Page 6: Modernize Your Real-World Application with Eclipse 4 and JavaFX](https://reader034.fdocuments.net/reader034/viewer/2022052321/554c59f9b4c905452e8b4ef9/html5/thumbnails/6.jpg)
BUT IT’S BETTER THAN THIS…
![Page 7: Modernize Your Real-World Application with Eclipse 4 and JavaFX](https://reader034.fdocuments.net/reader034/viewer/2022052321/554c59f9b4c905452e8b4ef9/html5/thumbnails/7.jpg)
NEW SWING L&F?
![Page 8: Modernize Your Real-World Application with Eclipse 4 and JavaFX](https://reader034.fdocuments.net/reader034/viewer/2022052321/554c59f9b4c905452e8b4ef9/html5/thumbnails/8.jpg)
DESIGNER’S VISION
![Page 9: Modernize Your Real-World Application with Eclipse 4 and JavaFX](https://reader034.fdocuments.net/reader034/viewer/2022052321/554c59f9b4c905452e8b4ef9/html5/thumbnails/9.jpg)
BACK TO THE DRAWING BOARD
• UI Frameworks
• Swing
• SWT
• JavaFX
• HTML5
• .NET
• Application Frameworks
• RCP 3.x
• E4
• Scout
• Riena
• .NET
![Page 10: Modernize Your Real-World Application with Eclipse 4 and JavaFX](https://reader034.fdocuments.net/reader034/viewer/2022052321/554c59f9b4c905452e8b4ef9/html5/thumbnails/10.jpg)
Why JavaFX?
• FXML using SceneBuilder
• CSS Styling
• Chart library
• e(fx)clipse tooling and E4 Renderers
• Deployment via packaged application with JRE
![Page 11: Modernize Your Real-World Application with Eclipse 4 and JavaFX](https://reader034.fdocuments.net/reader034/viewer/2022052321/554c59f9b4c905452e8b4ef9/html5/thumbnails/11.jpg)
CSS STYLING• 500 Lines of CSS for our custom theme
• E4 Renders add CSS classes
![Page 12: Modernize Your Real-World Application with Eclipse 4 and JavaFX](https://reader034.fdocuments.net/reader034/viewer/2022052321/554c59f9b4c905452e8b4ef9/html5/thumbnails/12.jpg)
SCENE BUILDER
![Page 13: Modernize Your Real-World Application with Eclipse 4 and JavaFX](https://reader034.fdocuments.net/reader034/viewer/2022052321/554c59f9b4c905452e8b4ef9/html5/thumbnails/13.jpg)
CHART LIBRARY
![Page 14: Modernize Your Real-World Application with Eclipse 4 and JavaFX](https://reader034.fdocuments.net/reader034/viewer/2022052321/554c59f9b4c905452e8b4ef9/html5/thumbnails/14.jpg)
HTML5 SUPPORT
![Page 15: Modernize Your Real-World Application with Eclipse 4 and JavaFX](https://reader034.fdocuments.net/reader034/viewer/2022052321/554c59f9b4c905452e8b4ef9/html5/thumbnails/15.jpg)
Why Eclipse 4?
• Modern architecture
• Modularity
• Application model
• Custom Renderers
• Dependency Injection
• OSGi
![Page 16: Modernize Your Real-World Application with Eclipse 4 and JavaFX](https://reader034.fdocuments.net/reader034/viewer/2022052321/554c59f9b4c905452e8b4ef9/html5/thumbnails/16.jpg)
RAPID PROTOTYPING
![Page 17: Modernize Your Real-World Application with Eclipse 4 and JavaFX](https://reader034.fdocuments.net/reader034/viewer/2022052321/554c59f9b4c905452e8b4ef9/html5/thumbnails/17.jpg)
OSGI Bundle
EXPORT ARCHITECTURE
EXPORT ServerOld EXPORT Client
Equinox Framework
E4 Platform
e(fx)clipseNew Export Client
![Page 18: Modernize Your Real-World Application with Eclipse 4 and JavaFX](https://reader034.fdocuments.net/reader034/viewer/2022052321/554c59f9b4c905452e8b4ef9/html5/thumbnails/18.jpg)
FXML LOADING
• Custom factory class used for most parts
• Handles loading FXML resource defined in model
• Controller class specified in FXML file
• Inject @FXML variables into controller
• Full Eclipse dependency injection support
![Page 19: Modernize Your Real-World Application with Eclipse 4 and JavaFX](https://reader034.fdocuments.net/reader034/viewer/2022052321/554c59f9b4c905452e8b4ef9/html5/thumbnails/19.jpg)
FXML LOADING
public class FxmlLoadedPart{ // Loaded from the fxml private Node mainControl; @PostConstruct public void postConstruct( @org.eclipse.fx.ui.di.FXMLLoader FXMLLoaderFactory factory, BorderPane parent, MPart part){ try{ String partFXML = part.getProperties().get("welland.part.fxml"); if (partFXML == null){ getLogger(this).warning("welland.part.fxml was null for part: " + part.getLabel() ); return; } FXMLBuilder<Node> builder = factory.loadBundleRelative(partFXML); mainControl = builder.load(); parent.setCenter(mainControl); }catch(IOException e){ LoggerFactory.getFactory().getLogger(this).log(Level.WARNING, "Error loading fxml", e); } } @Focus public void onFocus(){ mainControl.requestFocus(); }}
• Custom factory class used for most parts
![Page 20: Modernize Your Real-World Application with Eclipse 4 and JavaFX](https://reader034.fdocuments.net/reader034/viewer/2022052321/554c59f9b4c905452e8b4ef9/html5/thumbnails/20.jpg)
IMPLEMENTING A LOGIN DIALOG
![Page 21: Modernize Your Real-World Application with Eclipse 4 and JavaFX](https://reader034.fdocuments.net/reader034/viewer/2022052321/554c59f9b4c905452e8b4ef9/html5/thumbnails/21.jpg)
IMPLEMENTING A LOGIN DIALOG
Defined as a Window in the application model
Window contains a single Part
Custom Window Renderer to setmodality
![Page 22: Modernize Your Real-World Application with Eclipse 4 and JavaFX](https://reader034.fdocuments.net/reader034/viewer/2022052321/554c59f9b4c905452e8b4ef9/html5/thumbnails/22.jpg)
CUSTOM PERSPECTIVE SWITCHER
![Page 23: Modernize Your Real-World Application with Eclipse 4 and JavaFX](https://reader034.fdocuments.net/reader034/viewer/2022052321/554c59f9b4c905452e8b4ef9/html5/thumbnails/23.jpg)
CUSTOM PERSPECTIVE SWITCHER
• Prototyped in SceneBuilder, defined in FXML
• Radio Buttons with custom CSS
• Implemented as a ToolControl, in Window TrimBar
• Simpler implementation than MPerspectiveStack renderer
• Listens to model for perspective changes
• Updates model when buttons are pressed
![Page 24: Modernize Your Real-World Application with Eclipse 4 and JavaFX](https://reader034.fdocuments.net/reader034/viewer/2022052321/554c59f9b4c905452e8b4ef9/html5/thumbnails/24.jpg)
CUSTOM PERSPECTIVE SWITCHERSimple yet powerful CSS
![Page 25: Modernize Your Real-World Application with Eclipse 4 and JavaFX](https://reader034.fdocuments.net/reader034/viewer/2022052321/554c59f9b4c905452e8b4ef9/html5/thumbnails/25.jpg)
CUSTOM TITLE BAR AND MENUS
![Page 26: Modernize Your Real-World Application with Eclipse 4 and JavaFX](https://reader034.fdocuments.net/reader034/viewer/2022052321/554c59f9b4c905452e8b4ef9/html5/thumbnails/26.jpg)
CUSTOM TITLE BAR AND MENUS
• e(fx)clipse support for custom window decoration
• Set efx.window.decoration.fxml in model
• Custom Window renderer to populate icon, title and menus
• Application Addon to bind menus to perspectives
![Page 27: Modernize Your Real-World Application with Eclipse 4 and JavaFX](https://reader034.fdocuments.net/reader034/viewer/2022052321/554c59f9b4c905452e8b4ef9/html5/thumbnails/27.jpg)
CUSTOM TITLE BAR AND MENUS
• Set tag on Menu in application model
![Page 28: Modernize Your Real-World Application with Eclipse 4 and JavaFX](https://reader034.fdocuments.net/reader034/viewer/2022052321/554c59f9b4c905452e8b4ef9/html5/thumbnails/28.jpg)
CUSTOM TITLE BAR AND MENUS
public class PerspectiveMenuProcessingAddon { @Inject @Optional public void perspectiveChanged( @UIEventTopic(UIEvents.ElementContainer.TOPIC_SELECTEDELEMENT) Event event) { Object changedObj = event.getProperty(UIEvents.EventTags.ELEMENT); if(changedObj instanceof MPerspectiveStack){ MPerspectiveStack perspectiveStack = (MPerspectiveStack)changedObj; MPerspective perspective = perspectiveStack.getSelectedElement(); if (perspective != null && perspective.getContext() != null) { MWindow window = perspective.getContext().getActive(MWindow.class); MMenu mainMenu = window.getMainMenu(); for (MMenuElement element: mainMenu.getChildren()) { List<String> tags = element.getTags(); if (tags.contains("limitPerspectives")) { element.setVisible(tags.contains(perspective.getElementId())); } } } } }}
• Application Addon to bind menus to perspectives
![Page 29: Modernize Your Real-World Application with Eclipse 4 and JavaFX](https://reader034.fdocuments.net/reader034/viewer/2022052321/554c59f9b4c905452e8b4ef9/html5/thumbnails/29.jpg)
DEPENDENCY INJECTION TIPS• Avoid generics
• Use @Optional when appropriate
• Use method injection with @Optional or dynamic objects
• Active selection @Named(IServiceConstants.ACTIVE_SELECTION)
• Use @UIEventTopic to receive notifications on the UI thread
![Page 30: Modernize Your Real-World Application with Eclipse 4 and JavaFX](https://reader034.fdocuments.net/reader034/viewer/2022052321/554c59f9b4c905452e8b4ef9/html5/thumbnails/30.jpg)
DEPENDENCY INJECTION TIPS• Avoid generics
public class ExampleTableHandler { @Execute public void execute( @Named(IServiceConstants.ACTIVE_SELECTION) final List<Table> selectedTables) { // this will break if the active selection becomes List<Foo> for (Table table: selectedTables) { // do something with the table } } }
public class ExampleTableHandler { @Execute public void execute( @Named(IServiceConstants.ACTIVE_SELECTION) final Table[] selectedTables) { // do something with the tables } }
![Page 31: Modernize Your Real-World Application with Eclipse 4 and JavaFX](https://reader034.fdocuments.net/reader034/viewer/2022052321/554c59f9b4c905452e8b4ef9/html5/thumbnails/31.jpg)
DEPENDENCY INJECTION TIPS• Use @Optional when injected object may not be available at
construction
• Use methods with @Optional
@Inject@Optionalpublic void populate(ExportOperations newOperations){ // Save for later this.operations = newOperations; // Do something useful with the operations}
![Page 32: Modernize Your Real-World Application with Eclipse 4 and JavaFX](https://reader034.fdocuments.net/reader034/viewer/2022052321/554c59f9b4c905452e8b4ef9/html5/thumbnails/32.jpg)
DEPENDENCY INJECTION TIPS• Active selection
@Named(IServiceConstants.ACTIVE_SELECTION)
• Different semantics than RCP 3.x
• Useful for popup menus and master/detail views
• Consider custom @Named variables
• Only one part’s selection can be active
• @Inject method not called when active part changes
![Page 33: Modernize Your Real-World Application with Eclipse 4 and JavaFX](https://reader034.fdocuments.net/reader034/viewer/2022052321/554c59f9b4c905452e8b4ef9/html5/thumbnails/33.jpg)
DEPENDENCY INJECTION TIPS• Use @UIEventTopic to receive notifications on the UI thread
• Post notifications using IEventBroker
• Pub-Sub pattern enables decoupled code
• Platform handles calling subscribers on the UI Thread
@Inject@Optionalpublic void insert(@UIEventTopic(EventConstants.TOPIC_NEW) Table table) { // New data added, add to our TableView data to refresh UI data.add(table);}
@InjectIEventBroker eventBroker; !protected IStatus runInJobThread(IProgressMonitor monitor) { operations.add(table); eventBroker.post(EventConstants.TOPIC_NEW, table); return Status.OK_STATUS;}
Publish Subscribe
![Page 34: Modernize Your Real-World Application with Eclipse 4 and JavaFX](https://reader034.fdocuments.net/reader034/viewer/2022052321/554c59f9b4c905452e8b4ef9/html5/thumbnails/34.jpg)
RESOURCES/ACKNOWLEDGMENTS
• http://eclipse.org/efxclipse
• http://wiki.eclipse.org/Efxclipse/Tutorials
![Page 35: Modernize Your Real-World Application with Eclipse 4 and JavaFX](https://reader034.fdocuments.net/reader034/viewer/2022052321/554c59f9b4c905452e8b4ef9/html5/thumbnails/35.jpg)
QUESTIONS?
![Page 36: Modernize Your Real-World Application with Eclipse 4 and JavaFX](https://reader034.fdocuments.net/reader034/viewer/2022052321/554c59f9b4c905452e8b4ef9/html5/thumbnails/36.jpg)
EVALUATE THIS SESSION
Sign-in: www.eclipsecon.org
Select session from schedule
Evaluate:
1
2
3