Contacts Example with Grid - Need help with row selection

[OLaszloFan]

Hi All:

I need your help to update the Contacts Example so that a Grid Component is used instead of text views.

So far I have adjusted the code to use windows instead of plain replicated text views.
If you run the posted code you will see that I am about half way through the conversion.

You will see a New Entry Button, a Grid and then the original replicated data text views from the original databinding example. This can be linked to an external database.

What I am hoping for is to allow the user to add, update and delete contact records while using windows and the grid component.

The lower duplicate text rows which are below the grid would then be eliminated.

Problems:
Need help defining the correct grid row onselect code so that the updateContact window will pop up just like it does for the original text rows.

Any help would be greatly appreciated!!!!


Patrick






<!DOCTYPE canvas PUBLIC "LZX" "http://127.0.0.1:8080/lps-3.3.3/tools/lzx.dtd">

<!-- *** -->
<!-- First try at converting OpenLaszlo Contacts Example using PHP service-->
<!-- Objective is to exchange contact list with Grid Component list and maintain simular functionality-->
<!-- Problems: -->
<!-- Contacts example allows the user to click on a text record to show a update view -->
<!-- Need Grid help to enable the user to click on a row within the grid to show a update window -->
<!-- *** -->

<canvas width="100%" height="100%" bgcolor="#D4D0C8" debug="true">
<dataset name="dset" src="http://www.yoursite/getcontacts.php" request="true" type="http"/>
<dataset name="dsSendData" request="false" src="http://www.yoursite/contactmgr.php" type="http"/>

<class name="contactview" extends="window" title="My Window" visible="false" closeable="true" x="20" width="400" height="160">
<text name="pk" visible="false" datapath="@email"/>
<text y="10">First Name:</text>
<edittext name="firstName" datapath="@firstName" x="80" y="10"/>
<text y="35">Last Name:</text>
<edittext name="lastName" datapath="@lastName" x="80" y="35"/>
<text y="60">Phone:</text>
<edittext name="phone" datapath="@phone" x="80" y="60"/>
<text y="85">Email:</text>
<edittext name="email" datapath="@email" x="80" y="85"/>
<method name="sendData" args="action">
var d=canvas.datasets.dsSendData;
var p=new LzParam();
p.addValue("action", action, true);
p.addValue("pk", pk.getText(), true);
p.addValue("firstName", firstName.getText(), true);
p.addValue("lastName", lastName.getText(), true);
p.addValue("phone", phone.getText(), true);
p.addValue("email", email.getText(), true);
d.setQueryString(p);
d.doRequest();
</method>
</class>


<simplelayout axis="y"/>

<view>

<simplelayout axis="y"/>

<button onclick="parent.newContact.setVisible(!parent.newContact.vi sible);">New Entry...</button>

<grid name="list" showhlines="true" showvlines="true" datapath="dset:/*" onclick="parent.updateContact.setVisible(!parent.updateCont act.visible);">
<gridtext textalign="center" editable="false" width="50" datapath="position()" resizable="false" sortable="false">No.</gridtext>
<gridtext textalign="center" editable="true" datapath="@firstName">First Name:</gridtext>
<gridtext textalign="center" editable="true" datapath="@lastName">Last Name:</gridtext>
<gridtext textalign="center" editable="true" datapath="@phone">Phone:</gridtext>
<gridtext textalign="center" editable="true" width="150" datapath="@email">Email:</gridtext>
</grid>


<contactview name="newContact" title="New Contact" datapath="new:/contact">
<button width="80" x="200" y="10">Add
<method event="onclick">
parent.sendData("insert"); // INSERT
parent.datapath.updateData();
var dp = canvas.datasets.dset.getPointer();
dp.selectChild();
dp.addNodeFromPointer( parent.datapath );
parent.setVisible(false);
parent.setDatapath("new:/contact");
Debug.write(localdata.serialize());
</method>
</button>
</contactview>


</view>

<view datapath="dset:/phonebook/contact">
<simplelayout axis="y"/>

