如何使用苍穹PC端界面时间轴控件

关键词: 时间轴控件

一、需求背景

        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

六、注意事项

        在后台添加数据的时候一定对应上日期默认日期，日期控件一定要打开即时触发值更新否则属性切换的时候不会触发属性切换事件

七、参考资料

开发平台

学习成长中心

参考附件中的代码补丁

1. 元数据直接在开发平台导入

2. 源代码直接在开发工具idea/eclipse中导入