I m a newbie in Vaadin and I am using a TabSheet where I attach some tabs. I was wondering if I could get some more functionality from their captions.
For instance, when a tab is selected and the user clicks its caption then a dropdown menu can appear.
I have already experimented with the existing listeners of TabSheet and I concluded that I have to make a custom listener. The thing is that I cannot find a way to fire the event when I click on the selected tab caption...
You could use SelectedTabChangeListener on a TabSheet. It would fire the event when the caption is clicked, and you could reselect your current tab, etc.. It would be cumbersome.
Why not use the MenuBar? Isn't it exactly what you want? https://demo.vaadin.com/valo-theme/#!menubars
I had the same problem (Vaadin 7.4), what you can do is you can surround the tab caption with a <div onclick="...">captionText</div> and add a JavaScript callback function:
final TabSheet sheet = new TabSheet();
sheet.setTabCaptionsAsHtml(true); // don't forget this!
// This is the callback
JavaScript.getCurrent().addFunction("clickedTab", new JavaScriptFunction() {
#Override
public void call(JsonArray arguments) {
LOGGER.info(arguments.getString(0)); // this is 'some identifier'
}
});
final TabSheet.Tab tab = sheet.addTab(component, "<div onclick=\"clickedTab('some identifier');\">captionText/div>");
Related
I have a JTabbedPane in Java (Swing Layout) with 3 tabs with a table on each tab. I also added a ChangeListener(stateChanged) to remove the table filter when the tab is changed by the user. No my problem is, that I want to remove the filter on the tab I am leaving, so I need the index of my previous tab or perform the action right before the moment the tab is changed.
Now my question is there a possibility to get the tab Index of the previous selected tab? I only get the newly selected tab by using the ChangeListener(stateChanged)?
Below my code:
tabPane.addChangeListener(
new ChangeListener() {
// Reset Search and Filter when tab is changed
public void stateChanged(ChangeEvent e) {
tabPane.getSelectedComponent().requestFocusInWindow();
clearFilter(tabPane.getSelectedIndex())
}
});
I tried to store the previous selected tab in a variable but it did not work.
I've created a suggest box and generated HTML page with huge text, so I can scroll.
1. Show suggest list
2. Scroll page
The popup box with suggestion list moves with scrolled page, but I want that it will neither hide when page scrolls nor move with page.
As I understand that suggest popup has absolute position. But is there some non css solution.
Answer to:
I've tried add scroll handler to Window, but I've found out that handle only event when I have and right of them moves, only in this case. If I have one scroll to scroll page like in case with large text - nothing invokes
When constructing a SuggestBox you can provide your own SuggestOracle, TextBox and SuggestionDisplay. DefaultSuggestionDisplay can be used to hide suggestion list. You can do it in Window.scrollHandler.
Here is the code:
MultiWordSuggestOracle oracle = new MultiWordSuggestOracle();
oracle.add("one");
oracle.add("two");
oracle.add("three");
TextBox box = new TextBox();
final DefaultSuggestionDisplay display = new DefaultSuggestionDisplay();
SuggestBox suggestBox = new SuggestBox(oracle, box, display);
Window.addWindowScrollHandler(new ScrollHandler() {
#Override
public void onWindowScroll(ScrollEvent event) {
display.hideSuggestions();
}
});
Note, that you need to use DefaultSuggestionDisplay - see documentation on deprecated hideSuggestionList method.
I hope that the example explains it all.
I've also checked that if you don't use own SuggestionDisplay it uses DefaultSuggestionDisplay anyway. So you can do it even simpler.
((DefaultSuggestionDisplay) suggestBox.getSuggestionDisplay()).hideSuggestions();
EDIT:
If not the whole window is scrolled but only content of some panel, you can add a ScrollHandler to the panel:
panel.addDomHandler(new ScrollHandler() {
#Override
public void onScroll(ScrollEvent event) {
((DefaultSuggestionDisplay) suggestBox.getSuggestionDisplay()).hideSuggestions();
}
}, ScrollEvent.getType());
I have two labels, two datepickers, and a submit button within a DockLayoutPanel. I'm trying to just get the button to show up in the center of the panel.
Here is the code I am trying to get just to get the button centered:
Button b = new Button("Submit", new ClickListener()
{
public void onClick(Widget sender)
{
getAwards(text.getText(),text2.getText());
}
});
b.setWidth("80px");
b.addStyleName("gwt-Button");
and within my css:
.gwt-Button{
margin-left:auto;
margin-right:auto;
}
What edits or method do I have to take to actually get this to work?
Edit: For extra information, this button is being added to a DockLayoutPanel
Try:
.gwt-Button{
position:absolute;
left:50%;
margin-left: -40px; /* Width Button /2 */
}
Try disabling the loading of whatever default GWT theme you are using (such as clean) in your gwt.xml file, it may be messing with things, since you're using the same class name.
Alternatively, just use a CSS class name other than "gwt-Button" here.
I've tried using the new FileDownloader in Vaadin7. Unfortunately, it needs an AbstractComponent for the "extend" component (where it listens for the clicks)
Is there a way to use it with combobox items? As they are not AbstractComponents and thus do not fit with the "extend" method.
The Vaadin forums have discussed this a lot, and there is no scheme now using FileDownloader or the similarly functioning BrowserWindowOpener. They all only work on AbstractComponents, and thus don't work on Action handlers for Table and Tree, or row click handlers on Table, or MenuItem in Menu, etc. The same applies to selected elements in their various select boxes.
You have to revert to the popup window style (so browsers will need to allow popups for it to work) using a regular click/valuechange listener, creating a Resource and passing it to the deprecated, but still working, Page.getCurrent().open(Resource...) method.
Here is my work-around. It works like a charm for me. Hope it will help you.
This example is for the MenuItem, but you can modify for ComboBox.
Create a button and hide it by Css (NOT by code: button.setInvisible(false))
final Button downloadInvisibleButton = new Button();
downloadInvisibleButton.setId("DownloadButtonId");
downloadInvisibleButton.addStyleName("InvisibleButton");
In your theme, add this rule to hide the downloadInvisibleButton:
.InvisibleButton {
display: none;
}
When the user clicks on menuItem: extend the fileDownloader to the downloadInvisibleButton, then simulate the click on the downloadInvisibleButton by JavaScript.
menuBar.addItem("Download", new MenuBar.Command() {
#Override
public void menuSelected(MenuBar.MenuItem selectedItem) {
FileDownloader fileDownloader = new FileDownloader(...);
fileDownloader.extend(downloadInvisibleButton);
//Simulate the click on downloadInvisibleButton by JavaScript
Page.getCurrent().getJavaScript()
.execute("document.getElementById('DownloadButtonId').click();");
}
});
I have a button which opens a pop-up window and an Ajax update panel. Inside that window I have another button.
What code do I have to run if I want that update panel to be refreshed, when I press the button from the parent page, without refreshing the whole page?
I sow this code on a web which refreshes the page:
<div id="Container" onclick="__doPostBack('UpdatePanel1', '');">
I am such a good friend with Java.
You need to utilize window.opener object.
window.opener.document.getElementById('Container').onclick();
I'd suggest using jQuery to ensure cross-browser compatibility. And also adding some null-checks of course.
Use Jquery :
If the DIV ID remains static :
$("#Container").click(function() {
// REFRESH CONTAINER HERE
});
If the Div ID is dynamic then make use of class instead of ID:
$(".Container").click(function() {
// REFRESH CONTAINER HERE
});