{"id":793,"date":"2012-08-16T11:08:15","date_gmt":"2012-08-16T09:08:15","guid":{"rendered":"http:\/\/hasselba.ch\/blog\/?p=793"},"modified":"2012-08-16T11:10:39","modified_gmt":"2012-08-16T09:10:39","slug":"xpages-additional-facets-for-viewpanels","status":"publish","type":"post","link":"https:\/\/hasselba.ch\/blog\/?p=793","title":{"rendered":"XPages: Additional Facets for Viewpanels"},"content":{"rendered":"

Today I found some additional facets \/ sections for a normal view panel component which can help to design a layout of an application. They are named like the wind directions and\u00a0 are equivalent to the position information for the relevant content.<\/p>\n

The following screenshot shows all facets in use. In the center you can see the content of the view panel. The pagers are not used, only place holders for a better demonstration:<\/p>\n

\"\"<\/p>\n

As you can see there is some HTML source code in the top of the page visible. This happens if you are using the „north“ facet. I don’t know why this happens.<\/p>\n

Here is the source code of the demo XPage:<\/p>\n

<?xml version=\"1.0\" encoding=\"UTF-8\"?>\r\n<xp:view xmlns:xp=\"http:\/\/www.ibm.com\/xsp\/core\"\r\n\u00a0\u00a0 \u00a0xmlns:xc=\"http:\/\/www.ibm.com\/xsp\/custom\">\r\n\r\n\u00a0\u00a0 \u00a0<xp:viewPanel rows=\"10\" id=\"viewPanel1\">\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xp:this.facets>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xc:ccDisplayer name=\"headerPager\" color=\"255,0,0\" xp:key=\"headerPager\" \/>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xc:ccDisplayer name=\"footerPager\" color=\"0,255,255\" xp:key=\"footerPager\" \/>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xc:ccDisplayer name=\"viewTitle\" color=\"255,0,255\" xp:key=\"viewTitle\" \/>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xc:ccDisplayer name=\"south\" color=\"0,255,0\" xp:key=\"south\" \/>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xc:ccDisplayer name=\"southWest\" color=\"96,96,96\" xp:key=\"southWest\" \/>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xc:ccDisplayer name=\"west\" color=\"128,128,128\" xp:key=\"west\" \/>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xc:ccDisplayer name=\"northWest\" color=\"160,160,160\" xp:key=\"northWest\" \/>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xc:ccDisplayer name=\"north\" color=\"255,255,0\" xp:key=\"north\" \/>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xc:ccDisplayer name=\"northEast\" color=\"192,192,192\" xp:key=\"northEast\" \/>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xc:ccDisplayer name=\"east\" color=\"224,224,224\" xp:key=\"east\" \/>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xc:ccDisplayer name=\"southEast\" color=\"255,255,255\" xp:key=\"southEast\" \/>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<\/xp:this.facets>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xp:this.data>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xp:dominoView var=\"view1\" viewName=\"DemoView\"><\/xp:dominoView>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<\/xp:this.data>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xp:viewColumn columnName=\"Col1\" id=\"viewColumn1\">\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xp:viewColumnHeader value=\"DocUNID\" id=\"viewColumnHeader1\"><\/xp:viewColumnHeader>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<\/xp:viewColumn>\r\n\u00a0\u00a0 \u00a0<\/xp:viewPanel>\r\n<\/xp:view><\/pre>\n
And here is the custom control used.<\/p>\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>\r\n<xp:view xmlns:xp=\"http:\/\/www.ibm.com\/xsp\/core\">\r\n\u00a0\u00a0 \u00a0<xp:this.style>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 <![CDATA[#{javascript:\"height:100.0px;width:100.0%;background-color:rgb(\" + compositeData.color + \")\"}]]>\r\n\u00a0\u00a0 \u00a0<\/xp:this.style>\r\n\u00a0\u00a0 \u00a0<xp:label value=\"#{javascript:compositeData.name}\" id=\"labelName\">\r\n\u00a0\u00a0 \u00a0<\/xp:label>\r\n<\/xp:view><\/pre>\n","protected":false},"excerpt":{"rendered":"
Today I found some additional facets \/ sections for a normal view panel component which can help to design a layout of an application. They are named like the wind directions and\u00a0 are equivalent to the position information for the … Weiterlesen →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,19,74],"tags":[33,7,77,32,3],"class_list":["post-793","post","type-post","status-publish","format-standard","hentry","category-allgemein","category-html","category-xpages","tag-8-5-3","tag-domino","tag-html","tag-tipp","tag-xpages"],"_links":{"self":[{"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts\/793","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=793"}],"version-history":[{"count":10,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts\/793\/revisions"}],"predecessor-version":[{"id":802,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts\/793\/revisions\/802"}],"wp:attachment":[{"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=793"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=793"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=793"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}