JavaFX Real-World Apps

Post on 17-Feb-2017

811 views 1 download

Transcript of JavaFX Real-World Apps

Real-World AppsDirk Lemmermann & Alexander Casall

JavaOne 2015, CON 3907

Alexander Casall Software Architect & Scrum Product Owner

@sialcasa

Custom Software Development Company in Germany Dresden, Munich, Berlin, Hamburg, Leipzig…

225 employees 3 Scrum Teams in JavaFX Projects

±7 consultants supporting JavaFX projects on customer side

Dirk Lemmermann

• Java / JavaFX Freelancer in Zurich, Switzerland

• Framework Developer

• Previously: CMU Robotics Institute Pittsburgh, Skyva International Boston, Credit Suisse Zurich

• Twitter: @dlemmermann

• Blog: http://dlemmermann.wordpress.com

Company: Ingenieurgesellschaft Auto und Verkehr Application: IAV AMeDA Template Editor Domain: Automotive Engineering

IAV AMeDA steht für "Automatisierte Messdaten Analyse". Die Anwendung ermöglicht es, Messdateien von ganzen Fahrzeugflotten hinsichtlich bestimmter Kriterien zu analysieren. Dabei liegt der Schwerpunkt auf Massendaten, die sich aufgrund der Menge nicht mehr interaktiv analysieren lassen. Damit AMeDA weiß, was es zu tun hat, muss es konfiguriert werden. Eine sogenannte Analysekonfiguration besteht aus einer Vielzahl von Dateien. Je komplizierter die Analyse, desto umfangreicher die zugehörige Konfiguration. Der Anwender soll bei der Erstellung von Analysekonfigurationen unterstützt werden. Grundsätzlich wäre die Erstellung von Hand in einem Texteditor möglich. In der Anfangszeit von AMeDA (2006 - 2010) wurden die Analysekonfiguration tatsächlich auch noch von Hand erstellt. Aufgrund der steigenden Komplexität einer einzelnen Analysekonfiguration ist dies heute nur noch mit sehr viel Hintergrundwissen möglich. Ab 2010 etwa wurde die alte Swing-Variante des IAV TemplateEditor von den Kunden eingesetzt. Zielgruppe waren hier ausschließlich interne Kunden, also IAV Mitarbeiter, die für verschiedene Fahrzeughersteller Dienstleistungen erbracht haben.

Die neue JavaFX-Variante des IAV TemplateEditor hat als Zielgruppe neben den internen Kunden auch Mitarbeiter von Fahrzeugherstellern. Wir haben das Ziel, aus dem internen Tool, ein Produkt zu machen. Eine Mischung aus Swing- und JavaFX-Fenstern kam für uns nicht in Frage, da es die Bedienbarkeit stört und optisch nicht sehr gelungen aussieht. Die alte Swing-Anwendung ist optisch kein Highlight und das Bedienkonzept ist auch nicht ganz rund. Für ein internes Tool in Ordnung, für ein Produkt für externe Kunden zu wenig. Aus diesem Grund haben wir uns entschieden,

IAV AMeDA

1 Upload of vehicle data

2 analysis based on templates

3 result visualisation

The FX-Tool (Template Editor) creates templates for configuring the analysis platform AMeDAIAV AMeDA

Preset Analysis Template Configuration

Analysis Configuration

User enters data

IAV AMeDA

What the template editor does

Ziel - keinen Java Code schreiben wenn ein neues Template erzeugt wird

Templates werden verkauft

1. DataSource: Der Anwender wählt die zu analysierende Messdatei. Die Messdatei dient nur als Beispiel für die Erstellung der Analysekonfiguration. Bei Ausführung im Backend werden die Messdateien von ganzen Fahrzeugflotten analysiert.

2. Templates: Der Anwender gibt die Analyse-Vorschriften vor

FXML Meta Template

analysis configuration

=

User enters datamagical data transformation

with the Meta Template

How the template mechanism works

Ziel - keinen Java Code schreiben wenn ein neues Template erzeugt wird

Templates werden verkauft

fx:id  cbxSignal

<metaTemplate> <fragments>

<!-- major options --> <fragment type="attr" name="name" id="cbxSignal" path="/templates/template/instance/signal[1]"> <allowedValues src="SIGNALS"/> </fragment> <fragment type="attr" name="min" id="tfIntervalMinimum" path="/templates/template/instance"/> <fragment type="attr" name="max" id="tfIntervalMaximum" path="/templates/template/instance"/> <fragment type="attr" name="alias" id="txtAxisLabel" path="/templates/template/instance"/> <fragment type="attr" name="mode" id="cbpCounterType" path="/templates/template/instance"> <mappings> <mapping key="te.templates.statistics.counter.type.simple" value="simple"/> <mapping key="te.templates.statistics.counter.type.timeSum" value="timeSum"/> <mapping key="te.templates.statistics.counter.type.otherSignalSum" value="otherSignalSum"/> </mappings> <allowedValues> <value>te.templates.statistics.counter.type.simple</value> <value>te.templates.statistics.counter.type.timeSum</value> <value>te.templates.statistics.counter.type.otherSignalSum</value> </allowedValues> </fragment>

<!-- time sum options --> <fragment type="attr" name="delay" id="tfTimeSumTimeout" path="/templates/template/instance"/>

<!-- other signal sum options --> <fragment type="attr" name="name" id="cbxSignalSumSignal" path="/templates/template/instance/signal[2]"> <allowedValues src="SIGNALS"/> </fragment> </fragments>

<templates> <template>

Meta Template with data transformation Rules

3. CounterTemplate: Beispiel der Eingabe der Parameter für ein Template. Die Dialoge für die einzelnen Templates werden durch einen speziellen Mechanismus bestehend aus FXML und XML erstellt.

<?xml version="1.0" encoding="UTF-8"?><templates> <template> <evaluator>CounterEvaluator</evaluator> <instance min="1.0" max="2.0" alias="" mode="timeSum" delay="10.0"> <signal name="MySignal" /> </instance> <description short="CountSignal" metaTemplate="statistics/counter">MySignal, interval 1.0 to 2.0</description> <content> <trigger mode="none" /> </content> </template></templates>

This is the finished configuration for the analysis which is ready to be uploaded to the IAV AMeDA Platform

4. Darstellung der Ergebnis-Dateien der Analyse. Der Anwender kann auf die Verlinkungen klicken und es öffnet sich die Anwendung, welche auf Betriebssystem-Ebene mit der Dateiendung verknüpft ist.

Technical Info3rd party libs mvvmFX with Weld-SE, ControlsFX, FontAwesomeFX, Guava, JDOM, JUnit, TestFX, Mockito + AssertJ

Tools IntelliJ, Scene Builder, ScenicView

UI-Architecture: MVVM

Additional Information  

400 UnitTests (45% Coverage) 300 IT- and UI-Tests (With UnitTests 90% Coverage)

No Swing mix cause of visual inconsistency and threading

Company: Emirates Airlines App: Network Capacity Optimization Domain: Resource Scheduling Location: Dubai, UAE

Network Capacity Optimization

• Users: Network Planning Department

• Go live: within next 3 months

• Budget: 7 Million Dhirams ($2 Million)

• 9 Months Development

• 20 Developers, 8 on UI

• 50,000 classes

Tech Info

• JBoss Application Server

• 3rd Party Libs: ControlsFX & FlexGanttFX

• Maven

• Eclipse

- Herausforderungen sind dabei unter anderem Threading-Verhalten zwischen EDT und Fx-Thread vor allem beim Rendern von UI-Komponenten - hatten wir am Anfang oftmals Probleme mit Threadverletzungen - z.B. Menüpunkte rufen Funktionalitäten aus JavaFxKomponenten auf. Da es eine Swing Anwendung ist, gibt es den Wechsel Swing->FX - FX Komponenten kommunizieren über einen Swing Rahmen mit anderen FX Komponenten. z.B. aus der TNG werden Dokumente in die WA übernommen.

Company: Carl Zeiss Meditec AG Application: FORUM Domain: Medical

JavaFX

Swing

Swing

clinical-screen-workingarea-fx.jpg - ist in SpringRcp implmentiert - die einzelnen "Parts" sind wieder JFxPanels mit JavaFx Komponenten integriert (bspw. blaue Rahmen & Header, 'X'-Button) - ABER: Dokumentkomponenten an sich (Bilder, PDFs) sind Swing-Komponenten (also Swing => Fx => Swing geschachtelt)

JavaFX

Swing

Technical Infos

• TodoSwing

Technical Infos

• TodoSwing

JavaFX

- Plugins - Plugins are written in FX- Plugins can attach to Menu-components

of the frame

JavaFX

Swing

Technical Info

3rd party libs SpringRCP, ControlsFX

Tools IntelliJ, Eclipse

Additional Information struggling with threads goal of the migration is e(fx)clipse

Company: EIZO Application: CALIOP Surgery Panel Domain: Medical Location: Karlsruhe, Germany

HTML Mockup

3rd Party Client Technology• ControlsFX

• for additional controls

