Ton*_*ang 12 user-interface gwt design-patterns extjs
我正在启动一个Web应用程序,客户端在纯ExtJS和Grails中间层实现.该应用程序具有基于角色的授权,用户可以拥有许多细粒度的角色,如SOME_FORM_READ,SOME_FORM_UPDATE,SOME_DATA_DELETE,SOME_DATA_READ等.根据用户的角色,某些GUI元素需要被禁用或隐藏,而其他需要处于只读模式.
我在网上做了一些搜索,但没有找到专门解决这个问题的设计模式,所以我想出了自己的设计.我相信很多网络应用程序都会有类似的要求,所以我想在这里发布我的设计并听取人们的意见.我的设计绝不是一个完美的设计,但我希望它可以通过每个人的输入得到改善.虽然我正在使用ExtJS,但一般设计也应该适用于类似的框架,如GWT,Flex,Swing等.
我们需要在客户端层中处理有关授权的四种类型的代码(或信息):
GUI元素操作代码,例如:
panel.hide()form.setReadOnly(true)
GUI元素权限要求,例如:
form.requires('READ','FORM_READ_ROLE')
adminPanel.requires( 'ADMIN_ROLE')
用户权限信息,基本上是用户拥有的角色列表;
授权逻辑:根据用户权限确定要隐藏/禁用的元素;
设计的核心是单例,名为GUIPermissionManager,简称GPM.这是一种集中式设计,因为大多数代码都在GPM中,因此GUI元素不会受到授权代码的污染.这就是GPM的工作原理:
GUI元素(需要某些访问权限)通过GPM注册其权限信息,如下所示:
GPM.register(this,'DEPARTMENT_DELETE_ROLE'); //删除部门的按钮
GPM维护GUI权限注册列表
在用户登录时,GPM会收到分配使用的角色列表
GPM遍历GUI权限注册列表并基于用户权限,确定要隐藏的GUI部分,然后相应地调用element.hide()
问题:
Q1:分层UI元素隐藏 - 优化您的GPM以避免隐藏已经通过父级隐藏的元素在我看来不会有太大的性能提升.我的理由:
如果您真的想要跟踪分层信息,您可以始终使用所有容器组件提供的'contains'方法来检查DisplayObject是否包含在其子列表中的任何位置(包括链中).每次注册一个组件时都可以调用它来检查它是否已经注册了父组件.
然后可以在字典中设置标志以忽略隐藏在该组件上.在迭代注册组件列表时,可以首先检查此标志,以确定应隐藏的内容.字典可以使用与注册组件的UID相对应的键.此外,当忽略其他GPM功能时,可以使用此标志忽略该组件,例如表单禁用(因为表单永远不会被看到).
Q2.在我的头顶,你可以禁用/启用组件,实现状态更改,或拦截事件,以及所有警报.这是一个非常广泛的问题,因为任何事情都可以完成 - 真的取决于设计师.
Q3.你可以:
您基本上将与各种组件建立合同,其中GPM知道其接口并相应地与它们交互.
Q4.您始终可以将表单设置为禁用(启用= false).这可以防止任何用户交互.某些外观将更改以指示组件已禁用,因此您可能需要修改其外观以防止某些此类显示行为.在该行上,您还可以更改其外观以隐藏某些元素,例如TextInput框的边框,以使其看起来更像是"视图"而非禁用的输入.
可以创建一个"变换器"来改变TextInputs和RichText组件等.这将花费大量的工作,并且可能应该构建到扩展的Form类而不是GPM中.我认为每种组件类型的不同皮肤状态可能是更好的解决方案,以避免组件的创建和销毁只是为了改变表单的显示方式.
| 归档时间: |
|
| 查看次数: |
6690 次 |
| 最近记录: |