Have a seat, and pull up to the new R5 table. Are you ready for a feast? You are about to learn what the enhanced tables in R5 can do for you. Tables are helpful both for layout within Notes, and for structuring your applications in Domino Designer. Since tables serve multiple functions, they are very important to the developers here at Iris. We've worked hard to provide you with a lot of exciting and sometimes unexpected capabilities within R5 tables!
This article takes you through the changes to the user interface, including the brand new Create Table dialog box, which in only a few clicks allows you to create the table of your choice. It also gives you the details on all the new style capabilities, including improvements in adding detailed borders, colors, and images to your tables, as well as a finer level of control over spacing, margins, and text wrapping. Finally, we'll run through all the new types of tables you can create -- nested tables, tabbed tables, animated tables, and programmed tables -- and give you some examples of how you can use each of them. For an overview of all the new Designer features, see the article "Domino Designer R5 Technical Overview."
R5 goals and how they relate to tables
Tables now do some pretty unusual things in R5, and some of the new features may seem puzzling if you don't keep in mind the bigger picture, and the goals for Designer R5 as a whole. The overall goal of Domino Designer R5 is to support the rapid development of applications for the Domino server. In particular, this goal focuses on making it easier and faster for Web developers to create applications within the new development environment. The new table features go a long way towards the long-term goal of making it easier to design one application that runs in any client -- be that a Notes client or a Web browser.
Creating tables
The user interface for Domino Designer R5 now provides you with a dialog box that helps you select the type of table you want to create and gets you started creating it. To access this dialog box choose Create - Table:
When you select one of the four types of tables, an explanation of that table appears in the dark gray box. The four types of tables are:
- A basic table, which isn't programmed and exists to hold and structure data
- A tabbed table, where each row in the table appears as a different tab
- A animated table, which you can use to easily create the illusion of animation by placing different images in each row of the table and specifying that the table display a different row every few seconds
- A programmed table, which you can use to personalize information for the users of your applications by creating a field that your application checks and then, based on the information in the field, displays a certain row in the table
To create any of these types of tables:
- Enter the number of rows you want the table to have.
- Enter the number of columns you want the table to have.
- Select Fixed Width, if you want the table to have a specific width. You can specify the exact width later in the Table Properties dialog box. Select Fits window, if you want a table that fits to the width of the window.
- Select the type of table you want to create.
- Click OK.
New style improvements in basic tables
The basic table is not so basic anymore. R5 adds many style improvements that provide you with better overall control of how your tables appear. Many of these improvements appear in the Table Properties box. We added a lot of these properties in order to match HTML 4.0 table attributes. This means that you no longer need to use passthru HTML for these attributes; you can define them within Designer. In some cases, we go even further, beyond the capabilities of HTML 4.0, to give you enhanced table properties.
Size, spacing, and alignment
In the first tab of the Table Properties box, the Table Layout tab, you can see the increased control you have over the size, spacing, and alignment of your tables. In R4.6, tables were either a fixed width or fit to the window. The "fit to the window" option automatically placed a gutter on the side of the window. This didn't work well in Web applications because you could see a strip of the form background down each side of the application. Now, the "Fit to window" option, fills the entire screen with the table and the "Fit with margins" option does what "Fit to window" used to do.
The Position field allows you to align your entire table. You can right-justify, left-justify, or center the table within the page or form. (Notice that this option is only available if you create a table with a fixed width.) In addition, you can specify the minimum height of each row. You can also specify row spacing to control the space between any text in your table and the top and bottom of the cell containing the text. Column spacing controls the space between any text in your table and the right and left borders of the cell. Also, you can vertically align the text within a cell. This allows you to center text or a bitmap within a cell, with equal amounts of space above and below it. Previously, you had to add blank lines above and below the text or bitmap to achieve this look.
Borders
In the Cell Borders tab of the Table Properties box, you'll notice that your control over table borders increases. You could always set your table to have borders, but now you can select colors for the border. You can change the border on the outside of your tables and control their size, and color. You can also use the Table Borders tab to create a double line border around your table and add drop shadows to your tables. The following screen shows a table containing a graphic with a colored, drop shadowed border:
Colors and images
The Colors tab of the Table Properties box allows you to add colors and background images to your table. You can set cells equal to different colors. You can also select Alternating Rows in the Style field to create a table where the rows alternate between two colors. In R4.6, you could achieve this same functionality manually. However, if you had 10 rows and then wanted to insert an additional row somewhere in the middle of the table, you had to go back through your code and modify each row to account for the new row. Now, with table styles, you can select the alternating rows as different colors and insert a new row from the user interface without destroying your alternating color scheme. In addition, you can set the system color as the background color for your table. Then, if a user has a special background color on a system, the table will pick up this color as the background of the table.
You can also make the colors in a cell appear gradient, meaning that you can blend two colors together within a cell, as in the following table:
To achieve this effect, choose Top to Bottom or Left to Right, depending on the direction you want the colors to blend, in the Style field. Then select your colors in the Color field, as follows.
You can place background images in a table by choosing the folder icon next to the Cell image field. The Insert Image Resource dialog box that appears allows you to select any image that you stored as an Image Resource and place it in the cell. The new R5 Image Resources provides you with a place to store graphics -- GIF's, JPEG's, and BMP's -- within a database so that the graphics can be shared in a number of different places in the application. This way, you can store the images once and use them multiple times, thus saving storage space and speeding things up. You can use Image Resources on pages, forms, Outline entries and backgrounds, table cell backgrounds, and action buttons. You add images to the database by opening the Resources twistie of the Design List, and then clicking the New Image Resource button. You can add one or more images by selecting them and clicking Open. Once you place an image from the Images Resources in a cell, you can size the image to fit the entire cell, center the image, or tile the image horizontally or vertically.
You can also choose the @ button to use a formula with your background images. Then, when a field on a form changes, the background image also changes. For example, if your application uses a DatePicker control, which is an embedded element that allows users to pick a month (as you can do in the new R5 Calendar), and a user switches the month from January to February, you can change the picture from a picture that represents January, to a picture that represents February. You can do this by creating a shared resource with multiple pictures and corresponding numbers. The picture for January could have the number one and the picture for February could have the number two. You would use the formula @test($DatePickerMonth) to test whether or not the user changed the month. If the month changes, so does the picture. For this to work, you must include the item $DatePickerMonth, through a script, field, or form.
Margins and wrapping
The Table margins tab in the Table Properties box allows you to set margins based on the available space. For example, you can specify that your margins are 50 percent of the entire window. To do this, choose Relative (%) in the Table margin section and fill in a number that equals the percent of the window for both the left and the right margin.
When you create a table with a fixed width, you can also specify how you want text to wrap, both inside and outside of your table, from within this tab. When you choose to wrap text around the outside of a table, you can produce the following effect:
As you can see in the above example, this wrapping makes it easier for you to add callouts in the middle of an article, if you want to design an online webzine like "Iris Today." To achieve this effect, the Table Margins tab of the Table Properties box should have the following settings:
By selecting to wrap your text between cells, you can set the columns in a table to work like newspaper columns. To do this, you need to create a multi-column table and set the text to flow from cell to cell. Then, when you add text to the first column, it pushes the text at the bottom of that column into the next column. This feature will seem very familiar to designers who have used page layout software.
Other style improvements
You can now use a table to size a dialog box the same way you could use a layout region in R4.6. The dialog box will be the size of the table, and it is all that displays in the application. This means that you could have other information on your form, but your end-users would only see the information in the table. You can also place sections and subforms in tables.
Nested tables
Nested tables are tables within tables. In R5, you can place up to eight tables within other tables. This is great for application designers who want to use a table to define their entire page, or to absolutely position objects (such as, fields, pictures, or text) on a page. For example, if you use one large table to define the margins of say, a Web page, you might place a lot of text within the page, and somewhere within that text, you might want to include a chart. Previously, Domino couldn't display the chart because it was a table included within a larger table. In R5, this is no longer a problem.
When the developers at Iris updated the mail template for R5, they took advantage of this new feature. When you create a new memo in R5, you can see an example of nested tables.
At the top of the new memo, the background images in the stationary are in a table. The address section, which includes the To, cc, bcc, and Subject fields, is in a separate table within the table that has the background image. One of the advantages of using the table within a table feature, in this case, is that the labels (To, cc, bcc, and Subject) stay in the same place, but the right side of the table grows as you enter text.
Tabbed tables
When you design Domino applications, you can now easily use a tabbed table to help you condense a large amount of information down to one screen. You can also use these tables to easily create tabbed dialog boxes so that your users don't have to work with large dialog boxes or scroll down to view information within the application.
The developers at Iris used these new tabbed tables to create the new look-and-feel of Location documents in the R5 address book.
This Location document is actually one tabbed table with several nested tables within it. The first Basics tab is a row, as are each of the other tabs. Previously, the information contained in a Location document was on many different forms. The new tabbed tables allowed the developers to condense all of the forms down to one table. When you create a tabbed table on a page with two rows and one column, the following appears on the page:
To fill in the label on the first tab, select that tab, open the Table Properties box, and select the Table Rows tab. When you create a tabbed table, Designer automatically selects the "Show only one row at a time" and the "Users pick row via tab buttons" options. In the Tab Label field, you can enter a name, such as Basics, that you want to appear on the selected tab.
Animated tables
Animated tables can help you to create the illusion of animation by displaying a different row in your table at a timed interval. If the rows contain different graphics, then, as the rows switch, the graphics appear to animate. This is much quicker and easier than creating an animated GIF, which requires an additional tool. Also, you can use these animated tables with computed text to personalize your applications.
For example, the following screen shows a animated table with five rows. Each row contains a different image of a Ferrari:
If you want to use a animated table on a form, and view that form in edit mode, you must first check the form property called "Generate HTML for all fields" in the Table Rows tab of the Table Properties box. You can also choose to display one row at a time and switch rows every specified number of milliseconds. You can cycle through the rows continually, only once when the page first opens, or when a user clicks the picture. The Effect field allows you to specify the way that the graphic changes. Your graphic can wipe, explode, dissolve, appear box by box, roll (which creates a "ticker-tape" effect), and so on.
To see the actual R5 table that we showed you in the screen above, download the following self-extracting database (196Kb). You must open the database in Notes R5. You can download Notes R5 from the Lotus Web site. When you open the database, open the only document in the view to see each image in the animated table appear with a different effect. You can also check out the table properties for the animated table.
To create an animated logo where each letter in the logo appears one at a time at the top of the Notes document, you can create a table as follows:
In the Table Rows tab of the Table Properties box, the options show that only one row displays at a time, every 2000 milliseconds, when the document opens.
Animated tables can help you create wizards. You can select "Advance on Click" in the "Cycle through rows" field on the Table Rows tab, so that users can click on an image in the first row of a table and information in the second row of the table appears. This gives users the illusion of clicking on one thing and having it take them somewhere else, when it is really only showing another row in the table.
Now that you can control the minimum height of each row (as described earlier in the article), you can also create visually appealing timer-based tables. Specifying the minimum height prevents the screen from flashing as a result of a slight cell height change, each time a new row swaps in and out of the table display.
Programmed tables
When you choose to create a programmed table, Designer creates a table that displays a different row based on the value that a user enters in a field or sets programmatically. This allows you to customize and personalize your applications, including your Web applications. For example, maybe you would like an image of Donald Duck to appear in your application if your user is a child, but if your user is an adult, you want an image of Dilbert to appear. With programmed tables, you can set up your application so that a user enters their age in a field, and your application translates that age into the row number or name in a table and displays that row. In this case, if a user entered age 3, your application would display row one, because that contains the image of Donald Duck.
After you create a programmed table on a page or a form, Designer automatically sets the following options in the Table Rows tab of the Table Properties box:
Next, you need to create a field on your form named $[TableName]. The TableName is the name of the table you just created. To specify the name of your table:
- Open the Table Properties dialog box.
- Select the programming tab.
- Select the pull-down arrow next to Selected Row, and choose Selected Table.
- In the Name/ID field, enter a name for your table.
The table displays a row based on the information found in the $[TableName] field. The field can contain a numeric or text value. For example, if the field contained the number one, the first row of the table would appear. If you want to use text, you can name the rows in your table using the same steps you used to name your table, but selecting Selected Row instead of Selected Table.
You can also enter common HTML attributes here. This allows you to easily use HTML within a table, but without having to use pass-through HTML.
To make use of these field-driven tables, you need to have one table that corresponds to one field. If you want the user to click on one field or button, and information in several tables to change, then you must use reserved $layer text fields.
One example of a programmed table appears in the "New in Note R5" online help. This help file appears when you first launch the Notes R5. From the Welcome page, click "See what's new in R5." The following screen appears:
The topics that appear down the left side of the screen are in an embedded outline control (to learn more about outlines, see the article "Domino Designer R5: The Outline Designer"). This outline control triggers the appearance of information in a table row. Each row in the table contains the information about one of the topics you click on in the outline control. We created this by setting the field that drives the table equal to a field that indicates which row should display when a user clicks an entry in the outline.
Now you can pull yourself away from the table and what do you have? You have a quick-and-easy way to breathe new life into your Notes documents and your Domino applications. A new UI, new style capabilities, nested tables, tabbed tables, animated tables, and programmed tables all give you many options for designing great looking documents and applications. We told you it was a feast!