Tabs mainUI = new Tabs(Component.BOTTOM);
mainUI.setUIID("Tabs");
mainUI.hideTabs();
....
How can we swipe containers using tabs vertically in CodenameOne ?
Tabs have been hardcoded for side swipe, they don't support up/down swipe due to some builtin assumptions in the Tabs e.g. reliance on a layout that arranges the underlying container one next to the other etc.
You have several options. Just use scrolling and define the snap to grid value to take up the entire screen this will effectively provide you with the ability to scroll as a swipe.
You can also use a List or just use the code from Tabs as a reference to create a vertically swipeable component.
Related
I have a vertical swiper where in one of the slides I have a box with overflowing Y content, I want the user to be able to scroll vertically within the box. But in both dektop and android mousescroll is not working. No scroll event is generating from within the box, and scroll is interpreted as swiping. I also have a multiline text field inside same slide but I am able to scroll in that, so it must be possible. How can I make it work the way I want to?
Is it possible to disable the X and Y scrolling of a GoogleMap inside a Codename One?
I'm referring to a map created using the cn1lib described here: https://www.codenameone.com/blog/new-improved-native-google-maps.html
If the map is scrollable, then I cannot insert more than one map in a Form, otherwise the contentPane scrolling and map scrolling conflict. If the maps can be not scrollable, then I can insert more maps in the same Form without scrolling issues.
I know that I can use static maps (that are images), but I need that pinch-to-zoom and pin locators action listeners work.
Thank you
To expand on Steves comment. There's no support for this in the peer component wrapping. We assume most peers are scrollable within as mixing scrolling and native peers with produce a bad experience. E.g. panning the map instead of scrolling or potential artifacts when the map and title area draw on top of each other when your page is scrolled down.
I would suggest you take a different route for this use case. Use a static image and when a user taps the map open a map in the bottom part of the screen as a dialog or as a separate form to provide the full map UX.
I have a series of panels that work with tabs. I'm using aria-controls, aria-selected, role="tablist", role="tab" on the tabs and aria-labelledby, aria-hidden and role="tabpanel" on the panels - all seems good.
However, below a certain screen width I want the same elements to be collapsible, expanded and collapsed by buttons at the top. Obviously I need to hide the tabs list, and include buttons at the top of each panel which are hidden above the breakpoint. I would use aria-controls for the buttons - but there seems to be a few overlaps / clashes between the accessibility markup for the two layouts.
Is there a right way of doing this, or is it simply the case that I should ignore accessibility markup for the "mobile" version, assuming it's irrelevant to screen readers? Are there scenarios where the accessibility markup is necessary for responsive layouts?
The correct solution is to simply show the tabs as buttons (i.e. change the styling) in the small screen layout but leave the markup exactly the same. If you want to have multiple sections expandable simultaneously, then you can use aria-multiselectable (which essentially turns tabs into accordions).
Do not ignore accessibility for mobile. Mobile is as easy to make accessible as the desktop version and is becoming the primary way that users access many web sites and applications.
I'm trying to create Custom Form configuration with scrollable TitleArea. The Form (black) has a BoxLayout.Y_AXIS Layout in BorderLayout.CENTER (blue). StatusBar (green) stays in BorderLayout.NORTH (green), when rest of the TitleArea (cyan) is in the first position in BoxLayout.
removeComponentFromForm function is unavailable for using in extended class. How can I remove components from Form to removing titleArea from BorderLayout.NORTH?
Why use the title area at all? Why not just add a component to the top of the box layout Y and style it as a Title that way you can scroll it out?
You can also use the new Toolbar API that includes many abilities to fade out the title as you scroll etc. See:
http://www.codenameone.com/blog/toolbar.html
http://www.codenameone.com/blog/cats-in-toolbars.html
I have this narrow panel which is basically a list of thumbnails, and i need to be able to scroll over them using buttons.
We have a panel (anchor layout), with containers in it, and each container contains the image.
there isn't space for a scrollbar, and anyway we don't want one.
I thought it would be as easy as in the listener for my button calling panel.getEL().scroll('b',20)
but this isn't working because the scrollHeight === ClientHeight so scroll does nothing.
Is there a technique I am missing or should this work?
So you're using a button to scroll through the images? What about having the button's listener remove/hide the containers/images at the front of the panel to allow the others to use the space?