Basic web service example

[biancahope]

Hello everyone

I'm a newbie to Laszlo, and as it seems, I'm already having a bit of trouble. I would like to create an application using a web service, you have below the code I'm trying to use, however, nothing is being returned in the grid... Can anyone spot the mistake?
Thanks
Bianca


<canvas height="500" debug="true">
<dataset name="catalog" request="true"
src="http://moma2.cas.de/MoMaServer.OrderCatalog/CallServiceWTK.asmx/GetChildCategories?nCatId=0"/>
<view datapath="catalog:/ArrayOfMoMaCategory/MoMaCategory"
ondata="debug.write( this.datapath.serialize() )" />
<grid datapath="catalog:/ArrayOfMoMaCategory/MoMaCategory">
<gridcolumn width="200"> Name
<text datapath="$Name"/>
</gridcolumn>
</grid>
</canvas>

[biancahope]

I think I found the solution to my previous question:

<canvas height="500" debug="true">
<dataset name="catalog" request="true"
src="http://moma2.cas.de/MoMaServer.OrderCatalog/CallServiceWTK.asmx/GetChildCategories?nCatId=0"/>


<grid id="list" multiselect="false" datapath="catalog:/ArrayOfMoMaCategory/" contentdatapath="MoMaCategory/Name/">

<gridtext datapath="text()" width="200">Catalog</gridtext>
</grid>
</canvas>

What I need to do now is to replace the CatId, set to 0, in the dataset source, with one selected dynamically by clicking a row in the datagrid.

Any ideas on that anyone??
Thanks

[vfunshteyn]

Try declaring this method on your grid:

<method event="onselect" args="row">
debug.write(row.datapath.p)
</method>

The argument sent with the onselect event is the currently selected row, whose datapath should point to the final element that data replication occurs on, i.e. MoMaCategory. The class of row is basegridrow, which is currently undocumented but may be in the future.

[antun]

What I need to do now is to replace the CatId, set to 0, in the dataset source, with one selected dynamically by clicking a row in the datagrid.

I think this is what you want, but the web service appears to be down now. Note that I'm setting the querystring oninit of the canvas here instead of hard-coding the nCatId attribute into the src of <dataset>:


<canvas height="500" debug="true" width="2000">
<method event="oninit">
catalog.setQueryParam("nCatId", 0);
catalog.doRequest();
</method>

<dataset name="catalog" request="false"
src="http://moma2.cas.de/MoMaServer.OrderCatalog/CallServiceWTK.asmx/GetChildCategories"/>

<grid id="list" multiselect="false"
datapath="catalog:/ArrayOfMoMaCategory/"
contentdatapath="MoMaCategory">

<method event="onselect" args="row">
var catId = row.datapath.xpathQuery("CategoryId/text()");
catalog.setQueryParam("nCatId", catId);
catalog.doRequest();
</method>

<gridtext datapath="CategoryId/text()" width="100"
editable="false">Id</gridtext>

<gridcolumn width="200">
<text datapath="Name/text()" width="${parent.width}" />
</gridcolumn>
</grid>
</canvas>


By the way, I misunderstood your post originally - I though you wanted to change the CategoryId value in the datagrid row. So I wrote this up first - it may come in handy:


<method event="onselect" args="row">
// Make a copy of the datapointer that the clicked row is
// pointing to. It's going to be a MoMaCategory node.
var dptr = row.datapath.dupePointer();

// Move the copied datapointer to the CategoryId tag.
dptr.selectChild( 1 );
dptr.selectNext( 1 );

// Change the CategoryId node's text
dptr.setNodeText( "Hi!" );
</method>


-Antun

[biancahope]

Thanks Antun and vfunshteyn for your suggestions. Unfortunately there are a couple of details which do not function.

Antun,the HTTP Get must be of the type: http://moma2.cas.de/MoMaServer.OrderCatalog/CallServiceWTK.asmx/GetChildCategories?nCatId=string"
where string can be replaced with a number, in order to obtain the main catalog the first time it should be set to 0. Without this argument it doesn't work.

Moreover, I would prefer not to see the column with the Category Ids in the grid...But when I click on the name to be able to get the Category Id associated with the object, and post it back to the web service, in order to get the subcategory. I hope this makes sense...

Oh and one more thing, which property of the grid makes the cells not editable??
Thank you
Bianca

[biancahope]

