ContextMenu error in Laszlo 3.1

[walrustitty]

I have just moved to Laszlo 3.1 and now my ContextMenu does not appear to work correctly. The setContextMenu() apears to no longer do anything and all views display the default instead:
"About OpenLaszlo..."
"View Source"

Where is the Context Menu documented and why does this not work when it did before?

Here is a test case:

<canvas title="test" bgcolor="0xeaeaea" oninit="setContextMenu(cm1);">

<include href="lz/tree.lzx"/>
<script>
var cm1 = new ContextMenu();
cm1.hideBuiltInItems();
cm1.addItem(this.__LZdefaultMenuItem);
cm1.addItem(new ContextMenuItem('Do something...', doSomething));
canvas.setContextMenu(cm1);

function doSomething() { }
</script>

<!-- THE MENU BAR CONTEXT MENU WORKS! -->
<menubar name="menubar2" width="200" oninit="setContextMenu(cm1);">

<!-- THESE CONTEXT ITEMS DO NOT WORK! -->
<menu name="ToolsMenu" width="180" text="My Menu" oninit="setContextMenu(cm1);">
<menuitem name="Objects" text="Objects">
<menu name="ObjectsSubMenu" attach="right">
<menuitem text="Obejct One" oninit="setContextMenu(cm1);"/>
<menuitem text="Object Two" oninit="setContextMenu(cm1);"/>
</menu>
</menuitem>
</menu>
</menubar>

<!-- THE TREE CONTEXT MENU ALSO DO NOT WORK-->
<view width="200" height="200" y="40" oninit="setContextMenu(cm1);">
<tree open="true" text="valuemeal">
<tree text="fries" isleaf="true" oninit="setContextMenu(cm1);"/>
<tree open="true" text="drink">
<tree text="cola" isleaf="true" oninit="setContextMenu(cm1);"/>
</tree>
</tree>
</view>
</canvas>

[hqm]

There was a bug in the 3.1 release I believe. We actually have a new API which has been checked in to the dev branch, and can be gotten with the nightly build. There was a copy of the API posted to the laszlo-dev mailing list a few weeks ago, nad there's an example test app in test/contextmenu in the sources:


<canvas width="100%" height="80%" >
<debug fontsize="12" oninit="setWrapLines(true)"/>

<simplelayout/>

<method event="oninit">
var nm = new LzContextMenu();
var item1 = nm.makeMenuItem('Canvas Hello', function () { Debug.write("Hi, I'm this canvas", this); } );
nm.addItem(item1);
this.setContextMenu(nm);
Debug.write("setting new contextmenu on canvas from api.lzx");
</method>


<view width="100" height="100" bgcolor="#cccccc" name="v1">
<method event="oninit">
var cm = new LzContextMenu();
// Set up a LzDelegate as a callback
var item1 = cm.makeMenuItem('Item1', new LzDelegate(this, "handlerightclick"));
cm.addItem(item1);

var item2 = cm.makeMenuItem('Item2 (disabled)', new LzDelegate(this, "handlerightclick"));
item2.setEnabled(false);
cm.addItem(item2);

var item3 = cm.makeMenuItem('Item3', new LzDelegate(this, "handlerightclick"));
item3.setSeparatorBefore(true);
cm.addItem(item3);

var item4 = cm.makeMenuItem('Show Dialog', new LzDelegate(this, "handlerightclick"));
cm.addItem(item4);
// Menu items generate a "onselect" when they are selected
new LzDelegate(this, "showdialog", item4, "onselect");

this.setContextMenu(cm);

// "onmenuopen" event is to a LzContextMenu soon as the menu gets a mousedown on the right button.
// This gives you a chance to (quickly) rearrange the menu on the fly.
new LzDelegate(this, "menuselected", cm, "onmenuopen");

// "onselect" event is sent to an LzContextMenuItem when it is selected from the menu
new LzDelegate(this, "menuitemselected", item1, "onselect");

Debug.write(cm);
</method>

<method name="menuselected" args="val">
Debug.write("A context menu was opened with a right click, menu = ", val);
</method>

<method name="menuitemselected" args="val">
Debug.write("A right click on an item was detected, item = ", val);
</method>

<method name="handlerightclick" args="val">
Debug.write("handle item handlerightclick, val=", val);
</method>

<method name="showdialog">
md.open();
</method>



</view>




<modaldialog id="md" width="200" height="200">
<simplelayout/>
<text>This is your dialog</text>
<button onclick="md.close()" isdefault="true">OK</button>
</modaldialog>


</canvas>



I'll check if the API proposal made it onto the wiki...

[walrustitty]

Thanks hqm for the prompt reply.

I tried your code with 3.1 and found that LzContextMenu did not exist. Was there any sort of work around I can use with the ContextMenu in the 3.1 build?

Was ContextMenu or LzContextMenu documented anywhere (i.e. what works and how and what is still to come etc..)

