Codename one - autocompletetextfield getitem selected - codenameone

I have two problems:
1) First, I want to add a map in AutoCompleteTextField exactlly in DefaultListModel and after I want to add the the listmodel in my autocompletetextField
2) How can I get the text when I select an element in the AutoCompleteTextField?
Form hi = new Form("Auto Complete", new BoxLayout(BoxLayout.Y_AXIS));
AutoCompleteTextField ac = new AutoCompleteTextField("Short", "Shock", "Sholder", "Shrek0", "3asna", "niazra");
ac.setMinimumElementsShownInPopup(5);
//final DefaultListModel<Map<String,Object>> options = new DefaultListModel<>();
final DefaultListModel<String> options = new DefaultListModel<>();
AutoCompleteTextField an = new AutoCompleteTextField(options);
hi.add(an);
ac.addListListener(a -> {
List<Object> ls = new List<>();
System.out.println("i want to display the text selected");
});
hi.add(ac);
hi.show();

When you select an item in the suggestion box of an AutoCompleteTextField the text of this item is copied to the TextField part of the AutoCompleteTextfield, but this occur only after the ListEvent.
In order to have this behavior, prefer using a Selection Listener on the DefaultListModel:
Form hi = new Form("ACTF", new BoxLayout(BoxLayout.Y_AXIS));
DefaultListModel<String> defList = new DefaultListModel<>("Red", "Green", "Blue", "Orange");
AutoCompleteTextField tf1 = new AutoCompleteTextField(defList);
defList.addSelectionListener((oldid, newid)-> Log.p(defList.getItemAt(newid)));
hi.add(tf1);
hi.show();
I don't know why, it occur two times after showing the form, but it works perfectly fine after.
Edit: If you want to display the text on screen, you must use something like this :
Form hi = new Form("ACTF", new BoxLayout(BoxLayout.Y_AXIS));
Label text = new Label("Selected text");
DefaultListModel<String> defList = new DefaultListModel<>("Red", "Green", "Blue", "Orange");
AutoCompleteTextField tf1 = new AutoCompleteTextField(defList);
defList.addSelectionListener((oldid, newid)-> {
text.setText(defList.getItemAt(newid));
hi.revalidate();
});
hi.add(text);
hi.add(tf1);
hi.show();
EDIT 2: Example with a linked map:
Form hi = new Form("ACTF", new BoxLayout(BoxLayout.Y_AXIS));
Map testMap = new HashMap<String, String>();
testMap.put("Red", "Roses are red");
testMap.put("Green", "Grass is green");
testMap.put("Blue", "Sky is blue");
testMap.put("Orange", "Apricots are orange");
Label text = new Label("Selected text");
DefaultListModel<String> defList = new DefaultListModel<>(testMap.keySet());
AutoCompleteTextField tf1 = new AutoCompleteTextField(defList);
defList.addSelectionListener((oldid, newid)-> {
text.setText((String) testMap.get(defList.getItemAt(newid)));
hi.revalidate();
});
hi.add(text);
hi.add(tf1);
hi.show();

Related

Form scroll down after selection of value into dropdown

