L11: panels and view configurations (advanced)

1
Building Web application with panels and view configurations
i-views University Part 11
Advanced knowledge:
Building Web application with
panels and view configurations

2
2
Your teacher today
Nadine Proske
Knowledge Engineer
intelligent views gmbh

3
3
Content (1)
Basic knowledge: Web Applications with panels and view configurations
1. Overview of the configuration elements of a web application
1. Panels
2. Actions
3. View configurations
2. Preconditions to build a web application
3. Proceeding to build a web application
4. Panels
5. Basic knowledge: View configurations
6. Task: Hello World with panels

4
4
Task: Creating a simple Web Application
Content (2)
Advanced knowledge: Web Applications with panels and view configurations
1. Advanced knowledge: view configurations
2. Actions
3. Homework: Rebuild the web application, with the steps explained in this lecture.

5
5
Static File Resource
In the static file resource the static frontend data is configured (HTML,
CSS, JavaScript). It can either be located as a file relative to the bridge
(name of the file = path pattern) or be specified as a zip file.
Typically the vcm is outsourced as a zip file containing all the necessary
resources to load the vcm. Those are amongst others:
- The index.html start page
- The referenced JavaScript's (vcm, libs, …)
- The referenced css
The static file resource should only be used for rapid prototyping. In
productive applications there should be used a webserver (Apache,
NGINX, ISS) for the static resources because of performance issues.
Currently the .zip file will
always be delivered by
employees of i-views and
should not be changed.
Please pay attention that the
index.html is always located at
the top level ant not in some
subfolder.
In the future the .zip file can
be downloaded by partners at
the web page of i-views.com.

6
6
Task: Building a Simple Web Application
We are going to build a web application for the music example network.

7
7
Preparation
1. Start the mediator.
2. Start the bridge.
3. Start the knowledge builder with the
localhost server and the network
„Schulungsnetz“.
4. Call this URL:
http://localhost:8815/viewconfig/viewconfig
mapper/index.html

8
8
Labelling of the Window Title
1. Delete the Panel containing the „Hello
World“ text.
2. Click on the remaining main window panel
and add a window title panel with
.
3. The panel type should be „fixed view“.
4. Create a new configuration for a label
through the field „Label configuration“ and
give it a name.
5. Enter „i-views music example“ in
configuration name
We advice to name all Panels with “P:..” and all View-
Configuration with “V:…” so you always have an
overview of what is a panel and what is a view-
configuration.

9
9
Always refresh the application!
After every change you have to refresh the application with a click on to see the changes applied to
the frontend. The browser also has to be refreshed.
You will find this button in the application‘s menu as well as with every panel and view configuration.

10
10
Define Areas
In the „Hello World“ task, it was enough to give
the main window panel the type „fixed view“,
because it only contained a single text.
1. Change the panel type to „linear layout“ with
a vertical orientation.
2. Create two further panels with the „Create
new Instances of Panel“ button and give them
the Configuration name „P:Header“ and
„P:Main sector“.
3. Give the header the type „linear layout“ with
a horizontal orientation.
4. Give the main area the type „switching
layout“.
P:Header
P:Main sector

11
11
Logo
1. Add a Panel to the header, with a
configuration name „P:Header Logo“ and the
type „fixed view“.
2. Create a new sub configuration of the type
Image and name it „V:Header Logo“.
3. Upload the i-views logo and define a height of
35px.
4.

12
12
Menu
1. Add a second Panel to the header with the
configuration name „P:Header Menu“ and
the type „fixed view“
2. Create new sub configuration of type Menu
and label it „V:Header Menu“
3. Choose „Menu bar“ as Menu type
4. Switch to the tab „Actions“ and add three
new actions with . They should receive
the configuration names and labels „Genre“,
„Album“ and „Groups“

13
13
Search Field
1. Add a third panel to the header, with a
configuration name „P:Header Search Field“
and the type „fixed view“.
2. Create a new sub configuration of the type
Search field view and label it „V:Header
Search Field“.
3. Choose the query for actors and opus you
prepared for today in Query.
4. Set the Parameter name to „searchString“,
the Valuation to „User input (optional)“ and
the Type to „xsd:string“.
5.

14
14
Search Field
1. Set the Parameter name to „searchString“,
the Valuation to „User input (optional)“ and
the Type to „xsd:string“.
2.
Attention: the Parameter name has to be
searchString! This is a predefined Parameter that
enables i-views to recognize to use the user‘s
input from a search field.

15
15
Start Page
1. Add a Panel to P:Main sector and name it
„P:Start page“. Choose the type „fixed view“
2. Create a new sub configuration of type text
and name it „V:Start page text“.
3. Enter „Welcome!“ as a label and some text
into the text field.
4. Switch to the P:Main sector and check the
box „Activate first by default“.
5.

