Using the codeEditor component

A new component added to the ADF Faces family from the 12c version is the codeEditor component which provides an in-browser code editing capabilities.

The codeEditor component is used by end users to enter code-like text with editing functionalities like what a typical IDE would provide, such as syntactical color coding of keywords, indention, validation, search, error highlighting, and logs pane.

In this recipe, we will present the CodeSample attribute in a codeEditor component inside the inputComponets.jsf page.

How to do it...

In order to add the codeEditor component, follow the ensuing steps:

1. Open the inputComponets.jsf page.

2. Drag the CodeSample attribute under EmployeesView1 in Chapter4AppModuleDataControl from the Data Control pane and drop it inside the panel form layout.

3. Navigate to Text | ADF Input Text w/ Label.

4. Open the source mode of the inputComponets.jsf page.

5. Manually change af:inputText to af:codeEditor and don't forget the closing tag as well.

6. Remove...