如何开发移动端首页和导航栏

如何开发移动端首页和导航栏原创

页面开发

插件开发

吴锐雄

6人赞赏了该文章 1,606次浏览编辑于2023年09月14日 15:31:03

关键词：移动端，首页，导航栏

一、需求

开发移动端首页，作为手机进入苍穹的入口。

一些企业办公平台的手机app，例如企业微信、钉钉等，在配置企业应用时，需要一个进入苍穹的首页。

二、思路与方案

1.首页本质上是一个移动表单，可以将多个页面入口集成到首页上。

2.点击底部导航栏时，可以使用ShowType.InContainer的方式打开对应的子页面。

三、实现过程

1.设计导航栏页面

在中间区域添加一个flex容器，用来展示子页面，flex容器控件的标识是kdec_flex_container。

添加工具栏，新增3个按钮，三个按钮分别对应切换到三个界面：借阅、新闻公告、我的。

2.设计三个子页面

注意：开发者需要根据自身业务需求设计子页面，这里仅做一个示例。

设计借阅页面，标识为：kdec_main_bhb

设计公告页面，标识为：kdec_main_bhan

设计我的页面，标识为：kdec_main_bhm

3.开发导航页面插件

使用ShowParameter，InContainer的方式，在flex容器中打开对应的子页面。

关键代码如下：

@Override
public void registerListener(EventObject e) {
    super.registerListener(e);
    // 移动端，监听按钮点击
    addClickListeners("kdec_borrow", "kdec_ann", "kdec_my");
}

@Override
public void click(EventObject evt) {
    super.click(evt);
    if (evt.getSource() instanceof Control) {
        switch ( ((Control)evt.getSource()).getKey() ) {
            case "kdec_borrow": {
                // 点击底部工具栏，借阅按钮
                MobileFormShowParameter showParameter = new MobileFormShowParameter();
                showParameter.setFormId("kdec_main_bhb");
                showParameter.getOpenStyle().setTargetKey("kdec_flex_container");
                showParameter.getOpenStyle().setShowType(ShowType.InContainer);
                getView().showForm(showParameter);
            }
                break;

            case "kdec_ann": {
                // 点击底部工具栏，“公告”按钮，切换到“公告”页面
                MobileFormShowParameter showParameter = new MobileFormShowParameter();
                showParameter.setFormId("kdec_main_bhan");
                showParameter.getOpenStyle().setTargetKey("kdec_flex_container");
                showParameter.getOpenStyle().setShowType(ShowType.InContainer);
                getView().showForm(showParameter);
            }
                break;

            case "kdec_my": {
                // 点击底部工具栏，“我的”按钮，切换到“我的”页面
                MobileFormShowParameter showParameter = new MobileFormShowParameter();
                showParameter.setFormId("kdec_my_bhm");
                showParameter.getOpenStyle().setTargetKey("kdec_flex_container");
                showParameter.getOpenStyle().setShowType(ShowType.InContainer);
                getView().showForm(showParameter);
            }
                break;
        }
    }
}

选择性添加：

如果想要让按钮有选中状态效果，可以click事件添加如下代码

// 点击底部工具栏，首页按钮，让“首页”按钮置蓝色，“新闻公告”、“我的”按钮置灰色
Map fieldMap = new HashMap();
fieldMap.put("imageKey", "/icons/mobile/tab_bar/icon_homepage_64_64.png");
getView().updateControlMetadata("kdec_borrow", fieldMap);
Map fieldMap2 = new HashMap();
fieldMap2.put("imageKey", "/icons/mobile/tab_bar/icon_yy(x)_64_64.png");
getView().updateControlMetadata("kdec_ann", fieldMap2);
Map fieldMap3 = new HashMap();
fieldMap3.put("imageKey", "/icons/mobile/tab_bar/icon_my(x)_64_64.png");
getView().updateControlMetadata("kdec_my", fieldMap3);