I am new to Vaadin framework. I want to add components to Javascript component. But as it is already extending AbstractJavaScriptComponent I cannot extend other class which has implementation of addComponent() method. So I am implementing Layout interface in vaadin but I am not able to implement the addComponent() method so that I can add Panel,Buttons or Vertical Layouts to my Javascript component. Please help me in implementing this method.
Here is my code :
public class ResizableComp extends AbstractJavaScriptComponent implements Layout{ @Override public void addComponent(Component c) {
//what to add here??? }
}
I am trying to achieve
final HorizontalLayout left = new HorizontalLayout();
setContent(left);
left.setSizeFull();
final ResizableComp rc = new ResizableComp();
final Button screen2 = new Button(“Screen2”);
rc.addComponent(screen2);//this should work
Yes using the creating a simple component container wiki article you can create a custom widget to which you can addComponent (s). The instances of the connector then can be used in your widget’s connector class. The problem with Javascript components is that the server side class has to extend AbstractComponentContainer and the connector has to be a Java class extending AbstractComponentContainerConnector which doesn’t work with the normal JS component integration approach you probably used.
What i did was create a simple Component container with the client side being based on the SimplePanel gwt class as it is made of only one div. Then from GWT i was able to create DOM elements (DOM.createDiv()), append divs, modify class names and styles, attach listeners, access attributes and contents of elements, … which made a lot of JS code i had in my JS component obsulete even though i could’ve made it simple and just execute the JS directly from GWT.
What is the main functionality of your JS component? Is it too complex to refactor with GWT client side coding?
My javascript component should have child components like Panel, Button, Layout etc and should be able to resize dynamically. Also the child components should also be resized to fit the newly resized parent component. I have not tried GWT client side coding yet.
Another option (which would probably be easier in your case) would be to create a Component Extension and just use a standard Vaadin Component container to extend. This way you don’t have to create your own adding-Component functionality.
If for example you want to use this (or similar)
http://jqueryui.com/resizable/ you could use a CssLayout (because it’s the most simple layout there is. Others should work too but may include some additional fiddling to find the right div) as container and write an extension for it like this
Vaadin 7 Wiki Integration JS Library as Extension . There you can use JS to find the CssLayout div and give it an id (if it hasn’t one already, not sure) and then use the jQuery resizable code on it.
Btw. if you use relative sizes for the child component you shouldn’t have to “manually” resize them.
Additionaly: There is the CSS3 property “resize” which has similar functionality but isn’t supported in all browsers (yet).
If you can’t use any of the above and want to try the custom component container approach i talked about i would recommend following the Creating a simple Component Container wiki article i linked to earlier and then modify the client side to do what you want it to.
Also please tell me if you know how do I set CssLayout to be resizable property defined in above html file?
I mean how do I assign resizable id to CssLayout in Javascript? Also where do I put this Javascript file.
I’m stuck in basic integration part. Sorry for the trouble for you.
After you know what an Extension is look at
Integrating a Javascript library as an extension . You then should create a Javascript extension which extends the CssLayout Component. The jQuery library should be in your project so can reference it in your extension using @JavaScript(“…”).
In your javascript connector inside of
(function() {
...
})()
you call the replacable function like it is described on the jQuery page using the ID you set. The pushCommand function in the Javascript extension wiki article is not necessary for your purpose.
I have gone through the above links. I have few questions.
If you take the case of refreshing example given in Creating a UI extension link what is the Javascript extension which extends the CssLayout Component? I mean which class?
If that class is Refresher then should it extend the CssLayout as
Refresher extends CssLayouyt{
}
But it is already extending AbstractExtension ANS java does not support multiple inheritance.
And which object should I use in Vaadin java code? CssLayout or extension which is extending CssLayout?
The Refresher class from the wiki article is (java) extending AbstractExtension but it is (Vaadin-Extension) extending UI. I know it can be confusing as the verbs are the same.
Your Js Extension of CssLayout could be kind of like this:
@JavaScript(jQueryUI.js)
public class ResizableExtension extends AbstractJavaScriptExtension {
public ResizableExtension (CssLayout csslay) {
extend(csslay);
}
}
(This is just the server class btw and just a small part of it)