BRIM-UI uses the Java syntax to format numbers. Please refer to the URL below for the complete specification of the syntax.
http://java.sun.com/j2se/1.5.0/docs/api/java/text/DecimalFormat.html
Yalim Gerger
Wednesday, November 12, 2008
Monday, August 18, 2008
Tree Component
This post describes how to use the BRIM-UI Tree Component.
BRIM-UI Tree Attributes
name: This attribute is used to name the Tree instance.
displayColumn: Indicates the column name in the data source that a tree node uses to retrieve the value for its label.
valueColumn: Indicates the column name in the data source that the tree uses to produce node keys. A NodeKey is the primary key of a node in the tree. Hence it must be unique for each node in the tree. If no nodeKeyColumn is specified, a nodeKey is assigned to each node in the tree by the framework. (This column is mistakenly called valueColumn in Version 7. This column will be renamed as nodekeyColumn in Version 8.
dataSource: Name of the data source that the tree queries its data from.
iconColumn: Indicates the column name in the data source that a tree node uses to retrieve the relative path of the icon it renders.
Sample Application
The sample application shows the hierarchy between Regions and Countries in the HR schema using a tree component.
8. Run the application. The tree should show regions as its root nodes as shown in the screenshot below;
11. Create an 'expanded' event under the tree and associate it to the action regionTreeExpandAction
Run the Application. The country nodes will appear under each region. The screenshot of the final application is below;
BRIM-UI Tree Attributes
name: This attribute is used to name the Tree instance.
displayColumn: Indicates the column name in the data source that a tree node uses to retrieve the value for its label.
valueColumn: Indicates the column name in the data source that the tree uses to produce node keys. A NodeKey is the primary key of a node in the tree. Hence it must be unique for each node in the tree. If no nodeKeyColumn is specified, a nodeKey is assigned to each node in the tree by the framework. (This column is mistakenly called valueColumn in Version 7. This column will be renamed as nodekeyColumn in Version 8.
dataSource: Name of the data source that the tree queries its data from.
iconColumn: Indicates the column name in the data source that a tree node uses to retrieve the relative path of the icon it renders.
Sample Application
The sample application shows the hierarchy between Regions and Countries in the HR schema using a tree component.
Below are the steps to develop the sample application;
1. Create a BRIM-UI Application named TreeSampleApp.
2. In BRIM RM, create a Query Interface named qi_TreeNodes using the following query;
select nodekey_tx, display_tx, parentnodekey_tx
from(select 'r_'region_id nodekey_tx, region_name display_tx, 'root' parentnodekey_tx
from hr.regions
union all
select 'c_'country_id, country_name, 'r_'region_id
from hr.countries)
where parentnodekey_tx=:parentNode
Note that parentNode is a bind variable which will be used to retrieve children of a tree node. This sample application uses a simple query without any regard to performance for simplification purposes.
3. In TreeSampleApp create a datasource named qi_treeNodes1 based on qi_TreeNodes. Assign the default value 'root' to parentNode bindvar.
<?xml version="1.0" encoding="UTF-8"?>
<root xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://www.gergerconsulting.com/bdf_ide_v7.xsd">
<dataSource dataSourceDef="qi_TreeNodes" name="qi_treeNodes1" project="TreeSample">
<bindVar defaultValue_tx="root" name="parentNode"/>
</dataSource>
</root>
4. Create a mainframe.
<?xml version="1.0" encoding="UTF-8"?>
<root xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://www.gergerconsulting.com/bdf_ide_v7.xsd">
<mainframe close="Y" drag="Y" maximize="Y" maximizeOnStartUp="N" minimize="Y" name="treeSampleMF"
resizable="Y" title="Tree Sample Application">
</mainframe>
</root>
5. Create a Panel.
<?xml version="1.0" encoding="UTF-8"?>
<root xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://www.gergerconsulting.com/bdf_ide_v7.xsd">
<panel name="treePanel">
</panel>
</root>
6. Add the Panel to the mainframe
7. Add a tree component to the Panel. Use the qi_treeNodes1 as the datasource of the tree component.
<?xml version="1.0" encoding="UTF-8"?>
<root xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://www.gergerconsulting.com/bdf_ide_v7.xsd">
<mainframe close="Y" drag="Y" maximize="Y" maximizeOnStartUp="N" minimize="Y" name="treeSampleMF"
resizable="Y" title="Tree Sample Application">
<borderLayout>
<borderCell docking="Center">
<include name="treePanel" type="Panel"/>
</borderCell>
</borderLayout>
</mainframe>
</root>
<?xml version="1.0" encoding="UTF-8"?>
<root xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://www.gergerconsulting.com/bdf_ide_v7.xsd">
<panel name="treePanel">
<xyLayout>
<xyCell height="300" width="200" x="5" y="5">
<tree dataSource="qi_treeNodes1" display="Y" displayColumn="DISPLAY_TX" enable="Y"
name="sampleTree1" valueColumn="NODEKEY_TX">
</tree>
</xyCell>
</xyLayout>
</panel>
</root>
8. Run the application. The tree should show regions as its root nodes as shown in the screenshot below;
Note that expanding the regions will not display the country nodes. In order to display the country nodes under the expanded region node, we need to assign the nodekey of the expanded node as the new value of the parentNode bind variable of the qi_treeNodes1 data source. To achive this;
9. Create a PL/SQl procedure assigning the expanding node's node key to the parentNode bind variable of the qi_treeNodes1 data source;
10. Create a BRIM-UI action pointing to the PL/SQL procedure created in the previous step named "regionTreeExpandAction"
PROCEDURE P_REGIONTREE_EXPANDED IS
BEGIN
api_datasource.setbindvar('qi_treeNodes1.parentNode',api_tree.getExpandedNodeKey('treePanel.sampleTree1'));
api_treenode.populatechildren('treePanel.sampleTree1',api_tree.getExpandedNodeKey('treePanel.sampleTree1'));
END;
11. Create an 'expanded' event under the tree and associate it to the action regionTreeExpandAction
<?xml version="1.0" encoding="UTF-8"?>
<root xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://www.gergerconsulting.com/bdf_ide_v7.xsd">
<panel name="treePanel">
<xyLayout>
<xyCell height="300" width="200" x="5" y="5">
<tree dataSource="qi_treeNodes1" display="Y" displayColumn="DISPLAY_TX" enable="Y"
name="sampleTree1" valueColumn="NODEKEY_TX">
<events>
<expanded action="regionTreeExpandAction" immediate="N"/>
</events>
</tree>
</xyCell>
</xyLayout>
</panel>
</root>
Run the Application. The country nodes will appear under each region. The screenshot of the final application is below;
Yalim Gerger
Thursday, July 10, 2008
BRIM-UI Table Layout
This post describes how the table layout can be used to design screens in BRIM-UI. BRIM-UI implements Table Layout in its Java Renderer using the code library from;
http://tablelayout.dev.java.net/articles/TableLayoutTutorialPart1/TableLayoutTutorialPart1.html
A detailed explanation and examples of table layout can also be found from the link above. Please keep in mind that the actual BRIM-UI table layout implementation slightly differs from what is explained in the URL above.
BRIM-UI Frames, Dialogs and Panels can be designed using table layout. BRIM-UI Table Layout elements consist of rows and columns. Each row may contain a different number of columns.
You can find the complete XSD of the table layout at the end of this post.
The example below places six buttons to a panel using table layout.
The screenshot below shows how the buttons are displayed once the application containing the Panel, is executed. Note that the labels on buttons indicate the row and column that the button is placed in.
For example, the button with the label 3.2 is located in the second tableColumnCell of the third tableRowCell in the Panel.
Figure 1:Example TableLayout with default alignment
Component Alignment
A component in a tableColumnCell is by default aligned to the center of the cell (figure 1). This behavior can be changed using the hAlign and vAlign attributes for horizontal and vertical alignment respectively.
The valid values for these two attributes are listed below;
hAlign : Left Center Right Full
vAlign : Top Center Bottom Full
The XML below expands the button btn1.1 so that it fills its cell completely.
Figure 3: Example TableLayout with Top alignment
Column / Row / Component Sizes
If the sample application shown above is resized, the columns, and rows in the table layout resize themselves automatically to share the available space. Developers can control the area that a rowCell or a columnCell occupies using the rowHeight and columnWidth attributes respectively.
Column Width
Column width can be set as pixel or percentage. In the example below, the columnCell width for the button named btn1.2 is set to 100 pixels. All alignment values are specified as Full to show the effect of the columnWidth change clearly (figure 4).
Figure 4: Column width specified in pixels
Setting the columnWidth attribute value to 100 pixels effects tableColumnCells 2.2 and 3.2 as well.This happens because, when the application runs the table layout manager places the logical tableColumnCells 1.2, 2.2 and 3.2 to the same physical column.
The layout manager determines the width of physical columns by processing logical column cells starting from the first cell in the first row moving to the next cell in the first row and ending with the last cell in the last row. Hence the physical column width is determined by the last column cell in the physical column that has its columnWidth property set in pixels.
The XML below specifies column width values for tableColumnsCells 1.2 and 2.2. (See figure 5 for the rendered screen)
Figure 5: Column width specified in pixels
The column width can also be specified using a percentage as shown in the XML below(See figure 6 for the rendered screen). The first and second column widths are set to 25% and 75% respectively. The table layout manager will preserve this ratio between the areas the two columns cover when the mainframe is resized.
Figure 6: Column width specified as percentage
The XML below uses both pixel and percentage to specify the column width.(See figure 7 for the rendered screen)
Figure 7: Column width specified both as percentage and in pixels
As seen in the example above, the table layout manager sets first physical columns width to 100 pixels. Then, 50% of the remaining space in the panel is designated for the second physical column.
Row Height
rowHeight attribute operates similar to the columnWidth attribute. Unlike column width, row height can only be specified in pixels. If no rowHeight attribute is specified, rows will cover all the available area.
The XML example below specifies the first row height as 100 pixels(See figure 8 for the rendered screen). When mainframe is resized the first row will preserve its height of 100 pixels, while the height of the other two rows changes.
Figure 8: Row height
The XML example below shows a panel with a table layout manager that has pixel value for all of its column widths and row heights(See figure 9 for rendered screen). The layout manager of this panel will not adjust the contents of the panel when the panel is resized.
Figure 9: Row height and column width
Cell Spacing
cellSpacing attribute is used to create a blank area between table layout cells.
The XML below sets cellSpacing to 5(See figure 10 for the rendered screen).
Figure 10: Cell Spacing
Component Size
When alignment is set to a value other than Full, tableColumnCell's width and height attributes can be used to determine the size of the component in it as shown in the sample XML below(See figure 11 for the rendered screen).
Figure 11: Component size
Span Values
In the XML below column cell 1.1 is extended to cover two physical columns using the columnSpan attribute(See figure 12 for the rendered screen).
Figure 12: Column spans values
In the XML below, the cell 3.2 is deleted and the column cell 2.1 is extended vertically using the rowSpan attribute(See figure 13 for the rendered screen).
Figure 13: Row spans values
Note that, event though the tableColumncell 3.1 is defined as the first column in its rowCell, when the panel is rendered, it is displayed in the second physical column due to the rowSpan attribute in cell 2.1
The XML below uses a combination of columnSpan and rowSpan attributes for a more complex display(See figure 14 for the rendered screen).
Figure 14: Row spans and column Spans values
The XML above defines two rows. The first row has four cells and a height of 300 pixels. The second row has two cells and a height of 50 pixels. Cell 1.2 column width is specified as 100 and cell 2.1 has its columnSpan and columnWidth attributes set to 3 and 400 respectively.
Note that resizing the main frame will only cause the cell 1.4 and cell 2.2 to resize.
Table layout can be manipulated using the appropriate procedures/functions in the API_Panel,API_Frame , API_Dialog and API_Layout packages.
API Procedures
API_Panel
Procedure : addCell(in_panelName_tx varchar2, in_tableRowCell_r api_layout.t_tableRowCell, in_index_nr number:=null)
Remarks : This procedure adds a tableRowcell to the tablelayout at the specified index. If index is not defined it adds the row cell as the last row of the table.
Procedure : addCell(in_panelName_tx varchar2,in_tableRowCellName_tx varchar2, in_tableColumnCell_r api_layout.t_tableColumnCell, in_index_nr number:=null)
Remarks : This procedure adds a tableColumnCell to the specified tableRowCell at the specified index. If index is not defined, the tableColumnCell will be added as the last one.
Procedure : addPanel(in_panelName_tx varchar2,in_cellName_tx varchar2, in_subPanelName_tx varchar2)
Remarks : This procedure adds the panel specified by the in_subPanelName_tx, into the cell (in_cellName_tx) which resides in the panel specified by the in_panelName_tx.
Procedure : addPanel(in_panelName_tx varchar2,in_tableRowCellName_tx varchar2, in_tableColumnCell_r api_layout.t_tableColumnCell, in_subPanelName_tx varchar2)
Remarks : This procedure creates the column cell specified by in_tableColumnCell_r in the row cell specified by in_tableRowCellName_tx. Next, the panel referenced in in_subPanelName_tx is placed into the column cell specified by in_tableColumnCell.
Function : getParentRowCell (in_panelName_tx varchar) return api_layout.t_tableRowCell
Remarks : This function returns the row cell the specified panel is in.
Procedure : removeCell(in_panelName_tx varchar2,in_cellName_tx varchar2 )
Remarks : This procedure removes the cell that the specified panel is under from the layout manager.
Procedure : removePanel(in_panelName_tx varchar2,in_subPanelName_tx varchar2,in_keepLegacyCell_yn varchar2:='Y')
Remarks : This procedure removed the specified sub panel from its containing panel. Setting the in_keeplegacyCell_yn to Y will cause the panel's layout manager keep the layout cell that holds the sub panel. Setting the parameter to N will cause the layout manager remove the cell from the panels content.
Procedure : setParentCell (in_panelName_tx varchar2,in_cell_r api_layout.t_cell, in_index_nr number:=null)
Remarks : This procedure updates the cell containing the specified panel in the in_panelName_tx. If the cell is a tableColumnCell then the in_index_nr sets the order of the column cell in its row. Please note that this procedure does not support the tablerowColumnCell. For updating a tableRowColumnCell please use the api_panel.setParentRowCell.
Procedure : setParentRowCell(in_panelName_tx varchar2,in_cell_r api_layout.t_tableRowCell, in_index_nr number:=null)
Remarks : This procedure updates the row cell containing the panel specified in the in_panelName_tx. The in_index_nr parameter is used to specify the order of the row cell in the table layout.
API_FRAME
Procedure : addCell(in_frameName_tx varchar2, in_tablerowcell_r api_layout.t_tablerowCell, in_index_nr number:=null)
Remarks :This procedure adds a tableRowcell to the tablelayout at the specified index. If index is not defined it adds the row cell as the last row of the table.
Procedure : addCell(in_frameName_tx varchar2,in_tableRowCellName_tx varchar2, in_tablecolumncell_r api_layout.t_tablecolumnCell,in_index_nr number:=null)
Remarks : This procedure adds a tableColumnCell to the specified tableRowCell at the specified index. If index is not defined, the tableColumnCell will be added as the last one.
Procedure : addPanel(in_frameName_tx varchar2, in_cellName_tx varchar2, in_subPanelName_tx varchar2)
Remarks : This procedure adds the panel specified by the in_subPanelName_tx, into the cell (in_cellName_tx) which resides in the frame specified by the in_frameName_tx.
Procedure : addPanel(in_frameName_tx varchar2,in_tableRowCellName_tx varchar2, in_tablecolumncell_r api_layout.t_tablecolumncell,in_subPanelName_tx varchar2)
Remarks : This procedure creates the column cell specified by in_tableColumnCell_r in the row cell specified by in_tableRowCellName_tx. Next, the panel referenced in in_subPanelName_tx is placed into the column cell specified by in_tableColumnCell_r.
Procedure : removeCell(in_frameName_tx varchar2, in_cellName_tx varchar2 )
Remarks : This procedure removes the cell specified in in_cellName_tx from the frame defined by the first parameter.
Procedure : removePanel(in_frameName_tx varchar2, in_subPanelName_tx varchar2, in_keepLegacyCell_yn varchar2:='Y')
Remarks : This procedure removes the specified sub panel from its container frame. Setting the in_keeplegacyCell_yn to Y will cause the frame's layout manager keep the layout cell that holds the sub panel. Setting the parameter to N will cause the layout manager remove the cell from the panels content.
API_DIALOG
Procedure : addCell(in_dialogName_tx varchar2, in_tableRowCell_r api_layout.t_tableRowCell, in_index_nr number:=null)
Remarks : This procedure adds a tableRowcell to the tablelayout at the specified index. If index is not defined it adds the row cell as the last row of the table.
Procedure : addCell(in_dialogName_tx varchar2,in_tableRowCellName_tx varchar2, in_tablecolumncell_r api_layout.t_tableColumnCell,in_index_nr number:=null)
Remarks : This procedure adds a tableColumnCell to the specified tableRowCell at the specified index. If index is not defined, the tableColumnCell will be added as the last one.
Procedure : addPanel(in_dialogName_tx varchar2, in_cellName_tx varchar2, in_subPanelName_tx varchar2)
Remarks : This procedure adds the panel specified by the in_subPanelName_tx, into the cell (in_cellName_tx) which resides in the dialog specified by the in_dialogName_tx.
Procedure :addPanel(in_dialogName_tx varchar2,in_tableRowCellName_tx varchar2, in_tablecolumncell_r api_layout.t_tablecolumncell,in_subPanelName_tx varchar2)
Remarks : This procedure creates the column cell specified by in_tableColumnCell_r in the row cell specified by in_tableRowCellName_tx. Next, the panel referenced in in_subPanelName_tx is placed into the column cell specified by in_tableColumnCell_r.
Procedure : removeCell(in_dialogName_tx varchar2, in_cellName_tx varchar2)
Remarks : This procedure removes the cell specified in in_cellName_tx from the dialog defined by the first parameter.
Procedure : removePanel(in_dialogName_tx varchar2,in_subPanelName_tx varchar2,in_keepLegacyCell_yn varchar2:='Y')
Remarks : This procedure removes the specified sub panel from its container frame. Setting the in_keeplegacyCell_yn to Y will cause the dialog's layout manager keep the layout cell that holds the sub panel. Setting the parameter to N will cause the layout manager remove the cell from the panels content.
API_LAYOUT
Function :
createCell(in_positionx_nr number:=null,in_positiony_nr number:=null, in_docking_cd varchar2:=null,in_hAlign_tx varchar2:=null,
in_vAlign_tx varchar2:=null,in_columnSpan_nr number:=null, in_rowSpan_nr number:=null,in_columnWidth_tx varchar2:=null,
in_width_nr number:=null,in_height_nr number:=null) return t_cell
Remarks : This function returns a new layout cell. It can be used for creating xyCell, borderCell or tableColumnCell. Please note that this function does not actually place the layout cell into a layout manager. For this purpose, the appropriate setCell procedure must be used. The input parameters of the function are grouped by the type of the cell they are used as below;
XY Cell : in_positionx_nr, in_positiony_nr
Border Cell : in_docking_cd
Column Cell : in_hAlign_tx, in_vAlign_tx, in_columnSpan_nr, in_rowSpan_nr, in_columnWidth_tx
Common to all three: in_width_nr, in_height_nr
Function :
createTableColumnCell(in_hAlign_tx varchar2:=null,in_vAlign_tx varchar2:=null,in_columnSpan_nr number:=null,in_rowSpan_nr number:=null,
in_columnWidth_tx varchar2:=null,in_width_nr number:=null,in_height_nr number:=null, in_name_tx varchar2:=null) return api_layout.t_tableColumnCell is
Remarks : This function returns a new t_tableColumnCell cell type. Please see api_panel.addpanel documentation for further details.
Function :
createTableRowCell(in_rowHeight_nr number:=null, in_name_tx varchar2:=null) return api_layout.t_tableRowCell is
Remarks : This function returns a new t_tableRowCell cell type. Please see api_panel.addCell documentation for further details.
Actions
The example below demonstrates to insert a new row to a panel that uses a table layout manager. Note that the in_index_nr parameter of the addCell API indicates the exact position that the row is to be placed. If no index is specified the row is placed as the last row to the table.
The next example adds a column cell into an existing row cell.Then insert an existing panel into this newly created column cell
The procedure below updates the height of the row cell containing the panel panel1.
The setParentCell procedure updates the columnWidth and columnSpan attributes of the cell containing panel1.
The next example demonstrates removing row cell.
XSD
Below is the part of the BRIM-UI XSD that defines the table layout elements.
Attributes of tablelayout.
Attributes of rows.
Attributes of cells
http://tablelayout.dev.java.net/articles/TableLayoutTutorialPart1/TableLayoutTutorialPart1.html
A detailed explanation and examples of table layout can also be found from the link above. Please keep in mind that the actual BRIM-UI table layout implementation slightly differs from what is explained in the URL above.
BRIM-UI Frames, Dialogs and Panels can be designed using table layout. BRIM-UI Table Layout elements consist of rows and columns. Each row may contain a different number of columns.
You can find the complete XSD of the table layout at the end of this post.
The example below places six buttons to a panel using table layout.
<?xml version="1.0" encoding="UTF-8"?>
<root xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation=
"http://www.gergerconsulting.com/bdf_ide_dev.xsd">
<panel backgroundColor="Yellow" borderTitle="im main panel in borderlayout!"
borderType="TitledBorder" name="mainPanel">
<tableLayout>
<tableRowCell>
<tableColumnCell>
<button display="Y" enable="Y" label="1.1" name="btn1.1"/>
</tableColumnCell>
<tableColumnCell>
<button display="Y" enable="Y" label="1.2" name="btn1.2"/>
</tableColumnCell>
</tableRowCell>
<tableRowCell>
<tableColumnCell>
<button display="Y" enable="Y" label="2.1" name="btn2.1"/>
</tableColumnCell>
<tableColumnCell>
<button display="Y" enable="Y" label="2.2" name="btn2.2"/>
</tableColumnCell>
</tableRowCell>
<tableRowCell>
<tableColumnCell>
<button display="Y" enable="Y" label="3.1" name="btn3.1"/>
</tableColumnCell>
<tableColumnCell>
<button display="Y" enable="Y" label="3.2" name="btn3.2"/>
</tableColumnCell>
</tableRowCell>
</tableLayout>
</panel>
</root>
The screenshot below shows how the buttons are displayed once the application containing the Panel, is executed. Note that the labels on buttons indicate the row and column that the button is placed in.
For example, the button with the label 3.2 is located in the second tableColumnCell of the third tableRowCell in the Panel.
Figure 1:Example TableLayout with default alignment
Component Alignment
A component in a tableColumnCell is by default aligned to the center of the cell (figure 1). This behavior can be changed using the hAlign and vAlign attributes for horizontal and vertical alignment respectively.
The valid values for these two attributes are listed below;
hAlign : Left Center Right Full
vAlign : Top Center Bottom Full
The XML below expands the button btn1.1 so that it fills its cell completely.
<tableColumnCell hAlign="Full" vAlign="Full">
<button name="btn1.1" label="1.1"/>
</tableColumnCell>
Figure 2: Example TableLayout with full alignment
The XML below aligns the button btn1.1 to the top of its cell.
<tableColumnCell hAlign="Left" vAlign="Top">
<button display="Y" enable="Y" label="1.1" name="btn1.1"/>
</tableColumnCell>
Figure 3: Example TableLayout with Top alignmentColumn / Row / Component Sizes
If the sample application shown above is resized, the columns, and rows in the table layout resize themselves automatically to share the available space. Developers can control the area that a rowCell or a columnCell occupies using the rowHeight and columnWidth attributes respectively.
Column Width
Column width can be set as pixel or percentage. In the example below, the columnCell width for the button named btn1.2 is set to 100 pixels. All alignment values are specified as Full to show the effect of the columnWidth change clearly (figure 4).
<?xml version="1.0" encoding="UTF-8"?>
<root xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation=
"http://www.gergerconsulting.com/bdf_ide_dev.xsd">
<panel backgroundColor="Yellow"
borderTitle="im a main panel in borderlayout, but my layout type is tablelayout!"
borderType="TitledBorder" name="mainPanel">
<tableLayout>
<tableRowCell>
<tableColumnCell hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="1.1" name="btn1.1"/>
</tableColumnCell>
<tableColumnCell columnWidth="100" hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="1.2" name="btn1.2"/>
</tableColumnCell>
</tableRowCell>
<tableRowCell>
<tableColumnCell hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="2.1" name="btn2.1"/>
</tableColumnCell>
<tableColumnCell hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="2.2" name="btn2.2"/>
</tableColumnCell>
</tableRowCell>
<tableRowCell>
<tableColumnCell hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="3.1" name="btn3.1"/>
</tableColumnCell>
<tableColumnCell hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="3.2" name="btn3.2"/>
</tableColumnCell>
</tableRowCell>
</tableLayout>
</panel>
</root>
Figure 4: Column width specified in pixels
Setting the columnWidth attribute value to 100 pixels effects tableColumnCells 2.2 and 3.2 as well.This happens because, when the application runs the table layout manager places the logical tableColumnCells 1.2, 2.2 and 3.2 to the same physical column.
The layout manager determines the width of physical columns by processing logical column cells starting from the first cell in the first row moving to the next cell in the first row and ending with the last cell in the last row. Hence the physical column width is determined by the last column cell in the physical column that has its columnWidth property set in pixels.
The XML below specifies column width values for tableColumnsCells 1.2 and 2.2. (See figure 5 for the rendered screen)
<?xml version="1.0" encoding="UTF-8"?>
<root xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="
http://www.gergerconsulting.com/bdf_ide_dev.xsd">
<panel backgroundColor="Yellow"
borderTitle="im a main panel in borderlayout, but my layout type is tablelayout!"
borderType="TitledBorder" name="mainPanel">
<tableLayout>
<tableRowCell>
<tableColumnCell hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="1.1" name="btn1.1"/>
</tableColumnCell>
<tableColumnCell columnWidth="100" hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="1.2" name="btn1.2"/>
</tableColumnCell>
</tableRowCell>
<tableRowCell>
<tableColumnCell hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="2.1" name="btn2.1"/>
</tableColumnCell>
<tableColumnCell columnWidth="300" hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="2.2" name="btn2.2"/>
</tableColumnCell>
</tableRowCell>
<tableRowCell>
<tableColumnCell hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="3.1" name="btn3.1"/>
</tableColumnCell>
<tableColumnCell hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="3.2" name="btn3.2"/>
</tableColumnCell>
</tableRowCell>
</tableLayout>
</panel>
</root>
Figure 5: Column width specified in pixels
The column width can also be specified using a percentage as shown in the XML below(See figure 6 for the rendered screen). The first and second column widths are set to 25% and 75% respectively. The table layout manager will preserve this ratio between the areas the two columns cover when the mainframe is resized.
<?xml version="1.0" encoding="UTF-8"?>
<root xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="
http://www.gergerconsulting.com/bdf_ide_dev.xsd">
<panel backgroundColor="Yellow"
borderTitle="im a main panel in borderlayout, but my layout type is tablelayout!"
borderType="TitledBorder" name="mainPanel">
<tableLayout>
<tableRowCell>
<tableColumnCell columnWidth="25%" hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="1.1" name="btn1.1"/>
</tableColumnCell>
<tableColumnCell columnWidth="75%" hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="1.2" name="btn1.2"/>
</tableColumnCell>
</tableRowCell>
<tableRowCell>
<tableColumnCell hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="2.1" name="btn2.1"/>
</tableColumnCell>
<tableColumnCell hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="2.2" name="btn2.2"/>
</tableColumnCell>
</tableRowCell>
<tableRowCell>
<tableColumnCell hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="3.1" name="btn3.1"/>
</tableColumnCell>
<tableColumnCell hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="3.2" name="btn3.2"/>
</tableColumnCell>
</tableRowCell>
</tableLayout>
</panel>
</root>
Figure 6: Column width specified as percentage
The XML below uses both pixel and percentage to specify the column width.(See figure 7 for the rendered screen)
<?xml version="1.0" encoding="UTF-8"?>
<root xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="
http://www.gergerconsulting.com/bdf_ide_dev.xsd">
<panel backgroundColor="Yellow"
borderTitle="im a main panel in borderlayout, but my layout type is tablelayout!"
borderType="TitledBorder" name="mainPanel">
<tableLayout>
<tableRowCell>
<tableColumnCell columnWidth="100" hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="1.1" name="btn1.1"/>
</tableColumnCell>
<tableColumnCell columnWidth="50%" hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="1.2" name="btn1.2"/>
</tableColumnCell>
</tableRowCell>
<tableRowCell>
<tableColumnCell hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="2.1" name="btn2.1"/>
</tableColumnCell>
<tableColumnCell hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="2.2" name="btn2.2"/>
</tableColumnCell>
</tableRowCell>
<tableRowCell>
<tableColumnCell hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="3.1" name="btn3.1"/>
</tableColumnCell>
<tableColumnCell hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="3.2" name="btn3.2"/>
</tableColumnCell>
</tableRowCell>
</tableLayout>
</panel>
</root>
Figure 7: Column width specified both as percentage and in pixels
As seen in the example above, the table layout manager sets first physical columns width to 100 pixels. Then, 50% of the remaining space in the panel is designated for the second physical column.
Row Height
rowHeight attribute operates similar to the columnWidth attribute. Unlike column width, row height can only be specified in pixels. If no rowHeight attribute is specified, rows will cover all the available area.
The XML example below specifies the first row height as 100 pixels(See figure 8 for the rendered screen). When mainframe is resized the first row will preserve its height of 100 pixels, while the height of the other two rows changes.
<?xml version="1.0" encoding="UTF-8"?>
<root xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="
http://www.gergerconsulting.com/bdf_ide_dev.xsd">
<panel backgroundColor="Yellow"
borderTitle="im a main panel in borderlayout, but my layout type is tablelayout!"
borderType="TitledBorder" name="mainPanel">
<tableLayout>
<tableRowCell rowHeight="100">
<tableColumnCell columnWidth="50%" hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="1.1" name="btn1.1"/>
</tableColumnCell>
<tableColumnCell columnWidth="50%" hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="1.2" name="btn1.2"/>
</tableColumnCell>
</tableRowCell>
<tableRowCell>
<tableColumnCell hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="2.1" name="btn2.1"/>
</tableColumnCell>
<tableColumnCell hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="2.2" name="btn2.2"/>
</tableColumnCell>
</tableRowCell>
<tableRowCell>
<tableColumnCell hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="3.1" name="btn3.1"/>
</tableColumnCell>
<tableColumnCell hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="3.2" name="btn3.2"/>
</tableColumnCell>
</tableRowCell>
</tableLayout>
</panel>
</root>
Figure 8: Row height
The XML example below shows a panel with a table layout manager that has pixel value for all of its column widths and row heights(See figure 9 for rendered screen). The layout manager of this panel will not adjust the contents of the panel when the panel is resized.
<?xml version="1.0" encoding="UTF-8"?>
<root xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="
http://www.gergerconsulting.com/bdf_ide_dev.xsd">
<panel backgroundColor="Yellow" borderTitle="main panel" borderType="TitledBorder" name="mainPanel">
<tableLayout>
<tableRowCell rowHeight="150">
<tableColumnCell columnWidth="150" hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="1.1" name="btn1.1"/>
</tableColumnCell>
<tableColumnCell columnWidth="150" hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="1.2" name="btn1.2"/>
</tableColumnCell>
</tableRowCell>
<tableRowCell rowHeight="150">
<tableColumnCell hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="2.1" name="btn2.1"/>
</tableColumnCell>
<tableColumnCell hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="2.2" name="btn2.2"/>
</tableColumnCell>
</tableRowCell>
</tableLayout>
</panel>
</root>
Figure 9: Row height and column width
Cell Spacing
cellSpacing attribute is used to create a blank area between table layout cells.
The XML below sets cellSpacing to 5(See figure 10 for the rendered screen).
<?xml version="1.0" encoding="UTF-8"?>
<root xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="
http://www.gergerconsulting.com/bdf_ide_dev.xsd">
<panel backgroundColor="Yellow" borderTitle="main panel" borderType="TitledBorder" name="mainPanel">
<tableLayout cellSpacing="5">
<tableRowCell>
<tableColumnCell hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="1.1" name="btn1.1"/>
</tableColumnCell>
<tableColumnCell hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="1.2" name="btn1.2"/>
</tableColumnCell>
</tableRowCell>
<tableRowCell>
<tableColumnCell hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="2.1" name="btn2.1"/>
</tableColumnCell>
<tableColumnCell hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="2.2" name="btn2.2"/>
</tableColumnCell>
</tableRowCell>
</tableLayout>
</panel>
</root>
Figure 10: Cell Spacing
Component Size
When alignment is set to a value other than Full, tableColumnCell's width and height attributes can be used to determine the size of the component in it as shown in the sample XML below(See figure 11 for the rendered screen).
<?xml version="1.0" encoding="UTF-8"?>
<root xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="
http://www.gergerconsulting.com/bdf_ide_dev.xsd">
<panel backgroundColor="Yellow" borderTitle="main panel" borderType="TitledBorder" name="mainPanel">
<tableLayout>
<tableRowCell rowHeight="200">
<tableColumnCell columnWidth="200" hAlign="Left" height="100" vAlign="Top" width="100">
<button display="Y" enable="Y" label="1.1" name="btn1.1"/>
</tableColumnCell>
<tableColumnCell hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="1.2" name="btn1.2"/>
</tableColumnCell>
</tableRowCell>
<tableRowCell>
<tableColumnCell hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="2.1" name="btn2.1"/>
</tableColumnCell>
<tableColumnCell hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="2.2" name="btn2.2"/>
</tableColumnCell>
</tableRowCell>
<tableRowCell>
<tableColumnCell hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="3.1" name="btn3.1"/>
</tableColumnCell>
<tableColumnCell hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="3.2" name="btn3.2"/>
</tableColumnCell>
</tableRowCell>
</tableLayout>
</panel>
</root>
Figure 11: Component size
Span Values
In the XML below column cell 1.1 is extended to cover two physical columns using the columnSpan attribute(See figure 12 for the rendered screen).
<?xml version="1.0" encoding="UTF-8"?>
<root xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="
http://www.gergerconsulting.com/bdf_ide_dev.xsd">
<panel backgroundColor="Yellow" borderTitle="main panel" borderType="TitledBorder" name="mainPanel">
<tableLayout>
<tableRowCell>
<tableColumnCell columnSpan="2" hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="1.1" name="btn1.1"/>
</tableColumnCell>
</tableRowCell>
<tableRowCell>
<tableColumnCell hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="2.1" name="btn2.1"/>
</tableColumnCell>
<tableColumnCell hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="2.2" name="btn2.2"/>
</tableColumnCell>
</tableRowCell>
<tableRowCell>
<tableColumnCell hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="3.1" name="btn3.1"/>
</tableColumnCell>
<tableColumnCell hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="3.2" name="btn3.2"/>
</tableColumnCell>
</tableRowCell>
</tableLayout>
</panel>
</root>
Figure 12: Column spans values
In the XML below, the cell 3.2 is deleted and the column cell 2.1 is extended vertically using the rowSpan attribute(See figure 13 for the rendered screen).
<?xml version="1.0" encoding="UTF-8"?>
<root xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="
http://www.gergerconsulting.com/bdf_ide_dev.xsd">
<panel backgroundColor="Yellow" borderTitle="main panel" borderType="TitledBorder" name="mainPanel">
<tableLayout>
<tableRowCell>
<tableColumnCell columnSpan="2" hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="1.1" name="btn1.1"/>
</tableColumnCell>
</tableRowCell>
<tableRowCell>
<tableColumnCell hAlign="Full" rowSpan="2" vAlign="Full">
<button display="Y" enable="Y" label="2.1" name="btn2.1"/>
</tableColumnCell>
<tableColumnCell hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="2.2" name="btn2.2"/>
</tableColumnCell>
</tableRowCell>
<tableRowCell>
<tableColumnCell hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="3.1" name="btn3.1"/>
</tableColumnCell>
</tableRowCell>
</tableLayout>
</panel>
</root>
Figure 13: Row spans values
Note that, event though the tableColumncell 3.1 is defined as the first column in its rowCell, when the panel is rendered, it is displayed in the second physical column due to the rowSpan attribute in cell 2.1
The XML below uses a combination of columnSpan and rowSpan attributes for a more complex display(See figure 14 for the rendered screen).
<?xml version="1.0" encoding="UTF-8"?>
<root xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="
http://www.gergerconsulting.com/bdf_ide_dev.xsd">
<panel backgroundColor="Yellow" borderTitle="main panel" borderType="TitledBorder" name="mainPanel">
<tableLayout>
<tableRowCell rowHeight="300">
<tableColumnCell hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="B-1.1"/>
</tableColumnCell>
<tableColumnCell columnWidth="100" hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="B-1.2"/>
</tableColumnCell>
<tableColumnCell hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="B-1.3"/>
</tableColumnCell>
<tableColumnCell hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="B-1.4"/>
</tableColumnCell>
</tableRowCell>
<tableRowCell rowHeight="50">
<tableColumnCell columnSpan="3" columnWidth="400" hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="2.1"/>
</tableColumnCell>
<tableColumnCell hAlign="Full" vAlign="Full">
<button display="Y" enable="Y" label="B-2.1"/>
</tableColumnCell>
</tableRowCell>
</tableLayout>
</panel>
</root>
Figure 14: Row spans and column Spans values
The XML above defines two rows. The first row has four cells and a height of 300 pixels. The second row has two cells and a height of 50 pixels. Cell 1.2 column width is specified as 100 and cell 2.1 has its columnSpan and columnWidth attributes set to 3 and 400 respectively.
Note that resizing the main frame will only cause the cell 1.4 and cell 2.2 to resize.
Table layout can be manipulated using the appropriate procedures/functions in the API_Panel,API_Frame , API_Dialog and API_Layout packages.
API Procedures
API_Panel
Procedure : addCell(in_panelName_tx varchar2, in_tableRowCell_r api_layout.t_tableRowCell, in_index_nr number:=null)
Remarks : This procedure adds a tableRowcell to the tablelayout at the specified index. If index is not defined it adds the row cell as the last row of the table.
Procedure : addCell(in_panelName_tx varchar2,in_tableRowCellName_tx varchar2, in_tableColumnCell_r api_layout.t_tableColumnCell, in_index_nr number:=null)
Remarks : This procedure adds a tableColumnCell to the specified tableRowCell at the specified index. If index is not defined, the tableColumnCell will be added as the last one.
Procedure : addPanel(in_panelName_tx varchar2,in_cellName_tx varchar2, in_subPanelName_tx varchar2)
Remarks : This procedure adds the panel specified by the in_subPanelName_tx, into the cell (in_cellName_tx) which resides in the panel specified by the in_panelName_tx.
Procedure : addPanel(in_panelName_tx varchar2,in_tableRowCellName_tx varchar2, in_tableColumnCell_r api_layout.t_tableColumnCell, in_subPanelName_tx varchar2)
Remarks : This procedure creates the column cell specified by in_tableColumnCell_r in the row cell specified by in_tableRowCellName_tx. Next, the panel referenced in in_subPanelName_tx is placed into the column cell specified by in_tableColumnCell.
Function : getParentRowCell (in_panelName_tx varchar) return api_layout.t_tableRowCell
Remarks : This function returns the row cell the specified panel is in.
Procedure : removeCell(in_panelName_tx varchar2,in_cellName_tx varchar2 )
Remarks : This procedure removes the cell that the specified panel is under from the layout manager.
Procedure : removePanel(in_panelName_tx varchar2,in_subPanelName_tx varchar2,in_keepLegacyCell_yn varchar2:='Y')
Remarks : This procedure removed the specified sub panel from its containing panel. Setting the in_keeplegacyCell_yn to Y will cause the panel's layout manager keep the layout cell that holds the sub panel. Setting the parameter to N will cause the layout manager remove the cell from the panels content.
Procedure : setParentCell (in_panelName_tx varchar2,in_cell_r api_layout.t_cell, in_index_nr number:=null)
Remarks : This procedure updates the cell containing the specified panel in the in_panelName_tx. If the cell is a tableColumnCell then the in_index_nr sets the order of the column cell in its row. Please note that this procedure does not support the tablerowColumnCell. For updating a tableRowColumnCell please use the api_panel.setParentRowCell.
Procedure : setParentRowCell(in_panelName_tx varchar2,in_cell_r api_layout.t_tableRowCell, in_index_nr number:=null)
Remarks : This procedure updates the row cell containing the panel specified in the in_panelName_tx. The in_index_nr parameter is used to specify the order of the row cell in the table layout.
API_FRAME
Procedure : addCell(in_frameName_tx varchar2, in_tablerowcell_r api_layout.t_tablerowCell, in_index_nr number:=null)
Remarks :This procedure adds a tableRowcell to the tablelayout at the specified index. If index is not defined it adds the row cell as the last row of the table.
Procedure : addCell(in_frameName_tx varchar2,in_tableRowCellName_tx varchar2, in_tablecolumncell_r api_layout.t_tablecolumnCell,in_index_nr number:=null)
Remarks : This procedure adds a tableColumnCell to the specified tableRowCell at the specified index. If index is not defined, the tableColumnCell will be added as the last one.
Procedure : addPanel(in_frameName_tx varchar2, in_cellName_tx varchar2, in_subPanelName_tx varchar2)
Remarks : This procedure adds the panel specified by the in_subPanelName_tx, into the cell (in_cellName_tx) which resides in the frame specified by the in_frameName_tx.
Procedure : addPanel(in_frameName_tx varchar2,in_tableRowCellName_tx varchar2, in_tablecolumncell_r api_layout.t_tablecolumncell,in_subPanelName_tx varchar2)
Remarks : This procedure creates the column cell specified by in_tableColumnCell_r in the row cell specified by in_tableRowCellName_tx. Next, the panel referenced in in_subPanelName_tx is placed into the column cell specified by in_tableColumnCell_r.
Procedure : removeCell(in_frameName_tx varchar2, in_cellName_tx varchar2 )
Remarks : This procedure removes the cell specified in in_cellName_tx from the frame defined by the first parameter.
Procedure : removePanel(in_frameName_tx varchar2, in_subPanelName_tx varchar2, in_keepLegacyCell_yn varchar2:='Y')
Remarks : This procedure removes the specified sub panel from its container frame. Setting the in_keeplegacyCell_yn to Y will cause the frame's layout manager keep the layout cell that holds the sub panel. Setting the parameter to N will cause the layout manager remove the cell from the panels content.
API_DIALOG
Procedure : addCell(in_dialogName_tx varchar2, in_tableRowCell_r api_layout.t_tableRowCell, in_index_nr number:=null)
Remarks : This procedure adds a tableRowcell to the tablelayout at the specified index. If index is not defined it adds the row cell as the last row of the table.
Procedure : addCell(in_dialogName_tx varchar2,in_tableRowCellName_tx varchar2, in_tablecolumncell_r api_layout.t_tableColumnCell,in_index_nr number:=null)
Remarks : This procedure adds a tableColumnCell to the specified tableRowCell at the specified index. If index is not defined, the tableColumnCell will be added as the last one.
Procedure : addPanel(in_dialogName_tx varchar2, in_cellName_tx varchar2, in_subPanelName_tx varchar2)
Remarks : This procedure adds the panel specified by the in_subPanelName_tx, into the cell (in_cellName_tx) which resides in the dialog specified by the in_dialogName_tx.
Procedure :addPanel(in_dialogName_tx varchar2,in_tableRowCellName_tx varchar2, in_tablecolumncell_r api_layout.t_tablecolumncell,in_subPanelName_tx varchar2)
Remarks : This procedure creates the column cell specified by in_tableColumnCell_r in the row cell specified by in_tableRowCellName_tx. Next, the panel referenced in in_subPanelName_tx is placed into the column cell specified by in_tableColumnCell_r.
Procedure : removeCell(in_dialogName_tx varchar2, in_cellName_tx varchar2)
Remarks : This procedure removes the cell specified in in_cellName_tx from the dialog defined by the first parameter.
Procedure : removePanel(in_dialogName_tx varchar2,in_subPanelName_tx varchar2,in_keepLegacyCell_yn varchar2:='Y')
Remarks : This procedure removes the specified sub panel from its container frame. Setting the in_keeplegacyCell_yn to Y will cause the dialog's layout manager keep the layout cell that holds the sub panel. Setting the parameter to N will cause the layout manager remove the cell from the panels content.
API_LAYOUT
Function :
createCell(in_positionx_nr number:=null,in_positiony_nr number:=null, in_docking_cd varchar2:=null,in_hAlign_tx varchar2:=null,
in_vAlign_tx varchar2:=null,in_columnSpan_nr number:=null, in_rowSpan_nr number:=null,in_columnWidth_tx varchar2:=null,
in_width_nr number:=null,in_height_nr number:=null) return t_cell
Remarks : This function returns a new layout cell. It can be used for creating xyCell, borderCell or tableColumnCell. Please note that this function does not actually place the layout cell into a layout manager. For this purpose, the appropriate setCell procedure must be used. The input parameters of the function are grouped by the type of the cell they are used as below;
XY Cell : in_positionx_nr, in_positiony_nr
Border Cell : in_docking_cd
Column Cell : in_hAlign_tx, in_vAlign_tx, in_columnSpan_nr, in_rowSpan_nr, in_columnWidth_tx
Common to all three: in_width_nr, in_height_nr
Function :
createTableColumnCell(in_hAlign_tx varchar2:=null,in_vAlign_tx varchar2:=null,in_columnSpan_nr number:=null,in_rowSpan_nr number:=null,
in_columnWidth_tx varchar2:=null,in_width_nr number:=null,in_height_nr number:=null, in_name_tx varchar2:=null) return api_layout.t_tableColumnCell is
Remarks : This function returns a new t_tableColumnCell cell type. Please see api_panel.addpanel documentation for further details.
Function :
createTableRowCell(in_rowHeight_nr number:=null, in_name_tx varchar2:=null) return api_layout.t_tableRowCell is
Remarks : This function returns a new t_tableRowCell cell type. Please see api_panel.addCell documentation for further details.
Actions
The example below demonstrates to insert a new row to a panel that uses a table layout manager. Note that the in_index_nr parameter of the addCell API indicates the exact position that the row is to be placed. If no index is specified the row is placed as the last row to the table.
PROCEDURE addRowCell IS
v_tablerow_r api_layout.t_tablerowcell;
BEGIN
v_tablerow_r := api_layout.createtablerowcell(in_rowheight_nr => 100, in_name_tx => 'row1');
api_panel.addcell(in_panelname_tx => 'mainPanel',in_tablerowcell => v_tablerow_r, in_index_nr => 2);
END;
The next example adds a column cell into an existing row cell.Then insert an existing panel into this newly created column cell
PROCEDURE addColumnCell IS
v_tablecolumn_r api_layout.t_tablecolumncell;
BEGIN
v_tablecolumn_r := api_layout.createtablecolumncell(in_halign_tx => 'Full', in_valign_tx => 'Full', in_columnspan_nr => 2,
in_name_tx => 'column1');
api_panel.addCell( in_panelname_tx => 'mainPanel', in_tablerowcellname_tx => 'row1', in_tablecolumncell => v_tablecolumn_r,
in_index_nr => 1);
api_panel.addpanel( in_panelname_tx => 'mainPanel', in_cellName_tx => 'column1', in_subpanelname_tx => 'panel1');
END;
The procedure below updates the height of the row cell containing the panel panel1.
PROCEDURE setParentRowCell IS
cell api_layout.t_tablerowcell;
BEGIN
cell := api_panel.getParentRowCell(in_panelname_tx=>'panel1');
cell.rowheight := 100;
api_panel.setParentrowcell( in_panelname_tx => 'panel1', in_cell => cell);
END;
The setParentCell procedure updates the columnWidth and columnSpan attributes of the cell containing panel1.
PROCEDURE setParentCell IS
v_cell_r api_layout.t_cell;
BEGIN
v_cell_r := api_panel.getParentcell('panel1');
v_cell_r.columnWidth := 150;
v_cell_r.columnSpan := 1;
api_panel.setParenCell( in_panelname_tx=>'panel1', in_cell=>cell);
END;
The next example demonstrates removing row cell.
PROCEDURE removeRowCell IS
BEGIN
api_panel.removecell(in_panelname_tx => 'mainPanel', in_cellname_tx => 'row1');
END;
XSD
Below is the part of the BRIM-UI XSD that defines the table layout elements.
<xs:element minOccurs="0" name="tableLayout">
<xs:complexType>
<xs:sequence>
<xs:element minOccurs="0" maxOccurs="unbounded" name="tableRowCell">
<xs:complexType>
<xs:sequence maxOccurs="unbounded">
<xs:element minOccurs="0" name="tableColumnCell">
<xs:complexType>
<xs:group minOccurs="0" ref="cellChildGroup" />
<xs:attributeGroup ref="tableColumnCellAttributeGroup" />
</xs:complexType>
</xs:element>
</xs:sequence>
<xs:attributeGroup ref="tableRowCellAttributeGroup" />
</xs:complexType>
</xs:element>
</xs:sequence>
<xs:attributeGroup ref="tableLayoutAttributeGroup" />
</xs:complexType>
</xs:element>
Attributes of tablelayout.
<xs:attributeGroup name="tableLayoutAttributeGroup">
<xs:attribute name="cellSpacing" type="xs:integer" />
</xs:attributeGroup>
Attributes of rows.
<xs:attributeGroup name="tableRowCellAttributeGroup">
<xs:attribute name="rowHeight" />
<xs:attribute name="name" type="BDF_string255" />
</xs:attributeGroup>
Attributes of cells
<xs:attributeGroup name="tableColumnCellAttributeGroup">
<xs:attribute name="columnWidth" type="xs:string" />
<xs:attribute name="rowSpan" type="xs:integer" />
<xs:attribute name="columnSpan" type="xs:integer" />
<xs:attribute name="hAlign" type="BDF_TableLayoutHAlign" />
<xs:attribute name="vAlign" type="BDF_TableLayoutVAlign" />
<xs:attribute name="width" type="xs:integer" />
<xs:attribute name="height" type="xs:integer" />
<xs:attribute name="name" type="BDF_string255" />
</xs:attributeGroup>
<xs:simpleType name="BDF_TableLayoutHAlign">
<xs:restriction base="xs:string">
<xs:enumeration value="Left" />
<xs:enumeration value="Center" />
<xs:enumeration value="Right" />
<xs:enumeration value="Full" />
</xs:restriction>
</xs:simpleType>
<xs:simpleType name="BDF_TableLayoutVAlign">
<xs:restriction base="xs:string">
<xs:enumeration value="Top" />
<xs:enumeration value="Center" />
<xs:enumeration value="Bottom" />
<xs:enumeration value="Full" />
</xs:restriction>
</xs:simpleType>
Yalim Gerger
Monday, July 7, 2008
BRIM-UI Key Events
This document describes how to define a key event in BRIM-UI In a BRIM-UI Application, a key event is triggered when the user presses a combination of keyboard buttons specified by the developer.
A key event can be defined at the mainframe, dialog, panel or component level. A key event defined at a higher level in the UI tree hierarchy delegates down to lower levels. For example, a key event defined at Panel A, will trigger if the defined key combination is pressed when the focus is in a component that resides in Panel B which is included in Panel A.
When a key is pressed the frameowork searches for an appropriate event starting from the focused component. It then climbs higher in the view hierarchy (focused component -> panel (recursively) -> Frame).
The example below demonstrates how the frameowrk uses the hierarchy to execute an event.
The mainFreame XML;
<?xml version="1.0" encoding="UTF-8"?>
<root xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="http://www.gergerconsulting.com/bdf_ide_dev.xsd">
<mainframe backgroundColor="Green" close="Y" drag="Y" maximize="Y"
maximizeOnStartUp="N" minimize="Y" name="myMF" resizable="Y">
<tableLayout>
<tableRowCell>
<tableColumnCell hAlign="Full" vAlign="Full">
<include name="mainPanel" type="Panel"/>
</tableColumnCell>
</tableRowCell>
</tableLayoutv
</mainframe>
</root>The mainPanel XML;
<?xml version="1.0" encoding="UTF-8"?>
<root xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="http://www.gergerconsulting.com/bdf_ide_dev.xsd">
<panel backgroundColor="Red" borderTitle="main panel" borderType="TitledBorder"
name="mainPanel">
<events>
<keyEvent action="Act_keyMain" immediate="Y" keyCombination="shift A"/>
</events>
<tableLayout>
<tableRowCell>
<tableColumnCell hAlign="Full" vAlign="Full">
<include name="subPanel" type="Panel"/>
</tableColumnCell>
</tableRowCell>
<tableRowCell>
<tableColumnCell>
<button display="Y" enable="Y" label="test"/>
</tableColumnCell>
</tableRowCell>
</tableLayout>
</panel>
</root>
The subPanel XML;
<?xml version="1.0" encoding="UTF-8"?>
<root xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="http://www.gergerconsulting.com/bdf_ide_dev.xsd">
<panel backgroundColor="Blue" borderTitle="sub 1 panel"
borderType="TitledBorder" name="subPanel">
<events>
<keyEvent action="Act_keySub" immediate="Y" keyCombination="shift A"/>
</events>
<borderLayout>
<borderCell docking="Center" name="btnCell1">
<button display="Y" enable="Y" label="Fire" name="btn1">
<events>
<keyEvent action="Act_keyButton" immediate="Y" keyCombination="shift A"/>
</events>
</button>
</borderCell>
</borderLayout>
</panel>
</root>
The screenshot of thw application is below;
In the example above, if the user presses "shift and "A" buttons on the keyboard while the focus is on the button with the label "Fire" then the "Act_keyButton” action executes. However, if the focus is on the “test” button and pressing the same keyboard buttons causes the action “Act_keyMain” to execute. The action "Act_keySub" is never executed.
Defining a Key Combination
The keys are split into two groups; modifiers (shift,control and alt) and virtual keys (rest of the keys).
A keyCombination consists of one virtual key and one or more modifiers. Additionally, “pressed” and “released” keywords are used to specify whether the event should trigger upon the pressing of a virtual key or releasing it.
Below is a list of examples that define various key combinations;
“shift A F1” => INCORRECT! Cannot use more than one virtual key in one keyCombination.
“shift alt ENTER” => Correct. The event would fire when the user presses shift, alt and enter.
“A” => Correct. Pressing on A would fire the event.
“pressed A” => Correct. Same as above.
“released A” => Correct. The event would fire when the key A is released.
“typed a” => Correct. The event would only fire when lowercase a is typed by the user.
“typed A” => Correct. The event would only fire when uppercase A is typed by the user.
Below is the list of most commonly used virtual keys;
A B C ..... Z
0 1 2 3 ... 9
COMMA
PERIOD
SLASH
SEMICOLON
ENTER
BACK_SPACE
TAB
SHIFT
CONTROL
ALT
PAUSE
CAPS_LOCK
ESCAPE
PAGE_UP
PAGE_DOWN
END
HOME
LEFT UP RIGHT DOWN
MULTIPLY
ADD
SEPARATOR
SUBTRACT
DECIMAL
DIVIDE
DELETE
NUM_LOCK
SCROLL_LOCK
F1 F2 ... F12
PRINTSCREEN
INSERT
AMPERSAND
ASTERISK
QUOTEDBL
LESS
GREATER
BRACELEFT
BRACERIGHT
AT
COLON
CIRCUMFLEX
DOLLAR
EURO_SIGN
EXCLAMATION_MARK
INVERTED_EXCLAMATION_MARK
LEFT_PARENTHESIS
NUMBER_SIGN
MINUS
PLUS
RIGHT_PARENTHESIS
UNDERSCORE
NUMPAD0 NUMPAD1 .... NUMPAD9
Yalim Gerger
Subscribe to:
Posts (Atom)
