1. Overview of the configuration elements of a web application 1.2. Panels 1.3. Actions 1.4. View configurations 2. Preconditions to build a web application 3. Proceeding to build a web application 4. Panels 5. Basic knowledge: View configurations

1. 1
Building Web application with panels and view configurations
i-views University Part 08
Basic knowledge:
Building Web application with
panels and view configurations

2. 2
Building Web application with panels and view configurations
2
Your teacher today
Nadine Proske
Knowledge Engineer
intelligent views gmbh

3. 3
Building Web application with panels and view configurations
3
Content (Basic knowledge)
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
Building Web application with panels and view configurations
4
Content (Advanced knowledge)
1. Advanced knowledge: view configurations
2. Actions
3. Task: Building a simple web application
4. Homework: Expanding the builded web application with selected functions

5. 5
Building Web application with panels and view configurations
5
Web application
Applications consist of 4 parts:
- What: the data of the semantic graph database (objects and their properties), parts of the semantic
model
- Where: Panels
- Division of the visible parts of the surface in areas
- When: Actions
- Actions influence the content of the panels
- How: view configurations
- Configured views on objects or parts of the semantic model

6. 6
Building Web application with panels and view configurations
6

7. 7
Building Web application with panels and view configurations
7
Panels
Where ist my data shown?
Panels detemine how the visible sections of an application are divided. So panels determine the
fundamental layout of the visulisation surface.
- Panels can influence each other
- Panels can contain further Panels or view configurations
- Panels receive always exactly one object or type when they are activated
- Panels can pass their element (object or type) to the contained panels
- There is a possibility to overwrite the element via script
- Panels don‘t have any other use. Anything else is configured via Actions and view configurations.

8. 8
Building Web application with panels and view configurations
8

9. 9
Building Web application with panels and view configurations
9
Actions
When ist my data shown?
Actions control which views are visualized and the dependences between the panels.
- Types of actions are
- Menus, buttons
- Clicks on objects or table rows
- You can determine in which panel actions have impacts.

10. 10
Building Web application with panels and view configurations
10

11. 11
Building Web application with panels and view configurations
11
view configurations
How is my data shown?
View configurations are contained in panels and determine, how objects and types are visualized. View
configurations are views on the data.
- Free of context view configurations
- They are not bound to a particular type.
- For example: picture, text, JavaScript, menus, searches, facets
- Object dependend view configurations
- Different views on the data can be specified. There can be as many view configurations per type as you want.
- They are determined at the type of the objects.
- For example: groups, properties, tables and styles

12. 12
Building Web application with panels and view configurations
12

13. 13
Building Web application with panels and view configurations
13
Preconditions for building a web application
- Components
- REST
- view configuration
- Viewconfiguration-Mapper
- Static File Resource
- Zip with index.html
- Mediator
- Bridge: for REST-Services

14. 14
Building Web application with panels and view configurations
14
Preconditions for building a web application
- Components
- REST
- view configuration
- Viewconfiguration-Mapper
- Net-Navigator
- Static File Resource
- Zip with index.html
- Mediator
- Bridge

15. 15
Building Web application with panels and view configurations
15
Proceeding to build a web application
1. Build the semantic model
2. Divide the surface in sections with panels
3. Build the view configurations for objects and link them to the panels

16. 16
Building Web application with panels and view configurations
16
Proceeding to build a web application
Step 1: Go to the application with the identifier „viewConfigMapper“ and there create a main window
panel.

17. 17
Building Web application with panels and view configurations
17
Kind of panels and basic conditions
- Main window Panel
- Each application consists of exactly one main window panel
- Contains „normal” panels and one window title panel
- Dialog panel
- Is located as a pop-up window in front of the main window
- Each application can contain any number of dialog panels
- Contains window title panels and foot line panels
Example for a dialog panel

18. 18
Building Web application with panels and view configurations
18
Proceeding to build a web application
Step 2: Determine the type of the panel.

