💆🏼 🤯 ☑️ 通用图形用户界面〜=结束痛苦 👿 🥧 🏴󠁧󠁢󠁳󠁣󠁴󠁿

对我而言，理想的GUI是一款无需编程，设计，维护的应用程序，并且能够在不进行任何调整的情况下，在任何语言和任何平台上均能正常工作。在我们的一生中是否有可能，我们将尽力解决。

可以轻松地从Vue / React，JavaFX，Python PyQt等中学习一些东西，但是...以简单而优雅的方式获取数据并与软件仓库进行交互，而无需考虑用户操作系统/浏览器/平台，对于此类工具而言，这是一项尚未解决的任务。我不想进入新的框架（即使是旧的，被遗忘的框架），也不想改变编程语言，ra之以鼻，用垃圾塞住我的头。我想准确地编写自己的任务，而不会因与各种GUI框架的争执而分心。我为自己找到了解决方案。

作为一种交换协议，我们将使用Json作为所有编程语言在某种程度上的流行度/可理解性/可读性/支持方面的顶级格式。

服务器发送Json数据，根据该数据，我们的应用程序GUI应设计出满足精美GUI规范的图片。Google及其Material Design如今已成为标准，因此请采纳。

现代GUI的要求包括存在标准元素，例如按钮，输入字段，表格等。让我们估计一下如何使用最小的约定集来告诉GUI我们需要屏幕上的某些元素。这里是主要的：

无状态按钮{'name'：'Push me'}。如果元素仅包含名称，则为按钮。
输入字段为{'name'：'Edit me'，'value'：''}，因为类型值是字符串。
切换按钮{'name'：'My state'，'value'：false}，因为类型false是布尔值。
从列表中选择{'name'：'Switch something'，value：'choice1'，options = ['choice1'，'choice2'，'choice3']}
图片{'name'：'Image，'url''：'..'，'width'：..，'height'：...}
表{'name'：'My table'，'headers'= ['Name'，'Synonym']，行= [
['young'，'youthful']，
['small'，'meager']，
.. 。]
}

为了实现可定制性，如果JSON自动选择的元素类型不适合您，则可以将元素类型设置为{type：'ButtonSwitcher'}。当相同的JSON可以以多种方式显示时，这是可能的。例如，“从列表中选择”可以表示为带有下拉列表的输入字段，也可以是水平按钮组，其中一个处于活动状态并与当前值相对应。

如果选项数量很少，则自动使用按钮选项（数量很多（超过3个））是有意义的-输入选择字段。我们的GUI本身选择了最佳的渲染方式，但是如果您确实需要它，请键入：...以提供帮助。通常，不需要这种类型，汽车设计师必须自己应对。

让我们详细完成图片：

如果名称不应该显示在屏幕上，则必须以_开头；
- , ‘icon’: ‘ Material Design ’; push - {‘name’: ‘_Check’, ‘icon’: ‘check’}
, Viewers, , ‘colors’, ‘params’,… // . — , .

对于元素的逻辑分组，我们介绍了将逻辑相关元素分组为一个可视块的块的概念。

{'name'：'Block 1'，'elems'：[{'name'：'_Check'，'icon'：'check'}，...]}
在该块内，所有元素必须具有唯一的名称，因为它们是id 。

通常，块是水平构建的，如果它们不能容纳屏幕上的所有内容（例如，它们在移动设备上启动了应用程序GUI），则自动设计器会将其隐藏，但会向工具栏添加图标以点按即可将其打开。这使您可以选择即使在小屏幕上也可以使用复杂的GUI。

描述的最高层是屏幕。看起来像{'name'：'Screan'，块：[..]，菜单：[{'name'：'Screen'，'icon'：..，}，..]，'toolbar'：[JSON set -元素（按钮，字段等）]}

添加支持我们的JSON协议的条件uniGUI的实现细节。它是一个与Websocket数据服务器通信的独立过程，并提供其数据的显示以及随后对该服务器重要数据的所有更新的报告。

