相关疑难解决方法(0)

正确渲染最初隐藏的HTML元素的方法

我多年来在我的HTML中使用类似这样的元素应隐藏的元素:

<div style="display: none"></div>
Run Code Online (Sandbox Code Playgroud)

没关系,但我不能再忍受内联风格了.

  1. 在JavaScript window.onload事件中以编程方式隐藏元素为时已晚 - 它将在屏幕上闪烁.

  2. 我可以创建CSS类'隐藏',但是使用浏览器的激进加载策略(比如在Opera中),该块可能会出现一秒钟(在加载CSS之前).

有没有更好的方法?

html javascript css

22
推荐指数
2
解决办法
2万
查看次数

根据用户权限隐藏/禁用GUI元素的最佳方法是什么?

我正在启动一个Web应用程序,客户端在纯ExtJS和Grails中间层实现.该应用程序具有基于角色的授权,用户可以拥有许多细粒度的角色,如SOME_FORM_READ,SOME_FORM_UPDATE,SOME_DATA_DELETE,SOME_DATA_READ等.根据用户的角色,某些GUI元素需要被禁用或隐藏,而其他需要处于只读模式.

我在网上做了一些搜索,但没有找到专门解决这个问题的设计模式,所以我想出了自己的设计.我相信很多网络应用程序都会有类似的要求,所以我想在这里发布我的设计并听取人们的意见.我的设计绝不是一个完美的设计,但我希望它可以通过每个人的输入得到改善.虽然我正在使用ExtJS,但一般设计也应该适用于类似的框架,如GWT,Flex,Swing等.

所以,在这里:

我们需要在客户端层中处理有关授权的四种类型的代码(或信息):

  1. GUI元素操作代码,例如:

    panel.hide()form.setReadOnly(true)

  2. GUI元素权限要求,例如:

    form.requires('READ','FORM_READ_ROLE')

    adminPanel.requires( 'ADMIN_ROLE')

  3. 用户权限信息,基本上是用户拥有的角色列表;

  4. 授权逻辑:根据用户权限确定要隐藏/禁用的元素;

设计的核心是单例,名为GUIPermissionManager,简称GPM.这是一种集中式设计,因为大多数代码都在GPM中,因此GUI元素不会受到授权代码的污染.这就是GPM的工作原理:

  • GUI元素(需要某些访问权限)通过GPM注册其权限信息,如下所示:

    GPM.register(this,'DEPARTMENT_DELETE_ROLE'); //删除部门的按钮

  • GPM维护GUI权限注册列表

  • 在用户登录时,GPM会收到分配使用的角色列表

  • GPM遍历GUI权限注册列表并基于用户权限,确定要隐藏的GUI部分,然后相应地调用element.hide()

问题:

  • GUI元素以树形层次结构组织,例如,面板包含按钮栏和表单,因此当隐藏面板时,无需进一步检查按钮栏和表单是否需要隐藏.问题:如何在GPM中注册和维护此分层信息?
  • 目前,我只能想到GUI元素的两个用例:隐藏元素或将元素设置为只读(例如表单).还有其他用例吗?
  • 在ExtJS中,为了隐藏元素,我们调用hide(),但是为了将表单设置为只读,我们必须提出我们自己的函数,假设它叫做setReadOnly(),如何让GPM知道调用哪个函数?通过该功能作为注册的一部分?
  • 将表单设置为只读的最佳方法是什么?如果我使用setReadOnly()函数扩展表单组件,将会有很多代码重复,我必须为每个需要权限控制的表单执行此操作.是否可以在GPM中创建动态表单转换器,以便在表单设置为只读时,它会自动将所有可编辑字段替换为仅显示字段?

user-interface gwt design-patterns extjs

12
推荐指数
1
解决办法
6690
查看次数

标签 统计

css ×1

design-patterns ×1

extjs ×1

gwt ×1

html ×1

javascript ×1

user-interface ×1