Gluon Charm Documentation

If you happen to use NetBeans as your IDE, this plugin helps in creating a basic Gluon application project inside your IDE.

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.2.

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.

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

In NetBeans, select File→New Project…​ and under the JavaFX category, choose Basic Gluon Application. In IntelliJ, click File→New Project…​ and select Gluon.

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. For now, the manual registration process is disabled, so once you have filled in the registration form, you will receive an email with the details on how to obtain the credentials for your application.

With your user account credentials, log in into the Gluon Cloud portal, and you will be able to see the dashboard with your applications and their key and secret tokens. As a word of advise, keep them 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.

Perhaps most importantly, Glisten supports swatches, where each swatches populates a series of pre-specified CSS properties which can be used within your own CSS. The properties that are populated for each swatch are the following:

Each of these properties is simply a color along a certain color spectrum. All swatches provided by Glisten are based on the Material Design color style guide. The Glisten CSS files do not typically make use of all swatch colors, so it is also advised that any use of these colors be restrained, outside of the -primary-swatch-500, and possibly -primary-swatch-200, -primary-swatch-600, and -primary-swatch-700.

An example of how such a property could be used is shown in the sample code below:

There are a number of other properties that are available to use. Some of these are custom Glisten properties, but many are standard JavaFX CSS properties that Glisten simply modifies to the appropriate value. Some notable properties include the following (refer to the JavaFX CSS Reference Guide for more details of any that start with -fx-) :

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 host parameter defines which version of the Gluon Cloud API the client should use.

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.

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 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.WRITE_THROUGH will only work on non-final and 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.

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.0-b10, 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.0-b10, 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.