refering sub views in a view

[mallesh]

Hi Antun,

I am displaying the images in a view by using adding the nodes to the dataset.and also i am changing the size and positions of each images.Here i want to store the size and positions of the each image and refer it in some where (may be in another library file)and aslo i want to pass the size and positions of the images to the database.

thanks in advance.

Mallesh.

[antun]

I'm not clear on what you're asking? Can you elaborate?

-Antun

[mallesh]

Hi Antun,

I am attaching the example code below.
Here i am displaying 4 images in the top of the canvas and when u click on each image, it will go to diaplay below.Here i can able to drag and resize the images and also i can able to delete the selected image.

1.Here the problem is , when you disply the frist image by clicking on the thubnail images, and make it resize and drag it some where, and try to put another image,the first image's size and position is set to original form why is it?

2.When i delete the displayed image(by selecting the image) by clicking on the delete button,(not latest)the other image's size and position is again set to original form.

3.And also i want to read all images width,height,x and y values by refering each image as a separate object.and refer it in some where( may be in another library file at a time and aslo i want to pass the size and positions of the images to the database)


Thanks in advance
Mallesh.

[antun]

I think that most of the issues you're seeing are caused by the fact that you have id's in class definitions. Remember that an id is global - if you put it in a class definition (or in a view that gets replicated with a datapath), you're going to have problems.

And also i want to read all images width,height,x and y values by refering each image as a separate object.

At what point do you want to read the height, width etc?

-Antun

[mallesh]

HI Antun,

In the below code i removed all the ids and gave name attributes to all the class definitions.but still it shows the same output. I think it is the problem of deleting and adding the nodes in the dataset, and call same dataset in another class so, this dataset is refreshing each time when i add or delete. isn't?. or any other reason?
------------------------------------
At what point do you want to read the height, width etc?
----------------------------------
once i done resize and positioned all the images, i want to send these info to database.So i need to read these information some where in the code.

Thanks
Mallesh.

[mallesh]

HI Antun,

In the below code i removed all the ids and gave name attributes to all the class definitions.but still it shows the same output. I think it is the problem of deleting and adding the nodes in the dataset, and call same dataset in another class so, this dataset is refreshing each time when i add or delete. isn't?. or any other reason?
------------------------------------
At what point do you want to read the height, width etc?
----------------------------------
once i done resize and positioned all the images, i want to send these info to database.So i need to read these information some where in the code.

Thanks
Mallesh.

[antun]

I looked at your code and noticed this:


<view name="uploadimage" x="12" y="265">
<method name="callUpload" args="dpth">
if (dpth == null) return;
var dptr = canvas.mydataset.getPointer();
itemDptr = dptr.addNodeFromPointer(dpth);
</method>


It seems that you're adding nodes to the root of the dataset. That results in a data that looks like this, if you serialize it:


<mydataset>
<Myimage>
<MyImg>
<Image>DRNirvan.jpg</Image>
</MyImg>
<MyImg>
<Image>Blue20hills.jpg</Image>
</MyImg>
<MyImg>
<Image>031121_mon_cham1_m2w.jpg</Image>
</MyImg>
<MyImg>
<Image>world_at_night.jpg</Image>
</MyImg>
</Myimage>
<MyImg>
<Image>DRNirvan.jpg</Image>
</MyImg>
</mydataset>


I think the approach you want is to have a second dataset which starts out empty, that you add nodes to as the user clicks on the row of images at the top. Then have the <imagedisp> tag replicated based on how many nodes have been added.

-Antun

[thipperudra]

Hi Antun,

Yes we are using that approach, but how can i resolve those what we listed last post. And is there any other ways to rectify all those problems.

Thanks,
Rudresh.

[mallesh]

Hi Antun,

Yes.I am creating the empty dataset to add the nodes to as the user clicks on the row of images.Is it the reason for causing the above problem?.If it is true, then, is there any other way arround to rectify those listed problems?.

Waiting for your kind reply.
Thanks in advance.
Mallesh.

[antun]

If I understand you correctly, the issue that is still outstanding are how to reference the views with images to find out what its image size is - correct?

If you create an empty dataset and add/remove nodes to it, which will cause views to replicate (what I suggested), then the view with the datapath that replicates will become an instance of LzReplicationManager, and that has methods for referencing individual clones:

http://www.laszlosystems.com/lps-2.1.2/docs/lzx-reference/?replicationmanager.html

For example it would have a clones array, that would let you point to any one replicated view using clones[n].

You could then use the resourcewidth and resourceheight attributes to obtain the image's dimensions.

To send those dimensions back to the server, you would probably attach to the querystring of a dataset.

-Antun

[mallesh]

Hi Antun,

It was not the problem in LPS 1.0.2 .These code was working fine with lps1.0.2 except that,when i add second image to the view which causes the first image to get original shape and size. but after that everything was fine .So what may be the problem with lps1.2.1 could u make some changes to below code so that will eliminate the above problems.
-----------------------------------------
1.Here the problem is , when you disply the frist image by clicking on the thubnail images, and make it resize and drag it some where, and try to put another image,the first image's size and position is set to original form why is it?

2.When i delete the displayed image(by selecting the image) by clicking on the delete button,(not latest)the other image's size and position is again set to original form.
-------------------------------

Thanks in advance
Mallesh.

[mallesh]

Hi Antun,

It was not the problem in LPS 1.0.2 .These code was working fine with lps1.0.2 except that,when i add second image to the view which causes the first image to get original shape and size. but after that everything was fine .So what may be the problem with lps1.2.1 could u make some changes to below code so that will eliminate the above problems.
-----------------------------------------
1.Here the problem is , when you disply the frist image by clicking on the thubnail images, and make it resize and drag it some where, and try to put another image,the first image's size and position is set to original form why is it?

2.When i delete the displayed image(by selecting the image) by clicking on the delete button,(not latest)the other image's size and position is again set to original form.
-------------------------------

Thanks in advance
Mallesh.

[antun]

Like I said in an earlier post, I would recommend using a buffer dataset to replicate your views by copying XML nodes over.

-Antun

[mallesh]

Hi Antun,

buffer dataset means empty dataset?
if yes, i am creating empty dataset and replicating views by copying XML nodes over.
here is hte code

<canvas debug="true">

<dataset name="mydataset" src="mydb.xml" autorequest="true" type="http"/>

<class name="myimage">
<method name="applyData" args="d" >
if (d == null) { return; }
setSource( d );
</method>
</class>
<dataset name="mydset" />

<class name="imageitem">
<attribute name="imgsize" value="40" type="number" />
<attribute name="imghsize" value="50" type="number" />
<selectionmanager name="selector" toggle="false"/>

<wrappinglayout axis='x' spacing="15"/>
<attribute name="mydP" type="string" value="mydataset:/Myimage/MyImg" />
<method event="oninit">
this.allGalimages.setDatapath( this.mydP );
</method>
<view name="allGalimages" height="${classroot.imghsize+2}" width="${classroot.imgsize+2}" clip="true">
<myimage x="1" y="1" stretches="both" bgcolor="white" height="${classroot.imghsize}" width="${classroot.imgsize}"
datapath="Image/text()" clickable="true" onmousedown="classroot.selector.select(this);">
<method name="setSelected" args="amselected">
if ( amselected )
this.parent.setBGColor( 0xFF0000 );
else
this.parent.setBGColor( 0xFFFFFF );
</method>
<method event="onclick">
var dp = parent.parent.mydP + '['
+ this.parent.datapath.getNodeOffset() + ']';
canvas.uploadimage.setDatapath( dp );
canvas.uploadimage.callUpload(canvas.uploadimage.d atapath);
</method>
</myimage>
</view>
</class>