I was not wanting to move to nightly builds just yet if I can at all wait until the next stable build. Any idea when this is expected to be ready?

[bigBADguy]

Any update? It seems context menu is not completely dead in 3.1.

But it only work with "view"...


<canvas width="100%" height="100%" debug="true" >
<debug x="5" y="250" />

<script>
function f1()
{
Debug.write("test")
}
</script>
<view width="100" height="100" bgcolor="#ffcc00" >test
<method event="oninit">
var cm = new ContextMenu()
cm.hideBuiltInItems()
cm.addItem(new ContextMenuItem('Test', f1))
this.setContextMenu(cm)
</method>
</view>

</canvas>


And this one does not work...


<canvas width="100%" height="100%" debug="true" >

<include href="lz/tree.lzx"/>
<debug x="5" y="250" />

<script>
function f1()
{
Debug.write("test")
}
</script>
<tree width="100" height="100" bgcolor="#ffcc00" >test
<method event="oninit">
var cm = new ContextMenu()
cm.hideBuiltInItems()
cm.addItem(new ContextMenuItem('Test', f1))
this.setContextMenu(cm)
</method>
</tree>

</canvas>



Is there any temporary workaround... I really want to upgrade from 3.0.2 -> 3.1

Thx

[pacohernandezg]

Thanks hqm.

We have downloaded openlaszlo 3.2alpha nightly build to use the new LzContextMenu component, but it only works with views for us.

Example:


<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE canvas SYSTEM "lzx.dtd">
<canvas debug="true">
<dataset name="testDS">
<items>
<item name="Name 1" age="23"/>
<item name="Name 2" age="35"/>
</items>
</dataset>

<grid datapath="testDS:/" contentdatapath="items/item">
<method event="oninit"><![CDATA[
var myContextMenu = new LzContextMenu();
myContextMenu.hideBuiltInItems();

var cmExample = myContextMenu.makeMenuItem('Custom example', new LzDelegate(canvas, 'exampleMethod'));
myContextMenu.addItem(cmExample);

this.setContextMenu(myContextMenu);
]]>
</method>
</grid>

<view width="50" height="50" bgcolor="red">
<method event="oninit"><![CDATA[
var myContextMenu = new LzContextMenu();
myContextMenu.hideBuiltInItems();

var cmExample = myContextMenu.makeMenuItem('Custom example', new LzDelegate(canvas, 'exampleMethod'));
myContextMenu.addItem(cmExample);

this.setContextMenu(myContextMenu);
]]>
</method>
</view>

<method name="exampleMethod"><![CDATA[
Debug.write('it works!!');
]]>
</method>

<simplelayout spacing="20"/>
</canvas>


For example, the context menu works on the view but it doesn't work on the grid.

Is there a bug in the new LzContextMenu component or am I missing something?

Thanks a lot.

Best regards,
Paco.

[bbarkley]

Anyone been able to add right-click functionality to the grid? I've tried calling setContextMenu on the grid itself, the row class, and everything that's added to the row via the onaddsubview method. No dice.

[bytebodger]

My initial tests indicate that the context menu does not work on grids or windows. I have the default context menu items disabled on my canvas (technically, I have them disabled on a CHILD VIEW of the canvas), which seems to work fine. But if you right-click on one of my grids or my windows, the dang default options are there again. I have tried to explicitly assign new context menus to these elements with the default options turned off, with no luck.

I find this to be EXTREMELY ANNOYING because one of the default options is "View Source". I know that OpenLaszlo may be open source - but the application I'm building is NOT open source and I really don't want any of my source code being exposed.

[walrustitty]

Did you know you can turn off the 'view source' option very easily. Refer to the docs:
http://www.laszlosystems.com/lps-3.2/docs/guide/input-devices.html#d0e16072

...or quoted: If you don't wish to make source visible, set allowRequestSOURCE=false in WEB-INF/lps/config/lps.properties.

Having said this, the right button click is still buggy and it is probably best to stay away from using it in your application. I understand the problems are Flash related. Hope this helps.

[bigBADguy]

http://www.laszlosystems.com/developers/community/forums/showthread.php?s=&postid=19741#post19741

Need more work to make it usable.

Not work for <tree> yet...

[spoco2]

I'm just delving into right click menus now with our application and have found that the documentation is sparse and contradictory around the place as to how to actually build right click menus.

Do they work on all items these days?

What is the correct way to use the feature? The Reference guide is very sparse on details with no example, while the example in the guides: http://www.openlaszlo.org/lps-latest/docs/guide/input-devices.html#d0e16534 misses important things (like what arguments are passed to the handler, what it should contain etc.

Also, the reference gives method to clear the menu: hideBuiltInItems() and clearItems(), yet the guide says
There is no method to clear the menu, but you can erase one with something like

var cmenu = new LzContextMenu();
canvas.setDefaultContextMenu(cmenu)

That would give you an empty context menu.
And yet when doing that you're still left with the Flash items.

Argh, most frustrating.

[bigBADguy]

finally...

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