文本描述了时间轴控件的需求背景、实现方案及具体实现过程。需求背景包括在页面或动态表单上使用时间轴控件以及通过切换日期来展示不同的行程安排。实现方案包括在页面上添加时间轴控件并通过插件展示行程信息,以及通过重写属性变化方法实现日期切换时行程信息的更新和样式的修改。具体实现过程展示了如何在页面上创建Flex面板并添加日期控件和时间轴控件,编写插件类来注册控件并处理日期变化事件,从而根据所选日期显示相应的行程信息。插件类中包括获取行程数据的方法,以及在日期变化时更新时间轴配置的逻辑。
关键词: 时间轴控件
一、需求背景
1.1时间轴控件在页面或者在动态表单上如何使用
1.2切换日期在时间轴上显示不同的行程安排
二、实现方案
2.1在页面上添加时间轴控件,通过插件实现时间轴上展示行程信息
2.2通过重写propertyChanged方法实现切换日期切换时间轴上的行程信息跟样式
三、实现过程
3.1创建一个空白的单据页面,在页面上添加Flex面板,在Flex面板中添加日期控件跟时间轴控件如下图1所示:
图1
3.1编写插件类,将插件注册到页面插件中,日期控件缺省值设置2022-03-14这个日期,如下图3.1所示:页面预览的时候就会显示当天的行程,我这边代码写的日期2022-03-14具体日期根据需要去设置,这样会显示出默认的行程。
图3.1
public class TimeLineFormPlugin extends AbstractFormPlugin { private final static String KEY_TIMELINE = "kdec_timelineap"; private final static String KEY_DATE_FIELD = "kdec_datefield"; @Override public void beforeBindData(EventObject e) { // TODO Auto-generated method stub super.beforeBindData(e); Date date = (Date) this.getModel().getValue(KEY_DATE_FIELD); handTimeLine(date); } @Override public void registerListener(EventObject e) { // TODO Auto-generated method stub super.registerListener(e); this.addClickListeners(KEY_TIMELINE); } @Override public void click(EventObject evt) { // TODO Auto-generated method stub super.click(evt); System.out.println(); } private void handTimeLine(Date date) { if (date != null) { Map<String, Object> dayTrip = this.getData(); SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd"); String str = sdf.format(date); List<Map<String, Object>> datas = (List<Map<String, Object>>) dayTrip.get(str); if (datas != null && datas.size() > 0) { Timeline timeline = this.getView().getControl(KEY_TIMELINE); // 新的时间轴选项配置 List<TimelineOption> timelineOptions = new ArrayList<>(datas.size()); for (Map<String, Object> data : datas) { TimelineOption timelineOption = new TimelineOption(); // 设置内容标题和内容详情 timelineOption.setContent(new TimelineContentOption(new LocaleString((String) data.get("title")), new LocaleString((String) data.get("content")))); // 设置标签标题和标签内容 timelineOption.setLabel(new TimelineLabelOption(new LocaleString((String) data.get("day")), new LocaleString((String) data.get("time")))); timelineOptions.add(timelineOption); } // 设置新的时间轴配置,发送给前端 timeline.setClientTimelineOptions(timelineOptions); } } } private Map<String, Object> getData() { // 用户行程信息数据 Map<String, Object> dayTrip = new HashMap<String, Object>(); List<Map<String, Object>> datas = new ArrayList<Map<String, Object>>(); Map<String, Object> map = new HashMap<String, Object>(); map.put("day", "03-14"); map.put("time", "09:00"); map.put("title", "深圳-厦门"); map.put("content", "高铁,五人,预计3小时"); datas.add(map); map = new HashMap<String, Object>(); map.put("day", "03-14"); map.put("time", "12:00"); map.put("title", "午餐"); map.put("content", "到达厦门,安排午餐"); datas.add(map); map = new HashMap<String, Object>(); map.put("day", "03-14"); map.put("time", "14:00"); map.put("title", "入住"); map.put("content", "餐后到达预定酒店安排入住"); datas.add(map); dayTrip.put("2022-03-14", datas); datas = new ArrayList<Map<String, Object>>(); map = new HashMap<String, Object>(); map.put("day", "03-15"); map.put("time", "09:00"); map.put("title", "酒店-公司"); map.put("content", "参与XX会议"); datas.add(map); map = new HashMap<String, Object>(); map.put("day", "03-15"); map.put("time", "12:00"); map.put("title", "午餐"); map.put("content", "会议午餐,会后统一安排在XX就餐"); datas.add(map); map = new HashMap<String, Object>(); map.put("day", "03-15"); map.put("time", "14:00"); map.put("title", "会议"); map.put("content", "餐后进入会场"); datas.add(map); map = new HashMap<String, Object>(); map.put("day", "03-15"); map.put("time", "18:00"); map.put("title", "酒店"); map.put("content", "酒店整理会议纪要"); datas.add(map); dayTrip.put("2022-03-15", datas); return dayTrip; } }
3.2 实现切换日期显示不同的行程,在插件类中重新属性修改事件,并且修改显示样式
@Override public void propertyChanged(PropertyChangedArgs e) { // TODO Auto-generated method stub super.propertyChanged(e); String fieldKey = e.getProperty().getName(); if (StringUtils.equals(KEY_DATE_FIELD, fieldKey)) { // TODO 在此添加业务逻辑 ChangeData[] change = e.getChangeSet(); for (ChangeData changeData : change) { Date date = (Date) changeData.getNewValue(); if (date == null) return; clearTimeLine(); handTimeLine(date); setStyle(); } } } private void clearTimeLine() { Timeline timeline = this.getView().getControl(KEY_TIMELINE); timeline.setTimelineOptions(null); } private void setStyle() { Map<String, Object> itemStyle = new HashMap<String, Object>(); itemStyle.put(ClientProperties.ForeColor, "red"); this.getView().updateControlMetadata(KEY_TIMELINE, itemStyle); }
3.3 将插件类注册到页面插件中如下图2所示:
图2
四、效果图
4.1打开页面默认时间轴上显示行程信息如下图3所示:
图3
4.2重写父类的改变事件后实现的功能如下图4所示:
图4
五、开发环境版本
不限,本样例采用的轻量级环境,版本是: 苍穹版本号 COSMICV4.0.014.0 星瀚版本号 CONSTELLATIONV4.0.014.0
六、注意事项
在后台添加数据的时候一定对应上日期默认日期,日期控件一定要打开即时触发值更新否则属性切换的时候不会触发属性切换事件
七、参考资料
参考附件中的代码补丁
元数据直接在开发平台导入
源代码直接在开发工具idea/eclipse中导入
时间轴控件.zip(6.45KB)
推荐阅读