<class name="galView" datapath="mydset:/" >
<selectionmanager name="selector" toggle="false"/>
<imagedisp datapath="MyImg" clickable="true"
onclick="this.parent.selector.select(this);" onmousedown="draggable.apply();" onmouseup="draggable.remove();" >
<text visible="false" datapath="Image/text()" />

<method name="setSelected" args="amselected">
if ( amselected )
{
this.crb.setVisible(true);
canvas.galrm.setAttribute('obj',this);
}
else
{
this.crb.setVisible(false);
}
</method>
<resizestate name="rs"/>
<dragstate name="draggable" />
<view name="crb" visible="false" align="right" valign="bottom"
width="7" height="7" bgcolor="red"
onmousedown="parent.rs.apply();"
onmouseup="parent.rs.remove()" />
</imagedisp>
</class>

<class name="imagedisp" >
<myimage stretches="both" width="${parent.width}" height="${parent.height}" datapath="Image/text()" >
<method event="onload" >
this.setWidth(this.resourcewidth/4);
this.setHeight(this.resourceheight/4);
</method>
</myimage>
</class>

<imageitem width="250" height="200" />
<view name="uploadimage" x="12" y="265">
<method name="callUpload" args="dpth">
if (dpth == null) return;
var dptr = canvas.mydset.getPointer();
itemDptr = dptr.addNodeFromPointer(dpth);
Debug.write(canvas.mydset.getPointer().serialize() );
</method>
</view>
<button name="galrm" x="12" y="320">Delete
<attribute name="obj" value="new Object()" />
<method event="onclick">
this.obj.datapath.deleteNode();
</method>
</button>
<galView y="170" />
</canvas>

[thipperudra]

Hi Antun,
There seems to be some ambiguity in the questions and the replys so far.
Here i am just explaining the issue to you more elaborately. I request that you read through this (I know it is long:)), and then see the code extract that i have attached to understand what is actually happening.
This is the issue,
I have a screen on which I want to upload 4 images from my image library, to create a customised layout.
Step1: I click on the first image(Image A) to upload it. It appears on the left centre of my screen. Now, I resize it (say, make it two times bigger) and move it to the right hand side corner.
Step 2: Then i click on the second image(Image B) to upload it.
Immediately the first image (Image A, that i had resized and moved to the right hand side) comes back to its initial size and moves back to the start position!
This happens only for the first time i launch the application (Or immediately after every refresh). That is, after performing the above exercize once, if i delete both the images from the screen, and WITHOUT REFRESHING the screen if i repeat Steps 1 and 2, then, the when i upload the second image, the first one doesnt jump back to its initial position.

Now. the next issue is this.
I repeat Steps 1 and 2, and then upload a third and fourth images(Image C and Image D) and move them to the lower right hand corner and lower left hand corner of the screen respectively.
Now if i click on Image D and click on DELETE, it gets deleted and everything remains where it was. BUT, now if i click on Image B and click on DELETE, Image B gets deletec BUT Image C jumps back to its initial size and position!
That is, if i upload, 10 number of images and then delete the 6th image, then, the 6th gets deleted, BUT SIMULTANEOUSLY the 7th, 8th 9th and 10th images jump back to their initial sizes and positions! Whereas the 1st 2nd 3rd 4th and 5th images remain as they are!

Here, i have used a new dataset, as suggested by you. But the problem persists.

I request you to please look into the code extract i have sent and run it and Please give us the solution ASAP. Because this problem has slowed down all our work.

Thanks & Regards,
Chaitra (On behalf of Mallesh)

[antun]

This is an answer to the first question you posted. I'm working on the second:

The reason that the first image resets itself after you add a second is that at that point the uploadimage view changes from being an instance of view to an instance of LzReplicationManager that controls the clones that are the images you see. (Since that's the point at which uploadimage's datapath matches more than once).

Note that once a view becomes a LzReplicationManager, it does not go back to being a view, even if you set its datapath to something that matches only once.

