Adding a VDL View to the Example App

Before you can create and include a VDL view in your app, you need to declare it in your app's cfile using the <vdl-view> element.

Note This Code editor tutorial refers to the same Mosel source files as the previous View Designer section. You should create a new project containing a duplicate set of source files if you wish to complete both tutorials. The files created in the View Designer exercise are used again in later exercises.

Declare your first VDL view by changing the cfile ( foliodata.xml) so that it now looks like the following:

<?xml version="1.0" encoding="UTF-8"?>
<model-companion
xmlns="http://www.fico.com/xpress/optimization-modeler/model-companion"
version="3.0">
<client>
  <view-group title="Portfolio Optimization">
    <vdl-view title="Portfolio" path="foliodata.vdl"></vdl-view>
  </view-group>
</client>
</model-companion>

Note how the <vdl-view> element is contained within the <view-group> element, that it has a title called Portfolio Optimization and a path attribute that points to foliodata.vdl, which by implication is found in the client_resources folder.

Having declared a view in the cfile, you must create a related VDL file to contain the user interface elements— Xpress Insight expects this to be stored in the client_resources directory. Create a file called foliodata.vdl in the client_resources folder, and add the following content:

<vdl version="4.7">
    <vdl-page>
        <vdl-section heading="Welcome to Portfolio Optimization">
        </vdl-section>
    </vdl-page>
</vdl>

VDL files all have a <vdl> element at their root.

<vdl-page> elements are containers for view contents, and each view must contain one such element.

<vdl-section> elements are used to organize page content. For smaller pages, you might only use one section, but for larger pages, it is a good idea to separate your page content into several sections to demarcate your app's boundaries. Here, the one <vdl-section> element used has a heading attribute Welcome to Portfolio Optimization.

Republish your app in Xpress Insight and examine its user interface. If the Entity Explorer is still in view, select Advanced > Portfolio Optimization > Portfolio from the drop-down menu available in the top-left tab of the central browser pane.

A First VDL View

The user interface now contains:

• The Portfolio Optimization view group, added to the Advanced view group, as configured in the cfile.
• The Portfolio tab, generated because it is the title of the view specified in the <vdl-view> element in the cfile.
• The Welcome to Portfolio Optimization message, configured as the heading of the single <vdl-section> element in the foliodata.vdl file.

This is a simple, initial, static view that is not yet linked to model data.

© 2001-2019 Fair Isaac Corporation. All rights reserved. This documentation is the property of Fair Isaac Corporation (“FICO”). Receipt or possession of this documentation does not convey rights to disclose, reproduce, make derivative works, use, or allow others to use it except solely for internal evaluation purposes to determine whether to purchase a license to the software described in this documentation, or as otherwise set forth in a written software license agreement between you and FICO (or a FICO affiliate). Use of this documentation and the software described in it must conform strictly to the foregoing permitted uses, and no other use is permitted.