Is it possible to virtualize both horizontally and vertically?
All examples show one or the other.
Imagine a large grid like structure:
n amount of rows
and as many columns as there are hours in one month
At any one point only 4 rows maybe on screen showing only 2 columns (2 hours). Virtualization one way doesn't make sense. This is an up down / left to right scrollable grid.
I ask because I can't for life of me find any examples online? Also I can't find anyone else who has had the same query. Maybe the design in general is wrong or I don't quite know what I'm searching for.
I did think the design maybe wrong i.e. is there a better alternative but I don't think so. This planner-like-grid is required! The only other consideration I had was to dyanmically build pivot pages but this seems messy and won't have the same feel.
Can anyone begin to advise were I might look?
Whether right or wrong, the direction I'm going in is the following. I wanted to post one answer for any one stumbling across the question.
Using a grid, I'm creating a 2 x 2 grid. Top right, bottom left and bottom right will all contain scroll viewers. The scroll viewer in the bottom right when scrolled will dyanmically change the scroll position of the bottom left scroll viewer and top right scroll viewer. Similar scroll top right will dyanmically scroll bottom right, and bottom left will scroll bottom right.
Obviously a lot of scroll viewer bindings but this is one solution which will work in order to give me the planner functionality and layout.
In terms of the virtualization I am dyanmically going to queue controls in order to keep the performance decent, reusing controls where required.
Related
I'm a CS scrub and I thought I understood everything until now. I'm being prompted to make anything I want, so I'm choosing to make a little game I've been thinking about for a few months. The problem is that I don't know where to start. We've been using JavaFX and we've done some animation but I don't fully understand everything. I don't really understand mouse events but the idea I have depends on them. Anyway, here's the idea:
The main (2D) game is about reducing fractions.
Imagine the window being split horizontally into top and bottom.
Now, imagine boxes spawning out of view and moving into view toward the horizontal center line. The boxes will only be moving vertically and each box has a random integer. When a box gets to the center, it'll stay there and allow for other boxes to land on top of it (or below it if it came from the bottom).
Boxes are eliminated by "reducing" a number in the numerator with a number in the denominator. Several boxes may be selected on one side before reducing them with the other side. Here's a picture that might help convey what I want to do:
Crude Three Frames of the Gameplay Drawn In Paint
Hopefully that all makes sense.
I've been trying to use an extension of Rectangle but I don't really know what else to do. I figure I'll need to create some ArrayLists to keep track of the boxes and some other lists to keep track of factors as well. Anyway, any help would be fantastic. Thank you guys very much!
My app needs to show several buttons, without overlap, and preferably without scrolling or zooming. They must be big enough to poke with a finger and read the text. Button width depends on its text length, and the height is constant. The screen size is known.
Each button represents a food about which I know some nutritional information. I'll calculate a protein:carb ratio and a fat content, both ranging from 0% to 100%.
I want to put the buttons close to a position that reflects their nutritional content: e.g. protein-rich at the top, carby at the bottom, fatty on the right and lean on the left. So cake would be bottom right and meats would be somewhere on the top edge.
Often, there'll be overlap and I'll have to nudge them away from each other.
The puzzle is to invent an algorithm for that nudging. The desiderata in order of priority are:
1) Readable and pokeable size, no overlap.
2) No scrolling or zooming required, although it'll happen when there are so many buttons that they could never fit on the screen even if we didn't care where they were.
3) Buttons should be close to where the user would look based on knowing the nutritional content of the food.
Incidentally, I'm using JS on a smartphone, not prolog or the like.
(There are some seeming dupes, but no solutions. One is about diagonal stalks, another just advocates throwing it at a game engine, but most are devoid of answers.)
Ther MArVL group at Monash University does work on constraint-based layout work. Some of their software might be applicable to your problem.
The problem
Today's modern websites may use infinite scrolling technique to replace paged lists to make a more seamless experience to their users.
This is all nice and dandy as long as users don't scroll to far down which means that your document becomes very complex with huge amounts of DOM nodes. There are of course ways to mitigate this problem (i.e. replacing over-top overflowed scrolled elements with a single DIV of appropriate height for example), but they're either complex to implement and they still have their flaws.
The idea
I was thinking if anyone has already seen an implementation where items, that get scrolled out (top or bottom) somehow become smaller and fainter until they disappear and get replaced by its adjacent item.
I'm thinking of a mix of experience of:
scrolling
fading
scaling
Fading and scaling can be seen on Medium.com when you get to the bottom of any article and you click the next recommended one displayed below (click the title). When you do click and if you pay attention you can see the effect of original article disappearing while being replaced by an up-sliding new article.
Content scrolling could be done in this way and infinite scrolling would be much smoother and less resource consuming as elements would get replaced on the fly and in-place.
Number of simultaneously displayed items of course depends on items' size. In case of Medium-line articles it would likely be one article that would also scroll until you'd scroll it to the very bottom (or top). In case of posts like Facebook, it would be many more items simultaneously as they don't take as much vertical space.
Coverflow works in somewhat similar way as it displays middle content completely and rest is either hidden or scaled/transformed.
The question
Has anybody seen such an implementation on the web? If done properly it would actually make a much nicer infinite scrolling experience without hogging our browsers.
But to make my question more clear and non-debatable. Can you provide a working (albeit simplified) example of such experience?
Requirements:
when an item gets scrolled out it disappears (using fade/scale/both)
when items appear at the bottom (or top when scrolled up) they should display in the opposite to scrolled out items
pressing usual scrolling buttons Home, End, Page Up, Page Down and Space should work.
invisible items should be removed from DOM
scrolling should somehow be available using some sort of scrollbar as well
I think I might have found what you were looking for.
http://engineering.linkedin.com/linkedin-ipad-5-techniques-smooth-infinite-scrolling-html5
Is there a standard Aqua way to handle a practically infinite document?
For example, imagine a level editor for a tile-based game. The level has no preset size (though it's technically limited by NSInteger's size); tiles can be placed anywhere on the grid. Is there a standard interface for scrolling through such a document?
I can't simply limit the scrolling to areas that already have tiles, because the user needs to be able to add tiles outside that boundary. Arbitrarily creating a level size, even if it's easily changeable by the user, doesn't seem ideal either.
Has anyone seen an application that deals with this problem?
One option is to essentially dynamically expand the area as the user scrolls through it - any time the user scrolls within X units of an edge, add another unit in that direction. Essentially, you'll never be able to scroll "all the way" to an edge, because the closer you get the farther it will expand.
If the user scrolls back away from the edge, contract it to back to no more than X units beyond where there is actually content.
Have you seen what Microsoft Excel does for this problem? It has to represent an unbounded space with scrollbars, as well.
One solution is to define a reasonable space for the original level size, and when the user scrolls to one tile away from its bounds, add another row or column of tiles, and adjust the scrollbar accordingly. This way, the user never reaches the actual bounds.
If the user decides to cut down on the level size, you could also add code that shrinks the "reasonable space" once an unused row consists only of empty tiles. This saves the user from being stuck with a huge level that they scrolled through, with no way to shrink it.
Edit: Same as Dav's answer. :)
I have this dilemma about designing/programming border or gap widths in an application of mine. I'm using Swing but this is sort of implementation-agnostic. I have a splitter pane (JXMultiSplitPane) dividing two subpanes, shown below outlined in black; the black border will be gone in the real application and is just here for debugging.
You'll note that there's a gap between the two subpanes. That's the splitter, and it needs to be wide enough to grap onto. You'll also notice the gap between each table and the black border. That's supposed to be there to add some reasonable space... except that if I remove the black borders, I now have a space between the two tables that looks 3x as wide as it should be.
My instinct is to get rid of the gap on the right side of the left-hand table, and the gap on the left side of the right hand table, so that the only gap is the splitter itself. Is this the right way to handle it? The only hesitation I have is that I may be giving the user the option to stack these vertically, so the actual border spacing of the left hand table needs to change (spacing adjacent to the splitter should be set to 0) and that seems weird....
Another option would be to make the splitter visually distinct from the "normal" background, perhaps by giving it a raised look.
Of course gap between those two panels needs to be only splitter and nothing else. There is no other way.
alt text http://img15.imageshack.us/img15/2250/myapp.png
It actually looks alright to me. Wait and see if you decide on the vertical stacking and see how it looks then?