How To Display And Manipulate Visual Objects In A Web App?
Solution 1:
This sounds like it would work best as a client-centrix ajax thing. This means:
- Write the entire UI in Javascript. Whether you use canvas, svg, or plain HTML5 + CSS3, depends on your personal preference, browser support, and feature requirements.
- The server has two jobs: serve the javascript application, and respond to ajax requests.
Drag & drop can then be done entirely in Javascript; you probably want to use a javascript library that implements the nitty-gritty for you (there are a few jQuery extensions you can use for this); you'll only have to subscribe to the right events, and fire ajax requests to update and query your data. So for example, if the user drags an item to a table cell, you'd get the item's ID, the table cell's ID, and fire an ajax request that tells the server "item X is now assigned to cell Y", to which the server responds with either "OK" (in which case you can make the change permanent in the UI) or an error message (in which case you probably want to pop up a notification or something like that).
Your best bet for the communication protocol is JSON; it's built into jQuery as well as most javascript implementations, it passes through firewalls and web browsers without too much trouble, and most programming ecosystems (including PHP) have JSON encoding and decoding built into them. Additionally, JSON has very low overhead compared to XML-based alternatives.
Either way, it's not going to be easy, there is no magic bullet to make it just work with a few clicks, and you have to ask whether it is worth the effort. Also, take into account that quite obviously, javascript-heavy interfaces won't work well (or at all) when scripts are being blocked, or on platforms without sufficient support for them - think mobile devices with weak CPU's and sub-standard web browsers, etc.
Post a Comment for "How To Display And Manipulate Visual Objects In A Web App?"