Reading and writing files is a very recurrent action in web applications.
Because the browser (for security reasons) prevents direct access to the user's machine from a web application, this has to be done on the server. HTML5 introduced a promising File API but that API is still very limited and not supported by all browsers. Plus, the HTML5 File API requires the use of a modern browser which is not always available.
While generating every file on the server works pretty well, it requires a lot of ressources. Beeing able to read and write files on the client without hitting the server is a feature that helps your application scale better, since you don't need to worry about server-side resources as your user base grows.
Now how do you generate file on the client in a cross-browser way ?
ClientIO to the rescue
A couple of weeks ago we introduced version 3.1 of Flash4j, our Java API for the Flash Platform. As we stated in the release announcement the goal of Flash4j is to help developers combine HTML5 and Flash technologies in an unique way to create awesome experiences.
Part of Flash4j 3.1 is a new GWT module called ClientIO. This module implements a simple GWT widget that gives access to the Flash player File System API and allows developers to read and write files on the client from any GWT-based applications. On top of the core Flash File API, ClientIO gives access to the Alive PDF and as3Xls libraries, enabling the creation of PDF and Excel files right on the client!
A Simple Example
Before using ClientIO we first need to download Flash4j and add it to the project's classpath.
Next step is to inherit the ClientIO module
<inherits name='com.emitrom.flash4j.clientio.ClientIO'/>
In the onModuleLoad method we then need to initialize the ClientIO library.
public class Gwtfile implements EntryPoint {
/**
* This is the entry point method.
*/
public void onModuleLoad() {
ClientIO.init();
//rest of the code ommited
}
}
Our example will be a slightly modified version of the default sample that gets created by the GWT Plugin for Eclipse. Instead of sending the entered text to the server we will create a PDF file.
// Create a handler for the sendButton and nameField
class MyHandler implements ClickHandler, KeyUpHandler {
/**
* Fired when the user clicks on the sendButton.
*/
public void onClick(ClickEvent event) {
writeToPDF();
}
/**
* Fired when the user types in the nameField.
*/
public void onKeyUp(KeyUpEvent event) {
if (event.getNativeKeyCode() == KeyCodes.KEY_ENTER) {
writeToPDF();
}
}
/**
* Send the name from the nameField to the server and wait for a
* response.
*/
private void writeToPDF() {
// First, we validate the input.
errorLabel.setText("");
String textToServer = pdfField.getText();
if (!FieldVerifier.isValidName(textToServer)) {
errorLabel.setText("Please enter at least four characters");
return;
}
sendButton.setEnabled(false);
// Then, we write to a PDF file on the client
PDF pdf = new PDF();
pdf.addPage();
pdf.setTextStyle(new RGBColor(0x000000));
pdf.setFont(new CoreFont(), 10);
pdf.addText(textToServer);
// save the file
ClientIO.saveFile(pdf.save(), "file.pdf");
}
}
As you can see on line 35 the API is simple and easy to use.
ClientIO offers way more features that we can cover here and we are looking to add even more powerful features.
A real world example of ClientIO at work can be seen here and here.
We can't wait to see what you will build with this new capabilityHappy coding!
The Emitrom Team
