I have a couple of places in my UI where the user clicks an action and then I'd like to show a pop-up with (something like) a Dialog to invite him/her to add optional information, e.g. use a Picker to enter a date.
The idea is that this popup should be as little intrusive as possible and require as few clicks as possible, so I was thinking something like a Dialog with an explanation text and a Picker already activated so the user can directly swipe to the right date and push Done, and also a [Skip] button to directly close the Dialog without entering anything.
However, I've tried many different solutions and the picker (even in Light mode) appears outside the Dialog and I can't get the Dialog to close when clicking Done in the Picker.
Does anyone have a suggestion on how this could be achieved?
Here's how I finally implemented it, using the non-public components used by the Spinners (so the class must be placed in com.codename1.ui.spinner). I also noticed an issue in DateSpinner3D which sets the time of day randomly (to the time of activation), which means it may alter a Date even if not edited, but I'll do a PR for that.
I've only implemented support for the Picker elements I currently use.
So not fully reusable/generic solution, but hopefully it can help show how it can be done if anyone runs into the same need.
I've added a screenshot (only test colors): [![enter image description here][1]][1]
package com.codename1.ui.spinner;
import com.codename1.components.SpanLabel;
import com.codename1.components.Switch;
import com.codename1.io.Log;
import com.codename1.ui.Button;
import com.codename1.ui.Command;
import com.codename1.ui.Container;
import com.codename1.ui.Dialog;
import com.codename1.ui.Display;
import com.codename1.ui.layouts.BorderLayout;
import com.codename1.ui.layouts.BoxLayout;
import com.parse4cn1.operation.SetFieldOperation;
import java.util.Date;
public class PickerDialog {
Dialog dlg;
Command doneCmd;
int type;
DateTimeSpinner3D dateTimeSpinner;
DateSpinner3D dateSpinner;
DurationSpinner3D durationSpinner3D;
public static String DONE_BUTTON_TEXT = "Done";
public static String CANCEL_BUTTON_TEXT = "Cancel";
public PickerDialog(String title, String text, Object value, String cancelText, String doneText, int type) {
this.type = type;
dlg = new Dialog();
dlg.setDialogUIID("PickerDialog");
dlg.setTitle(title);
dlg.setLayout(BorderLayout.center());
Container cont = new Container(BoxLayout.y());
SpanLabel textSpanLabel = new SpanLabel(text);
textSpanLabel.setTextUIID("PickerDialogText");
cont.add(textSpanLabel);
switch (this.type) {
case Display.PICKER_TYPE_DATE_AND_TIME:
dateTimeSpinner = new DateTimeSpinner3D();
dateTimeSpinner.setValue(value);
cont.add(dateTimeSpinner);
break;
case Display.PICKER_TYPE_DATE:
dateSpinner = new DateSpinner3D();
dateSpinner.setValue(value);
cont.add(dateSpinner);
break;
case Display.PICKER_TYPE_DURATION:
durationSpinner3D = new DurationSpinner3D(DurationSpinner3D.FIELD_HOUR | DurationSpinner3D.FIELD_HOUR);
durationSpinner3D.setValue(value);
cont.add(durationSpinner3D);
break;
}
doneCmd = Command.create(doneText, null, (e) -> {
dlg.dispose();
});
Button doneButton = new Button(doneCmd);
Container buttonBar;
if (cancelText != null && !cancelText.isEmpty()) {
Button cancelButton = new Button(Command.create(cancelText, null, (e) -> {
dlg.dispose();
}));
buttonBar = BorderLayout.centerEastWest(null, doneButton, cancelButton);
} else {
buttonBar = BorderLayout.centerEastWest(doneButton, null, null);
}
dlg.getContentPane().add(BorderLayout.SOUTH, buttonBar);
dlg.getContentPane().add(BorderLayout.CENTER, cont);
}
/**
* return the value of the picker of the defined type (Date or
*
* #return
*/
public Object show() {
Command cmd = dlg.showDialog();
if (cmd == doneCmd) {
switch (type) {
case Display.PICKER_TYPE_DATE_AND_TIME:
return dateTimeSpinner.getValue();
case Display.PICKER_TYPE_DATE:
return dateSpinner.getValue();
case Display.PICKER_TYPE_DURATION:
return durationSpinner3D.getValue();
}
}
return null;
}
}
[1]: https://i.stack.imgur.com/ByvFK.png
Related
When implementing the java ComboBoxListViewSkin class to manage the popup listener of my ComboBox, this adds a 'carrot' to the upper left corner of the ComboBox (see below). If I remove this class implementation it goes away. I'm using the CombBoxListViewSkin's class popup listener to prevent the [SPACE] from selecting and closing the ComboBox when pressed which allows the [SPACE] character to be typed as part of an AutoComplete class.
This is all the code involved in managing and allowing the [SPACE] to work as part of AutoComplete class -and works great. I've tried searching the ComboBoxListViewSkin class for methods or properties that may prevent this, but nothing addresses this. I thought maybe the COMBO_BOX_STYLE_CLASS might offer something but everything really only manages the displaying, adding or removing items. Since the code below is the minimal necessary to recreate the issue, this will not perform the auto-complete function, but it demonstrates that removing and re-implementing the ComboBoxListViewSkin class causes the issue.... or appears to.
// Main method calling
public class Main extends Application{
public static void main(String[] args) {
launch();
}
public void start(Stage stage) throws Exception {
ComboBox cmb = new ComboBox();
cmb.getItems().setAll("One", "One Two", "One Two Three");
new ComboBoxAutoComplete(cmb);
Scene scene = new Scene(new StackPane(cmb));
stage.setScene(scene);
stage.setTitle("Test GUI");
stage.setWidth(300);
stage.setHeight(300);
stage.show();
}
}
// ComboBoxAutoComplete class with ComboBoxListViewSkin initialization
// Minimal of ComboBoxAutoComplete class constructor
import com.sun.javafx.scene.control.skin.ComboBoxListViewSkin;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.control.ComboBox;
import javafx.scene.input.KeyCode;
import javafx.scene.input.KeyEvent;
import java.util.stream.Stream;
#SuppressWarnings("ALL")
public class ComboBoxAutoComplete<T> {
private ComboBox<T> cmb;
private String filter = "";
private ObservableList<T> originalItems;
private ComboBoxListViewSkin cbSkin;
public ComboBoxAutoComplete(final ComboBox<T> cmb) {
this.cmb = cmb;
originalItems = FXCollections.observableArrayList(cmb.getItems());
cbSkin = new ComboBoxListViewSkin(cmb);
// Aside from the variable declaration and initialization... this
// is the only ComboBoxListViewSkin code to handle the [SPACE]
cbSkin.getPopupContent().addEventFilter(KeyEvent.KEY_PRESSED, (event) -> {
if (event.getCode() == KeyCode.SPACE) {
filter += " ";
event.consume();
}
});
}
}
My expectation is for the ComboBox to look like all the other ComboBoxes in the application GUI. Although it is a minor issue, to the user I believe it may look like an issue with the application is going on.
Resolved: As Fabian suggested above, I added a cmb.setSkin(cbSkin) after the initialization and before the event filtering and it worked. Thought I would post so others would see it was resolved.
cbSkin = new ComboBoxListViewSkin(cmb);
cmb.setSkin(cbSkin); // <------------- ADDED
cbSkin.getPopupContent().addEventFilter(KeyEvent.KEY_PRESSED, (event) -> {
if (event.getCode() == KeyCode.SPACE) {
filter += " ";
event.consume();
}
});
I have opened the link now i am clicking on login link on that page,
By clicking on login button its opening in a new tab automatically. I have to fill the form in that tab. For that i tried following code:
Actions act = new Actions(Initialsetupfirefox.driver);
new Actions(Initialsetupfirefox.driver) .keyDown(Keys.CONTROL).click(Initialsetupfirefox.driver.findElement(By.xpath("//a[contains(text(),'LOGIN')]")))
.keyUp(Keys.CONTROL)
.perform();
Thread.sleep(3000);
new Actions(Initialsetupfirefox.driver).sendKeys(Initialsetupfirefox.driver.findElement(By.tagName("html")), Keys.CONTROL).sendKeys(Initialsetupfirefox.driver.findElement(By.tagName("html")),Keys.NUMPAD2).build().perform();
By this i am able to switch the focus but not able to do anything in this tab.
Please suggest
you can do like this:
Set<String> handles = driver.getWindowHandles();
String currentHandle = driver.getWindowHandle();
for (String handle : handles) {
if (!handle .equals(currentHandle))
{
driver.switchTo().window(handle);
}
}
//fill your form in the other tab
......
//go back to first tab if you want
driver.switchTo().window(currentHandle);
This it the code when using selenium with Node.js and Typescript
const mainHandle = await this.driver.getWindowHandle();
// load new tab here ..
const allHandles = await this.driver.getAllWindowHandles();
for (const handle of allHandles) {
if (handle !== mainHandle) {
await this.driver.switchTo().window(handle);
}
}
Get the browser-tabs and do as you like:
List<String> browserTabs = Lists.newArrayList(driver.getWindowHandles());
driver.switchTo().window(browserTabs.get(1)); // Switch to second tab
// Do something on second tab here...
driver.switchTo().window(browserTabs.get(0)); // Return to first tab
// Do something on first tab here...
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 have a Ribbon Form with a treelist on the left so i put a XtraUserControl to insert a DocumentManager in which i would like to add all my tabbed forms (like in Visual Studio).
How can i do this?
Thanks
I suggedt you start from the How to: Display Documents Using a Tabbed UI example. The main idea of this example is that you can add the DocumentManager onto the form and then handle a treelist item's Click to add all needed child forms as MDI-children - the DocumentManager will track all the changes automatically:
Form childForm = new Form();
childForm.MdiParent = this;
childForm.Show();
To read more about the another Document Manager concepts and features please refer to the corresponding documentation articles.
public void Viewchild(Form _form)
{
//Check Before Open
if (!IsFormActive(_form))
{
_form.MdiParent = this;
_form.Show();
}
}
//Check If a Form Is Opened Already
private bool IsFormActive(Form form)
{
bool IsOpened = false;
//If There Is More Than One Form Opened
if (MdiChildren.Count() > 0)
{
foreach (var item in MdiChildren)
{
if (form.Name == item.Name)
{
// Active This Form
xtraTabbedMdiManager1.Pages[item].MdiChild.Activate();
IsOpened = true;
}
}
}
return IsOpened;
}
open form in
Master.frmBranch fb = new Master.frmBranch();
fb.Name = "frmBranch";
I need to keep an indeterminably sized list of strings. I figured the best way to do this would be through a combo box which would take user input, and in turn add that user input upon an "Enter" keystroke detected to the ComboBox list of items, and also allow the user to remove those items by a "Delete" keystroke.
I had hoped this would be a very simple task handled like so:
this.cbx.setOnKeyTyped((KeyEvent E) -> {
switch(E.getCode()){
case ENTER:
this.cbx.getItems().add(this.cbx.valueProperty().get());
this.cbx.valueProperty().set("");
E.consume();
break;
case DELETE:
if (this.cbx.getItems().contains(
this.cbx.valueProperty().get()
)) this.cbx.getItems().remove(this.cbx.valueProperty().get());
this.cbx.valueProperty().set("");
E.consume();
break;
}
});
Unfortunately, Enter does not trigger the event. So clearly I am mistaken.
I also tried with onKeyPressed, and that did not work either.
What need I do to capture when "Enter" and "Delete" are pressed (It picks up "Shift" just fine which is maddening).
EDIT 1:
Have also tried with
If(E.getCode().Equals(KeyCode.ENTER)){
...
} else if (E.getCode().equals(KeyCode.DELETE)){
...
}
No Love.
Edit 2:
Based on James_D's answer below which put me on the right course, in order to accomplish what I was seeking to do, I employed the following method:
ComboBox<String> cb = new ComboBox<>();
cb.setEditable(true);
cb.getEditor().addEventFilter(KeyEvent.KEY_PRESSED, (KeyEvent E) -> {
switch(E.getCode()){
case ENTER:{
if (cb.getItems().contains(cb.getEditor().getText()))
E.consume();
else{
cb.getItems().add(cb.getEditor().getText());
cb.getEditor().clear();
E.consume();
}
break;
}
case DELETE:{
if (E.isControlDown() && cb.getItems().contains(cb.getEditor().getText()))
cb.getItems().remove(cb.getEditor().getText());
else if (E.isAltDown()) cb.getItems().clear();
if (E.isControlDown() || E.isAltDown()){
cb.getEditor().clear();
E.consume();
}
break;
}
}
});
Are you looking to have an editable combo box, that adds items to its popup list when the user types in items that are not there?
If so, try:
import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.ComboBox;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;
public class UpdatingComboBox extends Application {
#Override
public void start(Stage primaryStage) {
ComboBox<String> combo = new ComboBox<>();
combo.setEditable(true);
combo.valueProperty().addListener((obs, oldValue, newValue) -> {
if (newValue != null && ! combo.getItems().contains(newValue)) {
combo.getItems().add(newValue);
}
});
HBox root = new HBox(combo);
root.setAlignment(Pos.TOP_CENTER);
primaryStage.setScene(new Scene(root, 350, 150));
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
For deleting, the first thing I would ask is if you really want the functionality as you've described it. Users would typically expect pressing delete in an editable combo box to delete the next character, not remove an item entirely from the list. If you do want to do this, you have to get your hands a little more dirty and use a key listener. For some reason, adding the key listener to the combo box directly seems to have somewhat unpredictable results; it works however if you add it to the text field underlying the editable combo box:
combo.getEditor().addEventFilter(KeyEvent.KEY_PRESSED, event -> {
if (event.getCode() == KeyCode.DELETE) {
combo.getItems().remove(combo.getValue());
event.consume();
}
});