That's a very nice little widget there.

This would be very easy to move to the Tapestry world.  I guess it would
really depend on how much you want to keep on the client side, and how much
would have to be done on the server.  For instance, a good implementation
might render the page with the items already generated for a particular day. 
Alternatively, you could first render the day planner completely empty, then
do an Ajax call to populate the day once the page is loaded.  It really
doesn't matter.


Julian Wood wrote:
> 
> The javascript has many event hooks which fire off AJAX requests to it's
> PHP backend.
> 

It looks like there's basically just one event (let's call it updateEvent),
fired in a lot of different ways.  updateEvent takes a few different
parameters, but they're all the same no matter what the event actually is. 
You could do all this using a single listener, which then parses it out and
stores the information however you like and has a simple return code if
there's an exception thrown, or if there's a date conflict... you can make
it as smart or dumb as you want.


I'll also need to put in raw URL's to the AJAX services, directly inside the
javascript.

Have you looked at the XTile component?  It's got basically everything you
need.  There's really not much *to* Ajax, which is why I find all the new
bells and whistles of 4.1 essentially cruft considering all you're doing is
calling a page listener and maybe receiving return data to the client.


So if I can dip into specifics, I know I can get the planner to load all the
"appointments" for a week pretty easily. But how to deal with an appointment
move? A resize (change in duration)? A delete? A double click for an edit?

I'd need to understand better how your event objects are represented in
Javascript first and I didn't want to trudge through source code.  I'm
guessing that each event has a unique ID, a start and end time, a date and
some text to go along with it.  Something like:

var Events = {
   elements: {},
   eventObj: function(start, end, date, text) {
      this.start = start;
      this.end = end;
      this.date = date;
      this.text = text;
   },
   add: function(id, start, end, date, text) {
      Events.elements[id] = new Event.eventObj(start, end, date, text);
   },
   delete: function(id) {
      delete Events.elements[id];
   },
   update: function(id, start, end, date, text) {
      Events.elements[id].start = start;
      Events.elements[id].end = end;
      Events.elements[id].date = date;
      Events.elements[id].text = text;
   }
}

There's all your event objects on the client side and all your basic
methods.  In your page file add the XTile component from the Contrib
library.  It's dead-simple to configure.  You just give it a Send function,
a Receive function, and a page Listener.

For instance, in your HTML...

<span jwcid="@contrib:XTile" sendName="literal:updateEvent"
receiveName="literal:recvResponse" listener="listener:handleRequest" />

The send function is the function you call from the client side when you
want to instantiate the Ajax request.  So when you move a calendar event and
the date changes, you'd call the update function and pass all the Event
object elements.  Something like,

onWhateverEvent = function() { 
   var id = // get the id however you like... 
   updateEvent(id, Events.elements[id].start, Events.elements[id].end,
Events.elements[id].date, Events.elements[id].text);
}

In your java code, you'll have a listener that then does something with this
info...

public void handleRequest(IRequestCycle cycle) {
   String[] ret = null;
   Object[] params = cycle.getListenerParameters();
   if (params.length < 5)
      return;
   String id = params[0].toString();
   String start = params[1].toString();
   String end = params[2].toString();
   String date = params[3].toString();
   String text = params[4].toString();
   // save the updated object
   // ret == return message
   cycle.setListenerParameters(ret);
}

Then in your javascript you'll need a function to handle the return data...

function recvResponse(xmlstuff) {
   var returnData = xmlstuff.join('');
   // do stuff...
}

And that's basically it.  If you wanted to be clever, you could use JSON to
transport your javascript objects.  If you wanted to be very clever, you
could add an additional "action" parameter to your Ajax request to make
coding the listener a bit easier (stuff like "ADD" or "DELETE" or "EDIT").
-- 
View this message in context: 
http://www.nabble.com/Best-strategy--tf3201900.html#a8959162
Sent from the Tapestry - User mailing list archive at Nabble.com.


---------------------------------------------------------------------
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]

Reply via email to