Screening Sample App using ECharts (Part 2 Web Admin)

The third parts shows how to build a web based administration for the screening application. It is built using the Visual Web JavaServer Faces framework. It provides basic CRUD (Create, Read, Update, Delete) functionality for each of the entities in the database.

Database Contents

The database contains the following entities:

1. UserData:
   holds the user id, the name of the used screening profile, the reference to the provider data and the users's Sip Uri.
2. ProviderData
   holds the system specific data, in our case the Sip Uri of the announcement to be played when a call is not allowed.
3. ScreeningProfile
   holds the screening data to be checked in blacklists and whitlelists. Each entry consists of a profile name, a blacklist/whitelist indicator and the Sip Uri to be checked itself.

Page Creation

The application consists of a main page which has links to the Users page, the Providers page and the Screening page. The application is modeled according to the tutorial "Modifying Database Table Rows with the Java Persistence API" in http://www.netbeans.org/kb/60/web/web-jpa-part2.html. Do the following steps to build the application:

1. Right click on the screening application in the project window and select "New-Visual Web JSF Page" for each page.
2. Right click on the screening application in the project window and select "New-Visual Web JSF Session Bean" once.
3. Drag and Drop the hyperlinks for users, providers and screening to the main page.
4. Add the code for three properties userDataList, providerDataList and screeningProfileList to SessionBean1 as well as the corresponding methods to fill this lists from the database (updateUserData(), updateProviderData() and updateScreeningProfile() ) and one helper method findProviderDataById(String providerId).

Page Layout, each entity page contains:

• a static text field for the headline
• a grid panel with id mainContainer
• a table which is bound to the data in SessionBean1
• a grid panel with id buttonPanel with 2 buttons, an add-update button and a delete button
• a grid panel with name addUpdatePanel with one label and one text field or dropdown list for each field in the entity.
• a hyperlink to go back to the main page

Page Flow, open the faces-config.xml file and in the graphical editor

1. Connect each of the hyperlinks on the main page with the corresponding entity page
2. Connect the backlink on the entity pages with the main page
3. Connect the buttons on each entity page with the entity page itself

Binding to Data

1. Right click the table and select "Table Layout", then select the corresponding list in "Get Data From".Set the id's of the table columns as [property name]Column and the table fields as [property name]Text.
2. Set the id's of the addUpdatePanel elements as [property name][field or list]
3. .For the dropdown list for providers in the Users page select it, right click and select "Bind to Data", then choose providerIdList.
4. For the dropdown list for screening profiles in the Users page select it, right click and select "Bind to Data", then choose screeningNameList

Handling Selection using an addtional radio button in each table row

1. Add the code for a TableSelectPhaseListener to the java bean for the page as shown in the example code
2. Add the javascript code for initAllRows() as shown in the example code. This code is specífic for each page because it also updates the addUpdatePanel fields when a table row is selected.
3. Right click the table and select "Table Layout", then "New" and select Radio Button from component type and click "Up" until the button is on the top of the column. Set the button's id to selectButton.
4. Select the radio button, right click in the navigator window and select "Property Bindings". Add the bindings for selected, selected value and name. For name enter manually
   "#{[page name]selectButton.id}". This binds the select button to the TableSelectPhaseListener object.
5. Select the selectColumn in the navigator window and set the bindings for selectId to
   "#{[page name]selectButton.id}" and the bindings for onClick to "setTimeout('initAllRows()', 0)".This performs the update of the table when a radio button is clicked.
6. Select the tableRowGroup in the navigator window and set the bindings for selected to the selectedState property.

Command Handlers

1. Add persistency to the page by right clicking in the source editor and then select"Persistence->Use Entity Manager".
2. Add the code for merge() and delete() as shown in the example code. You can delete the generated code for persist().
3. Doubleclick the "add-update" button and enter the java code as shown in the example code.
4. Doubleclick the "delete" button and enter the java code as shown in the example code.

Build and deploy the application, then point the webbrowser to http://localhost:8080/screening

To make an initial fill of the database go to the screening directory and execute ant -f tests.xml filldata