On iOS devices and the simulator if a picker is selected from a sheet window the picker option appears behind the sheet.
Sheet sheet = new Sheet(null, "My Sheet");
sheet.setLayout(new BoxLayout(BoxLayout.Y_AXIS));
Picker p_fromDate = new Picker();
p_fromDate.setType(PICKER_TYPE_DATE);
sheet.add(p_fromDate);
sheet.show();
I have also added this to github issues https://github.com/codenameone/CodenameOne/issues/3588
Is there a simple work around in the mean time? The virtual keyboard is not affected in this way by I'd prefer to keep the picker if possible.
TL;DR: I suggest reworking the UI to avoid prompting for input in a Sheet.
Unfortunately the Picker lightweight mode is a Dialog which is just displayed on top of the current Form. Sheet resides in a pane above the current Form and is a separate interaction altogether. They aren't compatible.
I don't think it's something we can change (at least not easily). Besides breaking compatibility (which is something we can workaround) the main problem is solving this.
A layered pane has order. So a Sheet is in one layer. That makes sense. In your case you want the Sheet below the Picker but if we create a Picker and then show a sheet on top of that this will be a problem. We have no flexible way we can use to manipulate that.
You only see this on iOS since Android native pickers are native widgets which are always on top of everything.
Related
I am trying to implement multipage functionality with quill. I want to fix the height of each page, and when user reaches the end of page, instead of editor height to grow or scrollbar to appear, I want cursor to go to next page(editor), similar behaviour as observed in Google Docs or Microsoft word document.
I have already added 2 editors in the view, but not having any idea on how to switch to new page as cursor reaches the end of first page.
i come straight from google trying to figure out something similar with quill and as far as i know and as far as i came while researching this specific topic:
to me it seems as if its not possible with multiple editors since as soon as the user wants to select paragraphs/elements over a multi page span you'd have to figure out how to
make the selection actually possible (try to select content over a span of two div elements which both are "contenteditable"-enabled, which was one of my first tries kinda).
spread the selection on multiple editors (you'd have to keep track of how much the user selected and when and how far the selection is within which editor which is kinda tricky)
execute an action over multiple editors which will be especially hard since there is no thing as "shared toolbar" yet (as far as i know)
so i really hope (🙏) the time helped you to find an sharable 🤲 solution to this but as far as i built up my knowledge about quill so far (which is a bit over a few weeks old now).
what i will try in the near future is to add a new module to show a page break and style all other elements accordingly to simulate the look of a page.
I've been building my Codename One app for the phone screen format so far. There is a separate Form for the main menu, then a second Form with a list of elements, and then a third Form to edit an element selected from the list. Each Form has an overflow menu and various Titlebar command buttons. And each (Extended) Form has a lot of code that implements the functions in the Form and shares variables etc.
However, to use the tablet (iPad) screen estate, I would like to show the main menu on the left of the screen, the list of elements in the middle and the element edit form on the right. Something similar to the screenshot below. This seems to be a common type of layout on tablets and suits my app usage pattern well.
However, I don't see an elegant way of structuring the code to do this. I can't easily combine the list and edit Forms into one Form, and writing a completely new Form just for the tablet format would be a lot of work. I assume others have faced the same challenge and would love to hear how you achieved this.
PS. I know the side menu can be made permanent but that only solves part of the problem, not how to show a list and edit Forms at the same time.
There is no one answer for this but if you look at apps like Codename One Build you would notice they adapt to this form factor.
We usually just use isTablet() to adapt the UI at key points to the different form factor. One element is the permanent side menu which we turn on in the init method using code like this:
if(Display.getInstance().isTablet()) {
Toolbar.setPermanentSideMenu(true);
}
It makes the side menu stay open all the time. Within the code we try to use Container instead of Form. This allows us to package multiple logical pieces into a single UI for the tablet mode.
I am beginning to learn cn1 and am having a bit of an issue in the new GUI builder. It seems that when I add list items (text) to a picker in the GUI builder and save, they do not appear afterwords in the simulator.
If I go back to the GUI builder, they are still under listed items.
Does this mean the GUI build is only the face of the app, and all items must be added later in code, or am I doing something wrong?
I see the problem, it's a regression in the Picker class. It was caused because of a fix to a different problem. I fixed this in this commit https://github.com/codenameone/CodenameOne/commit/03f82ece7500d4ad57c8f30825fb401431adf798
The fix will be available next week. In the meantime as a workaround you can go into the source code of the form. You would need to expand folded code if it's folded and you would see code similar to this:
gui_Picker.setPropertyValue("Strings", new String[]{"Red", "Green", "Blue", "Yellow"});
gui_Picker.setType(4);
Just copy the setPropertyValue line and paste it in the second constructor under the initGuiBuilderComponents(resourceObjectInstance); line.
The bug is that the setType call erases the value.
Hi,
I am trying to achieve a similar screen to the one attached here using codename one. Its such that when a question is clicked, the answer drops down beneath it. The text would also have proper line breaks as it fills the screen width.
Is there any component I can use in achieving this using codename one?
I would suggest using the Tree component and setting the icons to null explicitly. This should work reasonably well for something like that and include the animation etc.
Has anyone seen an implementation or plugin for extjs where you can "pull off" or "dock" tabs/windows the way you can with a browser? Is it even possible?
Searching has not revealed much but I did come across a proposed solution in an older version:
http://www.sencha.com/forum/showthread.php?16842-Dockable-floatable-panels-in-ExtJS
#DmitryB
To clarify, in chrome if I have multiple tabs in the same window like so:
And I "drag" one of the tabs, it pops off into a new window:
I imagine you might accomplish this by moving the content of the tab panel into a window but not sure how to go about it.
In a nutshell:
- Make the tabs draggable, watch for the drag event and mark the
tab-strip as your "safe" zone
- When a tab is dragged and then "dropped" (as in, the drag event ends) you do a check:
> Is the tab within the safe area?
No: Create a new Ext.Window at the x/y of the mouse, copy the components/HTML
out of the original panel and insert them into the new window. Destroy the
original panel.
Yes: Do nothing.
Unfortunately, I am still quite jaded from learning D&D in ExtJS3, so I can't offer any help with this and real code pertaining to ExtJS 4, however the concept seems relatively straightforward to me. I would say you're going to probably want to do your best to NOT have this be flashy - unless you REALLY REALLY need to, I wouldn't worry about showing the panel's contents while you drag the tab - much less show the panel itself. Just let the tab element get dragged around the screen and copy when it's released outside of the safe zone.