A Wicket component controller receives user input. The component uses the user input to interact with the model, to handle page navigation and events. The Model provide components with an interface to domain data. The Component view renders the User Interface HTML elements. The controller and view parts are combined into the Component in Wicket.

Wicket Triad of HTML Templates, Components, and Model

The Wicket component, the model, and HTML template work together. The HTML template defines the static parts of the pages, components fill in the dynamic parts, and models are used by components to get the domain data for the dynamic parts. Wicket matches wicket:id tags with components, Models are a reference to the data for the Java components.

Wicket HTML Templates

Wicket templates are written in plain HTML, consumable by standard HTML editors. Wicket uses HTML namespace standards to extend HTML with placeholders, where Wicket components are hooked in, so that there is no custom syntax at all. Wicket matches wicket: id attributes and attaches Java components to the tags in which these attributes are defined.

Wicket Web pages are all Java classes that map to an HTML template, with the same name as the Java class.

The ListPage.html file holds the markup for the ListPage.java. Wicket matches the Java page instance and the HTML template file with the same name in the same Java package.

Pages are special top-level components that hold the root for component trees. Below is the component tree for the ListPage above:

Wicket Components

Wicket matches the wicket:id="rows"attribute in the ListPage.html with the corresponing Java component in ListPage.java, which is a DataViewComponent which has a DataProvider model as shown in the diagram below.

DataView is a component which makes it simple to populate a Wicket RepeatingView from a database by utilizing IDataProvider to act as an interface between the database and the dataview. A Wicket RepeatingView renders the components added to it from data from a collection of objects.

The DataView instantiation passes to the constructor the wicket id "rows" , the itemDataProvider, and the number of rows for paging, and anonymously overrides the populateItem() method, which will be called for each Item object provided by itemDataProvider. The populateItemmethod adds the child components ( Link, Image, Label) with the Item Model to the Dataview. The itemDataProviderIDataProvider provides the Pet Catalog Item data to the DataView. The IDataProvider iterator(int first, int count) method gets an iterator for the subset of total data. The itemDataProvideriterator method calls the itemController.findItemEntities , which uses JPA to query the database and return a list of Itementities. The itemDataProvider model method is a Callback used by the consumer of this data provider to wrap objects retrieved from iterator(int, int) with a model (usually a detachable one).

Using the Java Persistence API (JPA) with Wicket

The ItemJpaControllerfindItemEntitiesmethod is defined as shown below:

TheItemJpaController uses the Java Persistence API EntityManager Query object to return a list of items. The ItemJpaController calls Persistence.createEntityManagerFactorywhich gets an EntityManagerFactory when it is instatiated.

The Java Persistence Query APIs are used to create and execute queries that can return a list of results. The JPA Query interface provides support for pagination via the setFirstResult() and setMaxResults() methods: q.setMaxResults(int maxResult) sets the maximum number of results to retrieve.q.setFirstResult(int startPosition) sets the position of the first result to retrieve.

In the code below, we show the Itementity class which maps to the ITEM table that stores the item instances. This is a typical Java Persistence entity object. There are two requirements for an entity:

annotating the class with an @Entityannotation.

annotating the primary key identifier with @Id

Because the fields name, description.... are basic mappings from the object fields to columns of the same name in the database table, they don't have to be annotated.

A Wicket PagingNavigatorcomponent is used to provide navigation links to the next, previous, first and last page of catalog Items. The PagingNavigator component maintains a complete page navigator, meant to be easily added to any PageableListView.

Code Sample from: ListPage.html

<span wicket:id="pager">navigation controls here</span>

Code below for adding creating a PagingNavigator for thedataView and adding it to the ListPage:

Select GlassFish v2 in the server list of the wizard and click the Next button.

Enter the location information for the server and click the Next button.

Enter the admin name and password and click the Finish button.

Start the MySQL or Java DB database as follows:

Click the Services tab in the NetBeans IDE.

Expand the databases node. You should see the Java DB database in the list of databases. If you have installed the MySQL server database, you should also see the MySQL database in the list of databases.. Note: Java DB comes bundled with Netbeans, you can download MySQL separately.

