Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

gailasgteach

February 27, 2018
Tweet

Other Decks in Technology

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  5. 5
    © 2018 Anderson Software Group

    View full-size slide

  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

    View full-size slide

  7. 7
    © 2018 Anderson Software Group

    View full-size slide

  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

    View full-size slide

  9. © 2018 Anderson Software Group 9

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  12. 12
    © 2018 Anderson Software Group

    View full-size slide

  13. 13
    © 2018 Anderson Software Group

    View full-size slide

  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

    View full-size slide

  15. 15
    © 2018 Anderson Software Group

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  19. !  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

    View full-size slide

  20. !  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

    View full-size slide

  21. !  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

    View full-size slide

  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

    View full-size slide

  23. !  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

    View full-size slide

  24. © 2018 Anderson Software Group 24

    View full-size slide

  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

    View full-size slide

  26. !  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  30. !  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

    View full-size slide