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

Edaf36206b8e9b320e967a31fdfff1e3?s=47 gailasgteach
February 27, 2018

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

Edaf36206b8e9b320e967a31fdfff1e3?s=128

gailasgteach

February 27, 2018
Tweet

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