When I click the "Tabs" component, it shows it as the whole thing around the edges (except the top part that says "Interactive Stories").
I want to know how I'd make the MultiButton go just above the menu at the bottom of the "Tabs" component. So an area with a BorderLayout and when I set it's layout constraint to "South", I want is so that it's above the menu, not underneath it. Because if I previously tried to just do that, the menu part of "Tabs" would overlap it.
I've already watched the "HOW DO I - POSITIONING COMPONENTS USING LAYOUT MANAGERS" video and that didn't explain what I want; if it did, I didn't catch it.
Here's the github repo if that'd help at all: https://github.com/gogobebe2/InteractiveStories
If you need me to clarify things, since I admit it may not be good english, please tell me. I'm determined to fix this. Thanks heaps :)
Edit: Solved! Opened the theme.res file, went to the constants tab in the theme and removed the tabsOnTopBool constant boolean. Big thanks to https://stackoverflow.com/users/756809/shai-almog
The Tabs component has a special mode that is activated in the leather theme to allow the "arrow effect" to overlay on top of the UI. It then adds padding to the bottom of the content pane to allow you to scroll more within the tab.
It uses the theme constant tabsOnTopBool=true to do that and if this is the case it uses a special form of BorderLayout:
border.setCenterBehavior(BorderLayout.CENTER_BEHAVIOR_TOTAL_BELOW);
If you check out the docs for CENTER_BEHAVIOR_TOTAL_BELOW you will see:
The center component takes up the entire screens and the sides are
automatically placed on top of it thus creating a layered effect
This is somewhat undocumented so I'm adding the documentation of this to my task list...
You are on the right track with placing it at the South in the Tab. And infact that's the best way to do it.
You can give the Story Maker container a unique styling, let's say ContainerBottomMargin2 that has 2mm bottom margin or padding. This will push the container up a bit to avoid overlapping.
You can also style your TabsContainer to have 2mm top padding.
Because North, South, East and West, all have more priority over center, the Tab buttons will always cover components at the TabbedPane if possible. As the buttons are sitting in the South and you are adding your contents to the center.
Related
I have a TextField inside a Container. The Container is in the SOUTH of a Form (BorderLayout). The Form's CENTER Contains a scrollable BoxLayout.y() Container
When the bottom TextField is tapped on Android, the keyboard is shown. Sometimes, it cuts the TextField's parent Container up to the TextField's bottom, sometimes it doesn't. When it does cut it, the Form's CENTER also gets pushed up, and the Toolbar disappears. I am trying to make sure that calling the keyboard never cuts the parent Container and that the CENTER Container doesn't get pushed up
Is there a way to guarantee that the parent Container is always shown so that it doesn't get cut?
Example of an instance when it doesn't get cut:
Example of an instance when it does get cut. Notice Toolbar is gone and CENTER Container is pushed upwards:
Generally this is really hard to tune positions for keyboard. We try to make it seamless but there are points where this is pretty difficult to control. Especially with a south placed text field which is static (not scrollable).
If you can isolate a test case that shows misbehavior here we might be able to fine tune the logic a bit.
Solution to prevent this consists in setting the Form's setFormBottomPaddingEditingMode(true);. Easy fix! 👍
I have a list and its scroll bar on the right along with two custom buttons representing upscroll and downscroll. These two buttons simulate scrolling by using list.setSelectedIndex(index, true) and are placed above and below my scrollbar via my custom layout.
I have two questions regarding this:
1). Since the upscroll and downscroll buttons are overlayed on top of the list, they disappear when i click elsewhere..and they kind of flash into appearance when i click the area it's supposed to be in. How can I remedy this behavior?
2). I have a scrollbar image that I have used in the "Scroll" theme in the GUI builder. It's alignment is IMAGE_ALIGNED_CENTER. However the scroll thumb doesn't reach the end of the bar when i scroll to the end of the list via my upscroll and downscroll buttons. The upscroll and downscroll buttons essentially scroll the list by one index with each press (using setSelectedIndex(index, true)).
Thanks
How do you overlay the buttons. I'm assuming you just set them into a specific location which disallowed as we can't possibly adapt them to the various resolutions. I suggest reading the developer guide section on layouts very carefully.
To place something on top of the list in a portable way you need to use the LayeredLayout or the LayeredPane and a Container + correct layout to position this within (e.g. BorderLayout EAST).
In this blog post there is a sample for making a scrollbar but it isn't "on top". It can be used as a starting point.
Since it's a bit difficult to explain, I did a mockup to get across as much as possible visually:
http://sassmeister.com/gist/70624a740b1ca4ae7764
(If there's a better way to share a sass gist, let me know. First time using it)
Basically, this is the layout I want for a tablet in landscape mode. What I'm trying to do is make sure it fits perfectly on different tablets with different aspect ratios. Some things are fixed. The main content area is a 16x9 video, so that aspect is locked.
I have the header and footer (main column only) fixed right now as they need to be for portrait mode, but I could bring them into the regular flow if it's helpful for tablet landscape. Anyway, it's all basic responsive right now via susy2, and the sidebar is totally separate so it can scroll independent of the main content. What I would like is for the whole main area including header and footer to fit perfectly with even margins above and below vid, but then have the sidebar column change it's width to match the tablet.
So... if the tablet is wider, the teaser thumbnails go out to 16x9 ratio. If the tablet is narrower, the main column remains unchanged, but the teaser thumbs narrow down to squares.
If it's easier first to just figure out how to responsively shrink the right column only, so the aspect of thumbs is unchanged, that's ok. I just don't want the overall layout to get screwed up on one device vs another because of aspect ratio, so main focus is that the header hits top, footer hits bottom, main vid fits perfectly between them, then sidebar responds to fill in the rest (within reason).
thx for any input. First time making a website here, so lots to learn.
ps. I had vertical scroll enabled for the right column, but disabled it (by adding extra letter to to the scrolling class in scss column) since it's not actually letting me scroll. Not sure if that's because there's no actual content, or it doesn't recognize the empty padded cells as something worthy of scrolling.
You're biting off a lot for your first website, but Sassmeister is a great way to show what you are doing. I approve. :)
One of the problems you'll find is that CSS don't have the concept of aspect ratio built in, so the sort of layout you are attempting is non-trivial. CSS is best at handling widths, and letting everything overflow vertically. It takes some effort to make it handle height well.
If you can get away with it (depending on browser support), your best option is to use flexbox. Flexbox should make this much easier, but doesn't ave a lot of support yet. You could consider table-cells, which have more support, but can be harder to control.
In any case, you should ignore most of Susy for this — at least in laying out the large sections. If you want Susy to help you with grid calculations, ditch the mixins and just use the span() and gutter() functions to help you set widths. Something like this:
.flexbox {
flex: 1;
flex-basis: span(3);
}
.tables {
display: table-cell;
width: span(3);
}
// NOT THIS
.no {
#include span(3);
}
You can go back to using Susy mixins for simpler bits, like the items in the top navigation.
I am 2 days in experimenting with Codename One and Mobile development in general and tested out some basic navigation and features so far. Now I want to work on the look and feel of the app.
I looked at the 9-border vid which was helpful, but not sure of the best way to add an image for the touchCommand that takes 3 tabs on that bar ( Example: home, profile, settings.. Similar to how instagram's TouchCommand is at the bottom of the app).
If I add the image, it does not line up with my Commands.
What is the best way to approach this to ensure the "TouchCommand" image appears as one, but is broken up to 3 parts for each individual commands when pressed, home, profile and settings? I might be asking this all wrong, forgive me as this is all new to me.
Thanks.
EDIT:
This is what was done.
In Theme -> Constants added commandBehavior= bar . This gives the default bar at the bottom. Created in photoshop a new bar 300x80 and added it to the TouchCommand. (See ScreenShot 1). Took this bar and broke it up in photoshop into 3 different buttons for the tab press etc. In GUI Builder, added Home, Profile, Settings in the commands. Added the image to Press Icon for Home and it didnt line up (screenshot 2). Very Frustrating to design layouts. I am hoping there is a much better technique as I am still experimenting with Codename one?
What is unclear to me, is I cant find any documentation on how to approach this and what the dimensions of each image should be as it seems that codename one has issue aligning them. I am assuming the steps would be to create the background image and add the icons as interactive layers for the user. I really care for the image being pressed and changes color like the instagram example. I dont see a way to do this in codename one GUI builder and themes.
EDIT:
Okay, I have decided to use tabs instead of the bar at the bottom. If I add my image to it, I get the results (screeshot 3). Is this the right method to use to accompolish what I want? If so, I dont see a way yet to alter this to become what I want :( .
Plus adding the background, shows one size in the display and looks different in the simulator. (screeshot4)
Answered Here: How do you get ActionBar from SocialBoo theme to show up in your GUI?
Tabs are customized individually so the border should apply for an individual tab to create the background. The foreground element is the icon which you define in the Tabs component itself thru the icons property which allows you to define 3 icons for the 3 tabs (assuming you use the GUI builder). If you add the tabs via addTab in the code you can specify an icon there.
I really like a certain Silverlight feature that I've seen in a couple of sites. I would like to know what this "concept(s)" is/are so I can do more research and implemented it on my own. If you see the attached image, I like those expandable sections, reference (1) and (2) sections. They are circled in red and the features that I like are green and expandable.
For a live demo: http://demos.telerik.com/silverlight/#DataPager/FirstLook
Thanks for any advice.
Judging by the screenshot, it's just a collapsible pane. Such a control would have an API allowing two pieces of child content to be supplied, an orientation to be set (horizontal/vertical), and perhaps a collapse direction (left/right or up/down).
The control's template would place each piece of content alongside the other with a separator in between. Clicking the separator would collapse one piece of content in the chosen direction, thus giving the other piece of content more room.