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.
Related
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:
I hope this post can help me.
My problem that when I use ComponentRenderer, then the grid appears empty.
The used vaadin version 7.6 and the used ComponentRenderer is 1.0.3 as it is recommended to be.
If I did not use ComponentRenderer, then the grid appears but the combo box is not appear.
What could be the reason?
Below is the used code:
Object itemId = container.addItem();
container.getContainerProperty(itemId,"ID").setValue("1");
container.getContainerProperty(itemId,"Dependent MPI").setValue("200.300");
container.getContainerProperty(itemId,"MPI Type").setValue("Antenna");
container.getContainerProperty(itemId,"Approval").setValue(ApproveReject);
this.getColumn("Approval").setRenderer(new ComponentRenderer());
Regards
Bilal
Object itemId = container.addItem(); //1
container.getContainerProperty(itemId,"ID").setValue("1");//2
container.getContainerProperty(itemId,"Dependent MPI").setValue("200.300");//3
container.getContainerProperty(itemId,"MPI Type").setValue("Antenna");//4
container.getContainerProperty(itemId,"Approval").setValue(ApproveReject);//5
this.getColumn("Approval").setRenderer(new ComponentRenderer()); //6
I believe you are trying to add a column "Approval" in line 5. Shouldn't it be:
Column approvalColumn = container.addColumn(...);
approvalColumn.setRenderer(...);
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.
we want dialog message in this format and look and fill
Can you please let me know how to resolve it. My application needs to be supported on all platforms (Android, iOS, Windows) and I don't want to write native code for all platforms separately.
Actually customizing the look is easier in Codename One as everything is written in Java you can customize literally everything about the look of anything.
For simplicity sake I used code rather than styles which would be better, you can customize the Dialog UIID and other UIID's in the theme designer to get more flexibility and have this easier. However, this would require many screenshots and explanations so I did the customization in code:
Form f = new Form("Test");
Button b = new Button("Show Dialog");
f.add(b);
b.addActionListener(e -> {
Dialog dlg = new Dialog("Authentication");
Style dlgStyle = dlg.getDialogStyle();
dlgStyle.setBorder(Border.createEmpty());
dlgStyle.setBgTransparency(255);
dlgStyle.setBgColor(0xffffff);
Label title = dlg.getTitleComponent();
title.setIcon(finalDuke.scaledHeight(title.getPreferredH()));
title.getUnselectedStyle().setFgColor(0xff);
title.getUnselectedStyle().setAlignment(Component.LEFT);
dlg.setLayout(BoxLayout.y());
Label blueLabel = new Label();
blueLabel.setShowEvenIfBlank(true);
blueLabel.getUnselectedStyle().setBgColor(0xff);
blueLabel.getUnselectedStyle().setPadding(1, 1, 1, 1);
blueLabel.getUnselectedStyle().setPaddingUnit(Style.UNIT_TYPE_PIXELS);
dlg.add(blueLabel);
TextArea ta = new TextArea("This is the text you want to appear in the dialog, this might line break if the text is too long...");
ta.setEditable(false);
ta.setUIID("DialogBody");
ta.getAllStyles().setFgColor(0);
dlg.add(ta);
Label grayLabel = new Label();
grayLabel.setShowEvenIfBlank(true);
grayLabel.getUnselectedStyle().setBgColor(0xcccccc);
grayLabel.getUnselectedStyle().setPadding(1, 1, 1, 1);
grayLabel.getUnselectedStyle().setPaddingUnit(Style.UNIT_TYPE_PIXELS);
dlg.add(grayLabel);
Button ok = new Button(new Command("OK"));
ok.getAllStyles().setBorder(Border.createEmpty());
ok.getAllStyles().setFgColor(0);
dlg.add(ok);
dlg.showDialog();
});
f.show();
I would recommend doing the dialog customization in the theme designer and using a 9-piece image border which is better looking.
I am loading a grid dynamically in extjs. As you can see below the column "Created" is not wide enough to display whole text in it. I want to set every column's width such that it display's its text completely.
Is this possible to do? Any suggestion?
Thanks for help.
use parameter width: ... with your column config. As simple as this. I do not see your code so I am guessing.
However it look like you have more vertical space -> maybe break date in 2 lines (using template) would be solution, or you can have special css class just for this cell with smaller letter in order to fit.
Edit:
in your case it could be combination of defaultWith in ColumnModel (at least get 120 to fit your date, if more columns grid would adjust) and setColumnWith() dynamically based on length of data and number of columns - logic is up to you
Thanks bensiu, I implemented the login. However, I cannot say that this is the ideal solution but it solves my purpose.
First, i navigate through data and find the longest string in that column (including header name of that column).
// Store the longest string for each column in columns[col].maxstring
// Define a hidden label
{
xtype: 'label',
id: 'lblTab',
hidden: true
}
var lblTab = Ext.getCmp('lblTab');
var hiddenField = Ext.util.TextMetrics.createInstance(Ext.getCmp('lblTab').el);
var widthValue = 0;
// Iterate through each columns to set its maximum width
for(var col in columns) {
// find width of string
widthValue = hiddenField.getWidth(columns[col].maxstring);
// set column width
colModel.setColumnWidth(columns[col].index, widthValue + 20, false);
}
I hope this helps somebody.