I have a simple use case: in a multi select Table
when the user selects 1 row, a context menu with two actions must be returned (DELETE and DOWNLOAD)
when the user selects more than one row, only the DELETE Action should be in the context menu
This is the code I use:
contactList.setMultiSelect(true);
final Action delete = new Action("Delete", FontAwesome.TIMES);
final Action download = new Action("Download", FontAwesome.DOWNLOAD);
contactList.addActionHandler(new Action.Handler() {
#Override
public Action[] getActions(Object target, Object sender) {
final Table table = (Table)sender;
// if Table is in multi select mode, getValues() returns Set of item id's
if (table.isMultiSelect() && ((Set)table.getValue()).size() > 1) {
return new Action[] {delete};
} else {
return new Action[] {delete, download};
}
}
...
I see that getActions() is called by the Table component every time a row selection is made. It returns the correct Action array. However, in the UI, only one context menu is used, independent of the actions returned.
This topic is not covered in The Book of Vaadin. There is an old question but the solutions is way too complicated and the solution suggested by Joonas is not working (in fact the case i describe here).
Its a well-known issue in Vaadin from version 6. Most people (including me) work-around this by using ContextMenu Addon
Related
I have a custom section, with a custom tree.
I'm having a bit of trouble understanding how you set the correct behavior when:
You click a node in your tree to edit it.
You click a menu item on a node like "Create"
In my solution I'm using the same view to edit and create a record.
In my tree this is how a node is generated.
var routeToView = "rewards/rewardsTree/editcampaign/campaign-" + campaign.Id.ToString();
var campaignNode = CreateTreeNode("campaign-" + campaign.Id.ToString(), id.Split('-')[1], queryStrings, campaign.CampaignName, "icon-folder color-yellow", true, routeToView);
This is producing the route I want: (the name of my html file is editcampaign.html) and it is also passing "campaign-6"
/umbraco#/rewards/rewardsTree/editcampaign/campaign-6
When a user clicks the create 'menu Item' on the node - I want to send them to the same URL but just with a diffrent Id for example:
umbraco#/rewards/rewardsTree/editcampaign/brand-1
and I don't want it to pop up out of the side
This is what I have tried so far:
//This finds the view, but it comes up in a dialog also how do I pass the Id (brand-1)
MenuItem mi = new MenuItem("editcampaign", "Create Campaign");
menuItemCollection.Items.Add(mi);
//Also Tried this finds puts a whole another umbraco UI inside a dialog
mi.LaunchDialogView("#rewards/rewardsTree/editcampaign/brand-1", "TITLE GOES HERE");
Can anyone point me to the fullest documentation for Menu's trees and navigation around the back office in general?
I believe there is an option to set view path on the "Create" menu item, which makes it open normally? Also, wouldn't it make more sense to have your path like /view/path/here/id ? Then when you create a new item just send 0 as id. Umbrangular on Github is a project with great examples of custom sections and views.
EDIT: Here's an example
protected override MenuItemCollection GetMenuForNode(string id, FormDataCollection queryStrings)
{
var menu = new MenuItemCollection();
MenuItem createCategory = new MenuItem("createcategory", "Create Category");
createCategory.AdditionalData.Add("ParentCategoryId", id);
createCategory.NavigateToRoute("/path/to/view/category/0");
createCategory.Icon = "add";
menu.Items.Add(createCategory);
return menu;
}
I am doing some integration tests, and I have replaced some tables with a grid. At this moment, I have some visible columns by default and other columns are hidden as follows:
column6.setHidable(true);
column6.setHidden(true);
Now I am trying to do some integration tests. For getting the grid, I can use the method (is the only grid present in this view):
$(GridElement.class).first();
This works fine. But for my test (with Vaadin Testbench), I need to check some values that are inside the hidden columns of the grid. I am talking about this button:
I have tried to use the Vaadin debug console to get the name of the button that allows the user to show/hide columns, but the debug console only can select the entire grid element, not this menu.
Also I have check if inside the GridElement exists any kind of already implemented method that give me access to this menu without any success.
Usually, chrome developer tools (or similar for firefox and ie / edge, etc) is your best friend in such cases. So far I'm not aware of anything dedicated for that particular button. However you can workaround this limitation by selecting the items which compose this feature by their specific classes:
The below test method shows a quick implementation which should give you a starting point:
public class GridManipulationTest extends TestBenchTestCase {
#Before
public void setUp() throws Exception {
System.setProperty("webdriver.chrome.driver", "D:\\Kit\\chromedriver_win32\\chromedriver.exe");
setDriver(new ChromeDriver());
}
#After
public void tearDown() throws Exception {
// TODO uncomment below after checking all works as expected
//getDriver().quit();
}
#Test
public void shouldOpenGridColumnVisibilityPopupAndSelectItems() {
// class for the grid sidebar button
String sideBarButtonClass = "v-grid-sidebar-button";
// class for the sidebar content which gets created when the button is clicked
String sideBarContentClass = "v-grid-sidebar-content";
// xpath to select the item corresponding to the necessary column
// there are perhaps more "elegant" solutions, but this is what I came up with at the time
String columnMenuItemXpath = "//*[contains(#class, 'column-hiding-toggle')]/span/div[text()='Name']";
// open the browser
getDriver().get("http://localhost:8080/");
// get the first available grid
GridElement firstGrid = $(GridElement.class).first();
// look for the grid's sidebar button and click it
firstGrid.findElement((By.className(sideBarButtonClass))).click();
// the sidebar content is created outside the grid structure so don't look for it using the grid search context
WebElement sidebarContent = findElement(By.className(sideBarContentClass));
// look for the expected column name and click it
sidebarContent.findElement(By.xpath(columnMenuItemXpath)).click();
}
}
And of course what it looks like in action
We've created solution where user has a table with files, each entry has checkbox. He can select as many as he like and then click download button.
We are using such resource, it should allow dynamically download, depending on selected items
private StreamResource createResource(final IndexedContainer container) {
return new StreamResource(new StreamSource() {
#Override
public InputStream getStream() {
for (Object o : container.getItemIds()) {
CheckBox checkbox = (CheckBox) container.getItem(o).getItemProperty(C_CHECK_BOX).getValue();
if (checkbox.getValue()) {
selectedFiles.add(o);
}
}
// do some magic to get stream of selected files
}
}, "download.zip");
}
The problem is that only second and following click on button is giving expected restults.
It's turns out that FileDownoader is getting resource from server and then it is sending current status of component . It is the reason why first click is giving stale result.
Do you have any idea how to overcome this? Is it possible to force: first update component and then download the resource?
Many thanks
Pawel
CheckBox in Vaadin is non-immediate by default, which means that it won't send a request to server when the checkbox is checked (or unchecked) on the browser. Immediate components send queued non-immediate events also to server but it seems that FileDownloader doesn't cause an event that would send non-immediate checkbox values to server.
The only thing you need to do is to set your checkboxes to be immediate when you create those:
checkBox.setImmediate(true);
FileDownloader will not suit your needs. As you can read in the documentation:
Download should be started directly when the user clicks e.g. a Button without going through a server-side click listener to avoid triggering security warnings in some browsers.
That means you cannot dynamically generate download.zip file determined by checkboxes values because that requires a trip to server.
You have at least 2 options. Either create new FileDownloader and generate new Resource download.zip every time user make changes to the checkboxes. Or you can add simple ClickListener to you Button with this line of code:
getUI().getPage().open(resource, "_blank", false);
Related: Vaadin - How to open BrowserWindowOpener from a SINGLE BUTTON
There is also alternative solution to set checkBox.setImmediate(true); . It is possible to send current state of all components, just before click, instead of sending each checkBox change.
This solution is based on this answer: https://stackoverflow.com/a/30643199/1344546
You need to create file downloader button and hide it:
Button hiddenButton = new Button();
hiddenButton.setId(HIDDEN_ID);
hiddenButton.addStyleName("InvisibleButton");
StreamResource zipResource = createResource(container);
FileDownloader fd = new FileDownloader(zipResource);
fd.extend(hiddenButton);
Add css rule to your theme
.InvisibleButton {
display: none;
}
And then create another button, which 1st update state, and then click hidden button.
Button zipDownload = new Button("Download as ZIP file");
zipDownload.addClickListener(new Button.ClickListener() {
#Override
public void buttonClick(Button.ClickEvent event) {
Page.getCurrent().getJavaScript()
.execute(String.format("document.getElementById('%s').click();", HIDDEN_ID));
}
});
I am very new to ZK framework and trying to customize few things and have struck at one point which I am not sure how to achieve that.
I have a predefined section where I need to show 2 drop down and a button and need to persist those drop down values on button click event.
This is how It has been define in Spring file
<bean id="mybean" parent="parentBean" class="WidgetRenderer">
<property name="detailRenderer">
<bean class="DetailsListRenderer" parent="abstractWidgetDetailRenderer"/>
</property>
</bean>
Here mybean is being used to show main section and I am adding my drop down using this bean while button are being added to detailRenderer.
Save button is bind to onClick event, but I am not sure how I can fetch values from my custom drop down?
I am aware about binding those Dropdown with onClick event but they have to be in same class.
Can any one suggest me how I can fetch values of those drop down.I am creating down down with following code
Listbox listbox = new Listbox();
listbox.appendItem("item1", "item1");
listbox.appendItem("item2", "item2");
This is my button code in another class
protected void createUpdateStatusButton(Widget widget,Div container)
{
Button button = new Button(LabelUtils.getLabel(widget, buttonLabelName, new Object[0]));
button.setParent(container);
button.addEventListener("onClick", new EventListener()
{
public void onEvent(Event event)throws Exception
{
MyClass.this.handleSaveStatusEvent(widget, event);
}
});
}
You may want to listen to the onSelect (I prefer to use Events.ON_SELECT rather than writing the strings) which is more specific to when the Listbox selection changes.
Either way, the key is to get the information you want from the Event passed to your EventListener, rather than going back to your Listbox itself. The basic Event usually carries useful information on getTarget and getData but using more specific events (SelectEvent in this case) will give you access to more relevant info.
button.addEventListener(Events.ON_SELECT, new EventListener<SelectEvent<Listitem, MyDataObject>() {
public void onEvent(SelectEvent<Listitem, MyDataObject> event) {
// Now you can access the details of the selection event..
List<Listitem> selectedItems = event.getSelectedItems();
List<MyDataObject> selectedObjects = event.getSelectedObjects();
}
});
You can find out what events are available for different ZK widgets in their Component Reference documentation.
If I understand the question (I don't think I did in my previous response) you want to gather information from the page (eg: Listbox selection state) when the user clicks a button. Your problem being that you are using disparate classes to compose the page and so don't have access to the various ZK Components when the button is clicked.
(Ignoring the multiple class issue for a minute)
From a high level, there are sort of two camps in the ZK community. The newer MVVM approach suggests the view should push the relevant state to the back end as the user interacts with the front end. This way, the back end never needs to ask for the client state, and when the button is clicked, the values/state are on the server ready to be used.
The other camp binds the client to the server such that the back end always has access to the client Components and when the button is clicked, the values/state can easily be retrieved by interacting with the components.
Another approach is more like what I was talking about in my previous answer, to not bind the back end to the client at all but to rely on event data as much as possible. I favor this approach where it is sufficient.
Now, you're free to choose your favored approach and ZK has lots of documentation on how to work in either of these camps. The question then is where is the client state stored on the server (either pushed there by the client in MVVM or bound there in MVC). I don't think that's a question that can be solved here, that's a software engineering challenge. I personally suggest you take on standard ZK patterns so as not to but heads with the framework. If you really want to go your route, you can grab a reference to the Listbox on the fly like so:
public class Foo {
public static final String LISTBOX_ID = "myListbox";
public void renderListbox(Component parent, MyItem items) {
Listbox listbox = new Listbox();
listbox.setId(LISTBOX_ID);
listbox.setParent(parent);
for (MyItem item : items) {
listbox.appendItem(item.getName(), item);
}
}
}
public class Bar {
#Listen(Events.ON_CLICK + " = #saveButton")
public void saveButtonClicked(Event event) {
Component saveButton = event.getTarget();
Listbox listbox = (Listbox) saveButton.getFellow(Foo.LISTBOX_ID);
Set<Listitem> selection = listbox.getSelectedItems();
// do something
}
I am trying to create lists using FieldManagers (Horizontal and Vertical). In this list I have multiple clickable items like buttons, so I am not using ListField or ObjectListField.
I have successfully created the UI, but I am unable to attach a particular item id coming from the server. Also, on clicking a particular button in any list row, I want to get the item id and want to perform an action against that ID.
So, please let me know the idea how I can attach the id to a particular row while I am using FieldManager and then how I can generate event against that ID on clicking a button?
When you create a row, you are probably creating a (subclass of) Manager for each row.
At least, it seems like you are creating a ButtonField on each row.
What you can do is to attach a cookie to each row, or to each button, when you create it. A cookie is just an extra piece of information that's attached to an object. Then, when that row or button is clicked, you ask the row/button for the cookie, and use that to identify the row ID.
Every BlackBerry Field can have a cookie attached to it. Since the cookie is of type Object, you can make it anything you want.
For example, when creating the buttons for your rows:
for (int i = 0; i < numRows; i++) {
BitmapButtonField button = new BitmapButtonField(onImage, offImage, ButtonField.CONSUME_CLICK);
// use the row index as the cookie
button.setCookie(new Integer(i));
button.setChangeListener(this);
Manager row = new MyRowManager();
row.add(button);
add(row);
}
and then when the button is clicked:
void fieldChanged(Field field, int context) {
Object cookie = field.getCookie();
if (cookie instanceof Integer) {
Integer rowId = (Integer)cookie;
System.out.println("Row Id = " + rowId);
}
}
Note: I'm using the BlackBerry Advanced UI BitmapButtonField for this, but the cookie technique will work with any Field, or Manager class. See another example here.