Skip to Content
test
0 %
Improve the List and Detail View
Details
// Explore More Tutorials

Improve the List and Detail View

04/15/2019

Multi-line list items using ObjectListItem and ObjectHeader controls.

You will learn

In this exercise you will replace a couple of controls; one in the View1 and the other in the Detail view. In the Master view, rather than the simple flat list item style presented by the <StandardListItem> control that is in use currently, you will present the overview of the products in a more appealing way by using the <ObjectListItem> control.

In the Detail view, you will make a similar change, replacing the simple layout (currently afforded by the <VBox> control) with a more readable display thanks to the <ObjectHeader> control. Along the way you will add one more property to the i18n model (“currency”).


Step 1: Improve the master view

Open the mta_app/app/webapp/view/View1.view.xml file, and replace the <StandardListItem> control with the following code:

<ObjectListItem type="Navigation" press="handleListItemPress" title="{ProductName}" number="{= ((${UnitPrice} * 100) / 100).toFixed(2) }"
  numberUnit="{i18n>currency}">
  <attributes>
    <ObjectAttribute text="{QuantityPerUnit}"/>
  </attributes>
  <firstStatus>
    <ObjectStatus text="{= ${Discontinued}? 'Discontinued' : 'Available' }" state="{= ${Discontinued}? 'Error' : 'Success' }"/>
  </firstStatus>
</ObjectListItem>
Replace StandardListItem
Log on to answer question
Step 2: Improve the detail view

Open the mta_app/app/webapp/view/Detail.view.xml, and replace the <VBox> element with this code:

<ObjectHeader title="{ProductName}" number="{= ((${UnitPrice} * 100) / 100).toFixed(2) }" numberUnit="{i18n>currency}">
  <statuses>
    <ObjectStatus text="{= ${Discontinued}? 'Discontinued' : 'Available' }" state="{= ${Discontinued}? 'Error' : 'Success' }"/>
    <ObjectStatus text="{= (${UnitsOnOrder} > 0)? 'Ordered' : '' }" state="Success"/>
  </statuses>
  <attributes>
    <ObjectAttribute text="Product #{ProductID}"/>
    <ObjectAttribute text="Category #{CategoryID}"/>
    <ObjectAttribute text="Supplier #{SupplierID}"/>
  </attributes>
</ObjectHeader>
Replace VBox with ObjectHeader
Log on to answer question
Step 3: Add a new i18n string

Open the file mta_app/app/webapp/i18n/i18n.properties, and add a placeholder for the EURO currency:

currency=EUR
Update i18n file
Log on to answer question
Step 4: Test the new views

Re-run your application. The master list will now have a multi-line view:

View of master list

The detail list will also have a new layout, with more information and better design:

View of detail screen
How much is the item "Mishi Kobe Niku"?
×

Additional Information

Next Steps

Back to top