I'm currently experimenting with HTML5 Drag and Drop API. Now I've got several questions:
1.
Am I right, that it's not possible to connect draggable elements with drop-areas?
Example: You have 2 different kinds of elements you want to be able to drag and drop: Files and Text-Labels. Now if I give some div an DragOver-Handler and a Drop-Handler it will respond to both, files and text-labels. I'm looking for a simple possibility to only respond to a specific type of draggable items.
A connected problem is the dropEffect cursor-style: At the moment I enable all possible drop-targets in the DragStart-Handler and disable all of them in the DragEnd-Handler (with "disable" I mean, that I remove all DragOver- and Drop-Handlers). If I wouldn't do so, it'll look like if you could drop a file on an element that should only react to text-labels.
2.
The dropEffect cursor-style is a mess. In Firefox I don't get them at all, in Chrome it will give me a big "plus"-icon (even if I have removed the DragOver- and Drop-Handlers from an element)
3.
Last feature I am looking for is multi-select: Select multiple Text-Labels and then drag all of them at a time. Is this possible? My first idea was to create a new div and move all selected elements inside this div and then drag the newly created div. Seems pretty hackish and looks quite ugly ;-)
I hope you guys have some answers for me. Thanks!
I don't think that HTML5 drag and drop (and friends) are supposed to be replacements for commonly used "drag and drop" Javascript libraries (although it COULD be used instead of them in some cases). The name is misleading.
Modern operating systems include APIs that allow cross-application communication: clipboard and drag-and-drop. Both APIs are quite similar and need to be quite low-level because of specific challenges:
the data must be sent across processes, so it must be somehow serialized,
the sender must have a way way of offering the data in many formats (eg. text/plain and text/html) and the receiver the ability to pick one that it likes best,
the sender and receiver may live in different processes, so they can never find out about each other (they might even be entities coming from different platforms, GUI frameworks, programming languages etc.), the only channel of communication is the data itself,
Current HTML5 APIS, as opposed to - say - JQueryUI draggables - are not meant to give programmer strict control of the look and feel of the dragging process, but rather enable tight integration with the native, system-wide mechanisms. Which may or may not be what the programmer needs.
So to answer the questions:
you cannot "connect draggable elements with drop-areas", because your draggable elements can even come from outside the browser. But you can make an area that rejects certain types of data (which is what user expects from native drag and drop).
"div" and "multiselect" are not things that operating system understands (we don't have native multi-cliboards or multiple-text-selections). You CAN implement such functionality if you make a with inner divs that can be toggled (eg. by clicking while holding shift). When someone tries to drag the outer dive, make a transfer object that says which inner divs were selected (you could even create an image that shows them).
If the above solutions sound a bit low-level, well - that's because they are. When you develop a desktop game or tool, you do not rely on native drag and drop for moving pieces across the chessboard or moving sliders in the GUI. I think it will be the same with JavaScript. JQueryUI Draggables are not going anywhere.
Related
I have a legacy, X/Motif, C++ application for which new windows have been added using Java/JNI.
New Java windows have been either top level windows or dialogs with no parent.
Is there any reasonable way to get a child window created by the JVM, such as a JDialog, to have as its parent a window created on the native side using X/Motif, and if yes then how? This would still be useful even if Java AWT/Swing is not aware of the parenting structure and the window manager just kept the dialog on top of the top-level window (of course, having all the normal control over windows in Java would be preferable, just not strictly necessary for all uses of my question).
I am thinking the answer might be "No, not in any reasonable way. You would have to do epic surgery on both your native side and within the JVM." If that is the answer, then so be it. But I am hoping someone has an answer along the lines of "If you make this X call or that window manager call, you can get the window manager to supply certain dialog properties with the argument top-level window as the parent."
Essentially, I am looking to increase the integration between the C++ and Java user interfaces as much as possible. Right now, they are run as one application by using JNI, but the GUI windows/components are essentially separate, despite sharing data.
One benefit of this, already mentioned, is having dialogs not show up behind what the user perceives as the top level window.
Another thing I have considered, though I probably will not do (tell me how crazy you think it is), is to make it appear as though Java components are in the C++ window by getting the screen coordinates of a component on the C++ side, displaying a borderless window on the Java side at that screen location, so it looks like it's part of the C++ application. I can think of so many negative side effects of this, though, that I would not do it unless there was a simple way to negate them (focus issues, a window displaying between this dummy window and the real top level window, and other things would affect user experience). Even avoiding this, though, there are still benefits to an affirmative answer to my question.
If you're using the XToolkit (Java 1.7+), you can proceed as follows:
Get the numeric id of the native peer of a java.awt.Window instance (see this answer).
Find the corresponding X11 Window struct by its id by iterating the clients of the X server (see the sources of xwininfo and xlsclients utilities, also Select_Window_Args(int*, char**)).
Use XReparentWindow().
I'm writing a graphic console that highlights different entries and stores things when you input them (in AS3) but I've found that once there are thousands of entries, the program starts lagging and scrolling is slow. If I want scrolling to be animated with acceleration it gets even slower.
How do I move the giant block of objects that are my stored entries up and down?
Do I have to progressively load messages around where the user is looking? How does the scrollbar handle this, then?
you should create a custom container instead TextField, it would be easier to build an accelerated scrolling too,
each log entry would be an extended DisplayObject that holds anything you want just like inflating layouts in android.
the most important part should be reducing Memory usage:
you may only store plain text of log enteries in something like a global array and when scroll position is close enough, generate this layouts, then adding them in container to show, and vice versa for removing far behind chats.
however this proccess stills using much memory during runtime.
so, just according the concept of android's DiskLruCache, it is possible to storing some part of our invisible data which would be too far from our scroll position to disk instead memory, using SharedObject's.
How do I move the giant block of objects that are my stored entries up
and down?
You don't. As you have noticed, when the number Display Objectson the DisplayList greatly increases, the memory overhead increases and the housekeeping details of managing the Display Objectseventually causes performance to suffer. You don't mention any details of how you are implementing what you have so far so my comments will be general.
The way this is handled by various platform list components in Flex, iOS and I assume, Flash, is to only display the minimum number of objects needed, and as the user scrolls, objects are shuffled in and out of the render list. A further optimization is to use a "pool" of "template" objects which are reused so you don't pay a initialization time penalty. There is probably an actual name for this ("...buffering...") technique but I don't know what it is (hopefully some kind person will provide it and a link to a fuller description for how it works).
And as for how it works – you can DIY it, figuring out, as the user scrolls, which objects are moving off-screen and can be recycled, which are going to move on-screen, etc. Of course this all assumes that you have your objects stored in a data structure like and Array, ArrayList or ArrayCollection. As an alternative to coding all this from scratch, you might see if the DataGrid or List components will meet your needs – they manage all of this for you.
Flash Tutorial: The DataGrid Component (youTube video)
Customize the List component
Lots of other examples and resources out there.
(again, I work in Flex where the DataGrid and other list-based components can customized extensively using "skins" and custom item renderers for visual style – not sure if it is the same in Flash)
I wish to create a local (offline) HTML5 page containing various sized rectangles containing a paragraph of text (and links) that can be repositioned by being dragged by the user. It's not necessary to drop them into any target; simply to drag them. But the page has to remember their final locations and show them there when it is reopened.
I did think of using Canvas to do this but drawing the text in the rectangles is very slow. Better to create a div (with a border) for each paragraph. The closest solution I have found so far is this one, where one drags the "aside". The original page is here.
What code would I need to write to store these locations locally (offline), preferably by self-modifying the HTML page itself? I understand there are localStorage and sessionStorage objects in HTML5 but have not tried using them.
PS This page is for my own use and as I use Firefox I am not interested in other browsers. I would prefer using Javascript to jQuery, but all suggestions will be most welcome.
PS While waiting for a reply, I stumbled across this site:
built with HTML5, CSS3 and JavaScript, the diagrams are created with canvas and offline usage is possible, thanks to ApplicationCache.
Would this be the way to go?
You could save the div information (positions and width, (eventually height too)) into the localstorage. When you are reloading the page you just need to get them back out of the localstorage to rerender the whole thing.
jStorage is a simple plugin where you can "speak" to your local storage. You could store an object (serialized) into this and then loop it out on your page load.
I'm building a business application which mostly involves tables and other typical form elements. Due to the nature of my application however, I need to place groups of these elements together in a dynamic tree structure which will take up all of the available screen real estate. If real estate is low, there will be some form of smart scrolling allowing users to focus on certain areas of the tree. It could be called an advanced data visualization web form.
Historically, I would have accomplished this by simply using divs and javascript. The canvas element however seems like a more logical way to build my structure. Most uses of the canvas element that I can find are however geared towards graphics and animations (mostly games). Is canvas overkill for this? Will I benefit from using it? Are there alternatives?
Yes, canvas is overkill. It is very much a drawing board and not much more. It is certainly not something that I would expect to create user controls in. Games etc. are more suited as they aren't really standard user controls and wouldn't be expected to behave as such.
A tree structure could easily be implemented with a series of nested uls. Using some JavaScript to expand collapse them by adding and removing classes.
Here is a nice jQuery plugin for you to use or get some ideas of how you could use it.
Edit:
I would stay away from canvas just because of the overhead of the drawing. If you can extend a standard JavaScript treeview to add more functionality this would seem like the best option ot me. Creating controls from scratch in canvas is no small feat.
Edit2 (Post mockup):
This just looks like a multi-part form to me, with hidden forms/areas which are displayed as apropriately. This is far too common to require creating this with canvas.
Canvas is not fully supported in all browsers yet. I recommend using either Jquery or another framework.
I'm using the excellent BeautyTips plugin as a means of indicating validation failures to end users and I'm running into positioning problems whenever page content is dynamically added, removed, or animated.
Here's a concrete example. I have a DIV at the top of each page that’s used for confirmation/error messages. It's displayed in $(document.ready) using slideToggle(). This naturally "pushes" all subsequent html content down, throwing off the positioning/alignment of the beautytips. If I call the plug-in's built-in refresh method after slideToggle() has fired, said positioning problems are corrected. You can see the before/after screen-shots here and here.
One possible workaround would be to programmatically detect DOM changes, specifically changes to css, so that I could then loop over each beautytip and manually reload it. However, it appears that there are no native jQuery events which expose such functionality. I've seen the impressive jQuery plug-in by Rick Strahl that monitors CSS changes, but it seems based on the assumption that one knows ahead of time the specific HTML element(s) they wish to monitor. I want to monitor the entire document, since I can't be expected to know what html elements might exist on a given page that a) are going to be animated and b) would be at such a position in the document that they would "push" down the my beautytips. And I certainly don't want to have to incur the massive performance penalty of polling every block level element in the document.
I should mention that the plug-in works perfectly if I use it in its default "hover" mode in which beautytips are displayed only in response to user mouse input. Unfortunately, there is a design constraint imposed on the application that states all validation errors must be displayed after form submission without additional user interaction.
I'm sure there's a really simple/elegant fix that is completely eluding me. I could avoid all of this hassle, of course, by simply not using animation to display page content, but that seems like a high price to pay.