MODERNIZE YOUR REAL-
WORLD APPLICATION WITH
E4 AND JAVAFX
COLE MARKHAM	

 	

 	

 	

SENIOR SOFTWARE ENGINEER	

THE WELLAN...
WELLAND BACKGROUND
• Welland Company celebrating 24 years	

• Flagship products	

• EXPORT	

• FORMS	

• IBM / Rocket Busi...
EXPORT PRODUCT OVERVIEW
• Transfers U2 data into an SQL compliant database	

• Access data for reporting, warehousing, and...
EXPORT ARCHITECTURE
U2	

Database
EXPORT	

Server
SQL
Database
EXPORT
Client
MAKE IT LOOK LIKE IT WASN’T
BUILT IN 1995!
BUT IT’S BETTERTHANTHIS…
NEW SWING L&F?
DESIGNER’SVISION
BACKTOTHE DRAWING BOARD
• UI Frameworks	

• Swing	

• SWT	

• JavaFX	

• HTML5	

• .NET
• Application Frameworks	

• RCP 3...
Why JavaFX?
• FXML using SceneBuilder	

• CSS Styling	

• Chart library	

• e(fx)clipse tooling and E4 Renderers	

• Deplo...
CSS STYLING
• 500 Lines of CSS for our custom theme	

• E4 Renders add CSS classes
SCENE BUILDER
CHART LIBRARY
HTML5 SUPPORT
Why Eclipse 4?
• Modern architecture	

• Modularity	

• Application model	

• Custom Renderers	

• Dependency Injection	

...
RAPID PROTOTYPING
OSGI Bundle
EXPORT ARCHITECTURE
EXPORT	

Server
Old EXPORT Client
Equinox Framework
E4 Platform
e(fx)clipse
New Export Cli...
FXML LOADING
• Custom factory class used for most parts	

• Handles loading FXML resource defined in model	

• Controller c...
FXML LOADING
public class FxmlLoadedPart{	
	 // Loaded from the fxml	
	 private Node mainControl;	
	 @PostConstruct	
	 pub...
IMPLEMENTING A LOGIN DIALOG
IMPLEMENTING A LOGIN DIALOG
Defined as a Window in the application model	

Window contains a single Part	

Custom Window 

...
CUSTOM PERSPECTIVE SWITCHER
CUSTOM PERSPECTIVE SWITCHER
• Prototyped in SceneBuilder, defined in FXML	

• Radio Buttons with custom CSS	

• Implemented...
CUSTOM PERSPECTIVE SWITCHER
Simple yet powerful CSS
CUSTOMTITLE BAR AND MENUS
CUSTOMTITLE BAR AND MENUS
• e(fx)clipse support for custom window decoration	

• Set efx.window.decoration.fxml in model	
...
CUSTOMTITLE BAR AND MENUS
• Set tag on Menu in application model
CUSTOMTITLE BAR AND MENUS
public class PerspectiveMenuProcessingAddon {	
	 	
