IT Mill Toolkit
   Next

IT Mill Toolkit

Reference Manual

IT Mill Toolkit 5.3.1

Copyright © 2000-2009 Oy IT Mill Ltd. All rights reserved.

2009-03-31

Abstract

IT Mill Toolkit enables developers to build high quality browser user interfaces with Java on the server. It provides a library of ready to use high-quality user interface components and defines a clean framework for creating your own components. The focus is on ease of use, re-usability, extensibility and meeting the requirements of large enterprise applications. The toolkit has been used in production since 2001 and it has proven to be suitable for building demanding business applications.

Table of Contents

Preface
1. About This Book
1.1. Prerequisites
1.2. Organization of This Book
1.3. Supplementary Material
1.4. Online Resources
1.5. Support
1. Introduction
1.1. Overview
1.2. Example Application Walkthrough
1.3. Goals and Philosophy
1.4. Background
1.5. Changes in IT Mill Toolkit Release 5
2. Getting Started with IT Mill Toolkit
2.1. Installing IT Mill Toolkit
2.1.1. Installation
2.1.2. Starting the Content Browser
2.1.3. Package Contents
2.1.4. Content Browser Examples
2.2. Getting the Development Environment Up and Running
2.2.1. Installing Java SDK
2.2.2. Installing Eclipse IDE
2.2.3. Installing Apache Tomcat
2.2.4. Firefox and Firebug
2.3. QuickStart with Eclipse
2.3.1. Starting Eclipse
2.3.2. Importing IT Mill Toolkit as a Project
2.3.3. Running the Demo Applications in Eclipse
2.3.4. How to Debug the Demo Applications in Eclipse?
2.3.5. Using QuickStart as a Project Skeleton
2.4. Your First Project with IT Mill Toolkit
2.4.1. Creating the Project
2.4.2. Including IT Mill Toolkit Libraries
2.4.3. Writing the Code
2.4.4. Defining Deployment Descriptor
2.4.5. Ready to Go!
2.4.6. Starting the Web Server
2.4.7. Running and Debugging
3. Architecture
3.1. Overview
3.2. Technological Background
3.2.1. AJAX
3.2.2. Google Web Toolkit
3.2.3. JSON
3.3. Applications as Java Servlet Sessions
3.4. Client-Side Engine
3.5. Events and Listeners
4. Writing a Web Application
4.1. Overview
4.2. Managing the Main Window
4.3. Child Windows
4.3.1. Opening and Closing a Child Window
4.3.2. Window Positioning
4.3.3. Modal Windows
4.4. Handling Events with Listeners
4.5. Referencing Resources
4.5.1. Resource Interfaces and Classes
4.5.2. File Resources
4.5.3. Class Loader Resources
4.5.4. Theme Resources
4.5.5. Stream Resources
4.6. Shutting Down an Application
4.6.1. Closing an Application
4.6.2. Handling the Closing of a Window
4.7. Handling Errors
4.7.1. Error Indicator and message
4.7.2. Notifications
4.7.3. Handling unchecked exceptions
4.8. Setting Up the Application Environment
4.8.1. Creating Deployable WAR in Eclipse
4.8.2. Web Application Contents
4.8.3. Deployment Descriptor web.xml
5. User Interface Components
5.1. Overview
5.2. Abstract Classes and Interfaces
5.3. Common Component Features
5.3.1. Sizing Components through Sizeable interface
5.4. Label
5.5. Link
5.6. TextField
5.7. Rich Text Area
5.8. Date and Time Input
5.8.1. Calendar
5.8.2. DateField Locale
5.9. Button
5.10. Check Box
5.11. Selecting Items
5.11.1. Basic Select Component
5.11.2. Native Selection Component NativeSelect
5.11.3. Radio Button and Check Box Groups with OptionGroup
5.11.4. Twin Column Selection with TwinColSelect
5.11.5. Allowing Adding New Items
5.11.6. Multiple Selection Mode
5.12. Table
5.12.1. Selecting Items in a Table
5.12.2. CSS Style Rules
5.12.3. Table Features
5.12.4. Generated Table Columns
5.13. Tree
5.14. MenuBar
5.15. Embedded
5.15.1. Embedded Objects
5.15.2. Embedded Images
5.15.3. Browser Frames
5.16. Upload
5.17. Form
5.17.1. Form as a User Interface Component
5.17.2. Binding Form to Data
5.17.3. Validating Form Input
5.17.4. Buffering Form Data
5.18. ProgressIndicator
5.18.1. Doing Heavy Computation
5.19. Custom Composite Components
5.19.1. CustomComponent
6. Managing Layout
6.1. Overview
6.2. Background for Layout
6.3. VerticalLayout and HorizontalLayout
6.3.1. Sizing Contained Components
6.4. GridLayout
6.4.1. Sizing Grid Cells
6.5. FormLayout
6.6. Panel
6.7.
6.8. TabSheet
6.9.
6.10. Layout Formatting
6.10.1. Layout Size
6.10.2. Layout Cell Alignment
6.10.3. Layout Cell Spacing
6.10.4. Layout Margins
6.11. Custom Layouts
7. Themes
7.1. Overview
7.2. Introduction to Cascading Style Sheets
7.2.1. Basic CSS Rules
7.2.2. Matching by Element Class
7.2.3. Matching by Descendant Relationship
7.2.4. Notes on Compatibility
7.3. Creating and Using Themes
7.3.1. Styling Standard Components
7.3.2. Using Themes
7.3.3. Theme Inheritance
8. Binding Components to Data
8.1. Overview
8.2. Properties
8.3. Holding properties in Items
8.4. Collecting items in Containers
9. Developing Custom Components
9.1. Overview
9.2. Google Web Toolkit Widgets
9.2.1. Extending an IT Mill Toolkit Widget
9.2.2. Example: A Color Picker GWT Widget
9.2.3. Styling GWT Widgets
9.3. Integrating a GWT Widget
9.3.1. Deserialization of Component State from Server
9.3.2. Serialization of Component State to Server
9.3.3. Example: Integrating the Color Picker Widget
9.4. Defining a Widget Set
9.4.1. GWT Module Descriptor
9.5. Server-Side Components
9.5.1. Server-Client Serialization
9.5.2. Client-Server Deserialization
9.5.3. Extending Standard Components
9.5.4. Example: Color Picker Server-Side Component
9.6. Using a Custom Component
9.6.1. Example: Color Picker Application
9.6.2. Web Application Deployment
9.7. GWT Widget Development
9.7.1. Creating a Widget Project in Eclipse
9.7.2. Importing GWT Installation Package
9.7.3. Creating a GWT Module
9.7.4. Compiling GWT Widget Sets
9.7.5. Ready to Run
9.7.6. Hosted Mode Browser
9.7.7. Out of Process Hosted Mode (OOPHM)
10. Advanced Web Application Topics
10.1. Application-Level Windows
10.1.1. Creating New Application-Level Windows
10.1.2. Creating Windows Dynamically
10.1.3. Closing Windows
10.1.4. Caveats in Using Multiple Windows
10.2. Embedding Applications in Web Pages
10.2.1. Embedding Inside a div Element
10.2.2. Embedding Inside an iframe Element
10.3. Debug and Production Mode
10.3.1. Debug Mode
10.3.2. Analyzing Layouts
10.3.3. Custom Layouts
10.3.4. Debug Functions for Component Developers
10.4. Special Characteristics of AJAX Applications
10.5. Resources
10.5.1. URI Handlers
10.5.2. Parameter Handlers
10.6. Shortcut Keys
10.7. Printing
11. User Interface Definition Language (UIDL)
11.1. API for Painting Components
11.2. JSON Rendering
Bibliography

