GWT-Bootstrap3中 组件开发文档（三）
12.缩略图
13.警告框
|
类型 |
图样 |
备注 |
|---|---|---|
| 警告框 |
警告框可分为几种：
|
// 新建多个不同类型的 Alert
Alert alert1 = new Alert("Dafault: This is a default alert.",AlertType.DEFAULT);
Alert alert2 = new Alert("Danger: This is a danger alert.",AlertType.DANGER);
Alert alert3 = new Alert("Warning: This is a warning alert.",AlertType.WARNING);
Alert alert4 = new Alert("Success: This is a success alert.",AlertType.SUCCESS);
Alert alert5 = new Alert("Info: This is a Info alert.",AlertType.INFO);
alert1.setDismissable(true); // 设置alert1 状态为 可关闭的
alert3.setDismissable(true); |
14.进度条
|
类型 |
图样 |
备注 |
|---|---|---|
| 进度条 |
可以设置不同类型场景的进度条，可以设置条纹型，同时具有动画效果；可以形成折叠效果； |
// 建立 普通进度条，带有进度提示标签
Progress progress1 = new Progress();
ProgressBar progressBar = new ProgressBar();
progressBar.setPercent(66.8); // 设置 进度条 进度
progressBar.setText("66.8%"); // 显示 目前进度 百分比
progressBar.setType(ProgressBarType.SUCCESS); // 设置进度条 类别，根据不同情境展现相应的效果
progress1.setType(ProgressType.DEFAULT); // 进度条 效果 为默认值
progress1.add(progressBar);
// 建立 条纹效果 的进度条
Progress progress2 = new Progress();
ProgressBar progressBar2 = new ProgressBar();
progressBar2.setPercent(22.2); // 设置 进度条 进度
progressBar2.setText("22.2%");
progressBar2.setType(ProgressBarType.WARNING); // 设置进度条 类别，根据不同情境展现相应的效果
progress2.setType(ProgressType.STRIPED); // 设置 进度条 为 条纹效果
progress2.setActive(true); // 设置 进度条 具有动画效果
progress2.add(progressBar2);
// 设置 折叠效果 的进度条
Progress progress3 = new Progress();
progress3.setActive(true);
progress3.setType(ProgressType.STRIPED);
ProgressBar progressbar31 = new ProgressBar();
progressbar31.setPercent(11.1);
progressbar31.setText("11.1%");
progressbar31.setType(ProgressBarType.INFO);
ProgressBar progressbar32 = new ProgressBar();
progressbar32.setPercent(22.2);
progressbar32.setText("22.2%");
progressbar32.setType(ProgressBarType.DANGER);
ProgressBar progressbar33 = new ProgressBar();
progressbar33.setPercent(33.3);
progressbar33.setText("33.3%");
progressbar33.setType(ProgressBarType.SUCCESS);
progressbar33.setSrOnly(true);
progress3.add(progressbar31);
progress3.add(progressbar32);
progress3.add(progressbar33); |
15.媒体对象
|
类型 |
图样 |
备注 |
|---|---|---|
|
|
|
|
| |
16.列表组
|
类型 |
图样 |
备注 |
|---|---|---|
| 普通列表组 |
可以嵌入 徽章 |
// 新建一个 listgroup,普通列表组
ListGroup listGroup = new ListGroup();
// 建立多个ListGroupItem
ListGroupItem listGroupItem1 = new ListGroupItem();
ListGroupItem listGroupItem2 = new ListGroupItem();
ListGroupItem listGroupItem3 = new ListGroupItem();
ListGroupItem listGroupItem4 = new ListGroupItem();
ListGroupItem listGroupItem5 = new ListGroupItem();
listGroupItem1.setText("listGroupItem1-Danger"); // 设置 列表元素文本内容
listGroupItem1.setType(ListGroupItemType.DANGER);// 设置列表 类型
listGroupItem2.setText("listGroupItem2-default");
listGroupItem2.setType(ListGroupItemType.DEFAULT);
listGroupItem3.setText("listGroupItem3-Info");
listGroupItem3.setType(ListGroupItemType.INFO);
listGroupItem3.add(new Badge("徽章4")); // 为 列表元素添加 徽章
listGroupItem4.setText("listGroupItem4-warning");
listGroupItem4.setType(ListGroupItemType.WARNING);
listGroupItem5.setText("listGroupItem5-success");
listGroupItem5.setType(ListGroupItemType.SUCCESS);
listGroupItem5.add(new Badge("徽章5"));
// 将listGroupItem 添加到 ListGroup中
listGroup.add(listGroupItem1);
listGroup.add(listGroupItem2);
listGroup.add(listGroupItem3);
listGroup.add(listGroupItem4);
listGroup.add(listGroupItem5);
|
|
类型 |
图样 |
备注 |
|---|---|---|
| 链接列表组 |
可以列表组的每个元素添加一个链接 |
// 新建一个Linkgroup
LinkedGroup linkGroup = new LinkedGroup();
// 建立多个 LinkedGroupItem
LinkedGroupItem linkGroupItem1 = new LinkedGroupItem("点击进入绿岸网络","www.iwgame.com");
LinkedGroupItem linkGroupItem2 = new LinkedGroupItem("点击进入百度","www.baidu.com");
LinkedGroupItem linkGroupItem3 = new LinkedGroupItem("点击进入个人博客","www.iwgame.com");
LinkedGroupItemText linkedGroupItemText = new LinkedGroupItemText();
linkedGroupItemText.setText("linkedGroupItemText");
linkGroupItem1.add(linkedGroupItemText); // 为linkGroupItem 添加内容
linkGroupItem1.setActive(true);
linkGroupItem1.setWidth("200px"); // 设置宽度
linkGroupItem2.setWidth("200px");
linkGroupItem3.setWidth("200px");
linkGroup.add(linkGroupItem1);
linkGroup.add(linkGroupItem2);
linkGroup.add(linkGroupItem3); |
|
类型 |
图样 |
备注 |
|---|---|---|
| 下拉列表 |
|
|
// 新建一个ListBox
ListBox listBox = new ListBox();
listBox.setSize("200px", "30px"); // 设置下拉列表大小
// 添加列表元素
listBox.addItem("listBoxItem1");
listBox.addItem("listBoxItem2");
listBox.addItem("listBoxItem3");
listBox.addItem("listBoxItem4"); |
17.面板
|
类型 |
图样 |
备注 |
|---|---|---|
| 普通面板 |
面板种类较多，常用有以下几种：
|
// 定义一个基 面板
Panel panel = new Panel();
panel.setType(PanelType.PRIMARY); // 设置面板类型
// 定义 标题面板
PanelHeader panelHeader = new PanelHeader();
panelHeader.setText("标题面板 ");
// 定义两个PanelBody
PanelBody panelBody = new PanelBody();
panelBody.setText("主体面板");
// 定义两个脚注面板
PanelFooter panelFooter = new PanelFooter();
panelFooter.setText("脚注面板");
// 将标题面板，主体面板，脚注面板 添加到 基面板 中
panel.add(panelHeader);
panel.add(panelBody);
panel.add(panelFooter); |
|
类型 |
图样 |
备注 |
|---|---|---|
| 带表格面板 |
|
|
| |
|
类型 |
图样 |
备注 |
|---|---|---|
| 带列表组的面版 |
|
|
// 定义一个基 面板
Panel panel = new Panel();
panel.setType(PanelType.PRIMARY); // 设置面板类型
// 定义 标题面板
PanelHeader panelHeader = new PanelHeader();
panelHeader.setText("带列表组的面版 ");
// 定义两个PanelBody
PanelBody panelBody = new PanelBody();
panelBody.setText("This is a Demo Panel which has listGroup ;");
// 构建一个列表
ListGroup listGroup = new ListGroup();
ListGroupItem listGroupItem1 = new ListGroupItem();
ListGroupItem listGroupItem2 = new ListGroupItem();
ListGroupItem listGroupItem3 = new ListGroupItem();
listGroupItem1.setText("列表组元素1");
listGroupItem2.setText("列表组元素2");
listGroupItem3.setText("列表组元素3");
listGroupItem1.setType(ListGroupItemType.INFO);
listGroupItem2.setType(ListGroupItemType.DANGER);
listGroupItem3.setType(ListGroupItemType.SUCCESS);
listGroup.add(listGroupItem1);
listGroup.add(listGroupItem2);
listGroup.add(listGroupItem3);
// 定义两个脚注面板
PanelFooter panelFooter = new PanelFooter();
panelFooter.setText("脚注面板");
// 将标题面板，主体面板，脚注面板 添加到 基面板 中
panel.add(panelHeader);
panel.add(panelBody);
panel.add(listGroup);
panel.add(new Br()); // 转到下一行
panel.add(panelFooter); |
18.Well组件
|
类型 |
图样 |
备注 |
|---|---|---|
| Well |
把 Well 用在元素上，能有嵌入（inset）的的简单效果。 |
//新建一个Well
Well well = new Well();
//建立一个Heading
Heading headText = new Heading(HeadingSize.H2,"Look, I am in a Well");
//将HeadText添加到well中
well.add(headText); |
19.描述
|
类型 |
图样 |
备注 |
|---|---|---|
| 描述 |
|
带有描述的短语列表。 |
// 新建Description，水平排列
Description description = new Description();
description.setHorizontal(true); // 设置 水平排列
// 新建DescriptionTitle
DescriptionTitle descriptionTitle = new DescriptionTitle();
descriptionTitle.setText("上海绿岸网络");
descriptionTitle.setMarginLeft(0);
// 新建DescritionData
DescriptionData descriptionData = new DescriptionData();
descriptionData.setText("它是一家以游戏为载体的公司.");
description.add(descriptionTitle);
description.add(descriptionData);
// 新建Description，垂直排列
Description description2 = new Description();
description2.setHorizontal(false); // 设置垂直 排列
// 新建DescriptionTitle2
DescriptionTitle descriptionTitle2 = new DescriptionTitle();
descriptionTitle2.setText("盛大网络: ");
descriptionTitle2.setMarginLeft(70);
// 新建DescritionData2，
DescriptionData descriptionData2 = new DescriptionData();
descriptionData2.setText("它也是一家以游戏为载体的公司.");
descriptionData2.setMarginLeft(70);
description2.add(descriptionTitle2);
description2.add(descriptionData2); |
20. 栅格系统 GridSystems
|
类型 |
图样 |
备注 |
|---|---|---|
水平排列 |
暂时还没有边框，研究中... |
Panel panel = new Panel();
// 构建一个 容器
Container container = new Container();
// 构建一个 4行5列的 栅格
Row row1 = new Row();
Row row2 = new Row();
Row row3 = new Row();
Row row4 = new Row();
// row 必须包含在 Container中，以便为其赋予合适的排列（aligment）和内补（padding）。
container.add(row1);
container.add(row2);
container.add(row3);
container.add(row4);
//首行
Column column11 = new Column(ColumnSize.MD_1);
Column column12 = new Column(ColumnSize.MD_1);
Column column13 = new Column(ColumnSize.MD_2);
Column column14 = new Column(ColumnSize.MD_1);
Column column15 = new Column(ColumnSize.MD_1);
//第二行
Column column21 = new Column(ColumnSize.MD_1);
Column column22 = new Column(ColumnSize.MD_1);
Column column23 = new Column(ColumnSize.MD_2);
Column column24 = new Column(ColumnSize.MD_1);
Column column25 = new Column(ColumnSize.MD_1);
// 第三行
Column column31 = new Column(ColumnSize.MD_1);
Column column32 = new Column(ColumnSize.MD_1);
Column column33 = new Column(ColumnSize.MD_2);
Column column34 = new Column(ColumnSize.MD_1);
Column column35 = new Column(ColumnSize.MD_1);
//第四行
Column column41 = new Column(ColumnSize.MD_1);
Column column42 = new Column(ColumnSize.MD_1);
Column column43 = new Column(ColumnSize.MD_2);
Column column44 = new Column(ColumnSize.MD_1);
Column column45 = new Column(ColumnSize.MD_1);
// 首行标题内容
column11.add(new Text("选择框"));
column12.add(new Text("注册账号"));
column13.add(new Text("注册邮箱"));
column14.add(new Text("性别"));
column15.add(new Text("其他"));
column21.add(new CheckBox());
column22.add(new Text("zhangsan"));
column23.add(new Text("[email protected]"));
column24.add(new Icon(IconType.MALE));
column25.add(images.gwtLogo().createImage());
column31.add(new CheckBox());
column32.add(new Text("Lisi"));
column33.add(new Text("[email protected]"));
column34.add(new Icon(IconType.FEMALE));
column35.add(new Button("Hello"));
column41.add(new CheckBox());
column42.add(new Text("wangwu"));
column43.add(new Text("[email protected]"));
column44.add(new Icon(IconType.MALE));
column45.add(new Anchor("Link",""));
row1.add(column11);
row1.add(column12);
row1.add(column13);
row1.add(column14);
row1.add(column15);
row2.add(column21);
row2.add(column22);
row2.add(column23);
row2.add(column24);
row2.add(column25);
row3.add(column31);
row3.add(column32);
row3.add(column33);
row3.add(column34);
row3.add(column35);
row4.add(column41);
row4.add(column42);
row4.add(column43);
row4.add(column44);
row4.add(column45);
container.add(row1);
container.add(row2);
container.add(row3);
container.add(row4);
panel.add(container);