1.11 UI Element:Tabstrip使用

本实例显示UI Element:Tabstrip的使用。

1.创建Component;

2.选择Layout页签,设置页面;

创建UI Element:Tabstrip,插入两个Tab;

Tab1 ID: T_TAB1;

Tab2 ID:T_TAB2;

其中Tab1,Tab2简单显示TextView;

创建Events对应Action:

TAB_CLOSE:当Tab关闭时调用;

TAB_SELECT:当Tab选择切换时调用;

3.设置Tab属性;

closeable:勾选上表示Tab右上角可以勾选叉掉,触发TAB_CLOSE方法;

visible:设置绑定第四步创建的Context节点值,实现动态控制;

4.创建Context节点;

TAB1_VISIBLE:boolean类型,控制Tab1是否可见;

TAB2_VISIBLE:boolean类型,控制Tab2是否可见;

5.初始化显示两个Tab,INIT_TAB方法在WDDOINIT中调用;

method INIT_TAB .
DATA:lo_node TYPE REF TO if_wd_context_node.
DATA:lo_element TYPE REF TO if_wd_context_element.
DATA:ls_tabconfig TYPE wd_this->Element_tab_config. lo_node = wd_context->get_child_node( name = wd_this->WDCTX_TAB_CONFIG ).
"初始值
ls_tabconfig-tab1_visible = abap_true.
ls_tabconfig-tab2_visible = abap_true.
"绑定值
lo_node->bind_structure( new_item = ls_tabconfig set_initial_elements = abap_true ).
endmethod. 

6.实现TAB_SELECT方法,因为是Action,所以方法名ONACTION开头;

method ONACTIONTAB_SELECT .
DATA:lv_msg TYPE string.
"当tab选择时,获取选择tab
lv_msg = wdevent->get_string( name = 'TAB' ).
lv_msg = '选择Tab:' && lv_msg.
wd_comp_controller->show_msg( msg = lv_msg msg_type = 'S' ).
endmethod. 

7.实现TAB_CLOSE方法;

method ONACTIONTAB_CLOSE .
DATA:lo_node TYPE REF TO if_wd_context_node.
DATA:lo_element TYPE REF TO if_wd_context_element.
DATA:ls_tabconfig TYPE wd_this->Element_TAB_CONFIG.
DATA:lv_name TYPE string. lv_name = wdevent->get_string( 'TAB' ).
lo_node = wd_context->get_child_node( name = wd_this->WDCTX_TAB_CONFIG ).
lo_node->get_static_attributes( IMPORTING static_attributes = ls_tabconfig ).
"点击close时,设置Tab不可见
IF lv_name cs 'T_TAB1'.
CLEAR ls_tabconfig-tab1_visible.
ELSEIF lv_name cs 'T_TAB2'.
CLEAR ls_tabconfig-tab2_visible.
ENDIF. lo_node->bind_structure( new_item = ls_tabconfig set_initial_elements = abap_true ).
endmethod. 

8.执行显示,选择Tab2时,获取选择的Tab ID;

WDA学习(18):UI Element:TabStrip使用的更多相关文章

  1. AngularJS学习 之 UI以及逻辑生成

    学习<Angular高级编程>理解如下 要求: 创建如下界面,有导航栏,一个Watchlists面板,面板上有个加号button,一句说明“”Use+to create a list“” ...

  2. Android学习笔记⑤——UI组件的学习TextView相关

    TextView是一个强大的视图组件,直接继承了View,同时也派生出了很多子类,TextView其作用说白了就是在布局中显示文本,有点像Swing编程中的JLabel标签,但是他比JLabel强大的 ...

  3. Swift学习之UI开发初探

    Swift是供iOS和OS X应用编程的新编程语言.相信很多开发者都在学习这门新语言.废话不多说,下面我就来学习使用Swift创建一个简单的UI应用程序. AD: 概述 Apple近日发布了Swift ...

  4. 【JS】学习18天Jquery Moblie的总结笔记。

    现在是2013年11月18日1:53分,从1号开始学习JqueryMoblie(简称JQM),这些天遇到的问题,和走的弯路还真不少. 先做个小总结,做了那么多天的一些收获: ●JQM是一个手机网站/轻 ...

  5. React 学习(一) ---- React Element /组件/JSX

    学习React的时候,你可能听到最多的就是要先学习webpack, babel,要先学会配置然后才能学react 等等,一堆的配置就把我们吓着了,根本就没有心情就学习react了.其实在最开始学习re ...

  6. Jquery学习---Easy UI 框架

    Jquery的easyui 1.1. easyui的目录分析 以 jquery Easy UI 1.3.2 版本学习 demo 实例 locale 国际化信息 plugins 框架一些插件 src 源 ...

  7. 安卓学习之--UI控件用法 单选 按钮 下拉框

    1.单选 .RadioGroup 可将各自不同的RadioButton ,设限于同一个Radio 按钮组,同一个RadioGroup 组里的按钮,只能做出单一选择(单选题). <RadioGro ...

  8. swift学习之UI控件(一)

    // //  ViewController.swift //  test // //  Created by chuangqu on 15/7/23. //  Copyright (c) 2015年 ...

  9. iOS学习之UI可视化编程-StoryBoard

    一.StoryBoard与xib 对比: 相同点:都属于IB编程的方式,可以快速构建GUI. 不同点:xib侧重于单文件(单独的控制器或者视图)编辑,storyboard侧重于多页面关联.storyb ...

  10. iOS学习之UI可视化编程-XIB

    一.Interface Builder可视化编程 1.Interface Builder简介: GUI:图形用户界面(Graphical User Interface,简称GUI,又称图形用户接口)是 ...

随机推荐

  1. H5移动端跳转唤起QQ在线客服与跳转支付宝

    以下两段代码都是找了很久的,在某个删库跑路的支付商那里找到的! H5移动端跳转QQ 实现在线客服 <a href="mqqwpa://im/chat?chat_type=wpa& ...

  2. SpringBoot容器化的多环境配置

    SpringBoot容器化的多环境配置 部署通常会有多个环境,如"dev"/"test"/"prod"等环境 容器化部署通常使用环境变量,而 ...

  3. MobaXterm激活专业版

    本文思路来自 https://github.com/flygon2018/MobaXterm-keygen 有python 环境 并且不看英文的可以继续往下 不然直接访问这个地址也行. 1.需要一个大 ...

  4. js复选框,三层结构

    最终实现效果如下 html+css如下 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 < ...

  5. Angular响应式表单验证输入(跨字段验证、异步API验证)

    一.跨字段验证 1.新增验证器 import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms'; exp ...

  6. nnlog 日志模块

    python自带的logging模块理解起来比较费劲,直接pip install nnlog即可 1 import nnlog 2 log = nnlog.Logger(file_name='my.l ...

  7. 记录 springboot 整合swagger2 出现documentationPluginsBootstrapper&&NullPointerException异常

    记录 由于springboot版本高 整合swagger2出现null异常 springboot 版本: swagger2 依赖版本: 出现的异常: 解决方案: application 添加如下依赖 ...

  8. automagic webUI 自动化

    https://www.cnblogs.com/tsbc/p/6244268.html

  9. AcWing 839. 模拟堆 2022/5/30

    关键代码: void head_swap(int a, int b){ swap(ph[hp[a]], ph[hp[b]]); swap(hp[a], hp[b]); swap(h[a], h[b]) ...

  10. axios和ajax对响应是文件流用blob处理

    先看axios请求处理,下载文件 this.$axios.get(api.exportMortgageOrderExcelVisit, { params: params, responseType: ...