1. 概述编辑
1.1 版本
设计器版本 | HTML5移动端展现插件版本 | JAR包版本 | App版本 |
---|---|---|---|
10.0 | 10.4.49 | 2019-12-05 | 10.4.49 |
1.2 应用场景
由于手机屏幕比 PC 端和 Pad 端都小,因此针对以下三种场景的模板制作,手机端需要采用不同的布局。
下面的报表设计场景中,场景一需要手机重布局,而场景二、三不需要手机重布局。
场景一:做好的决策报表含报表块等组件,在 PC 和 Pad 以及手机上共用,在 PC 和 Pad 端都是宽高自适应屏幕或者宽高等比例缩放,但是在手机上没有太大的布局要求,只需要在手机上面流式布局展现,即一行一个组件这种情况。
场景二:在手机上也采用原始布局,PC 端想要和手机共用一套模板,模板设计的时候建议以移动端效果为先。
场景三:在手机上采用原始布局,为手机专门制作的模板。
1.3 功能介绍
手机重布局只能在决策报表的 body 组件的移动端属性下设置,如下图所示:
注:重布局属性是决策报表的整体属性,只有当前控件选择 body 的时候才会有手机重布局属性,设置后是对整个决策报表进行生效的,如果决策报表内部有绝对布局或者 Tab 组件,那么里面的控件也是重布局显示。
手机重布局的设置项包括:
注:不勾选手机重布局时,body 的布局方式即为“保留布局”,除了控件顺序,是不会出现其他设置项的。
内边距:移动端展现时报表内容距离边框上下左右四个方向的距离。
组件间隔:每个组件纵向的间隔距离。
组件冻结:组件冻结后,向上滑动时,该组件固定在顶部不动。
控件顺序:移动端展现时,组件从上到下的排列顺序,设置时可自由拖拽。
注:2019-12-05及之后版本的 JAR 包才能支持在设计器中设置组件冻结。
当决策报表中多个组件在同一行时,以%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\NewbieGuide\决策报表入门示例.frm为例。
如果不勾选手机重布局,效果如下图所示:
勾选了手机重布局后,组件按行显示,如下图所示:
2. 属性设置编辑
下面将通过举例,详细介绍每个属性设置项的移动端预览效果。
2.1 内边距
以%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\NewbieGuide\决策报表入门示例.frm为例。
1)设置该报表的上边距为4时。
移动端预览效果如下图所示:
2)设置该报表的上边距为20时。
移动端预览效果如下图所示:
2.2 组件间隔
以%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\NewbieGuide\决策报表入门示例.frm为例。
1)设置报表的组件间隔为4时。
移动端预览效果如下图所示:
2)设置报表的组件间隔为20时。
移动端预览效果如下图所示:
2.3 组件冻结
组件冻结作用范围如下:
只能选 body 中第一层非容器下的组件( 报表块、图表块、文本等 ),不能设置冻结容器( tab组件 & 绝对画布块 )。
如果是插件化扩展的非容器组件,也可以选。
组件可以多选。
以%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\Phone\others\骑行记录-phone.frm为例。
1)只冻结单个组件
点击冻结组件右边的白色框体部分,勾选展示顺序为第二的组件 report0。
移动端预览报表,向上滑动过程中,当 report0 到达顶端时,会自动冻结,保持不动,如下图所示:
2)冻结多个连续组件
点击冻结组件右边的白色框体部分,勾选展示顺序分别为第二、第三的组件 report0、report2。
移动端预览报表,向上滑动过程中,当 report0 到达顶端时,report0 和 report2 会合并一起冻结,保持不动,如下图所示:
3)冻结多个不连续组件
点击冻结组件右边的白色框体部分,勾选展示顺序分别为第二、第五的组件 report0、chart2。
移动端预览报表,向上滑动过程中,当 report0 到达顶端时,会自动冻结,保持不动。但是当 chart2 到达顶端时,report0 的冻结效果会失效,内容会被覆盖掉,chart2 会自动冻结,保持不动。如下图所示:
3. 注意事项编辑
目前设计器中设置组件冻结,选择组件时,需要注意只能通过点击中间白色框体弹出组件列表,右边的倒三角下拉按钮点击之后虽然可以弹出组件列表,但是勾选后保存报表是无效的,不可使用。
点击倒三角按钮,设置无效:
点击白色框体,设置有效: