Use a single code base, JavaFX UI, Gluon Framework, and your favorite IDE
AtlantaFebruary 23, 2018Goin’ Mobile: Developing Apps for iOSand Android with Java and JavaFXPaul AndersonGail AndersonAnderson Software Group, Inc.asgteach.com1© 2018 Anderson Software Group
View Slide
! Training Company◦ Java, JavaFX Courses! JavaFX Authors◦ JavaFX Rich ClientProgramming on theNetBeans Platform◦ Essential JavaFX! LiveLesson Videos◦ JavaFX Programming◦ Java Reflection2© 2018 Anderson Software Group
! Why JavaFX on Mobile?! Gluon Framework! Gluon Charm! Gluon Connect and Gluon CloudLink! Gluon Cloud Authentication! Afterburner Framework! Wrap Up, Q & A3© 2018 Anderson Software Group
! Critical Goal◦ Platform independent source code◦ “Write Once, Install Everywhere”! Design Approach◦ Frameworks are a must◦ Hide platform dependencies and messy details! JavaFX Advantages◦ Java UI, scene graph, nodes, FXML views◦ Properties, listeners, binding, event handlers4© 2018 Anderson Software Group
5© 2018 Anderson Software Group
! Development Tools◦ Scene Builder for layouts, CSS and skins◦ Gradle for builds, IDE independent! Gluon Library◦ Charm Controls, Gluon Maps◦ Local and cloud storage◦ Material Design for mobile footprint! Hardware Control◦ Camera, accelerometer, GPS, gestures, …6© 2018 Anderson Software Group
7© 2018 Anderson Software Group
! MobileApplication◦ Main class for JavaFX mobile applications◦ Extends JavaFX Application class◦ Specify views as factories that are called on demand! Views◦ View class invokes FXMLLoader for FXML◦ Presenter class is the FXML controller class! Resources◦ fxml, css, images, licensing files8© 2018 Anderson Software Group
© 2018 Anderson Software Group 9
! UI Controls◦ View, AppBar, SidePopupView◦ MaterialDesignIcon, Avatar, CharmListView◦ FloatingActionButton, ProgressIndicator! Dialogs◦ Alert, ExceptionDialog◦ DatePicker, TimePicker! API Library10© 2018 Anderson Software Group
! Access Hardware Features on Devices◦ Platform-agnostic◦ Gluon open source under GPL license◦ Optional commercial support! Supported Services◦ Accelerometer, Barcode Scan, Battery, Bluetooth,◦ Camera-Picture, Compass, Device Info, Display Info,◦ Magnetometer, Orientation, Phone, Storage, etc.11© 2018 Anderson Software Group
12© 2018 Anderson Software Group
13© 2018 Anderson Software Group
! Client Side Library◦ Maps data with observable properties and lists◦ Supports bidirectional data transfers◦ Provides notifications◦ Syncs data automatically! Supports Common Data Sources◦ Gluon CloudLink◦ File provider◦ REST provider© 2018 Anderson Software Group 14
15© 2018 Anderson Software Group
! Cloud StorageGluonClient gluonClient =GluonClientBuilder.create().credentials(new GluonCredentials(applicationKey,applicationSecret)).build();! Local StorageGluonClient gluonClient = GluonClientBuilder.create().credentials(new GluonCredentials(applicationKey,applicationSecret)).operationMode(OperationMode.LOCAL_ONLY).build();© 2018 Anderson Software Group 16
! Message Classclass Message {private final StringProperty text =new SimpleStringProperty();public StringProperty textProperty(){ return text; }}! Bind to UI ControlLabel msgLabel = new Label();msgLabel.textProperty().bind(msg.textProperty());© 2018 Anderson Software Group 17
! Write Through◦ Update remote copy when local data changes◦ LIST_WRITE_THROUGH◦ OBJECT_WRITE_THROUGH! Read Through◦ Update local copy when remote data changes◦ LIST_READ_THROUGH◦ OBJECT_READ_THROUGH© 2018 Anderson Software Group 18
! Cloud Object StorageGluonObservableObject gluonMsg =DataProvider.retrieveObject(gluonClient.createObjectDataReader("data",Message.class, SyncFlag.OBJECT_READ_THROUGH,SyncFlag.OBJECT_WRITE_THROUGH));. . .Label msgLabel = new Label();msgLabel.textProperty().bind(gluonMsg.get().textProperty());© 2018 Anderson Software Group 19
! Observable UI ControlObservableList messages =FXCollections.observableArrayList();loadMessages(messages)ListView listView = new ListView<>();listView.setItems(messages);! Advantages◦ Add and remove elements in list◦ Updates UI control automatically© 2018 Anderson Software Group 20
! Cloud Storage and SynchronizationGluonObservableList gluonList =DataProvider.retrieveList(gluonClient.createListDataReader("data",Message.class));. . .ListView listView = new ListView<>();listView.setItems(gluonList);© 2018 Anderson Software Group 21
! Two Levels◦ Update list for adds and removals◦ Update list elements! First LevelSyncFlag.LIST_WRITE_THROUGHSyncFlag.LIST_READ_THROUGH! Second LevelSyncFlag.OBJECT_WRITE_THROUGHSyncFlag.OBJECT_READ_THROUGH© 2018 Anderson Software Group 22
! BPData Local StorageGluonObservableList gluonBPData =DataProvider.retrieveList(gluonClient.createListDataReader(BPDATA,BPData.class, SyncFlag.LIST_WRITE_THROUGH,SyncFlag.OBJECT_WRITE_THROUGH));gluonBPData.stateProperty().addListener((obs, ov, nv) -> {if (ConnectState.SUCCEEDED.equals(nv)) {bpList.set(gluonBPData);}});© 2018 Anderson Software Group 23
© 2018 Anderson Software Group 24
! BPMonitor◦ Four views (Readings, Graph, Stats, Edit)◦ Stores readings locally on device◦ No data sharing with other devices! BPCloud◦ Four views (Readings, Graph, Stats, Edit)◦ Writes data to cloud◦ Data tied to authenticated users◦ User can access data from any authenticated device© 2018 Anderson Software Group 25
! Service Classvoid getData() {GluonObservableList gluonBPData =DataProvider.retrieveList(gluonClient.createListDataReader(user.get().getNick() +user.get().getNetworkId(), BPData.class,SyncFlag.LIST_READ_THROUGH,SyncFlag.LIST_WRITE_THROUGH,SyncFlag.OBJECT_READ_THROUGH,SyncFlag.OBJECT_WRITE_THROUGH));. . .}© 2018 Anderson Software Group 26
! Credentials◦ Register application on CloudLink◦ Application keys supplied by Gluon! Gluon ClientGluonClient gluonClient =GluonClientBuilder.create().credentials(new GluonCredentials(APPKEY, APPSECRET)).authenticationMode(AuthenticationMode.USER).build();© 2018 Anderson Software Group 27
! What is Afterburner?◦ Lightweight framework◦ Provides dependency injection! Why Use Afterburner?◦ Injects FXML for views and Java objects◦ Generates Java boilerplate code! Advantages◦ Reduces Java code◦ Safe and easy object sharing among views28© 2018 Anderson Software Group
! JavaFX Advantages◦ Platform independent source code◦ Observables, binding & background tasks to sync UI◦ Flexible skinning to fit mobile form! Useful Frameworks◦ Gluon/Gradle framework for mobile deployment◦ Based on OpenJDK 9◦ Afterburner framework for dependency injection◦ Platform/IDE independence29© 2018 Anderson Software Group
! Thanks for Coming!◦ [email protected] @paul_asgteach◦ [email protected] @gail_asgteach! Source Code◦ asgteach.com! DevNexus2018 Code Samples! Click to Download◦ Q & A30© 2018 Anderson Software Group