I see issue when a date value selected in the drop-down will automatically push the content in the form downwards and never gets refreshed.
I have used content.setScrollableY(true) which make the form scrollable. But here the problem is happening when I select the date value in the drop-down, where i have to scroll the dates to select which will internally scrolling the content in the form.Please advise
Code:
Form hi = new Form("Pick", BoxLayout.y());
Label emptyLbl1 = new Label(" ");
emptyLbl1.setUIID("Seperator");
Label emptyLbl2 = new Label(" ");
emptyLbl2.setUIID("Seperator");
Label emptyLbl3 = new Label(" ");
emptyLbl3.setUIID("Seperator");
Label emptyLbl4 = new Label(" ");
emptyLbl4.setUIID("Seperator");
Label emptyLbl5 = new Label(" ");
emptyLbl5.setUIID("Seperator");
Label emptyLbl6 = new Label(" ");
emptyLbl6.setUIID("Seperator");
Label emptyLbl7 = new Label(" ");
emptyLbl7.setUIID("Seperator");
Picker p = new Picker();
p.setType(Display.PICKER_TYPE_DATE);
hi.add(p).add(emptyLbl1).add(emptyLbl7);
CheckBox pickStartTime;
CheckBox pickEndTime;
pickStartTime = new CheckBox("Edit Start Time");
pickStartTime.setOppositeSide(true);
pickStartTime.setHeight(Display.getInstance().convertToPixels(6.5f));
pickStartTime.setSelected(false);
pickStartTime.setUIID("CheckArea");
pickEndTime = new CheckBox("Edit End Time");
pickEndTime.setOppositeSide(true);
pickEndTime.setHeight(Display.getInstance().convertToPixels(6.5f));
pickEndTime.setSelected(false);
pickEndTime.setUIID("CheckArea");
Picker timePicker1 = new Picker();
Picker datePicker1 = new Picker();
Picker dateTimePicker1 = new Picker();
timePicker1.setUIID("TextField");
datePicker1.setUIID("TextField");
dateTimePicker1.setUIID("TextField");
Button navigate = new Button("Navigation");
navigate.setUIID("NavigateButton");
CommonUtil.makeBorderRound(navigate);
Picker p1 = new Picker();
p1.setType(Display.PICKER_TYPE_DATE);
Label clock = new Label("--:--", "Clock");
hi.add(p1).add(pickStartTime).add(emptyLbl2).add(navigate).add(clock);
Picker p2 = new Picker();
p2.setType(Display.PICKER_TYPE_DATE);
hi.add(pickEndTime).add(p2).add(emptyLbl3).add(emptyLbl5);
Picker p3 = new Picker();
p3.setType(Display.PICKER_TYPE_DATE);
Button finishActivity = new Button("Finish Activity");
CommonUtil.makeBorderRound(finishActivity);
finish.setTextPosition(LEFT);
CommonUtil.addSideMenu(this);
hi.add(p3).add(emptyLbl6).add(finish);
hi.show();
This doesn't happen to me:
Form hi = new Form("Pick", BoxLayout.y());
Picker p = new Picker();
p.setType(Display.PICKER_TYPE_DATE);
hi.add(p);
hi.show();
Make sure you are using the lightweight picker.

Using two textArea in table layout gives weird behaviour - cn1

I've couple of textfields and textArea in table layout. The 1st textArea works well but after that if the 2nd textArea is focused, the component goes way up and the text written in textArea is seen below the textArea. It happens in iOS devices only. It works pretty well in android devices.
Please have a look at the video here
Code:
Label nameLabel = new Label("New Owner Name* ");
TextField nameData = new TextField();
Label addressLabel = new Label("New Address* ");
TextField addressData = new TextField();
Label phnNoLabel = new Label("Phone No. ");
TextField phnData = new TextField();
phnData.setConstraint(TextField.NUMERIC);
Label contactNoLabel = new Label("New Mobile No.* ");
TextField contactData = new TextField();
contactData.setConstraint(TextField.NUMERIC);
Label emailLabel = new Label("New Email ");
TextField emailData = new TextField();
emailData.setConstraint(TextField.EMAILADDR);
Label reasonLabel = new Label("Reason* ");
TextArea reasonData = new TextArea();
reasonData.setRows(4);
reasonData.setUIID("TextField");
reasonData.setScrollVisible(false);
reasonData.getAllStyles().setAlignment(Label.LEFT);
Label remarksLabel = new Label("Remarks ");
TextArea remarksData = new TextArea();
remarksData.setRows(4);
remarksData.setUIID("TextField");
remarksData.setScrollVisible(false);
Button submitButton = new Button(" Submit ");
TableLayout tl = new TableLayout(7, 2);
Container testDriveContainer = new Container(tl);
testDriveContainer.add(tl.createConstraint().widthPercentage(35), nameLabel).add(tl.createConstraint().widthPercentage(65), nameData)
.add(tl.createConstraint().widthPercentage(35), addressLabel).add(tl.createConstraint().widthPercentage(65), addressData)
.add(tl.createConstraint().widthPercentage(35), contactNoLabel).add(tl.createConstraint().widthPercentage(65), contactData)
.add(tl.createConstraint().widthPercentage(35), phnNoLabel).add(tl.createConstraint().widthPercentage(65), phnData)
.add(tl.createConstraint().widthPercentage(35), emailLabel).add(tl.createConstraint().widthPercentage(65), emailData)
.add(tl.createConstraint().widthPercentage(35), reasonLabel).add(tl.createConstraint().widthPercentage(65), reasonData)
.add(tl.createConstraint().widthPercentage(35), (remarksLabel)).add(tl.createConstraint().widthPercentage(65), remarksData);
Container mainContainer = BoxLayout.encloseY(testDriveContainer, FlowLayout.encloseCenter(submitButton));
mainContainer.setScrollableY(true);
add(BorderLayout.CENTER, mainContainer);