List of Figures

1.1. General Architecture of IT Mill Toolkit
2.1. IT Mill Toolkit Package Contents
2.2. Development Toolchain and Process
2.3. Firebug Debugger for Firefox
2.4. IT Mill Toolkit demo project imported into Eclipse
2.5. IT Mill Toolkit Content Browser Started Under Eclipse
2.6. Terminating a Launch
2.7. Removing Terminated Launches
2.8. Execution Stopped at Breakpoint in Debug Perspective in Eclipse
2.9. A New Dynamic Web Service Project
2.10. A Ready Project
2.11. Running an IT Mill Toolkit Application
2.12. Debugging an IT Mill Toolkit Application
3.1. IT Mill Toolkit Architecture
3.2. Architecture of IT Mill Toolkit Client-Side Engine
3.3. Class Diagram of a Button Click Listener
4.1. Application Architecture
4.2. Opening a Child Window
4.3. Screenshot of the Modal Window Demo Application
4.4. Resource Interface and Class Diagram
4.5. Screenshot of the stream resource example with an embedded image
4.6. Error indicator active
4.7. Notification
4.8. Notification with Formatting
5.1. UI Component Inheritance Diagram
5.2. The Label Component
5.3. Label Modes Rendered on Screen
5.4. Referencing An Image Resource in Label
5.5. Single- and Multi-Line Text Field Example
5.6. Rich Text Area Component
5.7. Regular English and a Localized Rich Text Area Toolbar
5.8. Example of the Date Field with Default Style
5.9. Example of the Date Field with Calendar Style
5.10. An Example of a Button
5.11. An Example of a Check Box
5.12. Retrieval of the Currently Selected Item
5.13. The Select Component
5.14. Filtered Selection
5.15. Radio Button Group
5.16. Twin Column Selection
5.17. Select Component with Adding New Items Allowed
5.18. Basic Table Example
5.19. Table Selection Example
5.20. Cell Style Generator for a Table
5.21. Components in a Table
5.22. A Table in Normal and Editable Mode
5.23. Table with Generated Columns in Normal and Editable Mode
5.24. A Tree Component as a Menu
5.25. Menu Bar
5.26. Embedded Image
5.27. Upload Component
5.28. Image Upload Example
5.29. Layout of the Form Component
5.30. Form Automatically Generated from a Bean
5.31. Form Fields Generated with a FieldFactory
5.32. Form Validation in Action
5.33. Empty Required Field After Clicking Commit
5.34. The Progress Indicator Component
5.35. Starting Heavy Work
6.1. Component Widths in HorizontalLayout
6.2. The Grid Layout Component
6.3. Expanding Rows and Columns in GridLayout
6.4. A Panel Layout
6.5. A Panel Layout
6.6. A Panel with Light Style
6.7. A Layout With Nested SplitPanels
6.8. A Simple TabSheet Layout
6.9. A TabSheet with Hidden and Disabled Tabs
6.10. A Simple Accordion Layout
6.11. HorizontalLayout with Undefined vs Defined size
6.12. Cell Alignments
6.13. Layout Spacings
6.14. Layout Margins
6.15. Example of a Custom Layout Component
7.1. Theme Contents
7.2. Simple Styling by Element Type
7.3. Matching HTML Element Type and Class
7.4. Matching Only HTML Element Class
7.5. Themeing Login Box Example with Default Theme
7.6. Themeing Login Box Example with Custom Theme
8.1. IT Mill Toolkit Data Model
9.1. Color Picker Module
9.2. GWT Widget Base Class Hierarchy
9.3. Color Picker Widget Without Styling
9.4. Color Picker Widget With Styling
9.5. Annotated Project Contents
9.6. Hosted Mode Browser
9.7. Creating New Launch Configuration
9.8. Naming Launch Configuration
9.9. GWTShell Arguments
9.10. Setting a Breakpoint
9.11. Debugging with Hosted Mode Browser
10.1. Synchronization Error Between Windows with the Same Name
10.2. A Dynamically Created Window
10.3. Opening Windows
10.4. Communication Between Two Application-Level Windows
10.5. Embedded Application
10.6. IT Mill Toolkit Applications Embedded Inside IFrames
10.7. Debug Window
10.8. Debug Window Showing the Result of Analyze layouts.
10.9. Dynamic Resource with URI Parameters
11.1. Debugging UIDL Messages with Firebug

List of Tables

4.1. Types of Notifications
5.1. Size Units
5.2. Content Modes for Label
5.3. Selection Components
5.4. Caption Modes for Selection Components
5.5. Type to Field Mappings in BaseFieldFactory
5.6. Embedded Object Types
6.1. Alignment Constants
6.2. Alignment Bitmasks
6.3. Spacing Style Names
7.1. Default CSS Style Names of IT Mill Toolkit Components
9.1. UIDL Variable Types
10.1. toolkitConfigurations parameters

List of Examples

1.1. HelloWorld.java
2.1. Web.xml Deployment Descriptor for a Project
4.1. web.xml
   Next
   Preface