• afterburner.fx

• for harnessing the complexity (modules)

• FontAwesomeFX

• for pretty icons (HTML mockup also used FontAwesome)

Company: German AIDS Foundation Application: AIDA Domain: Office Integration

$Printed Letter &Money Transfer

Responsible person processes the application

Somebody scansthe application

Infected people applyfor a grant

Technical Info3rd party libs mvvmFX with Weld-SE, icafe, ImageIO, libsepa, JUnit, AssertJ, CDI, CDI-Unit, DbSetup, Flyway,

Tools Eclipse & IntelliJ, Scene Builder, ScenicView, JVisualVM, Eclipse Memory Analysis Tool

UI-Architecture: MVVM

Additional Information  

400 UnitTests, 300 IT- and UI-Tests

Company: AISO App: HRC-Matic Domain: Business Registry Location: Geneva, CH

HRC-Matic

• Business Registry Software

• Manages requests for registration, modification, or cancellation of companies.

• 170,000 lines of code, 3400 classes

• Budget: $1.8 Million

HRC-Matic Challenges

• Focus Management

• TableView Control (support for direct editing)

• Missing Controls (LoV Box, Autosuggest)

HRC-Matic Why not HTML?

• No guarantee of sustainability.

• Short term technology life cycle.

• Low performance risk.

• Compatibility risks with various web browsers used by our customers.

• Upgrade costs due to a change in web technology.

Company: Open Source (www.saring.de/sportstracker) Application: Sportstracker Domain: Sports / Fitness

Technical Info3rd party libs Guice, JFreeChart, JDOM, JXMapViewer2, ControlsFX, jfx-testrunner, Mockito, JUnit, FIT Protocol SDK

Tools IntelliJ IDEA, Scene Builder,

UI-Architecture MVC / MVVM

Additional Infos Swing integration cause of missing functionality of FX-Charts

Company: PROJEKT PRO GmbH App: Resource Simulator Domain: Architecture Location: Bavaria

PRO Simulation• Used for intuitive scheduling of human and

monetary resources

• Explore different scenarios, pick best one

• Part of ProjektPRO product family

• FileMaker-based

• Controlling, project, and office management

• Used by architects and engineers

RDMS RDMS

Technical Info• Maven, Eclipse, GIT (Bitbucket)

• FontAwesomeFX

• ControlsFX

• FlexGanttFX

• Hibernate

• SQLite

Company: Saxonia Systems AG Application: eteoBoard Domain: Software Development

Technical Info

3rd party libs mvvmFX with Weld-SE, ControlsFX, SynchronizeFX

Tools Eclipse, Scene Builder, ScenicView, JVisualVM, Eclipse Memory Analysis Tool

UI-Architecture: MVC / MVVM

Company: European Broadcasting Union (EBU) Application: NEOS - New Eurovision Operations System Domain: TV and Radio Broadcasting Location: Geneva, Switzerland

NEOS

• 150 dispatchers at EBU

• Planning TV and radio transmissions from A to B

• Budget: $3 Million

• 15 Developers

• 2000 classes, 1000 UI

Tech Info

• ControlsFX

• afterburner.fx

• FlexGanttFX

• JEntityFX

Company: MINT Software Systems Application: MINT TRMS Domain: Training and Resource Management (Airlines) Location: Kiel, Germany

MINT TRMS• Used by training departments of airlines, technical

facilities and production companies in the aviation and other training intensive industries.

• Used for records and skill management, training planning, electronic online and offline grading and e-learning.

• JavaFX version is operational since 2013 (earlier versions sind 1998)

MINT TRMS Tech Info

• 8 - 10 developers on UI and backend

• Total: 1.8 million lines of code, 6300 classes

• JavaFX: 1.1 million lines of code, 4800 classes (inc. Swing left-overs)

• 3rd party frameworks: ControlsFX, FlexGanttFX

MINT TRMS Issues

• Switching to new update release makes product incompatible with older Java versions: customers do not like that!

• Still a lot of Swing code that is causing issues: drag & drop, layout, threading, window ownership. ETC / App thread communication.

• Read also: https://dlemmermann.wordpress.com/2014/07/17/javafx-tip-9-do-not-mix-swing-javafx/

Q & A

References A

• http://www.dlsc.com

• http://www.saxsys.de

• http://www.calendarfx.com

• http://www.flexganttfx.com

• http://dlemmermann.wordpress.com

References B

• http://www.fxexperience.com

• http://www.scenic-view.org

• http://controlsfx.org

• http://afterburner.adam-bien.com

• http://gluonhq.com/open-source/scene-builder/