Re: Combining EXTJS with WebObjects.
Re: Combining EXTJS with WebObjects.
- Subject: Re: Combining EXTJS with WebObjects.
- From: John Bruce <email@hidden>
- Date: Fri, 4 Sep 2009 14:49:04 +0100
Yeah the Ext widgets are very nice for users but can be difficult to
develop with sometimes.
JSON is definitely not dead and worth learning about.
On Fri, Sep 4, 2009 at 12:51 PM, Gustavo
Pizano<email@hidden> wrote:
> So.
> public WOActionResults handleRequest(WORequest request, WOContext
> context) {
> will be invoked when form within the JS I will create a new XMLRequest() ?
> which as I think it's done by the prototype.js that uses the Ajax framework
> isn't?
yes you would use the url generated by the Proxy component in an
XMLHttpRequest. An example using JQuery (I don't know prototype.js)
would be:
var ajaxActionUrl = "<webobject name=AjaxSimpleProxyActionUrl></webobject>";
var postData = { "data" : $.toJSON( "a json formatted string eg {
"foo" : "bar" ) };
$.post(ajaxActionUrl, postData);
Note that the toJSON function is provided by a JQuery plugin.
(Im jsut checking the JSONExample in the Ajax examples).
> then it will look in the request a String with binding "data" and then
> convert it to a JSON object and place it in the response.
It's only looking for a request string value for "data" because that
what I set (see the postData variable in the above JS example). It
could be anything or even just the request body.
> So here in this method is where I generate the list of objects I need to
> send and place it into a JSON object, put it in the respose and send back to
> the client.. isn't ?
No, this method uses the "actionName" binding and calls the method in
the parent component whose name is the value of the binding. So for
example I have a method in my parent component called "
generateListOfObjects":
public JSONObject generateListOfObjects(final JSONObject data) {
// get your list of objects
// turn them into a JSONObject - probably a JSONArray
// return this new JSONObject which containsyour objects
}
> Not clear:
> 1. the actionName... this comes from the parent? no... where is that
> binding?
It's just a component binding like any other. So in the WOD of the
parent component you have:
AjaxSimpleProxyActionUrl : AjaxSimpleProxy {
actionName = "generateListOfObjects";
}
> 2. JSONObject jsonResponse = (JSONObject)
> action.invoke(parent(), new
> JSONObject(inputString)); .... what am I doing here?.
you are calling the method whose name is the same as the actionName
binding's value (eg generateListOfObjects) with an argument whose
value is a JSONObject deserialised from the string value of the "data"
HTTP form post variable. NSSelector uses Java reflection to call the
method in the instance of the parent component.
> 3/. What for do I need to get the String of "data" String inputString =
> request.stringFormValueForKey("data"); If when Im requesting it has nothing?
> I dunno.. im kinda confused here..
>
You don't need it if the request has nothing - so feel free to change
the component to not use a request varialbe. If you do this you can
also change the method signature of the generateListOfObjects method
to accept no arguments.
> I dunno if the JSONExample that is there, does what Im trying to do here...
> and what you explain me... I see there is a AjaxProxy binding, and then
> simply they ask for data form the JS as var a = <name>.
> <proxyName>.method(). and then in the Application.java they register the
> service which in the example is a ExampleService?..
> so I can do something like that but with my custom logic that return the
> data as an Object?
I'm not sure of the details of the exisitng AjaxProxy component. My
basic understanding is that it includes some JS so that you can call a
JS function on a genreated object which takes care of calling the
serverside equivalent method. The AjaxSimpleProxy component is more
basic and you have to do a more work but it exposes the raw process. I
just use it sometimes when I need to call a method in my component and
get some JSON data back.
> I dunno to many things in my mind,.. but if this what Im thinking its
> correct then my mind its getting clear.. I wish to learn more in depth how
> to do things.. but I will be reinventing the wheel... hehe .
>
There are a lot of concepts going on here. You might find focusing
separatly on each part easier and then put it together at the end.
Some areas to learn about:
1. JSON
2. Ajax and XMLHttpRequests - use a JS library like JQuery or
Prototype to do the work for you. Ext also has it's own ways of doing
this too but you can also use an adaptor.
3. getting more familiar with the request-response loop in WO will
help. Ajax requests are treated slightly differently to prevent
backtracking problems.
4. If you're not familair with Reflection in Java then you will want
to read about that as well. NSSelector is more usefult than
java.land.reflect.Method as it can be created indepently of a
particular object.
HTH
- John
> G.
>
>
>
>
> On Fri, Sep 4, 2009 at 12:47 PM, John Bruce <email@hidden> wrote:
>>
>> Hi Gustavo,
>>
>> You can use the Wonder Ajax framework to get JSON data loaded so that
>> Ext can use it as a data store. The pricipal is to have a component
>> that generates a url which Ext can use as the remote address for a
>> JSON data store. A very rough example which is similar to the
>> AjaxProxy one is:
>>
>> public class AjaxSimpleProxy extends AjaxComponent {
>>
>> public String actionName;
>>
>> public AjaxSimpleProxy(WOContext context) {
>> super(context);
>>
>> }
>>
>> @Override
>> public void reset() {
>> actionName = null;
>> super.reset();
>> }
>>
>>
>> @Override
>> protected void addRequiredWebResources(WOResponse response) {
>>
>> }
>>
>> @Override
>> public void appendToResponse(WOResponse response, WOContext
>> context) {
>> //WOComponent component = context.component();
>>
>> String actionUrl =
>> AjaxUtils.ajaxComponentActionUrl(context);
>>
>> response.appendContentString(actionUrl);
>>
>> super.appendToResponse(response, context);
>> }
>>
>> public String actionName() {
>> if (actionName == null) {
>> actionName = (String)
>> valueForBinding("actionName");
>> }
>> return actionName;
>> }
>>
>>
>> @Override
>> public WOActionResults handleRequest(WORequest request, WOContext
>> context) {
>> WOResponse response = AjaxUtils.createResponse(request,
>> context);
>>
>> String inputString = request.stringFormValueForKey("data");
>>
>> if (log.isDebugEnabled()) {
>> log.debug("AjaxSimpleProxy.handleRequest: input = "
>> + inputString);
>> }
>>
>> NSSelector action = new NSSelector(actionName(), new
>> Class[] {
>> JSONObject.class } );
>>
>> try {
>> JSONObject jsonResponse = (JSONObject)
>> action.invoke(parent(), new
>> JSONObject(inputString));
>>
>> response.setContent(jsonResponse.toString());
>> response.setHeader("application/json",
>> "content-type");
>>
>> } catch (Exception e) {
>> e.printStackTrace();
>> }
>>
>>
>> return response;
>> }
>>
>>
>>
>> }
>>
>> Basically the idea in this component is to bind the name of an action
>> in the parent component that accepts a JSONObject as the argument.
>>
>> When rendering the main HTML response for that page this component
>> generates a url which when called will looked for a request paramater
>> called "data" which it expects to be JSON data. It will then turn that
>> into a JSON object and invoke a method in the parent component that
>> match the name of the "actionName" binding. It expects that this
>> method takes a JSONObject as the only parameter. In that method you
>> can do whatever you need but the return value should also be a
>> JSONObject and then that result is returned as the content of the
>> response.
>>
>> This is a very basic component and is just to illustrate one way it
>> can be done. You would want to clean it up if you actually use it in
>> production. It doesn't do anything cleaver for you but can allow you
>> to send JSON data back and forth to a WOComponent from JS in your
>> page.
>>
>> Other ways include creating a direct action to return the JSON data
>> for the EXT grid. This is simpler but has the problem that it is
>> outside your component.
>>
>> Ext can be very heavy weight and require a lot of files to be
>> downloaded to the client browser. It's also likes things to be done in
>> the *Ext Way* which can sometimes be a pain. Although the widgets are
>> very nice... . It does work with WO but you do need to do a bit of
>> work.
>>
>> HTH
>>
>> John
>>
>>
>> On Fri, Sep 4, 2009 at 11:16 AM, Gustavo
>> Pizano<email@hidden> wrote:
>> > Hello,.. Well after almost giving up on my requirement to put more than
>> > one
>> > column in a wobrowser to have multiple selections. I remind that before
>> > I
>> > did some little work with EXTJS. It has what we need. a GRID
>> > extjsComponent.. :D:D.. now how do I integrate WO and EXTJS?
>> > In the example of grid they are loading data from an array of arrays,
>> > and
>> > configuring "hard-coded" all the grid. How can I from the JS ask the WO
>> > server for the data to congifure the grid? is it possible?..
>> > another approach I saw was to generate a hidden WORepetition and
>> > generate
>> > all the data, then form the JS get the element and create the grid, but
>> > this
>> > approach I don't like it, becuase if I need another grid somewhere else
>> > I
>> > have to do all again, I want to reuse code.
>> > Another approach is to load the data form an xml, the same, grid has a
>> > url:
>> > attribute I fetch the xml there, so in th backend I will need to
>> > generate
>> > the xml, keep it there, while EXTJS via the url: ask for it.. what comes
>> > to
>> > my mind are security stuff... and some theoretical stuff like:
>> > How WO knows that the JS that its requesting is valid for the session
>> > in
>> > the WO application?.
>> > I think this is about the request-n-response loop... isn't it?
>> >
>> > So.. any advice... help, clue, light, code?
>> > G.
>> >
>> > _______________________________________________
>> > Do not post admin requests to the list. They will be ignored.
>> > Webobjects-dev mailing list (email@hidden)
>> > Help/Unsubscribe/Update your Subscription:
>> >
>> >
>> > This email sent to email@hidden
>> >
>
>
_______________________________________________
Do not post admin requests to the list. They will be ignored.
Webobjects-dev mailing list (email@hidden)
Help/Unsubscribe/Update your Subscription:
This email sent to email@hidden