Create Panel in HTML

<script type="text/javascript">
function openDialog(contents)
{
    document.getElementById("glass").style.display='block';
    document.getElementById("panel").style.display='block';
}

function closeDialog()
{
    document.getElementById("glass").style.display='none';
    document.getElementById("panel").style.display='none';
}

</script>

<input type="button" value="Open Dialog" onclick="openDialog()" />

<div id="glass" style="position: absolute; left: 0px; top: 0px; visibility: visible; width: 100%; height: 100%; display: block; background-color: black; opacity: 0.3; display: none;"></div>
<div id="panel" style="position: absolute; left: 10%; top: 10%; overflow: visible; border: 3px solid #BABBBC; background:  #F3EBD6; width: 80%; height: 80%; padding: 5px; display: none;">
    <input type="button" onclick="closeDialog()" value="Close" />
</div>

Using GWT Deferred-binding to use different implementation classes per browser

Salam,

Some times you face a situation where you need to do some think in GWT code like that:

if (Window.Navigator.getUserAgent().contains("Gecko")) // 
{
   // do some thing
}else if (Window.Navigator.getUserAgent().contains("MSIE 8.0")) // IE 8
{
   // do other thing
}else
{
   // do default
}

This is good in some cases, but in others, you should find a way to apply polymorphism in GWT.

The concept of polymorphism is applied using Deferred Binding, let's see an example.

Create a new GWT project and add a module "com.mycompany.project.client.ImageViewer"

First, Create a new Class "SayHello":

package com.mycompany.project.client;


public class SayHello
{
    public String sayHello()
    {
        return "Default";
    }
}

And create two classes "SayHelloGecko" and "SayHelloIE":

package com.mycompany.project.client;

public class SayHelloGecko extends SayHello
{
    @Override
    public String sayHello()
    {
        return "Gecko";
    }
}

package com.mycompany.project.client;

public class SayhelloIE extends SayHello
{
    @Override
    public String sayHello()
    {
        return "IE";
    }
}

And here's the code of the EntryPoint class:

package com.mycompany.project.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.HTML;
import com.google.gwt.user.client.ui.RootPanel;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class ImageViewer implements EntryPoint
{
    public void onModuleLoad()
    {
        System.out.println(Window.Navigator.getUserAgent());
        RootPanel rootPanel = RootPanel.get();
        rootPanel.add(new HTML(((SayHello)GWT.create(SayHello.class)).sayHello()));
    }
}

Now, let's modify "ImageViewer.gwt.xml":

<module>
    <inherits name="com.google.gwt.user.User" />
    <inherits name="com.google.gwt.user.theme.standard.Standard" />
    <entry-point class="com.mycompany.project.client.ImageViewer" />

    <!-- Fall through to this rule is the browser isn't IE or Mozilla -->
    <replace-with class="com.mycompany.project.client.SayHello">
        <when-type-is class="com.mycompany.project.client.SayHello" />
    </replace-with>

    <!-- Mozilla needs a different SayHello implementation -->
    <replace-with class="com.mycompany.project.client.SayHelloGecko">
        <when-type-is class="com.mycompany.project.client.SayHello" />
        <any>
            <when-property-is name="user.agent" value="gecko" />
            <when-property-is name="user.agent" value="gecko1_8" />
        </any>
    </replace-with>

    <!-- IE has a completely different SayHello implementation -->
    <replace-with class="com.mycompany.project.client.SayhelloIE">
        <when-type-is class="com.mycompany.project.client.SayHello" />
        <when-property-is name="user.agent" value="ie8" />
    </replace-with>
</module>

Now let's test in FireFox:

And now in IE 8:

And in IE6:

Cross-site referencing in GWT

Al salamo Alykom,

basic steps to do cross-site referencing:

1- add

<add-linker name="xs" /> 

to your .gwt.xml file
2- replace all GWT-RPC by JsonpRequestBuilder

JsonpRequestBuilder requestBuilder = new JsonpRequestBuilder();
requestBuilder.setCallbackParam("callback");
requestBuilder.requestObject("http://mydomain/servlet?key=value&key=value", new AsyncCallback<JsArray<com.me.json_objects.Employee>>()
{
    public void onFailure(Throwable caught)
    {
    }
    
    public void onSuccess(com.me.json_objects.Employee result)
    {
        com.me.java_objects.Employee  emp = JsonConverterUtil.convertObjct(result);
    }
});

2.a- find a lib that convert java objects returned from business layer (in servlets) to JSON objects (http://jackson.codehaus.org/ is a great, simple to use)
Very simple really:

import org.codehaus.jackson.JsonGenerationException;
import org.codehaus.jackson.map.JsonMappingException;
import org.codehaus.jackson.map.ObjectMapper;


ObjectMapper mapper = new ObjectMapper(); // can reuse, share globally
String value = mapper.writeValueAsString( object);

2.b- Convert json objects to java objects in GWT using JavaScript Overlay Types so every JSON object coming from server will be represented using using a JavaScript Overlay class, and this object at first has a java object that accessed by your GWT code. so you will have to map JSON objects returned from JsonpRequestBuilder to reqular Java objects to use in your GWT code.

Sample json object:

package com.me.json_objects;

public class Employee
{
    protected Employee(){}
    
    public final String native getName() /*-{
        return this.name;
    }-*/;

    public final String native getLocation() /*-{
        return this.location;
    }-*/;
}

That maps to this java object:

package com.me.java_objects;

public class Employee
{

    private String name;
    private String location;
    
    public Employee(){}
    
    public void setName(String name)
    {
        this.name = name;
    }
    public String  getName() {
        return this.name;
    }

    public String getLocation(){
        return this.location;
    }
    
    public void setLocation(String loc)
    {
        this.location = loc;
    }
}

to test your code, fire up your server (say tomcat) on two different http ports, one for deploying the client appand the other to deploy the GWT application.. and try to import the gwt application into the client, .. it should work.

Two ports here because cross-site in most browsers are for app running in different hosts and/or ports.

I wish if I could provide code sample soon :)

good luck

GWT generate a strange object model for Internet Explorer (I wish if M$ kills IE for ever!)

I am working on Some GWT project that I some times need to access the GWT generated object model directory...

For Chrome and Firefox, every things goes okey, but for the stupid IE, the object model is fully different!

example:

for Ch and FF:

// TODO

gwt-log: debugging in Production mode (after deploying)

Hello guyz,

While searching, I found avery helpful GWT lib to use to debug in prod mode (i.e. after deploying the WAR file)

And it is very easy in usage and also the project home page is very documentary.

Please have a look: http://code.google.com/p/gwt-log/

Disable standard style in GWT

Hello,

To disable standard style in GWT remove the following line from ".gwt.xml" file.

<inherits name="com.google.gwt.user.theme.standard.Standard"/>