Developer

Learning Oracle ADF: Simple JSF data view/entry form


This second post in my Learning Oracle ADF series is a little late because I haven't been able to get my data entry form to work quite right. It works fine as a data navigator form but creating new entries isn't working yet. I'll go ahead and share what I have discovered so far.

Open the application we created last time. There should be two projects in there: the Model (which we worked on last time) and the ViewController. Open the ViewController project to see the folders underneath, and then open the one called WEB-INF. There should be a faces-config.xml file inside.

Double-clicking on that file will open it in the diagram editor. On the right of the editor you should see the Components palette.

faces-config.xml

If it's not already the default, click the drop-down at the top of the Components palette and select the JSF Navigation Diagram. The palette will now show a number of JSF options. Drag the one called JSF Page onto the diagram editor. It will add a page icon onto the empty faces-config.xml diagram. Rename the icon /index.jsp. Double-click on the newly created icon to launch the Create JSF JSP wizard.

Step 1 of the wizard is where you decide if this is a JSP or a JSPX page. I'm old school — I don't know much about this fancy JSF technology, so I tend to prefer the older JSP because I'm more comfortable with it right now. (From what I've read, it seems that JSPX would be better overall, so I'll probably try that in future projects.)

Click Next a couple of times to skip to the third screen in the wizard. This is where you pick which tag libraries will be visible in your JSP. I'm not sure what all of these various tag libs do, but I prefer to have too much stuff rather than too little — it makes things easier in the future. So I just moved everything over from the Available Libraries list to the Selected Libraries list.

Click Next to see the fourth and final screen of this wizard. This is where you can pick the basic HTML attributes for your page — HTML version, page title, etc. Fill in whatever fits your standards and click Finish.

You'll see in the ViewController project your new index.jsp, and the main edit window should also have that file open in Design mode. The Components palette (in the right-hand column of the screen) was hidden by the Data Control palette that opened when you created this new JSP. This palette shows you the available views you created earlier, which in my case is just the one called ConferenceLineView1.

I understand why JDeveloper did this — you can drag the views onto the Diagram editor to begin wiring up your UI; however, you probably want to do a little page layout work first. I found it annoying that this new palette popped up because you have to click the Components tab to get back to the Components palette.

Take a look at the Structure window in the lower left-hand corner of the JDeveloper window. You'll see that your new index.jsp page has an h:form already inserted for you. This is where you will want to place most of your components. Go to the Components palette and select ADF Faces Core (if it's not already selected). Scroll until you see the panelHeader, grab it with your mouse, and drag over to the Diagram editor where your index.jsp is. Watch the Structure window to make sure that your panel gets dropped inside the form control; an alternative is to drag it into the Structure window. (Sometimes I find it easier to move components using that tree view instead of the Diagram editor.)

Now you want the Data Control palette that is behind the Components palette. Drag your View over to the index.jsp page. Rather than create a new object on the page immediately, JDeveloper will pop up a hierarchical menu. Select the Create : Forms : ADF Form menu item. You'll now get the Edit Form Fields dialog box. Select the Include Navigation Controls and Include Submit Button check boxes as shown in this screenshot:

Edit Form Fields

You'll notice that it inserts your form, but it also puts a little af:messages tag at the top of the page. I like my messages after the form header, so I dragged the message box down into the form panel. Depending on your mouse dexterity, you may find it easier to do this from the Structure window instead of the Diagram editor.

index.jsp with almost-complete form

You can run it in the embedded OC4J (Oracle Container for Java) that comes with JDeveloper. Click the green Run icon in the icon bar (it should be in the middle of the icon bar — it's a big green arrowhead).

You can browse through the existing entries in your table using the navigation buttons, but if you attempt to edit an entry and click Submit, the database is not updated. This is the part I haven't figured out — my Submit button isn't bound somehow, and it's not actually submitting into the database.

I even tried adding a Create button (dragging the Create action from the Data Control palette onto my form) but that also isn't working — anything I create in the form doesn't get entered into the database.

Testing the form in a Java container

It's very frustrating because I appear to be so close. I'm able to view the database with my new JSF form just fine, but I'm not yet able to get data inserted or modified. I'm going to keep plugging away and re-reading all of the instructions I have. I must have missed some key part of the puzzle — it's just not obvious from the GUI what part it was.

Editor's Picks