I have a simple form that performs validation of each field. For some reason, I think related to the CodenameOne theme, I do not get a red outline or background for fields failing validation, and I do not see the error messages. The form will gray out the "Submit" button until all validations pass, so this part is working. I just can't see the errors on the screen. I have included my form code below. Is this happening because the default theme I am using does not have the required UUIDs to display the error styles?
Is there a way to debug when styles are being applied but are not available in the theme?
Form registrationForm = new Form("My Registration");
BorderLayout bl = new BorderLayout();
bl.setCenterBehavior(BorderLayout.CENTER_BEHAVIOR_CENTER);
registrationForm.setLayout(bl);
registrationForm.setFormBottomPaddingEditingMode(true);
ComponentGroup cg = new ComponentGroup();
final TextField nicknameField = new TextField("", "Screen name (publicly viewable)", 25, TextArea.ANY);
cg.addComponent(nicknameField);
final TextField emailField = new TextField("", "Email address", 40, TextArea.EMAILADDR);
cg.addComponent(emailField);
final TextField passwordField = new TextField("", "Password", 40, TextArea.PASSWORD);
cg.addComponent(passwordField);
final TextField passwordConfirmField = new TextField("", "Type your password again", 40, TextArea.PASSWORD);
cg.addComponent(passwordConfirmField);
final TextField sloganField = new TextField("", "Slogan (publicly viewable), ex: Go Hokies!", 30, TextArea.ANY);
cg.addComponent(sloganField);
Button submit = new Button("Submit");
Validator v = new Validator();
v.addConstraint(nicknameField, new LengthConstraint(3));
v.addConstraint(emailField, RegexConstraint.validEmail("You must enter a valid email address to receive confirmation"));
v.addConstraint(passwordField, new LengthConstraint(8));
v.addConstraint(passwordConfirmField, new LengthConstraint(8));
v.addSubmitButtons(submit);
submit.addActionListener((e) -> {
String password = passwordField.getText();
String passwordConfirm = passwordConfirmField.getText();
if (!password.equals(passwordConfirm)) {
Dialog.show("Password error", "The password and password confirmation did not match. Please retype them.", "OK", null);
} else {
showConfirmation();
}
});
cg.addComponent(submit);
registrationForm.addComponent(BorderLayout.CENTER, cg);
registrationForm.show();
The error mode sets the UIID to existing UIID with the word "Invalid" appended to it. So a TextField will become TextFieldInvalid.
In the simulator open the Component Inspector tool and traverse the components to see the UIID's that they have. This will allow you to customize the right UIID's in selected/unselected states.
To enable error message display use setShowErrorMessageForFocusedComponent(true).
Related
I have a Watson Assistant integrated on a web-page using the following block:
const customLanguagePack = {
"options_select": "Wählen Sie eine Option aus",
};
window.watsonAssistantChatOptions = {
integrationID: "xxx-xxx-xxx-xxx", // The ID of this integration.
region: "eu-de", // The region your integration is hosted in.
serviceInstanceID: "xxxx", // The ID of your service instance.
showCloseAndRestartButton: true,
onLoad: function(instance : any) {
instance.updateUserID(String(context.user?.user_id));
instance.render();
instance.updateLanguagePack(customLanguagePack);
}
};
setTimeout(function(){
const t=document.createElement('script');
t.src="https://web-chat.global.assistant.watson.appdomain.cloud/versions/" + (window.watsonAssistantChatOptions.clientVersion || 'latest') + "/WatsonAssistantChatEntry.js";
document.head.appendChild(t);
});
As you can see, I render the close and reset button. My problem is, that when clicking on the exit button, the following modal appears with english Text:
I want to change the egnlish text into some custom german text. In the best case I want to customize the title, the text and the button text.
How can I change the Text of those three elements? I tried to add the following keys to the customLanguagePack, but those do not apply, probably because the keys are not correct.
I think I just need the right keys, but I can not find them on the documentation.
Thanks in advance.
try this
const customLanguagePack = {
"closeAndRestartModal_message": "put your German text here"
};
instance.updateLanguagePack(customLanguagePack);
You can find all the texts here: https://github.com/watson-developer-cloud/assistant-web-chat/blob/main/languages/en.json
There are 2 textArea in my screen with necessary hint texts. If the last textArea is focused, the keyboard appears but instead of typing in it, if the other textArea is focused, the new text overlaps the text hints. I've tested in the textFields also, but here the hint disppears as soon as it is focused. However it is not the case in textArea. P.S I've tested the app in android devices.
Have a look at the video here.
Code:
Label reasonLabel = new Label("Reason* ");
TextArea reasonData = new TextArea();
Container reasonContainer = common.Inputs.inputTextArea(reasonData, "Reason For Ownership Transfer", reasonLabel);
Label remarksLabel = new Label("Remarks ");
TextArea remarksData = new TextArea();
Container remarksContainer = common.Inputs.inputTextArea(remarksData, "Additional Info If Any", remarksLabel);
Container mainContainer = BoxLayout.encloseY(phnNoContainer, emailContainer, BoxLayout.encloseY(reasonContainer), BoxLayout.encloseY(remarksContainer));
add(BorderLayout.CENTER, BoxLayout.encloseY(mainContainer, submitButton));
common.Inputs.inputTextArea method:
public static Container inputTextArea(TextArea textArea, String hint, Label textAreaLabel) {
textArea.setHint(hint);
textArea.setRows(2);
textArea.setGrowByContent(false);
textArea.getHintLabel().setUIID("TextField");
Container remarksContainer = BoxLayout.encloseY(textAreaLabel, textArea);
return remarksContainer;
}
When you make a SpanButton lead for a Container, it doesn't receive the events. I've tried debugging but haven't managed to understand why it doesn't work. It seems to be a CN1 error, but I may have misunderstood something.
Here's a test case to reproduce the issue:
Form hi = new Form("Welcome", BoxLayout.y());
//test case shows that when you make a normal Button lead for a Container,
//it works as expected.
//Doing the same with a SpanButton doesn't work.
//When you click button it correctly hides the Label.
//Clicking spanButton doesn't hide the label.
//
//Test also shows a second issue: when adding a Command to a SpanButton,
//the Command text is shown in parallel with the SpanButton's text
//edit Button works normal
Button button = new Button("Normal Button works");
Label hide2 = new Label("Now you see me, now you don't2");
Command cmd2 = Command.create("CmdTxt2", null, (ev) -> {
hide2.setHidden(!hide2.isHidden());
hi.revalidate();
});
button.setCommand(cmd2);
Label editButtonLabel2 = new Label();
FontImage.setMaterialIcon(editButtonLabel2, FontImage.MATERIAL_CHEVRON_RIGHT); // [>]
Container cont2 = BorderLayout.centerEastWest(button, editButtonLabel2, null);
cont2.setLeadComponent(button); //for a normal button, the lead works correctly
hi.add(cont2);
hi.add(hide2);
//with SpanButton it doesn't work:
SpanButton spanButton = new SpanButton("SpanButton does not work");
Label hide = new Label("Now you see me, now you don't");
Command cmd = Command.create("CmdText", null, (ev) -> {
hide.setHidden(!hide.isHidden());
hi.revalidate();
});
spanButton.setCommand(cmd);
Label editButtonLabel = new Label();
FontImage.setMaterialIcon(editButtonLabel, FontImage.MATERIAL_CHEVRON_RIGHT); // [>]
Container cont = BorderLayout.centerEastWest(spanButton, editButtonLabel, null);
cont.setLeadComponent(spanButton); //spanButton made lead for cont, so should receive all events for cont, but doesn't
hi.add(cont);
hi.add(hide);
hi.show();
Could this be due to SpanButton being a container itself and also having a Lead component which is a Button?
You could create a normal Button and apply that command to it, then set the container's lead component to this Button. You don't have to add this Button to the container, add your SpanButton and the container will still receive all the events.
Form hi = new Form("Welcome", BoxLayout.y());
/*test case shows that when you make a normal Button lead for a Container,
it works as expected.
Doing the same with a SpanButton doesn't work.
When you click the button, it correctly hides the Label.
Clicking spanButton doesn't hide the label.
Test also shows a second issue: when adding a Command to a SpanButton,
the Command text is shown in parallel with the SpanButton's text*/
//edit Button works normal
Button button = new Button("Normal Button works");
Label hide2 = new Label("Now you see me, now you don't2");
Command cmd2 = Command.create("CmdTxt2", null, (ev) -> {
hide2.setHidden(!hide2.isHidden());
hi.revalidate();
});
button.setCommand(cmd2);
Label editButtonLabel2 = new Label();
FontImage.setMaterialIcon(editButtonLabel2, FontImage.MATERIAL_CHEVRON_RIGHT); // [>]
Container cont2 = BorderLayout.centerEastWest(button, editButtonLabel2, null);
cont2.setLeadComponent(button); //for a normal button, the lead works correctly
hi.add(cont2);
hi.add(hide2);
//with SpanButton it doesn't work:
SpanButton spanButton = new SpanButton("SpanButton does not work");
Label hide = new Label("Now you see me, now you don't");
Command cmd = Command.create("CmdText", null, (ev) -> {
hide.setHidden(!hide.isHidden());
hi.revalidate();
});
Button btnHidden = new Button(cmd);
Label editButtonLabel = new Label();
FontImage.setMaterialIcon(editButtonLabel, FontImage.MATERIAL_CHEVRON_RIGHT); // [>]
Container cont = BorderLayout.centerEastWest(spanButton, editButtonLabel, null);
cont.setLeadComponent(btnHidden); //spanButton made lead for cont, so should receive all events for cont, but doesn't
hi.add(cont);
hi.add(hide);
hi.show();
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.
I want to implement a TextArea in CodenameOne as follows:
private Container getMessageContainer(String message) {
Container con = new Container(new BorderLayout());
TextArea ta = new TextArea();
ta.setGrowByContent(true);
ta.setSingleLineTextArea(false);
ta.setScrollVisible(true);
ta.setUIID("DialogTextArea");
ta.setEditable(false);
ta.setFocusable(false);
ta.setText(message);
con.addComponent(BorderLayout.CENTER, ta);
return con;
}
I then have a Theme Component in the theme.res file called DialogTextArea deriving TextArea, as follows:
This TextArea is then put on a Dialog as follows:
public MessageDialog(NotificationType notificationType, String title, String message,
boolean fallback) {
this.notificationType = notificationType;
this.fallback = fallback;
this.buildTitle(title);
this.setLayout(new BorderLayout());
this.addComponent(BorderLayout.CENTER, getContentConainer(message));
this.addComponent(BorderLayout.SOUTH, getButtonContainer());
}
private Container getContentConainer(String message) {
Container con = new Container(new BorderLayout());
con.addComponent(BorderLayout.CENTER, getMessageContainer(message));
return con;
}
Where MessageDialog extends Dialog.
This does work well, and I get the following results:
And:
However, when I remove the border from the theme in the theme.res, turning it into an Empty border, I get this as a result:
As well as
This does mean there are some inconsistencies when I wish to remove the border.
Is there any way to get the text to always display when I do not want a border? I tried changing the padding and margin properties, but to no avail.
This is all using the Native theme.
Any help would be appreciated.
private Container getMessageContainer(String message) {
Container con = new Container(new BorderLayout());
TextArea ta = new TextArea();
ta.setGrowByContent(true);
ta.setSingleLineTextArea(false);
ta.setScrollVisible(true);
ta.setUIID("DialogTextArea");
ta.setEditable(false);
ta.setFocusable(false);
ta.setText(message);
con.addComponent(BorderLayout.CENTER, ta);
Label transparentLabel = new Label("");
transparentLabel.getAllStyle().setBgColor(0xffffffff);
con.addComponent(BorderLayout.SOUTH, transparentLabel);
return con;
}
This gives a temporary solution.
You need to remove the border from the selected, unselected states as well as the padding from both. If you don't do that we will pick the "most" option and go with that to prevent "jumping" on every focus change.
Note that selected state is still applicable even if you selected the component to not have focus or editability.