I really like the idea of StickyHeaders (https://www.codenameone.com/blog/sticky-headers.html), they're great for usability, but the CN1 implementation was never fully developed or included in CN1. Solutions exist for iOS and Android (https://github.com/emilsjolander/StickyListHeaders and http://applidium.github.io/HeaderListView/).
The two main features I'm missing in the old implementation are: that each header visually 'pushes' the previous out of the top of the screen (and vice-versa when scrolling down), and that the stickyheader which is 'stuck' at the top of the screen is the actual stickyheader itself, so that eg. buttons inside it will work.
Are there any plans to add this to CN1 sometime soon? Or anyone who has implemented a similar solution (I tried Chibuike Mba's alternative implementation mentioned on the original blog post but it doesn't cover the features I'd like)?
Alternatively, any pointers to how I might implement this myself?
I've already tried a couple of times, but given up since I don't master the details of CN1 graphics etc well enough. The approach mentioned here How to make sticky section headers (like iOS) in Android? sounds like a good approach (add a container on top for the stickyheader, scroll that container when the next stickyheader arrives), but then how to force the size and scrolling of such a container?)
This should be much simpler to implement today as we have two helpful features:
Scroll listener
Layered pane
You can use the scroll listener to detect the location of a header and appropriately place another component in the NORTH of a Container within the layered pane. Then as scrolling happens and you detect a new header is coming in you can just place it in an X/Y position below the existing component and use animateLayout to push it out.
Related
Examples I have found show OPEN/PIN and CLOSE (a la side-nav/menu) but nothing that includes a hover or a floating state. Think JIRA side menu, where the left panel overlaps the page contents/backlog table, where youhover and look where you are and then it closes on you....that comes the closest to an example to what I'm looking for.
Example of Jira panel
Only, I'd like to have a 3-click + hover system:
1-click to pin (ie: have page contents responsive 'stick' to the panel)
1-click to float (ie: have page contents scroll behind the floating open panel)
1 click to close.
I'd also like the ability to hover over the closed panel and have it open.
I know I'm asking a lot....
If you find an example, I need to be able to see a working example of react libraries without a dev computer - I'm on a mac. We're building a component library together and I need to see what's out there and available as a source (starting point) so that we can then discuss tweaks and changes for our use.
I love sites like this: https://www.ag-grid.com/react-data-grid/
or this: https://reactjsexample.com/
That provide me with a menu and examples to click though so that I can speak intelligently with my team and have proper visuals and examples.
Anything you find that has this functionality would be great... thank you!
Marlene
In searching around, I have not been able to find information about generic support in Codename One for gestures generally, and swipe in particular.
I see I can easily set up swipe on a form to return to a prior form, and there is a way to create swipeable containers that work a specific way to rework the display of that container, but what if I just generally want to capture a swipe event - ideally on a container but if not that then on a form - and then take some specific action when that event occurs?
We don't support a high level gesture API. Most of those are inconsistent across platforms and pretty hard to work with so we never built one.
APIs such as tabs include the ability to swipe between containers, and image viewer allows swiping images. Those come up to about 90% of the use cases for swiping.
In other cases people just use a drag motion listener to detect the right level of drag and determine a swipe/pull.
Notice that drag and drop isn't swipe and we do support that with a special API.
I created a PeerComponent, that is a port in Codename One of the Horizon Camera SDKs. At the moment, it simply shows a live-preview of the camera.
I tried to add a Label over the PeerComponent: the Label is on top only in Android. On iOS, the Label is on bottom (that means invisible).
I've done a lot of trials to get a correct z-ording on iOS, without success.
My question is which tips, suggestions or checks can I do to make z-ordering working properly on iOS also. Thanks.
Normally it should "just work", there is no special treatment. I think horizon paints in an area we rely on and doesn't paint when we expect it to. Looking at their sample code I see that they reference top and bottom elements which might allow working around this.
I don't know what this is called in SL, but I would like to replicate this functionality. If you go to this site: http://www.mscui.com/PatientJourneyDemonstrator/PrimaryCareAdmin.htm and click on the "Show Details" button located on the top, right-hand corder of the screen. When you click on this, there should be a "Scene Details" button-like feature on the right side. When you click on this, this is what I would like to implement. Can someone direct me please? Either to an online article, etc...
I'm not precisely sure what feature of the site you'r referring to (I'm blind so the description doesn't make much sense to me). However, two useful links - some of the MSCUI source code is available on Codeplex http://mscui.codeplex.com. Also, the Silverlight developer/designer on this project created Blacklight http://blacklight.codeplex.com which includes visual assets to use with Silverlight.
Although I don't know the specifics of the implementation, as far as I can guess, this is done by having a second Grid that follows the Grid for the page. Then, simply change the visiblity on the "guide" grid when the button toggles.
I believe that is simple, although it'll require you to work to figure out the positioning of the underlying page - but it's more flexible. With Blend it'll be easy.
Alternatively you could have a ton of additional UI elements on the page next to their respective controls, and either Tag or name them in a way that you can iterate over them to control visibility and interaction.
I think you're talking about a the grey overlay with a modal window on top. I think the best way to do that in Silverlight 3 is with the ChildWindow control.
A while ago I created a drag-over check box list which allows you to check many check boxes in a single gesture. Do you think it is viable and usable on the web where people might not know how to use it. The default behaviour still works for the individual check boxes.
1 - The idea
The idea is nice and can probably be used in professional applications where you have direct contact with users and can explain them how things work, but not necessarily on public websites where users don't want to RTFM and are just looking for familiar behaviours. Unless it was just a sample exercise or a control meant to be included it in a control pack, it violates the YAGNI principle ;)
2 - The implementation
You certainly noticed that the implementation is buggy (at least on IE7 and FF3.1B2). Sometimes, a gesture above all checkboxes will select all of them but one or two. Moving the mouse over the div's above or below the list will stop the drag (I know it's a "feature", but it's not very user friendly). I Checked the source code and to be honnest, while it looks pretty neat, I just didn't want to deal with it because it is plain javascript. Don't you know that...
3 - Possible improvements
...you can write less and do more with a javascript library, typically jQuery. I would completely rewrite this control as a jQuery plugin. It will provide you with a lot of tools to make your code much easier to write, maintain and extend. Just try it, you'll love it. This is from a technical point of view. From a user point of view, try to make you control as familiar as possible, like what Angela suggested, windows explorer : a nice selection rectangle, the ability to use shit + click, or something like that. Finally, remember that for many windows checklistbox users, "selected" and "checked" are two different things.
The demo definitely needs a few enhancements to make it even a little bit useful (although I am not sure if it would be enough):
Allow the dragging to start somewhere that is not a check box.
Allow selection by dragging over the labels as well.
This problem seems similar to the action of selecting multiple files in a file explorer like Windows Explorer. Maybe it can work like the action of selecting multiple files by dragging a rectangle shape around the items to be selected (select one corner, drag to the other corner)? This has the advantage of being similar to an interface element that people may already be familiar with.
For some reason I can't open your link (it says my ip address was blocked). But I think what you're looking for is what I already did in jquery, I uploaded a plugin which I basically ported from crossbrowser.com's dragcheck functionality, it was to be found at http://plugins.jquery.com/project/dragCheck but currently the jquery plugin site is being revamped and my plugin has disappeared. I'm trying to see if they're going to put it back up or if I have to create a new project again...
Anyways until we get that worked out you can see a demo here: http://jsbin.com/ibihi