Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 4.0
Wiki Markup
{div:class=floatRight}
{panel:title= On This Page| borderStyle=solid| borderColor=#ccc| bgColor=#fff}
{toc:minLevel=2|maxLevel=5}
{panel}
{div}

h2. Overview

A component 

Overview

A component "grade"

...

is

...

a

...

form

...

of

...

type

...

definition:

...

a

...

name

...

for

...

a

...

particular

...

collection

...

of

...

default

...

configuration

...

options.

...

Developers

...

can

...

identify

...

a

...

grade

...

for

...

their

...

component:

...

this

...

will

...

add

...

the

...

default

...

configuration

...

options

...

to

...

those

...

defined

...

by

...

the

...

developer,

...

as

...

well

...

as

...

automate

...

some

...

things

...

like

...

the

...

creation

...

of

...

event

...

firers.

...

Grades

...

essentially

...

build

...

upon

...

each

...

other,

...

and

...

can

...

be

...

composed

...

as

...

needed.

...

The

...

following

...

table

...

describes

...

the

...

exiting

...

grades

...

offered

...

by

...

the

...

Framework

...

and

...

how

...

they

...

relate

...

to

...

each

...

other.

...

Component

...

developers

...

are

...

free

...

to

...

define

...

their

...

own

...

grades

...

that

...

may

...

(or

...

may

...

not)

...

be

...

built

...

upon

...

any

...

of

...

these

...

grades.

...

Grade

...

Name

...

Description

littleComponent

A "little"

...

component

...

is

...

the

...

most

...

basic

...

component:

...

it

...

supports

...

options

...

merging.

...

modelComponent

A "model"

...

component

...

is

...

a

...

little

...

component

...

that

...

additionally

...

provides

...

supports

...

for

...

any

...

model

...

defined

...

in

...

the

...

components

...

options.

...

eventedComponent

An "evented"

...

component

...

is

...

a

...

little

...

component

...

that

...

additionally

...

instantiates

...

event

...

firers

...

based

...

on

...

events

...

declared

...

in

...

the

...

options.

...

viewComponent

A "view"

...

component

...

is

...

an

...

evented

...

model

...

component

...

that

...

supports

...

a

...

view.

...

rendererComponent

A "renderer"

...

component

...

is

...

a

...

vew

...

component

...

that

...

bears

...

a

...

renderer.

...

There

...

are

...

additional

...

features

...

provided

...

by

...

this

...

component

...

type

...

specified

...

on

...

the

...

...

...

...

...

section

...

of

...

the

...

...

...

page

Specifying A Grade

A component's

...

grade

...

should

...

be

...

specified

...

using

...

the

...

gradeNames

...

option

...

in

...

the

...

components

...

defaults

...

block,

...

as

...

shown

...

in

...

the

...

examples

...

below.

...

The

...

gradeNames

...

option

...

is

...

a

...

string

...

or

...

array

...

of

...

strings.

...

:}
Code Block
javascript
javascript
fluid.defaults("fluid.uploader.demoRemote", {
    gradeNames: "fluid.eventedComponent",
    ...
});
{code}

{code:javascript}
Code Block
javascript
javascript
fluid.defaults("cspace.messageBarImpl", {
    gradeNames: ["fluid.rendererComponent"],
    ...
});
{code}

In

...

the

...

example

...

below,

...

the

...

autoInit

...

flag

...

is

...

not

...

actually

...

a

...

grade,

...

but

...

is

...

added

...

to

...

the

...

gradeNames

...

array

...

to

...

control

...

how

...

the

...

component

...

is

...

created.

...

See

...

#Initializing

...

Graded

...

Components

...

below

...

for

...

more

...

information

...

about

...

the

...

autoInit

...

flag.

...

:}
Code Block
javascript
javascript
fluid.defaults("cspace.util.relationResolver", {
    gradeNames: ["fluid.modelComponent", "autoInit"],
    ...
});
{code}

{color:red}NOTE{color}: The {{autoInit}} flag is the preferred method of component creation, and will soon become the default. Always use the {{"autoInit"}} flag, unless you have a very good reason not to.

h2. Initializing Graded Components

h3. Automatically

The Framework offers support for automatic initialization of graded component through {{autoInit}}. If the {{autoInit}} flag is added to the {{gradeNames}} array, the Framework will create the graded function automatically -- the developer does not need to write a creator function.

To use the {{autoInit}} flag, add it to the array of {{gradeNames}}, as shown below:
{code:javascript}

NOTE: The autoInit flag is the preferred method of component creation, and will soon become the default. Always use the "autoInit" flag, unless you have a very good reason not to.

Initializing Graded Components

Automatically

The Framework offers support for automatic initialization of graded component through autoInit. If the autoInit flag is added to the gradeNames array, the Framework will create the graded function automatically – the developer does not need to write a creator function.

To use the autoInit flag, add it to the array of gradeNames, as shown below:

Code Block
javascript
javascript
fluid.defaults("fluid.uploader.fileQueueView", {
    gradeNames: ["fluid.viewComponent", "autoInit"],
    ...
});
{code}

{color:red}NOTE{color}: The {{autoInit}} flag is the preferred method of component creation, and will soon become the default. Always use the {{"autoInit"}} flag, unless you have a very good reason not to.

There are three typical [lifecycle| Component Lifecycle and autoInit] points in an {{autoInit}} component. The only "grade" to make use of any of them is 

NOTE: The autoInit flag is the preferred method of component creation, and will soon become the default. Always use the "autoInit" flag, unless you have a very good reason not to.

There are three typical lifecycle points in an autoInit component. The only "grade" to make use of any of them is "fluid.modelComponent".

...

"fluid.modelComponent"

...

specifies

...

a

...

preInitFunction

...

to

...

set

...

the

...

model

...

and

...

applier

...

used

...

by

...

the

...

component,

...

and

...

attaches

...

them

...

to

...

the

...

components

...

"that".

...

Manually

Developers may,

...

in

...

exceptional

...

circumstances

...

,

...

choose

...

to

...

write

...

their

...

own

...

component

...

creator

...

function

...

for

...

their

...

graded

...

component.

...

If

...

they

...

do,

...

the

...

first

...

thing

...

their

...

creator

...

function

...

should

...

do

...

is

...

call

...

the

...

appropriate

...

initialization

...

function,

...

assigning

...

the

...

returned

...

object

...

and

...

continuing

...

to

...

configure

...

it

...

as

...

desired

...

(for

...

example,

...

to

...

add

...

methods

...

to

...

it).

...

Grade

Initalization function to use

littleComponent

fluid.initLittleComponent()

...

...

eventedComponent

fluid.initLittleComponent()

...

viewComponent

fluid.initView()

...

rendererComponent

fluid.initRendererComponent

The following example shows the use of fluid.initView to initialize a view component:

Code Block
javascript
javascript
fluid.defaults("cspace.tabs", {
    gradeNames: ["fluid.viewComponent"],
    ...
});
cspace.tabs = function (container, options) {
    var that = fluid.initView("cspace.tabs", container, options);
    that.refreshView = function () {
       ...
    };
    ...
};
{code}