{"id":2249,"date":"2016-05-03T13:15:31","date_gmt":"2016-05-03T11:15:31","guid":{"rendered":"http:\/\/hasselba.ch\/blog\/?p=2249"},"modified":"2016-05-03T13:15:31","modified_gmt":"2016-05-03T11:15:31","slug":"vaadin-in-xpages-a-uicomponent-for-embedding-vaadin-applications","status":"publish","type":"post","link":"https:\/\/hasselba.ch\/blog\/?p=2249","title":{"rendered":"Vaadin In XPages: A UIComponent for embedding Vaadin applications"},"content":{"rendered":"

I have created an UIComponent to embed Vaadin applications into XPages. It allows to run both technologies on the same site by adding it to your XPage:<\/p>\n

<?xml version=\"1.0\" encoding=\"UTF-8\"?>\r\n<xp:view\r\n\u00a0\u00a0 \u00a0xmlns:xp=\"http:\/\/www.ibm.com\/xsp\/core\"\r\n\u00a0\u00a0 \u00a0xmlns:vaadin=\"http:\/\/vaadin.com\/xsp\/control\"\r\n\u00a0\u00a0 \u00a0createForm=\"false\">\r\n\u00a0\u00a0 \u00a0\r\n\r\n\u00a0\u00a0 \u00a0<!-- XPages Application -->\r\n\u00a0\u00a0 \u00a0<xp:form>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xp:div id=\"refreshMe\">\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<h1>XPage<\/h1>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xp:label\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0value=\"#{javascript:java.lang.System.nanoTime()}\"\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0id=\"label1\">\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<\/xp:label>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<\/xp:div>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xp:button\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0value=\"refresh\"\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0id=\"button1\">\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xp:eventHandler\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0event=\"onclick\"\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0submit=\"true\"\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0refreshMode=\"partial\"\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0refreshId=\"refreshMe\">\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<\/xp:eventHandler>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<\/xp:button>\r\n\u00a0\u00a0 \u00a0<\/xp:form>\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0<!--\u00a0 VAADIN Application -->\r\n\u00a0\u00a0 \u00a0<vaadin:Vaadin\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0id=\"Vaadin1\"\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0url = \"\/vaadin\/\"\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0divId=\"addressbook\"\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0version=\"7.3.8\"\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0forceResize=\"true\" \/>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n<\/xp:view><\/code><\/pre>\n
This little example shows the XPage above including the the Adressbook application:<\/a><\/p>\n
\"2016-05-03<\/a><\/p>\n
The Vaadin application is reachable at „http:\/\/localhost\/vaadin\/<\/em>“ (hosted by Domino), that’s why the property url<\/em> is set to „\/vaadin\/<\/em>„. The property divId<\/em> contains the name of the application which is used as id in the DOM tree.<\/p>\n
It is required that the VaadinComponent<\/em> is not inside a xp:form<\/em> element. If it detects a surrounding form, a runtime exception is thrown. That’s why you have to set createForm<\/em> to false<\/em> and add your own xp:form<\/em> to your application, as shown in the example.<\/p>\n
\"2016-05-03<\/a><\/p>\n
If the parameter forceResize<\/em> is set to true<\/em>, a CSS style sheet is added to the XPage which resizes the height of html and the body node to 100%. Otherwise the Vaadin application will not be displayed correctly.<\/p>\n
\"2016-05-03<\/a><\/p>\n
Resource Aggregation must be disabled, otherwise it won’t work.<\/p>\n
The sources can be found at https:\/\/github.com\/hasselbach\/VaadinInXPages<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
I have created an UIComponent to embed Vaadin applications into XPages. It allows to run both technologies on the same site by adding it to your XPage: <?xml version=“1.0″ encoding=“UTF-8″?> <xp:view \u00a0\u00a0 \u00a0xmlns:xp=“http:\/\/www.ibm.com\/xsp\/core“ \u00a0\u00a0 \u00a0xmlns:vaadin=“http:\/\/vaadin.com\/xsp\/control“ \u00a0\u00a0 \u00a0createForm=“false“> \u00a0\u00a0 \u00a0 \u00a0\u00a0 … 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":[63,74],"tags":[66,3],"class_list":["post-2249","post","type-post","status-publish","format-standard","hentry","category-vaadin","category-xpages","tag-vaadin","tag-xpages"],"_links":{"self":[{"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2249","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=2249"}],"version-history":[{"count":3,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2249\/revisions"}],"predecessor-version":[{"id":2255,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2249\/revisions\/2255"}],"wp:attachment":[{"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2249"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2249"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2249"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}