	 @Inject @Optional	
	 public void perspectiv...
DEPENDENCY INJECTIONTIPS
• Avoid generics	

• Use @Optional when appropriate	

• Use method injection with @Optional or dy...
DEPENDENCY INJECTIONTIPS
• Avoid generics
public class ExampleTableHandler {	
	 @Execute	
public void execute(	
@Named(ISe...
DEPENDENCY INJECTIONTIPS
• Use @Optional when injected object may not be available at
construction	

• Use methods with @O...
DEPENDENCY INJECTIONTIPS
• Active selection 

@Named(IServiceConstants.ACTIVE_SELECTION)	

• Different semantics than RCP ...
DEPENDENCY INJECTIONTIPS
• Use @UIEventTopic to receive notifications on the UI thread	

• Post notifications using IEventBr...
RESOURCES/ACKNOWLEDGMENTS
• http://eclipse.org/efxclipse	

• http://wiki.eclipse.org/Efxclipse/Tutorials
QUESTIONS?
EVALUATETHIS SESSION
Sign-in: www.eclipsecon.org
Select session from schedule
Evaluate:
1
2
3
Upcoming SlideShare
Loading in …5
×

Modernize Your Real-World Application with Eclipse 4 and JavaFX

2,238 views

Published on

Slides from my talk at EclipseCon North America 2014.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,238
On SlideShare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
18
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Modernize Your Real-World Application with Eclipse 4 and JavaFX

  1. 1. MODERNIZE YOUR REAL- WORLD APPLICATION WITH E4 AND JAVAFX COLE MARKHAM SENIOR SOFTWARE ENGINEER THE WELLAND COMPANY ! ! CMARKHAM@WELLAND.COM
  2. 2. WELLAND BACKGROUND • Welland Company celebrating 24 years • Flagship products • EXPORT • FORMS • IBM / Rocket Business Partner • Perform support for UniVerse / UniData sites
  3. 3. 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.
  4. 4. EXPORT ARCHITECTURE U2 Database EXPORT Server SQL Database EXPORT Client
  5. 5. MAKE IT LOOK LIKE IT WASN’T BUILT IN 1995!
  6. 6. BUT IT’S BETTERTHANTHIS…
  7. 7. NEW SWING L&F?
  8. 8. DESIGNER’SVISION
  9. 9. BACKTOTHE DRAWING BOARD • UI Frameworks • Swing • SWT • JavaFX • HTML5 • .NET • Application Frameworks • RCP 3.x • E4 • Scout • Riena • .NET
  10. 10. Why JavaFX? • FXML using SceneBuilder • CSS Styling • Chart library • e(fx)clipse tooling and E4 Renderers • Deployment via packaged application with JRE
  11. 11. CSS STYLING • 500 Lines of CSS for our custom theme • E4 Renders add CSS classes
  12. 12. SCENE BUILDER
  13. 13. CHART LIBRARY
  14. 14. HTML5 SUPPORT
  15. 15. Why Eclipse 4? • Modern architecture • Modularity • Application model • Custom Renderers • Dependency Injection • OSGi
  16. 16. RAPID PROTOTYPING
  17. 17. OSGI Bundle EXPORT ARCHITECTURE EXPORT Server Old EXPORT Client Equinox Framework E4 Platform e(fx)clipse New Export Client
  18. 18. 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
  19. 19. 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
  20. 20. IMPLEMENTING A LOGIN DIALOG
  21. 21. IMPLEMENTING A LOGIN DIALOG Defined as a Window in the application model Window contains a single Part Custom Window 
 Renderer to set
 modality
  22. 22. CUSTOM PERSPECTIVE SWITCHER
  23. 23. CUSTOM PERSPECTIVE SWITCHER • Prototyped in SceneBuilder, defined in FXML • Radio Buttons with custom CSS • Implemented as aToolControl, in WindowTrimBar • Simpler implementation than MPerspectiveStack renderer • Listens to model for perspective changes • Updates model when buttons are pressed
  24. 24. CUSTOM PERSPECTIVE SWITCHER Simple yet powerful CSS
  25. 25. CUSTOMTITLE BAR AND MENUS
  26. 26. CUSTOMTITLE 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
  27. 27. CUSTOMTITLE BAR AND MENUS • Set tag on Menu in application model
  28. 28. CUSTOMTITLE 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
  29. 29. DEPENDENCY INJECTIONTIPS • 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
  30. 30. DEPENDENCY INJECTIONTIPS • 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 } }
  31. 31. DEPENDENCY INJECTIONTIPS • Use @Optional when injected object may not be available at construction • Use methods with @Optional @Inject @Optional public void populate(ExportOperations newOperations){ // Save for later this.operations = newOperations; // Do something useful with the operations }
  32. 32. DEPENDENCY INJECTIONTIPS • 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
  33. 33. DEPENDENCY INJECTIONTIPS • 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 UIThread @Inject @Optional public void insert(@UIEventTopic(EventConstants.TOPIC_NEW) Table table) { // New data added, add to our TableView data to refresh UI data.add(table); } @Inject IEventBroker eventBroker; ! protected IStatus runInJobThread(IProgressMonitor monitor) { operations.add(table); eventBroker.post(EventConstants.TOPIC_NEW, table); return Status.OK_STATUS; } Publish Subscribe
  34. 34. RESOURCES/ACKNOWLEDGMENTS • http://eclipse.org/efxclipse • http://wiki.eclipse.org/Efxclipse/Tutorials
  35. 35. QUESTIONS?
  36. 36. EVALUATETHIS SESSION Sign-in: www.eclipsecon.org Select session from schedule Evaluate: 1 2 3

×