I am developing a UI container to hold UI components that can be dragged and dropped on to the container and also move components around within the container. The components are of various sizes. I'm doing this in flex/actionscript but I guess this problem applies to any user interface. Are there any resources (books, etc) that have layout algorithms. Any pointers on this will be a great help.
The user can drag/drop items. But the items should rearrange themselves so that there is no overlap. E.g. if a there are two items right next to each other and the user drops a third item on top of them (in the middle) the first two items should move aside to make room for the third item. (Similar to examples.adobe.com/flex3/devnet/dashboard/main.html except the item size vary).
The source code for the dashboard layout works with the assumptions all the components are the same dimensions. What I'm looking for is a way to layout components of different sizes.
Thanks
We've done some work like this in the past for a customer. What you need is an implementation of collision detection algorithm. See this http://code.google.com/p/collisiondetectionkit/
Also here is an article on code project that has some layout utilities in C# that implements this which you could probably port : http://www.codeproject.com/Articles/23871/WPF-Diagram-Designer-Part-3. Also
Related
From the MDL website:
Layout: "The MDL Layout component is a comprehensive approach to page layout that uses MDL development tenets, allows for efficient use of MDL components, and automatically adapts to different browsers, screen sizes, and devices."
Further ahead -
"Use of MDL layout principles simplifies the creation of scalable pages by providing reusable components and encourages consistency across environments by establishing recognisable visual elements, adhering to logical structural grids, and maintaining appropriate spacing across multiple platforms and screen sizes."
Grid: "The MDL Grid component is a simplified method for laying out content for multiple screen sizes."
So, from the above definition of Layout, it would seem that grid behaviour is included. Not able to understand how.
I could not find any examples that use an MDL Grid and Layout together.
So, are they somehow mutually exclusive? How are the two related? What are the best practices for using each, either together or one over the other?
Please help me understand. Thanks.
MDL Layout is the container that holds different components that are enclosed between the mdl-layout class and it's essentially the structure of the project. Imagine it as outer walls to a building.
MDL Grid is a 12 column grid system where you can specifically choose where to layout certain components on the page. These are enclosed in the mdl-grid, mdl-cell, mdl-cell--#-col classes. Imagine this as the furniture inside a building and deciding where to put it.
How they differ is that MDL Layout isn't really a layout tool so you can specify where a component goes. What it is is it provides you building blocks that you can implement to your project such as a nav bar, a drawer, footer, etc. What it means when it says:
"The MDL Layout component is a comprehensive approach to page layout
that uses MDL development tenets, allows for efficient use of MDL
components, and automatically adapts to different browsers, screen
sizes, and devices."
is that when viewing on different sized screens, it will adjust some components automatically without the hassle of creating media queries for different devices. An example would be the drawer will be hidden on a phone while the desktop would show it (if specified). Or only the desktop will have a nav/header bar while the phone won't. Or even the nav/header bar will be fixed on desktop/phone while the others will scroll with the screen.
MDL Grid, however, is a way to layout your other content on the page. You want to make two things side by side on the desktop and collapse when viewing it on a phone? MDL Grid does that. Want to show three photos side by side on the desktop and then collapse to show it on different rows when looking at it on a phone? MDL Grid does that. MDL Grid doesn't provide the prebuilt components. It's just merely a tool for specifying where to lay stuff out on the page. To find more information, look for the 12 grid system. It should shed some light on it.
The blog template provided on the getmdl.io page has both of them being used in conjuction with each together: http://www.getmdl.io/templates/blog/index.html
MDL Layout will dynamically shift what you create based upon the display width of your screen.
MDL Grid is allowing you to define what will be visible at all times by setting number of columns for different screen sizes.
Example, lets say you make a page that just displays
(1, 2, 3, 4)
Under MDL-Layout if the viewing device shrinks it might change this page to display as
(1, 2,
3, 4)
Under MDL-Grid if you went and wrote mdl-cell--4-col-phone with each number in its own column, no matter how small the view area became (1, 2, 3, 4) would always display inline even if its width became reduced to the point where it was unreadable as you've defined the viewing behaviour at that screen size.
Therefore, they are mutually exclusive as you're either allowing the MDL-layout component to decide what displays at different view widths or setting it yourself with MDL-Grid. That said, I wouldn't be surprised if they acted very similarly for class'
Disclaimer, I've never used MDL-Lite but have used angular-material and have been eyeing it for future projects.
So everyone loves this new Layout semantics in storyboard, it's dynamic in a way it adapts at runtime when we're inside a UINavigationController for example.
Now what about inputViews? I know inputViews are NOT part of my view, but wouldn't it make sense to affect the bottom layout guide of the containing view when a keyboard is displayed?
I mean, I've seen several coding solutions to this issue, but only one affectively takes advantage of the bottom layout guide (the others are deprecated or plain simple wrong approaches), but even that one sounds hard-wacky-coding and naturally it doesn't animate.
Is there a way to tell the view to adjust the bottom layout guide for input views automatically? I mean in storyboard? or do we need to do this sucky code let every time we use a keyboard in our application?
If the Keyboard appearing animated:YES would affect the bottom layout guide in it's progress we'd have yet another apple-is-so-cool-they-make-all-the-hard-work-for-us-while-enforcing-their-user-interface-guidelines....aff that was long :)
I'm developing a application which has a ListView which contains items which needs complex cell layouts. The cells are in variable heights and some of the cells tends to be larger than the view port height.
But when the ListView is filled with items the scroll thumb tends to resize its self while scrolling, which makes it hard to hold onto the thumb while scrolling. This happens mainly when passing through different size of cells.
This is not a problem in Swing if I create a same kind of a cell render to be used with the JList. This problem is there in JavaFX 2 and JavaFX8 both.
When looking at the VirtualFlow which is responsible for layout of the ListView and handle scrolling, it seems that the scrollbar thumb side (lenghtbar) is calculated based on the cell count and the visible cell count, which is actually a problem when it comes to lists which has variable heights of cells.
So is this the future of the scroll bar behavior for Java FX list views? or is there any solution available for this problem? Or should I try to hide the scrollbar and provide a different user interaction to scroll?
This problem is already reported under https://javafx-jira.kenai.com/browse/RT-25059 and fixed in Java8 upto some extend. So if this fix is needed on JavaFx2 we have to backport the changes under commit http://hg.openjdk.java.net/openjfx/8/controls/rt/rev/81cc13fe6f96
To get this changes in JavaFX 2.2 you need to apply the required changes on to FX2.2 VirtualFlow.java class and load those changes before the jfxrt.jar is loaded. Another approach is if you don't like to mess up with the jfxrt classes is to have you own ListView which uses your own Skin and the patched VirtualFlow version may be with a different name. But this might require lot of customization compared to first solution.
More approaches are welcome :).
As monitor resolutions go up we are left with more and more of horizontal space (width) and less vertical space (most monitory nowadays are 16:9 or 16:10, some even 21:9). As such we require the ability to make long texts more suited for greater width. Newspaper like columns are a growing trend.
How to support those in CMS? I currently have an implementation where text is being put inside s and those divs are then decorated with certain classes for instance the Blueprint CSS system ones (span-5, span-8, etc.)
This works but doesn't offer great user experience. Most RTEs can't display those or required that site CSS is linked in. This brings in all other classes and CSS settings which is not optimal.
I've also implemented the option for the user to create a TEXT content item, which typically holds only one piece of text (one column for instance) and user can add those dynamically to the page (just like adding/removing widgets). The problem with this solution is that almost every paragraph becomes its own text content item the result being that the number of those texts grows and becomes unmanagable.
Please post your options as answers. I am actually looking for quite a comprehensive and innovative way of doing this because neither of the CMSs I tried had this solved (DotNetNuke, BlogEngine.net, Ruby's Refinery CMS, ...)
You have some options available to you without resorting to server-side implementations. Some browsers support a CSS3 directive to provide multiple columns.
#div {
column-count: 2;
}
Properties available via CSS are:
‘column-count’, to determine the number of columns into which the content of the element will flow.
‘column-width’, to describe the optimal width of each column.
‘column-gap’, to set the padding between columns.
‘column-rule’, to define a border between columns.
That's the easiest approach, but does not guarantee the same experience everywhere. There are also JavaScript solutions which can create columns based on text.
Here as an example of one: http://www.csscripting.com/css-multi-column/
So, my recommendation would be for a progressive enhancement approach. Use CSS3 options if availble, JavaScript if not, and fall back to a single wide column otherwise.
More information: http://www.alistapart.com/articles/css3multicolumn
This is definitely something that DotNetNuke can handle, especially with the changes coming in DNN 6.1. The changes are targeted a mobile devices, but that doesn't mean that you can't simply use that functionality to provide different views of content based on the width of the screen available.
I'm developing a presentation tool for AIR (to be used together with, or as a replacement to, PowerPoint) but I'm quite a newcomer to flex layouting.
As you can see from the image, the presenter can open various apps from the main window.
Each of these apps open up in new windows which have different visual characteristics; some use the main content area to show graphics, others bullet points. Most app windows have buttons and view stacks with embedded Flash assets (using s:SpriteVisualElement).
My questions are the following:
1a. When developing a PowerPoint-like presentation tool with Flex, which layout type (basic, vertical etc.) will provide most flexibility?
1b. How do I make sure no clipping occurs on various projector screens - which aspect ratio should I have in mind?
2a. How can I resize children sprites in the SpriteVisualElement container proportionally to the window resolution?
2b. And where do I place this resize logic - on each component (sprite) with resizeHandlers or in one resizeHandler / window?
Please use the comment thread if you want me to elaborate further. Thanks.
Since you're new to Flex, I strongly reading up on the Flex Component LifeCycle.
1a. When developing a PowerPoint-like presentation tool with
Flex, which layout type (basic,
vertical etc.) will provide most
flexibility?
The layout you choose will depend on what you want to display. I don't see layouts as "Flexible". They do their job and position their elements appropriately. I can easily envision using all types of layouts in such a complicated application, each for different purposes.
1b. How do I make sure no clipping occurs on various projector screens -
which aspect ratio should I have in
mind?
I'm not quite sure I understand what this question means, but I take it to mean you want to avoid the presence of scroll bars in your app. To do that, you'll have to develop layout code that sizes and positions your children so that they do not extend past the height and width of your available content space. In Flex 3 (Halo) architecture, this would be done by writing an updateDisplayList() method for your component. In the Flex 4 (Spark) architecture, this would probably be done by writing an updateDisplayList() method for your skin class.
2a. How can I resize children sprites in the SpriteVisualElement
container proportionally to the window
resolution?
I believe my above answer already addresses this.
2b. And where do I place this resize logic - on each component
(sprite) with resizeHandlers or in one
resizeHandler / window?
In a resize handler, I would most likely use invalidateSkinState and/or invalidateDisplayList. The resizing code would be in the skin and/or updateDisplayList.