Codename One - setScrollVisible in two examples of code

This question is related to this one: Codename One - container.setScrollVisible(true) in the center of a BorderLayout
In the following example of code the setScrollVisible(true) works correctly when the user expands the Accordion (that occupies more space that the height of the screen) and does the scrolling:
Form hi = new Form("Hi World", new BorderLayout(BorderLayout.CENTER_BEHAVIOR_SCALE));
Container body = new Container(BoxLayout.y());
for (int i = 0; i < 100; i++) {
body.add(new Label("Label " + i));
}
Accordion accordion = new Accordion();
accordion.addContent("Tap to expand", body);
Container center = new Container(BoxLayout.y());
center.add(accordion);
center.setScrollableY(true);
center.setScrollVisible(true);
center.getAllStyles().setPaddingUnit(Style.UNIT_TYPE_DIPS);
center.getAllStyles().setPadding(2, 2, 2, 2);
hi.add(BorderLayout.CENTER, center);
hi.show();
But in this other example of code, the setScrollVisible(true) doesn't work when the user expands all the Accordions (that occupy more space that the height of the screen) and does the scrolling:
Form hi = new Form("Hi World", new BorderLayout(BorderLayout.CENTER_BEHAVIOR_SCALE));
// Warning: you need to set the theme property "ComponentGroupBool" to true
Button button1 = new Button("Button 1", "ButtonMenuCategories");
CheckBox button11 = CheckBox.createToggle("Button 1.1");
CheckBox button12 = CheckBox.createToggle("Button 1.2");
Button button13 = new Button("Button 1.3", "ButtonMenuCategories");
CheckBox button131 = CheckBox.createToggle("Button 1.3.1");
CheckBox button132 = CheckBox.createToggle("Button 1.3.2");
CheckBox button133 = CheckBox.createToggle("Button 1.3.3");
CheckBox button14 = CheckBox.createToggle("Button 1.4");
Button button2 = new Button("Button 2", "ButtonMenuCategories");
Button button3 = new Button("Button 3", "ButtonMenuCategories");
Button button4 = new Button("Button 4", "ButtonMenuCategories");
Button button5 = new Button("Button 5", "ButtonMenuCategories");
Accordion accordion13 = new Accordion();
ComponentGroup cmpGroup1 = ComponentGroup.enclose(button131, button132, button133);
cmpGroup1.setScrollable(false);
accordion13.addContent(button13, FlowLayout.encloseCenter(cmpGroup1));
Accordion accordion1 = new Accordion();
ComponentGroup cmpGroup2 = ComponentGroup.enclose(button11, button12, accordion13, button14);
cmpGroup2.setScrollable(false);
accordion1.addContent(button1, FlowLayout.encloseCenter(cmpGroup2));
Accordion accordion2 = new Accordion();
accordion2.addContent(button2, new Label("Hello"));
Accordion accordion3 = new Accordion();
accordion3.addContent(button3, new Label("Hello"));
Accordion accordion4 = new Accordion();
accordion4.addContent(button4, new Label("Hello"));
Accordion accordion5 = new Accordion();
accordion5.addContent(button5, new Label("Hello"));
ComponentGroup cmpGroup = ComponentGroup.enclose(accordion1, accordion2, accordion3, accordion4, accordion5);
Container menu = FlowLayout.encloseCenter(cmpGroup);
accordion13.setScrollable(false);
accordion1.setScrollable(false);
accordion2.setScrollable(false);
accordion3.setScrollable(false);
accordion4.setScrollable(false);
accordion5.setScrollable(false);
cmpGroup.setScrollable(false);
menu.setScrollableY(true);
menu.setScrollVisible(true);
hi.add(BorderLayout.CENTER, menu);
hi.show();
What's wrong in the second example of code?

