http:\/\/github.com\/ikai\/gwt-gae-image-gallery<\/a><\/p>\n\n\n\n
(Please excuse spaghetti code in client side GWT code, much of it was me feeling my way around GWT. I\u2019ve come to appreciate GWT quite a bit in spite of the fact that I\u2019m pretty familiar with client side development; I\u2019ll write about this in a future post).<\/p>\n\n\n\n
The 1.3.6 release<\/a> of the App Engine SDK shipped with a high performance image serving API. What this means is that a developer can take a blob key pointing to image data stored in the blobstore<\/a> and call getServingUrl() to create a special URL for serving the image. What are the benefits to using this API?<\/p>\n\n\n\n There are a few drawbacks, however, to using the API:<\/p>\n\n\n\n It\u2019ll be best if we gave a quick refresher course on the blobstore before we begin. Here\u2019s the standard flow for a blobstore upload:<\/p>\n\n\n\n Got it? Now we can talk about image serving.<\/p>\n\n\n\n Once we have a blob key (step 3 of a Blobstore upload), we can do interesting things with it. First, we\u2019ll need to create an instance of the ImagesService:<\/p>\n\n\n\n Once we have an instance, we pass the blob key to getServingUrl and get back a URL:<\/p>\n\n\n\n This can sometimes take several hundred milliseconds to a few seconds to generate, so it\u2019s almost always a good idea to run this on write as opposed to first read. Subsequent calls should be faster, but they may not be as fast as reading this value from a datastore entity property or memcache. Since this value doesn\u2019t change, it\u2019s a good idea to store it. On the local dev server, this URL looks something like this:<\/p>\n\n\n\n In production, however, this will return a URL that looks like this:<\/p>\n\n\n\n (Cute dogs below) You\u2019ve already saved yourself the trouble of writing a handler. What\u2019s really nice about this URL is that you can perform operations on it just by appending parameters. Let\u2019s say we wanted to crop our image to be no larger than 200\u00d7200, yet retain scale. We\u2019d simply append \u201c=s200\u201d to the end of the image:<\/p>\n\n\n\n (Looks like this) We can also crop the image by appending a \u201c-c\u201d to the size parameter:<\/p>\n\n\n\n (Looks like this \u2013 compare with above)<\/p>\n\n\n\n Note that we can also generate these URLs programmatically using the overloaded version of getServingUrl<\/a> that also accepts a size and crop parameter.<\/p>\n\n\n\n So now that we\u2019ve got all that done, let\u2019s get it working with GWT. It\u2019s important that we understand how it all works, because GWT\u2019s single-page, Javascript-generated content model must be taken into account. Let\u2019s draw our upload widget. We\u2019ll be using UiBinder:<\/p>\n\n\n\n We\u2019ll create our Composite class as follows:<\/p>\n\n\n\n Here\u2019s the corresponding XML file:<\/p>\n\n\n\n (We\u2019ll add more to this later)<\/p>\n\n\n\n When we discussed the Blobstore, we mentioned that each upload form has a different POST location corresponding to the upload session. We\u2019ll have to add a GWT-RPC component to generate and return a URL. Let\u2019s do that now:<\/p>\n\n\n\n Our IDE will nag us to generate the corresponding Async interface if we have a GWT plugin:<\/p>\n\n\n\n We\u2019ll need to write the code on the server side:<\/p>\n\n\n\n This is pretty straightforward. We\u2019ll want to invoke this service on the client side when we build the form. Let\u2019s add this to UploadPhoto:<\/p>\n\n\n\n This is fairly standard GWT RPC<\/a>.<\/p>\n\n\n\n So that concludes the GWT part of it. We mentioned an upload callback. Let\u2019s implement that now:<\/p>\n\n\n\n We\u2019ll probably want to display the image we just uploaded in the client. Let\u2019s add a line line of code to register a SubmitCompleteHandler to do this:<\/p>\n\n\n\n And we\u2019re done!<\/p>\n\n\n\n I\u2019ve got the code for this project here:<\/p>\n\n\n\n http:\/\/github.com\/ikai\/gwt-gae-image-gallery<\/a><\/p>\n\n\n\n Just a warning, this is a bit different from the sample code above. I wrote this post after I wrote the code, extrapolating the bare minimum to make this work. The sample code above has experimental tagging, delete and catches logins. I\u2019m adding features to it simply to see what else can be done, so expect changes. I\u2019m aware of a few of the bugs with the code, and I\u2019ll get around to fixing them, but again, it\u2019s a demo project, so keep realistic expectations. As far as I can tell, however, the code above should be runnable locally and deployable (once you have enabled billing for blobstore).<\/p>\n\n\n\n Happy developing!<\/p>\n","protected":false},"excerpt":{"rendered":" I\u2019ve been working on an image sharing application using GWT and App Engine to familiarize myself with the newer aspects of GWT. The project and … Read More<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_generate-full-width-content":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/ikaisays.com\/wp-json\/wp\/v2\/posts\/2276"}],"collection":[{"href":"https:\/\/ikaisays.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ikaisays.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ikaisays.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ikaisays.com\/wp-json\/wp\/v2\/comments?post=2276"}],"version-history":[{"count":1,"href":"https:\/\/ikaisays.com\/wp-json\/wp\/v2\/posts\/2276\/revisions"}],"predecessor-version":[{"id":2277,"href":"https:\/\/ikaisays.com\/wp-json\/wp\/v2\/posts\/2276\/revisions\/2277"}],"wp:attachment":[{"href":"https:\/\/ikaisays.com\/wp-json\/wp\/v2\/media?parent=2276"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ikaisays.com\/wp-json\/wp\/v2\/categories?post=2276"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ikaisays.com\/wp-json\/wp\/v2\/tags?post=2276"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Blobstore crash course<\/h2>\n\n\n\n
Using the image serving URL<\/h2>\n\n\n\n
ImagesService imagesService = ImagesServiceFactory.getImagesService();\n<\/pre>\n\n\n\n
String imageUrl = imagesService.getServingUrl(blobKey);\n<\/pre>\n\n\n\n
\/_ah\/img\/eq871HJL_bYxhWQbTeYYoA<\/pre>\n\n\n\n
http:\/\/lh5.ggpht.com\/2PQk0vDo8Bn8oiPba2gtGlDfd1ciD0H0MLrixcT12FCDQEm2oyMW9ErJX_-ZzOHBWbYBKzevK0BY6cxdZ3cxf_37<\/pre>\n\n\n\n
![](\"http:\/\/lh5.ggpht.com\/2PQk0vDo8Bn8oiPba2gtGlDfd1ciD0H0MLrixcT12FCDQEm2oyMW9ErJX_-ZzOHBWbYBKzevK0BY6cxdZ3cxf_37=s500\")
http:\/\/lh5.ggpht.com\/2PQk0vDo8Bn8oiPba2gtGlDfd1ciD0H0MLrixcT12FCDQEm2oyMW9ErJX_-ZzOHBWbYBKzevK0BY6cxdZ3cxf_37=s144<\/pre>\n\n\n\n
![\"\"](\"http:\/\/lh5.ggpht.com\/2PQk0vDo8Bn8oiPba2gtGlDfd1ciD0H0MLrixcT12FCDQEm2oyMW9ErJX_-ZzOHBWbYBKzevK0BY6cxdZ3cxf_37=s144\")
http:\/\/lh5.ggpht.com\/2PQk0vDo8Bn8oiPba2gtGlDfd1ciD0H0MLrixcT12FCDQEm2oyMW9ErJX_-ZzOHBWbYBKzevK0BY6cxdZ3cxf_37=s144-c<\/pre>\n\n\n\n
![\"\"\/](\"http:\/\/lh5.ggpht.com\/2PQk0vDo8Bn8oiPba2gtGlDfd1ciD0H0MLrixcT12FCDQEm2oyMW9ErJX_-ZzOHBWbYBKzevK0BY6cxdZ3cxf_37=s144-c\")
Adding GWT<\/h2>\n\n\n\n
public class UploadPhoto extends Composite {\n\n private static UploadPhotoUiBinder uiBinder = GWT.create(UploadPhotoUiBinder.class);\n\n UserImageServiceAsync userImageService = GWT.create(UserImageService.class);\n\n interface UploadPhotoUiBinder extends UiBinder {}\n\n @UiField\n Button uploadButton;\n\n @UiField\n FormPanel uploadForm;\n\n @UiField\n FileUpload uploadField;\n\n public UploadPhoto(final LoginInfo loginInfo) {\n initWidget(uiBinder.createAndBindUi(this));\n }\n\n}\n<\/pre>\n\n\n\n<!DOCTYPE ui:UiBinder SYSTEM \"http:\/\/dl.google.com\/gwt\/DTD\/xhtml.ent\">\n<ui:UiBinder xmlns:ui=\"urn:ui:com.google.gwt.uibinder\"\n\txmlns:g=\"urn:import:com.google.gwt.user.client.ui\">\n\t<g:FormPanel ui:field=\"uploadForm\">\n\t\t<g:HorizontalPanel>\n\t\t\t<g:FileUpload ui:field=\"uploadField\"><\/g:FileUpload>\n\t\t\t<g:Button ui:field=\"uploadButton\"><\/g:Button>\n\t\t<\/g:HorizontalPanel>\n\t<\/g:FormPanel>\n<\/ui:UiBinder> \n<\/pre>\n\n\n\n
\/\/ UserImageService.java\n@RemoteServiceRelativePath(\"images\")\npublic interface UserImageService extends RemoteService {\n public String getBlobstoreUploadUrl();\n}\n<\/pre>\n\n\n\n\/\/ UserImageServiceAsync.java\npublic interface UserImageServiceAsync {\n public void getBlobstoreUploadUrl(AsyncCallback callback);\n}\n<\/pre>\n\n\n\n\/\/ UserImageServiceImpl.java\n@SuppressWarnings(\"serial\")\npublic class UserImageServiceImpl extends RemoteServiceServlet implements UserImageService {\n\n @Override\n public String getBlobstoreUploadUrl() {\n BlobstoreService blobstoreService = BlobstoreServiceFactory.getBlobstoreService();\n return blobstoreService.createUploadUrl(\"\/upload\");\n }\n\n}\n<\/pre>\n\n\n\npublic class UploadPhoto extends Composite {\n\nprivate static UploadPhotoUiBinder uiBinder = GWT.create(UploadPhotoUiBinder.class);\nUserImageServiceAsync userImageService = GWT.create(UserImageService.class);\n\ninterface UploadPhotoUiBinder extends UiBinder {}\n\n @UiField\n Button uploadButton;\n\n @UiField\n FormPanel uploadForm;\n\n @UiField\n FileUpload uploadField;\n\n public UploadPhoto() {\n initWidget(uiBinder.createAndBindUi(this));\n\n \/\/ Disable the button until we get the URL to POST to\n uploadButton.setText(\"Loading...\");\n uploadForm.setEncoding(FormPanel.ENCODING_MULTIPART);\n uploadForm.setMethod(FormPanel.METHOD_POST);\n uploadButton.setEnabled(false);\n uploadField.setName(\"image\");\n\n \/\/ Now we use out GWT-RPC service and get an URL\n startNewBlobstoreSession();\n\n \/\/ Once we've hit submit and it's complete, let's set the form to a new session.\n \/\/ We could also have probably done this on the onClick handler\n uploadForm.addSubmitCompleteHandler(new FormPanel.SubmitCompleteHandler() {\n\n @Override\n public void onSubmitComplete(SubmitCompleteEvent event) {\n uploadForm.reset();\n startNewBlobstoreSession();\n }\n });\n }\n\n private void startNewBlobstoreSession() {\n userImageService.getBlobstoreUploadUrl(new AsyncCallback() {\n\n @Override\n public void onSuccess(String result) {\n uploadForm.setAction(result);\n uploadButton.setText(\"Upload\");\n uploadButton.setEnabled(true);\n }\n\n @Override\n public void onFailure(Throwable caught) {\n \/\/ We probably want to do something here\n }\n });\n }\n\n @UiHandler(\"uploadButton\")\n void onSubmit(ClickEvent e) {\n uploadForm.submit();\n }\n\n}\n<\/pre>\n\n\n\n\/**\n * @author Ikai Lan\n * \n * This is the servlet that handles the callback after the blobstore\n * upload has completed. After the blobstore handler completes, it POSTs\n * to the callback URL, which must return a redirect. We redirect to the\n * GET portion of this servlet which sends back a key. GWT needs this\n * Key to make another request to get the image serving URL. This adds\n * an extra request, but the reason we do this is so that GWT has a Key\n * to work with to manage the Image object. Note the content-type. We\n * *need* to set this to get this to work. On the GWT side, we'll take\n * this and show the image that was uploaded.\n * \n *\/\n@SuppressWarnings(\"serial\")\npublic class UploadServlet extends HttpServlet {\n\tprivate static final Logger log = Logger.getLogger(UploadServlet.class\n\t\t\t.getName());\n\n\tprivate BlobstoreService blobstoreService = BlobstoreServiceFactory\n\t\t\t.getBlobstoreService();\n\n\tpublic void doPost(HttpServletRequest req, HttpServletResponse res)\n\t\t\tthrows ServletException, IOException {\n\n\t\tMap blobs = blobstoreService.getUploadedBlobs(req);\n\t\tBlobKey blobKey = blobs.get(\"image\");\n\n\t\tif (blobKey == null) {\n\t\t\t\/\/ Uh ... something went really wrong here\n\t\t} else {\n\n\t\t\tImagesService imagesService = ImagesServiceFactory\n\t\t\t\t\t.getImagesService();\n\n\t\t\t\/\/ Get the image serving URL\n\t\t\tString imageUrl = imagesService.getServingUrl(blobKey);\n\n\t\t\t\/\/ For the sake of clarity, we'll use low-level entities\n\t\t\tEntity uploadedImage = new Entity(\"UploadedImage\");\n\t\t\tuploadedImage.setProperty(\"blobKey\", blobKey);\n\t\t\tuploadedImage.setProperty(UploadedImage.CREATED_AT, new Date());\n\n\t\t\t\/\/ Highly unlikely we'll ever filter on this property\n\t\t\tuploadedImage.setUnindexedProperty(UploadedImage.SERVING_URL,\n\t\t\t\t\timageUrl);\n\n\t\t\tDatastoreService datastore = DatastoreServiceFactory\n\t\t\t\t\t.getDatastoreService();\n\t\t\tdatastore.put(uploadedImage);\n\n\t\t\tres.sendRedirect(\"\/upload?imageUrl=\" + imageUrl);\n\t\t}\n\t}\n\n\t@Override\n\tprotected void doGet(HttpServletRequest req, HttpServletResponse resp)\n\t\t\tthrows ServletException, IOException {\n\n\t\tString imageUrl = req.getParameter(\"imageUrl\");\n\t\tresp.setHeader(\"Content-Type\", \"text\/html\");\n\n\t\t\/\/ This is a bit hacky, but it'll work. We'll use this key in an Async\n\t\t\/\/ service to\n\t\t\/\/ fetch the image and image information\n\t\tresp.getWriter().println(imageUrl);\n\n\t}\n}\n<\/pre>\n\n\n\n\tpublic void onSubmitComplete(SubmitCompleteEvent event) {\n\t\tuploadForm.reset();\n\t\tstartNewBlobstoreSession();\n\n\t\t\/\/ This is what gets the result back - the content-type *must* be\n\t\t\/\/ text-html\n\t\tString imageUrl = event.getResults();\n\t\tImage image = new Image();\n\t\timage.setUrl(imageUrl);\n\n\t\tfinal PopupPanel imagePopup = new PopupPanel(true);\n\t\timagePopup.setWidget(image);\n\n\t\t\/\/ Add some effects\n\t\timagePopup.setAnimationEnabled(true); \/\/ animate opening the image\n\t\timagePopup.setGlassEnabled(true); \/\/ darken everything under the image\n\t\timagePopup.setAutoHideEnabled(true); \/\/ close image when the user clicks\n\t\t\t\t\t\t\t\t\t\t\t\t\/\/ outside it\n\t\timagePopup.center(); \/\/ center the image\n\n\t}\n<\/pre>\n\n\n\nGet the code<\/h2>\n\n\n\n