如何在Web应用程序中显示和操作可视对象？ [英] How to display and manipulate visual objects in a web app?

问题描述

仅使用HTML，CSS，JavaScript和带有服务器端脚本语言的关系数据库（例如PHP和MySQL），如何检索和显示数据对象并以可视方式对其进行操作？

Using only HTML, CSS, JavaScript, and a relational database with server-side scripting language (e.g. PHP and MySQL), how can you retrieve and display data objects AND manipulate them visually?

通过操作我的意思是创建新对象，检索存储的对象，可视化它们的属性（例如，使圆形直径更大或更小），并调用方法并根据拖放设置字段值（更改大小，形状和位置）。

By manipulate I mean creating new objects, retrieving stored objects, visualising their properties (e.g. making a circle diamater larger or smaller), and calling methods and setting field values based on dragging and dropping (changing size, shape and position).

使用的一个例子是带有磁性计数器的物理办公室白板的在线表示，用于问题监控和跟踪。表格包含指定问题所有者的行，以及表示业务工作流程的列，例如一个4阶段的分配，调查，实施，同意关闭过程（或者其他什么，只是一个例子）。

An example of use would be an online representation of a physical office whiteboard with magnetic counters, used for issue monitoring and tracking. A table has rows for named issue owner, and columns representing the business workflow e.g. a 4 stage "Assign", "Investigate", "Implement", "Agree closure" process (or whatever, just an example).

用户点击一个按钮创建一个新的Issue对象，具有自己唯一的ID号。它的形状取决于它的问题类型，它的颜色，它的状态（红色，琥珀色，绿色，例如没有计划，落后但计划恢复，计划）。将其拖动到相关的表格单元格会根据其行索引将其分配给所有者，并根据列索引设置生命周期状态。每次拖动或删除对象或以其他方式更改对象时，视觉更改都会反映在数据库中的对象属性中。

A user would click a button to create a new Issue object, with its own unique id number. Its shape would depend on its issue type, its colour its status (red, amber, green for e.g. no plan, behind but recovery on plan, on plan). Dragging it to the relevant table cell would allocate it to an owner based on its row index, and set the life-cycle state based on column index. Each time an object is dragged or dropped or otherwise changed, the visual changes are reflected in the object properties in the database.

我在使用HTML5 canvas元素之间徘徊，或SVG与一些聪明的CSS。我可以弄清楚如何将数据库中已有的东西放到屏幕上，而不是如何通过屏幕操作和存储更改。我也假设这可以在HTML / CSS / JavaScript / PHP / MySQL中完成但是可以使用其他什么技术？

I'm torn between using HTML5 canvas element, or SVG with some clever CSS. I can work out how to get stuff already in the database onto the screen, but not how to manipulate and store the changes through the screen. I'm also assuming this can be done in HTML/CSS/JavaScript/PHP/MySQL but what other technologies could be used?

推荐答案

听起来它最适合作为客户端-tartrix ajax的东西。这意味着：

This sounds like it would work best as a client-centrix ajax thing. This means:

• 在Javascript中编写整个UI。无论您使用canvas，svg还是纯HTML5 + CSS3，都取决于您的个人偏好，浏览器支持和功能要求。


• 服务器有两个作业：提供javascript应用程序，并响应to ajax requests。

Drag&然后可以完全用Javascript完成drop;你可能想要使用一个为你实现细节的javascript库（你可以使用一些jQuery扩展）;您只需订阅正确的事件，并触发ajax请求以更新和查询您的数据。因此，例如，如果用户将项目拖动到表格单元格，您将获得项目的ID，表格单元格的ID，并触发ajax请求，该请求告诉服务器项目X现在已分配给单元格Y，服务器响应OK（在这种情况下，您可以在UI中永久更改）或错误消息（在这种情况下，您可能想要弹出通知或类似的东西）。

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).

通信协议的最佳选择是JSON;它内置于jQuery以及大多数javascript实现中，它通过防火墙和Web浏览器而没有太多麻烦，大多数编程生态系统（包括PHP）都内置了JSON编码和解码。此外，与基于XML的替代方案相比，JSON的开销非常低。

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.

无论哪种方式，它都不容易，没有灵丹妙药可以让它与点击几下，你就不得不问这是否值得付出努力。此外，考虑到很明显，当脚本被阻止时，或者在没有足够支持的平台上，javascript-heavy接口将无法正常工作（或者根本不能） - 认为具有弱CPU和低于标准的Web浏览器的移动设备等等。

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.

这篇关于如何在Web应用程序中显示和操作可视对象？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！