Friday, 18 May 2012

client bundle using gwt

Paste thisproject.gwt.xml
 <inherits name="com.google.gwt.resources.Resources" />

For image ,textfile and pdf

1)create  a folder image in workspace  client folder(with some image) sameas create text folder and paste any .txt file and last create a pdf folder and any pd f paste in folder

2) go to client folder in ide than click new and select client bundle .

3)clientbundle.java

package com.ruchi.bundle.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.AbsolutePanel;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.Frame;
import com.google.gwt.user.client.ui.Grid;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.PushButton;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextArea;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class ClientBundle implements EntryPoint {
/**
* The message displayed to the user when the server cannot be reached or
* returns an error.
*/
private static final String SERVER_ERROR = "An error occurred while "
+ "attempting to contact the server. Please check your network "
+ "connection and try again.";

/**
* Create a remote service proxy to talk to the server-side Greeting service.
*/

/**
* This is the entry point method.
*/
public void onModuleLoad() {
 Grid grid = new Grid(5, 5);
       grid.setBorderWidth(1);

       int numRows = grid.getRowCount();
       int numColumns = grid.getColumnCount();
       for (int row = 0; row < numRows; row++)
       {
         for (int col = 0; col < numColumns; col++)
         {
             grid.setWidget(row, col, new Image(Resource.INSTANCE.alpha1()));
           
         }
       }

       RootPanel.get().add(grid);
     //  Window.alert(Resource.INSTANCE.ruchi().getText());
     
       AbsolutePanel abs=new AbsolutePanel();
       abs.setSize("500px","400px");
     
       TextArea myTextArea=new TextArea();
       myTextArea.setSize("400px","300px");
       abs.add(myTextArea);
     
       myTextArea.setText(Resource.INSTANCE.ruchi().getText());
       RootPanel.get().add(abs);
     
       HorizontalPanel hrzz=new HorizontalPanel();
       hrzz.setSize("1000px", "500px");
       Frame f=new Frame(Resource.INSTANCE.taxUpdatesForJune2012Exams().getUrl());
       f.setSize("1000px", "500px");
       hrzz.add(f);
       RootPanel.get().add(hrzz);
     
   }
}


4) Resource.java

package com.ruchi.bundle.client;

import com.google.gwt.core.client.GWT;
import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.DataResource;
import com.google.gwt.resources.client.ImageResource;
import com.google.gwt.resources.client.TextResource;
import com.google.gwt.resources.client.ClientBundle.Source;

public interface Resource extends ClientBundle {
public static final Resource INSTANCE =GWT.create(Resource.class);
@Source("com/ruchi/bundle/images/alpha1.jpg")
ImageResource alpha1();
@Source("com/ruchi/bundle/text/ruchi.txt")
public TextResource ruchi();
@Source("com/ruchi/bundle/pdf/Tax updates for June 2012 Exams.pdf")
DataResource taxUpdatesForJune2012Exams();

@Source("com/ruchi/bundle/images/Back.gif")
ImageResource back();

@Source("com/ruchi/bundle/images/joinus.gif")
ImageResource joinus();

@Source("com/ruchi/bundle/images/next.gif")
ImageResource next();

}


Thursday, 12 January 2012

GWT calling Flex and Flex calling GWT


Can GWT and Flex speak together?
Yes,  Flex can communicate with GWT client side very well, as they both can speak the same language (JavaScript).
How?
It is very easy, GWT can call Flex methods through native functions, and Flex can call GWT methods through external interface
Hello World example (as usual) ,
GWT calling Flex Methods:
1. Initialize Flex application (Flexy):
In “creationComplete” event add this line of code

ExternalInterface.addCallback( “sayHello”, sayHello);
“sayHello” is the java script function to call from outside flex.
sayHello is the flex function to call when someone call sayHello from outside .
2.  Create sayHello Flex function :

Function void sayHello(hello:String):void {
Alert.show(hello);
}

then compile and add Flexy.swf file in the public folder of GWT project.
3. Add SWF file to GWT Panel:
Create new panel inside your application to hold the swf file “Flexy.swf”,

Panel  swfHolder = new Panel();
swfHolder.setWidth(400);
swfHolder.setHeight(400);
swfHolder.setHtml(
"<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'"+
"id='flexy' width='100%' height='100%'"+
"codebase='http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab'>"+
"<param name='movie' value=' Flexy.swf' />"+
"<param name='quality' value='high' />"+
"<param name='bgcolor' value='#ffffff' />"+
"<param name='allowScriptAccess' value='sameDomain' />"+
"<embed src=' Flexy.swf' quality='high' bgcolor='#ffffff'"+
"width='100%' height='100%' name='flexy' align='middle'"+
"play='true'"+
"loop='false'"+
"quality='high'"+
"allowScriptAccess='sameDomain'"+
"type='application/x-shockwave-flash'"+
"pluginspage='http://www.adobe.com/go/getflashplayer'>"+
"</embed>"+
"</object>");

4.  GWT call Flex Methods:
In your main java file add a new native method

Private native void helloFlex(String  hello)/*-{
function getFlexApp(appName) {
if (navigator.appName.indexOf ("Microsoft") !=-1) {
return $wnd[appName];
} else {
return $doc[appName];
}
};
getFlexApp('Flexy').sayHello(hello);
}-*/;

Now you can call helloFlex(“hello World”) from GWT client code and it will call the flex function and show the message box inside Flex.
Flex calling GWT functions:
1. Create GWT function:

Private void helloGwt(String hello)
{
MessageBox.alert(hello);
}

2. Publish the method so Flex can call it:
The problem is that GWT converts the java code to java script so all the function names will change
We can override this by creating definition method,

Private native void defHelloGwt(Panel holderPanel)/*-{
$wnd.sayHello = function(hello){
holderPanel.@{your package name}.{class name}::helloGwt(Ljava/lang/String;)(hello);
};
}-*/;

Now we can call sayHello from flex.
3. Flex call GWT method :
From flex app we can use

ExternalInterface.call(“sayHello”,”hello world”);

And a message box in GWT will show with text “hello World” .