I3ML
   Next

I3ML

Creating Rich User Interfaces As Web Applications

David M Bridgeland

with contributions from: Kimberly McCammon

Copyright © 2003, 2004, 2005 David M. Bridgeland

Table of Contents

1. Why I3ML? [needs revision]
2. I3ML Overview [completed draft]
3. Objects [completed draft]
4. Windows, Menus, Toolbars, Speedbars [completed draft]
5. Labels, Buttons, Checkboxes [completed draft]
6. Editboxes, Numeric Edits, and Memos [completed draft]
7. Date-time Pickers, Sliders, Browsers [67% written]
8. Groupboxes, Panels, and Tabs [completed draft]
9. Actions [50% done]
10. Complex Controls [completed draft]
11. JavaScript and I3ML [needs revision]
12. Servers And Files
13. Connecting I3ML to JSP [completed draft]
Index

List of Figures

2.1. User interface of a browser and a site
2.2. A tertiary window in Quicken
2.3. The evolution of an I3ML application
2.4. Interacting with multiple servers
2.5. An empty window
2.6. The window after a label has been inserted
2.7. The window after the changes
2.8. The window with multiple changes
2.9. A button on a window
2.10. Nine objects
2.11. A button ready to be erased
2.12. Pricing a stock using a remote service
2.13. When the stock price service fails
2.14. Checking with the user before erasing
3.1. A slider
3.2. A parent-child hierarchy
3.3. Modifying the format of some text
3.4. A richer parent-child hierarchy
3.5. Enabled and disabled objects
3.6. A login with password protection
3.7. Copying from one object to another
3.8. The location of a button within a window
3.9. The location of a button within a groupbox
3.10. Objects with a variety of font settings
3.11. Different colored radio buttons
3.12. Several captions
3.13. A hint to guide the user
3.14. Help text: more guidance for the user
3.15. A popup menu
3.16. Resizing without anchors and with anchors
3.17. Examples of horizontal and vertical anchors
3.18. Dragging songs to a music device
4.1. A window with many bars
4.2. A child window, restricted to its parent
4.3. What lives on the titlebar
4.4. A system menu
4.5. Controlling the state of the window
4.6. Vacation planning kiosk
4.7. A modal window
4.8. A menubar, with one menu opened
4.9. (Part of) a menu item hierarchy
4.10. Multiple levels of menu items
4.11. Main menu at the bottom of a window
4.12. An undocked main menu
4.13. Dividers, accelerators, and disabled menu items
4.14. Checking the current mode
4.15. A popup menu for a label
4.16. A toolbar and tool buttons
4.17. After pressing the find tool button
4.18. A toolbar with captions
4.19. Big tool buttons, with captions on the right
4.20. Changing the font with tool buttons
4.21. A speedbar
4.22. Part of the speedbar hierarchy
4.23. No speedbar images
4.24. A window with a frame
4.25. After the user has adjusted the frame
4.26. Above and below
4.27. Three frames
4.28. A statusbar and its panes
4.29. A statusbar and its panes, the object diagram
4.30. Extra space in a statusbar
5.1. A window with many labels
5.2. An interactive label
5.3. Buttons with captions and pictures
5.4. Round buttons
5.5. Measuring the external radius
5.6. Measuring the internal radius
5.7. Four checkboxes
5.8. A 3state checkbox
5.9. Radio buttons
6.1. Some editboxes
6.2. Requesting telephone numbers
6.3. Requesting telephone numbers, improved
6.4. Requesting telephone numbers, with tildes
6.5. Looking up a product
6.6. Successfully looking up a product
6.7. Locating a franchise
6.8. Locating a franchise, after entering coordinates
6.9. A memo
6.10. A larger memo, with scrollbars
7.1. Using date-time pickers
7.2. An alternative use of date-time pickers
7.3. Controlling the appearance of a date-time calendar
7.4. Selecting a color with three sliders
7.5. Selecting a color with vertical sliders
8.1. Three groupboxes
8.2. Panels
8.3. Three panels, with different border styles
8.4. Panel with patterns
8.5. Moving the mouse causes the pattern to appear
8.6. A picture panel
8.7. Picture panels with a variety of image positions
8.8. Using a tabs to control how characters look
8.9. Switching to controlling the character position
8.10. Too many tabsheets to show at once
8.11. Too many tabsheets, shown via multiple lines
8.12. Tabsheets organized in two levels
8.13. Tabsheets in two levels
8.14. Two level tabsheets, north and south
9.1. Warning the user with a message box
9.2. Launch fireworks outdoors
9.3. Debugging fireworks
9.4. Find a parent
9.5. Home inventory
9.6. Entering home inventory details
9.7. Calculating monthly payments on a lease
9.8. Changing the focus
9.9. Using date-time pickers, redux
9.10. Aligning buttons
9.11. Invoking the Find window
9.12. The resultant Find window
9.13. Selecting the View menu
9.14. Calculating the monthly payments
10.1. The five complex controls
10.2. An organization hierarchy
10.3. Using a tree control to edit an organization structure
10.4. The result of a right click on one of the tree items
10.5. A tree with more than one top item
10.6. Editing one of the positions
10.7. How the new position editing window is created
10.8. How the title update is performed
10.9. Defining a new subordinate
10.10. After a new subordinate is defined
10.11. A heterogeneous tree with multiple columns
10.12. How the media purchase tree is prepared
10.13. Selecting a font
10.14. Changing the font type
10.15. Selecting a font with listboxes
10.16. Selecting a font style as well
10.17. Checking off the weekend tasks
10.18. How a task is checked off
10.19. Compiling a home inventory
10.20. Editing the item description
10.21. Selecting an item category
10.22. Total replacement cost and total resale value
10.23. Adding a new asset
10.24. Editing an existing asset
10.25. Handling left clicks in different ways
10.26. The user has left clicked on cell A
11.1. Registering a new user
11.2. Calculating the monthly payments
11.3. Calculating the monthly payments for 30 months
11.4. Calculating the duration of a lease
13.1. Before the user saves
13.2. Saving
13.3. An awful error on saving
13.4. A less awful error on saving
13.5. Attempting to open, but stumbling on ampersands
13.6. Collaboration diagram: saving and then opening
13.7. The HTML view
13.8. Entering information for the upload
13.9. Collaboration diagram: nine components for four functions

