Gluon Charm Documentation

On NetBeans, you can install it directly from Tools→Plugins or you can download it manually from the NetBeans plugins website and then add the nbm file in NetBeans. If you don’t know how to do that, you can watch this video to help you along and read the details here. Note that the current version of the Gluon NetBeans Plugin is 1.0.3.

If you use IntelliJ IDEA as your IDE, you can install this plugin from File→Settings→Plugins, or download the plugin from the IntelliJ plugins website and install the zip file in IntelliJ. If you don’t know how to do that, you can read the details here. Note that the current version of the Gluon IntelliJ Plugin is 1.0.

If you use Eclipse as your IDE, you can install the Gluon plugin from the Eclipse Marketplace or by using the following Update Site: http://download.gluonhq.com/tools/eclipse/updates/1.0.0. You can read the detailed instructions here. Note that the current version of the Gluon Eclipse Plugin is 1.0.0.

After having installed the plugin into your IDE, you can create a new project.

This is the full build.gradle file:

If you clean and build the project, the dependencies will be downloaded the first time. On NetBeans, if you right-click on the project’s root and select Reload Project, the dependencies will show up under the Dependencies folder of the project. On IntelliJ, click on the refresh button on the Gradle Tool Window (View→Tool Windows→Gradle) to refresh the Gradle projects and you will see them under External Libraries in the Project Tool Window.

Have a look at the documentation for MobileApplication. This class should be considered as the base class for any Charm project, in a similar fashion that the Application class is for JavaFX applications.

In fact, MobileApplication extends from Application, and our class will extend it, so there is no need for a start method. We’ll add View instances on its constructor or by overriding the init method.

There is a postInit method that can be used for one time initialization, because it’s called once there is a valid scene instance. In this sample, we will install an indigo Swatch.

If you have a valid license key for Gluon Charm, add it to your application with the @License annotation, and you will avoid the initial nag popup dialog.

Views (check the docs) can be added easily, just by placing JavaFX nodes on the top, center or bottom of the View, or by using FXML files created with Scene Builder. In this sample, we’ll use the mobile-enabled version of the Afterburner MVP framework.

You can check the FXML file code. Besides the View pane, an Icon is used, selected from the MaterialDesignIcon list of icons, based on the Material Design style guide.

This link contains detailed information for the following steps.

The Gluon Cloud Portal

Before you can start using the Gluon Charm Connect library, you will need to register your application on the Gluon Cloud Portal. If you haven’t got an account yet, just fill in the sign up form by clicking the link below the login button. Once you are successfully logged in, you are able to create a Gluon Application by providing a name in the form on the Dashboard page. An application key and secret will be generated for you when the application is created. Please keep the key and secret safe and don’t send them to anyone.

The GluonClientProvider class

We can now build a GluonClient instance, which acts as the access point to the Gluon Cloud service.

The CommentsSevice class

Once you have a GluonClient reference, you can obtain a StorageService from it:

This service can be used to retrieve data from and store data to the Gluon Cloud service. In this case, the data will be a list with comments. The way we can get this list from this service is:

Finally, we wrap this observable list into an ObjectProperty in order to expose it to the view and bind it with the ListView content.

You can follow how the rest of the views are added to this app on this link.

The MobileApplication class extends from Application, hence for Glisten-based applications it will be considered the base class.

Let’s have a look at the hierarchy of components added to generate the user interface.

In order to understand how Glisten works, let’s have a look at the initial JavaFX application lifecycle. Whenever an application is launched, the JavaFX runtime:

Typically, the developer of a Glisten application will only override the init() method, in order to add one or more View objects, and provide them as factories that can be called on-demand. The MobileApplication implementation will take care of the rest: when start() is called, it will create a Scene, adding a root node to it, and finally it will put the scene in the primary stage and show it.

When the runtime calls init(), we just provide a Supplier<View> for HOME_VIEW, but the view is not instantiated at this point yet.

Then start(Stage) is called. In this moment, MobileApplication creates an instance of Scene, sets as root an empty instance of a GlassPane and adds the scene to the primary stage.

After some internal settings, like adding the default Swatch, it calls switchView("HOME_VIEW"). This is the moment when an instance of the home view is created and added to the pane.

Finally the stage is shown.

Changing the default Swatch

What if we want to modify some scene settings before it is shown?

Before showing the stage, there’s a call to the postInit(Scene) method, that can be used by the developer for one time initialization.

In case the developer wants to change the swatch for each view, this can be done by listening to the changes in the viewProperty of a MobileApplication instance, and assigning the corresponding Swatch:

Another way to accomplish the same will be by adding a listener to each view’s showingProperty:

A Layer is an overlay that can be shown above any MobileLayoutPane object, like the views, or the GlassPane itself.

Layers can be provided as factories, to be shown on demand. In this case they will be added and installed to the GlassPane with MobileLayoutPane.getInstance().addLayerFactory().

Also, they can be added to any of the views (view.getLayers()), just by adding the layer into that list.

Showing a Layer is then achieved either by calling , or by using API available on MobileApplication.

If the Layer is installed in the GlassPane, it can be shown at any time by calling showLayer(layerName), regardless of the current View.

But if the layer is installed in a specific MobileLayoutPane, only if that pane is currently showing, calling view.getLayers().get(index).show() will show the layer at the given index, on top of the pane.

Glisten ships with two CSS themes: light and dark. Despite the connotation, the amount of CSS required to specify these themes is incredibly minimal - and as a courtesy is reproduced here:

There are a number of global properties that can be used by any application that uses Glisten. These properties allow for custom controls to be styled in a way that should relatively closely match up with the Glisten-styled controls. What follows is a list of such properties.

By default, when a UI control is instantiated in Glisten, the control does not receive any additional style classes over what is provided by the underlying JavaFX technology. However, depending on the use case for each individual control, it can make sense to apply additional style classes to have Glisten apply additional styling to these controls.

There exists a class called GlistenStyleClasses that is located in the com.gluonhq.glisten.visual package. This class provides a number of predefined style classes that can be applied to a control, via one of two methods:

Both approaches are more or less equivalent, but the second approach is recommended.

Once these additional style classes have been applied, both Glisten CSS and your own CSS can be applied as applicable. For example, a button that has been styled to be flat (using GlistenStyleClasses.BUTTON_FLAT) will be able to receive alternate styling via css such as the following:

Of course, as noted, any styling of UI controls based on style classes from the GlistenStyleClasses class will be styled differently by Glisten CSS, so there is no need (unless desired) to apply additional styling.

What follows is a list of additional CSS style classes that are available to some UI controls:

Buttons have the CSS style class .button. There are the following additional style classes that are available in Glisten:

Toggle buttons have the CSS style class .toggle-button.

If this document does not answer all your questions regarding Glisten CSS functionality, please reach out to Gluon staff and ask any questions. They will help us to improve future versions of this document.

The GluonClient class is the access point from Charm Connect to the Gluon Cloud service. You can get a reference to a GluonClient instance by using the GluonClientBuilder:

The credentials are the key/secret pair of your application which you can obtain from the dashboard on the Gluon Cloud Portal. Connect will use these credentials to sign all requests that are made to the Gluon Cloud service. This is required in order to let the Gluon Cloud service know on whose behalf a request is made.

Once you have a GluonClient reference, you can obtain a StorageService from it:

The StorageService can be used to retrieve data from and store data to a storage location. There are two storage locations available which are defined in the StorageWhere enum constants:

There are two different types of data that can be managed:

Because these objects and lists are maintained remotely, we will call them remote entities. Every remote entity is identified by a unique name.

The second parameter of the retrieveList and retrieveObject methods specify the type of data that is stored in the requested remote list or remote object. Charm Connect supports three different data types: String, Map and custom classes. Inside a Map and for the fields of the custom class, the following field types can be used:

The Property types are a requirement when a remote list or remote object is retrieved in combination with the OBJECT_WRITE_THROUGH synchronization flag. See the Synchronizing data section for more information.

By default, no synchronization flags are configured when calling any of the methods we mentioned above. To enable synchronization, you can pass any of the SyncFlag enum constants to the method. There are four different types of SyncFlag:

Note that the OBJECT_READ_THROUGH and LIST_READ_THROUGH flags don’t have any effect when used in combination with the StorageWhere.DEVICE storage location.

Also note that the SyncFlag.OBJECT_WRITE_THROUGH will only work on non-static Observable fields of the object.

As an example, the code snippet below retrieves an instance of CharmObservableList that is stored on Gluon Cloud and that is configured to be list read and list write through. This means that any changes that are done on the client, either adding or removing items, are propagated back to Gluon Cloud. The reverse is true as well: all changes that occur in Gluon Cloud will be reflected back to the local list. Changes that occur on the objects inside the list won’t be propagated.

Configuring the authentication methods that should be enabled for your application can be done from the dashboard page on Gluon Cloud Portal. If you don’t have an account yet, go to the Gluon Cloud Product page and click on "Sign up" under "Free".

The next time you run your application with USER authentication enabled, you will see the authentication view with a list of buttons for all the login methods that are enabled.

To get started with Twitter authentication, you first need to create a new Twitter application. Click the Create New App button at the top right of that page and fill in the application details. Use the following link for the Callback URL: http://cloud.gluonhq.com/2/connect/callback/TWITTER.

When your application is created, you can add a login method to your application on the Gluon Cloud Portal. You can find the correct application credentials in the Keys and Access Tokens tab on the dashboard of your Twitter application. Copy the Consumer Key and Consumer Secret into the appropriate input fields in the login method form.

To get started with Facebook authentication, you first need to create a new Facebook application. Click the Add a New App button at the top right of that page and select the Website platform. Provide the App ID and click Create New Facebook App ID. Select your application’s category and click Create App ID. Click Skip Quick Start at the top right of the page to skip the quickstart configuration wizard. On the application’s dashboard, click the Settings button from the menu on the left. Insert cloud.gluonhq.com in the App Domains and set the Website URL to http://gluonhq.com/. Click Save Changes to apply the configuration settings.

When your application is created, you can add a login method to your application on the Gluon Cloud Portal. You can find the correct application credentials in the same Settings page mentioned previously, from the dashboard of your Facebook application. Copy the App-ID and App Secret into the appropriate input fields in the login method form.

To get started with Google authentication, you first need to create a new Google application. Click the Create Project button on that page and fill in a name for your application. Once your application is created, choose APIs & auth → Credentials from the menu on the left-hand side. Click the Add credentials button and choose OAuth 2.0 client ID. Google asks you to first fill in your application details in the Consent Screen. After you have provided your application details there, you will be redirected back to this page. Choose Web application as the Application type. Enter http://cloud.gluonhq.com in the Authorized JavaScript origins field and http://cloud.gluonhq.com/2/connect/callback/GOOGLE_PLUS in the Authorized redirect URIs field.

For Gluon Cloud, you also need to add the Google+ API. From the menu on the left, choose APIs & auth → APIs. Click on Google+ API under the Social APIs category and click the Enable API button at the top of the new page.

When your application is correctly configured, you can add a login method to your application on the Gluon Cloud Portal. You can find the correct application credentials from the same APIs & auth → Credentials page mentioned previously, from the dashboard of your Google application. Click on the Client ID and copy the Client ID and Client secret into the appropriate input fields in the login method form.

A step-by-step guide on how to setup and configure your Gluon Cloud application can be found here.

You can get it from here, or you can directly install it from NetBeans: click Tools→Plugins. Now select Available Plugins…​ and find Gluon Plugin.

Select the plugin and click Install, and follow the steps:

Accept the license and click Install:

Wait until the Gluon Plugin is installed.

You will find the plugin under the Installed tab:

Now that we have the plugin installed, we are going to use it to create a sample application.

In NetBeans, click File→New→Project…​ and select JavaFX on the left, and Basic Gluon Application on the right. Press Next.

Type the name of the project, find a proper location, add the package name and the main class name. Note that you can select what platforms the project will be deployed to.

Press Finish and the project will be created and opened.

If you are familiar with the JavaFXPorts project, you will see the different folders created:

There’s some default code in the main class, so we’ll be able to run it without adding a single line of code.

Before that, notice the jfxmobile-plugin is constantly evolving and by the time of this writing the version is 1.0.6, so edit the build.gradle file and update it, if needed to.

Note that it is really convenient to set the ANDROID_HOME property in the .gradle/gradle.properties file in your user home directory. It should point to an Android SDK folder on your file system.

The plugin includes a series of tasks, and to access them we just need to right click on the root of the project and select Tasks. A menu will appear, showing all the available gradle tasks.

Before deploying on mobile it’s easier to run the application on desktop first and verify that there are no errors.

To do that, select run from the task list. Verify that all the tasks are executed without errors, and the project runs fine on your desktop.

Let’s make a slight change to the code:

and run it again to see that the new message shows up on your desktop.

Now you are ready for deploying on an Android or iOS device.

For Android, for instance, select android→android from the tasks list to create the apk or android→androidInstall if you have an Android device connected to your PC.

After the build completes, the application should be installed on your device. Find the application and open it up:

If you have made it here without problems, congratulations!

If you have found any difficulties along the way, please review the lists of prerequisites and try again, and if the problems still persist, you can visit our Forums, and ask any question there if you don’t find a suitable solution.

We encourage you to start developing new projects that can be deployed on desktop, Android and iOS devices using the Gluon plugin on your favorite IDE.