<view name="list" onclick="parent.updateContact.setVisible(!parent.updateCont act.visible);">
<simplelayout axis="x"/>
<text datapath="@firstName"/>
<text datapath="@lastName"/>
<text datapath="@phone"/>
<text datapath="@email"/>
</view>

<contactview name="updateContact" title="Update Contact" >
<button width="80" x="200" y="10">Update
<method event="onclick">
parent.sendData("update"); // UPDATE
parent.parent.datapath.updateData();
</method>
</button>

<button width="80" x="200" y="40">Delete
<method event="onclick">
parent.sendData("delete"); // DELETE
parent.parent.datapath.deleteNode();
</method>
</button>
</contactview>
</view>

</canvas>

[galadriann]

Hi I am having exactly the same problem ... cannot get the data to display on the window/view ... (opened a thread with the same...)
I am using another example with the contact list too...

[OLaszloFan]

Hi Again:
I'd really appreciate any hints on this one. I've focused my question a little more from my original post. As far as I can tell, it looks like my grid code does not take into account a datapointer to each row in the grid when the user clicks a row. I have see getSelection.p in examples, however, making the updateContact view/window visible seems to be handled differently when using a grid.
Really stuck on this one. Any help is appreciated.

Patrick


Original Documentation code I am trying to convert so that it utilizes Grid Component.
http://www.openlaszlo.org/lps/laszlo-explorer/editor.jsp?src=docs/guide/programs/data_app-$9.lzx


Code snippet from Contacts Example:



<view datapath="dset:/phonebook/contact">
<simplelayout axis="y"/>

<view name="list" onclick="parent.updateContact.setVisible(!parent.updateCont act.visible);">
<simplelayout axis="x"/>
<text datapath="@firstName"/>
<text datapath="@lastName"/>
<text datapath="@phone"/>
<text datapath="@email"/>
</view>




Grid code which onclick, onselect and/or getselection might possibly be the method needed but I am not sure how to proceed.


<grid name="list" showhlines="true" showvlines="true" datapath="dset:/*" onclick="parent.updateContact.setVisible(!parent.updateCont act.visible);">
<gridtext textalign="center" editable="false" width="50" datapath="position()" resizable="false" sortable="false">No.</gridtext>
<gridtext textalign="center" editable="true" datapath="@firstName">First Name:</gridtext>
<gridtext textalign="center" editable="true" datapath="@lastName">Last Name:</gridtext>
<gridtext textalign="center" editable="true" datapath="@phone">Phone:</gridtext>
<gridtext textalign="center" editable="true" width="150" datapath="@email">Email:</gridtext>
</grid>




Please see first post for cut & past partially converted application...

[Develance]

OLaszloFan,
First, you should use grid.onselect event instead of onclick. I haven't tested your code, but as I'm doing something very similar, I've run into the same problems.
I guess your window is not showing, is it? You should size it (give its height and width) and also bring it to front of the grid: windowInstance.bringToFront()

As you haven't explained a particular problem, that's what comes to my thoughts right now. If you give more details of what is exactly your problem maybe I could give you a hint.
greetings,
Develance

[OLaszloFan]

Develance:
Thank you for your post. Your right, I want to correct my code to display a filled in updateContact Window based on what grid row is selected. This will add the update/delete option like the original code.

I think that the data bound class that is used in the original example makes this conversion a little more complex.

I am definitely open to any help with accomplishing this conversion. I will investigate if the window is being hidden and see if I can getSelection to work as suggested.

Patrick

[senshi]

