可折叠的SWT面板

 

一个可折叠的SWT写的面板,点击面板能够显示出隐藏的控件,其中折叠区域的DataTime是日期时间控件,如果想正常显示这个控件的效果,一定要把eclipse换成最新的eclipse3.3,我在官网上看到的最新版是eclipse3.3M6;

SWT-Designer要用SWT-Designer6.0,只有这个版本的SWT-Designer才支持eclipse3.3里面的时间控件。

我在eclipse SWT/Jface核心应用这本书里面看到,作者利用在rcp中利用eclipse表单实现了一个可折叠的面板,书中也提到了SWT可以用eclipse表单,但是没有具体的实现代码,我利用书中内容实现了一个在SWT中应用eclipse表单。

下面是代码: 

package  com.lw.swt;

import  org.eclipse.swt.SWT;
import  org.eclipse.swt.custom.StackLayout;
import  org.eclipse.swt.layout.FillLayout;
import  org.eclipse.swt.layout.FormAttachment;
import  org.eclipse.swt.layout.FormData;
import  org.eclipse.swt.layout.FormLayout;
import  org.eclipse.swt.layout.GridData;
import  org.eclipse.swt.layout.GridLayout;
import  org.eclipse.swt.layout.RowLayout;
import  org.eclipse.swt.layout.grouplayout.GroupLayout;
import  org.eclipse.swt.layout.grouplayout.LayoutStyle;
import  org.eclipse.swt.widgets.Button;
import  org.eclipse.swt.widgets.Composite;
import  org.eclipse.swt.widgets.DateTime;
import  org.eclipse.swt.widgets.Display;
import  org.eclipse.swt.widgets.Label;
import  org.eclipse.swt.widgets.Shell;
import  org.eclipse.swt.widgets.Text;
import  org.eclipse.ui.forms.events.ExpansionAdapter;
import  org.eclipse.ui.forms.events.ExpansionEvent;
import  org.eclipse.ui.forms.widgets.ExpandableComposite;
import  org.eclipse.ui.forms.widgets.FormToolkit;
import  org.eclipse.ui.forms.widgets.ScrolledForm;
import  org.eclipse.ui.forms.widgets.Section;
import  org.eclipse.ui.forms.widgets.TableWrapLayout;

public   class  NeTest  ... {

    
/** *//**
     * Launch the application
     * 
@param args
     
*/

    
public static void main(String[] args) ...{
        
final Display display = Display.getDefault();
        
final Shell shell = new Shell();
        shell.setSize(
500375);
        shell.setText(
"SWT Application");
        shell.setLayout(
new FillLayout());
        
//创建表单对象
        FormToolkit ft = new FormToolkit(shell.getDisplay());
        
//通过表单工具对象创建可滚动的表单对象
        final ScrolledForm form = ft.createScrolledForm(shell);
        
//表单文本
        form.setText("swt表单example");
                                          
//设置表单布局
        form.getBody().setLayout(new TableWrapLayout());            
        
//创建可折叠的面板
        ExpandableComposite ec = ft.createExpandableComposite(form.getBody(), 
                                                                                                          ExpandableComposite.TWISTIE);
        ec.setText(
"可折叠面板ExpandableComposite");
        
//定义字符串
        String txt = "测试";
        
//创建一个标签并显示字符串
        Label lb = ft.createLabel(ec, txt,SWT.WRAP);
        
//将Label作为折叠面板的折叠区域
        ec.setClient(lb);
        
//为折叠面板添加展开 折叠的监听器
        ec.addExpansionListener(new ExpansionAdapter()...{
            
public void expansionStateChanged(ExpansionEvent e )...{
                
//根据部件的新尺寸重新定位和更新滚动条
                form.reflow(true);
            }

        }
);
                        
        
//创建内容区域  样式TWISTIE  显示背景标题TITLE_BAR
        Section st = ft.createSection(form.getBody(), Section.TWISTIE|Section.TITLE_BAR);
        st.setText(
"内容区域Section");
        
//创建一个面板 作为内容折叠区域放置的控件
        Composite cs = ft.createComposite(st);
        cs.setLayout(
new GridLayout());
        Button btt1;
        Button btt2;
        Text text;
        btt1 
= ft.createButton(cs,"系统资料",SWT.TOGGLE | SWT.FLAT | SWT.BORDER);
        btt2 
= ft.createButton(cs,"个人资料", SWT.TOGGLE);
        text 
= ft.createText(cs, txt, SWT.NONE);
        text.setText(
"填写数据");
        st.setClient(cs);        
        
//为折叠面板添加展开 折叠的监听器
        st.addExpansionListener(new ExpansionAdapter()...{
            
public void expansionStateChanged(ExpansionEvent e )...{
                
//根据部件的新尺寸重新定位和更新滚动条
                form.reflow(true);
            }

        }
);
        DateTime dt1 
= new DateTime(cs,SWT.CALENDAR);
        DateTime time 
= new DateTime(cs,SWT.TIME);
        DateTime data 
= new DateTime(cs,SWT.DATE); 
        shell.open();
        shell.layout();
        
while (!shell.isDisposed()) ...{
            
if (!display.readAndDispatch())
                display.sleep();
        }

        ft.dispose();
        display.dispose();
    }

}


