setPreferredW textfield resize android

[Maaike]

Device: Android

Hello,

I have a textfield in a BoxLayout-Y container (which is again in a BoxLayout-Y container, it's the first 'field' of that container). I set textfield.setPreferredW(80). This is working nice in the simulator. However, on my Android devices (smartphone LG 4XHD and tablet Asus Memopad Smart), the textfield is resizing after clicking on the 'done' button or anywhere else in the app after filling in the field.

Can I prevent this?

This is my textfield code:

channelField = new TextField();
channelField.setConstraint(TextArea.NUMERIC);
channelField.setMaxSize(2);
channelField.setPreferredW(80);

[Maaike]

Adding setWidth(80) on channelField also doesn't do any good...

[Shai Almog]

If you will rotate the simulator this will also fail there.
BoxLayout Y ignores the preferred size and always stretches the component to parent width.

[Maaike]

Ok so I have to choose another Layout. Rotating the device is not changing anything by the way, didn't try the simulator yet.

The problem is: Because the textfield becomes larger, the next components go to the next line. And that's just what I wanted to prevent.

Well, I'll try another layout, thanks for you answer.

[Maaike]

I put the textfield in a TableLayout container (which is in a BoxLayout container), but in the TableLayout container the textfield also becomes larger :(.

What Layout doesn't show this behaviour?

[Maaike]

Maybe not the best option at all, but I set the preferredW in the ActionListener and that works ok.

[Shai Almog]

Rotation on the simulator will reproduce the issue you are seeing on the device.
BoxLayout Y ignores preferred width and generally you shouldn't use it (since font size determines width).
If you want only X characters to fit in a field use setColumns() to determine that. If you don't want the text field to "grow" just wrap it in a layout that doesn't grow such as FlowLayout and add that container to the BoxLayout Y.

[Maaike]

Rotation on the simulator is not reproducing the issue. Both GridLayout and FlowLayout show the same behaviour. 

It looks like setColumns was what I needed. I will try that later. Thanks for the suggestion (and sorry I did not find that out myself).

[Maaike]

Yes, setColumns did the trick, thanks for the tip!

Is there a similar function for ComboBoxes? I didn't find any yet. Because when I don't specify a width, in the simulator the ComboBox is too small (used in different layouts). Or is that a 'problem' of the simulator?

[Shai Almog]

Yes, use setRenderingPrototype for list/combo and provide it with a value that should be used to calculate the preferred size. Its generally recommended to do this for performance as well.

[Maaike]

Thanks! That works well. 

[Maaike]

I don't have a Apple developer account yet, but that will come soon, hopefully. In the meantime, I built the app with the offline build tools of Steve Hannah. When running the app in the Xcode iOs simulator, the combobox list is too small (or the left padding is too big): the input is not fully shown. Like you recommended, I set channelCombobox.setRenderingPrototype("XX"); to two of the comboboxes (the one I prefer to be smaller). On that two comboboxes and the one I didn't set setRenderingPrototype(), the list looks too small. On a normal iPad (XCode simulator) everything looks OK. On the retina phones/ipads (XCode simulator) the list is not showing ok. I attached some screenshots to show what I mean (first one is OK, the two others not). 

Is this because I didn't use the build server or is there something I forgot? Or is there a 'bug' for the retina devices? Since I don't have a retina device, I can not test it on a retina pad or phone.

[Shai Almog]

iOS doesn't have ComboBoxes natively so there is no good way to represent them. You should use the Picker component for touch devices rather than the Combo Box.

[Maaike]

Ok I will change that. Why did you choose to implement a combobox if it's not working very well? 

Is that something I should have known? Is it an idea to add this recommendation in the javadoc documentation of the Combobox?

Should I use combobox.setDefaultActAsSpinnerDialog(true) or use a Picker like you say? What is the best way?

[Shai Almog]

ComboBox has been around since the early J2ME days and picker exists only since 2.0.
The act as spinner will work badly on iOS 7.

[Maaike]

 

Today I tried the Picker. I think it's ok to use that one instead of the combobox. But:

I also have a Picker with a longer text. The size of the picker itself is ok, but the Spinner (?)  that shows up when clicking on the picker is too small with longer text (only 2 words with 10 characters), only the first few characters are showing. On some devices (actually only the iPhone) this is working well (in the simulator!). In the picker class, I can't find any options to influence the Spinner that shows up (if it's actually a spinner?). 

Another problem is that on some platforms, there is no 'ok' button in the spinner and when clicking on an option, the spinner is not going away. You have to click outside the spinner to let it go away. 

I have to say I only tested it in the simulator.

How to solve this?

[Shai Almog]

In some tablets you click outside of the spinner and in some there is an OK button. This component is mostly optimized for devices and will look/feel differently in every device.

We'll add a setRenderingPrototype method to Picker which will allow you to control its size in the simulator e.g. pick.setRenderingPrototype("XXXXXXXXXX");

[Maaike]

Are you saying it is only a problem in the simulator? Is the rendering going OK on the different devices? In that case, I can live with it (if I'm sure it's working well on devices) if it's not showing up well in the simulator. But I have only a few devices to test with, so it would be nice if the width is not too small on some devices and OK on some other devices, like the combobox. 

Thanks if you can add a setRenderingPrototype to Picker. When can I expect it (just to know if I have to wait for it before publishing a new version or find another workaround for the time being)?

I thought to write a change for the developer guide (if that's possible) to warn for the combobox rendering on some platforms, but then I saw there is no documentation in the developer guide about Comboboxes. Maybe that's for a reason ;)? 

Thx for your help again anyway, I really appreciate it. 

[Shai Almog]

Picker is specifically implemented natively and will look different on devices. Regardless we will add the API I mentioned above.

[Maaike]

When starting the app, there is also no value, but there are three dots showing (which is OK). 

When setting the value of the picker to "" (an empty string), the picker is disappearing. 

Is this a bug?

[Maaike]

I'm trying to style the picker. Changing paddings gives strange effects (paddings go away totally). Is it possible to style the picker (not the popup but the picker itself)? 

How to change the space between the text and the border?

I also would like to have a small image (arrow) right to the text (in the vertical middle). How to achieve that? I tried it with a border, but the text is directly next to the border image with no space at all, so that's not an option either. 

[Shai Almog]

The picker allows setting an icon and position since its really a button styled to look like a text field. Setting the text to "" probably falls under the special case for labels with "". I'm not sure if there is a workaround other than setting the string to " ".

[Maaike]

Ok I changed it to a string with space. Thank you for the quick action to add setRenderingPrototype() to picker. I have three questions:

1. Yesterday I checked and there was an update of the Netbeans CodenameOne plugin. I downloaded the new one, but picker.setRenderingPrototype was not available yet. When sending a build, the new source of codenameone was automatically downloaded. How can I force a download of the codenameone source myself in Netbeans?

2. Unfortunately, the width of the picker (or actually the popped up 'spinner') is not ok on all devices. On my Android 4.4.4 device (tablet Asus MemoPad Smart and Samsung Tab 10.1") everything looks fine. On my Android 4.1 smartphone (LG 4x HD), when a short word is selected in the picker and I click on the picker, the longer words do not fit in the 'spinner' list. The screenshot is showing the behaviour (The selected word should be 'Marine VHF'). When the longest word is selected in the picker, there is nothing wrong. 

Is there anything to solve this, except adding spaces to the other words, which is not preferrable at all? I of course did use the new picker.setRenderingPrototype("XXXXXXXXXXX") or something like that.

3. Maybe (not sure yet) I prefer a longer dropdownlist for the long list of channels that a user can select. The dropdownbox didn't work well on iOs devices, so that's not a good idea. I didn't check this picker on the iOs simulator yet, but on Android it looks ok (except the spinner is 'too short'). For a list of 60 options, seeing only one means long scrolling. Is the best option for a longer list to make a dialog myself, with a list in it, and pop that up? Or does anyone have a better idea?

[Shai Almog]

The update was older you just noticed it yesterday http://www.codenameone.com/3/post/2013/08/use-the-source.html
Yes, the native Android picker is like that.

[Maaike]

So the native picker in Android cuts off longer words when the first selected word is shorter? Ok, that's good to know (stupid!).

It's not the case on another Android device, so maybe they have a fix for that.

Thanks for the description about the source.

Well, I think it's a very very basic thing to have a dropdown list, but none of them (picker, combobox) seems to make the width correct :(. All I want is showing a list when clicking on a button (or something else) so users can choose a value. I only want that all my options are shown correctly, without broken words or numbers. Is there another component that can do this? Or do I indeed have to make my own dialog with a list for this?

[Shai Almog]

The combo box also has a setRenderingPrototype method which you can use.

[Maaike]

Yes, but why I started using a Picker is because the combobox doesn't work wel on iPhone/iPad, also with setrenderingprototype (width is't correct, so the numbers I used in the combobox fall off at the right side). I would really like to use a Combobox, but also with setRenderingPrototype I can't rely on it :(. Is there really no way you (or I) can fix one of them (Picker width or combobox widt) so the content of the dropdown/picker will fit on every device in the list/spinner/etc?

[Shai Almog]

The picker code is an Android native layout see line 5635 in AndroidImplementation.java. I'm not a big expert in Android layout code so I'm not exactly sure what we got wrong there.

The combo box can be themed and customized rather heavily via the UIID and renderer customization, if you want things aligned in a different way or the renderer to act differently there are dozens of flags/options you can customize. I'm not sure I can properly visualize what you are trying to achieve in terms of customization so I suggest you break it down with screenshots and specific requirements.

[Maaike]

Ok, actually the only thing I want are two types of 'lists' where you can choose from:

- One with words

- One with numbers with a maximum of 2 numbers

I have a very simple app with only one page where you can choose a type and a number, and then the frequency of that type is shown.

This is how my app looks right now (with a picker used for the list):

The best for me would be to use one type of component for both 'lists'.

Problems:

- Combobox: I would really like to use that, because I have a list of 60 numbers to choose from (and the native picker only shows 3 at once, that's a lot of scrolling). However, it looks bad on iOs because the right part of the numbers/list are broken on some devices:

(Should look like this:)

- Picker: I was not yet able to compile and run on the iOs simulator, but on Android the width of the 'list' is not reliable (the selected word should be 'Marine VHF):

Of course I set setRenderingPrototype() to combobox and picker, so that should not be the problem. 

What I am searching for is something that shows a list (in some way) where my text is not cut off on any device. That's all actually. 

I already tried to add some margin / padding to the combobox, but that didn't work out: the problem is the space before the items, that is very big on iOs (on the left of the list, as you can see on the iOs screenshots above) and I don't know how to reach that (tried all ComboBox UIID's, but no one did change the width of the empty space left of the text).

I hope you can help me out. 

[Maaike]

Oh and one more requirement: I don't want the full width of the combobox because it doesn't fit on smaller screens. So I want the width to be just big enough (or maybe one or two characters bigger) to fit the content. This doesn't apply to the combobox of the types, that one can be as big as the screen width minus the border.

[Shai Almog]

In the combo box do you use setRenderingPrototype("XXX")? It should solve this issue.

[Maaike]

Yes I do and it doesn't solve the issue (as you can see on the images). 

One thing I realized yesterday is that I used setRenderingPrototype() on the combobox. Is that ok or should I use it on the model or something else?

[Shai Almog]

It should be fine on the combo box.
I just tried something simple and I can't reproduce the problem but I don't have my iPhone here at the moment. Does this code trigger the problem in your case with the default theme?

        ComboBox<String> cb = new ComboBox<String>(new String[]{
            "0", "1", "2", "3", "4", "5", "6", "7", "8", "9",
            "10", "11", "12", "13", "14", "15", "16", "17", "18", "19",
            "20", "21", "22", "23", "24", "25", "26", "27", "28", "29",});
        cb.setRenderingPrototype("XXX");
        f.addComponent(cb);

[Maaike]

I will try. The problem is that I don't have an apple developer account yet (maybe this evening) and only an iPad 2. Like I said in a previous post, I see the problem when building everything offline with the offline build tools that Steve Hannah produced for Netbeans. When I open the result in the XCode simulator, the problem exists only on some devices. iPad 2 is doing well and that's just the device I have. So I can only test on the simulator or (hopefully later this week) on the iPad 2 (on which the simulator shows no problem). Is the XCode simulator a good simulator to find such problems?

I will try your code later and report the outcome. I didn't use strings, but ints in the combobox. For one combobox I defined a model to add/remove values, but I think if you add the strings directly to the combobox, it will also first be added to the model and the model to the combobox? So that should make no difference?

PS I didn't change anything in the theme that has something to do with the combobox, I think. Only some containers.

[Maaike]

Unfortunately, no luck.

iPad 2 is ok, other devices look like the added screenshot.

Or is this only the simulator that behaves badly?

[Shai Almog]

Is this only on the simulator?
I tried this on the iPhone 4 simulator and it looks fine there.
What did you change in the theme specifically? I suggest inspecting those changes.

[Maaike]

Yes, since I don't have a developer account yet (and yesterday I tried to get one but that's not as easy as getting a Google developer account), I can't test on any device. So I installed the offline build tools from Steve Hannah and compiled a version on my mac and opened several simulators to check.

I used a clean helloworld install to test (last screenshot), so I didn't change anything in the theme.

Since I can only test on an iPad 2 (not yet however) and on the XCode simulator, I'm not sure whether the simulator is OK or not and I can not check it on other devices. If you say it's because the simulator of XCode is bad, I have to believe you I think. 

[Shai Almog]

Device simulators from Apple or our simulator?
Since we don't support Apples simulator you should be clear if you hacked something unofficial.

[Maaike]

Ok that's clear.

I didn't hack anything. Like I said before, I downloaded the offline build tools for netbeans from Steve Hannah and made a build. I opened that build in the simulator. 

I already asked a few times if the simulator is showing everything like in a 'real' app. The answer was: 'iOS doesn't have ComboBoxes natively so there is no good way to represent them'. So I thought it was not the simulator that was behaving badly. 

So does the XCode simulator simulate a real device correctly or does it not? 

[Shai Almog]

XCode simulator should be accurate. I'm not sure about Steve's offline tools since I haven't used them.

[Maaike]

Ok what do you think is the best way to show a list like the combobox should do? Edit some combobox uiid's or renderer or something? If yes, what should I change?
Or make a dialog with a list in it myself?
Or change something on the picker so it's showing everything correctly? What should I change?

[Shai Almog]

Picker would be hard since picker is native.
You can customize the combo box renderers via the ComboBoxRenderer etc. UIID's make sure to define the theme constant otherPopupRendererBool=false