L8: Panels and view configurations

1

BuildingWebapplicationwithpanelsandviewconfigurations

i-viewsUniversityPart08Basicknowledge:


2


2

Your teacher today

NadineProske

KnowledgeEngineer

intelligentviewsgmbh

3


3

Content(Basicknowledge)

1. Overview ofthe configuration elements ofawebapplication1. Panels

2. Actions

3. Viewconfigurations

2. Preconditions tobuild awebapplication

3. Proceeding tobuild awebapplication

4. Panels

5. Basicknowledge:Viewconfigurations

6. Task:Hello Worldwithpanels

4


4

Content(Advanced knowledge)

1. Advanced knowledge:view configurations

2. Actions

3. Task:Buildingasimplewebapplication

4. Homework:Expanding the builded webapplication withselected functions

5


5

Webapplication

Applications consist of4parts:

- What:the data ofthe semantic graph database (objects and their properties),parts ofthe semanticmodel

- Where:Panels- Divisionofthe visible parts ofthe surface inareas

- When:Actions- Actionsinfluence the content ofthe panels

- How:view configurations- Configured viewsonobjects or parts ofthe semantic model

6


6

7


7

Panels

Where istmy data shown?

Panelsdetemine how the visible sections ofanapplication aredivided.Sopanels determine thefundamentallayout ofthe visulisation surface.

- Panelscan influence each other

- Panelscan contain further Panelsor view configurations

- Panelsreceive always exactly one object or typewhen they areactivated

- Panelscan passtheir element (object or type)tothe contained panels- There isapossibility tooverwrite the element viascript

- Panelsdon‘t have any other use.Anything else isconfigured viaActionsand view configurations.

8


8

9


9

Actions

When istmy data shown?

Actionscontrol which viewsarevisualized and the dependences between the panels.

- Types ofactions are- Menus,buttons

- Clicks onobjects or table rows

- You can determine inwhich panel actions have impacts.

10


10

11


11

view configurations

How ismy data shown?

Viewconfigurations arecontained inpanels and determine,how objects and types arevisualized.Viewconfigurations areviewsonthe data.

- Freeofcontext view configurations- They arenotbound toaparticular type.

- For example:picture,text,JavaScript,menus,searches,facets

- Object dependend view configurations- Differentviewsonthe data can be specified.There can be as many view configurations pertypeas you want.

- They aredetermined atthe typeofthe objects.

- For example:groups,properties,tables and styles

12


12

13


13

Preconditions for building awebapplication

- Components- REST

- view configuration

- Viewconfiguration-Mapper

- Static FileResource- Zipwithindex.html

- Mediator

- Bridge:for REST-Services

14


14

Preconditions for building awebapplication

- Components- REST

- view configuration

- Viewconfiguration-Mapper

- Net-Navigator

- Static FileResource- Zipwithindex.html

- Mediator

- Bridge

15


15

Proceeding tobuild awebapplication

1. Build the semantic model

2. Divide the surface insections withpanels

3. Build the view configurations for objects and linkthem tothe panels

16


16


Step 1:Gotothe application withthe identifier „viewConfigMapper“and there create amain windowpanel.

17


17

Kindofpanels and basic conditions

- Mainwindow Panel- Eachapplicationconsistsofexactlyonemainwindowpanel

- Contains„normal”panelsandonewindowtitlepanel

- Dialogpanel- Islocatedasapop-upwindowinfrontofthemainwindow

- Eachapplicationcancontainanynumberofdialogpanels

- Containswindowtitlepanelsandfootlinepanels

Example for adialog panel

18


18

Proceeding tobuild awebapplicationStep 2:Determine the typeofthe panel.

19


19

Paneltypes

Layout-Panels

Layout-panelscontainadditionalpanels.*

- Linearlayout• Allcontainedpanelsaredisplayedsimultaneously

• Determinationoftheorientation(horizontal,vertical)

- Switchinglayout• Thereisalwaysonlyonecontainingpanelshownsimultaneouslyonthesamevisualizationarea.

*Currentlyitisn’tpossibletoreuseapanel.Thiswillbepossiblewithoneofthenextupdates.

20


20

Paneltypes

Viewpanels

Viewpanelsdon’tcontainfurtherpanels.

Viewpanelscontainviewconfigurations.

- Flexibleview• Severalviewsarepossibledependentofthetypeofthedisplayedobject.

- Fixedview• Containsafixedelementofthemodel

• Pictures,texts,menus

21


21

Inthis case the mainwindow panel isalinearpanel,because allcontained panels areshown simultaneously (inthis case vertical).

22


22

Inthis case the panel isalinearpanel,too,becauseallcontained panels areshown simultaneously (inthis case horizontal).

23


23

Thispanel isapanel ofthetypeflexibleview,becauseit doesn‘t contain furtherpanels.It isnotafixedview,because several viewconfigurations can beshown here dependent onthe object that isshown(here it is„one“).

24


24

Question:What panel isthis?

25


25


It isalinearlayout panelwithavertical orientationofthe two containedpanels.

26


26


27


27


Thisisaflexibleviewpanel.It is notafixedview,because there isnotalways shown the person„NadineProske“.

Theview configurationdetermines for the type„person“that here isalways apicture next tothe properties oftheperson and the buttons„projects“and „events“.

28


28


Step 3:Addfurther panels.

29


29


Step 4:Linkthe panels withthe view configurations.

For example,linkthe window titlepanel withthe view configuration ofthe typelabel.

30


30

Panels- ConfigurationActionsactivateinpanel:Allactions,whichareactivatedinthesource-panel,leadtoadisplayofthesource-panelwithitstransferredobject.(Forexample:Eachclickinthepanel“objectlist”,leadstothedisplayoftheresultinthe“detailview”panel.)

Influences:Hereyoucandetermineapanel,whichwillbeinfluencedbythecurrentpanel(Forexample:dependingonwhichobjectsaredisplayedinthepanel“searchresults”,itinfluenceswhichfacetswillbedisplayedinthepanel“facets”.)• Scriptfortargetobject:Bymeansofscripts,itispossiblenotsimplytoindicatepanels,butalsoconditions.Thisenablesthecurrentpaneltoinfluenceotherselectedpanels.

31


31

Panels- Configuration

Configuration name:Thepanel can have any name soyou can findit again quickly.

32


32

„Viewpanels“- Configuration

Startelement: Hereyoucanspecifyaconcreteobjectortype,whoservesasoutputelementandfromwhichitispossibletotakeadditionalwaysthroughthenetwork.

Scriptforstartelement:Hereyoucanfindformulateconditions,underwhichaspecificobjectortypeshallbedisplayedasastartelement.

Donotoverridestartelement: Ifthisfieldischecked,noUsercandeletethestartelement.

Sub-configuration(fixedviewonly!): Hereyoucanspecifytheviewconfiguration,whichisusedforthefixedview.

Littlereminder:Viewpanelsdon’tcontainfurtherpanels.Viewpanelscontainviewconfigurations.

33


33

„Layoutpanels“- Configuration

Activatefirst by default (only inswitching layout!):Isit true,that means that the first sub panel isactivated bydefault (inthe example here it isthe start page).

Littlereminder:Layoutpanels contain further panels.

34


34

Panels- LayoutWidth andheight (ormaximalwidthandmaximalheight)canbespecifiedinpixelsorpercentage.

Flex-grow:Theflex-growpropertydefinestheabilityforaflexitemtogrowifnecessary.Asyoucanseeintheexampleontheright,theelements1,2and4havethefactor1,whileelement3hasthefactor2,thereforeittakestwiceasmuchofspaceastheotherelements.

Flex-shrink: Theflex-shrinkpropertyspecifiestheshrinkagefactorofflexibleelements.Asyoucanseeintheexampleontheright,theelement1,2and4havethefactor2,whileelement3hasthefactorof1,thereforetheyaretwiceassmallaselement3. 3 421

35


35

Panels- ContextInthecontext-tabofthepanels,youcancheckbackanddelete,allrelationsofthecurrentpaneltootherpanelsandviewconfigurations.

Addingrelationsatthispointisn’tpossibleyetini-views5.0.Thereforetheprocedureistodeterminethedisplayoftherelationsintheview-configuration.

36


36

Viewconfigurations

How ismy data shown?

Viewconfigurations arecontained inpanels and determine,how objects and types arevisualized.viewconfigurations areviewsonthe data.

- Freeofcontext view configurations- They arenotbound toaparticular type.

- For example:picture,text,JavaScript,menus,searches,facets

- Object dependend view configurations- Differentviewsonthe data can be figured.There can as many view configurations pertype.

- They aredetermined atthe typeofthe objects.

- For example:groups,properties,tables and styles

Littlereminder

37


37

Viewconfigurations

38


38

Viewconfigurations

39


39

Viewconfigurations

Label

40


40

Panelsand view configuration

Step 4:Linkthe panels withthe view configurations.

For example,linkthe window titlepanel withthe view configuration ofthe typelabel.

Littlereminder

41


41

Viewconfigurations

Image

42


42

Viewconfigurations

Menu

43


43

Viewconfigurations

Searchfield view

44


44

Viewconfigurations

Searchresult view

45


45

Viewconfigurations

Table

46


46

Viewconfigurations

Facet view

47


47

Viewconfigurations

Search

48


48

Viewconfigurations

Search

49


49

Viewconfigurations

Text

50


50

Viewconfigurations

Graph

51


51

Viewconfigurations

Graphconfiguration

52


52

Viewconfigurations

Group:Allcontained view configurations areshown simultaneously.Depending ontheir stylethecontained view configurations arelocated one below the other or side by side.

Alternative:Thecontained view configurations areshown as alternativesand you have tochoose whichone toshow inatab menu,soonly one view configuration isshown inthe available space.

53


53

Viewconfigurations

Group

54


54

Viewconfigurations

Properties

55


55

Viewconfigurations

Property

56


56

Task:Hello Worldwithpanels

Configure asimpletext „Hello World“withthe help ofpanels and openit inyourbrowser withthe localhost server.

57


57

Task:Hello Worldwithpanels

1. Startthe mediator

2. Startthe bridge

3. Goto„Anwendung“(german for „application“,soon the english terms willbe added)and clickonthe application „viewconfigurationmapper“.Theidentifier should have the name„viewConfigMapper“.

4. Createthe main window panel for yourapplication.Choose fixed view (german:festgelegteAnsicht)as apanel type.

TheMediatorisneeded if you want toaccessthe UIand the network simultaneously.

58


58

Task:Hello Worldwithpanels5.Createasub configuration withthe viewconfiguration type„Text“

6.Refreshthe application with

7.Openthe webapplication withthe URLhttp://localhost:[port_of_the_bridge.ini]/[RESTService]/[StaticFileResource]/index.html

Inour case the URLishttp://localhost:8815/viewconfig/viewconfigmapper/index.html

59


59

Result:Hello Worldwithpanels

60


60

Content(Advanced knowledge)

1. Advanced knowledge:view configurations

2. Actions

3. Task:Buildingasimplewebapplication

4. Homework:Expanding the builded webapplication withselected functions

61


61

Sendyour questions to:[email protected]

Nohomeworktoday.

Nextlesson:Thursday

Thank you for visitingi-viewsUniversity

L8: Panels and view configurations

Data & Analytics

Transcript of L8: Panels and view configurations