Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Create Menu from Javascript

William Valencia Acosta
10 years ago Mar 07, 2012 4:28pm

Hello,

I want to know how can create a nice menu since a javascript, I have this http://repo.esferabit.com/StartPage/index.htm but I want to put this javascript's library in Vaadin Classes as InvientCharts Add-On, maybe the solution is create an add-on that contains this javascript in the GWT class, but I need a simple example with this JS. Any idea? Thanks.

Mathias Clerc
10 years ago Mar 08, 2012 12:46am

I looked quickly to the page you have given but it doesn't seem to use javascript but positioning and sizing elements statically in CSS :

#thumb1{
	width:215px;
	height:103px;
	position: absolute;
	left:0px;
	top:0px;
	background:url('../lib/1.png')/*#409da5*/;
	line-height: 103px;
}

#thumb1 img{
	max-width: 215px;
	max-height: 103px;
}

You can do the same with an absolutelayout or a csslayout.

William Valencia Acosta
10 years ago Mar 08, 2012 1:07pm

Thanks Mathias for the reply, originally the code is in Javascript with JQuery, I need to do an Add-On for Vaadin, or a similar Vaadin Widget with this design :grin: I'm new in this, and I want to know how do charts in a Vaadin Widget or something similar to this example. Thanks.

Mathias Clerc
10 years ago Mar 09, 2012 2:21am

Hard to tell with just this.
Depending on what you want to achieve and how the plugin work you may have to :
- write a new full-featured layout for vaadin (quite tough)
- write a GWT component and wrap it for vaadin as explained in the book (difficulty depends on the JS library and the number of parameters to pass between vaadin and gwt, maybe there is already a GWT version existing...)
- use a custom layout with placeholders and add jquery in vaadin page header see here on how to add scripts to vaadin pages (hackish)
- Do it in pure vaadin for instance use CSSLayout or Absolute layout and recode all the jquery part in java using vaadin API. (depends on how the library works)

William Valencia Acosta
10 years ago Mar 09, 2012 1:35pm
Mathias Clerc
10 years ago Mar 12, 2012 12:08am

The book has a full color picker sample to help you start here

William Valencia Acosta
10 years ago Mar 14, 2012 8:08pm

Thanks Mathias, I found it: https://vaadin.com/wiki/-/wiki/Main/Creating%20a%20new%20Component?p_r_p_185834411_title=Creating%2520a%2520new%2520Component

Thanks for help me. Have a nice day.

William Valencia Acosta
10 years ago Mar 27, 2012 4:26pm

I'm finishing this add-on, I hope that you can use someday, remember that it's based in: http://eight.kx.cz

It's working in Firefox, Chrome and I.E.9.