I noticed that after an update of CN1 some time ago, the Search doesn't display correctly in the toolbar anymore.
When you click the search icon, the toolbar will change and the icons will show, but the textfield for entering the search text (and which normally shows a hint) doesn't show up even if you start to type. It is only shown when you provoke a refresh of the screen, e.g. click in the search field or on the form.
Form hi18 = new Form("FormTitle");
hi18.setLayout(BoxLayout.y());
Container cont18 = hi18.getContentPane();
hi18.getToolbar().addSearchCommand((e) -> {
String text = (String) e.getSource();
for (Component c : hi18.getContentPane()) {
c.setHidden(c instanceof Label && ((Label) c).getText().indexOf(text) < 0);
}
hi18.getComponentForm().animateLayout(150);
});
for (int i = 0; i < 20; i++) {
Label l = new Label("Label " + i);
cont18.add(l);
}
hi18.show();
Looks fine for me considering you created a title with no text in it for the test case so it might be shrinking on you. I suggest adding text to the title and making sure your styling doesn't impact this too much. I would also suggest adding screenshots when discussing something that doesn't look right so we're all on the same page.
These were generated with your code on the current trunk:
Related
At this moment I'm only testing my app in the simulator (as I'm having issues with "Send iOS Build" mentioned in another thread [Errors with Codename One "Send iOS Build" and "Send Android Build")
I'm experiencing some layout issues where it is not making use of the width and height correctly. The elements are left-aligned and there is unused space on the right side. And I need to scroll up and down instead of having everything fit within the visual area. Please see images.
The code are:
private final void show() {
loginSignupForm = new Form("Company", new BoxLayout(0));
Tabs loginSignupTabs = new Tabs();
Style loginSignupStyle = UIManager.getInstance().getComponentStyle("Tab");
prepareAndAddSignupTab(loginSignupTabs, loginSignupStyle);
prepareAndAddLoginTab(loginSignupTabs, loginSignupStyle);
loginSignupForm.add(loginSignupTabs);
loginSignupForm.show();
}
private void prepareAndAddLoginTab(Tabs loginSignupTabs, Style loginSignupStyle) {
loginID = new TextField();
loginPassword = new TextField();
Button loginButton = getLoginButton();
Component[] loginComponents = {
new Label("Email Address"),
loginID,
new Label("Password"),
loginPassword,
loginButton,
};
Container loginContainer = BoxLayout.encloseY(loginComponents);
FontImage loginIcon = FontImage.createMaterial(FontImage.MATERIAL_QUESTION_ANSWER, loginSignupStyle);
loginSignupTabs.addTab("Login", loginIcon, loginContainer);
}
What do I need to changenter code heree to get the elements to:
1. expand to the maximum width (no free space on the right)
2. fit within the visual area (for top-to-bottom)
Please note that I'm coding the elements because I find the (new) GUI Builder quite a challenge to use.
Firstly, don't pass a constant value as an argument to Layouts, coz the values might change in future Codename One updates and this will be difficult for you to debug. new BoxLayout(0) should be new BoxLayout(BoxLayout.Y_AXIS) or simply BoxLayout.y().
The above is where the problem arose but not the only problem because BoxLayout doesn't recognize 0 as a valid argument as it has only 3 which are X_AXIS = 1, Y_AXIS = 2, and X_AXIS_NO_GROW = 3.
If you change the above to use BoxLayout.Y_AXIS, it will work, but from the screenshot above, that's not the best solution.
In conclusion, change your code to below:
private final void show() {
loginSignupForm = new Form("Company", new BorderLayout());
Tabs loginSignupTabs = new Tabs();
Style loginSignupStyle = UIManager.getInstance().getComponentStyle("Tab");
prepareAndAddSignupTab(loginSignupTabs, loginSignupStyle);
prepareAndAddLoginTab(loginSignupTabs, loginSignupStyle);
loginSignupForm.add(BorderLayout.CENTER, loginSignupTabs);
loginSignupForm.show();
}
I am getting my feet wet with Codename One. I have looked into more other options like Xamarin, PhoneGap, Ionic for cross platform but I kinda got hooked with Codename one as it really code once and run anywhere.
I've been going through ui elements and I am kinda blocked on populating a combobox (Alternative is Picker)
Let's say I have stores as value pair (storeId, storeName). I want to display the storeName in Picker but keep storeId as the value reference.
Once the store is selected I would like to pass the storeId to an API call.
Is this possible. This might be very simple question but seems bit difficult to implement (I am really new to mobile).
Thank you.
Our recommendation is to avoid ComboBox. It's a UI pattern that doesn't exist on iOS natively and would feel alien on modern phones. It exists in Codename One.
In this code from the sample above you can get a similar effect to a complex multi-field combo box:
Form hi = new Form("Button", BoxLayout.y());
String[] characters = { "Tyrion Lannister", "Jaime Lannister", "Cersei Lannister"};
String[] actors = { "Peter Dinklage", "Nikolaj Coster-Waldau", "Lena Headey"};
int size = Display.getInstance().convertToPixels(7);
EncodedImage placeholder = EncodedImage.createFromImage(Image.createImage(size, size, 0xffcccccc), true);
Image[] pictures = {
URLImage.createToStorage(placeholder, "tyrion","http://i.lv3.hbo.com/assets/images/series/game-of-thrones/character/s5/tyrion-lannister-512x512.jpg"),
URLImage.createToStorage(placeholder, "jaime","http://i.lv3.hbo.com/assets/images/series/game-of-thrones/character/s5/jamie-lannister-512x512.jpg"),
URLImage.createToStorage(placeholder, "cersei","http://i.lv3.hbo.com/assets/images/series/game-of-thrones/character/s5/cersei-lannister-512x512.jpg")
};
MultiButton b = new MultiButton("Pick A Lanister...");
b.addActionListener(e -> {
Dialog d = new Dialog();
d.setLayout(BoxLayout.y());
d.getContentPane().setScrollableY(true);
for(int iter = 0 ; iter < characters.length ; iter++) {
MultiButton mb = new MultiButton(characters[iter]);
mb.setTextLine2(actors[iter]);
mb.setIcon(pictures[iter]);
d.add(mb);
mb.addActionListener(ee -> {
b.setTextLine1(mb.getTextLine1());
b.setTextLine2(mb.getTextLine2());
b.setIcon(mb.getIcon());
d.dispose();
b.revalidate();
});
}
d.showPopupDialog(b);
});
hi.add(b);
hi.show();
If you insist on using a ComboBox you can use a model to give it any object data you want. Then create a cell render to display the data. This is all discussed in depth in the component section of Codname One's developer guide. Notice that since ComboBox derives from List a lot of the List tips and docs apply to ComboBox.
I'm trying to add a row on a qx.ui.mobile.page.NavigationPage consisting of a label, a text field, and a button. I want the text field to take up any extra horizontal space (the row should span the screen horizontally). I thought this would work:
var comp = new qx.ui.mobile.container.Composite();
comp.setLayout(new qx.ui.mobile.layout.HBox(null, 'middle'));
comp.add(new qx.ui.mobile.basic.Label("Filtering:"));
var f = new qx.ui.mobile.form.TextField();
comp.add(f, {flex:1});
var b = new qx.ui.mobile.form.Button("Update");
comp.add(b);
this.getContent().add(comp);
but it doesn't (see http://tinyurl.com/nwlhtwq for a playground example).
What am doing wrong? Thanks!
Have a look at this example:
http://tinyurl.com/nmw6lgs
It is because the textfield has a "display:inline-block" by default, and width of 100%.
Please set these properties:
qx.bom.element.Style.set(textField.getContentElement(),"display","block");
qx.bom.element.Style.set(textField.getContentElement(),"width","auto");
We will fix that in framework, too.
I am facing an issue where my graph is tree layout and looks fine initially. However, if I choose to change GraphSource upon user input/ clicks using PopulateGraphSource like in the OrgChart example, I get all the nodes stacked on top of each other with no links and all in corner.
I tried resetting graphSource by creating a new one
this.graphSource = new GraphSource();
I also tried to use the Clear method for GraphSource. Neither did solve the problem, I keep having the same issue.
I am using
ObservableCollection<Node> hierarchicalDataSource;
to fill up my GraphSource object.
All I do is create a new one and then call
PopulateGraphSource();
method.
Similar issues: question in telerik support , telerik support different question
Try calling the Layout method on the diagram control. Here is a little fragment of code
TreeLayoutSettings settings = new TreeLayoutSettings()
{
TreeLayoutType = TreeLayoutType.TreeDown,
VerticalSeparation = 60,
HorizontalSeparation=30
};
if (this.diagram.Shapes.Count > 0)
{
settings.Roots.Add(this.diagram.Shapes[0]);
this.diagram.Layout(LayoutType.Tree, settings);
this.diagram.AutoFit();
//this.diagram.Zoom = 1;
}
I am trying to manipulate a requested document in the WPF WebBrowser-control. I already managed it to invoke JavaScript on loaded document, but I am not able to change the shown HTML-code in the control itself.
My (very simplified) code in the OnNavigating-Handler looks like this:
mshtml.HTMLDocument doc = (mshtml.HTMLDocument)View.browser.Document;
HTMLTableClass table = doc.getElementById("someTable") as HTMLTableClass;
if (table != null)
{
table.appendChild((IHTMLDOMNode)(doc.createElement("<tr>") as IHTMLElement));
}
doc.close();
The -element doesn't get appended to displayed document in the control.
Any hints are very appreciated!
I finally got it. Its only possible to change the content of the table by adding rows and cells which i wanted to avoid in first place. My approach was to directly change the content of the -tag, which didnt work.
mshtml.IHTMLTableRow row = table.IHTMLTable_insertRow(-1) as mshtml.IHTMLTableRow;
mshtml.IHTMLElement c = (mshtml.IHTMLElement)row.insertCell(0);
c.innerText = "some";
mshtml.IHTMLElement c1 = (mshtml.IHTMLElement)row.insertCell(1);
c1.innerText = "text";