Friday 1 July 2011

JSF Visual Editor: Inline Editing Support


JSF Visual Editor in JDeveloper provides support for inline editing. Using this feature you can edit the ADF Component's 'text' attribute directly in the visual editor.

This blogs explains how to use the inline editing feature.

Step 1: Go ahead and create a 'Fusion Web Application (ADF)' from the New->Gallery

Step 2: Create a JSF page from New->Gallery->Web Tier->JSF/Facelets->Page (in JDev 11.1.2.0.0)


Step 3: Once the Visual Editor shows up, drag and drop a PanelStretchLaytout from the palette onto the visual editor. Then drop a  PanelBox onto the 'Center' facet of the PanelStretchLayout and a PanelAccordion on to the 'Start' facet of the PanelStretchLayout

The Visual Editor will look like the following:



Step 4: Say, you want to edit the PanelBox 'text' property (header text of PanelBox) whose default value shown in the visual editor is "panelBox1"
 
Click the panelBox to select the PanelBox component. See the figure below where the panelBox is selected  (red dotted border around the component).



Step 5: Now, click again on the area where the PanelBox header text is displayed.



You will see a thick red border around the header text of the PanelBox with a blinking cursor.
Note: First click selects the component and second click puts visual editor in inline editing mode.



Step 6:  Now you can move the cursor or double click to select the whole text. You can also press F2 to select the whole text.





Step 7: Type "My PanelBox" and hit Enter. This updates the 'text' property of the PanelBox with the entered value.  Note: You don't have to go to Property Inspector to edit the 'text' property, you can do it in the visual editor itself.

Using this feature, you can edit the 'text' property of ADF Faces components like ShowDetailItem, PanelHeader, ShowDetailHeader, CommandButton, CommandLink, CommandImageLink, CommandNavigationItem, CommandToolbarButton, etc.,. You can also edit the 'headerText' property of table Column using this feature.

Step 8: If you go to the source view, you will realize that the value entered is hard coded into the jsf page. What if you want to externalize the value.
 
Right click on the panel box header text area and select 'Select Text Resource for->Text (from the Context Menu) as shown the diagram below:


This brings up the 'Select Text Resource' dialog. Click 'Save and Select' to save the key-value pair in the properties file. 

Note: You can see the 'ViewControllerBundle.properties' file created in the View Controller project.
 
Take a look at the source view and observe the code change related to PanelBox tag. The hard coded value is changed to an EL expression.
 
    <af:panelBox text="#{viewcontrollerBundle.MYPANELBOX}" id="pb1">
          <f:facet name="toolbar"/>
    </af:panelBox>
 

Step 9: Now, you may want to edit the EL expression for the 'text' property in the visual editor itself.  In order to edit the expression, click once to select the PanelBox component and click again on the header text area. Instead of the red border with blinking cursor (as you observed in Step 5), visual editor brings up a small dialog which shows the expression and two options (Select Text Resource... and Expression Builder...).





You can click inside the text area which shows the expression and start editing. Code Insight is also supported in that text area. So, if you have more keys defined in the properties file, you can see the other keys and select them through code insight.

Note: Try clicking the 'Select Text Resource...' and 'Expression Builder...' links and see what happens!.

JDeveloper Version Used: 11.1.2.0.0

Enjoy!