View Blocks

The Block Infrastructure is based on the Model-View-Controller architectural pattern. This topic discusses the salient features of view blocks (also called views).

A view is a GUI object with a visible (HTML) interface. In the context of MicroStrategy Web’s Block Infrastructure, it is a block which contains a collection of "properties" (that is, name-value pairs called block properties). This in-memory block is converted to JavaScript Object Notation (JSON), and this JSON is converted to a JavaScript object on the client-side.

As explained in the Block Library topic, new blocks are created using server-side layout definition files by instantiating blocks from the Block Library and setting the properties on them.

BaseView has several subclasses that implement additional functionality. For example, the subclass mstr.views.ListView implements additional methods for adding or removing individual list items from the HTML without re-rendering the entire view.

A view implements a render() JavaScript method to generate its HTML on the Web browser. The render method in mstr.views.BaseView uses a generic layout-driven approach. BaseView expects a property called layoutClass which tells the view which XML file contains its HTML.  This XML file, called a "client-side layout definition file", is responsible for constructing the HTML initially, when the view is first rendered. It can contain special tokens to represent dynamic values in the HTML. The client-side layout definition file can be modified by using server-side layout definition files so the HTML representation of the block does not require any JavaScript manipulation. The JavaScript merely renders the block based on the code in the client-side layout definition file.

For example, the PromptEditor view block uses the client-side layout definition file, PromptEditor.xml (available in the WEB-INF\xml\layoutsCS\mstr\layouts folder of the MicroStrategy Web installation) as shown in the code below.

<assignments>
<property name="layoutClass">mstr.layouts.PromptEditor</property>
…
…
</assignments>