IT Mill Toolkit

Reference Manual

IT Mill Toolkit 5.3.0

2009-03-03

Abstract

IT Mill Toolkit enables developers to build high quality browser user interfaces with Java on 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 is shown 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
I. Developer's Guide
1. Introduction
1.1. Overview
1.1.1. Goals and Philosophy
1.1.2. Background
1.1.3. Changes in IT Mill Toolkit Release 5
1.2. Example Application Walkthrough
1.2.1. Hello World!
1.2.2. Calculator
1.3. What's Inside the IT Mill Toolkit Package?
1.3.1. Installing
1.3.2. Package Contents
1.3.3. Starting the Content Browser
1.3.4. Running the Demo Applications
1.4. Getting the Development Environment Up and Running
1.4.1. Installing Java SDK
1.4.2. Installing Eclipse IDE
1.4.3. Installing Apache Tomcat
1.4.4. Firefox and Firebug
1.5. QuickStart with Eclipse
1.5.1. Importing IT Mill Toolkit as a Project
1.5.2. How to Run the Demo Applications in Eclipse?
1.5.3. How to Debug the Demo Applications in Eclipse?
1.5.4. Using QuickStart as a Project Skeleton
1.6. Your First Project with IT Mill Toolkit
1.6.1. Creating the Project
1.6.2. Including IT Mill Toolkit Libraries
1.6.3. Writing the Code
1.6.4. Defining Deployment Descriptor
1.6.5. Ready to Go!
1.6.6. Starting the Web Server
1.6.7. Running and Debugging
2. Architecture
2.1. Overview
2.2. Technological Background
2.2.1. AJAX
2.2.2. Google Web Toolkit
2.2.3. JSON
2.3. Client-Side Engine
2.4. Events and Listeners
3. Writing a Web Application
3.1. Overview
3.2. Managing the Main Window
3.3. Child Windows
3.3.1. Opening and Closing a Child Window
3.3.2. Window Positioning
3.3.3. Modal Windows
3.4. Application-Level Windows
3.4.1. Creating New Application-Level Windows
3.4.2. Creating Windows Dynamically
3.4.3. Closing Windows
3.4.4. Caveats in Using Multiple Windows
3.5. Referencing Resources
3.5.1. Resource Interfaces and Classes
3.5.2. File Resources
3.5.3. Class Loader Resources
3.5.4. Theme Resources
3.5.5. Stream Resources
3.6. Error Handling
3.6.1. Error Indicator and message
3.6.2. Notifications
3.7. Application Environment
3.7.1. Creating Deployable WAR in Eclipse
3.7.2. Web Application Contents
3.7.3. Deployment Descriptor web.xml
3.8. Embedding Applications in Web Pages
3.8.1. Embedding Inside a <div> Element
3.8.2. Embedding Inside an <iframe> Element
4. User Interface Components
4.1. Overview
4.2. Label
4.3. Link
4.4. TextField
4.5. Rich Text Area
4.6. Date and Time Input
4.6.1. Calendar
4.6.2. DateField Locale
4.7. Button
4.8. Check Box
4.9. Selecting Items
4.9.1. Basic Select Component
4.9.2. Native Selection Component NativeSelect
4.9.3. Radio Button and Check Box Groups with OptionGroup
4.9.4. Twin Column Selection with TwinColSelect
4.9.5. Allowing Adding New Items
4.9.6. Multiple Selection Mode
4.10. Table
4.10.1. Selecting Items in a Table
4.10.2. CSS Style Rules
4.10.3. Table Features
4.10.4. Generated Table Columns
4.11. Tree
4.12. MenuBar
4.13. Embedded
4.13.1. Embedded Objects
4.13.2. Embedded Images
4.13.3. Browser Frames
4.14. Upload
4.15. Form
4.15.1. Form as a User Interface Component
4.15.2. Binding Form to Data
4.15.3. Validating Form Input
4.15.4. Buffering Form Data
4.16. ProgressIndicator
4.16.1. Doing Heavy Computation
4.17. Custom Composite Components
4.17.1. CustomComponent
4.18. Common Component Features
4.18.1. Sizing Components through Sizeable interface
5. Managing Layout
5.1. Background for Layout
5.2. Layout Components
5.2.1. VerticalLayout and HorizontalLayout
5.2.2. GridLayout
5.2.3. Panel
5.2.4. TabSheet
5.3. Layout Formatting
5.3.1. Layout Size
5.3.2. Layout Cell Alignment
5.3.3. Layout Cell Spacing
5.3.4. Layout Margins
5.4. Custom Layouts
6. Themes
6.1. Overview
6.2. Introduction to Cascading Style Sheets
6.2.1. Basic CSS Rules
6.2.2. Matching by Element Class
6.2.3. Matching by Descendant Relationship
6.2.4. Notes on Compatibility
6.3. Creating and Using Themes
6.3.1. Styling Standard Components
6.3.2. Using Themes
6.3.3. Theme Inheritance
7. Data Model
7.1. Overview
7.2. Properties
7.3. Holding properties in Items
7.4. Collecting items in Containers
8. Developing Custom Components
8.1. Overview
8.2. Google Web Toolkit Widgets
8.2.1. Extending an IT Mill Toolkit Widget
8.2.2. Example: A Color Picker GWT Widget
8.2.3. Styling GWT Widgets
8.3. Integrating a GWT Widget
8.3.1. Deserialization of Component State from Server
8.3.2. Serialization of Component State to Server
8.3.3. Example: Integrating the Color Picker Widget
8.4. Defining a Widget Set
8.4.1. GWT Module Descriptor
8.5. Server-Side Components
8.5.1. Server-Client Serialization
8.5.2. Client-Server Deserialization
8.5.3. Extending Standard Components
8.5.4. Example: Color Picker Server-Side Component
8.6. Using a Custom Component
8.6.1. Example: Color Picker Application
8.6.2. Web Application Deployment
8.7. GWT Widget Development
8.7.1. Creating a Widget Project in Eclipse
8.7.2. Importing GWT Installation Package
8.7.3. Creating a GWT Module
8.7.4. Compiling GWT Widget Sets
8.7.5. Ready to Run
8.7.6. Hosted Mode Browser
8.7.7. Out of Process Hosted Mode (OOPHM)
9. Advanced Web Application Topics
9.1. Debug and Production Mode
9.1.1. Debug Mode
9.1.2. Analyzing Layouts
9.1.3. Custom Layouts
9.1.4. Debug Functions for Component Developers
9.2. Special Characteristics of AJAX Applications
9.3. Resources
9.3.1. URI Handlers
9.3.2. Parameter Handlers
9.4. Shortcut Keys
9.5. Printing
10. User Interface Definition Language (UIDL)
10.1. API for Painting Components
10.2. JSON Rendering
Bibliography