连接到服务器时，uniGUI希望接收到Screen。接收到该消息后，他会以最佳方式为用户设计并绘制接收到的信息，以供用户使用当前屏幕，然后等待用户和服务器的反应。服务器从构造的数据映像中接收一串JSON消息，这些消息完全描述了用户的操作。它们的格式为['Block'，'Elem'，'action of type'，'value']，其中'Block'和'Elem'是块和元素的名称，value是事件的值。

服务器可以通过发送有关差异的信息窗口来接受更改或将其回滚。它可以引发一个对话框，该对话框被描述为一个块，并具有其他功能。 “按钮”参数，它描述对话框上的按钮。客户端立即显示当前服务器数据及其更改。仅发送服务器更改的对象，为了接收事件并确保对其进行处理，我们将创建一个Websocket层（框架），该层将自动将消息转换为对与我们的数据（对象）关联的处理程序的调用。

服务器上的所有魔力都归结为这样一个事实，即我们所显示的数据应该以某种方式链接到该层，以确保将其自动转换为JSON并从用户活动中回调通知而无需任何编码。由于这取决于特定语言的功能，因此对于每种语言，该层在体系结构和特定方面可以具有不同的选项。

例如，在一种情况下，该层具有一个screenshots文件夹，其中每个模块都具有Python中一个屏幕的描述。在启动时，该层读取屏幕，为用户提供全局优先级=0。所有数据都使用jsonpickle自动传输。复杂元素具有自己的“智能”，从而消除了程序员对细节的关注。例如，一个表接收一组行，默认情况下，当row中的数据数==头中的元素数时，默认情况下可能不存在id row。在这种情况下，当用户选择一行或编辑其内容时，服务器会将ID作为ID ee发送到该行中的索引。如果行中的数据数量比标头中的数据多一个，则行中的最后一个元素将被解释为id，并且将其发送到服务器。这样的自动化极大地简化了您不需要任何细节的生活，但是如果您突然需要它，则可以以最少的劳动密集型方式获得它。

按照占用一两个页面的格式，以JSON提供自动翻译的任务可以用任何语言完全解决（我希望如此）。

为了不讨论此方法在复杂应用程序中的适用性，下面是屏幕截图，例如uniGUI用flutter编写的描述。他选择使用多平台并且缺少诸如JS / chrome这样的附加层。令人沮丧的是，您可以写下令人讨厌的桌面支持和较低质量的上层代码（GUI元素），这是一种不愉快的体系结构，无法进行点更新和将元素作为数据进行管理，但是将其视为数据。

消息流应用程序GUI->服务器看起来像这样：

flutter：[词汇表，术语，=，658]
flutter：[_Details，链接，@，@ Folliculitis]
flutter：[_Details，链接，@，@ Adolescent]
颤动：[工具栏，_Back，=，_ Back]
颤动：[工具栏，_Forward，=，_ Forward]
颤动：[工具栏，_Back，=，_ Back]
颤动：[_ Details，_Status，=，虚拟]
颤动：[_ Details，_Status ，=，稳定]
颤动：[_ Details，链接，@，炎]
抖动：[_Details，_Status，=，虚拟]
抖动：[_Details，_Status，=，稳定]
抖动：[toolbar，_Back，=，_Back]
抖动：[_Details，Links，@，@Folliculitis]

是否会有等待来自服务器的事件时，会降低此类GUI的速度。否，因为该GUI在服务器通知模式下工作，因此将所有用户操作作为普通的本地GUI进行响应。默认情况下，它将对用户操作的服务器静默视为“正常”。更改屏幕时，很明显应该有其描述。与典型的应用程序嵌入式GUI相比，可能会有延迟。

总。如今，可以使用当前工具制作一个GUI，该GUI可以删除90％的标准沉闷服务代码，而不必理会它的工作位置和工作方式。至少用于商业/科学应用。本文是一个概念证明，它不仅可以创建条件应用程序浏览器，而且是必要的。

通用图形用户界面〜=结束痛苦

More articles: