CloudRail JavaFX Tutorial: Simple Cloud Downloader
In this tutorial we will develop a small JavaFX sample application that integrates with a number of cloud storage providers via their APIs using CloudRail. The application will allow a user to login to his desired cloud storage account and download a picture from his root folder. It uses CloudRail for Cloud Storage to integrate Dropbox, Google Drive, OneDrive and Box.com via a unified API. Of course this is not be the most spectacular application you could imagine but it will do the job. You can download the source code of the project here.
- The latest Java JDK 8 (which includes JavaFX 8)
- Eclipse with e(fx)clipse plugin. You can get it from the e(fx)clipse website or use the update site
- Scene Builder 8.0
- Set the path to the Scene Builder in Eclipse (Preferences -> JavaFX)
If you haven’t done it yet, create a new JavaFX project. Go to File -> New -> Other… and select JavaFX Project. Specify a name for your project and press finish. The layout we need for our test application is rather simple. We will add a button for every cloud storage provider (namely Google Drive, Box, Dropbox and OneDrive) and underneath an ImageView where we will display the image we download from the users storage account. The final result could look like this:
The code behind it really isn’t special since it only contains a couple of Buttons and an ImageView. As you may realize i already added ids or listeners to all of the elements such that we can access them later. We also set our Main class as the controller for this layout. Here is the MainView.fxml file:
In order to display our layout when we run our application we need to extend the start() method of our main class which should have been generated when we created the project. The start method needs to load our layout and attach it to the current scene. The adjusted start() method should look like this:
Now you should be able to run the application. Clicking the buttons doesn’t trigger anything yet but we will take care of that in the next sections.
In order to use CloudRail, we create a libs/ folder in our project, download the .jar file here, copy it to the previously created folder and add it to the build path (right click the file -> Build Path -> Add to Build Path). For the integrations to work, you need to obtain credentials for every service if you don’t own those already. The guide on how to get them can be found here.
Implement Click Listeners
Let us implement the click listeners for all of the buttons. The listeners will basically instantiate the correct cloud storage service and call the downloadImage() method which will use the service instance to download and display the image. We add the following code to our Main class:
The Authentication Process
To understand the different components let us first clarify how the authentication process works. Whenever you call a method of one of the services which is the first call ever made to that service, CloudRail will trigger the authentication process. This opens a website of the called service where the user needs to login. If the user does so correctly, he will be redirected to a chosen url (redirect url). The url comes with a code parameter which will be extracted by the CloudRail SDK. This code is then exchanged for an access token. This token will then be used to make calls to the service’s API.
Since the SDK works both on desktop applications as well as on a server there is no common way on where / how to open the login page of a service. In desktop environments you could just open the url in the users browser, whereas on a server you probably just want to redirect the user to that site. To capture both use cases, the first parameter to every service is an instance of a class implementing the RedirectReceiver interface. This interface contains only one method which gets the url that shall be opened somehow and expects the url with the code parameter as a return value.
For JavaFX we provide a JavaFXReceiver class which takes the passed url, opens it within a WebView, catches the redirect and returns the url with the code parameter. You can choose any redirect url that you like as long as it is registered as a redirect url for all of the services. This works since we can catch the redirect through the WebView before it is even executed. For the same reason, the value of state doesn’t matter as well.
Download and display Image
The last step that is missing is to download and display the test image. For this purpose upload a picture to the root folder of all of your cloud services and call it test.jpg. This is the picture that will be displayed later. To achieve this, we add the following code to our Main class:
This code triggers the authentication process, downloads the image from the selected service and displays it within the ImageView. Here are some screenshots which show the final application:
Conclusion JavaFX & CloudRail
Integrating web services couldn’t be easier! I hope this quick tutorial gave you a good idea on how easy it is to use CloudRail in JavaFX and how little code is actually needed. Leave a comment if you have any suggestions on how to improve this tutorial or if you have issues running the example.