zoukankan      html  css  js  c++  java
  • WDA演练二:主界面设计(一)

    前面已经完成了登陆界面的开发,下面就是主页面的展示了。

    一、新建菜单表:

    这里说明一下,考虑到简单点,这里只用了两级菜单展示,表里在配置的时候也指挥有一级,二级。

    AUGRP对应前面用户表的GROUP

    ZLEVEL对应层级,最多2级。

    INX是层级对应的序号。

    ID为WDA程序名称。

    LANGU为语言,这里可以做多语言翻译,显示不同语言下的菜单。

    TEXT为菜单显示的名字。

    SUB_LEVEL为上级菜单对应的序号。

    INTERFACE_WINDOW是调用的显示主窗口。

    二、程序设计:

    1.将全局节点拖到MAIN视图中。

    2.新建NODE节点,对应菜单树。

    3.NODE下新建LEAF节点,对应树叶,菜单:

    4.新建NODE的属性:除了EXPAND是WDA_BOOLEAN类型,其他均为STRING类型。

    5.新建LEAF属性:

     三、主页菜单设计:

    1.按通常显示来,抬头是标题或者图片LOGO,上传抬头LOGO

    2.接着前面的来,添加抬头图片到视图:

    3.新建SPLITTER,将页面分为左右两部分。

    4.给SPLITTER添加菜单控制器和右边的显示容器:

    5.右侧添加视图控制器:

    6.左侧加TREE:

    7.将TREE绑定到前面建的节点NODE上:

    8.添加树节点:

    9.添加树叶节点:

    10.节点绑定:

     三、初始化看看效果:

    METHOD init_menu .
    **-------------------------------------------------------------------------
    **                          初始化菜单项
    **
    **        一级菜单               二级菜单
    **
    *
    **-------------------------------------------------------------------------
      DATA lo_nd_node TYPE REF TO if_wd_context_node.
      DATA lo_nd_leaf TYPE REF TO if_wd_context_node.
      DATA lo_el_leaf TYPE REF TO if_wd_context_element.
      DATA ls_leaf TYPE wd_this->element_leaf.
      DATA lt_leaf TYPE wd_this->elements_leaf.
      DATA lo_el_node TYPE REF TO if_wd_context_element.
      DATA ls_node TYPE wd_this->element_node.
      DATA lt_node TYPE wd_this->elements_node.
      DATA l_menuid TYPE i.
    *  DATA lt_auth  TYPE TABLE OF zauth.
    *  DATA ls_auth  TYPE zauth.
    
      lo_nd_node = wd_context->get_child_node( name = wd_this->wdctx_node ).
      lo_nd_node->bind_table( lt_node )."清空节点
    
      DATA: lt_fir_level TYPE TABLE OF zlymenu,
            ls_fir_level TYPE zlymenu.
    
      DATA: lt_sec_level TYPE TABLE OF zlymenu,
            ls_sec_level TYPE zlymenu.
      DATA: lv_char TYPE string.
    
      SELECT * INTO TABLE lt_fir_level FROM zlymenu WHERE augrp = augrp AND zlevel IN (0,1)
        AND langu = sy-langu.
    
      SORT lt_fir_level BY inx.
    
      IF lt_fir_level IS NOT INITIAL.
        SELECT * INTO TABLE lt_sec_level FROM zlymenu
          FOR ALL ENTRIES IN lt_fir_level
          WHERE sub_level = lt_fir_level-inx  AND augrp = augrp AND zlevel = 2
          AND langu = sy-langu.
        SORT lt_sec_level BY sub_level inx.
        LOOP AT lt_fir_level INTO ls_fir_level.
          CLEAR:lt_leaf.
          LOOP AT lt_sec_level INTO ls_sec_level WHERE sub_level = ls_fir_level-inx.
            ls_leaf-leafid = ls_sec_level-id.
            ls_leaf-leafname = ls_sec_level-text.
            ls_leaf-interface_window = ls_sec_level-interface_window.
            APPEND ls_leaf TO lt_leaf.
          ENDLOOP.
          "IF lt_leaf IS NOT INITIAL.
          lv_char = ls_fir_level-inx.
          CONCATENATE 'S' lv_char INTO ls_node-nodeid.
          ls_node-nodename = ls_fir_level-text.
          ls_node-expand = 'X'.
          ls_node-icon_source = 'ICON_OBJECT_FOLDER'.
          l_menuid = l_menuid + 1.
          CALL METHOD lo_nd_node->bind_element
            EXPORTING
              new_item             = ls_node
              set_initial_elements = abap_false
              index                = l_menuid
            RECEIVING
              element              = lo_el_node.
          lo_nd_leaf = lo_el_node->get_child_node( wd_this->wdctx_leaf ).
          lo_nd_leaf->bind_table( lt_leaf ).
          REFRESH lt_leaf.
          "ENDIF.
        ENDLOOP.
      ENDIF.
    
    
    ENDMETHOD.

    将上面的方法在处理LOGON跳转里调用:

    METHOD handlefromlogon .
      DATA lo_nd_zhis_user TYPE REF TO if_wd_context_node.
      DATA lo_el_zhis_user TYPE REF TO if_wd_context_element.
      DATA ls_zhis_user TYPE wd_this->element_zhis_user.
    
    *   navigate from <CONTEXT> to <ZHIS_USER> via lead selection
      lo_nd_zhis_user = wd_context->get_child_node( name = wd_this->wdctx_zhis_user ).
      lo_el_zhis_user = lo_nd_zhis_user->get_element( ).
    *   @TODO handle not set lead selection
      IF lo_el_zhis_user IS INITIAL.
        EXIT.
      ENDIF.
    
      lo_el_zhis_user->get_static_attributes(
        IMPORTING
          static_attributes = ls_zhis_user ).
    
      wd_this->init_menu( ls_zhis_user-augrp ).
    
    
    ENDMETHOD.

    添加事件处理逻辑:

    METHOD onactionselect_item .
      DATA ls_leaf  TYPE wd_this->element_leaf.
      DATA ls_zlymenu TYPE zlymenu.
    
      DATA lo_nd_zhis_user TYPE REF TO if_wd_context_node.
    
      DATA lo_el_zhis_user TYPE REF TO if_wd_context_element.
      DATA ls_zhis_user TYPE wd_this->element_zhis_user.
      DATA lv_augrp TYPE wd_this->element_zhis_user-augrp.
    
    * navigate from <CONTEXT> to <ZHIS_USER> via lead selection
      lo_nd_zhis_user = wd_context->get_child_node( name = wd_this->wdctx_zhis_user ).
    
    * @TODO handle non existant child
    * IF lo_nd_zhis_user IS INITIAL.
    * ENDIF.
    
    * get element via lead selection
      lo_el_zhis_user = lo_nd_zhis_user->get_element( ).
    * @TODO handle not set lead selection
      IF lo_el_zhis_user IS INITIAL.
      ENDIF.
    
    * get single attribute
      lo_el_zhis_user->get_attribute(
        EXPORTING
          name =  `AUGRP`
        IMPORTING
          value = lv_augrp ).
    
    
      IF context_element IS INITIAL.
    
        IF wd_this->iv_context_element IS NOT INITIAL.
          wd_this->iv_context_element->get_static_attributes(
           IMPORTING
             static_attributes = ls_leaf ).
        ENDIF.
    
        IF ls_leaf IS INITIAL.
          SELECT SINGLE * INTO ls_zlymenu FROM zlymenu
            WHERE augrp = lv_augrp
            AND zlevel = 2
            AND sub_level = 0
            AND langu = sy-langu.
          IF sy-subrc EQ 0.
            ls_leaf-leafid = ls_zlymenu-id.
            ls_leaf-leafname = ls_zlymenu-text.
            ls_leaf-interface_window = ls_zlymenu-interface_window.
          ELSE.
            EXIT.
          ENDIF.
    
        ENDIF.
    
      ELSE.
    
        context_element->get_static_attributes(
          IMPORTING
            static_attributes = ls_leaf ).
    
      ENDIF.
    
    * 得到window名称
      DATA l_current_controller TYPE REF TO if_wd_controller.
      DATA l_message_manager    TYPE REF TO if_wd_message_manager.
      DATA lr_view_controller   TYPE REF TO if_wd_view_controller.
      DATA lr_window_controller TYPE REF TO if_wd_window_controller.
      DATA lv_window_name       TYPE string.
    *
      l_current_controller ?= wd_this->wd_get_api( ).
      l_message_manager = l_current_controller->get_message_manager( ).
    
      lr_view_controller = wd_this->wd_get_api( ).
      lr_window_controller = lr_view_controller->get_embedding_window_ctlr( ).
      lv_window_name = lr_window_controller->if_wd_controller~name.
    *
      DATA lv_vusage_name TYPE string.
      lv_vusage_name = 'MAIN_USAGE_0'.
    
      DATA ls_component_usages TYPE wdapi_component_usage.
      DATA l_view  TYPE string.
    
      DATA l_view_controller TYPE REF TO if_wd_view_controller.
      DATA l_view_name TYPE string.
      DATA: s_plug_name TYPE string.
    
    
    *  ls_component_usages-component_usage_name = ls_leaf-leafid."aaaa
      ls_component_usages-embedding_position = 'MAIN/RIGHT'.
    
      DATA: l_view_controller_api TYPE REF TO if_wd_view_controller.
      l_view_controller_api = wd_this->wd_get_api( ).
    
      IF wd_this->component_usage IS NOT INITIAL.
        IF wd_this->component_usage-component_usage->has_active_component( ) IS NOT INITIAL.
          wd_this->component_usage-component_usage->delete_component(  ).
          CALL METHOD l_view_controller_api->remove_dynamic_meta_data
            EXPORTING
              source_window_name        = lv_window_name
              source_vusage_name        = lv_vusage_name
    *         source_plug_name          = s_plug_name
              source_plug_name          = 'TO_WDA'
              target_component_name     = wd_this->component_usage-used_component
              target_component_usage    = wd_this->component_usage-component_usage_name
              target_view_name          = wd_this->old_view
              target_plug_name          = 'DEFAULT'
              target_embedding_position = wd_this->component_usage-embedding_position.
        ENDIF.
      ENDIF.
    
    
      TRY.
          l_view_name = ls_leaf-interface_window.
          lv_window_name = 'ZLY_PORTAL'.
          ls_component_usages-used_component = ls_leaf-leafid.
          ls_component_usages-component_usage_name = ls_leaf-leafid.
          ls_component_usages-component_usage = l_view_controller_api->prepare_dynamic_navigation(
                      source_window_name          = lv_window_name
                      source_vusage_name          = lv_vusage_name
                      source_plug_name            = 'TO_WDA'
                      target_component_name       = ls_component_usages-used_component
                      target_component_usage      = ls_component_usages-component_usage_name
                      target_view_name            = l_view_name
                      target_plug_name            = 'DEFAULT'
                      target_embedding_position   = ls_component_usages-embedding_position ).
    
        CATCH cx_wd_runtime_repository.
          RAISE EXCEPTION TYPE cx_wdr_rt_exception.
          EXIT.
      ENDTRY.
    
    
      DATA lo_cmp_usage TYPE REF TO if_wd_component_usage.
    
      IF ls_component_usages-component_usage->has_active_component( ) IS NOT INITIAL.
        ls_component_usages-component_usage->delete_component(  ).
      ENDIF.
      ls_component_usages-component_usage->create_component( ls_component_usages-used_component ).
      wd_this->component_usage = ls_component_usages.
      wd_this->old_view = l_view_name.
    
    *-------------------------->绑interface结点<----------------------
    
      DATA l_intf_controller     TYPE REF TO ziwci_crm_interface.
      DATA l_wd_controller       TYPE REF TO if_wd_controller.
      DATA l_wd_context          TYPE REF TO if_wd_context.
      DATA l_wd_context_node     TYPE REF TO if_wd_context_node.
    
    
      wd_this->fire_to_WDA_plg( ).
    
      CLEAR ls_component_usages.
    
    
    
    
    ENDMETHOD.

    树叶节点绑定事件:

    METHOD onactionselect_item2 .
      DATA lo_nd_leaf TYPE REF TO if_wd_context_node.
      DATA lo_el_leaf TYPE REF TO if_wd_context_element.
      DATA ls_leaf TYPE wd_this->element_leaf.
    
    
      wd_this->iv_context_element = context_element.
    
      context_element->get_static_attributes(
        IMPORTING
          static_attributes = ls_leaf ).
    
    
      DATA zwdevent TYPE REF TO cl_wd_custom_event.
    
      wd_this->onactionselect_item(
        context_element =  context_element                 " ref to if_wd_context_element
        wdevent = zwdevent                          " ref to cl_wd_custom_event
      ).
    
    ENDMETHOD.

    效果如图:

    程序里默认选择了主页面。取消效果如下:

    到此结束。

  • 相关阅读:
    jQuery自定义漂亮的下拉框插件8种效果演示
    Select-or-Die演示11种美化下拉框select方法
    jQuery超酷下拉插件6种效果演示
    jQuery10种不同动画效果的响应式全屏遮罩层
    jQuery Wheel 环形菜单插件5种效果演示
    js显示隐藏
    js关于函数调用
    php入门
    jquery幻灯片
    Mysql命令大全
  • 原文地址:https://www.cnblogs.com/sapSB/p/11098615.html
Copyright © 2011-2022 走看看