Menu effects in smart client

Classic Servoy
1

Hi All,

Does anyone have a solution for menu effects like fade-in, fly-out, etc, in smart client?
We want nice looking menus for our application :)

Cheers,
Maria

2

maria:
Hi All,

Does anyone have a solution for menu effects like fade-in, fly-out, etc, in smart client?
We want nice looking menus for our application :)

Cheers,
Maria

Working on a spec for our first Servoy App and would like to do as described above but would wan’t fly-out menus to display in Smart Client.
There are no replies to the post so does that mean it cannot be done ?

Thanks
John

3

Menus with icons and shortcuts are a standard servoy feature, have a look at the window plugin.
If you really want to implement fancy stuff you can do that by using jquery and the browser bean from Patrick Talbot, then you can build whatever you want in html/css. In my opinion it’s quite an overkill but it’s doable anyway.

4

Thanks

So just to confirm and, in other words–
Any thing done in Jquery will compile to a succesful Smart Client presentation

Regards
John

5

The browser bean allows you to render html in smart client using the operating system default browser (Safari on mac, IE on windows, etc) so if you place the bean on your form you can render your menu system in that “box” using whatever js library is supported by the browser and callback servoy methods on events. I wouldn’t do that for a navigation system in a smart client because it’s quite heavy and not consistent with the rest of the client GUI but if you want it’s doable.

6

Thanks again Nicola

Looks like it’s worth some experimentation as fly-out menus will be a big space saver or iPads,Iphones

7

Wait.
iPad and iPhones?
Smart client can’t run in those devices, if you plan to deploy on those you must use webclient and then you don’t even need the Browser Bean, just place a non editable HTML area on your form and you’re done. You will need the WebClientUtils plugin from Servoy Forge. Something like this:

plugins.WebClientUtils.addJsReference('http://localhost:8080/Libraries/jqueryui/js/jquery-1.4.2.min.js');
	plugins.WebClientUtils.addJsReference('http://localhost:8080/Libraries/jqueryui/js/jquery-ui-1.8rc3.custom.min.js');
	plugins.WebClientUtils.addCssReference('http://localhost:8080/Libraries/jqueryui/css/ui-darkness/jquery-ui-1.8rc3.custom.css')
	
	_html = '<html><head> \
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" > \
		</head> \
	<body style="" ><div id="accordion" > \
	<h3><a href="#" >Section 1</a></h3> \
	<div> \
		<p><button id="jButton" > Test 1</button><script type="text/javascript" > \
			$(function() { \
				$("#jButton").button({ \
			 \
				}); \
			}); \
		</script></p> \
	</div> \
	<h3><a href="#" >Section 2</a></h3> \
	<div> \
		<p>Text2</p> \
	</div> \
	<h3><a href="#" >Section 3</a></h3> \
	<div> \
		<p>Text3</p> \
	</div> \
	<h3><a href="#" >Section 4</a></h3> \
	<div> \
		<p>text4</p> \
	</div> \
</div><script type="text/javascript" > \
	$(function() { \
		$("#accordion").accordion({ \
			collapsible: true \
		}); \
	}); \
	</script></body></html>'
8

Ah yes and thanks so much for your pointers to the way ahead.

Will be coding soon and will post progress