19. 19
Building Web application with panels and view configurations
19
Panel types
Layout-Panels
Layout-panels contain additional panels. *
- Linear layout
• All contained panels are displayed simultaneously
• Determination of the orientation (horizontal, vertical)
- Switching layout
• There is always only one containing panel shown simultaneously on the same visualization area.
*Currently it isn’t possible to reuse a panel. This will be possible with one of the next updates.

20. 20
Building Web application with panels and view configurations
20
Panel types
View panels
View panels don’t contain further panels.
View panels contain view configurations.
- Flexible view
• Several views are possible dependent of the type of the displayed object.
- Fixed view
• Contains a fixed element of the model
• Pictures, texts, menus

21. 21
Building Web application with panels and view configurations
21
In this case the main
window panel is a linear
panel, because all
contained panels are
shown simultaneously (in
this case vertical).

22. 22
Building Web application with panels and view configurations
22
In this case the panel is a
linear panel, too, because
all contained panels are
shown simultaneously (in
this case horizontal).

23. 23
Building Web application with panels and view configurations
23
This panel is a panel of the
type flexible view, because
it doesn‘t contain further
panels. It is not a fixed
view, because several view
configurations can be
shown here dependent on
the object that is shown
(here it is „one“).

24. 24
Building Web application with panels and view configurations
24
Question: What panel is
this?

25. 25
Building Web application with panels and view configurations
25
Question: What panel is
this?
It is a linear layout panel
with a vertical orientation
of the two contained
panels.

26. 26
Building Web application with panels and view configurations
26
Question: What panel is
this?

27. 27
Building Web application with panels and view configurations
27
Question: What panel is
this?
This is a flexible view
panel. It is not a fixed
view, because there is not
always shown the person
„Nadine Proske“.
The view configuration
determines for the type
„person“ that here is
always a picture next to
the properties of the
person and the buttons
„projects“ and „events“.

28. 28
Building Web application with panels and view configurations
28
Proceeding to build a web application
Step 3: Add further panels.

29. 29
Building Web application with panels and view configurations
29
Proceeding to build a web application
Step 4: Link the panels with the view configurations.
For example, link the window title panel with the view configuration of the type label.

30. 30
Building Web application with panels and view configurations
30
Panels - Configuration
Actions activate in panel: All actions, which are activated in the source-panel, lead to a display of the source-panel with
its transferred object. (For example: Each click in the panel “object list”, leads to the display of the result in the “detail
view” panel.)
Influences: Here you can determine a panel, which will be influenced by the current panel (For example: depending on
which objects are displayed in the panel “search results”, it influences which facets will be displayed in the panel
“facets”.)
• Script for target object: By means of scripts, it is possible not simply to indicate panels, but also conditions. This enables the current
panel to influence other selected panels.

31. 31
Building Web application with panels and view configurations
31
Panels - Configuration
Configuration name: The panel can have any name so you can find it again quickly.

32. 32
Building Web application with panels and view configurations
32
„View panels“ - Configuration
Start element: Here you can specify a concrete object
or type, who serves as output element and from
which it is possible to take additional ways through
the network.
Script for start element: Here you can find formulate
conditions, under which a specific object or type
shall be displayed as a start element.
Do not override start element: If this field is checked,
no User can delete the start element.
Sub-configuration (fixed view only!): Here you can
specify the view configuration, which is used for the
fixed view.
Little reminder:
View panels don’t contain further panels.
View panels contain view configurations.

33. 33
Building Web application with panels and view configurations
33
„Layout panels“ - Configuration
Activate first by default (only in switching layout!): Is it true, that means that the first sub panel is activated by
default (in the example here it is the start page).
Little reminder:
Layout panels contain further panels.

34. 34
Building Web application with panels and view configurations
34
Panels - Layout
Width and height (or maximal width and maximal height)
can be specified in pixels or percentage.
Flex-grow: The flex-grow property defines the ability for a
flex item to grow if necessary. As you can see in the example
on the right, the elements 1,2 and 4 have the factor 1, while
element 3 has the factor 2, therefore it takes twice as much
of space as the other elements.
Flex-shrink: The flex-shrink property specifies the shrinkage
factor of flexible elements. As you can see in the example on
the right, the element 1,2 and 4 have the factor 2, while
element 3 has the factor of 1, therefore they are twice as
small as element 3. 3 421

35. 35
Building Web application with panels and view configurations
35
Panels - Context
In the context-tab of the panels, you can check back and delete, all relations of the current panel
to other panels and view configurations.
Adding relations at this point isn’t possible yet in i-views 5.0. Therefore the procedure is to
determine the display of the relations in the view-configuration.

36. 36
Building Web application with panels and view configurations
36
View configurations
How is my data shown?
View configurations are contained in panels and determine, how objects and types are visualized. view
configurations are views on the data.
- Free of context view configurations
- They are not bound to a particular type.
- For example: picture, text, JavaScript, menus, searches, facets
- Object dependend view configurations
- Different views on the data can be figured. There can as many view configurations per type.
- They are determined at the type of the objects.
- For example: groups, properties, tables and styles
Little reminder

37. 37
Building Web application with panels and view configurations
37
View configurations

38. 38
Building Web application with panels and view configurations
38
View configurations

39. 39
Building Web application with panels and view configurations
39
View configurations
Label

40. 40
Building Web application with panels and view configurations
40
Panels and view configuration
Step 4: Link the panels with the view configurations.
For example, link the window title panel with the view configuration of the type label.
Little reminder

41. 41
Building Web application with panels and view configurations
41
View configurations
Image

42. 42
Building Web application with panels and view configurations
42
View configurations
Menu

43. 43
Building Web application with panels and view configurations
43
View configurations
Search field view

44. 44
Building Web application with panels and view configurations
44
View configurations
Search result view

45. 45
Building Web application with panels and view configurations
45
View configurations
Table

46. 46
Building Web application with panels and view configurations
46
View configurations
Facet view

47. 47
Building Web application with panels and view configurations
47
View configurations
Search

48. 48
Building Web application with panels and view configurations
48
View configurations
Search

49. 49
Building Web application with panels and view configurations
49
View configurations
Text

50. 50
Building Web application with panels and view configurations
50
View configurations
Graph

51. 51
Building Web application with panels and view configurations
51
View configurations
Graph configuration

52. 52
Building Web application with panels and view configurations
52
View configurations
Group: All contained view configurations are shown simultaneously. Depending on their style the
contained view configurations are located one below the other or side by side.
Alternative: The contained view configurations are shown as alternatives and you have to choose which
one to show in a tab menu, so only one view configuration is shown in the available space.

53. 53
Building Web application with panels and view configurations
53
View configurations
Group

54. 54
Building Web application with panels and view configurations
54
View configurations
Properties

55. 55
Building Web application with panels and view configurations
55
View configurations
Property

56. 56
Building Web application with panels and view configurations
56
Task: Hello World with panels
Configure a simple text „Hello World“ with
the help of panels and open it in your
browser with the localhost server.

57. 57
Building Web application with panels and view configurations
57
Task: Hello World with panels
1. Start the mediator
2. Start the bridge
3. Go to „Anwendung“ (german for „application“,
soon the english terms will be added) and click
on the application „viewconfigurationmapper“.
The identifier should have the name
„viewConfigMapper“.
4. Create the main window panel for your
application. Choose fixed view (german:
festgelegte Ansicht) as a panel type.
The Mediator is needed if you want to access
the UI and the network simultaneously.

58. 58
Building Web application with panels and view configurations
58
Task: Hello World with panels
5. Create a sub configuration with the view
configuration type „Text“
6. Refresh the application with
7. Open the web application with the URL
http://localhost:[port_of_the_bridge.ini]/[RESTService
]/[StaticFileResource]/index.html
In our case the URL is
http://localhost:8815/viewconfig/viewconfigmapper/i
ndex.html

59. 59
Building Web application with panels and view configurations
59
Result: Hello World with panels

60. 60
Building Web application with panels and view configurations
60
Content (Advanced knowledge)
1. Advanced knowledge: view configurations
2. Actions
3. Task: Building a simple web application
4. Homework: Expanding the builded web application with selected functions

61. 61
Building Web application with panels and view configurations
61
Send your questions to:
contact-webinar@i-views.com
No homework today.
Next lesson: Thursday
Thank you for visiting
i-views University