OnlineShop Sample

OnlineShop Sample

To run the OnlineShop sample:

Applet Starts the OnlineShop sample as an applet.
JNLP (Java Web Start) Starts the OnlineShop sample using Java Web Start.

The UI Engine is deployed as an applet embedded in a Web page (using the Java Plug-in) or using Java Web Start. The application is deployed as a servlet. The UI Engine connects to the application using HTTP as the underlying transport protocol.

Application Functionality

The Online Shop application demonstrates the advantages of using ULC to display large amounts of data. The user can browse through the hierarchy of more than 9'000 products, navigate through the product categories, search for products, and add selected products to the shopping cart.

The following table briefly describes how to use the application and lists the corresponding ULC feature.

Functionality

Procedure

ULC Widgets / Features

Browse through the product category hierarchy Explore the product category hierarchy by collapsing and expanding the nodes in the left-hand tree browser using the node handles (plus and minus icons). Tree with lazy loading
Browse through the list of products Select a product category or multiple categories to display all contained products in the product list pane in the upper part of the right pane. The 'Browse' tab is presented if it is not yet visible. By default, all products in the selected categories and all their subcategories are displayed. To limit the products to the ones in the selected categories, uncheck the 'Show Products in all Subcategories' checkbox. Tree, Table / Table Model, CheckBox, TabbedPane
Display the product details Select a product in the product list table. The product details are shown in the product details pane in the lower part of the right pane. Use the split pane divider to adjust the size of the product detail pane. HtmlPane, SplitPane
Sort the product table In the 'Browse' tab, click the column header of the product list table to sort the products listed according to the corresponding attribute. Click again to reverse the sort order. Table Data Sorting
Reorder columns In the 'Browse' tab, move a column to the desired position by Drag & Drop. Table Column Reordering
Show products for the same category Right-click a product in the product list table. In the popup menu, choose 'Show Products for the same Category'. This displays all products that are in the same category as the selected product. In addition, the corresponding category is selected in the category tree. Popup Menu
Highlight categories for displayed products When displaying a list of products from different categories (e.g. after performing a search), right-click over the product list table choose 'Highlight Categories for displayed Products' from the popup menu. This synchronizes the categories tree with the product list table, and so, higlights all categories in the categories tree that contain one or multiple products currently displayed in the product table. Popup Menu
Search for a product Click the 'Search' tab. In the 'Search Criteria' text field, enter your search word. Choose whether to search in all categories or only in the categories selected in the categories tree by setting the option between the 'in all categories' and 'in selected categories' radio button. Select the product attributes respected by the search by checking or unchecking the 'in Reference No.', 'in Name' and 'in Description' checkbox. To start the search, click the 'Search' button. The 'Search' button is only enabled if the 'Search Criteria' is not empty. The products matching the search criteria are listed in the 'Search Results' table. Text Field, Enablers, Radio Buttons, Check Boxes
Add product to the shopping cart Select a product in the product list table. The product details are shown in the product details pane in the lower part of the right pane. Verify if the product details meet your needs. Then, click the 'Add Product to Shopping Cart' button right above the product details. The 'Add Product to Shopping Cart' button is only enabled if a product is selected in the product list table. The selected product is added to the shopping cart that is shown in the lower part of the left pane. The quantity is set to 1, by default.

Alternatively, a product can also be added to the shopping cart using Drag & Drop. For this, select the product in the product list pane, click and drag the selection and drop it onto the shopping cart table.
Button, Drag & Drop, Enabler
Change product quantity Click the 'Quantity' cell for the corresponding product in the shopping cart table and enter the quantity requested. Cell Editor, Data Type
Remove a product from the shopping cart Select one or multiple product(s) in the shopping cart table. Then, click the 'Remove selected Product(s) from Shopping Cart' button right above the shopping cart table. The 'Remove selected Product(s) from Shopping Cart' button is only enabled if a product is selected in the shopping cart table. Button, Enabler
Place order Click the 'Placer Order ...' button right above the shopping cart table. The 'Place Order ...' button is only enabled if the shopping cart is not empty. On the confirmation dialog presented, verify that your order contains the requested products. You may either abort the order process by clicking the 'Cancel' button or place the order by clicking the 'OK' button. Doing the latter, the shopping cart is emptied. Dialog, Button, Enabler