16
16
Search Result
1. Add another Panel to P:Main sector with the
label „P:Query Result “ and the type „fixed
view“.
2. Create a new sub configuration of type search
result aspect and the label „Search results“.
3. Switch to the „Header Search field“ Panel. In
„influences“, add „P:Search Result“.
This way you define that the action (i.e. user
input in this case) influences the view on this
page.
P:Header Search Field
P:Query Result

17
17
Search Result Table
1. Inside the sub configuration „search results“,
create a new table and call it „search result
table“.
2. With you can add a new column to the
table (Object of Column Configuration).
3. Add another column element and choose
„Name“ in properties.
A column (Object of Column Configuration) may
contain any number of column elements. In column
elements you can specify which properties you want
to show in this column, depending on the object
shown in this row.

18
18
Search Result Table: Actions (Selection)
1. Switch to the root („Table-Object“) and add
Action (select). Give it the name „Choose
Search Result“.
2. Choose the Action type Selection.
Before you can select a Panel you have to create
it.
An Action of type „Selection“ requires to be told,
where the selected element is going to be
displayed. In „show result in panel“ you can select
the destination.

19
19
Action (Select): show result in panel
1. Add a third Panel to P:Main sector and call it
„P:Detail view “. The Layout is linear with a
horizontal orientation. Later on we will
define two more Panels in this location that
will display an object‘s details on the left side
on the website and show the Net-Navigator
on the right side.
2. Switch back to the action „Choose Search
Result“. Now you can select „Detail view
Panel“ in the show result panel field.

20
20
Action (Select): Close Panel
1. Optional: Check the „Close panel“ box.
2.
If the box is checked, the current Panel in which
the action is being called will be closed
afterwards. This is useful especially for Dialogue
Panels.
If the layout changes, the panels changes as
well and will also be closed, even without the
selected box.

21
21
Now the search field as well as the results being
displayed in a table below are now functional.
Even though we have already configured an
action (selection), when we click on one of the
search results nothing will happen. That’s
because we haven’t configured any view
configuration for the target panel so far.

22
22
Configuring the Detail view
1. Switch to „P:Detail view“ and add two more
Panels to it. Call them „P:Detail view left side“
and „P:Detail view right side“.
2. The left side is of type „flexible view“.
3. The right side is of type „fixed view“.
4. Switch to the „Layout“ tab and fix the left side
to a width of 40% and the right side to 60%.
P:Header
P:Detail view right
side
P:Detail view left
side

23
23
Configuring the Detail view
The query covers actors and songs. For every object type
we can use the standard view configuration or specify it
for any type. For this reason, the left side received the
type „flexible view“.
For now, we will create a standard view configuration for
all types. This way we will get a displayed result for our
query even though we haven‘t done a view configuration
specific to a type.
1. Switch to the Top-Level-Type inside the network and
in Details, select View Configuration à Instance à
Details.
2. With you can create a new view configuration of
type Group.

24
24
Configuring a standard Detail view
1. Add a sub configuration of type „Properties“
(not Property!) to the view configuration
element.
2. Add another „Property“ beneath „Properties“
and look for the relation „User relation“ in the
field „Property“.
3. Go to the root element of this Group and into
the tab „Context“.
4. Add the Panel „P:Detail view left side“ to
„apply in“.
5.
We haven‘t set a sub configuration for
the right side yet. Therefore a standard
configuration will be used, containing
all attributes and relations. Later on we
will define a sub configuration for the
right side. Until then, you can either
ignore the result produced by the
standard configuration or detach the
right side panel from the main panel
for now.

25
25
Configuring a Specific Detail view
1. Select the object type „Band“ and add a
view configuration of type „Group“
2. Add a view configuration element of Type
„Properties“
3. Add three new Property configurations
and select „Name“, „Picture“ and „User
relations“ for their properties.
4. Go to the root element of this Group and
into the tab „Context“.
5. Add the Panel „P:Detail view left side“ to
„apply in“.
6.

26
26
Styling the Detail view: The name becomes
the headline
1. Select the view config of the object type
“Band“ and go to the Property „Name“
2. In the tab „Style“, create a new object of
type Style with . Give the style the
configuration name „h2“.
3. Select this style and switch to the tab
„Viewconfiguration-Mapper“. Enter „h2“
in „class“.
4.
In class you can enter any class contained
in the css file of the Static File Resource.

27
27
Styling the Detail view: Hide the name
1. Create a new style inside the „Name“
Property, call it „hideLabel“.
2. Select the style, switch to the tab
„Viewconfiguration-Mapper“ and check the
box „hideLabel“.
3. Switch to the „Picture“ Property and look for
the „hideLabel“ style in the same place, using
the query tool.
4.

28
28
Graph
1. Go to „P:Detail view right side “ and create a new sub configuration of type „Graph“. Name it „Graph“.
2. Set the height to 900px.
3. Create a new „Graph Configuration“ for the „has Graph-Configuration“ relation.
4. Create this Structured Query for „initial topic query“:

29
29
Configuring the Graph
With the Graph Configuration you can define
which objects and relations you want to show
inside the Graph.
1. Create a new Node Category, call it „Title“.
Switch to the Context tab and enter „Title“
into „apply to“.
2. Create a new Node Category, call it „Actor“.
Switch to the Context tab and enter „Actor“
into „apply to“.
3. Add a Link to each Node Category and choose
„User relation“ for their respective properties/
Relation.
4.
There have to be at least two objects connected to each
other by a relation to be displayed inside the graph.

30
30
Configuring the Graph: Action – expand
1. Add Album as a Node Category.
2. Switch to one of the Node Categories and
create a new Menu inside the „Nodes“ tab,
called „Node Menu“. Add this Menu to the
other Categories.
3. Inside the Node Menu, switch to the Action
tab and create a new Action „expand“.
4. Select Action type NN-Expand.
5.
NN-Expand can display any relations defined for the
graph and connected to an object.

31
31
Configuring the Graph: Action – select
1. Inside the Node Menu, select the Action tab
and create a new Action called „select“.
2. Select Action type „Selection“.
3. To give the viewConfigMapper an area to
display the selected object in, choose a target
panel in „show result in panel“. Select the left
side Panel.
4.
Select displays the detail view of a node.

32
32
Object list – Panel
Now the only thing missing is a functional menu
bar. We want to show these objects in list form.
1. Create a new Panel in P:Main sector, call it
„P:Object list“.
2. The Panel‘s type is „Flexible View“.
3. This Panel‘s Actions are supposed to be
activated in the Detail view Panel. This way, a
click on a object inside the object list displays
the detail view of the given object (left and
right side).
P:Header
P:Object list

33
33
Object list – view configuration
We will start with the object list for albums.
1. Select the object type Album and create a
new view configuration of type group, call it
„V:Album List“.
2. Switch to the Context tab and connect the
group with the Object list Panel via “apply in“.
3. Make sure the „apply to subtypes“ box is
checked.
4. Create sub configuration in the view
configuration of type „query“.
We advise to always create the context first since a very
frequently made mistake is to forget the connection
between view configuration and panel.

34
34
Object list – table
1. This is how the structured query inside the
view configuration has to look like:
2. Now add another table inside the table and
call it „V:Album List Table“.
3. Create four Columns for the table and select
one property for each column: Name, has
Performer, is Genre of, is Tagged By.
Objects have to be called onto by a query to
be listed inside a table.

35
35
Object list – actions inside the menu
1. Switch to the Action „Album“ that was
created inside V:Header Menu in P:Header
Menu.
2. Select the Action type „Show“.
3. Add the P:Object list in „show result in panel“.
4. Add this script to „script for target object“.

36
36
Query Results with Facets
Now we want to filter the query results with
Facets. To make room for them, we have to
redefine our panel distribution first.
1. Switch to P:Main sector and create a new
Panel, call it „P:Facets and Query Results“.
2. The type is Linear Layout with a horizontal
orientation.
3. Drag & Drop the Query Result Panel under the
new Panel.
4. Create another Panel and call it „P:Facets“ of
type „Fixed View“.
P:Facets P:Query result

37
37
1. Define the areas‘ distribution in the layout.
The Facets get 25%, the Query Results 75%.
2. Set the configuration to make the Facet Panel
influence the Query Result Panel.
3. The Header Query Result Panel still influences
the Query Result Panel. Change the influence
towards the super ordinated Panel „P:Facets
and Query Results“.
P:Facets P:Search result
influences

38
38
1. Create a new sub configuration of type Facet
aspect inside the Facet Panel.
2. Add a new Facet.
3. If you want to create a facetted list of all
countries with the albums‘ artists, you will
have to use the following Structured Query:
4. Call it „Country“.
5.

39
39
Send your questions to:
contact-webinar@i-views.com
Thank you for visiting
i-views University

L11: panels and view configurations (advanced)

Recommended

Recommended

More Related Content

Similar to L11: panels and view configurations (advanced)

Similar to L11: panels and view configurations (advanced) (20)

More from medialeg gmbh

More from medialeg gmbh (13)

Recently uploaded

Recently uploaded (20)

L11: panels and view configurations (advanced)