2 notes:
- You should use "window#open(..)" resp. "window#close(..)" instead of "window.setVisible(..)" (solely changing the window's visibility-status instead of using the appropriate functions, that's like breaking into your house through the backdor instead of using your key and taking the frontdoor. Sure, the reference says that open/close have got the same effect as changing the visibility, but using this "special"-functions will prevent you from some headache, if you ever use classes like <modaldialog> or <alert>, 'cause there you must use open() resp. close()!)

-by using "LzDatapointer#setFromPointer(..)", it's quite easy to update the data for your "updateContact"-window.


<canvas width="100%" height="100%" bgcolor="#D4D0C8" debug="true">

<dataset name="dset" request="true" type="http"
src="http://www.cae.virtual-pocket.com/contact/getcontacts.php" />
<dataset name="dsSendData" request="false" type="http"
src="http://www.cae.virtual-pocket.com/contact/contactmgr.php" />

<class name="contactview" extends="window" title="My Window"
visible="false" closeable="true" x="20" width="400" height="160" >

<text name="pk" visible="false" datapath="@email"/>

<text y="10">First Name:</text>
<edittext name="firstName" datapath="@firstName" x="80" y="10"/>

<text y="35">Last Name:</text>
<edittext name="lastName" datapath="@lastName" x="80" y="35"/>

<text y="60">Phone:</text>
<edittext name="phone" datapath="@phone" x="80" y="60"/>

<text y="85">Email:</text>
<edittext name="email" datapath="@email" x="80" y="85"/>

<method name="sendData" args="action">
var d = canvas.datasets.dsSendData;
var p = new LzParam();
p.addValue("action", action, true);
p.addValue("pk", pk.getText(), true);
p.addValue("firstName", firstName.getText(), true);
p.addValue("lastName", lastName.getText(), true);
p.addValue("phone", phone.getText(), true);
p.addValue("email", email.getText(), true);
d.setQueryString(p);
d.doRequest();
</method>
</class>


<simplelayout axis="y"/>

<view>

<simplelayout axis="y"/>

<button text="New Entry..." >
<handler name="onclick" >
if( !parent.newContact.visible ){
parent.newContact.open();
}
</handler>
</button>

<grid name="list" showhlines="true" showvlines="true" datapath="dset:/" contentdatapath="phonebook/contact" >
<gridtext textalign="center" editable="false" width="50" datapath="position()" resizable="false" sortable="false" text="No." />
<gridtext textalign="center" editable="false" datapath="@firstName" text="First Name:" />
<gridtext textalign="center" editable="false" datapath="@lastName" text="Last Name:" />
<gridtext textalign="center" editable="false" datapath="@phone" text="Phone:" />
<gridtext textalign="center" editable="false" width="150" datapath="@email" text="Email:" />

<handler name="onselect" args="sel" >
parent.updateContact.open( sel.datapath );
</handler>
</grid>

<contactview name="newContact" title="New Contact" datapath="new:/contact">
<button width="80" x="200" y="10" text="Add">
<handler name="onclick">
parent.sendData( "insert" ); // INSERT
parent.datapath.updateData();
var dp = canvas.datasets.dset.getPointer();
dp.selectChild();
dp.addNodeFromPointer( parent.datapath );
parent.close();
parent.setDatapath( "new:/contact" );
Debug.write( parent.datapath.serialize() );
</handler>
</button>
</contactview>

<contactview name="updateContact" title="Update Contact" >
<datapath />

<method name="open" args="dp" >
if( !this.visible ){
super.open.apply( this, arguments );
this.datapath.setFromPointer( dp );
}
</method>

<button width="80" x="200" y="10" text="Update" >
<handler name="onclick">
parent.sendData( "update" ); // UPDATE
parent.datapath.updateData();
parent.close();
</handler>
</button>

<button width="80" x="200" y="40" text="Delete" >
<handler name="onclick">
parent.sendData( "delete" ); // DELETE
parent.datapath.deleteNode();
parent.close();
</handler>
</button>
</contactview>
</view>

</canvas>

[OLaszloFan]

Hi senshi:
Thank you very much for your post. As usual, I have been enlightened.

One thing I noticed when I ran the code correction you provided was a compiler error:
Note: I am using version 3.3.3

new.lzx:86:21: Syntax error: the token "." was not expected at this position. Was expecting (

The error seems to be located at the line that is highlighted in blue.


<method name="open" args="dp" >
if( !this.visible ){
super.open.apply( this, arguments );
this.datapath.setFromPointer( dp );
}
</method>



My quick fix was to eliminate the .apply ,however, maybe I did a cut and paste error. Would you mind checking this for me.


<method name="open" args="dp" >
if( !this.visible ){
super.open ( this, arguments );
this.datapath.setFromPointer( dp );
}
</method>



Thank you,

Patrick

[senshi]

One thing I noticed when I ran the code correction you provided was a compiler error:
Note: I am using version 3.3.3

new.lzx:86:21: Syntax error: the token "." was not expected at this position. Was expecting (


This is the preferred way of calling a super-class-method in OL4 (don't know about OL3.4):

super.open.apply( this, arguments );


You can replace it with this one, as "window#open()" doesn't require a parameter at all:

super.open();

[OLaszloFan]

Sensi:
Thank you very much for your help. I updated the code and used the super.open(); command. I also adjusted the code so that the debugger warning is eliminated that relates to the new:/contact dataset.

Best Regards,

Patrick




<canvas width="100%" height="100%" bgcolor="#D4D0C8" debug="true">
<dataset name="dsNew"><contact/></dataset>
<dataset name="dset" request="true" type="http"
src="http://www.place-your-site-name-here.com/getcontacts.php" />
<dataset name="dsSendData" request="false" type="http"
src="http://www.place-your-site-name-here.com/contactmgr.php" />

<class name="contactview" extends="window" title="My Window"
visible="false" closeable="true" x="20" width="400" height="160" >

<text name="pk" visible="false" datapath="@email"/>

<text y="10">First Name:</text>
<edittext name="firstName" datapath="@firstName" x="80" y="10"/>

<text y="35">Last Name:</text>
<edittext name="lastName" datapath="@lastName" x="80" y="35"/>

<text y="60">Phone:</text>
<edittext name="phone" datapath="@phone" x="80" y="60"/>

<text y="85">Email:</text>
<edittext name="email" datapath="@email" x="80" y="85"/>

<method name="sendData" args="action">
var d = canvas.datasets.dsSendData;
var p = new LzParam();
p.addValue("action", action, true);
p.addValue("pk", pk.getText(), true);
p.addValue("firstName", firstName.getText(), true);
p.addValue("lastName", lastName.getText(), true);
p.addValue("phone", phone.getText(), true);
p.addValue("email", email.getText(), true);
d.setQueryString(p);
d.doRequest();
</method>
</class>


<simplelayout axis="y"/>

<view>

<simplelayout axis="y"/>

<button text="New Entry..." >
<handler name="onclick" >
if( !parent.newContact.visible ){
parent.newContact.open();
}
</handler>
</button>

<grid name="list" showhlines="true" showvlines="true" datapath="dset:/" contentdatapath="phonebook/contact" >
<gridtext textalign="center" editable="false" width="50" datapath="position()" resizable="false" sortable="false" text="No." />
<gridtext textalign="center" editable="false" datapath="@firstName" text="First Name:" />
<gridtext textalign="center" editable="false" datapath="@lastName" text="Last Name:" />
<gridtext textalign="center" editable="false" datapath="@phone" text="Phone:" />
<gridtext textalign="center" editable="false" width="150" datapath="@email" text="Email:" />

<handler name="onselect" args="sel" >
parent.updateContact.open( sel.datapath );
</handler>
</grid>

<contactview name="newContact" title="New Contact" datapath="dsNew:/contact">
<button width="80" x="200" y="10" text="Add">
<handler name="onclick">
parent.sendData( "insert" ); // INSERT
parent.datapath.updateData();
var dp = canvas.datasets.dset.getPointer();
dp.selectChild();
dp.addNodeFromPointer( parent.datapath );
parent.close();
Debug.write( dsNew.serialize() );
parent.datapath.p.setAttrs( {} );
</handler>
</button>
</contactview>

<contactview name="updateContact" title="Update Contact" >
<datapath />

<method name="open" args="dp" >
if( !this.visible ){
super.open();
this.datapath.setFromPointer( dp );
}
</method>

<button width="80" x="200" y="10" text="Update" >
<handler name="onclick">
parent.sendData( "update" ); // UPDATE
parent.datapath.updateData();
parent.close();
</handler>
</button>

<button width="80" x="200" y="40" text="Delete" >
<handler name="onclick">
parent.sendData( "delete" ); // DELETE
parent.datapath.deleteNode();
parent.close();
</handler>
</button>
</contactview>
</view>

</canvas>