📄 designer.html
字号:
<!DOCTYPE HTML PUBLIC "-//SoftQuad Software//DTD HoTMetaL PRO 6.0::19990601::extensions to HTML 4.0//EN" "hmpro6.dtd"><HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <H3>Designer Environment</H3> <P>The Abeille Designer components are defined as follows:</P> <P ALIGN="CENTER"><IMG SRC="../images/new_form.png" WIDTH="600" HEIGHT="395" BORDER="0"></P> <P></P> <P></P> <P></P> <TABLE BORDER="0"> <TR> <TD VALIGN="TOP"><IMG SRC="../images/incors/24x24/application_open.png" WIDTH="24" HEIGHT="24" BORDER="0"></TD> <TD VALIGN="TOP"> </TD> <TD VALIGN="TOP"> <B>Open Project</B>. This opens a previously created project file. You must have a project opened before you can create forms.</TD> </TR> <TR> <TD VALIGN="TOP"><IMG SRC="../images/incors/24x24/application_preferences.png" WIDTH="24" HEIGHT="24" BORDER="0"></TD> <TD VALIGN="TOP"> </TD> <TD VALIGN="TOP"> <B>Project Settings</B>. Allows you to edit the current project settings. Projects define where your source and image files are located. Abeille Forms uses this information to determine the correct package names when referencing images and nested forms.</TD> </TR> <TR> <TD VALIGN="TOP"><IMG SRC="../images/incors/24x24/folder.png" WIDTH="24" HEIGHT="24" BORDER="0"></TD> <TD VALIGN="TOP"> </TD> <TD VALIGN="TOP"> <B>Open Form</B>. Opens a previously saved form into the designer.</TD> </TR> <TR> <TD VALIGN="TOP"><IMG SRC="../images/incors/24x24/disk_blue.png" WIDTH="24" HEIGHT="24" BORDER="0"></TD> <TD VALIGN="TOP"> </TD> <TD VALIGN="TOP"> <B>Save Form</B>. Saves the current form to a file.</TD> </TR> <TR> <TD VALIGN="TOP"><IMG SRC="../images/incors/24x24/document_add.png" WIDTH="24" HEIGHT="24" BORDER="0"></TD> <TD VALIGN="TOP"> </TD> <TD VALIGN="TOP"> <B>New Form</B>. Creates a new form. Before you can create a form, you must first define a project.</TD> </TR> <TR> <TD VALIGN="TOP"><IMG SRC="../images/incors/24x24/media_play_green.png" WIDTH="24" HEIGHT="24" BORDER="0"></TD> <TD VALIGN="TOP"> </TD> <TD VALIGN="TOP"> <B>Show Form</B>. Shows the current form exactly as it would appear in your application.</TD> </TR> <TR> <TD VALIGN="TOP"><IMG SRC="../images/incors/24x24/column_add_before.png" WIDTH="24" HEIGHT="24" BORDER="0"></TD> <TD VALIGN="TOP"> </TD> <TD VALIGN="TOP"> <B>Add Column</B>. Inserts an empty column in the currently selected form.</TD> </TR> <TR> <TD VALIGN="TOP"><IMG SRC="../images/incors/24x24/column_delete.png" WIDTH="24" HEIGHT="24" BORDER="0"></TD> <TD VALIGN="TOP"> </TD> <TD VALIGN="TOP"> <B>Delete Column</B>. Deletes the currently selected column.</TD> </TR> <TR> <TD VALIGN="TOP"><IMG SRC="../images/incors/24x24/column_small.png" WIDTH="24" HEIGHT="24" BORDER="0"></TD> <TD VALIGN="TOP"> </TD> <TD VALIGN="TOP"> <B>Set As Column Separator</B>. This sets the column width to a small, constant size. This is mainly used for spacing between components. You can define this size in the environment settings.</TD> </TR> <TR> <TD VALIGN="TOP"><IMG SRC="../images/incors/24x24/column.png" WIDTH="24" HEIGHT="24" BORDER="0"></TD> <TD VALIGN="TOP"> </TD> <TD VALIGN="TOP"> <B>Set As Large Column Separator</B>. This sets the column width to a small, constant size (approximately twice the height as the standard separator). This is mainly used for spacing between components. You can define this size in the environment settings.</TD> </TR> <TR> <TD VALIGN="TOP"><IMG SRC="../images/incors/24x24/row_add_before.png" WIDTH="24" HEIGHT="24" BORDER="0"></TD> <TD VALIGN="TOP"> </TD> <TD VALIGN="TOP"> <B>Add Row</B>. Inserts an empty row in the currently selected form.</TD> </TR> <TR> <TD VALIGN="TOP"><IMG SRC="../images/incors/24x24/row_delete.png" WIDTH="24" HEIGHT="24" BORDER="0"></TD> <TD VALIGN="TOP"> </TD> <TD VALIGN="TOP"> <B>Delete Row</B>. Deletes the currently selected row.</TD> </TR> <TR> <TD VALIGN="TOP"><IMG SRC="../images/incors/24x24/row_small.png" WIDTH="24" HEIGHT="24" BORDER="0"></TD> <TD VALIGN="TOP"> </TD> <TD VALIGN="TOP"> <B>Set As Row Separator</B>. This sets the row height to a small, constant size. This is mainly used for spacing between components. You can define this size in the environment settings.</TD> </TR> <TR> <TD VALIGN="TOP"><IMG SRC="../images/incors/24x24/row.png" WIDTH="24" HEIGHT="24" BORDER="0"></TD> <TD VALIGN="TOP"> </TD> <TD VALIGN="TOP"> <B>Set As Large Row Separator</B>. This sets the row height to a small, constant size (approximately twice the height as the standard separator). This is mainly used for spacing between components. You can define this size in the environment settings.</TD> </TR> <TR> <TD VALIGN="TOP"><IMG SRC="../images/incors/24x24/jar_bean.png" WIDTH="24" HEIGHT="24" BORDER="0"></TD> <TD VALIGN="TOP"> </TD> <TD VALIGN="TOP"> <B>Java Bean Manager</B>. Allows you to import 3rd party Java Beans. Note that Abeille Forms only supports lightweight components.</TD> </TR> <TR> <TD VALIGN="TOP"><IMG SRC="../images/incors/24x24/environment_preferences.png" WIDTH="24" HEIGHT="24" BORDER="0"></TD> <TD VALIGN="TOP"> </TD> <TD VALIGN="TOP"> <B>Environment Preferences</B>. Allows to to change the environment settings for the application.</TD> </TR> <TR> <TD VALIGN="TOP"><IMG SRC="../images/incors/24x24/information.png" WIDTH="24" HEIGHT="24" BORDER="0"></TD> <TD VALIGN="TOP"> </TD> <TD VALIGN="TOP"> <B>System Information</B>. Displays the system properties for the Java environment.</TD> </TR> </TABLE> <P></P> <H4>Projects</H4> <P>Before you can create a form, you must create a Project. A Project defines where your source (Java) and image files are located for your application. It is recommended that you store your form files in the same directories where they are used in your source. </P> <P>Select the New Project menu item. This will invoke the following dialog:</P> <P ALIGN="CENTER"><IMG SRC="../quickstart/new_project.png" WIDTH="496" HEIGHT="357" BORDER="0"></P> <P ALIGN="LEFT"></P> <P ALIGN="LEFT">First, provide a path and file name for your project file. Next, you will need to add the paths where your image and Java source files are located. Most applications employ named packages. If this is the case, only include the top most source directory. For example, the source for our Abeille Forms product is organized as follows:</P> <P ALIGN="CENTER"><IMG SRC="../images/dev_environment.png" WIDTH="335" HEIGHT="333" BORDER="0"></P> <P ALIGN="LEFT"></P> <P ALIGN="LEFT">The main development directory is located in c:\forms. Beneath this directory we have a src directory. This directory contains our source tree. All of our source files are packaged in com.jeta.* package space. Furthermore, all of our images are located under the source directory as well (in the jeta.resources directory). Therefore, the only path we would need to add to our project file would be c:\forms\src. </P> <P ALIGN="LEFT">The important point to remember when defining paths is that the forms runtime will load images and nested forms by using the classpath (ClassLoader.getResource). Abeille will store the relative directories of you resources and use those directories when loading from the classpath. Abeille determines the relative directories (or package names) from the source paths you add to the project settings.</P> <P ALIGN="LEFT">Once your project has been created, you can now begin designing forms. Press the New Form button on the toolbar. This will create an empty grid that is the basis for your form. On the left side of the designer window is the components toolbar. This toolbar contains all available Java Beans that can be added to a form. You can also import 3rd party Java Beans by invoking the Bean Manager. Simply click a Java Bean on the component palette and then click on a cell in the grid. The component will then appear on the form in the selected cell. Keep in mind that that size of the component may or may not be correct at this point. The default cell size is based on the preferred size of the component. Some components such as buttons and labels have a natural preferred sized. However, components like an empty JTextField have an undefined preferred width and will be too small when you first add them to the form. <I><B>You don't explicitly set the sizes for components</B></I>. Rather, you set the size and resize behavior of their row, column, and cell. Later, we will show how to do this.</P> <P ALIGN="LEFT">Once a component has been added to the form, you can edit its properties. On the right side of the designer are the main settings panels for the form. </P> <TABLE BORDER="1"> <TR> <TD WIDTH="120">Properties </TD> <TD WIDTH="622">This panel allows you to set the properties (font, text, color, etc.) for the currently selected component.</TD> </TR> <TR> <TD WIDTH="120">Column Spec</TD> <TD WIDTH="622">Allows you to set the constraints for the currently selected column. For example, a column can have a fixed width or it can grow to fill available space in the container. Component widths are constrained by their column.</TD> </TR> <TR> <TD WIDTH="120">Row Spec</TD> <TD WIDTH="622">Allows you to set the constraints for the currently selected row. Like a column, a row can have a fixed height or it can grow to fill available space in the container. Component heights are constrained by their row.</TD> </TR> <TR> <TD WIDTH="120">Cell Constraints</TD> <TD WIDTH="622">Allows you to set the constraints for an individual cell. You can control attributes such as alignment, insets, and row/column span for a component.</TD> </TR> </TABLE> <P ALIGN="LEFT"></P><BR> <H4 ALIGN="LEFT">Column and Row Specification</H4> <TABLE BORDER="0" WIDTH="100%"> <TR> <TD VALIGN="TOP"> <P>The Row and Column specifications can be set using the control panels. To fully understand these parameters you should read the FormLayout white paper included with this documentation. The following descriptions are for Column Specs, but they equally apply to Row Specs as well.</P> <P><B>Column Alignment</B> - specifies how components in the column are aligned.</P> <P><B>Column Size</B> - specifies the size for the column. A column can have a constant size or the column size can depend on the components it contains. </P> <P><B>Column Resize</B> - specifies if the column should resize itself based on the available space in the container. If you want your components to be resizable, then you should set the column and row resize to Grow. The grow weight determines how much space should be allocated relative to other columns that have grow set.</P> <P><B>Column Group</B> - allows you to group columns so that they have the same width.</P></TD> <TD> </TD> <TD><IMG SRC="../images/col_spec.png" WIDTH="171" HEIGHT="400" BORDER="0"></TD> <TD></TD> </TR> </TABLE> <P ALIGN="LEFT"></P><BR> <H4>Cell Constraints</H4> <TABLE BORDER="0" WIDTH="100%"> <TR> <TD VALIGN="TOP"> <P>Cell Constraints apply to a single cell.</P> <P><B>Span</B> - specifies the number of columns or rows a component will occupy. </P> <P><B>Alignment</B> - specifies how a component will be aligned in its cell. A component will not necessarily fill a cell. It depends on the Row/Column Spec alignments as well as the alignment in the Cell Constraints. If you want a component to fill the entire cell, then select the FILL alignment. Otherwise, you can align a component to the LEFT, CENTER, RIGHT, TOP, and BOTTOM.</P> <P><B>Insets</B> - specifies the padding between the component and the cell boundary. </P> <P><B>Fill</B> - allows you to specify a background effect for a cell. Current effects include images, textures, gradients, and solid colors.</P></TD> <TD> </TD> <TD><IMG SRC="../images/cell_constraints.png" WIDTH="187" HEIGHT="400" BORDER="0"></TD> <TD></TD> </TR> </TABLE></BODY></HTML>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -