Starting Off Components
How a Component is written and the attributes available
A component is a line of code in a Layout that references a Snippet. The script that comprises the component replaces static html within a layout and the snippet that the component links to rebuilds the static code dynamically when the page is rendered.
The format a component takes (as written within a layout), and the minimum attributes required for the Component to work, are:
<pepperio:component name="Component Name" snippet="external_snippet" location="3001" />
Name - this is any name to uniquely identify this component from others within the layout.
Snippet - the snippet that the component references.
Location - A location within the database to which you are assigning the data/content of the component. This figure must be unique for each component within any layout, and with one exception the number must be within the range 2048 - 32,767. As any other location references have been assigned to other elements, and use of them may incur unexpected behaviour. The exception is the component that defines the main content of the page (as opposed to navigation, footer, header, etc elements) This unique portion of the page is assigned a location of '_self' rather than a number.
| Attribute | Value | Req'd? | Default |
Description |
|---|---|---|---|---|
| name | String | Yes | N/A | Name of the component, valid values are: alphanumerical characters, hyphen and underscore. i.e. name="story" |
| snippet | String | Yes | Empty | Reference to the snippet to be included.
This means you must have a snippet in your directory with this name. In the example below the component is referencing a snippet called "freetext".
i.e. snippet="freetext" |
| location | _self <INTEGER> |
Yes | _self |
A unique location label within the page template. The integer can be any value between 2048 and 32767 i.e. location="2076" |
| id | String | No | Value of name field | Used to set the id attribute of the element that will be created to contain this included component. Valid values are: alphanumerical characters, hyphen and underscore. This attribute is optional, if omitted the value of the name attribute will be used instead. i.e. id="story" |
| width | Integer | No | Width in pixels of the component on the preview page.
i.e. width="438" |
|
| height | Integer | No | Height in pixels of the component on the preview page.
i.e. height="400" |
|
| editorwidth | Integer | No | 500 | Width in pixels of the editor popup window.
i.e. editorwidth="560" |
| editorheight | Integer | No | 500 | Height in pixels of the editor popup window.
i.e. editorheight="420" |
| Inherit | Yes No |
No | No | Use the contents of the parent component if no content defined in this page. |
| Style | String | No | Empty | Set the style of the surrounding DIV on the preview page. |
| NotEditable | Yes No |
No | No | Determines if the component is editable by the User or dynamically generated (like a navigation component). The default is 'no', therefore Snippets are editable by the End User unless specifically designated as not so. |
Component Editors:
When a User clicks on an editable component icon, depending on the type of tags employed by the snippet that the component references, different types of component editor will open; TEXT, FORM, VISUAL, MANUAL LIST, UDP LIST and RSS.