VC5 – new elements and properties

So… you hear about the new VC5 runtime. Let us focus on some newly presented options it includes, marked in this text in blue.

A simple master / slave scenario might look like this:

• We show the list of banks in a Tile View.
• For each selected bank we show its details in the right-hand panel.

Running The application

On the desktop:

On the tablet – click to get the full beauty of it:

Modeling

I want to skip most of the steps and focus on the new stuff.

1. Create a new model. select the SAPUI5 as runtime.

2. Add the Banks data service to the model.

3. Connect a Form View from the Input port.

4. From the Bank List output port connect a Tile View element.

5. Add the Bank Details data service.

6. Add the output Form View from the Bank Details service.

7. Place the input Tile View and Bank Details Form View elements in a vertical Panel, to better control the layout.

In the Layout Board:

8. Add a column to the Tile View element.

9. Place an Image to the left of the text controls.

10. Set the Row span property to 3. this way the image takes three rows to fit the height of the three controls on the right column.

11. Set the H. Align, V. Align as needed. In VC5 we can define the alignment of the control in its cell.

12. Set the Image URL as needed in the Browse Images dialog box.

That’s it! Our first VC5 simple scenario. The new features we used in this application:

• Tile View
• Row Span
• H. Align (optional)
• V. Align (optional)

You comments and questions are most welcome.

Recent presentations / movies:

VC5 …

VC5 in a nutshell