CALENDAR,TIME,DATE是DateTime 显示的三种形式,具体的效果大家自己运行代码看看吧,我的图帖不上来

DateTime 的用法如下很简单的就一行代码就能出来:

DateTime dt1 = new DateTime(cs,SWT.?);其中“?” 代表调用CALENDAR,TIME,DATE中的任何一个。
我的开发环境 eclipse3.3M6+SWT-Designer6.0

谁能告诉我怎么贴图啊,我的图总是贴不上来

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现可拖动的vue折叠面板,需要先引入一个支持拖动排序的库,例如`Sortable.js`,然后再结合CSS样式来实现。 这里提供一个示例代码,仅供参考: ```html <template> <div class="panel-group"> <div v-for="(item, index) in items" :key="item.id" class="panel" :data-id="index"> <div class="panel-heading" @click="toggle(index)"> {{ item.title }} </div> <div class="panel-collapse" :class="{ 'in': item.open }"> <div class="panel-body"> {{ item.content }} </div> </div> </div> </div> </template> <script> import Sortable from 'sortablejs' export default { data() { return { items: [ { id: 1, title: '折叠面板1', content: '折叠面板1的内容', open: false }, { id: 2, title: '折叠面板2', content: '折叠面板2的内容', open: false }, { id: 3, title: '折叠面板3', content: '折叠面板3的内容', open: false } ] } }, mounted() { // 初始化拖拽排序 const el = document.querySelector('.panel-group') Sortable.create(el, { animation: 150, handle: '.panel-heading', onEnd: evt => { const newIndex = evt.newIndex const oldIndex = evt.oldIndex const item = this.items.splice(oldIndex, 1)[0] this.items.splice(newIndex, 0, item) } }) }, methods: { toggle(index) { this.items[index].open = !this.items[index].open } } } </script> <style> .panel-group { margin-bottom: 20px; } .panel { margin-bottom: 0; border-radius: 0; border: none; box-shadow: none; } .panel-heading { cursor: pointer; background-color: #f5f5f5; } .panel-heading:hover { background-color: #ddd; } .panel-collapse { height: 0; overflow: hidden; transition: height 0.3s ease-out; } .panel-collapse.in { height: auto; overflow: visible; } .panel-body { padding: 15px; } </style> ``` 在这个示例中,我们使用了`Sortable.js`库来实现拖拽排序,然后在`mounted`钩子函数中初始化拖拽排序。同时,我们也定义了CSS样式来美化折叠面板的样式,包括折叠面板的背景色、边框、阴影、标题的样式等等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值