| Panel |
|---|
| borderColor | #321137 |
|---|
| bgColor | #fff |
|---|
| titleBGColor | #D3E3C4 |
|---|
| borderStyle | solid |
|---|
| title | Documentation Migration |
|---|
|
Beginning in version 1.3 of Infusion, we will be migrating our documentation over to our new Documentation space. These Renderer pages are being revamped in the new space, and we encourage you to refer to them. The new pages are not yet as comprehensive as these pages, but they are more focused, and include direct guidance on the recommended way to use the Renderer. They also include information about the new ProtoComponents. If you have any comments on the new documentation format, feel free to let us know by emailing the infusion-users mailing list. |
| Section |
|---|
| Column |
|---|
Overview| Excerpt |
|---|
A Component Tree is a JavaScript object that specifies the abstract properties of the view View to be rendered and the behaviour of its components, independent from the rendering technology to be used. For example, if your UI is going to allow users to select from a number of choices, your component tree will define the choices, but will be independent of whether or not the selection is rendered using checkboxes, a pull-down list, or some other method. |
The Renderer includes a number of utility functions to generate component trees, but it is useful to have an understanding of the structure and purpose of the component tree. This page attempts to provide that understanding. StructureA component tree is a tree of objects that represent the data to be rendered. The root node of the tree is typically an array of objects representing nodes in the tree, called children: | Code Block |
|---|
|
var myTree = {
children: [
{...},
{...},
...
]
};
|
|
| Column |
|---|
| Panel |
|---|
| borderColor | #566b30 |
|---|
| bgColor | #fff |
|---|
| titleBGColor | #D3E3C4 |
|---|
| borderStyle | solid |
|---|
| title | On This Page | borderStyle
|---|
| | solid |
| Panel |
|---|
| borderColor | #321137 |
|---|
| bgColor | #fff |
|---|
| titleBGColor | #c1b7c3 |
|---|
| borderStyle | solid |
|---|
| title | See Also | borderStyle | solid |
|---|
| |
| Panel |
|---|
| borderColor | #321137 |
|---|
| bgColor | #fff |
|---|
| titleBGColor | #cccccc |
|---|
| borderStyle | solid |
|---|
| title | Still need help? |
|---|
| borderStyle | solid |
|---|
| Join the infusion-users mailing list and ask your questions there. |
|
|
Each component, or node in the component tree, is identified by an ID (more on these IDs fluid:later):
| Code Block |
|---|
|
var myTree = {
children: [
{ID: "thing1",
...},
{ID: "thing2",
...},
...
]
};
|
Component Types
| Insert excerpt |
|---|
| Infusion13:Renderer Component TypesInfusion13: |
|---|
| Renderer Component Types |
|---|
| nopanel | true |
|---|
|
...