Goin' Mobile: Developing Apps for iOS and Android with Java and JavaFX

Use a single code base, JavaFX UI, Gluon Framework, and your favorite IDE

Transcript

1. Atlanta February 23, 2018 Goin’ Mobile: Developing Apps for iOS and Android with Java and JavaFX Paul Anderson Gail Anderson Anderson Software Group, Inc. asgteach.com 1 © 2018 Anderson Software Group
2. !  Training Company ◦  Java, JavaFX Courses !  JavaFX Authors ◦  JavaFX Rich Client Programming on the NetBeans Platform ◦  Essential JavaFX !  LiveLesson Videos ◦  JavaFX Programming ◦  Java Reflection 2 © 2018 Anderson Software Group
3. !  Why JavaFX on Mobile? !  Gluon Framework !  Gluon Charm !  Gluon Connect and Gluon CloudLink !  Gluon Cloud Authentication !  Afterburner Framework !  Wrap Up, Q & A 3 © 2018 Anderson Software Group
4. !  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 handlers 4 © 2018 Anderson Software Group
5. 5 © 2018 Anderson Software Group
6. !  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. 7 © 2018 Anderson Software Group
8. !  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 files 8 © 2018 Anderson Software Group
9. © 2018 Anderson Software Group 9
10. !  UI Controls ◦  View, AppBar, SidePopupView ◦  MaterialDesignIcon, Avatar, CharmListView ◦  FloatingActionButton, ProgressIndicator !  Dialogs ◦  Alert, ExceptionDialog ◦  DatePicker, TimePicker !  API Library 10 © 2018 Anderson Software Group
11. !  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. 12 © 2018 Anderson Software Group
13. 13 © 2018 Anderson Software Group
14. !  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. 15 © 2018 Anderson Software Group
16. !  Cloud Storage GluonClient gluonClient = GluonClientBuilder.create().credentials( new GluonCredentials(applicationKey, applicationSecret)).build(); !  Local Storage GluonClient gluonClient = GluonClientBuilder .create().credentials(new GluonCredentials( applicationKey,applicationSecret)) .operationMode(OperationMode.LOCAL_ONLY) .build(); © 2018 Anderson Software Group 16
17. !  Message Class class Message { private final StringProperty text = new SimpleStringProperty(); public StringProperty textProperty() { return text; } } !  Bind to UI Control Label msgLabel = new Label(); msgLabel.textProperty().bind(msg.textProperty()); © 2018 Anderson Software Group 17
18. !  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
19. !  Cloud Object Storage GluonObservableObject<Message> 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
20. !  Observable UI Control ObservableList<Message> messages = FXCollections.observableArrayList(); loadMessages(messages) ListView<Message> listView = new ListView<>(); listView.setItems(messages); !  Advantages ◦  Add and remove elements in list ◦  Updates UI control automatically © 2018 Anderson Software Group 20
21. !  Cloud Storage and Synchronization GluonObservableList<Message> gluonList = DataProvider.retrieveList( gluonClient.createListDataReader("data", Message.class)); . . . ListView<Message> listView = new ListView<>(); listView.setItems(gluonList); © 2018 Anderson Software Group 21
22. !  Two Levels ◦  Update list for adds and removals ◦  Update list elements !  First Level SyncFlag.LIST_WRITE_THROUGH SyncFlag.LIST_READ_THROUGH !  Second Level SyncFlag.OBJECT_WRITE_THROUGH SyncFlag.OBJECT_READ_THROUGH © 2018 Anderson Software Group 22
23. !  BPData Local Storage GluonObservableList<BPData> 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
24. © 2018 Anderson Software Group 24
25. !  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
26. !  Service Class void getData() { GluonObservableList<BPData> 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
27. !  Credentials ◦  Register application on CloudLink ◦  Application keys supplied by Gluon !  Gluon Client GluonClient gluonClient = GluonClientBuilder.create().credentials( new GluonCredentials(APPKEY, APPSECRET)) .authenticationMode( AuthenticationMode.USER) .build(); © 2018 Anderson Software Group 27
28. !  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 views 28 © 2018 Anderson Software Group
29. !  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 independence 29 © 2018 Anderson Software Group
30. !  Thanks for Coming! ◦  paul@asgteach.com @paul_asgteach ◦  gail@asgteach.com @gail_asgteach !  Source Code ◦  asgteach.com !  DevNexus2018 Code Samples !  Click to Download ◦  Q & A 30 © 2018 Anderson Software Group