SpringBoot 2 Vaadin 12.0.3
I've spent some time watching video tutorials and studying online examples of Vaadin. Unfortunately, so much has changed that options that I was hoping to try are no longer there.
CssLayout is no longer there - replaced by Div which does not expose expand(Component).
component.setWidth("300") has no effect.
component.setWidth("300", UNIT.*) does not work because UNIT is not in class path.
component.setWidth("300px") works but it's far from elegant and setting explicit width on a component which displays text is far from ideal.
I have three pseudo horizontal menu items. On a large screen, they'd be truly horizontal. On smaller screen, I'd like them to go into vertical mode.
Combo Box should expand to the width of the longest label.
Text Box should expand to available real estate. (Available width - Combo Box width - Search Button width)
Search Button should expand to the width of the Icon and Label without any wrapping.
Is this possible to achieve using Vaadin 12 Layout/Component contract or do I have to spend time defining such control in CSS file?
Your question implies that there would have been a trivial way of achieving your use case with the built-in layouts in Vaadin 7 or Vaadin 8 without using CSS. What you're describing about automatically switching between horizontal and vertical modes depending on the screen size sounds like something that would require some degree of responsive layouting, which typically implies directly using CSS.
What you could have done in older versions is to have Java logic that either uses a VerticalLayout or a HorizontalLayout depending on the situation. Those two classes are still available for the same kind of use cases. The APIs have changed to better align with the underlying flexbox functionality, but the overall functionality is still the same.
You could also look in to FormLayout (part of the core framework) or the Board layout (separate add-on) which both provide some responsive functionality. They are, however, originally intended for slightly different use cases (forms and dashboards respectively), so it might be slightly challenging to make them fit your exact requirements.
Related
I've been struggling with this issue for a while and hours of research and experimentation didn't produce any acceptable results.
I have a login screen that contains a lot of UI elements. The view looks great on iphone 7 and 6 variations but when I test it on SE or 4S the constraints fail to position the elements so they fit nicely on their tiny screen. Simply there is not enough room. I read that I must support all screen sizes but at this point I am not sure how can I get all the ui elements to fit in the smaller screens.
I watched hours of youtube videos and tried all possible ways including a vertical stack view but no matter what I try, it either looks good on 7 and 6 but terrible on SE/4S or vice versa (good on SE/4S but way too much white space on 7/6).
At this point I am not sure what else I can do. I know it is not possible to design a UI just for a specific screen size and vary for traits is not what I need because I only intend to support vertical orientation.
Any help or suggestion will be greatly appreciated.
As you have said in your own comment, you can restrict the device sizes indirectly by restricting the iOS version. However that is not a good solution: If you are creating the app for commercial reasons that will unnecessarily restrict your market (there are a lot of 4S users out there); If you are learning app development, now is a good time to work out how to manage GUI layout problems properly (there will always be a wide range of display sizes to cope with).
There are several tools available to assist:
Auto Layout
As others have said in comments, Auto Layout can help a lot. Don't just use it to position things though, but also to resize them to make best use of the available space.
Understanding Auto Layout (Apple)
Size Classes
Size Classes allow you to use different constraints and turn on or off controls depending on the general size and orientation of your user's device. For example, where space is restricted you could hide individual controls and instead display a single control to take the user to them elsewhere (another view or a popover for example).
Size-Class-Specific Layout (Apple)
Scroll Views
You can make part or all of your GUI a scroll view that on larger devices will show all the controls whilst on smaller devices initially show just the top ones but still give your users access to the others (don't forget to flash the scroll bars when the view first appears to show them that there is more to see though).
Separate Storyboards
Although you have not mentioned iPad support, you can also specify completely separate storyboards to help layout universal apps.
See this SO answer and it's linked reference for details.
We are developing an iOS app using Swift.
We have a tableView where each TableCell is expandable.
It currently looks like this. (Ignore the abbreviation of the time label, this is not intended)
When executed on a tablet the labels from the expanded sub cell should be moved to the parent cell, depending on how much space is available.
It would not be a problem if we have to make a separate scene for tablets and phones.
It would be beautiful, if we could change the display of those scenes directly in the interface builder, depending on which device is selected on the bottom bar.
What is the best (cleanest) way to achieve that?
Thanks in advance.
What you need sounds like the "vary for traits" option in Xcode 8, it allows you to have different configurations of the same view depending on the device(actually based on Width and Height settings) but it narrow down to device as you use it, if you click the vary for traits button in Xcode you will see the various options for W and H and you can see in real time how the devices changes depending on your selection. Just be a little bit careful about one thing, when you introduce a new setting you use the vary for traits button but after that you access it from the right hand side picker as normal.
You will see in Xcode 8 that some attributes have a small + sign next to them, that is where you will find your different traits after you have introduced them, it takes some getting used to but is very powerful once you get your head around it. It is also the recommended way to make adaptive applications in iOS
I am an Android developer trying to learn Dart-Polymer(I am also fairly new to HTML dev). I tried the custom card example in the polymer tutorial, and as an extension I want to display multiple cards in a rectangular grid. I see there are horizontal and vertical layouts in Polymer, and I was wondering if Polymer has something like GridView in Android. Can someone suggest how to proceed ?
The grid on left is what I want to achieve :
The core-card is on the right. I can see that element in the designer (please see the panel in right under core). But I am unable to find the core-card in Polymer libraries. That's why I am going with custom card (from the tutorial mentioned above). I would like to use core-card if available.
After posting this question, I found out about core-layout-grid - I am not sure how to use it, and if that's what I need.
Polymer has excellent handling to ease the use of CSS FlexBox. Using the various layout,horizontal,vertical, wrap, and flex attributes it is very easy to make very flexible and responsive layouts, including grids.
You can read more about the Layout attributes and their uses, including various alignment attributes from the Polymer Layout Attributes page. In particular look at the Wrapping section as it helps to create responsive grids that will appropriately adjust based on the width of the display.
I need your suggestions how to organize and make a nice, graphical user interface.
Now I have something like this:
There is a tree view (it takes a big space...) as a menu with assigned frames to each item. All frames have control buttons (a tool bar) and something from this list: list views, string grids, progress bars, memos, rich edits, web browser, color pickers, list boxes, labels, edits etc.
I don't have enough experience to create a good, easy and graphical UI, and I do not have any ideas what to make.
The most hard thing for me is I need to create a nice SDI, but the present UI is similar to a MDI (frames with lots controls are instead of windows).
So I'm trying to copy an UI from other soft: http://www.addictivetips.com/windows-tips/150-best-windows-applications-of-year-2010-editors-pick/ + SCREEN SHOTS. But I cannot find something appropriate for me :(
Added:
I have an idea to use a glass effect (a "menu" instead of a tree view on the left), but it looks complicatedly: buttons on a glass and buttons below (a tool bar).
Another version:
Please, advice me what to do or give me a direction. Thanks!
Consider that most monitors are now 16/10 or 16/9, i.e. not in 4/3 aspect ratio any more.
Therefore, it's not a loss of space to put a tree on the left, or even the commands toolbar on the left side instead of the top of the window. Your first screenshot was not the worse, in this aspect. I just write a log viewer with this design: the log events has the full application height.
Office 2007/2010 ribbon for instance is nice looking, but takes too much vertical space IMHO on daily use. Some users (among me) are frustrated by this ribbon. For instance, I don't find it very usable in a notebook. Greatest user interfaces gives full space to content, not commands. Chrome is a good example of this. And mobile applications tend to maximize the available space use.
Just my 2 cents.
Personally speaking, about your first screen shot, the toolbar buttons are too big. They are much too strong a presence, even at second glance.
I would reduce their size. Or, when this program targets children or touching devices, the other controls and font sizes should be enlarged.
You are trying to create a tabbed application, So I'd suggest using some sort of tab-control.
Even the Delphi default one allows you to add pictures to the tabs.
Something like this:
A few considerations:
How often is the app used?
If the app will be used very daily by your users, try to maximize usable space, i.e. make the controls as small as need be.
If the app is used rarely by your users, make the controls big and bright, label every button so things are clear, and time figuring out where is what is minimized, this also means using familiar user interface elements.
Are you targeting elephants or mice?
If you audience is computer savvy (mice), you can get away with more experiments and bling; if you are dealing with perpetual beginners you will need to stick to basic stuff.
Remember, the user interface is a contract
Make sure the controls behave as advertised. If something looks like a button make it behave like a button. Don't disguise a menu to look like a listbox/treeview.
A menu does an action (it's a hidden button), a listbox selects one item that can be acted upon.
My opinion
I dislike your initial screenshot because it tries to force a tabsheet/pagecontrol into the format of a treeview, whilst naming the items menus. This makes for a clumsy interface.
I've never seen a menu be used to switch between views, and the treeview makes for a mighty small target to hid. On top of that it allows for multiple nesting.
The tree is a concept that every programmer understands, but very few people outside that group grok, IMHO, don't use a tree in your application! and avoid the treeview.
It's a poor control to work with because:
It allows nesting > 2 a NONO in my book;
It is too small to hit with a mouse, even worse with a touchpad;
What's up with the [>] sign in front, why would I want to collapse a tree with just 1 level of nesting and when I do and the [+] is visible in front of "main menu" where on earth have my submenu items gone?
I love your last version, but
It needs text labels for every button;
Make the vertical pagecontrol, look like some sort of tabbed sheet, this will make your intent instantly clear;
I would love to see a statusbar;
Glass may look cool, but having the junk from screens below shine through your app sure makes everything look busy, not a good thing if you're trying to focus on this particular app;
Make sure to put splitters between all panels, and make sure to visually highlight the splitter by setting beveled:= true and width/height:= 5 so you can actually hit that splitter
The info panel has its own caption, a huge waste of space. It's bad enough that every window has a title bar that does almost nothing, don't multiply non-interactive space.
Finally
Do as David says and buy a copy of about face, it's the best book on UI design I've seen by far. http://www.cooper.com/#about:books
First picture is the best version for standard desktops with mouse.
Third picture will be good for tablets with their touch screens. But it needs some improvements. Currently I can't see on which page I am now, even more: there are no signs that those buttons actually switch pages. I think, you need some sort of tabcontrol here.
For accessibility purposes, I need to make the scrollbars for all scrollable controls (lists, list views) wider and the scrollbar arrows bigger.
How to get the scrollbars (handles) from a scrollable control (ex: TListView) ?
How to make the scrollbar and the arrows wider/bigger ?
10x for any hints and code...
Accessibility is something that does not concern a single application, but the whole system. That's why there is no API defined to adjust things like border widths, scrollbar size and similar properties of the native controls only for your program. You can however adjust these settings globally in Windows, either by using the Accessibility Wizard, or by adjusting fonts, colours, border sizes and scrollbar sizes in the Display Properties applet.
For more information you should check out the Microsoft Accessibility page and follow the various links.
Edit: Changing the global settings (as the accepted answer suggests) for the benefit of your own program is rude in the extreme. Please keep in mind that this interferes with all other running programs. It is maybe excusable for a system with a touch screen, where controls need to be large to be usable at all - but on such a system the control sizes would probably already be set correctly.
I'm not sure that you can - You have to change it (and restore back) for whole Windows.
http://www.greatis.com/delphicb/tips/lib/system-captionfont.html
Setting and reading property TNonClientMetrics.iScrollWidth
Edit: I know that this solution is rude, but in common cases is the best that you CAN do. If you have specialized TabletPC application then you usually use only that application at one time, not others. But - almost all Windows applications are not designed to work with so big scroolbars. So when you need to use OS dialogs and other applications then you have to switch it back.
There is no better solution than "while is my touchscreen application running set Window scroolbars big, then return it back". We have exactly this application in real world so I know what I'm talking about.
Of course you can write your own grid control (if you have so much time) or use some thirdparty controls (if you have money and time), but that was not question.