I am developing an Wicket application. But my question is not really Wicket related. In that app I have a horizontal menu. This menu is created by few links. On clicking the link you will be navigated to some page. Now based on the page you are currently viewing the css class attribute of the link of the menu will be changed to "selected". This is the description of the problem.
Now I am solving this problem by using a integer value. The value is saved in the session and it is updated when any one link has been clicked. Based on that saved value, which link will be "selected", will be determined at runtime.
I am implementing this in following way:
//On link click I set a number in session
public void onClick() {
session.setValue(1);// or 2 or 3
}
When the menu is created I switch between the value and modify the css class, as follows:
switch(session.getValue){
case 1: add css to home;
case 2: add css to profile;
// and so on.
}
I was wondering that is this the only right way to do it? Or there some other better techniques or design patterns exist which can help me to achieve this in better way?
Store the menu items in an array (or an ArrayList):
items[0] = home
items[1] = profile
And use the index of the array as menu identifier. When you receive the selected menu itentifier, retrieve the corresponding item with
items[selectedItem]
You could also use a Map if the identifiers are not numbers, or don't go from 0 to N.
For a start, use an enum or static constants instead of magic numbers (1, 2, 3).
The Visitor Pattern is commonly used to avoid this sort of switching. You might not want to implement the full pattern in your case, but it's worth knowning. JB Nizet's answer may be more practical in your situation.
See https://en.wikipedia.org/wiki/Visitor_pattern
These SO questions might give you some ideas, too
Java visitor pattern instead of instanceof switch
Java Enums - Switch statements vs Visitor Pattern on Enums - Performance benefits?
I have implemented it using EnumMap and an Enum type as its key. I have defined an Enum:
public enum NavigationStatus {
HOME,
PROFILE;
}
In session I set the value of the current navigation as:
private NavigationStatus activeUserNavigationStatus;
public NavigationStatus getActiveUserNavigationStatus() {
return activeUserNavigationStatus;
}
public void setActiveUserNavigationStatus(NavigationStatus activeUserNavigationStatus) {
this.activeUserNavigationStatus = activeUserNavigationStatus;
}
Primarily I set it to: setActiveUserNavigationStatus(NavigationStatus.HOME);
Now where the menu is building I created an EnumMap:
EnumMap<NavigationStatus, Component[]> menuMap = new EnumMap<NavigationStatus, Component[]>(NavigationStatus.class);
And added elements to it, as:
menuMap.put(NavigationStatus.HOME, new Component[] { homeContainer, home });
And also on click methods of the links I set the status value:
public void onClick() {
session.setActiveUserNavigationStatus(NavigationStatus.PROFILE);
}
Last of all I checked the current value from the session and set the css class accordingly:
Component[] menuComponents = menuMap.get(getSession().getActiveUserNavigationStatus());
menuComponents[0].add(new AttributeAppender("class", new Model<Serializable>(" active")));
menuComponents[1].add(new AttributeAppender("class", new Model<Serializable>(" active")));
This is without switch statement and combines the idea of JB Nizet's ArrayList index and Oli Charlesworth's Enum.
Thank you.
Related
I'm struggling to figure out how to find an element by its name, but not by multiplying elements locators but to create one for its kind and passing a parameter. E.g there's a page with 10 buttons 'Add to Cart' for different items ('Laptop A', 'Laptop b','Laptop c', etc), so instead of creating 3 different elements I want to have one, something like >>
webElement elementByName(String itemName) = driver.findElement(By.xpath("//div[#button='add to cart' and #title = '" + itemName+ "']"))
Does anything like this exist in selenium? I'm new to selenium and could not find anything similar. thanks
Yes, it is possible. Before I share the 'answer', I would like to point out the following:
Some things to note
The xpath that you need to provide is nothing special to Selenium. It is a W3C standard.
https://www.w3.org/TR/2017/REC-xpath-datamodel-31-20170321/
If you're using Chrome, before even attempting to use it in Selenium, you can first test out your xpath by going to Developer Tools (F12) and pressing 'CTRL+F', and typing in the xpath in the search box that appears.
If your xpath matches an element, it will be highlighted in yellow. If that xpath works, it should also work if you pass that same xpath into Selenium, unless there are other reasons such as framework being used, etc. For instance, Shadow DOM xpaths are not especially friendly to use.
Searching by Visible Text
Going by your example of Laptop A; Laptop B; Laptop C, if you want to find the element based on visible text, then you can use the text() function (that xpath provides).
driver.findElement(By.xpath("//div[text()='Laptop A']");
driver.findElement(By.xpath("//div[text()='Laptop B']");
With the above in mind, you can thus put the strings A and B into an array and loop through them if you want:
for(int i=0; i<arr.size; i++){
driver.findElement(By.xpath("//div[text()='Laptop " + arr[i] + "']");
}
Additionally, you can also use the contains function that sort of acts like a regex:
driver.findElement(By.xpath("//div[contains(.,'Laptop')]");
This will match anything that has a visible text of Laptop, i.e. Laptop A, Laptop b, This is a Laptop, etc.
EDIT: based on comments below
public WebElement selectButtonByName(String name){
return driver.findElement(By.xpath("//div[#button='add to cart' and #title = '" + name+ "']"));
}
And then by using it:
WebElement tvElement = selectButtonByName("TV").click();
If i understood correctly, you need to wrap your the findElement method and create a custom method for it, best practice is always wrap and have custom methods for all driver related actions, which will help you on the long run and will be scalable. here is an oversimplified example:
first step is to wrap your driver:
public class MyDriver {
//initialise your webdriver, the way you see fit and lets assume you name it
myDriver;
// create your custom find element method
public WebElement findElement(final By by){
return myDriver.findElement(by);
}
// create a method which uses the findElemet method and passes the webelement to next
// method
public WebElement click(final By bys){
return clickElement(findElement(bys);
}
// this is the click method, which you can use directly for webelements
public WebElement clickElement(final WebElement element){
Actions action = new Action(myDriver);
action.moveToElement(element).click(element).build().perform();
return element;
}
}
// Now that we have our basic wrapper, lets use it for your needs:
public class YourTestCase {
MyDriver driver = new MyDriver(); //this is not best way to do it, just an example
// now you can use whatever parameter you like and add it with custom xpath logic
private WebElement myElementFinder(final String parameter){
return driver.findElement(By.xpath("//div[#button='add to cart'][#title = '" +
parameter + "']"));
}
// here you click the button, by passing the passing only
public void clickButton(final String buttonText){
driver.click(myElementFinder(buttonText))
}
}
By taking this logic you can build a solid framework, hope it helps, comment if need more explanation, cheers.
I made a pretty simple selenium test, where I want to open web page, clear field value, start entering text for this field, select first value from the hint drop down.
Web site is aviasales.com (I just found some site with a lot of controls, this is not an advertisement)
I did
DriverFactory.getDriver().findElement(By.id("flights-origin-prepop-whitelabel_en")).clear();
and it was working perfectly, I also checked via console that this is the only one object on a page like:
document.getElementById('flights-origin-prepop-whitelabel_en')
So, in next line I'm sending value:
DriverFactory.getDriver().findElement(By.id("flights-origin-prepop-whitelabel_en")).sendKeys("LAX");
but it send LAX value for both "flights-origin-prepop-whitelabel_en" and "flights-destination-prepop-whitelabel_en" for some reason, then i tried
DriverFactory.getDriver().findElement(By.id("//input[#id='flights-destination-prepop-whitelabel_en'][#placeholder='Destination']")).sendKeys(destinationAirport);
but I got the same result:
What could be a reason and how to fix this?
Thank you!
Yep... there's some weird behavior going on there. The site is copying whatever is entered into the first field into the second for reason I don't understand. I gave up trying to understand it and found a way around it.
Whenever I write code that I know I'm going to reuse, I put them into functions. Here's the script code
driver.navigate().to(url);
setOrigin("LAX");
setDestination("DFW");
...and since you are likely to use these repeatedly, the support functions.
public static void setOrigin(String origin)
{
WebElement e = driver.findElement(By.id("flights-origin-prepop-whitelabel_en"));
e.click();
e.clear();
e.sendKeys(origin);
e.sendKeys(Keys.TAB);
}
public static void setDestination(String dest)
{
WebElement e = driver.findElement(By.id("flights-destination-prepop-whitelabel_en"));
e.click();
e.clear();
e.sendKeys(dest);
e.sendKeys(Keys.TAB);
}
You can see the functions but basically I click in the field, clear the text (because usually there's something already in there), send the text, and then press to move out of the field and choose the default (first choice).
The reason of your issue is the ORIGIN and DESTINATION inputbox binded keyboard event which used to supply an autocomplete list according to your typed characters.
The binded keyborad event breaks the normal sendKeys() functionality. I met similar case in my projects and questions on StackOverFlow.
I tried input 'GSO' into DESTINATION by sendKeys('GSO'), but I get 'GGSSOO' on page after the sendKeys() complete.
To resolve your problem, we can't use sendKeys(), we have to use executeScript() to set the value by javascript in backgroud. But executeScript() won't fire keyborad event so you won't get the autocomplete list. So we need find out a way to fire keyborady event after set value by javascript.
Below code snippet worked on chrome when i tested on aviasales.com:
private void inputAirport(WebElement targetEle, String city) {
String script = "arguments[0].value = arguments[1]";
// set value by javascript in background
((JavascriptExecutor) driver).executeScript(script, targetEle, city + "6");
// wait 1s
Thread.sleep(1000);
// press backspace key to delete the last character to fire keyborad event
targetEle.sendKeys(Keys.BACK_SPACE);
// wait 2s to wait autocomplete list pop-up
Thread.sleep(2000);
// choose the first item of autocomplete list
driver.findElement(By.cssSelector("ul.mewtwo-autocomplete-list > li:nth-child(1)")).click();
}
public void inputOrigin(String city) {
WebElement target = driver.findElement(By.id("flights-origin-prepop-whitelabel_en"));
return inputAirport(target, city);
}
public void inputDestination(String city) {
WebElement target = driver.findElement(By.id("flights-origin-prepopflights-destination-prepop-whitelabel_en"));
return inputAirport(target, city);
}
I have in the text box that by choosing the combo box Binds respectively the text field with the specified data. The point is that after the first binding process, you can not remove the effect. I choose binding logins, this Binds me a text box with logins. Then I want Bind the e-mail, then I develop two lists, login and e-mail.
#FXML
public void setToSearch() {
if(comboSettingsSearch.getSelectionModel().getSelectedIndex() == 1)
TextFields.bindAutoCompletion(textSearchPerson, Database.loadLogins());
if(comboSettingsSearch.getSelectionModel().getSelectedIndex() == 5)
TextFields.bindAutoCompletion(textSearchPerson, Database.loadEmails());
}
enter image description here
Underneath logins, and on top of e-mail. Anyone know how to remove this effect?
If you do it like this,
#FXML
public void setToSearch() {
if(comboSettingsSearch.getSelectionModel().getSelectedIndex() == 1)
AutoCompletionBinding<String> acbLogin = TextFields.bindAutoCompletion(textSearchPerson, Database.loadLogins());
if(comboSettingsSearch.getSelectionModel().getSelectedIndex() == 5)
AutoCompletionBinding<String> acbEmail = TextFields.bindAutoCompletion(textSearchPerson, Database.loadEmails());
}
you can dispose the binding with
acbLogin.dispose();
acbEmail.dispose();
as far as I can tell from the HelloAutoComplete-example and the javadocs.
This is a late response to this post, however, I see that it apparently didn't work because it is not checked. It also didn't work for me but two weeks later I discovered why.
The proposed declaration and initialization above does not work if you include the type as part of the declaration. You need to remove the type from the declaration and then the .dispose() method will work.
This doesn't work:
AutoCompletionBinding<String> acbLogin = TextFields.bindAutoCompletion(textSearchPerson, Database.loadLogins());
This does:
AutoCompletionBinding acbLogin = TextFields.bindAutoCompletion(textSearchPerson, Database.loadLogins());
AutoCompletionBinding acb = TextFields.bindAutoCompletion(txtfield,arraylistobj);
acb=null;
1: Example
This picture represents a group of clusters(the ones that have the text in the middle) and a cluster Item, which is only one item of a specific type.
What I'm trying to achieve is that on a cluster item, I want to add some text, for example "1", which represents that is only a cluster item, therefore there is only one item in there.
I managed to get the text working on the group of clusters but not on the cluster item.
The code that does the trick in my case it's this one:
String place = item.getPlaceName();
if (place.length() > 12)
place = place.substring(0, 10) + "..";
placeAddressAndLocation.setText(place);
Now I am not aware where should I place the exact code for the cluster item.
In the example found on google dev(which is the one I'm also following), there are a couple of methods for these
protected void onBeforeClusterItemRendered
protected void onClusterItemRendered
Tried adding the code on both of the methods, but it doesn't do anything. Any suggestions? Thanks!
If you want to use onBeforeClusterItemRendered, you can try with this answer.
So in the onBeforeClusterItemRendered method, you can set the attributes of markerOptions.
You might want to try to set the title, snippet or icon of the markerOptions, you can read the documentation of the markerOptions.
I am brand new to GWT and am trying to achieve the following:
Here's the code that I've cooked up:
public class MyWebApp implements EntryPoint {
// The main container for everything the user sees (the "view")
private LayoutPanel mainPanel;
// Simple HTML for the header ("MyWebApp") and subsequent <hr/>
private SafeHtml header;
// The three links "Dashboard", "Monitors" and "Help Desk"
private HorizontalPanel navMenu;
// The empty content that gets populated when user clicks one of
// the 3 links.
private Panel menuContent;
#Override
public void onModuleLoad() {
// The initial fragment contains the header, nav menu and empty "content" div.
// Each menu/screen then fills out content div.
initMainPanel();
RootPanel.get().add(mainPanel);
}
private void initMainPanel() {
SafeHtmlBuilder headerBuilder = new SafeHtmlBuilder();
navMenu = new HorizontalPanel();
// Leaving null until user clicks on one of the 3 menus.
// Then the menu will decide what panel gets injected for
// this panel.
menuContent = null;
// Create the simple HTML for the header.
headerBuilder.append("<h1>MyWebApp</h1><hr/>");
// Create the navMenu items.
Hyperlink dashboardLink, monitorsLink, helpDeskLink;
// Homepage is http://www.mywebapp.com
// I want the dashboardLink to inject menuContent and "redirect" user to
// http://www.mywebapp.com/dashboard
dashboardLink = new Hyperlink("???", "???");
// http://www.mywebapp.com/monitors
monitorsLink = new Hyperlink("???", "???");
// http://www.mywebapp.com/help-desk
helpDeskLink = new Hyperlink("???", "???");
navMenu.add(dashboardLink);
navMenu.add(monitorsLink);
navMenu.add(helpDeskLink);
// Add all widgets to the mainPanel.
mainPanel.add(new HTML(headerBuilder.toSafeHtml().toString()));
mainPanel.add(navMenu);
mainPanel.add(menuContent);
// Position and size the widgets (omitted for brevity).
// mainPanel.setWidgetHorizontalPosition(...);
}
private HTML getDashboardMenuContent() {
return new HTML("This is the dashboard.");
}
private HTML getMonitorsMenuContent() {
return new HTML("These are the monitors.");
}
private HTML getHelpDeskMenuContent() {
return new HTML("This is the help desk.");
}
}
Most importantly:
How do I "wire up" the Hyperlinks so that when the user clicks them, I can call the appropriate getXXXMenuContent() method, and then add that to menuContent?
But also:
I feel like I'm doing something wrong here: mainPanel.add(new HTML(headerBuilder.toSafeHtml().toString())); - if so what is it?!? How should I be adding a simple <h1> and <hr/> in a way that's secure (hence the use of the Safe* objects), efficient, and conforming to recommended practices?
Should I be implementing UiBinder here? If so, would I make UiBinders for each menu's content or for the entire mainPanel, or both?
Thanks in advance!
Hyperlink widgets trigger navigation. You don't want to handle clicks on them, you want to handle navigation (that could be triggered by clicking a Hyperlink or using the browser's back/forward buttons, a bookmark or link from elsewhere –including Ctrl+clicking a Hyperlink to open it in a new window/tab–, etc.)
To react to those navigation events, use History.addValueChangeHandler; and to handle the initial navigation on application start, call History.fireCurrentHistoryState() (after you add your handler of course).
More details in: https://developers.google.com/web-toolkit/doc/latest/DevGuideCodingBasicsHistory
Would be better to split other questions to... other questions, but here are the answers anyway:
I feel like I'm doing something wrong here: mainPanel.add(new HTML(headerBuilder.toSafeHtml().toString())); - if so what is it?!? How should I be adding a simple <h1> and <hr/> in a way that's secure (hence the use of the Safe* objects), efficient, and conforming to recommended practices?
The HTML widget has a constructor taking a SafeHtml so you don't need to call toString().
If you're only using a constant, you don't need a SafeHtmlBuilder; use SafeHtmlUtils instead. But constants are no more or less secure with or without SafeHtml, SafeHtml just makes it easier to find all occurrences of HTML in your code, to help in doing a security review of your app (BTW, we're doing HTML, so <hr>, not <hr/>; if you really want it to look like XML/XHTML, then use <hr /> but you're only cheating yourself here)
Should I be implementing UiBinder here? If so, would I make UiBinders for each menu's content or for the entire mainPanel, or both?
If you don't feel the need for UiBinder, you don't have to use it. But in this case it won't change anything: you're not handling widget events, but history events.
Something like
dashboardLink.addClickHandler(
new ClickHandler()
{
public void onClick( ClickEvent event )
{
mainPanel.setWidget( getDashboardMenuContent() );
}
} );
You should note that Hyperlink.addClickHandler(...) is deprecated and it is recommended to use Anchor.addClickHandler(...) instead.
As for the other questions: It is a lot more elegant and easier to build UI's with UIBinder, so definitely look into that, but do try to make "it" work first to avoid the added complexity of the .ui.xml setup :-)
Cheers,
I have one simple piece of advice to give you. Use what the framework has to offer.
The HTML widget should be your last escape. There are so many widgets that there is no need for you to write html almost anywhere in your code.
So instead of headerBuilder, you can user the following piece of code
Label header = new Label("MyWebApp");
header.setStyleName("headerStyle",true);
You can set the style properties in an external Css file and add the reference inside the base html file or the gwt.xml file. So that answers your question about mainPanel.add(new HTML(headerBuilder.toSafeHtml().toString()));
In respect to the Hyperlink. If you choose to use hyperlinks, remember that the most effective usage is with the MVP pattern better known as Places and Activities (Lots of information on the web)
If you want something simpler instead the MenuBar and MenuItem classes should do the trick.
Look here for an example on how to use the MenuBar to control your application. There are many other ways but why not use the tools provided?
Also the UIBinder Vs the Designer/Classes methods is extensively discussed on stackoverflow resulting to a matter of choice and programming familiarity/preference.