Greg Murray's Blog

jMaki supports PHP!

I am proud to announce that jMaki now has a server runtime that fully supports jMaki for PHP 5. This is in addition to JSP, JSF, and Phobos.

What does this mean for Java developers?

You now have the choice to script the front ends of your web applications on standard PHP. Your back end services can remain in Java which is well equipped for handling your transaction processing, messaging, and web services. If at some point you need Java for your services we can provide that too.

What does this mean for PHP developers?

You now have a simple way to build Ajax style applications using client centric JavaScript. jMaki is a framework that provides CSS layouts, widgets, and the glue to tie everything together. Out of the box you can use Dojo, Yahoo UI, Scriptaculous, and many other libraries together with a simple PHP call. To use jMaki you simply unzip a file into your PHP 5 web directory.

What does jMaki PHP code look like?

<?php require_once 'Jmaki.php'; ?>
<?php addWidget('dojo.tree', 'tree.json');
?>

The example above creates a Dojo tree which consumes a tree.json file that defines the tree data.

A more advanced example:

<?php require_once 'Jmaki.php'; ?>
<?php addWidget('dojo.table', null, null,
		 "{ columns: { title : 'Title', author:'Author', isbn: 'ISBN #', description:'Description'},
	rows:[
		 ['JavaScript 101', 'Lu Sckrepter','4412', 'Some long description'],
 		 ['Ajax with Java', 'Jean Bean','4413', 'Some long description']
 		]}");
?>

Here is a screen shot just in case you do believe it works.

jMaki Glue Example in PHP

Now lets look at a more advanced example using two widgets that communicate with each other by publishing events that are intercepted by some glue JavaScript code which you can define the action to take.First lets look at the PHP to define the Yahoo Map and Geocoder.

<?php require_once 'Jmaki.php'; ?>
<?php
addWidget('yahoo.map', null, "{centerLat:37.39316, centerLon:-121.947333700, height:300}");
?>
<?php addWidget('yahoo.geocoder', '../XmlhttpProxy.php');
?>

The Yahoo Geocoder publishes a event which is mapped in the jMaki config.json file to call the function jmaki.listener.geocoderlistener. The code from the config.json is as follows:

 "glue" : {
    "includes": ["glue.js"],
    "listeners": [
       {"topic" : "/yahoo/geocoder",
        "action": "call",
        "target": {
                 "object": "jmaki.listeners",
                 "functionName": "geocoderListener"
            }
       }
   ]
  }

  jmaki.geocoderListener = function(coordinates) {
      var keys = jmaki.attributes.keys();
      for (var l = 0; l < keys.length; l++) {
          if (typeof jmaki.YahooMapWrapper != 'undefined' &&
               jmaki.attributes.get(keys[l]).constructor == jmaki.YahooMapWrapper ) {
              var _map = jmaki.attributes.get(keys[l]).map;
              var centerPoint =
              	 new YGeoPoint(coordinates[0].latitude,coordinates[0].longitude);
              var marker = new YMarker(centerPoint);
              var txt = '<div style="width:160px;height:50px;"><b>' +
                 coordinates[0].address + ' ' + coordinates[0].city + ' ' +
                 coordinates[0].state + '</b&ht;</div>';
              marker.addAutoExpand(txt);
              _map.addOverlay(marker);
              _map.drawZoomAndCenter(centerPoint);
          }  
      }
  }

The graphic belo shows the resulting widgets.

Where to go next:

Download the jMaki for PHP from the jMaki Downloads Page.

Provide feedback at the jMaki Forumns.

Learn more aboutjMaki for PHP at the jMaki Home Page.

Learn more about jMaki Glue.

What else would you like to see jMaki and jMaki PHP do?

Comments

• It would be really nice if jMaki could be included in an arbitrary path.
  It's really a bad thing that it must be in the root of the web apliccation.
  We should be able to, for example, have such structure:

  |-web_application
  |-public
  | |-jMaki
  |
  |- index.php

  and still be able to include jMaki in the index.php file.
  Best regards,

  Goran Dodig

  Posted by: gdodig on November 30, 2006 at 02:03 PM

• I went through great lengths to make sure jMaki could be located anywhere in the path so you could use it in one app or share it across all apps. jMaki doesn't have to be at the root, only so if you want to share it across everything.

  You can have:

  -|web_application
  | public
  | |- jMaki
  | - index.php

  The resources directory used by jMaki need to be located in the same directory as the jMaki.php. You can include jMaki.php from any sub directory.

  Check out the sample app and try to run it the way you've described.
  

  Posted by: gmurray71 on November 30, 2006 at 04:55 PM

• That is true, I can run it from any directory that is BELLOW the onethat includes resources directory, but as soon as it is one levelabove it doesn't run.
  I checked your code and it stop's on the first if loop where you check for resorces directory. You check the $_SERVER["REQUEST_URI"] and than go down directory by directory to check for resources directory.
  The problem in the example above occurs in that REQUEST_URI is:
  http://localhost/web_application/index.php
  because it is included in index.php.
  So you check only: http://localhost/web_application/ and http://localhost/ for resources directory but the resources directory is at:
  http://localhost/web_application/public/jmaki/resources

  I hope that I explained it clearly. :)

  I suppose the solution would be to use some kind of function or variable that would be set to base path for jmaki directory and that we could arbitrarily set.

  Goran Dodig

  Posted by: gdodig on November 30, 2006 at 06:07 PM

