USE CLOUD CONNECT

Transcript

In this short video we will discuss the new cloud connect feature. This feature makes it trivial to build GUI applications that run on multiple devices with one design.

We’ll start by defining “cloud connect”. Cloud connect synchronizes the GUI builder with devices seamlessly.

When you make changes within the GUI builder those changes are instantly reflected on devices connected to your account via the cloud.

This works by storing the GUI builder XML file and the resource file in the cloud. The Codename One Build app fetches the up to date file and displays a preview.

Note that this requires an up to date version of Codename One Build and the GUI builder.

To start with cloud connect we need to click the cloud connect button in the new GUI builder which is currently the top right most button in the UI

Notice that this might prompt you for your login credentials!

Now that we activated cloud connect in the GUI builder we can go to the Codename One Build app and open the side menu.

Notice that if the cloud connect option doesn’t appear you might need to kill and restart the app.

This effectively shows the current UI you saved in the GUI builder. So lets switch to a live split screen with my actual devices.

I edit username to E-Mail using a long click. I press save or command-s. This instantly updates the devices with the change I made so I can preview how it looks there which we can see in full screen here.

I can also customize GUI builder styles such as background transparency as I use here. This allows me to make the text fields translucent on iOS. This applies to all styles supported by the GUI builder. Notice that this differs from the styles defined in the theme. Those can be changed as well and images can be modified or added too.

I want to stress that this isn’t a screenshot or even a mockup. This is an actual preview UI that’s as functional as the preview you would see in the GUI builder. I can edit the text and “feel” the UI on the device, it’s as close as possible to the real UI we see when we work with the device. As such I find it remarkably useful, I disable the screensaver functionality on my devices and can instantly see how a UI would feel as I develop it.

Thanks for watching, I hope you found this helpful