List of Figures

1.1. IT Mill Toolkit General Architecture
1.2. IT Mill Toolkit Package Contents
1.3. Development Toolchain and Process
1.4. Firebug Debugger for Firefox
1.5. IT Mill Toolkit Imported as a Project in Eclipse
1.6. IT Mill Toolkit Content Browser Started Under Eclipse
1.7. Terminating a Launch
1.8. Removing Terminated Launches
1.9. Execution Stopped at Breakpoint in Debug Perspective in Eclipse
1.10. A New Dynamic Web Service Project
1.11. A Ready Project
1.12. Running an IT Mill Toolkit Application
1.13. Debugging an IT Mill Toolkit Application
2.1. IT Mill Toolkit Architecture
2.2. Architecture of IT Mill Toolkit Client-Side Engine
2.3. Class Diagram of a Button Click Listener
3.1. Opening a Child Window
3.2. Screenshot of the Modal Window Demo Application
3.3. Synchronization Error Between Windows with the Same Name
3.4. A Dynamically Created Window
3.5. Opening Windows
3.6. Communication Between Two Application-Level Windows
3.7. Resource Interface and Class Diagram
3.8. Screenshot of the stream resource example with an embedded image
3.9. Error indicator active
3.10. Notification
3.11. Notification with Formatting
3.12. Embedded Application
3.13. IT Mill Toolkit Applications Embedded Inside IFrames
4.1. UI Component Inheritance Diagram
4.2. The Label Component
4.3. Label Modes Rendered on Screen
4.4. Referencing An Image Resource in Label
4.5. Single- and Multi-Line Text Field Example
4.6. Rich Text Area Component
4.7. Regular English and a Localized Rich Text Area Toolbar
4.8. Example of the Date Field with Default Style
4.9. Example of the Date Field with Calendar Style
4.10. An Example of a Button
4.11. An Example of a Check Box
4.12. Retrieval of the Currently Selected Item
4.13. The Select Component
4.14. Filtered Selection
4.15. Radio Button Group
4.16. Twin Column Selection
4.17. Select Component with Adding New Items Allowed
4.18. Basic Table Example
4.19. Table Selection Example
4.20. Cell Style Generator for a Table
4.21. Components in a Table
4.22. A Table in Normal and Editable Mode
4.23. Table with Generated Columns in Normal and Editable Mode
4.24. A Tree Component as a Menu
4.25. Menu Bar
4.26. Embedded Image
4.27. Upload Component
4.28. Image Upload Example
4.29. Layout of the Form Component
4.30. Form Automatically Generated from a Bean
4.31. Form Fields Generated with a FieldFactory
4.32. Form Validation in Action
4.33. Empty Required Field After Clicking Commit
4.34. The Progress Indicator Component
4.35. Starting Heavy Work
5.1. Component Widths in HorizontalLayout
5.2. The Grid Layout Component
5.3. Expanding Rows and Columns in GridLayout
5.4. A Panel Layout
5.5. A Panel with Light Style
5.6. A Simple TabSheet Layout
5.7. A TabSheet with Hidden and Disabled Tabs
5.8. HorizontalLayout with Undefined vs Defined size
5.9. Cell Alignments
5.10. Layout Spacings
5.11. Layout Margins
5.12. Example of a Custom Layout Component
6.1. Theme Contents
6.2. Simple Styling by Element Type
6.3. Matching HTML Element Type and Class
6.4. Matching Only HTML Element Class
6.5. Themeing Login Box Example with Default Theme
6.6. Themeing Login Box Example with Custom Theme
7.1. IT Mill Toolkit Data Model
8.1. Color Picker Module
8.2. GWT Widget Base Class Hierarchy
8.3. Color Picker Widget Without Styling
8.4. Color Picker Widget With Styling
8.5. Annotated Project Contents
8.6. Hosted Mode Browser
8.7. Creating New Launch Configuration
8.8. Naming Launch Configuration
8.9. GWTShell Arguments
8.10. Setting a Breakpoint
8.11. Debugging with Hosted Mode Browser
9.1. Debug Window
9.2. Debug Window Showing the Result of Analyze layouts.
9.3. Dynamic Resource with URI Parameters
10.1. Debugging UIDL Messages with Firebug