Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

To make use of the bead, go to your application or initial view MXML file and create a TextInput and add the PasswordInputBead to it:

Code Block
<basic<js:TextInput>
	<basic<js:beads>
		<basic<js:PasswordInputBead />
	</basicjs:beads>
</basicjs:TextInput>

The FlexJS framework first adds any beads that are declared in MXML. After that, FlexJS adds beads for the component that are declared in a style sheet. FlexJS uses defaults.css as its style sheet where TextInputView is declared as the view bead for TextInput (more on this later). When the TextInputView bead is added, it triggers the “viewChanged” event which allows the PasswordInputBead to make its modifications.

To see how powerful adding beads can be, add another bead to this strand:

Code Block
<basic<js:TextInput>
	<basic<js:beads>
		<basic<js:PasswordInputBead />
		<based:TextPromptBead prompt=”password” />
	</basicjs:beads>
</basicjs:TextInput>

When the application is run, not only can you enter text as a password, a prompt will appear as long as the field is empty.

...

Once you've created your jQuery or CreateJS (or other component library) beads and components, you can add them to your Flex application MXML using namespaces. This is the root tag for a version of MyInitialView.mxml:

Code Block
<basic<js:ViewBase xmlns:fx="http://ns.adobe.com/mxml/2009"
		xmlns:basic="library://ns.apache.org/flexjs/basic"
		xmlns:jquery="library://ns.apache.org/flexjs/jquery"
                xmlns:createjs="library://ns.apache.org/flexjs/createjs"
	>

...

Code Block
<!-- the basic tex button component -->
<basic<js:TextButton label="Basic" />

<!-- the jQuery text button component -->
<jquery:TextButton label="jQuery" />

<!-- the CreateJS text button component -->
<createjs:TextButton label="CreateJS" />

...