首页 文章

UI5引导程序登录片段显示的最佳实践

提问于
浏览
1

问题:OpenUI5中独立应用程序的登录页面的模式是什么,包括在UI5引导程序和component.js执行时显示占位符页面内容?

我正在尝试为我的独立UI5应用程序的登录过程提供令人满意的用户体验 . 我想要的事件顺序是:

  • 用户导航到UI5 URL

  • 在UI5启动时显示令人满意的背景/占位符

  • 显示登录对话框,用户输入详细信息点击登录按钮等...

我目前的问题:

  • 我在index.html的主体中放了一些文本,它立即显示用户导航到页面(好),但在UI5应用程序启动后文本仍然位于页面顶部(错误) .

  • 将index.html主体留空,在UI5启动时出现'empty page'滞后(坏ux)....

  • ...我有一个第一个UI5视图,它充当占位符和相关的登录片段,但片段在被视图内容(坏ux)隐藏之前暂时闪烁 .

总的来说,我认为基于了解启动时生命周期事件的顺序,可能存在登录的最佳实践模式,但到目前为止我还未能在UI5文档中找到简洁的解释 .

有人能指出我有用的方向或提供建议吗?

编辑:经过更多搜索后,我发现了this post并链接了JSBin,这对一点有帮助 . 本质上,该技术使用普通的html和脚本来延迟应用程序的负载,直到加载UI5脚本,在等待时显示令人愉快的进度微调器 . 当'deviceready'事件发生时,脚本启动应用程序加载并删除进度指示器的html元素 . 结果是UI5的无闪烁启动,具有令人满意的用户体验并且没有工件HTML . 可以通过将'hide progress elements html'函数放在模型加载等的toModelLoaded()过程中来扩展此技术 .

我还重新启动了事件,以便在第一页的onAfterRendering()函数中触发登录对话框的打开 - 我以前在一个onDisplay()函数中有这个函数,该函数在路由匹配时被连接起来 . 这是基于其他经验,我打算在打开页面时启动进一步的数据获取,但我认为在这种情况下页面已经呈现,因此对话闪烁不会发生或发生在屏幕外 . 触发onAfterRendering()中的对话已停止此情况下的对话闪烁问题 .

1 回答

  • 1

    关于您当前的问题:

    • 您的整个UI5应用程序存在于index.html文件中 . 每当您使用UI5应用程序时,您实际上始终只停留在那个HTML页面上 . 因此,无论您放入HTML文件中的任何内容都将出现在应用程序的任何位置 . 所以不要在里面放任何东西 . 只需使用它来引导UI5库 .

    • 'empty page'滞后无法避免 (update: yes it can - see below) . 从服务器下载资源后,UI5应用程序需要额外的几秒钟才能加载 . 没有办法解决这个问题; UI5是一个庞大的库,它将花费额外的时间让浏览器准备就绪 . 因为库本身在此期间已经准备好了,所以你不能设置一种启动画面(例如,想想这个.getView() . setBusy()) . 但是,因为基本上您的整个网站将在此延迟后存在于浏览器中,您的网站导航将比在大多数其他框架中编写的应用程序中的导航更快,其中每次离开时都需要从删除服务器下载以下页面页面 .

    • 我不知道你扮演占位符的视图是什么意思 . 我可能会删除它 . 另外,我不建议使用片段来处理登录 . 相反,为它创建一个专用视图 . 这是执行此操作的标准方法 .

    回顾一下:

    • 用户点击网址 -

    • 库加载

    • 第一个视图是登录视图 . 用户提交表格;登录视图与服务器对话(当它执行此操作时,您可以将视图设置为忙碌以获得愉快的用户体验) .

    • 如果用户已通过身份验证,则导航到其他视图 .

    我希望这会让事情更加清晰 . 如果您有任何疑问,请告诉我 .

    Update :好找!!我没有't thought of that. Yes, you can of course have your HTML page do something while it'等待脚本下载,然后当调用ondeviceready方法时,将所有内容交给UI5应用程序 .

相关问题