You can get it from here, or you can directly install it from IntelliJ IDEA: click File→Settings and select Plugins on the left. You will see the installed plugins on your system.

Now click Browse Repositories…​, find Gluon Plugin, click Install plugin, and confirm installation:

The Gluon Plugin will be downloaded and installed. You may need to restart the IDE.

Now that we have the plugin installed, we are going to use it to create a sample application.

In IntelliJ IDEA, click File→New→Project…​ and select Gluon on the left, and press Next.

Type the package name and the main class name. Note that you can select what platforms the project will be deployed to. Press Next.

Select a valid Java JDK and press Next.

Now find a name and a location for the project and press Finish.

IDEA detects we are trying to import a Gradle project, and asks for some options. We can select the default ones:

Note that it is really convenient to set the ANDROID_HOME property in the .gradle/gradle.properties file in your user home directory. It should point to an Android SDK folder on your file system.

Press OK and the project will be imported and opened.

If you are familiar with the JavaFXPorts project, you will see the different folders created:

There’s some default code in our main class, so we’ll be able to run it without adding a single line of code.

Before that, notice the jfxmobile-plugin is constantly evolving and by the time of this writing the version is 1.0.6, so edit the build.gradle file and update it, if needed to.

The plugin includes a series of tasks, and to access them we just need to click View→Tool Windows→Gradle and a panel will show up on the right side revealing a list of all the available gradle tasks.

Before deploying on mobile it’s easier to run the application on desktop first and verify that there are no errors.

To do that, select application→run from the task list. Verify that all the tasks are executed without errors, and the project runs fine on your desktop.

Let’s make a slight change to the code:

and run it again to see that the new message shows up on your desktop.

Now you are ready for deploying on an Android or iOS device.

For Android, for instance, select other→android from the tasks list to create the apk or other→androidInstall if you have an Android device connected to your PC.

After the build completes, the application should be installed on your device. Find the application and open it up:

If you have made it here without problems, congratulations!

If you have found any difficulties along the way, please review the lists of prerequisites and try again, and if the problems still persist, you can visit our Forums, and ask any question there if you don’t find a suitable solution.

We encourage you to start developing new projects that can be deployed on desktop, Android and iOS devices using the Gluon plugin on your favorite IDE.

Now that the plugin is installed, we can use it to create a sample application.

In Eclipse, click File→New→Project… and select Basic Gluon Application from the JavaFX category and click Next.

Provide a name for the project, optionally choose a custom location to store the project and click Next.

The plugin will generate a JavaFX application class. In the following step you can configure the name of the package and the name of the class that will be generated. Furthermore, the plugin will prepare the directory structure and necessary files for every selected platform. Click Finish to complete the creation of the Gluon project.

Please note, creating a Gluon project for the first time, might take a while to complete. This is because the gradle build process will initially download all the dependencies of the project.

If you are familiar with the JavaFXPorts project, you will see the different folders created:

There’s also the default JavaFX application class, so we’ll be able to run it without adding a single line of code.

The project that is created by the plugin is a Gradle project, which already has the jfxmobile-plugin applied. The jfxmobile-plugin provides a series of gradle tasks that can be used to run your application on any of the supported platforms. To get an overview of the different tasks, open the Gradle Tasks view by selecting Window→Show View→Other…. You can find the view under the Gradle category.

In the Gradle Tasks view, select the project you just created in the Project combobox and it will load all the available gradle tasks.

Before deploying on mobile it’s easier to run the application on desktop first to verify there are no errors. Double click the run task from the list of tasks to launch the application on your desktop. After a while, a window should appear showing a label with a single line of text: “Hello JavaFX World!”. If all went fine we can make a small change to the code. Update the text of the label on line 16 to the following:

Run the application again to verify that the text inside the label has changed. As a final task, we can try and install the application on a mobile device. Again, make sure that you have followed the prerequisites of the jfxmobile plugin for the platform that you are going to install the application to. When you are ready and your mobile device is plugged in, choose the task androidInstall for Android, or launchIOSDevice for iOS. Please note, that any of these tasks might take a while to complete. Especially for iOS, because when the task is run for the first time, it has to convert the entire RoboVM and JavaFX runtime to iOS native code. If everything went successful, you should see something on your device like the screenshot below:

If you have made this far without problems, congratulations!

If you have found any difficulties along the way, please review the prerequisites and try again. If the problems persist, you can visit our Support Forums and ask any question there if you don’t find a suitable solution.

We encourage you to start developing new applications that can be deployed on desktop, Android and iOS devices using the Gluon Plugin on your favorite IDE.