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>

How easy to parse JSON in JS

It is that easy!

var myObj = eval("obj={'name':'ali', 'age':'20'}");

document.write (myObj.name + ' ' + myObj.age);

Always encode the return URL

Sometimes, we need to put some url as a parameter in the page url, example:

https://open.login.yahoo.com/openid/yrp/signin?returnUrl=http%3A%2F%2Fmail.yahoo.com&rpcrumb=TzwDznuzRzH&.src=ym

The value of parameter "returnUrl" is an encoded url (http%3A%2F%2Fmail.yahoo.com)

So, whenever you want to put a URL as a parameter, you have to URL encode it.

(you can use JS function encodeUrlComponenet

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

Playing with JavaScript

Hello folks,

I am a programmer that dislike working with the client-side in web programming.
I dislike to do somethings like on button click, go and disable the textbox, and alike.

Nowadays I am working with GWT that do that some of that dirty work for me. but I really wanted to try doing some Javasript myself, and the following is a simple valueless example, just for fun :)

<html>
  <head>
    <script language="Javascript" type="text/javascript">
    function submitUserAction(rowId)
    {
        var flage = confirm("Are you sure?");
        if(flage)
        {
            deleteRow(rowId);
        }
    }
    
    function deleteRow(rowId)
    {
        
        alert("deleting Row " + document.getElementById("rowId").value );
    }
    
    function changeCascade()
    {
        document.getElementById("lbl").value = document.getElementById("bla").value;
        document.getElementById("rowId").value = document.getElementById("bla").value;
        
        document.getElementById("lbl").size = document.getElementById("bla").size++;
    }
    
    </script>

    <title></title>
  </head>
  <body>
    <input type="button" value="click me"  onclick="submitUserAction()" />
    <input type="text" id="bla" value onkeyup="changeCascade()"  />
    <input type="hidden" id="rowId" />
    
    <input type="text" id="lbl" value= "****" />
    
  </body>
</html>

And again, it is just for fun :)