Monday, April 29, 2013

Close GWT Dilouge Box on KeyBoard ESCAPE Key

Requirement : Closeable dialogue box in GWT upon ESC key of keyboard. To achieve this we just need to override a GWT method.
private class ExtendedDialogBox extends DialogBox {

  
  protected void onPreviewNativeEvent(NativePreviewEvent event) {
   super.onPreviewNativeEvent(event);
   switch (event.getTypeInt()) {
   case Event.ONKEYDOWN:
    if (event.getNativeEvent().getKeyCode() == KeyCodes.KEY_ESCAPE) {
     hide();
    }
    break;
   }
  }
 }

Prevent Default Refresh Event in Browser Using GWT

Bit odd requirement that if anyone need to prevent default Cntrl + R or F5 event using GWT (Google Web Tool Kit). It can be done easily. In onModuleMethod of EntryPoint class just use this code.

public void onModuleLoad() {
   
         
      //disable refresh button
  Event.addNativePreviewHandler(new NativePreviewHandler() {

   public void onPreviewNativeEvent(NativePreviewEvent event) {
    switch (event.getTypeInt()) {
    case Event.ONKEYDOWN:
     NativeEvent nEvent = event.getNativeEvent();
     if (nEvent.getCtrlKey() && nEvent.getKeyCode() == 'R') {
      nEvent.preventDefault();
     }

     if (nEvent.getKeyCode() == 116) {
      nEvent.preventDefault();
     }
     break;
    }
   }
  });

  }


This will full fill the need across the GWT application. Reference : Co worker : Ruhul

Monday, April 22, 2013

Load Image from DB and Show it in browser using Google Web Toolkit



A widget that displays the image at a given URL. The image can be in 'unclipped' mode (the default) or 'clipped' mode. In clipped mode, a viewport is overlaid on top of the image so that a subset of the image will be displayed. In unclipped mode, there is no viewport - the entire image will be visible. Whether an image is in clipped or unclipped mode depends on how the image is constructed, and how it is transformed after construction. Methods will operate differently depending on the mode that the image is in. These differences are detailed in the documentation for each method.
If an image transitions between clipped mode and unclipped mode, any Element-specific attributes added by the user (including style attributes, style names, and style modifiers), except for event listeners, will be lost.
reference :

 http://google-web-toolkit.googlecode.com/svn/javadoc/1.5/com/google/gwt/user/client/ui/Image.html

http://stackoverflow.com/questions/6409587/generating-an-inline-image-with-java-gwt 

public String getImage (String id) {
       String imageDataAsString = new String();
       byte imageBytes[] = new byte[5000];
       imageBytes = imageService.getImageById(id);
return encodeasBase64(imageBytes);
}

    


//convert data to base64 string
// * base64 codec ported with GWT will not going to work , use commons codec  *
// * this method is responsible to convert byteArray to base64 
//     * encoded string 
//*org.apache.commons.codec.binary.Base64*

public String encodeasBase64(byte[] imageByteArray) {
  StringBuilder imageDataAsbase64String = new StringBuilder();
  String  encodedString = new 
           String(Base64.encodeBase64(imageByteArray));

  imageDataAsbase64String.append("data:image/jpg;base64,");

  imageDataAsbase64String.append(encodedString);

  return imageDataAsbase64String.toString();
}


// Data will come from GWT rpc call , rpc call can be initiate upon click event
public void displayImage(String result) {
    Image image = new Image(result);
    HorizontalPanel imagePanel = new HorizontalPanel();
    
    DialogBox dialogueBox = new DialogBox();
    imagePanel.add(image);
    dialogueBox.setWidget(imagePanel);
    dialogueBox.show();
}