I'm new in vaadin and I need some help. I have a web application seems like windows desktop application and I want to make footer with some logos with links. http://www.inovamer.com.tr/ like this one. can someone explain how can I make it ?
VerticalLayout footer = new VerticalLayout();
mainLayout.addComponent(footer);
mainLayout.setExpandRatio(content, 1);
I tried to make something like that but not really made what I want
Your mainlayout has to be full sized.
VerticalLayout vlMain = new VerticalLayout();
vlMain.setSizeFull();
vlMain.addComponent(content);
vlMain.setExpandRatio(content, 1.0f);
VerticalLayout footer = new VerticalLayout();
vlMain.addComponent(footer);
Related
I have written very basic GWT application where SmartGWt tabs render with label on both tabs.
Problem I am facing here is, when I put GWT based label in second tab and reload application, first tab renders SmartGWT based label but when i click on second tab to look GWT label, it doesn't appear and also I am surprised why first tab content is removed as It was appearing earlier before clicking on second tab.
Please have a look into below code.
package com.test.client;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.tab.Tab;
import com.smartgwt.client.widgets.tab.TabSet;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
public class TestGWT implements EntryPoint
{
public void onModuleLoad()
{
TabSet tabSet = new TabSet();
tabSet.setWidth("400px");
Tab tab1 = new Tab("Tab1");
Canvas pane = new Canvas();
pane.addChild(new com.smartgwt.client.widgets.Label("test label"));
tab1.setPane(pane);
Tab tab2 = new Tab("Tab2");
Canvas pane2 = new Canvas();
pane2.addChild(new Label("test label2")); // I need to put GWT widget in SmartGWT tab but it does not render in this tab. Also, it removes contents from first tab
tab2.setPane(pane2);
tabSet.addTab(tab1);
tabSet.addTab(tab2);
RootPanel.get("testid").add(tabSet);
}
}
When I set second SmartGWT tab to appear first which has GWT widget then things are working fine.
I am using GWT-2.6.1
Please share your thoughts here!
Regards,
Shobhit
Although I agree on the cause of the problem being RootPanel.get("testid").add(tabSet), the solution is replacing that line with:
tabSet.show();
Keep in mind that in SmartGWT, you should add components to other components using add(). Trying to add components using their IDs is prone to errors.
Finally, keep in mind that Isomorphic discourages mixing SmartGWT's components with components from other libraries. While this is unavoidable sometimes, if you can avoid it in your application, you should, because this is a very common source for bugs. See my comments below for additional sources for these claims.
The problem is adding the TabSet to the RootPanel. So you receive an
A widget that has an existing parent widget may not be added to the detach list.
error.
Change RootPanel.get("testid").add(tabSet); to
tabSet.setHtmlElement((Element) Document.get().getElementById("testid"));
tabSet.draw();
and it will work fine.
I have created a simple view, but it would be nice to add buttons to it. For example, I drew two blue buttons into the view below. Is there a way to add similar buttons to my Eclipse view? I know that I can add a pulldown menu, from this question, but buttons are preferable.
My example below is just a demonstration - the location/size/color of the buttons does not matter as long as the buttons are inside the view.
In case you are using SWT:
For a start you could install WindowBuilder. It lets you work on the UI level without caring to much about implementation. The generated code however is not layed out in the way that you can work with, when you are creating views with more than a few buttons.
The implementation depends on your Eclipse version.
In the old Eclipse 3.x, a Button could be set up by Overriding the method createPartControl:
#Override
public void createPartControl(Composite parent) {
Composite container = new Composite(parent, SWT.NONE);
container.setLayout(new GridLayout(1, false));
Button btnMybutton = new Button(container, SWT.NONE);
btnMybutton.setBounds(0, 10, 75, 25);
btnMybutton.setText("MyButton");
//do anything else here
}
If you are familiar with other UI Frameworks and don't like SWT, you might as well switch to e.g. Vaadin or JavaFX. There's a blog articleabout changing the renderer of your application.
I am trying to add a GXT panel to my smartGWT tab panel but it is not showing.i get this error.i have done this in another tab and it is working but in in my second tab. when i select the second tab i see blank page and in the console i have this error.
Uncaught JavaScript exception [uncaught exception: java.lang.AssertionError: A widget that has an existing parent widget may not be added to the detach list] in , line 0
here is my code
VLayout formBtnFrm = new VLayout();
formBtnFrm.addMember(addEditForm);// addEditForm is DynamicForm
HLayout buttonLayout = new HLayout();
buttonLayout.setMembersMargin(10);
buttonLayout.setHeight(22);
buttonLayout.addMember(createUser);
buttonLayout.addMember(editUser);
buttonLayout.setLayoutAlign(Alignment.CENTER);
formBtnFrm.addMember(buttonLayout);
ContentPanel panel = new ContentPanel();
panel.setFrame(true);
panel.setCollapsible(false);
panel.setAnimCollapse(false);
panel.setButtonAlign(HorizontalAlignment.CENTER);
panel.setHeading("Registration Form");
panel.setLayout(new FitLayout());
panel.add(formBtnFrm);
panel.setSize(350, 250);
groupLayout.addMember(panel);
mainLayout.addMember(groupGrid);
mainLayout.addMember(groupLayout);
addMember(mainLayout);
As it is not recommended at all to mix (for example gwt and smartgwt) I guess it's same thing with Gxt widgets by expérience (with gwt mix) even if it happen to work you never know when you will have a crazy behavior..;
You can always mix GWT widgets with those of Smartgwt, but not Smartgwt and gxt. Chances are many that things might not workout as expected because these are on the same level, they are are all bulit on top of gwt. Meaning the two venders might not have concentrated on making their widgets feet into each other.
I am facing a problem that I can't see the drop down list of the GWT Suggestbox.
I am adding a GWT Suggestbox into SmartGWT's VLayout. Then I can see the textbox of the Suggestbox. But when I input some data, I can't see the suggestions provided.
Is this because I am using the SmartGWT VLayout? Could anyone tell me how to solve it? Thanks.
Sorry, the above question is not clear enough. What I mean is I add a SuggestBox into a layout with small height. Then I can see the the SuggestBox's TextBox part and part of the suggestion and the rest of the suggestion seems hide under other layout. Below is my code:
VLayout mainLayout = new VLayout();
mainLayout.setHeight100();
mainLayout.setWidth100();
MultiWordSuggestOracle oracle = new MultiWordSuggestOracle();
oracle.add("a");
oracle.add("aa");
oracle.add("aaa");
oracle.add("aaaa");
oracle.add("aaaaa");
oracle.add("aaaaaa");
oracle.add("aaaaaaa");
SuggestBox box = new SuggestBox(oracle, new TextBox());
VLayout suggestBoxLayout = new VLayout();
suggestBoxLayout.setHeight("10%");
suggestBoxLayout.addMember(box);
VLayout body = new VLayout();
body.setBackgroundColor("#3B5998");
body.setHeight("90%");
mainLayout.addMember(body);
mainLayout.addMember(suggestBoxLayout);
So when I enter a into the SuggestBox, I can only see a, aa, aaa and the rest suggestions are hide by the body.
This may be zIndex related, but there's no reason to use GWT's SuggestBox and run into problems like this. Use SmartGWT's ComboBoxItem. If you don't want a drop-down control to appear at the end of the text entry area, call setShowPickerIcon(false).
With the help from Alain, I add .gwt-SuggestBoxPopup {z-index: 1000000;} into my CSS. Then I solve the problem.
It would be easier with little bit of code.
Before stopping to mix Smartgwt with Gwt I integrated some code which was using GWt suggestBox and it was working....
(Why don't you use the Smartgwt selectitem it does the job?)
Regards
Alain
I intend to build a web application where users can enter their time every week and have been struggling to get my head around the concept of a single page in GWT that gets repainted with data depending on the user actions. After researching a lot on this site and google, I found one link that I would like to emulate but dont know how to go about doing it in GWT. Although their source code is available, I dont think it is full and complete. I got some idea from this link - Multiple pages tutorial in Google Web Toolkit (GWT) but again dont know how to implement it into a working version. One small working sample would be great to help me understand and get started.
Could anyone please guide me as to how to achieve the look and feel of the screen with the link below and how the content can be repainted with data from the server ? Would I need to put all the logic in one EntryPoint class ? I would like to have the hyperlinks in the left navigation panel and show the content in the right panel. I seem to be completely lost after a few hours of research.
http://gwt.google.com/samples/Showcase/Showcase.html#!CwHyperlink
Thanks a lot for your help.
Regards,
Sonu.
A single page application layout is actually quite easy to achieve.
The first thing you do is define the general layout, using GWTs layout panels. For your layout, I'd suggest using a DockLayoutPanel.
Content content = new Content();
Button switchContent = new Button(content);
Navigation navigation = new Navigation();
navigation.add(switchContent);
DockLayoutPanel pageLayout = new DockLayoutPanel(Unit.EM);
p.addWest(new HTML(navigation), 7.5);
p.add(new HTML(content));
Here, the width of the navigation panel will be fixed, whereas the content will take the remaining space. You have to pass a reference of the button (or some other widget) which does the switch of the content area, add the button to the navigation area, and so on.
Put this into a class, e.g. called MasterPageFactory:
public class MasterPageFactory {
private MasterPageFactory() {}
public static MasterPage newInstance() {
Content content = new Content();
Button switchContent = new Button(content);
Navigation navigation = new Navigation();
navigation.add(switchContent);
DockLayoutPanel masterPage = new DockLayoutPanel(Unit.EM);
masterPage.addWest(new HTML(navigation), 7.5);
masterPage.add(new HTML(content));
return masterPage;
}
}
Now, in your EntryPoint class, call the factory:
RootLayoutPanel.get().add(MasterPageFactory.newInstance());
This example should get you an idea. Other options would be using a DI framework like Guice or the Command pattern.
Your question is mixing up a couple of concepts. If you want the user to click something that looks like a link, and in reponse the application sends a request to the server and shows a page that looks different than the page they're on, and that page has fresh data that just came from the server, then you want a perfectly normal anchor or form submit button. You don't need anything special or weird from GWT.
The showcase example you referenced lets the user click something that looks like a link, and looks like it loads a new page, even to the point of letting the back button work as expected, but does not actually hit the server to get a new page or new data.