Well, I succeeded to solve some of the problems, so using your code Antun, I just modified the source of the dataset to: http://moma2.cas.de/MoMaServer.OrderCatalog/CallServiceWTK.asmx/GetChildCategories?
and now the call works perfectly. I also figured out how to hide the Category Id column.
Next I would like to do the following:
(1) Create dynamically on top of the datagrid a link bar (not sure if this exists in Laszlo) in order to allow backwards navigation, or selection of a specific node.
(2) If the selected element doesn't have any more children, not to call the web service again.
Cheers
Bianca

[antun]

Antun,the HTTP Get must be of the type: http://...?nCatId=string"
where string can be replaced with a number, in order to obtain the main catalog the first time it should be set to 0. Without this argument it doesn't work.

That's where this comes in:


<method event="oninit">
catalog.setQueryParam("nCatId", 0);
catalog.doRequest();
</method>


It adds the nCatId query parameter to the dataset and makes the request. Note that in the <dataset> declaration, request="false" in my code; that means that the initial request won't get made until doRequest() is called.


Moreover, I would prefer not to see the column with the Category Ids in the grid...


That's not a problem. It doesn't need to be present; you can still get at the data that drives the datagrid, but is not exposed. If you remove the column altogether, you'll still be able to find out the id.

Oh and one more thing, which property of the grid makes the cells not editable??


Either:


<gridtext editable="false" />


or


<gridcolumn width="200">
<text datapath="Name/text()"
width="${parent.width}" />
</gridcolumn>


The former, <gridtext> has the special editable functionality by default. The latter method above gives you more control - you don't need to nest a <text> field in there; you could put a picture instead for example.

-Antun

[antun]

(1) Create dynamically on top of the datagrid a link bar (not sure if this exists in Laszlo) in order to allow backwards navigation, or selection of a specific node.


You might be able to place buttons in a <menubar>, but start with something really simple like a gray view, constrained to the width of the grid:


<!-- Container view -->
<view>
<simplelayout axis="y" />
<!-- link bar -->
<view width="${parent.width}" height="30"
bgcolor="0xeaeaea">
<button>Back</button>
</view>
<grid...>
...
</grid>
</view>


If you want to create it dynamically then either have the link bar set to visible="false" at first, then call setVisible(true) on it when you want to show it, or use a <state>.

Menubar:
http://www.laszlosystems.com/lps-2.1.2/docs/lzx-reference/lz-menubar.html

State:
http://www.laszlosystems.com/lps-2.1.2/docs/lzx-reference/state.html


(2) If the selected element doesn't have any more children, not to call the web service again.


Can you tell me exactly which element in the XML you're referring to?

-Antun

[biancahope]

Hi Antun

what I want in fact is a link bar of the type:
Home>Shopping>Magazines> , a clickable path as in a website, on click event I could navigate in the grid, get back to the main menu of my catalog, etc. So I'm not really clear about how that state tag would come useful, if it only remembers one previous state?

The back button I would like to have for my grid, should be like the one used in your music box application. I haven't got too much experience with JavaScript, so some of the things are not so obvious for me....

Thanks for your help

[antun]

what I want in fact is a link bar of the type:
Home>Shopping>Magazines> , a clickable path as in a website, on click event I could navigate in the grid, get back to the main menu of my catalog, etc. So I'm not really clear about how that state tag would come useful, if it only remembers one previous state?

I see - you want a breadcrumb trail, such as the one on this website (Home>Developers>Community>Forums>...), right?

To create one declaratively, you would do something like:

<view id="breadcrumb">
<simplelayout axis="x" spacing="4" />
<text onclick="doSomething()>Home</text>
<text onclick="doSomething()>Shopping</text>
<text onclick="doSomething()>Magazines</text>
</view>

For a real breadcrumb of course you want text fields to be added/removed as the user navigates. There's two ways to do this:

1. Using the constructor. This would be something like:


var foo = new LzText( breadcrumb, {text:"Category"} );


2. Using data replication. This would mean having a dataset that contained the history, and replicating a single <text> field above on that. See here for more on replication:

http://www.laszlosystems.com/lps-2.2b1/docs/developers-guide/databinding.html#d0e5863

Method 1) above would be a little trickier to do onclick events for (you'd have to us a delegate).

The back button I would like to have for my grid, should be like the one used in your music box application.

What do you want the back button to do exactly?

-Antun