That means that you have two options:

1) Always set a datapath that matches multiple times (not practical in your situation).
2) Make the view invisible at the beginning, and set it's datapath to a dummy dataset that matches twice to force it to be a LzReplicationManager but have it be made visible when you change the datapath.

Here is an example of the second system:


<canvas debug="true">
<dataset name="myds">
<MyImg>
<Image>DRNirvan.jpg</Image>
</MyImg>

<MyImg>
<Image>Blue20hills.jpg</Image>
</MyImg>

<MyImg>
<Image>031121_mon_cham1_m2w.jpg</Image>
</MyImg>

<MyImg>
<Image>world_at_night.jpg</Image>
</MyImg>
</dataset>

<!-- Dataset that will be used to force the imgs view to be a
replication manager -->
<dataset name="mydummyds">
<MyImg>
<Image>DRNirvan.jpg</Image>
</MyImg>

<MyImg>
<Image>Blue20hills.jpg</Image>
</MyImg>
</dataset>

<view name="controls">
<simplelayout axis="y" spacing="10" />
<button>one
<method event="onclick">
imgs.setDatapath( "myds:/MyImg[1]" );
imgs.setVisible( true );
</method>
</button>

<button>two
<method event="onclick">
imgs.setDatapath( "myds:/MyImg[1-2]" );
imgs.setVisible( true );
</method>
</button>

<button>three
<method event="onclick">
imgs.setDatapath( "myds:/MyImg[1-3]" );
imgs.setVisible( true );
</method>
</button>
</view>

<class name="myimage">
<method
name="applyData"
args="d">
if (d == null) { return; }
setSource( d );
</method>
</class>

<class name="imagedisp" onmousedown="this.dragger.apply()"
onmouseup="this.dragger.remove()">
<dragstate name="dragger" />
<myimage
stretches="both"
width="${parent.width}"
height="${parent.height}"
datapath="Image/text()">
<method event="onload">
this.setWidth(this.resourcewidth/4);
this.setHeight(this.resourceheight/4);
</method>
</myimage>
</class>

<!-- Set the datapath of the view to the dummy one at init time -->
<imagedisp name="imgs" datapath="mydummyds:/MyImg[1-2]"
visible="false">
<!-- We need to set datacontrolsvisibility to false, to override
the view's default behavior of making itself visibile ondata -->
<datapath>
<attribute name="datacontrolsvisibility" value="false" />
</datapath>
</imagedisp>


</canvas>


-Antun

[thipperudra]

Hi Antun,

I am facing problem in below code,here i can display four images by using 'Add Images' button.I reposition those images by dragging. And i can delete the selected image by using 'Delete Selected image' button (using deleteNode() method).If i delete first or second or third image,all images are moves to original position.I don't want moving remaining repositioned images towards the original position.But this problem not occur if i delete the latest image.Could you rectify the below code to work perfect.

<canvas debug="true">
<dataset name="myds">
<MyImg>
<Image>DRNirvan.jpg</Image>
</MyImg>

<MyImg>
<Image>Blue20hills.jpg</Image>
</MyImg>

<MyImg>
<Image>031121_mon_cham1_m2w.jpg</Image>
</MyImg>

<MyImg>
<Image>world_at_night.jpg</Image>
</MyImg>
</dataset>

<!-- Dataset that will be used to force the imgs view to be a
replication manager -->
<dataset name="mydummyds">
<MyImg>
<Image></Image>
</MyImg>

<MyImg>
<Image></Image>
</MyImg>
</dataset>

<view name="controls">
<simplelayout axis="y" spacing="10" />
<button>Add Images
<method event="onclick">
imgs.setDatapath( "myds:/MyImg" );
imgs.setVisible( true );
</method>
</button>
</view>
<button x="100" id="deletebutton">Delet Selected image
<selectionmanager name="selector" toggle="false"/>
<method event="onclick">
var selectedNode = deletebutton.selector.selected[0];
selectedNode.datapath.deleteNode();
</method>
</button>


