This chapter includes the following sections:
Using a combination of JavaScript and APIs provided by MAF, you can create new, fully functional interactive UI components and add them to a tag library to be used in your MAF AMX application feature.
MAF provides the following APIs for creating custom components:
Static APIs (see How to Use Static APIs)
AmxEvent
Classes (see How to Use AmxEvent Classes)
TypeHandler
(see How to Use the TypeHandler)
AmxNode
(see How to Use the AmxNode)
AmxTag
(see How to Use the AmxTag)
VisitContext
(see How to Use the VisitContext)
AmxAttributeChange
(see How to Use the AmxAttributeChange)
AmxDescendentChanges
(see How to Use the AmxDescendentChanges)
AmxCollectionChange
(see How to Use the AmxCollectionChange)
AmxNodeChangeResult
(see How to Use the AmxNodeChangeResult)
AmxNodeStates
(see How to Use the AmxNodeStates)
AmxNodeUpdateArguments
(see How to Use the AmxNodeUpdateArguments)
Table 19-1 lists static APIs that you can use to create custom UI components.
Table 19-1 Static APIs
|
Note:
Other public APIs are available in the adf.mf.el
package for logging, translation, and data channel.
Table 19-2 lists AMXEvent
classes that you can use when creating custom UI components.
Table 19-2 AMXEvent Classes
|
Table 19-3 lists TypeHandler
APIs that you can use to create custom UI components.
Table 19-3 TypeHandler APIs
|
Table 19-4 lists AmxNode
APIs that you can use to create custom UI components.
Table 19-4 AmxNode APIs
|
Table 19-5 lists AmxTag
APIs that you can use to create custom UI components.
Table 19-5 AmxTag APIs
|
Table 19-6 lists VisitContext
APIs that you can use when creating custom UI components.
Table 19-6 VisitContext APIs
|
Table 19-7 lists AmxAttributeChange
APIs that you can use when creating custom UI components.
Table 19-7 AmxAttributeChange APIs
|
Table 19-8 lists AmxAttributeChange
APIs that you can use when creating custom UI components.
Table 19-8 AmxDescendentChanges APIs
|
Table 19-9 lists AmxCollectionChange
APIs that you can use when creating custom UI components.
Table 19-9 AmxCollectionChange APIs
|
Table 19-10 lists AmxNodeChangeResult
APIs that you can use when creating custom UI components.
Table 19-10 AmxNodeChangeResult APIs
|
Table 19-11 lists AmxNodeStates
APIs that you can use when creating custom UI components.
Table 19-11 AmxNodeStates APIs
|
Table 19-12 lists AmxNodeUpdateArguments
APIs that you can use when creating custom UI components.
Table 19-12 AmxNodeUpdateArguments APIs
|
You can create a custom UI component through the use of JavaScript and MAF APIs. This component's JavaScript file can be added to your project through the application feature-level includes. When you add your custom tag library, it is entered into the Components window's list of tag libraries and, when this library is selected, your custom component becomes available in the Components window, with its attributes displayed in the Properties window.
Before you begin:
Familiarize yourself with APIs described in Using MAF APIs to Create Custom Components.
To create a custom component:
Produce a JavaScript file that registers a tag namespace and series of one or more type handlers using the adf.mf.api.amx.TypeHandler.register
API (see Table 19-1 and an example that follows this procedure).
For each type handler, implement a rendering member function.
Optionally, implement other functions.
Attach one or more of your JavaScript and CSS files to the MAF AMX application feature. For examples, see the following sample applications located in the PublicSamples.zip
file within the jdev_install
/jdeveloper/jdev/extensions/oracle.maf/Samples
directory on your development computer:
custom.js
and custom.css
files included in the MAF sample application called CompGallery.
WorkBetter sample application contains a custom search component.
Alternatively, you can perform a design-time packaging.
For each MAF AMX page that uses one of the customs components, add an xmlns
entry in the view
element:
xmlns:custom="http://xmlns.example.com/custom"
The following example shows a JavaScript file that declares custom components.
(function() { // TypeHandler for custom "x" elements var x = adf.mf.api.amx.TypeHandler.register("http://xmlns.example.com/custom", "x"); x.prototype.render = function(amxNode) { var rootElement = document.createElement("div"); rootElement.appendChild(document.createTextNode("Hello World")); return rootElement; }; // TypeHandler for custom "y" elements var y = adf.mf.api.amx.TypeHandler.register("http://xmlns.example.com/custom", "y"); y.prototype.render = function(amxNode) { var rootElement = document.createElement("div"); rootElement.appendChild(document.createTextNode("Goodbye World")); return rootElement; }; })();
For examples of how to create custom UI components, see the following:
The custom.amx
, customOther.amx
, exampleEvents.amx
, and exampleList.amx
files included in the MAF sample application called CompGallery.
The DatePicker MAF sample application.
The sample applications are located in the PublicSamples.zip
file within the jdev_install
/jdeveloper/jdev/extensions/oracle.maf/Samples
directory on your development computer.