The Component Library provides a comprehensive set of user interface components that can be included on your web pages. These components range from the simple (e.g. Links, Tables) to the complex (e.g. Slideshows, Pie Charts). All components use only client-side technologies (i.e. HTML, CSS, and JavaScript) and are compatible with the latest versions of all major browsers, with older versions usually supported as well. All components can be customized through a simple interface, and inserted into an HTML web page with the click of a button.
These are the components available in Taco HTML Edit. Select a component to learn more about it.
Opening the Component Library
To open the Component Library, select "Component Library..." from the "Insert" menu in Taco HTML Edit. You may also add a Component Library item to the document toolbar by selecting "Customize Toolbar..." from the "View" menu.
When you open the Component Library, you will see a listing of all of the components in one of three views: Grid View, List View, or Cover Flow. Clicking a component will select it, resulting in the display of the component's description and browser compatibility information. The browser compatibility indicates the versions of the major web browsers (Internet Explorer, Safari, and Firefox) you can expect to render the component correctly. For example, "IE 7+", indicates that Internet Explorer versions 7 and later will all render the component correctly. Double-clicking a component, or pressing Return when a component is selected, will open the component.
On the left side of the toolbar, you can switch between the available views for the component listing. On the right side, there is a search box. Entering text will cause the component list to be immediately filtered down to only components that match the search text (by name or description).
Once you have selected a component, you can customize its behavior and appearance, and see your changes in Live Preview. The options that you can customize appear on the left side of the component window. The available options will vary for each component, and there may be multiple panes of options which you can select by clicking the pane title. In the example screenshot for the Form Calendar component, there are two panes: one titled "Calendar Date & Behavior" and another titled "Appearance". Clicking "Appearance" will hide the "Calendar Date & Behavior" options and reveal a new set of options pertaining to the component's appearance.
In addition to the Live Preview, you can view the source HTML, CSS, JavaScript, and image files for the component. Both the Live Preview and the Source view will update automatically when you change an option value for the component. In the "View" menu select "Preview" or "Preview With Browser" to preview the component in an external web browser. Undo is available in
the Edit menu to revert one or more changes made to options (with Redo available as well).
When you have completed configuring your component as desired, select the "Insert..." button to add the component to a web
page.
Many components involve the selection of files, often for hypertext links or for images that should be displayed as part of a component. For these components, the file may be specified as a relative path or a full URL. If "Relative Path" is selected as the URL type, then you will select a local file for the link. This can be done by clicking the "Select File..." button to show a file browser, or you can drag a file from the Finder to the location of the "(None Selected)" text. The text will change to show the file name once a file is selected.
Once the component is inserted into an HTML document, the files will be linked using a relative URL from the document to the location of the file. The relative path will need to remain the same when you upload your website to a server, so often, it is simplest to keep both the HTML document and the linked document in the same folder.
If you prefer to use a full URL, or the linked file is not part of your local website, then you should select "Full URL" from the drop down list. Then, a text field will appear for you to enter the full URL beginning with "http://".
Some components, like
Slideshow, require several files to be selected, and display the files/URLs in a table. For these components, you can select a row in the table, and then use the file selector below the table to specify the file/URL. You may also drag a collection of multiple files to the table itself, in which case "(None Selected)" entries will be replaced first before other entries are changed.
After customizing a component, select the "Insert..." button to add the component to your document. A confirmation dialog will appear showing the following:
- The currently active document, in which the component will be inserted. Open a different document if the listed document is not the one you intend for the component.
-
- If additional resource files are required for the component, then there will be a path and a Browse button for selecting the destination directory for these files. It is best to always use the same destination directory for all documents in a project, which is why, if the active document is part of a project, there is a checkbox to set the selected directory as the default for the project.
- A list of style sheets, scripts, and images that will be copied into the selected resource directory, including warnings if files will be overwritten. Files with warnings will always appear at the top of the list.
Once you are satisfied with the information listed on the confirmation dialog, select the "Complete Insert" button to finish the component insertion. Select "Cancel" to return to the component customization window.