• Oh I see where you are coming from here. My mindset was that web apps generally have downward dependencies as to the other but I can see the need for a property and I did consider it originally.

  I appreciate the feedback and would love to hear more of your thoughts on it.

  
  

  Posted by: gmurray71 on November 30, 2006 at 06:35 PM

• While you are at it you could as well check for the$_SERVER["ORIG_PATH_INFO"] and$_SERVER['HTTP_X_REWRITE_URL']

  On the systems where PHP is running as CGI or under IISand not as apache module that is where the script path is stored and REQUEST_URI is empty.
  This is the code you could use:

  if (isset($_SERVER['REQUEST_URI'])) {
  $requestUri = $_SERVER['REQUEST_URI'];
  } elseif (isset($_SERVER['HTTP_X_REWRITE_URL'])) {
  $requestUri = $_SERVER['HTTP_X_REWRITE_URL'];
  } elseif (isset($_SERVER['ORIG_PATH_INFO'])) { // IIS 5.0, PHP as CGI
  $requestUri = $_SERVER['ORIG_PATH_INFO'];
  } else {
  // handle the missing of URI
  }

  Best regards,
  Goran Dodig
  

  Posted by: gdodig on December 01, 2006 at 01:05 AM

• Thank you Goran! The proper Request URI will show up in the next rev. I would like to do a little more testing before respinning the build.

  Posted by: gmurray71 on December 01, 2006 at 01:21 AM

• Greg, could you explain how to get the current widget value in PHP? Also would be nice to get explanation about addWidget() call format. Can I set widget id manually, like this: addWidget('dojo.tree', null, null, null, 'myTree')? And one more question. How to make jMaki menu aligned to left?

  Posted by: jjoss on January 03, 2007 at 04:22 AM

• 
  You need to get a direct handle on the widget to get the value and having a the ID for the widget is necessary. The arguments for the jMaki PHP are the following:

  
  addWidget(name, service, args, id)

  
  So the following should work:

  
  addWidget('dojo.tree', null, null, null, 'myTree')

  
  To access the widget you can use the following from JavaScript:

  
  var tree = jmaki.attributes.get('myTree');

  
  Once you have a handle on the object you can make any calls on the widget you like.

  
  Another approach would be to register a glue listener to listen for events published by the Tree. For details on Glue you can see:

  
  jMaki Glue Documentation

  Basically you could add the following code to the /resources/glue.js file:

  
  jmaki.addGlueListener({topic : "/dojo/tree",action: "call", target: { object: "jmaki.TreeListener",functionName: "treeHandler"}});

  jmaki.TreeListener = {

  treeHandler : function(args) {
  // handle the published events.
  }

  }

  
  The jMaki Menu is pretty easy to modify once you know where the widget CSS is. From the /web where you deployed the application open the
  /resources/jmaki/menu/component.css file and adjust the following:

  .jmakiMenuTop{
  background:#3399FF;
  margin-top: 3px;
  text-decoration:underline;
  float:right;
  color: #FFFFFF;
  }

  
  Change the:

  float:right

  to:

  float:left
  

  Posted by: gmurray71 on January 03, 2007 at 10:07 PM

• Greg, the line jmaki.attributes.get('yooo') returns some object. But when I use the code below I get undefined instead of the current text.

  in PHP: addWidget('dojo.inlineedit', null, null, 'Edit Me', 'yooo');
  in JS: input type="button" value="Show Selected Value" onclick="alert(jmaki.attributes.get('yooo').value); return false;"
  Something wrong in my code?

  Posted by: jjoss on January 09, 2007 at 06:25 AM

• 
  Hi jjoss,

  You almost have it.

  
  We try to use standard functions for getValue() so this will work:

  <?php
  addWidget('dojo.inlineedit', null, null, "Edit Me", 'd1');
  ?>

  <form action="#">
  <input type="button" onclick="alert(jmaki.attributes.get('d1').getValue())" />
  </form>

  
  Let me know is this gives you problems.
  

  Posted by: gmurray71 on January 09, 2007 at 08:44 AM

• Greg, with your example I get just an empty alert window. No error, but no text either. I've tried to press the button without editing text in control and after I edited it. I use IE 7 and Firefox 1.5.
  I'm not profi in JavaScript. Maybe there is a way to print contents of the object which I get with jmaki.attributes.get('d1')? Something like toString() fuction in Java. Or maybe some debugger to get the list of available functions and properties? Which tools do you use to develop and debug AJAX apps?

  Posted by: jjoss on January 10, 2007 at 01:56 AM

• Hi again,

  Firebug will let you debug this. It is what I used to create and test the example.

  Download it for Firefox here:

  https://addons.mozilla.org/firefox/1843/

  If you don't see a message here could you contact directly via email? gregory dot murray at sun dot com.

  We will get this working for you some way or another.

  Posted by: gmurray71 on January 10, 2007 at 07:37 AM

This work is licensed under a Creative Commons License.