Custom Layouts with ReplicationManager

[johnhenry]

I'm trying to extend the functionality of the TreeView found at this post:

http://www.laszlosystems.com/developers/community/forums/showthread.php?s=&threadid=252&highlight=tree

to include the ability to move folders ondrag and insert new nodes (folders). To enable this, I've been building a custom layout that takes actions on its subviews based on the X and Y coordinates of the rootclass (in this case, the recursive tree class).

The thread above discusses how recursive "clones" are dealt with in a different way than views:



<method event="onclick">
this.toggleVisibility();
</method>

<method name="toggleVisibility">
<![CDATA[
if ( this.smelly ) {
if ( this.smelly.getNodeCount() ) {
// smelly is a LzReplicationManager
for ( var i=0; i < this.smelly.getNodeCount(); i++ ) {
var firstClone = this.smelly.getCloneNumber( i );
firstClone.setVisible( !firstClone.visible );
}
} else {
// smelly is just a view, because there is only one
this.smelly.setVisible( !this.smelly.visible );
}
}
]]>
</method>



So two questions:

1. I'm having problems getting the class and subclasses to be controlled by a single layout. Subclasses should be stacked vertically (along the y axis), but aren't. Does this have something to do with the replication manager clones?

2. The layout (attached in basic form) uses callbacks between subviews and the custom layout to call functions like mouseover. Can't get this functionality working consistently across all views. Is this also related to the way in which the replicationmanager clones nodes?

Any ideas on how to make this work? I think the component would be useful as standard navigation.

-Chris

[antun]

Layouts affect siblings, so you can't just have a single layout called TreeLayout that's going to manage your entire tree. If you look at the example you referred to, you'll see that the simplelayout in there is actually inside the <recursor> class, which gets instantiated for every node, so there are actually a lot of simplelayouts in there.

So, if you copy the <TreeLayout> to where it's going to get replicated, e.g.


<state name="childstate">
<attribute name="apply" constraint="parent.haschildren"/>
<!-- ********** note addition of "visible" and "bgcolor" attributes ********* -->
<recursor name="smelly" bgcolor="white" datapath="*" x="10" visible="true" />
<TreeLayout name="treelyout" axis="y" spacing="5"/>
</state>


... your tree will at least look right when the app starts.

Now the next step is to get the dragging going. If you run your code with the fix I suggested above, you'll be able to drag the views but it will look pretty messy, because as you drag some subview, its parent's height and width will change, disrupting the layout of its parent relative to its parent's siblings.

Here's the model you should try to use to get drag/drop behavior in LZX:

Have an instance of your tree class floating on top of the entire app, and have it set to invisible to begin with. When you mousedown on a view, rather than dragging that view, set the datapath of your floating instance to the datapath of the view you just moused down on. The floating instance then becomes a copy of the view that you moused down on, and you can drag the floating instance anywhere you like without disrupting the rest of the app.

When you release the mouse, you can calculate which of the views it was released over, and then change the data (using Datapointer APIs like setFromPointer()):

http://www/developers/learn/documentation/lzxref/datapointer.php#meth-setFromPointer

Does that clear things up a little?

-Antun

[cmorgan]

Thanks. This does make sense in terms of getting the basic functionality of moving nodes around working. Is there any way you know of to control the attributes of the static tree as the floating tree is dragging over it?

[antun]

I'm not sure what you mean here. Could you elaborate?

-Antun


Is there any way you know of to control the attributes of the static tree as the floating tree is dragging over it?

[cmorgan]

I'm trying to get the treeview to replicate the behavior of a windows explorer interface. When a folder is dragged over other folders, those folders would highlight. I'm not clear on how I would make the visible (full) tree class aware of the actions taking place in the tree class that floats on top of it.

Thanks.

Chris

[antun]

Hey Chris

I see what you mean. Have a look at this thread:

http://www.laszlosystems.com/developers/community/forums/showthread.php?s=&threadid=496&highlight=calendar

... because of the view hierarchy, you can't just have an onmouseover event on one of the other views. You'd have to set up a delegate on each of them to check the mouse position while dragging.

Do you understand what I mean?

-Antun

[johnhenry]

I think so. Are there examples of this that you can point me to? Thanks - Chris

[antun]

The Amazon app (http://www.laszlosystems.com/lps/viewer/viewer.jsp?file=/my-apps/blueprint/blueprint.lzx) uses this functionality as does the Calendar (http://www.laszlosystems.com/lps/viewer/viewer.jsp?file=/sample-apps/calendar/calendar.lzx). I wrote up this week's Tip on it too:

http://www.laszlosystems.com/developers/community/forums/showthread.php?s=&threadid=508

-Antun