如何开发新手引导

如何开发新手引导原创

cosmicstudio

14人赞赏了该文章 4,725次浏览编辑于2022年04月15日 13:53:41

关键词：新手引导

一、需求

在苍穹页面增加新手引导帮助用户快速熟悉页面

二、思路与方案

可以通过showGuide指令来实现苍穹新手引导功能

三、实现过程

通过data-page-id来定位引导点

图1

通过插件发送showGuide指令:

package kd.comt.community.plugin;

import kd.bos.dataentity.resource.ResManager;
import kd.bos.form.IClientViewProxy;
import kd.bos.form.container.Tab;
import kd.bos.form.control.events.TabSelectEvent;
import kd.bos.form.control.events.TabSelectListener;
import kd.bos.form.plugin.AbstractFormPlugin;

import java.util.*;

public class MainPagePluginExt extends AbstractFormPlugin implements TabSelectListener {

    @Override
    public void registerListener(EventObject e) {
        super.registerListener(e);
        Tab tab = (Tab) this.getView().getControl("tabap");
        if (tab != null) {
            tab.addTabSelectListener(this);
        }
    }


    @Override
    public void tabSelected(TabSelectEvent tabSelectEvent) {
        IClientViewProxy proxy = (IClientViewProxy)this.getView().getService(IClientViewProxy.class);
        Map<String, Object> guideItemsData = new HashMap();
        List<Map<String, Object>> guideItems = new ArrayList();
        Map<String, Object> guideFlexApp = this.getGuideItemData("/images/pc/emotion/emotional_personal_center_100_100.png", ResManager.loadKDString("业务云-应用", "MainPagePlugin_3", "bos-portal-plugin", new Object[0]), ResManager.loadKDString("每个业务云下提供了丰富的应用支持你操作体验", "MainPagePlugin_4", "bos-portal-plugin", new Object[0]), "1", 0, 0, this.getView().getPageId(), "appbeta_homepagetab", 1, "", 0, 0, 0);
        guideItems.add(guideFlexApp);
        guideItemsData.put("guideItems", guideItems);
        proxy.addAction("showGuide", guideItemsData);
    }

    /**
     *
     * @param icourl   图标链接地址
     * @param title    标题
     * @param content  具体描述内容
     * @param step    显示哪些步数操作(比如上一步,下一步,跳过)
     * @param tiptop   信息框显示位置的偏移
     * @param tipleft  信息框显示位置的偏移
     * @param pageId   要高亮的控件所在页面的
     * @param key     页面上要高亮的控件id
     * @param showPos  显示位置(上下左右居中)01234
     * @param extendPic    模拟控件弹出面板效果图片链接
     * @param alltop   整个信息框的偏移
     * @param allleft  整个信息框的偏移
     * @param arrowOffset 三角箭头偏移量
     * @return
     */
    private Map<String, Object> getGuideItemData(String icourl, String title, String content, String step, int tiptop, int tipleft, String pageId, String key, int showPos, String extendPic, int alltop, int allleft, int arrowOffset) {
        Map<String, Object> guideItem = new HashMap();
        Map<String, Object> tip = new HashMap();
        tip.put("icourl", icourl);
        tip.put("title", title);
        tip.put("content", content);
        tip.put("step", step);
        Map<String, Object> offset = new HashMap();
        offset.put("top", tiptop);
        offset.put("left", tipleft);
        tip.put("offset", offset);
        tip.put("arrowOffset", arrowOffset);
        guideItem.put("tip", tip);
        guideItem.put("pageId", pageId);
        guideItem.put("key", key);
        guideItem.put("showPos", showPos);
        guideItem.put("extendPic", extendPic);
        Map<String, Object> alloffset = new HashMap();
        alloffset.put("top", alltop);
        alloffset.put("left", allleft);
        guideItem.put("offset", alloffset);
        return guideItem;
    }

}