This is not exactly an question, better to say - it's an answer with a little question: is there a better sollution? :)
Suppose you have a grid which contains some rows.
In each row you want to put a radio button, and only one radio button can be selected in the grid (each row has one radio button).
This radio button should be used not only to display selected row, but also to select a row by clicking radio button.
Selection is based on a table's field, which contains 1 for selected and 0 or null for all other rows.
Here is a short guide of achieving it:
(the obvious part)
add a column with a radiobutton:
<af:column headerText="#{bindings.DocsignersliteView2.hints.Isactual.label}"
id="c14" align="center">
<af:selectBooleanRadio label="Label 1"
id="sbr1"
value="#{row.Isactual}"
group="Isactual"
autoSubmit="true">
</af:selectBooleanRadio>
</af:column>
where Isactual - is the field in the table, which containts 1 for selected item and null for all others
Method onActual should be implemened to change values of the field Isactual in the table.
it appears to not work. Now it shows an actual row, but doesn't work when I select another radio button.
Naturally I tried to create ValueChangeListener, but never succeded - it didn't work correctly.
Ok, let's try to invert "onClickListener", as selectBooleanRadio doesn't posess such an attribute:
let's add clientlistener, javascript and server listener:
<af:resource type="javascript">
function onClickRadio(actionEvent) {
var comp = actionEvent.getSource();
AdfCustomEvent.queue(comp, "IsactualClickEvent",
{},
true);
actionEvent.cancel();
}
</af:resource>
<af:selectBooleanRadio label="Label 1"
id="sbr1"
value="#{row.Isactual}"
group="Isactual"
autoSubmit="true">
<af:clientListener type="click" method="onClickRadio"/>
<af:serverListener type="IsactualClickEvent"
method="#{viewScope.signerBean.onActual}"/>
</af:selectBooleanRadio>
it almost works, but there is one more 'tiny' detail: a field with 1 and 0 values (or 1 and null) - is not exactly the same as boolean, so this selectBooleanRadio needs a converter.
So we should create a class implementing converter:
public class BooleanDecimalConverter implements Converter {
public BooleanDecimalConverter() {
super();
}
#Override
public Object getAsObject(FacesContext facesContext, UIComponent uIComponent, String string) {
if (string == null || string.isEmpty())
return null;
return "true".equals(string) ? BigDecimal.valueOf(1) : BigDecimal.valueOf(0);
}
#Override
public String getAsString(FacesContext facesContext, UIComponent uIComponent, Object object) {
if (object == null)
return null;
String result;
if (object instanceof Boolean){
result = object.toString();
}
else if (object instanceof BigDecimal) {
BigDecimal num = ((BigDecimal)object);
result = num.compareTo(BigDecimal.valueOf(1)) == 0? "true" : "false";
}
else {
result = "false";
}
return result;
}
}
then register the custom converter in the application's JSF configuration file (faces-config.xml):
<converter>
<converter-id>custom.BooleanDecimalConverter</converter-id>
<converter-class>common.utils.converters.BooleanDecimalConverter</converter-class>
</converter>
and at last we can add a converter attribute to af:selectBooleanRadio:
<af:selectBooleanRadio label="Label 1"
id="sbr1"
value="#{row.Isactual}"
group="Isactual"
converter="custom.BooleanDecimalConverter"
autoSubmit="true">
<af:clientListener type="click" method="onClickRadio"/>
<af:serverListener type="IsactualClickEvent"
method="#{viewScope.signerBean.onActual}"/>
</af:selectBooleanRadio>
What we have now:
A grid with rows, radio buttons show an "active" row and allow user to change "active" row immediately as he clicks the radio button.
Related
I filled a list with a CheckBox. This Checkbox is screnning on the page. Then i will find out, if the Checkbox is checked or not. But this is Always returning false, even when the Checkbox is pressed. But why?
ArrayList<TutorialAnswerCheckbox> cbList = new ArrayList<>();
cbList.add(new TutorialAnswerCheckbox(false, "Zuweisungsoperatoren"));
Here the Checkbox is created.
public TutorialAnswerCheckbox(boolean isCorrectAnswer, String text)
{
this.isCorrectAnswer = isCorrectAnswer;
setText(text);
getElement().getStyle().setColor("black");
getElement().getStyle().setProperty("float", "left");
}
Here im adding the box to my HTMLPanel to a answer div.
html.add(cbList.get(0), "answer9");
This works. Then when the user hits a button i will check if the checkbox is pressed or not.
#UiHandler("abgabe")
void done(ClickEvent e)
{
Window.alert(cbList.get(0).isAnswerCorrectly.toString());
}
public boolean isAnswerCorrectly()
{
return this.getValue();
}
But the window alert is Always false
This Returns also false even when it is checked.
Window.alert(cbList.get(0).isAnswerCorrectly.toString());
you have to set the fireEvents checkbox.setValue(value, fireEvents);
I have simple code:
ComboBox<String> combo=new ComboBox<>("Combo");
Button button = new Button("Button");
button.addClickListener(new ComponentEventListener<ClickEvent<Button>>() {
#Override
public void onComponentEvent(ClickEvent<Button> event) {
combo.setItems("11","22");
combo.setValue("22");
}
});
When I first time click button i have items "11" and "22" present in combobox and value "22" is selected.
Second click makes value cleared but items "11" and "22" are still present.
In case I select "11" or leave "22" selected in combobox and click button - value clears.
It seems that setValue() only works when combobox is empty but following code do not helps as well:
combo.setValue(null);
combo.clear();
combo.setItems("11","22");
combo.setValue(null);
combo.clear();
combo.setValue("22");
Following code sets value of ComboBox correctly, no matter if I select some value or clear it before click:
ComboBox<String> combo=new ComboBox<>("Combo");
combo.setItems("11","22");
Button button = new Button("Button");
button.addClickListener(new ComponentEventListener<ClickEvent<Button>>() {
#Override
public void onComponentEvent(ClickEvent<Button> event) {
combo.setValue("22");
}
});
But I have to set items of Combobox dynamically and the last solution do not suitable for me.
Vaadin version is 10.0.9.
Has anyone some suggestions or advices ?
PS.
Thanks !
I've tried following code:
combo.setItems(Collections.emptyList());
combo.setItems("11","22");
combo.setValue("22");
But it do not work as well.
This code works only if value in combo is empty, but if I input something in combo the code just clears value by .setItems() and further .setValue() do not work.
If value of combo is empty the code works well.
Your code works perfectly fine in a minimum project based on https://vaadin.com/start/latest/project-base (which uses Vaadin 12.0.7)
#Route("")
#PWA(name = "Project Base for Vaadin Flow", shortName = "Project Base")
public class MainView extends VerticalLayout {
public MainView() {
ComboBox<String> combo=new ComboBox<>("Combo");
Button button = new Button("Button");
button.addClickListener(new ComponentEventListener<ClickEvent<Button>>() {
#Override
public void onComponentEvent(ClickEvent<Button> event) {
combo.setItems("11","22");
combo.setValue("22");
}
});
add(combo,button);
}
}
Whatever value you set in the ComboBox via UI .. when the button is clicked, the selected value will switch to 22.
If that's an option for you, you could update to a newer Vaadin version and try it with that.
To better show what I meant in my comment, I'm writing it as an answer.
What I meant was to set an empty collection not in the clickListener but directly after initializing the ComboBox:
ComboBox<String> combo=new ComboBox<>("Combo");
combo.setItems(Collections.emptyList());
Button button = new Button("Button");
button.addClickListener(new ComponentEventListener<ClickEvent<Button>>() {
#Override
public void onComponentEvent(ClickEvent<Button> event) {
combo.setItems("11","22");
combo.setValue("22");
}
});
please try it out and let me know if that works
I am using codename one swipe tabs dynamically to prepare some radio button but on swiping of tabs getSelectedIndex () method is giving the previous tabs value(previous in the sense suppose I move my tabs from 0 to 1 so it's giving me 0) so how to get the current tab value at which my tab is because on basis of this selectedIndexTab value I want my radio button to get selected.
Here is my code
TableLayout t1=new TableLayout(1, 5);
radioTypeContainer=new Container(t1);
for(i=0;i<5;i++){
t.addTab("Tab2"+i, new SpanLabel("Some text directly in the tab"));
firstTab = new RadioButton[i];
plain = new RadioButton("");
plain.setName("rdb"+i);
rbt =new RadioButton();
rbt.setName("rbt"+i);
radioTypeContainer.add(rbt);
finalRadioList.add(rbt.getName());
finalRadioList.add(t.getTabUIID());
}
borderLayoutContainer.add(BorderLayout.SOUTH,radioTypeContainer);
t.addSelectionListener((i1, i) -> {
Log.p("====***======="+t.getSelectedIndex());
});
Thanks in Advance
newSelected in selectionchanged method gives the current position of tab as shown in below code.
t.addSelectionListener(new SelectionListener() {
#Override
public void selectionChanged(int oldSelected, int newSelected) {
Log.p("====***======="+newSelected);
}
});
populate combobox code:
ComboBox getCategoryComboBox = new ComboBox();
searchOptionForm.add(getCategoryComboBox);
getCategoryComboBox.setUIID("TextField");
getCategoryComboBox.addItem("Choose Category");
for (Map<String, Object> entry : alacc.responseCategory) {
String categoryName = (String) entry.get("name");
String categoryId = (String) entry.get("id");//how to set this to combobox item
getCategoryComboBox.addItem(categoryName);
}
categoryId is taken from for loop above, how to set it in each combobox items? I need to get the categoryId of each selected combobox item, how can i get this?
You have several ways to do this.
One way is to just do:
getCategoryComboBox.addItem(entry);
Which would provide you the full entry on getSelectedItem() effectively solving that problem.
To make the name render properly though you would need to do this:
cb.setRenderer(new DefaultListCellRenderer<Object>() {
public Component getCellRendererComponent(Component list, Object model, Object value, int index, boolean isSelected) {
if(value instanceof Map) {
value = ((Map)value).get("name");
}
return super.getCellRendererComponent(list, model, value, index, isSelected);
}
});
Notice you will also need to define the theme constant otherPopupRendererBool to false for this to work properly.
I am using Vaadin 7.6.4 for my UI work. This has the following:-
I have a window which contains a grid with data in it. This window is actually a kind of a pop up[ which shows up when my main screen gets a click on the settings icon( not shown here). This is working fine( getting the UI screen to open the Vaadin window when the settings icon the main screen is clicked).
The problem is in showing the data as mentioned below.
This grid will have 4 columns for which the data comes from a bean container.
The first column is a boolean field with true/false getting displayed based on the data from the bean container.
I need to convert this boolean field column into a checkbox with true showing the field as a checkbox with a value selected. If the value is false, then show a checkbox which is not selected.
I am trying to do that as shown in the code below but I keep getting this checkbox name printed. I dont see the checkbox but the word "checkbox" printed in there?
This checkbox should be editable. The idea is that the user should be able to select some checkboxes and the ones selected should be shown in a panel ( not shown here). Thus, the checkbox has to be editable.
How do I fix this? The code for the window is shown below
package com.platform28.mybatis;
import java.util.List;
import com.vaadin.data.Item;
import com.vaadin.data.util.BeanItemContainer;
import com.vaadin.data.util.GeneratedPropertyContainer;
import com.vaadin.data.util.PropertyValueGenerator;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Button.ClickListener;
import com.vaadin.ui.CheckBox;
import com.vaadin.ui.Grid;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Window;
#SuppressWarnings("serial")
public class ConfigPopUp extends Window {
VaadinUtils vaadinUtils = null;
public ConfigPopUp(List<TableColumnData> tblDataLst) {
vaadinUtils = new VaadinUtils();
// Some basic content for the window
VerticalLayout configLayout = new VerticalLayout();
configLayout.addComponent(new Label("Settings"));
configLayout.setMargin(true);
//configLayout.setWidth(null);;
setContent(configLayout);
//adding grid.
List<SettingsColumnData> settingsList = vaadinUtils.processSettingsList(tblDataLst);
final BeanItemContainer<SettingsColumnData> gridDataSource = new BeanItemContainer<SettingsColumnData>(SettingsColumnData.class, settingsList);
//change boolean value to checkbox.
GeneratedPropertyContainer gp = new GeneratedPropertyContainer(gridDataSource);
gp.addGeneratedProperty("columnDisplayed", new PropertyValueGenerator<CheckBox>() {
#Override
public CheckBox getValue(Item item, Object itemId, Object propertyId) {
boolean currentCheckBoxValue = (boolean) item.getItemProperty("columnDisplayed").getValue();
CheckBox chkBox = new CheckBox();
chkBox.setValue(currentCheckBoxValue);
return chkBox;
}
#Override
public Class<CheckBox> getType() {
return CheckBox.class;
}
});
Grid settingsGrid = new Grid(gp);
settingsGrid.setWidth("100%");
settingsGrid.setSizeFull();
settingsGrid.setColumnOrder("columnDisplayed", "columnName","columnShortName","columnDescription");
configLayout.addComponent(settingsGrid);
//configLayout.setExpandRatio(settingsGrid, 1);
// Disable the close button
setClosable(false);
HorizontalLayout hLayout = new HorizontalLayout();
hLayout.setSpacing(true);
hLayout.setMargin(true);
// Trivial logic for closing the sub-window
Button ok = new Button("Ok");
ok.addClickListener(new ClickListener() {
public void buttonClick(ClickEvent event) {
close(); // Close the sub-window
}
});
hLayout.addComponent(ok);
// Trivial logic for closing the sub-window
Button cancelBtn = new Button("Cancel");
cancelBtn.addClickListener(new ClickListener() {
public void buttonClick(ClickEvent event) {
close(); // Close the sub-window
}
});
hLayout.addComponent(cancelBtn);
configLayout.addComponent(hLayout);
// set pop up to center.
center();
// should be resizable
setResizable(true);
// should not be draggable
setDraggable(false);
//set it as modal window
setModal(true);
setWidth("50%");
setHeight("75%");
}
}
Ok, we used the SelectionMode.MULTI to show the selection of rows in there.
https://cdn.vaadin.com/vaadin-core-elements/latest/vaadin-grid/demo/selection.html
Still, I would love to learn more as to how we get the change done as shown in the question above.
Still looking for an answer to that.
Use a Renderer and a Converter, you don't need to use SelectionMode.MULTI.
An example of this is posted here.