手机重布局

  • 文档创建者:susie
  • 编辑次数:27次
  • 最近更新:Leo.Tsai 于 2019-12-12
  • 1. 概述

    1.1 版本

    设计器版本  HTML5移动端展现插件版本JAR包版本App版本
    10.010.4.492019-12-0510.4.49

    1.2 应用场景

    由于手机屏幕比 PC 端和 Pad 端都小,因此针对以下三种场景的模板制作,手机端需要采用不同的布局。

    下面的报表设计场景中,场景一需要手机重布局,而场景二、三不需要手机重布局。

    • 场景一:做好的决策报表含报表块等组件,在 PC 和 Pad 以及手机上共用,在 PC 和 Pad 端都是宽高自适应屏幕或者宽高等比例缩放,但是在手机上没有太大的布局要求,只需要在手机上面流式布局展现,即一行一个组件这种情况。

    • 场景二:在手机上也采用原始布局,PC 端想要和手机共用一套模板,模板设计的时候建议以移动端效果为先。

    • 场景三:在手机上采用原始布局,为手机专门制作的模板。

    1.3 功能介绍

    手机重布局只能在决策报表的 body 组件的移动端属性下设置,如下图所示:

    注:重布局属性是决策报表的整体属性,只有当前控件选择 body 的时候才会有手机重布局属性,设置后是对整个决策报表进行生效的,如果决策报表内部有绝对布局或者 Tab 组件,那么里面的控件也是重布局显示。

    手机重布局的设置项包括:

    注:不勾选手机重布局时,body 的布局方式即为“保留布局”,除了控件顺序,是不会出现其他设置项的。

    • 内边距:移动端展现时报表内容距离边框上下左右四个方向的距离。

    • 组件间隔:每个组件纵向的间隔距离。

    • 组件冻结:组件冻结后,向上滑动时,该组件固定在顶部不动。

    • 控件顺序:移动端展现时,组件从上到下的排列顺序,设置时可自由拖拽。

    注:2019-12-05及之后版本的 JAR 包才能支持在设计器中设置组件冻结。

    Snag_437d4821.png

    当决策报表中多个组件在同一行时,以%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\NewbieGuide\决策报表入门示例.frm为例。

    如果不勾选手机重布局,效果如下图所示:

    SVID_20191209_153144_1.gif

    勾选了手机重布局后,组件按行显示,如下图所示:

    SVID_20191209_153113_1.gif

    2. 属性设置

    下面将通过举例,详细介绍每个属性设置项的移动端预览效果。

    2.1 内边距

    %FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\NewbieGuide\决策报表入门示例.frm为例。

    1)设置该报表的上边距为4时。

    Snag_444948ec.png

    移动端预览效果如下图所示:

    1575879667483199.jpg

    2)设置该报表的上边距为20时。

    Snag_444aae77.png

    移动端预览效果如下图所示:

    1575879840548767.jpg

    2.2 组件间隔

    %FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\NewbieGuide\决策报表入门示例.frm为例。

    1)设置报表的组件间隔为4时。

    Snag_444c3b41.png

    移动端预览效果如下图所示:

    1575880271271964.jpg

    2)设置报表的组件间隔为20时。

    Snag_444d9803.png

    移动端预览效果如下图所示:

    1575880379934822.jpg

    2.3 组件冻结

    组件冻结作用范围如下:

    • 只能选 body 中第一层非容器下的组件( 报表块、图表块、文本等 ),不能设置冻结容器( tab组件 & 绝对画布块 )。

    • 如果是插件化扩展的非容器组件,也可以选。

    • 组件可以多选。

    %FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\Phone\others\骑行记录-phone.frm为例。

    1)只冻结单个组件

    点击冻结组件右边的白色框体部分,勾选展示顺序为第二的组件 report0。

    Snag_444fcd61.png

    移动端预览报表,向上滑动过程中,当 report0 到达顶端时,会自动冻结,保持不动,如下图所示:

    SVID_20191209_195528_1_cps.gif

    2)冻结多个连续组件

    点击冻结组件右边的白色框体部分,勾选展示顺序分别为第二、第三的组件 report0、report2。

    Snag_44636251.png

    移动端预览报表,向上滑动过程中,当 report0 到达顶端时,report0 和 report2 会合并一起冻结,保持不动,如下图所示:

    SVID_20191209_201413_1.gif

    3)冻结多个不连续组件

    点击冻结组件右边的白色框体部分,勾选展示顺序分别为第二、第五的组件 report0、chart2。

    Snag_447246f1.png

    移动端预览报表,向上滑动过程中,当 report0 到达顶端时,会自动冻结,保持不动。但是当 chart2 到达顶端时,report0 的冻结效果会失效,内容会被覆盖掉,chart2 会自动冻结,保持不动。如下图所示:

    SVID_20191209_202447_1.gif

    3. 注意事项

    2019-12-05版本的 JAR 包,在设计器中选择组件时,需要注意只能通过点击中间白色框体弹出组件列表,右边的倒三角下拉按钮点击之后虽然可以弹出组件列表,但是勾选后保存报表是无效的,不可使用。

    点击倒三角按钮,设置无效:

    94C9B067-D56E-4CD0-BD5B-B87BE22CE15C.GIF

    点击白色框体,设置有效:

    ED7DE1BE-6D9F-4082-BE0A-056ABA5FFF9B.GIF

    注:2019-12-11版本的 JAR 包已修复该问题,点击倒三角按钮选择组件可以正常保存。

    附件列表


    主题: 移动端应用
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!