l11: panels and view configurations (advanced)

1

BuildingWebapplicationwithpanelsandviewconfigurations

i-viewsUniversityPart11Advancedknowledge:


2


2

Your teacher today

NadineProske

KnowledgeEngineer

intelligentviewsgmbh

3


3

Content(1)

Basicknowledge:WebApplicationswithpanelsandviewconfigurations

1. Overviewoftheconfigurationelementsofawebapplication1. Panels

2. Actions

3. Viewconfigurations

2. Preconditionstobuildawebapplication

3. Proceedingtobuildawebapplication

4. Panels

5. Basicknowledge:Viewconfigurations

6. Task:HelloWorldwithpanels

4


4

Task:CreatingasimpleWebApplication

Content(2)

Advancedknowledge:WebApplicationswithpanelsandviewconfigurations

1. Advancedknowledge:viewconfigurations

2. Actions

3. Homework:Rebuildthewebapplication,withthestepsexplainedinthislecture.

5


5

StaticFileResource

Inthestaticfileresourcethestaticfrontenddataisconfigured(HTML,CSS,JavaScript).Itcaneitherbelocatedasafilerelativetothebridge(nameofthefile=pathpattern)orbespecifiedasazipfile.

Typicallythevcmisoutsourcedasazipfilecontainingallthenecessaryresourcestoloadthevcm.Thoseareamongstothers:

- Theindex.htmlstartpage

- ThereferencedJavaScript's(vcm,libs,…)

- Thereferencedcss

Thestaticfileresourceshouldonlybeusedforrapidprototyping.Inproductiveapplicationsthereshouldbeusedawebserver(Apache,NGINX,ISS)forthestaticresourcesbecauseofperformanceissues.

Currentlythe.zipfilewillalwaysbedeliveredbyemployeesofi-viewsandshouldnotbechanged.Pleasepayattentionthattheindex.htmlisalwayslocatedatthetoplevelantnotinsomesubfolder.Inthefuturethe.zipfilecanbedownloadedbypartnersatthewebpageofi-views.com.

6


6

Task:BuildingaSimpleWebApplication

Wearegoingtobuildawebapplicationforthemusicexamplenetwork.

7


7


Preparation

1. Startthemediator.

2. Startthebridge.

3. Starttheknowledgebuilderwiththelocalhostserverandthenetwork„Schulungsnetz“.

4. CallthisURL:http://localhost:8815/viewconfig/viewconfigmapper/index.html

8


8


LabellingoftheWindowTitle

1. DeletethePanelcontainingthe„HelloWorld“text.

2. Clickontheremainingmainwindowpanelandaddawindowtitlepanelwith

.

3. Thepaneltypeshouldbe„fixedview“.

4. Createanewconfigurationforalabelthroughthefield„Labelconfiguration“andgiveitaname.

5. Enter„i-viewsmusicexample“inconfigurationname

WeadvicetonameallPanelswith“P:..”andallView-Configurationwith“V:…”soyoualwayshaveanoverviewofwhatisapanelandwhatisaview-configuration.

9


9


Alwaysrefreshtheapplication!

Aftereverychangeyouhavetorefreshtheapplicationwithaclickontoseethechangesappliedtothefrontend.Thebrowseralsohastoberefreshed.

Youwillfindthisbuttonintheapplication‘smenuaswellaswitheverypanelandviewconfiguration.

10


10


DefineAreas

Inthe„HelloWorld“task,itwasenoughtogivethemainwindowpanelthetype„fixedview“,becauseitonlycontainedasingletext.

1. Changethepaneltypeto„linearlayout“withaverticalorientation.

2. Createtwofurtherpanelswiththe„CreatenewInstancesofPanel“buttonandgivethemtheConfigurationname„P:Header“and„P:Mainsector“.

3. Givetheheaderthetype„linearlayout“withahorizontalorientation.

4. Givethemainareathetype„switchinglayout“.

P:Header

P:Mainsector

11


11


Logo

1. AddaPaneltotheheader,withaconfigurationname„P:HeaderLogo“andthetype„fixedview“.

2. CreateanewsubconfigurationofthetypeImageandnameit„V:Header Logo“.

3. Uploadthei-viewslogoanddefineaheightof35px.

4.

12


12