WPF Printing FlowDocument not centering

I want to print a page from some text I have with a small header.
I wanted all the text to be centered on the page but I'm not sure how to do it..
Here is my code.. t is of type track which is just an object that holds information like artist name, album name, song title, and lyrics.
PrintDialog dialog = new PrintDialog();
if (dialog.ShowDialog() != true)
{ return; }
FlowDocument doc = new FlowDocument();
Section sec = new Section();
Paragraph header = new Paragraph();
Paragraph body = new Paragraph();
Bold boldSong = new Bold();
boldSong.Inlines.Add(new Run(t.Song));
header.Inlines.Add(boldSong);
header.Inlines.Add(new LineBreak());
Bold boldArtist = new Bold();
if (!string.IsNullOrWhiteSpace(t.Artist))
{
boldArtist.Inlines.Add(new Run(t.Artist));
header.Inlines.Add(boldArtist);
header.Inlines.Add(new LineBreak());
}
Bold boldAlbum = new Bold();
if (!string.IsNullOrWhiteSpace(t.Album))
{
boldAlbum.Inlines.Add(new Run(t.Album));
header.Inlines.Add(boldAlbum);
header.Inlines.Add(new LineBreak());
}
header.TextAlignment = TextAlignment.Center;
body.Inlines.Add(t.iTunesFileTrack.Lyrics);
body.TextAlignment = TextAlignment.Center;
doc.Blocks.Add(header);
doc.Blocks.Add(body);
doc.Name = "FlowDoc";
IDocumentPaginatorSource idpSource = doc;
DocumentPaginator holder = idpSource.DocumentPaginator;
holder.PageSize = new Size(dialog.PrintableAreaWidth,
dialog.PrintableAreaHeight);
dialog.PrintDocument(holder, "Lyrics");
The page prints just fine except for the fact that the whole thing clings to the left of the document when printed... I know there is some property I'm not setting correctly or not setting at all..
increase the size of the ColumnWidth property or just make it '999999'

Qooxdoo form elements and getSelection()

Here's my code:
var sb = new qx.ui.form.SelectBox();
sb.add( new qx.ui.form.ListItem("English") );
sb.add( new qx.ui.form.ListItem("Nederlands") );
sb.add( new qx.ui.form.ListItem("Deutsch") );
sb.add( new qx.ui.form.ListItem("français") );
sb.add( new qx.ui.form.ListItem("Српски") );
How do I use setSelection() to select "Deutsch", and what if the items are numeric values? Can I also set values for these labels or is SelectBox() limited to labels?
For example:
value: en, label: English
value: de, label: Deutsch
etc.
Take a look at the example code below.
You can specify a model with each ListItem for storing additional information. It can act as value property on form items for example. See http://demo.qooxdoo.org/1.0.x/apiviewer/#qx.ui.form.ListItem
var selectBox = new qx.ui.form.SelectBox();
selectBox.add( new qx.ui.form.ListItem("English", null, "en" ));
selectBox.add( new qx.ui.form.ListItem("Nederlands", null, "nl" ));
var defaultItem = new qx.ui.form.ListItem("Deutsch", null, "de" );
selectBox.add(defaultItem );
selectBox.add( new qx.ui.form.ListItem("français", null, "fr"));
selectBox.add( new qx.ui.form.ListItem("Српски", null, "ru"));
selectBox.setSelection([defaultItem]);
selectBox.addListener("changeSelection", function(e) {
//Read model data from listitem
this.debug("changeSelection: " + e.getData()[0].getModel());
});
Maybe this example will be useful for you too:
var sb = new qx.ui.form.SelectBox();
var a = ["English", "Nederlands", "Deutsch", "Français", "Српски"];
var model = new qx.data.Array(a);
var controller = new qx.data.controller.List(model, sb);
controller.setSelection(model.slice(0,3));
At last line model.slice(0,3) returns subarray of model with three elements: from "English" to "Deutsch". And last element in this subarray will be "selected" by default.
See "Data Binding" in qooxdoo's manual for details.

Resources