Friday, December 11, 2009

Integrating Google Web Toolkit (GWT 2.0) with CodeIgniter

Integrating GWT with a php framework can be a little tricky since there isn't much documentation on the web on the subject.

First of all you will need two projects:
- one for the CodeIgniter server side PHP application
- one for the Java GWT client application


These are the main steps needed to setup GWT with CI.

1) Setup CodeIgniter configuration:
- change in "config.php" the following setttings:

$config['uri_protocol'] = "PATH_INFO";
$config['enable_query_strings'] = TRUE;


These are required only in development mode to allow GET variables in url . For production use you can revert to your original settings.

2) Setup the host view
Normally GWT starts up from a "host" html file, but in CI this needs to be done from inside a view.
Let's assume that "gwthost.php" is the view file where you want to display the GWT Application:

<!-- the rest of your HTML here -->

<script type="text/javascript" language="javascript"
src="GWT_MODULE/GWT_MODULE.nocache.js"></script>

<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1'
style="position:absolute;width:0;height:0;border:0"></iframe>

<!-- we define a place where the GWT App will show up -->
<div id = "gwt_container"> </div>


GWT_MODULE is the name of the module you'll create for your GWT Project (step 3)

You will load the view as usual from a controller function:
/* controller test.php */

function showGWT(){
$this->load->view('gwthost');
}


3) In this step we will configure the GWT Application to run without the built in server.

I assume you successfully installed GWT SDK 2.0 and Eclipse plugin and that you are able to compile and run the included samples. Please refer to the official google docs for reference.


  • Open or create a GWT project in Eclipse

  • first setup the compile path:

  • Click the "GWT Compile Project" button, then in the Advanced section, Additional compiler arguments enter:

    -war PATH_TO_SERVER_APP

    PATH_TO_SERVER_APP is the file system path for server application (web server folder), for example:

    -war d:\xampp\htdocs\gwttest

  • Click Compile

  • At this point, if the web server is started you should be able to access your application from a browser (http://localhost/gwttest/test/showgwt )

    remember the test.php controller ;)

    At this point we configured gwt to run in "web mode". You need to recompile the project after each modification.

    To enable "dev mode" follow the next step:
  • Open the "Run Configurations" for your project

  • In Main tab, disable "Run built-in server"

  • Go to "Arguments" tab and enter the following parameter:

  • -startupUrl http://CI_PAGE_URL

    ex:

    -startupUrl http://localhost/gwttest/test/showgwt

    If you run this configuration it will prompt you to use an url like this one:
    http://localhost/gwttest/test/showgwt?gwt.codesvr=10.0.0.1:9997


Paste this in your browser and it will prompt you to install the GWT Plugin and you should be running in "dev mode".
This means that if you change the source code you don't have to recompile the GWT application; just refresh the browser.

No comments:

Post a Comment