登录注册
京东自营 + 国补 iPhone 历史最低价          国家补贴 享8折

Xebcnor

  • 使用 Item 介面管理一組 Property

    Item 介面用來管理一組命名的 Property 對象。每個 Property 由一個標識符（PID）來定義，Item通過 PID 使用方法 getItemProperty()來讀寫其中的 Property。使用 Item 的地方例如 Table 的一行，每個屬性（Property）對應行的每個欄位（列column)。或者是 Tree 的一個節點，以及綁定到表單 From 的數據，此時 Item 中的每個屬性對應的表單中的一個輸入域(Field)。

    Xebcnor
    使用， item， 介面， 管理， property

  • 数据绑定-Property 接口

    Property 接口为 Vaadin 数据模型的基本接口，它提供了读写单个数据对象的标准 API。 一个 Property 对象总是有数据类型的，尽管它支持可选的数据类型转换。Property 的数据可以为任意的 Java 对象，Property 也提供了监听数据变化的事件消息。Property 的读写方法为 getValue()和 setValue() 。getValue() 返回通用的 Object 类型的对象，因此可以强制转换成所需的数据类型。

    Xebcnor
    数据绑定， property， 接口， vaadin， web

  • 数据绑定-概述

    本篇介绍 Vaadin 的数据模型及数据绑定-将数据源绑定到 UI 组件。Vaadin 通过数据绑定可以支持用户提供 UI 组件（界面）直接操作数据模型（显示或者直接修改）。Vaadin 的数据模型分为三个层次： Property, Item 和 Container. 类比 Excel 电子表格，可以分别类比电子表格的单元格，一行和整个表单。Vaadin 数据某些相关的接口和类定义在包 com.vaadin.data 中。

    Xebcnor
    数据绑定， 概述， vaadin， web， 开发

  • 使用主题-创建和应用新主题

    Vaadin 中创建的主题必须放置在 VAADIN/themes 目录下。目录名称即为新的主题名称，新主题中必须包含一个 styles.css 文件。新主题也必须继承某个 Vaadin 内置主题，如：@import "../reindeer/styles.css";.v-app {background: yellow;}前面介绍的 Vaadin 个 UI 组件和布局都可以通过 CSS 修改它们的显示外观。

    Xebcnor
    使用， 主题， 建和， 应用， vaadin

  • 使用主题-概述

    在前面介绍 Vaadin 的 UI 组件及布局时，特地没有介绍这些UI组件对应的 CSS 设置，而是留在这里介绍 Vaadin 主题时一并说明。Vaadin 应用可以通过主题（Theme）来修改界面的外观，用户主题包括 Css 文件，自定义的 HTML 布局及使用的图像等。主题资源(Theme Resource)可以通过 ThemeResource 类访问 。

    Xebcnor
    使用， 主题， 概述， vaadin， web

  • 可視化界面編輯插件

    前面基本介紹了 Vaadin 提供的各種 UI 組件和布局，所以界面都是通過代碼來完成的。安裝 Vaadin的 Eclipse 插件後，可以通過拖拉的方式來開始話設計用戶界面。設計出的界面為 CustomComponent 的派生類。

    Xebcnor
    界面， 插件， vaadin， web， 开发

  • UI 布局-AbsoluteLayout 布局

    AbsoluteLayout 布局允许将其中的UI组件任意指定其位置。方法 addComponent()可以指定相对于AbsoluteLayout 边界的纵横坐标。还可以指定一个Z方向深度值，用来表示 UI 组件的前后顺序。UI 组件的位置是通过 left,right,top,bottom 及 z-index 来指定（CSS对应的属性）。// A 400x250 pixels size layoutAbsoluteLayout layout = new AbsoluteLayout();layout.

    Xebcnor
    ui， 布局， absolutelayout， vaadin， web

  • UI 布局-Accordion 布局

    Accordion 布局类似 TabSheet，不过是以垂直方式安排多个标签页，其使用方法也和 TabSheet 布局类似。// Create the Accordion.Accordion accordion = new Accordion();// Have it take all space available in the layout.accordion.setSizeFull();// Some components to put in the Accordion.Label l1 = new Label("There are no previously saved actions.");

    Xebcnor
    ui， 布局， accordion， vaadin， web

  • UI 布局-TabSheet 布局

    TabSheet 布局支持標籤顯示。TabSheet 布局通過方法 addTab()添加一個標籤頁。// Create an empty tab sheet.TabSheet tabsheet = new TabSheet();// Make the tabsheet shrink to fit the contents.tabsheet.setSizeUndefined();tabsheet.addTab(new Label("Contents of the first tab")).setCaption("first");tabsheet.

    Xebcnor
    ui， 布局， tabsheet， vaadin， web

  • UI 布局-HorizontalSplitPanel 和 VerticalSplitPanel 布局

    HorizontalSplitPanel 和 VerticalSplitPanel 為水平和垂直分割窗口，可以將空間分成上下或左右兩部分。用戶可以通過中間的分隔條調整兩部分的大小。可以通過 setFirstComponent()和 setFirstComponent()為分隔的兩部分設置不同的 UI 組件， addComponent()也可以依次添加兩個UI組件。

    Xebcnor
    ui， 布局， horizontalsplitpanel， verticalsplitpanel， vaadin

  • UI 布局-Panel

    Panel 为带有边框和标题的简单容器类，它的客户区为一布局对象，其缺省布局方式为VerticalLayout，可以通过 setContent 来修改缺省布局。Panel 的标题可以由图标和文字构成。// Create a panel with a caption.final Panel panel = new Panel("Contact Information");panel.addStyleName("panelexample");

    Xebcnor
    ui， 布局， panel， vaadin， web

  • UI 布局-FormLayout 布局

    FormLayout 布局為使用表單（Form）時的預設布局方式。它通常將 Field 組件的標題和輸入域並排以兩列的方式顯示，並可以顯示可選的必填標識。在用戶輸入錯誤時顯示錯誤提示。

    Xebcnor
    ui， 布局， formlayout， vaadin， web

  • UI 布局-GridLayout 布局

    GridLayout 布局使用网格来布置其中的 UI 组件。每个网格提供行，列来定义。每个 UI 组件可以占据一个或多个网格。由网格的坐标(x1,y1,x2,y2)来定义。GridLayout 布局内部使用一个游标(cursor)来记录当前的网格位置，GridLayout 布局添加 UI 组件的顺序为从左到右，从上到下。如果游标越过当前网格的右下角，GridLayout 布局自动添加一行。

    Xebcnor
    ui， 布局， gridlayout， vaadin， web

  • UI 布局-VerticalLayout 和 HorizontalLayout 布局

    VerticalLayout 和 HorizontalLayout 分別垂直和水平安排其中的UI組件。這是 Vaadin 框架中兩個最為重要的布局方式。比如 Window 及其父類 Panel 預設的布局就為 VerticalLayout。這兩種布局的基本用法如下：VerticalLayout vertical = new VerticalLayout ();vertical.addComponent(new TextField("Name"));vertical.addComponent(new TextField("Street address"));

    Xebcnor
    ui， 布局， verticallayout， horizontallayout， vaadin

  • UI 布局-概述

    Vaadin 提供的 UI 组件大体可以分为两类，一类为之前介绍的 UI 组件主要和用户交互。另外一类为布局类，主要目的是用来管理用户界面中所放置的UI组件的大小和位置。在创建 Window 对象时，如果你不想使用缺省的布局，可以着手创建根布局对象，如下例：// Create the main window.Window main = new Window("My Application");setMainWindow(main);

    Xebcnor
    ui， 布局， 概述， vaadin， web

  • UI 组件-自定义组件

    Vaadin 支持自定义组件，典型的用法是将各种 Vaadin 内置的组件组合而成构成自定义组件。 创建自定义组件可以通过派生 CustomComponent 然后调用 setCompositionRoot 为自定义组件设置根容器。

    Xebcnor
    ui， 组件， 自定义， vaadin， web

  • UI 组件-LoginForm 组件

    LoginForm 组件专门用来接受用户输入用户名和密码，并可以自动记住用户输入的用户名和密码。其基本用法如下：// A wrapper with a caption for the login formPanel loginPanel = new Panel("Login");loginPanel.setWidth("250px");LoginForm login = new LoginForm();loginPanel.addComponent(login);LoginForm 组件内部实现使用了 iframe 和静态 HTML 支持其功能。

    Xebcnor
    ui， 组件， loginform， vaadin， web

  • UI 组件-Slider 组件

    Slider 组件可以显示为垂直或是水平滑动条，可以使用鼠标拖动来设置其值。 其基本使用如下：// Create a vertical sliderfinal Slider vertslider = new Slider(1, 100);vertslider.setOrientation(Slider.ORIENTATION_HORIZONTAL);// Shows the value of the vertical sliderfinal Label vertvalue = new Label();vertvalue.setSizeUndefined();

    Xebcnor
    ui， 组件， slider， vaadin， web

  • UI组件-ProgressIndicator组件

    ProgressIndicator 组件显示进程条，ProgressIndicator 组件定时向服务器查询其当前值，如果值有变化，则更新进程条进度。Web 应用本身无需实现任何查询服务器的操作，查询由ProgressIndicator 组件自动完成。ProgressIndicator 组件的值域为0.0到1.0之间。缺省的查询(polling)间隔为1秒，可以使用setPollingInterval 修改。

    Xebcnor
    ui， 组件， progressindicator， vaadin， web

  • UI组件-Form组件

    大部分的 Web 应用都包含窗体(Form)，Vaadin 中的 Form 组件提供了创建窗体的简洁方法。窗体中的填充域可以直接由绑定的数据源自动生成。BeamItem 适配器(Adapter)支持使用 Java Bean 对象或是普通的 Java 对象做为数据源。 Form 组件支持窗体数据的缓存从而只需在填写 Form 完成后一次性提交。Form 组件从 Layout 派生，可以有边框，标题，描述以及错误提示标识。

    Xebcnor
    ui， 组件， form， vaadin， web
上一页 下一页

个人简介

  1. Xebcnor

  2. 前端学习 GO GO GO

  3. 获得 22643 积分

  4. https://nowjava.com/creator/10010

热门标签

关注时代Java

Copyright © 2014-2024NowJava. All Rights Reserved. 时代Java 版权所有 京ICP备14059627号-7

关注时代Java