The CloudLink Media App is a Gluon code sample. Refer to the Gluon website for a full list of Gluon code samples.

In this tutorial, we’ll explain how to create an app that takes images from CloudLink to display a small banner, and deploy it on Android and iOS devices. Before you start, make sure to check the list of prerequisites for each platform, and you have installed the Gluon plugin for your IDE.

Note: This tutorial will use the plugin for NetBeans, but it works as well on IntelliJ and Eclipse.

Code: The code for this project can be found in the samples repository at GitHub. The sample is located under the directory cloudlink-media. The reader can clone this repository or create the entire project from scratch, based on the following steps.

Creating the project

Let’s create a new project using the Gluon plugin. In NetBeans, click File→New Project…​ and select Gluon on the left. Select Gluon Mobile - Single View Project from the list of available Projects:

Plugins Window

Add a proper name to the application (CloudLinkMedia), find a proper location, add the package name and change the main class name if required.

Name and Location

Press Finish and the project will be created and opened. The main class CloudLinkMedia is shown, containing the code to instantiate the view BasicView.

CloudLinkMedia class

Gluon Dashboard

For this sample, you’ll need a valid subscription to Gluon CloudLink. If you don’t have it yet, get it from here (there is also a 30-day free trial). Sign up and get a valid account on Gluon CloudLink and a link to access the Gluon Dashboard.

Open the Dashboard in your browser, and sign in using your Gluon account credentials (those provided when creating the account).

Dashboard

Go to the App Management link, and you will find a pair of key/secret tokens. Click on the download button to download the file gluoncloudlink_config.json, and then store it under your project src/main/resources/ folder.

Sign in

The content of the file is a JSON object with the key and secret that will grant access to Gluon CloudLink:

src/main/resources/gluoncloudlink_config.json
{
  "gluonCredentials": {
    "applicationKey" : "f88XXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX",
    "applicationSecret": "7fbXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
  }
}

Adding Media resources

In this sample, we’ll make use of the Media options in Gluon CloudLink to display remotely configured images. The images will be added to CloudLink by the app administrator using the Gluon Dashboard, and the app will retrieve them with a MediaClient instance.

Without further redeploys, when ever the images are changed, the app will always show the latest version stored in CloudLink.

For the sake of this sample, we have created two banners, with three variants (desktop, Android and iOS) each:

Version

Desktop

Android

iOS

1

Desktop
Android
iOS

2

Desktop
Android
iOS

We’ll add them now to CloudLink opening the Dashboard in our browser, signing in and selecting the Media Management link on the left. We can click the + button to insert media:

Add Media

The media item will be named GluonBanner. This name will be later on referred from the client app. We set it as default variant, select the Desktop platform, set the version number and browse for the first file GluonBanner1.png:

GluonBanner1.png

Next, clicking the + button on top of the Media Variant table, we’ll add two more variants: one for Android (GluonBanner1_Android.png)

GluonBanner1_Android.png

and one for iOS (GluonBanner1_iOS.png).

GluonBanner1.png

The Media Service

Back to the app, using MediaClient we can now easily retrieve the banner: using the GluonBanner identifier, we’ll get a JavaFX Image from CloudLink:

MediaClient media = new MediaClient();
Image image = media.loadImage("GluonBanner");

The variant that will be returned will ultimately depend on the platform where the app is running on.

In this sample, we’ll create a popup that shows the banner in a side popup layer. If the user clicks outside the popup, it will close. But every 20 seconds it will be displayed again, connecting to CloudLink to retrieve a new image. If the user taps on the banner, it will open the Gluon website in an external browser. The service will be stopped or resumed following the pause or resume app events.

MediaService.java
public class MediaService {

    private static final String REMOTE_IMAGE = "GluonBanner";
    private static final String POPUP_NAME = "SidePopupLayer";

    MediaClient media = new MediaClient();
    private ImageView imageView;

    private ScheduledExecutorService scheduler;

    public MediaService() {

        MobileApplication.getInstance().addLayerFactory(POPUP_NAME, () -> {
            imageView = new ImageView();
            imageView.setFitHeight(50);
            imageView.setPreserveRatio(true);
            imageView.setOnMouseClicked(e -> {
                Services.get(BrowserService.class).ifPresent(b -> {
                    try {
                        b.launchExternalBrowser("http://gluonhq.com");
                    } catch (IOException | URISyntaxException ex) { }
                });
            });
            HBox adsBox = new HBox(imageView);
            adsBox.getStyleClass().add("mediaBox");
            return new SidePopupView(adsBox, Side.BOTTOM, false);
        });

        Services.get(LifecycleService.class).ifPresent(service -> {
            service.addListener(LifecycleEvent.PAUSE, this::stopExecutor);
            service.addListener(LifecycleEvent.RESUME, this::startExecutor);
        });
        startExecutor();
    }

    private void startExecutor() {
        stopExecutor();
        scheduler = Executors.newScheduledThreadPool(1);
        scheduler.scheduleAtFixedRate(() -> {
            Platform.runLater(() -> {
                MobileApplication.getInstance().hideLayer(POPUP_NAME);
                imageView.setImage(getMedia());
                MobileApplication.getInstance().showLayer(POPUP_NAME);
            });
        }, 5, 20, TimeUnit.SECONDS);

    }

    public void stopExecutor() {
        if (scheduler != null) {
            scheduler.shutdown();
        }
    }

    private Image getMedia() {
        try {
            return media.loadImage(REMOTE_IMAGE);
        } catch (IOException ex) {
            System.out.println("Error loading " + REMOTE_IMAGE + ": " + ex);
        }
        return null;
    }
}

Finally, all we need to do is launch the service upon startup.

CloudLinkMedia.java
public class CloudLinkMedia extends MobileApplication {

    private MediaService service;

    @Override
    public void postInit(Scene scene) {
        ...

        service = new MediaService();
    }

    @Override
    public void stop() throws Exception {
        if (service != null) {
            service.stopExecutor();
        }
    }
}

Run on Desktop

Run the app on desktop and test it.

App with banner 1

If the banner is showing up, now it’s time to make some changes with the Dashboard help.

Edit the desktop variant and upload the second banner.

GluonBanner2.png

The table will show the second version of this variant:

GluonBanner2.png

If the app was already running on desktop, or if you launch it again, you will see the new image.

App with banner 2

Run on Mobile

Deploy now to mobile, and you should get the Android or iOS variant, with the banner 1 or 2 depending on the latest version added to the Dashboard.

Android app

Conclusion

During this tutorial we have accomplished several tasks:

  • We have used the Gluon Dashboard to create media variants that can be retrieved from the app, based on the platform it is running on.

  • We have created a client project that can be deployed on Desktop, Andriod and iOS, that includes a very simple Media service, using the MediaClient API to retrieve different image from the CloudLink.

  • We have modified the media variants, and the app already reflected those changes. One of the main adventages of having some of the app’s media resources added to CloudLink is the ability to change them, without the need of redeployment the application. Also, each variant can be specifically designed for a given platform.

If you have made it this far, congratulations, we hope this sample and the documentation was helpful to you! In case you have any questions, your first stop should be the Gluon support page, where you can access the CloudLink latest documentation. Gluon also recommends the community to support each other over at the Gluon StackOverflow page. Finally, Gluon offers commercial support as well, to kick start your projects.