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.
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.
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|