List of Tables

1.1. User experience: web applications vs. native applications
2.1. I3ML compared to HTML and Visual Basic
3.1. The common properties
3.2. The common methods
6.1. The content characters in an input mask
7.1. The elements of a date-time format
9.1. The meanings of the from,
free web hosting | free website | Web Hosting | Free Website Submission | shopping cart | php hosting
to, and property attributes

List of Examples

2.1. I3ML describing a new window
2.2. Declaring the version of I3ML
2.3. Adding a label to the once empty window
2.4. Deleting the label
2.5. Changing the label
2.6. Changing many things at once
2.7. Referring to a window by name
2.8. Making a window visible
2.9. Example methods
2.10. Erasing a button
2.11. Part of the code for pricing a stock using a remote service
2.12. A fail action to handle failure of the pricing service
2.13. Defining a server
2.14. A chunk for an OK-or-cancel dialog
2.15. Defining a file
3.1. Defining a slider
3.2. The window where the slider lives
3.3. A disabled label
3.4. Enabling a label
3.5. Copying from one editbox to another
3.6. Defining the location of a button
3.7. Setting the FontName and FontSize of the groupbox
3.8. Defining a hint and the help text for a numeric edit
3.9. Defining a help button for a window
3.10. Associating a popup menu with an object
3.11. How the leftclick method is connected to an action
3.12. Enabling song dragging
3.13. Enabling song dropping
4.1. Defining a window icon
4.2. Adding window buttons
4.3. Controlling the state of the window
4.4. The ordering of menubar menu items
4.5. The menu items in the View menu
4.6. The Cut menu item
4.7. Defining the Address Book menu item
4.8. Checking and unchecking menu items
4.9. Defining a popup menu on a label
4.10. Defining the menu items of a popup menu
4.11. Defining a tool button
4.12. Defining a toolbar separator
4.13. The Find tool button
4.14. The CutT tool button
4.15. Big tool buttons, with captions on the right
4.16. A tool button with a checked style
4.17. A tool button that is part of a checkgroup
4.18. Defining part of a speedbar hierarchy
4.19. The Toy speedbar item
4.20. Above and below
4.21. A statusbar and a normal pane
4.22. A caps pane and a time pane
4.23. An image pane
5.1. Simple label
5.2. An interactive label
5.3. Buttons with captions and pictures
5.4. A checkbox for bolding
5.5. Bolding or unbolding the text
5.6. Testing how a 3state is checked
5.7. A radio button and its groupbox parent
6.1. A simple editbox
6.2. A simple input mask for a telephone number
6.3. Defining a prompt
6.4. An editbox with an action
6.5. A numeric edit for entering desired population
6.6. A numeric edit for entering latitude
6.7. Validating the latitude
6.8. A memo
6.9. Vertical scrollbars
7.1. Two date-time pickers
7.2. Minimal and maximum dates for departure and return
7.3. Updating minimum and maximum dates
7.4. The red slider
7.5. The methods of a red slider
8.1. Setting a pattern on a panel
8.2. Changing the pattern of a panel
8.3. Setting the pattern by moving the mouse
8.4. Defining a picture panel
8.5. Positioning an image at the top right of a picture panel
8.6. A tabset and three tabsheets
8.7. Defining an inner tabset
9.1. Creating a message box
9.2. Alternate approach to a message box
9.3. Using an xpath expression to find the parent of LaunchButton
9.4. Two speedbar items that use the same action
9.5. Picking up caption property of the triggering object
9.6. Calling a JavaScript function to calculate lease payments
9.7. Creating a message box
9.8. Changing the focus to frustrate the use
9.9. Constraining the departure
9.10. Aligning radio buttons
9.11. Creating the Find window with an ApplyChunk
9.12. Deleting the newly created Find window
9.13. Enabling buttons with a chunk update
9.14. Using a parameterized chunk to check and uncheck
9.15. Checking and unchecking without parameters
9.16. Calling ModeCheck when Date Book is selected
9.17. Creating an action to run
9.18. Behind an interest rate change
9.19. Calculating an interest rate
10.1. Defining the org structure tree
10.2. Code snippet of trees and items
10.3. Editing an existing position
10.4. The chunk that does all the work
10.5. Updating the title after the user has changed it
10.6. Cleaning up after the ModifyPosition chunk
10.7. Adding a subordinate
10.8. The rest of the ModifyPosition chunk, earlier omitted
10.9. Adding the new position the user has described
10.10. Tree images
10.11. Defining columns in a tree
10.12. Defining tree items in a multicolumn tree
10.13. Insert items in bulk
10.14. Clearing a tree
10.15. The font selection dropdown
10.16. Changing the font of the preview
10.17. The font style listbox
10.18. Changing the font style of the preview
10.19. Effecting the change of font styles
10.20. Defining items in a multicolumnlist
10.21. Defining columns in a multicolumnlist
10.22. The SelectedItemI3ML when an item is selected
10.23. Toggling the task item
10.24. Defining the columns
10.25. One row from the home inventory asset grid
10.26. Updating the sums
10.27. Some of the I3ML returned by AllItemsI3ML
10.28. Defining the grid's methods
10.29. Deleting an asset
10.30. Deleting the row
10.31. Enabling and disabling the Delete button
10.32. Running two actions whenever the grid selection changes
10.33. Adding a new asset to the grid
10.34. Defining the Item Description column
10.35. Preparing the edit asset window
10.36. Updating the asset with the changed values
10.37. Left clicks in cells, columns, and the grid
11.1. Entering the password
11.2. Checking that the passwords match
11.3. Declaring a file of JavaScript.
11.4. Do the passwords match?
11.5. Checking for a valid password
11.6. Is the password valid?
11.7. Checking for a valid phone number
11.8. Is the phone number valid?
11.9. Calculating the monthly lease payment using JavaScript
11.10. Capturing the desired lease duration
11.11. The calculate action
11.12. Calculating the lease duration in JavaScript
11.13. The CalculateMonths group
11.14. A chunk run whenever the radio button changes
13.1. The save menu item
13.2. The SaveContents action
13.3. saveContents.jsp
13.4. The I3ML generated from saveContents.jsp
13.5. A version of saveContents that fails gracefully
13.6. Marking the contents dirty.
13.7. Defining EditMemo
13.8. The I3ML to retrieve the user's saved work
13.9. The openContents.jsp file
13.10. Getting the formatted contents
13.11. Getting the raw contents
13.12. saveContents.jsp, the JavaBean version
13.13. A ContentsBean that saves and opens
13.14. The I3ML to show the HTML in the browser control
13.15. The I3ML for the browser control itself
13.16. JSP to convert to HTML
13.17. Converting text into HTML
13.18. Providing a default for host
13.19. Canceling the upload by deleting the upload window
13.20. Invoking the upload from I3ML
13.21. Invoking the upload from JSP
13.22. Storing and retrieving a default
13.23. Uploading the contents

List of Equations

11.1. Formula to calculate monthly payments
11.2. Formula to calculate the duration of the lease
I3ML

Copyright © 2003, 2004, 2005 David M. Bridgeland. All rights reserved.

   Next
   Chapter 1. Why I3ML?