<class name="myimage">
<method
name="applyData"
args="d">
if (d == null) { return; }
setSource( d );
</method>
</class>

<class name="imagedisp" onmousedown="this.dragger.apply()"
onmouseup="this.dragger.remove()" onclick="deletebutton.selector.select(this);">
<dragstate name="dragger" />
<myimage
stretches="both"
width="${parent.width}"
height="${parent.height}"
datapath="Image/text()" >
<method event="onload">
this.setWidth(this.resourcewidth/4);
this.setHeight(this.resourceheight/4);
</method>

</myimage>
</class>

<!-- Set the datapath of the view to the dummy one at init time -->

<imagedisp id="imgs" datapath="mydummyds:/MyImg[1-2]"
visible="true">

<!-- We need to set datacontrolsvisibility to false, to override
the view's default behavior of making itself visibile ondata -->
<datapath>
<attribute name="datacontrolsvisibility" value="false" />
</datapath>
</imagedisp>
</canvas>


Thanks in advance,
-Rudresh

[antun]

If you turn pooling on for the datapath, then the images won't reset:


<datapath>
<attribute name="datacontrolsvisibility" value="false" />
<attribute name="pooling" value="true" />
</datapath>


-Antun

[thipperudra]

Hi Antun,

I used this
code:
-------------------------------------------------
<datapath>
<attribute name="datacontrolsvisibility" value="false" />
<attribute name="pooling" value="true" />
</datapath>
--------------------------------------------
in my code,but i am getting different problem.Here if i delete the First image,the Second image is moving to First image position, Third image is moving second image position and the Fourth image is moving to Third image position.I think here position of the image will shift to prvious image position when i delete the any previous images.So i don't want shift the position of the designed (repositioned) image,so what can i do for this to avoid this problem .

Thanks in advance,
-Rudresh.

[antun]

You're right - I had not noticed that. What I did to get around the problem was to constrain the x and y position of the images to attributes of the data itself.

Then when the mouse is released, then the attributes in the data are updated:


<method event="onmouseup">
this.datapath.p.setAttr("x", this.x);
this.datapath.p.setAttr("y", this.y);
this.dragger.remove();
</method>


-Antun

[thipperudra]

Hi Antun,

Still i am facing same problem (what i described in my last post), even though i added your code in my example code.Could you rectify the below code.Or is there other option to solve this problem.
code:
----------------------------------
<canvas debug="true">
<dataset name="myds">
<MyImg>
<Image>DRNirvan.jpg</Image>
</MyImg>

<MyImg>
<Image>Blue20hills.jpg</Image>
</MyImg>

<MyImg>
<Image>world_at_night.jpg</Image>
</MyImg>

<MyImg>
<Image>031121_mon_cham1_m2w.jpg</Image>
</MyImg>

</dataset>

<!-- Dataset that will be used to force the imgs view to be a
replication manager -->
<dataset name="mydummyds">
<MyImg>
<Image></Image>
</MyImg>

<MyImg>
<Image></Image>
</MyImg>
</dataset>

<view name="controls">
<simplelayout axis="y" spacing="10" />
<button>Add Images
<method event="onclick">
imgs.setDatapath( "myds:/MyImg" );
imgs.setVisible( true );
</method>
</button>
</view>
<button x="100" id="deletebutton">Delet Selected image
<selectionmanager name="selector" toggle="false"/>
<method event="onclick">
var selectedNode = deletebutton.selector.selected[0];
selectedNode.datapath.deleteNode();
</method>
</button>


<class name="myimage">
<method
name="applyData"
args="d">
if (d == null) { return; }
setSource( d );
</method>
</class>

<class name="imagedisp" onmousedown="this.dragger.apply()">
<dragstate name="dragger" />
<myimage stretches="both" width="${parent.width}" height="${parent.height}"
datapath="Image/text()" >

