WDA学习(18):UI Element:TabStrip使用
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使用的更多相关文章
- AngularJS学习 之 UI以及逻辑生成
学习<Angular高级编程>理解如下 要求: 创建如下界面,有导航栏,一个Watchlists面板,面板上有个加号button,一句说明“”Use+to create a list“” ...
- Android学习笔记⑤——UI组件的学习TextView相关
TextView是一个强大的视图组件,直接继承了View,同时也派生出了很多子类,TextView其作用说白了就是在布局中显示文本,有点像Swing编程中的JLabel标签,但是他比JLabel强大的 ...
- Swift学习之UI开发初探
Swift是供iOS和OS X应用编程的新编程语言.相信很多开发者都在学习这门新语言.废话不多说,下面我就来学习使用Swift创建一个简单的UI应用程序. AD: 概述 Apple近日发布了Swift ...
- 【JS】学习18天Jquery Moblie的总结笔记。
现在是2013年11月18日1:53分,从1号开始学习JqueryMoblie(简称JQM),这些天遇到的问题,和走的弯路还真不少. 先做个小总结,做了那么多天的一些收获: ●JQM是一个手机网站/轻 ...
- React 学习(一) ---- React Element /组件/JSX
学习React的时候,你可能听到最多的就是要先学习webpack, babel,要先学会配置然后才能学react 等等,一堆的配置就把我们吓着了,根本就没有心情就学习react了.其实在最开始学习re ...
- Jquery学习---Easy UI 框架
Jquery的easyui 1.1. easyui的目录分析 以 jquery Easy UI 1.3.2 版本学习 demo 实例 locale 国际化信息 plugins 框架一些插件 src 源 ...
- 安卓学习之--UI控件用法 单选 按钮 下拉框
1.单选 .RadioGroup 可将各自不同的RadioButton ,设限于同一个Radio 按钮组,同一个RadioGroup 组里的按钮,只能做出单一选择(单选题). <RadioGro ...
- swift学习之UI控件(一)
// // ViewController.swift // test // // Created by chuangqu on 15/7/23. // Copyright (c) 2015年 ...
- iOS学习之UI可视化编程-StoryBoard
一.StoryBoard与xib 对比: 相同点:都属于IB编程的方式,可以快速构建GUI. 不同点:xib侧重于单文件(单独的控制器或者视图)编辑,storyboard侧重于多页面关联.storyb ...
- iOS学习之UI可视化编程-XIB
一.Interface Builder可视化编程 1.Interface Builder简介: GUI:图形用户界面(Graphical User Interface,简称GUI,又称图形用户接口)是 ...
随机推荐
- 【yum】使用新的centos 6.9系统时,遇到的Yum问题
1,不识别域名 vi /etc/yum.conf 新增: nameserver 1.1.1.1(根据实际配置) 2,Header V3 RSA/SHA256 Signature, key ID 060 ...
- .net core解决时间格式转换问题或日期取当前时间
一.时间格式转换 1.新建一个格式化类DatetimeJsonConverter,继承自JsonConverter,然后重写里面的方法 public class DatetimeJsonConvert ...
- git 修改commit 备注
1.没有push 1.修改最后一次的提交备注 git commit --amend 输入 i 进行编辑模式,修改好以后 esc 退出编辑模式 :wq 保存并退出. 2.修改之前的备注 git reba ...
- Servlet中使用request转发页面引发的500空指针异常
多余的不说如果你出现了我下面这张图的异常错误,可以继续看下去: 上面的错误是因为我们使用的转发地址错误引起的,这样他转发的地址不存在,则会出现空指针异常. register.jsp在我的Tomcat的 ...
- Tooltip 文字提示,居中显示
Tooltip 文字提示有时候在table中无法居中显示,这个可以设置一下 <a-tooltip placement="top" overlayClassName=" ...
- 用windows 定时任务执行kettle的ktr文件,以及问题处理
新建.bat文件,输入下面的批处理语句 d: cd D:\kettle\data-integration\ pan /file D:\etltest\EtltestTrans.ktr 第一行:进入你的 ...
- vue二级联动 编辑
第一步先写布局: 然后写我们的二级联动的方法 getOptionsA() { this.$axios .get('http://localhost:55629/api/GetClassifies?p ...
- 微信小程序图片和签名
图片上传功能 chooseImage(e) { wx.chooseImage({ sizeType: ['original', 'compressed'], //可选择原图或压缩后的图片 source ...
- pycharm—python__________windows下安装
参考地址:https://www.runoob.com/w3cnote/pycharm-windows-install.html 一.安装python 1.pip 和 setuptools ...
- AcWing 791. 高精度加法C++数组实现
高精度加法 a, b均为正整数 #include <iostream> using namespace std; const int N = 100010; int A[N], B[N], ...