Menu

1. AddasecondPaneltotheheaderwiththeconfigurationname„P:HeaderMenu“andthetype„fixedview“

2. CreatenewsubconfigurationoftypeMenuandlabelit„V:Header Menu“

3. Choose„Menubar“asMenutype

4. Switchtothetab„Actions“andaddthreenewactionswith.Theyshouldreceivetheconfigurationnamesandlabels„Genre“,„Album“and„Groups“

13


13


SearchField

1. Addathirdpaneltotheheader,withaconfigurationname„P:HeaderSearchField“andthetype„fixedview“.

2. CreateanewsubconfigurationofthetypeSearchfieldviewandlabelit„V:HeaderSearchField“.

3. ChoosethequeryforactorsandopusyoupreparedfortodayinQuery.

4. SettheParameternameto„searchString“,theValuationto„Userinput(optional)“andtheTypeto„xsd:string“.

5.

14


14


SearchField

1. SettheParameternameto„searchString“,theValuationto„Userinput(optional)“andtheTypeto„xsd:string“.

2.

Attention:theParameternamehastobesearchString!ThisisapredefinedParameterthatenablesi-viewstorecognizetousetheuser‘sinputfromasearchfield.

15


15


StartPage

1. AddaPaneltoP:Mainsectorandnameit„P:Startpage“.Choosethetype„fixedview“

2. Createanewsubconfigurationoftypetextandnameit„V:Startpagetext“.

3. Enter„Welcome!“asalabelandsometextintothetextfield.

4. SwitchtotheP:Mainsectorandcheckthebox„Activatefirstbydefault“.

5.

16


16


SearchResult

1. AddanotherPaneltoP:Mainsectorwiththelabel„P:QueryResult“andthetype„fixedview“.

2. Createanewsubconfigurationoftypesearchresultaspectandthelabel„Searchresults“.

3. Switchtothe„HeaderSearchfield“Panel.In„influences“,add„P:SearchResult“.Thiswayyoudefinethattheaction(i.e.userinputinthiscase)influencestheviewonthispage.

P:HeaderSearchField

P:QueryResult

17


17


SearchResultTable

1. Insidethesubconfiguration„searchresults“,createanewtableandcallit„searchresulttable“.

2. Withyoucanaddanewcolumntothetable(ObjectofColumnConfiguration).

3. Addanothercolumnelementandchoose„Name“inproperties.

Acolumn(ObjectofColumnConfiguration)maycontainanynumberofcolumnelements.Incolumnelementsyoucanspecifywhichpropertiesyouwanttoshowinthiscolumn,dependingontheobjectshowninthisrow.

18


18


SearchResultTable:Actions(Selection)

1. Switchtotheroot(„Table-Object“)andaddAction(select).Giveitthename„ChooseSearchResult“.

2. ChoosetheActiontypeSelection.

BeforeyoucanselectaPanelyouhavetocreateit.

AnActionoftype„Selection“requirestobetold,wheretheselectedelementisgoingtobedisplayed.In„showresultinpanel“youcanselectthedestination.

19


19


Action(Select):showresultinpanel

1. AddathirdPaneltoP:Mainsectorandcallit„P:Detailview“.TheLayoutislinearwithahorizontalorientation.LateronwewilldefinetwomorePanelsinthislocationthatwilldisplayanobject‘sdetailsontheleftsideonthewebsiteandshowtheNet-Navigatorontherightside.

2. Switchbacktotheaction„ChooseSearchResult“.Nowyoucanselect„DetailviewPanel“intheshowresultpanelfield.

20


20


Action(Select):ClosePanel

1. Optional:Checkthe„Closepanel“box.

2.

Iftheboxischecked,thecurrentPanelinwhichtheactionisbeingcalledwillbeclosedafterwards.ThisisusefulespeciallyforDialoguePanels.

Ifthelayoutchanges,thepanelschangesaswellandwillalsobeclosed,evenwithouttheselectedbox.

21


21


Nowthesearchfieldaswellastheresultsbeingdisplayedinatablebelowarenowfunctional.

Eventhoughwehavealreadyconfiguredanaction(selection),whenweclickononeofthesearchresultsnothingwillhappen.That’sbecausewehaven’tconfiguredanyviewconfigurationforthetargetpanelsofar.

