如何在GUI中正确实现严格的控制流程?

时间:2013-01-11 14:06:21

标签: wpf swing user-interface javafx

首先,让我试着澄清“控制流”的含义是用户浏览UI的方式。 (这可能不是我所描述的正确术语,所以如果你知道的话,请建议一个更好的术语!)

大多数现代应用程序似乎都让用户决定在什么时候做什么。独立控制单元主要涉及一些文本输入和最多鼠标点击。

对于我正在处理的应用程序,我想要一些不同的东西(请看到这篇文章的结尾,以回答不可避免的'你为什么要这样,那不是好设计?' )。下面的图片显示了一个示例GUI,它与我正在做的非常接近,它只是被剥离了,业务域已经改变,以便于理解:

Sample UI picture

预期的控制流程如下:

1 user enters name of recipe, presses Enter
2 user enters ingredient, presses Enter
3 if ingredient field is empty, we're done: go to 9
4 dialog window shows up, queries database with user input and lets him select from a list of possible ingredients
5 if nothing was selected, go to 2
6 user enter amount, presses Enter
7 add this ingredient to an observable collection which is bound to the list
8 go to 2
9 dialog window shows up, prompts user for price of the mixture

我目前的代码是基于KeyListener附加到所有控件上的Enter拦截setFocus()按键,调用所涉及的逻辑,然后手动{{1}}相应的下一个文本字段/其他控制。 这样做很有效,但是代码看起来很难维护,并且感觉很痛苦,就像我几十年前在VB5中编写的代码一样。

有更好的方法来实现这一目标吗?我对一般设计模式和可能由WPF,JavaFX或Swing等框架提供的特定解决方案感兴趣。


为什么有人想要那个?

有两个原因:

  • 这个特殊的应用程序一直以这种方式工作,并被许多人用于非常少的计算机经验。给他们太多的选择,做什么,何时只会增加不必要的混淆。
  • 对于像这样的简单任务(或多或少只是数据输入),使用鼠标进行手动导航必然比通过输入掩码的预定义路径更慢且更容易出错。

1 个答案:

答案 0 :(得分:1)

<强>问题

您正在重载Enter键。一种优选的方法是让按钮代表动作。

您的金额字段位于错误的位置,如果它与整个食谱而不是成分有关。在成分列表后将其向下移动。

<强>按钮

返回按钮。您可以在名称字段后面,成分字段后面以及底部的金额字段后面有一个按钮。这允许用户具体了解他们想要更新的内容。

状态模式

您可以使用state pattern来跟踪用户已完成的操作以及用户下一步可以执行的操作。如果用户不按顺序执行操作,您将在屏幕上的某处返回错误消息,引导用户了解下一步操作。

您必须枚举用户操作的所有不同可能性。有3个按钮,可以组合6个。

  • 名称,成分,数量(您描述的内容)
  • 名称,数量,成分
  • 成分,名称,数量
  • 成分,数量,名称
  • 数量,名称,成分
  • 数量,成分,名称

您可以决定哪些组合有效,哪些组合无效。州树更加复杂,因为您的用户可能会输入多种成分。

确定和取消按钮

您可以在GUI的底部添加一对按钮,然后单击“确定”和“取消”,而不是管理状态。这允许您的用户按他们选择的任何顺序填写字段。在单击“确定”按钮之前,不会检查有效性。

“确定”按钮是通常与Enter键相关联的按钮。

您仍然需要在成分字段后面有一个按钮,以允许用户输入多种成分。