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

Slide 1

Slide 1 text

Slide 2

Slide 2 text

!  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

Slide 3

Slide 3 text

!  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

Slide 4

Slide 4 text

!  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

Slide 5

Slide 5 text

Slide 6

Slide 6 text

!  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

Slide 7

Slide 7 text

Slide 8

Slide 8 text

!  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

Slide 9

Slide 9 text

Slide 10

Slide 10 text

!  UI Controls ◦  View, AppBar, SidePopupView ◦  MaterialDesignIcon, Avatar, CharmListView ◦  FloatingActionButton, ProgressIndicator !  Dialogs ◦  Alert, ExceptionDialog ◦  DatePicker, TimePicker !  API Library 10 © 2018 Anderson Software Group

Slide 11

Slide 11 text

!  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

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

!  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

Slide 15

Slide 15 text

Slide 16

Slide 16 text

!  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

Slide 17

Slide 17 text

!  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

Slide 18

Slide 18 text

!  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

Slide 19

Slide 19 text

!  Cloud Object Storage GluonObservableObject 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

Slide 20

Slide 20 text

!  Observable UI Control ObservableList 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

Slide 21

Slide 21 text

!  Cloud Storage and Synchronization GluonObservableList gluonList = DataProvider.retrieveList( gluonClient.createListDataReader("data", Message.class)); . . . ListView listView = new ListView<>(); listView.setItems(gluonList); © 2018 Anderson Software Group 21

Slide 22

Slide 22 text

!  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

Slide 23

Slide 23 text

!  BPData Local Storage GluonObservableList 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

Slide 24

Slide 24 text

Slide 25

Slide 25 text

!  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

Slide 26

Slide 26 text

!  Service Class void 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

Slide 27

Slide 27 text

!  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

Slide 28

Slide 28 text

!  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

Slide 29

Slide 29 text

!  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

Slide 30

Slide 30 text

!  Thanks for Coming! ◦  [email protected] @paul_asgteach ◦  [email protected] @gail_asgteach !  Source Code ◦  asgteach.com !  DevNexus2018 Code Samples !  Click to Download ◦  Q & A 30 © 2018 Anderson Software Group