22


22


ConfiguringtheDetailview

1. Switchto„P:Detailview“andaddtwomorePanelstoit.Callthem„P:Detailviewleftside“and„P:Detailviewrightside“.

2. Theleftsideisoftype„flexibleview“.

3. Therightsideisoftype„fixedview“.

4. Switchtothe„Layout“tabandfixtheleftsidetoawidthof40%andtherightsideto60%.

P:Header

P:Detailviewrightside

P:Detailviewleftside

23


23


ConfiguringtheDetailview

Thequerycoversactorsandsongs.Foreveryobjecttypewecanusethestandardviewconfigurationorspecifyitforanytype.Forthisreason,theleftsidereceivedthetype„flexibleview“.

Fornow,wewillcreateastandardviewconfigurationforalltypes.Thiswaywewillgetadisplayedresultforourqueryeventhoughwehaven‘tdoneaviewconfigurationspecifictoatype.

1. SwitchtotheTop-Level-TypeinsidethenetworkandinDetails,selectViewConfigurationà InstanceàDetails.

2. WithyoucancreateanewviewconfigurationoftypeGroup.

24


24


ConfiguringastandardDetailview

1. Addasubconfigurationoftype„Properties“(notProperty!)totheviewconfigurationelement.

2. Addanother„Property“beneath„Properties“andlookfortherelation„Userrelation“inthefield„Property“.

3. GototherootelementofthisGroupandintothetab„Context“.

4. AddthePanel„P:Detailviewleftside“to„applyin“.

5.

Wehaven‘tsetasubconfigurationfortherightsideyet.Thereforeastandardconfigurationwillbeused,containingallattributesandrelations.Lateronwewilldefineasubconfigurationfortherightside.Untilthen,youcaneitherignoretheresultproducedbythestandardconfigurationordetachtherightsidepanelfromthemainpanelfornow.

25


25


ConfiguringaSpecificDetailview

1. Selecttheobjecttype„Band“andaddaviewconfigurationoftype„Group“

2. AddaviewconfigurationelementofType„Properties“

3. AddthreenewPropertyconfigurationsandselect„Name“,„Picture“and„Userrelations“fortheirproperties.

4. GototherootelementofthisGroupandintothetab„Context“.

5. AddthePanel„P:Detailviewleftside“to„applyin“.

6.

26


26


StylingtheDetailview:Thenamebecomestheheadline

1. Selecttheviewconfigoftheobjecttype“Band“andgototheProperty„Name“

2. Inthetab„Style“,createanewobjectoftypeStylewith.Givethestyletheconfigurationname„h2“.

3. Selectthisstyleandswitchtothetab„Viewconfiguration-Mapper“.Enter„h2“in„class“.

4.

Inclass you can enter any class containedinthe css file of the Static FileResource.

27


27


StylingtheDetailview:Hidethename

1. Createanewstyleinsidethe„Name“Property,callit„hideLabel“.

2. Selectthestyle,switchtothetab„Viewconfiguration-Mapper“andcheckthebox„hideLabel“.

3. Switchtothe„Picture“Propertyandlookforthe„hideLabel“styleinthesameplace,usingthequerytool.

4.

28


28


Graph

1. Goto„P:Detailviewrightside“andcreateanewsubconfigurationoftype„Graph“.Nameit„Graph“.

2. Settheheightto900px.

3. Createanew„GraphConfiguration“forthe„hasGraph-Configuration“relation.

4. CreatethisStructuredQueryfor„initialtopicquery“:

29


29


ConfiguringtheGraph

WiththeGraphConfigurationyoucandefinewhichobjectsandrelationsyouwanttoshowinsidetheGraph.

1. CreateanewNodeCategory,callit„Title“.SwitchtotheContexttabandenter„Title“into„applyto“.

2. CreateanewNodeCategory,callit„Actor“.SwitchtotheContexttabandenter„Actor“into„applyto“.

3. AddaLinktoeachNodeCategoryandchoose„Userrelation“fortheirrespectiveproperties/Relation.

4.

Therehavetobeatleasttwoobjectsconnectedtoeachotherbyarelationtobedisplayedinsidethegraph.

30


30


ConfiguringtheGraph:Action– expand

1. AddAlbumasaNodeCategory.

2. SwitchtooneoftheNodeCategoriesandcreateanewMenuinsidethe„Nodes“tab,called„NodeMenu“.AddthisMenutotheotherCategories.

3. InsidetheNodeMenu,switchtotheActiontabandcreateanewAction„expand“.

4. SelectActiontypeNN-Expand.

5.

NN-Expandcandisplayanyrelationsdefinedforthegraphandconnectedtoanobject.

31


31


ConfiguringtheGraph:Action– select

1. InsidetheNodeMenu,selecttheActiontabandcreateanewActioncalled„select“.

2. SelectActiontype„Selection“.

3. TogivetheviewConfigMapperanareatodisplaytheselectedobjectin,chooseatargetpanelin„showresultinpanel“.SelecttheleftsidePanel.

4.

Selectdisplaysthedetailviewofanode.

32


32


Objectlist– Panel

Nowtheonlythingmissingisafunctionalmenubar.Wewanttoshowtheseobjectsinlistform.

1. CreateanewPanelinP:Mainsector,callit„P:Objectlist“.

2. ThePanel‘stypeis„FlexibleView“.

3. ThisPanel‘sActionsaresupposedtobeactivatedintheDetailviewPanel.Thisway,aclickonaobjectinsidetheobjectlistdisplaysthedetailviewofthegivenobject(leftandrightside).

P:Header

P:Objectlist

33


33


Objectlist– viewconfiguration

Wewillstartwiththeobjectlistforalbums.

1. SelecttheobjecttypeAlbumandcreateanewviewconfigurationoftypegroup,callit„V:Album List“.

2. SwitchtotheContexttabandconnectthegroupwiththeObjectlistPanelvia“applyin“.

3. Makesurethe„applytosubtypes“boxischecked.

4. Createsubconfigurationintheviewconfigurationoftype„query“.

Weadvisetoalwayscreatethecontextfirstsinceaveryfrequentlymademistakeistoforgettheconnectionbetweenviewconfigurationandpanel.

34


34


Objectlist– table

1. Thisishowthestructuredqueryinsidetheviewconfigurationhastolooklike:

2. Nowaddanothertableinsidethetableandcallit„V:Album ListTable“.

3. CreatefourColumnsforthetableandselectonepropertyforeachcolumn:Name,hasPerformer,isGenreof,isTaggedBy.

Objectshavetobecalledontobyaquerytobelistedinsideatable.

35


35


Objectlist– actionsinsidethemenu

1. SwitchtotheAction„Album“thatwascreatedinsideV:HeaderMenuinP:HeaderMenu.

2. SelecttheActiontype„Show“.

3. AddtheP:Objectlistin„showresultinpanel“.

4. Addthisscriptto„scriptfortargetobject“.

36


36


QueryResultswithFacets

NowwewanttofilterthequeryresultswithFacets.Tomakeroomforthem,wehavetoredefineourpaneldistributionfirst.

1. SwitchtoP:MainsectorandcreateanewPanel,callit„P:FacetsandQueryResults“.

2. ThetypeisLinearLayoutwithahorizontalorientation.

3. Drag&DroptheQueryResultPanelunderthenewPanel.

4. CreateanotherPanelandcallit„P:Facets“oftype„FixedView“.

P:HeaderSearchField

P:Facets P:Queryresult

37


37



1. Definetheareas‘distributioninthelayout.TheFacetsget25%,theQueryResults75%.

2. SettheconfigurationtomaketheFacetPanelinfluencetheQueryResultPanel.

3. TheHeaderQueryResultPanelstillinfluencestheQueryResultPanel.ChangetheinfluencetowardsthesuperordinatedPanel„P:FacetsandQueryResults“.

P:HeaderSearchField

P:Facets P:Searchresult

influences

38


38



1. CreateanewsubconfigurationoftypeFacetaspectinsidetheFacetPanel.

2. AddanewFacet.

3. Ifyouwanttocreateafacettedlistofallcountrieswiththealbums‘artists,youwillhavetousethefollowingStructuredQuery:

4. Callit„Country“.

5.

39


39

Sendyour questions to:[email protected]

Thank you for visitingi-viewsUniversity

l11: panels and view configurations (advanced)

Data & Analytics