In my Vaadin 7 application I can add a new style name to a component for example via following method:
panel.addStyleName("criteria-menu-active");
But right the next click on this component I need to check if this style was already added to this component and if so - remove it.
So, how to test the component for the presence of a certain style by its name ?
Did you try the following?
myLayout.addStyleName("custom-style");
System.out.println("Style = " + myLayout.getStyleName());
Output:
Style = custom-style
Related
My application (based on Vaadin 8) has a CheckBox and a CheckBoxGroup wrapped in a HorizontalLayout.
CheckBox myCheckBox = new CheckBox("My Checkbox");
CheckBoxGroup<String> multi = new CheckBoxGroup<>("Multiple Selection");
multi.setItems("Many", "Muchos", "Monta");
multi.setCaption(null);
multi.addStyleName(ValoTheme.OPTIONGROUP_HORIZONTAL);
checkBoxLayout.addComponents(myCheckBox, multi);
checkBoxLayout.setComponentAlignment(myCheckBox, BOTTOM_LEFT);
checkBoxLayout.setComponentAlignment(multi, BOTTOM_LEFT);
this.addComponent(checkBoxLayout);
The problem is that the horizontal alignment of the checkbox and the checkbox group is not correct.
Setting the checkbox group caption to null does not help either. I suppose that the checkbox group has some additional spacing which could cause this behavior. How can I make sure that the horizonal alignment is working as used with setComponentAlignment?
Update 1
The solution suggested by #ollitietavainen (using MIDDLE_CENTER) results in the following:
If you have nothing else than the checkboxes inside the HorizontalLayout, using Alignment.MIDDLE_CENTER seems to work better than BOTTOM_LEFT.
I tried removing the CheckBoxGroupState.primaryStyleName "v-select-optiongroup" style name than along with the alignment suggested by https://stackoverflow.com/a/65180983/12854146 I have the following code
HorizontalLayout checkBoxLayout = new HorizontalLayout();
checkBoxLayout.setMargin(true);
CheckBox myCheckBox = new CheckBox("My Checkbox");
CheckBoxGroup<String> multi = new CheckBoxGroup<>("Multiple Selection");
multi.setItems("Many", "Muchos", "Monta");
multi.setCaption(null);
multi.addStyleName(ValoTheme.OPTIONGROUP_HORIZONTAL);
multi.removeStyleNames("v-select-optiongroup");
checkBoxLayout.addComponents(myCheckBox, multi);
checkBoxLayout.setComponentAlignment(myCheckBox, MIDDLE_CENTER);
checkBoxLayout.setComponentAlignment(multi, MIDDLE_CENTER);
you may have a similar output if you do not remove the style name "v-select-optiongroup" from multi and instead you add it to your checkbox with
myCheckBox.addStyleName("select-optiongroup");
Is there any specific way to add shortcut Listener for the Enter Key on a specific TextField element in Vaadin Flow. The documentation is silent about this.
I guess you are not actually looking for a ”shortcut” key but to react to enter presses when the focus is inside the field? If so, see KeyNotifier and e.g. addKeyPressListener.
It is also possible to listen to any DOM event using the element API, e.g.
textField.getElement().addEventListener("keyup", e -> {
System.out.println("Value is now: " +
e.getEventData().getString("element.value"));
}).addEventData("element.value").setFilter("event.keyCode == 13");
In the Vaadin Directory there is a UI Web Component for Vaadin 10. It's called shortcut. The usage is very simple:
Shortcut.add(messageField, Key.ENTER, sendButton::click);
You also can also add modifier keys like that:
Shortcut.add(messageField, Key.ENTER, sendButton::click, Key.SHIFT);
Gerrit used to show the ID as the first column in the UI. I'm on version 2.9 (yeah, I know, oldish, but we can't upgrade at the current time), and it's no longer visible. I know I can click on a change and see the ID or hover over a change and see it in the URL in the browser status line, but I really need to be able to see a bunch of them at a glance.
Is there any way to augment the URL I use to add it?
Go to your preferences (i.e. your-gerrit.com/#/settings/preferences) and check the Show Change Number In Changes Table option.
As I can see in this issue it was introduced in 2.10 but I remember using it earlier, if I'm not mistaken.
EDIT:
The change that itroduces it is here and it's included in 2.10. You will have to update in order to get the Change-Id column in the list.
EDIT 2:
I have created a simple JS script that will show the column with ChangeId. Just paste it to the URL bar when you are viewing the changes list:
javascript:var cols = document.getElementsByClassName("cSUBJECT"); for (var i = 0; i < cols.length; i++) { var id = cols[i].children[0].getAttribute('href').substr(cols[0].children[0].getAttribute('href').lastIndexOf('/') + 1); cols[i].insertAdjacentHTML('beforebegin', '<td>' + id + '</td>'); } document.getElementsByClassName("iconHeader")[0].insertAdjacentHTML('afterend', '<td class="iconHeader"></td>');
You can add it as bookmark if you wish and click it when you want change numbers displayed :-) Might need some tweaking, though.
From the Worklight tutorial - 05_05_Enabling_translation.pdf (Sample app), we can
1. Define the translated message in messages.js
2. Reference the message in HTML as the ID of an HTML element with class="translate" or as a JavaScript object property Messages.<ID>.
3. Implement a languageChanged function to set a new value of Messages.<ID> and update the content to selected language.
In the example - languageChanged(lang) function:
$("#sampleText").html(Messages.sampleText);
$("#headerText").html(Messages.headerText);
$("#actionsLabel").html(Messages.actionsLabel);
is used to update the content to selected language.
From my understanding, it is required to write the above line of codes to update the content to selected language.
Is there a better way to update the content if there are lots of elements?
You can easily iterate over all elements by using jQuery selectors and update text, e.g. something like
$(".translate").each(function(index, element){
element = $(element);
var elementId = element.attr("id");
element.text(Messages[elementId]);
});
I want to create Vaadin drop down with 2 separators in it. I couldn't find a way to implement that, can anyone help me to solve this issue?
This is the way I want to display my drop down:
Option 1
Option 2
------------;
select 1
select 2
-----------;
group 1
How can I do that?
There is no built-in way to add separators to selects. The only way I can think of is to add an item with the desired separator as its caption. For example if you use the default caption (item id) select.addItem("-----"); should be enough. This should work for both ComboBoxes and NativeSelects.
You can implement a new Vaadin component including the client behaviour, but this is not an easy solution. This page https://vaadin.com/book/-/page/gwt.html of "Book of Vaadin" and Vaadin forum can help for that.
Also, creating your own component using existing components is another solution. You can implement a special combobox which takes values of String or Component arrays. The way of doing this is using Vaadin panels, layouts and windows with size and locations and click listeners.
I haven't tried it myself but give a go at NativeSelection dropdown.
You can always do
{select.addItem("-----");}
Once I also wanted a do something like that but there was no proper way to do that with Vaadin. I actually created a Vaadin widget extending the Combo Box. In the client side widget of Vaadin they filter out the HTML content before adding items to the list. So Using the client side code I override that functionality and use HTML tag "" to add the line.
select.addItem("-----");
looks like the best way, I dont know about some other
Btw if you are reading items from some list you can combine that with some item counter and (itemsCount%n)==0 operator to set separator after 'n' items inserted :)
You can add the item to the selected (as mentioned before) and then disable the separators with some javascript:
add the item to the select.
cb.addItem("separator");
cb.setItemCaption("separator", "-------------");
execute the javascript
final String javascript = ""
"var selects = document.getElementsByTagName('select');"
"for(var j = 0;j < selects.length;j++){"
"var op = selects[j].getElementsByTagName('option');"
"for (var i = 0; i < op.length; i++) {"
" if(op[i].text == '" + separatorText + "') op[i].disabled = true;"
"}}";
Page.getCurrent().getJavaScript().execute(javascript);
Is there a reason that you use the ComboBox instead of the Select, because with the select you can do that.
Select select = new Select();
select.setItems("Option 1", "Option 2", "select 1", "select 2", "group 1");
select.addComponentAtIndex(2, new Hr());
select.addComponentAtIndex(5, new Hr());
Or you can use a MenuBar but it looks very diferent that the ComboBox.
menuBar = new MenuBar();
MenuItem menuItem = menuBar.addItem("Select");
menuItem.getSubMenu().addItem("Option 1");
menuItem.getSubMenu().addItem("Option 2");
menuItem.getSubMenu().addItem(new Hr());
menuItem.getSubMenu().addItem("select 1");
menuItem.getSubMenu().addItem("select 1");
menuItem.getSubMenu().addItem(new Hr());
menuItem.getSubMenu().addItem("group 1");