How test Vaadin Accordion tabs? - vaadin

I have created a Vaadin (7.4.3) accordion with a number of captions/tabs.
I need to be able to select a tab and check the contents within that tab.
However in the code below, even though the tab is found, the click() function
does not expand the tab and the contents of the tab remain unobtainable.
How can I check the contents of the tabs in an accordion?
Thank you...
List<WebElement> tabList = findElements(By.className("v-accordion-item"));
WebElement selectedTab = null;
for (WebElement tab : tabList) {
List<WebElement> captionElements = tab.findElements(By
.className("v-captiontext");
if (captionElements.size() > 0) {
if (captionElements.get(0).getText().equals("Caption_of_tab_to_be_checked")) {
// this is run
selectedTab = tab;
break;
}
}
}
selectedTab.click(); // the accordion does not open this tab and contents are still hidden???

TabSheetElement
tabSheetElement=$(TabSheetElement.class).id(TAB_AUTOMATIC_EMAIL);
tabSheetElement.openTab(2);
the Same you can check for multiple Tabs by adding click(); at last for example
tabSheetElement.openTab(2).click();

Related

Using DockPanelSuite, how do you get context menu for tab strip separate from document tab?

When using DockPanelSuite, is it possible to have a context menu for the tab strip that is different from the one for a document tab? For example, right click an empty space on the tab strip and get one context menu then right click a document tab and get a different context menu specific to the document.
I tried setting the ContextMenuStrip property of the DockPanel. I got a context menu for any empty space on the DockPanel control as well as the document tab strip when visible and all open document tabs. That's a good start but I really only wanted the context menu for the tab strip. Not the main control or any tabs.
I also followed along with the sample project to make a context menu for the document by setting the TabPageContextMenuStrip property of the DockContent form. I discovered that you get a document specific context menu by right clicking the document tab, but it also overrides the DockPanel's ContextMenuStrip. While that is useful, it's still not the desired result.
Edit:
Updating this post in case anyone else is interested in achieving the objective of the question.
After much source code analysis and testing, I concluded that the objective could not be achieved using the available public Properties, Methods, and Events. However, we can achieve the goal by using a bit of reflection.
Discoveries:
DockContent.ContextMenuStrip
This property does nothing for the DockPanel. It will provide a context menu in the client area of the document. However, for some reason, the RichTextBox control set to Fill in the provided sample blocks the context menu from popping up.
DockContent.TabPageContextMenuStrip
This property causes the associated ContextMenuStrip to display when the document is active. However, it displays when you right click anywhere on the tab strip, not just when you right click the document tab.
Solution:
First, add a public property to the DockContent form which will contain a reference to the context menu.
public ContextMenuStrip TabContextMenu { get { return contextMenuTabPage; } }
Next, add an event handler in the MDI main form for the DockPanel.ActiveDocmentChanged event. This will be used to add an event handler to the tab strip after it’s been created.
this.dockPanel.ActiveDocumentChanged += new System.EventHandler(this.dockPanel_ActiveDocumentChanged);
private void dockPanel_ActiveDocumentChanged(object sender, EventArgs e)
{
// Hook into the document pane tabstrip mouse up event
// if we haven't already.
if (dockPanel.ActiveDocumentPane != null
&& dockPanel.ActiveDocumentPane.TabStripControl != null
&& dockPanel.ActiveDocumentPane.TabStripControl.Tag == null)
{
dockPanel.ActiveDocumentPane.TabStripControl.Tag = "MouseUp Hooked";
dockPanel.ActiveDocumentPane.TabStripControl.MouseUp +=
TabStripControl_MouseUp;
}
}
Finally, add the event handler for the TabStripControl.
private void TabStripControl_MouseUp(object sender, MouseEventArgs e)
{
// Capture right click action
if (e.Button == MouseButtons.Right)
{
ContextMenuStrip menu = contextMenuDocumentPane;
Point screenPos = Cursor.Position;
Point tabstripsPos = dockPanel.ActiveDocumentPane
.TabStripControl.PointToClient(screenPos);
// Determine if cursor is over a tab
var tabstrip = dockPanel.ActiveDocumentPane.TabStripControl;
var tabs = tabstrip.GetType()
.GetProperty("Tabs", BindingFlags.Instance |
BindingFlags.NonPublic).GetValue(tabstrip);
foreach (var tab in (IEnumerable)tabs)
{
var bounds = tab.GetType()
.GetProperty("Rectangle")
.GetValue(tab);
if (((Rectangle)bounds).Contains(tabstripsPos))
{
// Display context menu for this document tab
var document = tab.GetType()
.GetProperty("Content")
.GetValue(tab);
menu = ((ContentWindow)document).TabContextMenu;
}
}
// Show appropriate context menu
menu.Show(screenPos);
}
}

How to add click listener or context menu to Vaadin's Grid column Header

This question is similar to this. But I'm interested in Vaadin 14 as I am migrating old Table components to Grids. There no longer a HeaderClickListener. Therefore, how can you implement click listener on Grid header.
I don't mind adding a context menu with a column selection for copying, but as I understand it, there is no API to get data in a column?
In Vaadin 14 there is no HeaderClickListener. Instead you need to do something like this:
Column<MyBean> column = grid.addColumn(..)
HeaderRow headerRow = this.getHeaderRows().get(0); // Get first header row
Div component = new Div(); // Just example, anything that has click listener can be used
component.setText("Header");
headerRow.getCell(column).setComponent(component);
component.addClickListener(..);
Alternatively you can use GridContextMenu
grid.addColumn(..).setId("column");
GridContextMenu<MyBean> menu = grid.addContextMenu();
item.addMenuItemClickListener(event -> {
Notification.show(selectedColumn);
});
menu.addGridContextMenuOpenedListener(event -> {
// item is not present when clicking header
if (!event.getItem().isPresent()) {
event.getColumnId().ifPresent(id -> {
selectedColumn = id;
});
} else {
menu.close(); // Do not let menu open on body
}
});

Change toolbars according to the condition

I am working with xamarin android. I have a layout where initially a toolbar with edit will be visible, when user selects edit the current tool bar should be replaced with another toolbar. I have written code as following.
public override bool OnCreateOptionsMenu(IMenu menu)
{
_localMenu = menu;
var toolbar = _isMultiSelect ? Resource.Menu.MultipleFormsDeleteToolBarMenu : Resource.Menu.FormToolbarMenu;
MenuInflater.Inflate(toolbar, menu);
return base.OnCreateOptionsMenu(menu);
}
And when Edit option in first toolbar is selected, Iam calling OnCreateOptionsMenu
else if (item.ItemId == Resource.Id.edit)
{
_isMultiSelect = true;
OnCreateOptionsMenu(_localMenu);
}
Here the problem is,instead of showing second toolbar... the Edit option in first toolbar is replaced by three dots and while tapping on those three dots Edit and Delete options are dislaying.
How can I change those toolbars acconding to the requirements?

How to get the tab Index of the right clicked inactive tab?

Who to get the tab Index of the right clicked tab that fires the Tab context-menu. Tab is NOT the active tab (not the selectedIndex)?
As an example. "Close Tabs to the Right" in Tab context menu works regardless of which tab (active/not-active) tab is right-clicked. How does it get the correct tab index?
Listen for for the popupshown event of the tabContextMenu element.
Since this a restartless addon I assume that you already have a reference to the ChromeWindow.
var tabContextMenu = chromewin.document.getElementById("tabContextMenu");
tabContextMenu.addEventListener("popupshown", function(){
var rightclickedtab = chromewin.TabContextMenu.contextTab;
// now proceed as you wish
}, false);
You can also add your own menu item and listen for its command event.
In any case, remember to cleanup when your extension gets unloaded.
What about on click take the event.target, which is the tab element, then loop through the parentNode of that tab element which has childNoedes of the tabs. then find your event.target in there?
So lick add on click listeners and do this:
var foundAtIndex = -1;
var tab = event.target;
var tabContainer = tab.parentNode;
var tabs = tabContainer.childNodes;
for (var i=0; i<tabs.length; i++) {
if (tabs[i] == tab) {
foundAtIndex = i;
break;
}
}
if (foundAtIndex !== -1) {
console.error('very weird, tab not found');
} else {
console.info('tab found at index:', foundAtIndex);
}

Accessing the Selected property on TitleBar tabs

I am using the Application Layout control and have tabs in the TitleBar. I want to change the style of the tab if it is selected. I am currently doing it by comparing the value of the tab to a sessionScope variable I am setting when the tab is clicked.
I saw something (though I can't find it now) about using the Selected property of the Basic Node I am using for the tab. How would I access that in SSJS so that I can do something like this?
if(thisnode.selected) {
return "lotusTabs liActive";
} else {
return "lotusTabs li";
}
Thanks.
You can also access the tabs programmatically:
var layout = getComponent("layoutId");
var selectedTab = null;
var tabs = layout.getConfiguration().getTitleBarTabs();
for (var tab in tabs) {
if (tab.getSelected()) {
selectedTab = tab;
}
}
The following CSS rule will target the selected title tab:
div.lotusTitleBar ul.lotusTabs li.lotusSelected {
// your code here
}

Resources