<method event="onload">
this.setWidth(this.resourcewidth/4);
this.setHeight(this.resourceheight/4);
</method>

</myimage>
</class>

<!-- Set the datapath of the view to the dummy one at init time -->

<imagedisp id="imgs" datapath="mydummyds:/MyImg[1-2]" onclick="deletebutton.selector.select(this);">

<!-- We need to set datacontrolsvisibility to false, to override
the view's default behavior of making itself visibile ondata -->

<datapath>
<attribute name="pooling" value="true" />
</datapath>
<method event="onmouseup">
this.datapath.p.setAttr("x", this.x);
this.datapath.p.setAttr("y", this.y);
this.dragger.remove();
</method>

</imagedisp>
</canvas>
----------------------------------

Thanks,
-Rudresh.

[antun]

I think you missed this part from my previous post:

What I did to get around the problem was to constrain the x and y position of the images to attributes of the data itself.

You need to constrain the imagedisp x and y coordinates to the xpos and ypos attributes from the data (x="$path{'@xpos'}").

-Antun

[thipperudra]

Hi Antun,

I used constrain to imagedisp x and y coordinate to the xpos and ypos attribute in my code.But, still i am getting same problem, when i delete any selected(1 or 2 or 3 image) image,the next of that image will shift to the deleted image position. Could you please rectify my code (i have attached my code) and is it correct,what i used the constrain in my code.

Thanks in advance,

Rudresh

[antun]

You are recording the x attribute of the image in the XML as "x", but then you're constraining the x attribute to the "xpos" attribute of your XML.

If you do:

this.datapath.p.setAttr("xpos", this.x);

... then do...

x="$path{'xpos'}"

Does that clarify it?

-Antun

[thipperudra]

Hi Antun,

Thank you very much for your quick solutions it is working fine now.
But i want know how to avoid the resize(reset the original image size) of the images, when i delete the selected image.I don't want resize other images,when i delete the any selected image.How to do this for the same code.

Thanks in advance,
Rudresh

[antun]

I didn't resize the images, so I didn't see that behavior, but I would recommend the same model as for the x- and y- coordinates: once the user resizes the image, set attributes on the data, and constrain the width and height of the image to that data.

-Antun

[thipperudra]

Hi Antun,

I am working with this code for resize the displayed images by using red view and reposition by dragging and i want delete the selected image.For avoiding my last post problem , i am using constraints for datapath,but it is not working well this code.Could you rectify this code (i have attached with this post ).

Thanks in advance,
Rudresh.

[thipperudra]

Hi Antun,

Could you give me the solutions for my last post.

I am waiting your kind solution.

Thanks,
Rudresh

[antun]

I see the strange resize behavior. I would recommend either writing your own resizing code, or writing your own resizestate.

That way you'll be able to fine-tune the exact behavior you want to obtain.

For writing your own code for resizing, check out the window tutorial:

http://www.laszlosystems.com/lps-2.1.2/tutorials/window.html#resizable

-Antun

[antun]

One more thing - if you're going to be stretching, resizing and dragging the images, then it might be a good idea to nest the view with stretches="both" inside of your class, and have the red thumb that the user drags be a sibling to the view with the resource.

That way the coordinate space that is stretched won't affect anything other than the image.

Some of the strange behavior you're seeing now could well be to do with the fact that the view that the user clicks on is inside a stretched view. Check out Adam Wolff's excellent blog post on Laszlo coordinate spaces (http://www.laszlosystems.com/~adam/blog/archives/000014.html).

-Antun

[thriputapriya]

Hi Antun,

Still i am facing same problem, what i said in my last post,and also i wrote my seperate resize code for resize state but no use.Could you rectify my code(which i have attached) and if i delete any selected image the other images shouldn't be (resized) reset its original size.

Thanks in advance,
thriputapriya