{"id":700,"date":"2012-05-17T12:19:48","date_gmt":"2012-05-17T10:19:48","guid":{"rendered":"http:\/\/hasselba.ch\/blog\/?p=700"},"modified":"2012-05-18T14:52:51","modified_gmt":"2012-05-18T12:52:51","slug":"quick-n-dirty-html5-uicomponents-without-effort","status":"publish","type":"post","link":"https:\/\/hasselba.ch\/blog\/?p=700","title":{"rendered":"Quick-n-Dirty: HTML5 UIComponents without effort"},"content":{"rendered":"
Obviously it was Chris\u00a0Toohey who first has discovered the way of manipulation UIComponents with the tagName attribute: http:\/\/www.dominoguru.com\/pages\/xpage_xptext_tagName_options.html<\/a><\/address>\n

 <\/p>\n

The xp:text<\/em> – element can easily manipulated to add HTML5 functionality to a XPages. By overriding the property tagName<\/em>, the component can be accessed like every other UI component in the component tree.<\/p>\n

Normally the designer only allows a small list of choices for the tagName<\/em> property:<\/p>\n

\"\"<\/p>\n

But this can be easily overwritten by manually editing the tagName<\/em> attribute in the source and allows to change the generated HTML element to whatever you want.<\/p>\n

Here is a small example for a HTML5 progessbar<\/a> which can be accessed like every other UIComponent:<\/p>\n

\"\"<\/p>\n

<?xml version=\"1.0\" encoding=\"UTF-8\"?>\r\n<xp:view xmlns:xp=\"http:\/\/www.ibm.com\/xsp\/core\">\r\n\r\n\u00a0\u00a0 <xp:text escape=\"false\" id=\"pBar\" disableTheme=\"true\"\r\n      tagName=\"progress\" value=\"\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <xp:this.attrs>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <xp:attr name=\"value\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <xp:this.value><![CDATA[#{javascript:\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if( !sessionScope.containsKey(\"pBar\") )\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 sessionScope.put(\"pBar\", 0 );\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var value = sessionScope.get(\"pBar\");\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if( value > 100 ) value = 0;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 sessionScope.put(\"pBar\", (value+10) );\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 value\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }]]><\/xp:this.value>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/xp:attr>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <xp:attr value=\"100\" name=\"max\"><\/xp:attr>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <\/xp:this.attrs>\r\n\u00a0\u00a0 <\/xp:text>\r\n\r\n\u00a0\u00a0 <xp:button value=\"Label\" id=\"button1\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <xp:eventHandler event=\"onclick\" submit=\"true\"\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0refreshMode=\"partial\" refreshId=\"pBar\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <\/xp:eventHandler>\r\n\u00a0\u00a0 <\/xp:button>\r\n\r\n<\/xp:view><\/pre>\n
The generated HTML Tag looks like this and can for example be refreshed with a partial refresh etc.<\/p>\n
<progress id=\"view:_id1:pBar<\/a>\" value=\"40<\/a>\" max=\"100<\/a>\"><\/progress><\/pre>\n","protected":false},"excerpt":{"rendered":"
Obviously it was Chris\u00a0Toohey who first has discovered the way of manipulation UIComponents with the tagName attribute: http:\/\/www.dominoguru.com\/pages\/xpage_xptext_tagName_options.html   The xp:text – element can easily manipulated to add HTML5 functionality to a XPages. By overriding the property tagName, the component … 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,9,26,81,74,24],"tags":[33,14,7,77,4,86,25,32,12,3,85],"class_list":["post-700","post","type-post","status-publish","format-standard","hentry","category-allgemein","category-html","category-javascript","category-jsf","category-web","category-xpages","category-xsp","tag-8-5-3","tag-designer","tag-domino","tag-html","tag-js","tag-jsf","tag-partial-refresh","tag-tipp","tag-web","tag-xpages","tag-xsp"],"_links":{"self":[{"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts\/700","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=700"}],"version-history":[{"count":7,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts\/700\/revisions"}],"predecessor-version":[{"id":706,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts\/700\/revisions\/706"}],"wp:attachment":[{"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=700"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=700"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=700"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}