Right-mouse click on the Java DB or MySQL server database and select Start.

If you installed MySQL, set the properties of the MySQL server database as follows:

Right-click on the MySQL server database and select Properties. This opens the MySQL Server Properties dialog box, as shown in Figure 8.

Figure 8.MySQL Server Basic Properties

In the Basic Properties tab, enter the server host name and port number. The IDE specifies localhost as the default server host name and 3306 as the default server port number.

Enter the administrator user name, if not displayed, and the administrator password -- the default administrator password is blank.

Click the Admin Properties tab.

Enter an appropriate path in the Path/URL to admin tool field. You can find the path by browsing to the location of a MySQL Administration application such as the MySQL Admin Tool.

Enter an appropriate path in the Path to start command. You can find the path by browsing to the location of the MySQL start command. To find the start command, look for mysqld in the bin folder of the MySQL installation directory.

Enter an appropriate path in the Path to stop command field. You can find the path by browsing to the location of the MySQL stop command. This is usually the path to mysqladmin in thebin folder of the MySQL installation directory. If the command is mysqladmin, in the Arguments field, type-u root stop to grant root permissions for stopping the server. The Admin Properties tab should look similar to Figure 9.

Figure 9.MySQL Server Administration Properties

Click the OK button.

Right-click on the MySQL server or Java DB database and select Start.

Create the petcatalog database as follows:

Right-mouse click on the Java DB or MySQL server database and select Create Database. This will open a create Database window.

Enter the database name catalog for Java DB or petcatalog for MySQL.

For Java DB enter userid password app app as shown below:

Click O.K. to accept the displayed settings.

Create the tables in the catalog database as follows:

Underneath Databases you should see a database connection for the petcatalog database. For example MySQL:

or Java DB:

Right-mouse click on the petcatalog connection and select Connect.

Right-mouse click on the petcatalog connection and select Execute Command. This will open up a SQL command window.

Copy the contents of the catalog.sql file in theriapetcatalog\exercises\exercise0directory and paste the contents into the SQL command window, as shown in below:

Click the Run SQL icon (Ctrl+Shift+E) above the SQL command window.

Note: It is ok to see this: "Error code -1, SQL state 42Y55: 'DROP TABLE' cannot be performed on 'ITEM' because it does not exist. Line 2, column 1" . This just means you are deleting a table that does not exist. If you need to delete and recreate the tables you will not see this message the second time.

View the data in the Pet Catalog database Item table as follows:

Underneath Databases you should see a database connection for the petcatalog database. For example MySQL:

or Java DB:

If the database connection is broken like in the following diagram:

Right-mouse click on the petcatalog connection and select Connect. as shown below:

if prompted for a password, for MySQL leave it blank, for JavaDB enter user app password app.

Expand the Tables node below the petcatalogdatabase in the Services window. You should see theitem table under the Tables node. You can expand theitem table node to see the table columns, indexes, and any foreign keys, as shown in below :

Figure 12.An Expanded Table Node

You can view the contents of a table or column by right-clicking the table or column and selecting View Data as shown below:

Running the Sample solution:

If you want to run the sample solution, you have to create the catalog database tables first as described above.

If you haven't already download the sample code and start the NetBeans IDE. Unzip the catalog.zip file which you downloaded, this will create a catalog directory with the project code.

Open thecatalog/setup/sun-resources.xml file and verify that the property values it specifies match those of the petcatalog database and jdbc resources you created. Edit the property values as necessary.

Open the catalog project as follows:

In NetBeans IDE, click Open Project in the File menu. This opens the Open Project dialog.

Navigate in the Open Project dialog to thecatalog directory and click the Open Project button.

In response, the IDE opens the catalog project. You can view the logical structure of the project in the Projects window (Ctrl-1).

Run the catalog by right-clicking on thecatalog project in the Projects window and selecting Run Project. The NetBeans IDE compiles the application, deploys it on Glassfish, and brings up the default page in your browser. (at http://localhost:8080/catalog/).