Tuesday, April 20, 2004

Working With Tables in JSP-HTML Visual Editor In this article, I will try to explain the various features we offer related to HTML table. First section covers the basic table editing and the second section explains how HTML table can be used with custom tags. Working with Table Creating a table To create a table, drag Table element from the HTML page of the component palette and drop it on the Visual Editor. This will bring up the Table Dialog where you can specify number of columns/rows, cellspacing, cellpadding, border, width, etc., When you hit OK, the table is created. Tip: Instead of dropping the table on the VE, you can also drop the table onto the Structure Window. Selecting table elements Selecting a table or row or column is little bit tricky. You have to be really good at handling the mouse! To select a table move the mouse to the right or bottom edge of the table; when the mouse is near the right or bottom edge of the table, the cursor will change to table select icon when the table select icon shows up, click to select the table Tip: You can select the table from the Structure Window by clicking on the table node. You can also select the table from the Table Context Menu (see below) To select a Row move the mouse to the left edge of the table and the cursor will change to row select icon when the row select icon appears, click to select the row To select a Column move the mouse to the top edge of the table and the cursor will change to column select icon when the column select icon appears, click to select the column To select a cell Press Ctrl & click inside the cell will select the cell. Tip: While Ctrl key is pressed, you can select multiple cells by simply clicking inside those cells. Note: When you select a cell, take a look at the bottom of the Property Inspector. You will see two links (Split Cell... and Insert Rows or Columns...). Go ahead and click on them and see what happens! Click and drag select You can mouse press anywhere in a cell and drag the mouse across other cells to make selection. Resizing table elements You can resize the table or table row or table column from the visual editor. To resize table move the mouse to the right-bottom corner of the table the cursor will change to resize icon (we call it resize handle) mouse press and drag to resize the table TIP: If you want to cancel the resize, simply hit Esc while resizing, but if you have done the resizing, hit Ctrl+Z to undo the resize. To resize row or column move the mouse to the border of any row or column the cursor will change to row/column resize icon mouse press and drag to resize column/row Tip: If you want to cancel the resize, simply hit Esc while resizing. You can also use undo (Ctrl+Z) to undo the resize. Reordering table row or column Visual editor allows you to reorder a row or column. To reorder first select the row or column you want to reorder drag the selected row/column. while dragging the mouse, there will be a visual indication (a thick black line with an arrow in the middle) to show where the selected row/column will be moved to. release the mouse to move the selected row/column to the desired new location. Tip: If you want to copy an entire row/column, do the same as above, but with one difference. Hold the Ctrl key first and then drag the mouse. When you release the mouse, the selected row/column is copied to the new location. Note: In the above steps, try dragging the selected row/column outside the table and see what happens! Setting background color The background color button in the Toolbar can be used to set background color on table or row or column or cell. To apply background color make the selection (select the table or row or column or cell) select the background color from the Toolbar background color button. The selected color is applied to the selection Note: bgcolor property of the table/tr/td is set with the selected color value. Table Context Menu Visual Editor provides various context menu options for the table. Simply right click inside the table and look at the various options provided under Table-> sub menu. Through the context menu, you can insert new row/column, delete a row/column, merge cells, split a cell and increase/decrease col/row span of a cell. Others... Put the cursor at the last cell of the last row of a table and hit Tab. A new row is created. You can use Tab to forward navigate between cells in a table You can use Shift+Tab to backward navigate between cells in a table Be careful with align property of the table. Setting it to left or right will float the table (Please see HTML and CSS specification about float) Ctrl-click inside a cell. The cell is selected. Now, drag the cell onto some other cell. The contents of the selected cell is moved to the cell where it's droppped. Instead of simply dragging, hold the Ctrl key and drag and see what happens. Now, the contents of the selected cell is copied. Working with Table and Custom Tags In this section, I will show how you can combine table and custom tag, especially struts's iterator tag and JSTL's foreach tag. One of the common use case in a web application is to use the iterator tag or foreach tag along with table. Take a look at this code snippet <table> <logic:iterate id="order" name="searchResults" type="com.foo.bar.Order"> <tr> <td><bean:write name="order" property="orderNumber"/><td> <td>..other properties...</td> </tr> </logic:iterate> </table> How would I create the above from the visual editor? It's pretty easy to create the table with one row and two columns. But, inserting the iterate/foreach tag around tr might be impossible (ie., without going to code editor) with other tools. In visual editor, you can do this very easily. Drag and drop the table element from the HTML page of the palette (specify 1 row and 2 columns in the Table dialog). Switch to Struts Logic or JSTL Core Page in the component palette Now, drag the iterator/foreach element from the palette, using the *right* mouse and onto the left edge of the table When the mouse is dragged near the left edge of the table, the table row is highlighted to indicate that the table row is the drop location Release the mouse and a popup menu shows up with two options, "Wrap" and "Cancel". Select Wrap to wrap the iterator/foreach tag around the table row Enter appropriate values in the iterator/foreach dialog and press OK You are done!. Wasn't that easy! Tip: If you find it difficult to do step 3 and 4, you can use Structure Pane to drop the tag. Simply drop the tag onto the tr in Structure Pane. Note: Using right mouse, you can wrap any element from the component palette around the drop location in Visual Editor. Hope you find this article useful. 2:01:19 PM    comment []