{"id":263,"date":"2011-09-12T13:33:10","date_gmt":"2011-09-12T12:33:10","guid":{"rendered":"http:\/\/iamwcew\/blog\/?p=263"},"modified":"2011-09-12T13:33:10","modified_gmt":"2011-09-12T12:33:10","slug":"using-ext-js-library-with-webcenter-portal","status":"publish","type":"post","link":"https:\/\/gpmfactory.com\/index.php\/2011\/09\/12\/using-ext-js-library-with-webcenter-portal\/","title":{"rendered":"Using Ext JS library with Webcenter Portal"},"content":{"rendered":"

Ext JS<\/strong><\/span><\/a> is a\u00a0<\/span>JavaScript<\/span>\u00a0library for building interactive\u00a0<\/span>web applications[1]<\/sup><\/a><\/span>\u00a0using techniques such as<\/span>Ajax<\/span>,\u00a0<\/span>DHTML<\/span>\u00a0and\u00a0<\/span>DOM<\/span>\u00a0scripting.<\/span><\/span><\/p>\n

It’s quite simple to integrate a Javascript code with webcenter.
\nFor instance, let’s consider this use case: get an XML document form a given URL, then display it at a fragment in an existing Webcenter Portal page in order to browse the content:.
\n<\/span><\/p>\n

\"\"
\n<\/span><\/p>\n

Download EXT JS library<\/span><\/a>. (GPL3 Licence)
\nCopy needed file on the WebCenter Site (on a public HTTP Virtual directory)
\n<\/span><\/p>\n

We take an existing example called xml-grid, then we adapt it (js file, in particular).
\nIn webcenter, we add a HTML markup task flow, and we fill with this HTML code:
\n<\/span><\/p>\n

<html>
\n<\/span><\/p>\n

<head>
\n<\/span><\/p>\n

<meta http-equiv=\u00a0\u00bbContent-Type\u00a0\u00bb content=\u00a0\u00bbtext\/html; charset=iso-8859-1″>
\n<\/span><\/p>\n

<title>XML Grid Example<\/title>
\n<\/span><\/p>\n

<link rel=\u00a0\u00bbstylesheet\u00a0\u00bb type=\u00a0\u00bbtext\/css\u00a0\u00bb href=\u00a0\u00bb\/cs\/ThemeForge\/extjs\/resources\/css\/ext-all.css\u00a0\u00bb \/>
\n<\/span><\/p>\n

<link rel=\u00a0\u00bbstylesheet\u00a0\u00bb type=\u00a0\u00bbtext\/css\u00a0\u00bb href=\u00a0\u00bb\/cs\/ThemeForge\/extjs\/shared\/example.css\u00a0\u00bb \/>
\n<\/span><\/p>\n

<script type=\u00a0\u00bbtext\/javascript\u00a0\u00bb src=\u00a0\u00bb\/cs\/ThemeForge\/extjs\/bootstrap.js\u00a0\u00bb><\/script>
\n<\/span><\/p>\n

<!– page specific –>
\n<\/span><\/p>\n

<script type=\u00a0\u00bbtext\/javascript\u00a0\u00bb src=\u00a0\u00bb\/cs\/ThemeForge\/extjs\/pmo-grid.js\u00a0\u00bb><\/script>
\n<\/span><\/p>\n

<\/head>
\n<\/span><\/p>\n

<body>
\n<\/span><\/p>\n

<h1>XML Grid Example<\/h1>
\n<\/span><\/p>\n

<div id=\u00a0\u00bbexample-grid\u00a0\u00bb><\/div>
\n<\/span><\/p>\n

<\/body>
\n<\/span><\/p>\n

<\/html>
\n<\/span><\/p>\n

\"\"
\n<\/span><\/p>\n

Data sample:
\n<\/span><\/p>\n

\"\"
\n<\/span><\/p>\n

The sample below is a more sophisticated sample of grid:<\/p>\n

\"\"<\/a><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Others usages:
\nIt can be useful to use BI Publisher<\/strong> in order to build a XML document which will be consumed with this technique.<\/p>\n","protected":false},"excerpt":{"rendered":"

Ext JS is a\u00a0JavaScript\u00a0library for building interactive\u00a0web applications[1]\u00a0using techniques such asAjax,\u00a0DHTML\u00a0and\u00a0DOM\u00a0scripting. It’s quite simple to integrate a Javascript code with webcenter. For instance, let’s…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,7],"tags":[47,64,108],"ppma_author":[150],"class_list":["post-263","post","type-post","status-publish","format-standard","hentry","category-demo-2","category-dev","tag-demo","tag-javascript","tag-webcenter"],"authors":[{"term_id":150,"user_id":1,"is_guest":0,"slug":"admin8700","display_name":"Patrick","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/209d5ed69b74d288390621ab4c1d3773?s=96&d=mm&r=g","0":null,"1":"","2":"","3":"","4":"","5":"","6":"","7":"","8":""}],"_links":{"self":[{"href":"https:\/\/gpmfactory.com\/index.php\/wp-json\/wp\/v2\/posts\/263","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gpmfactory.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gpmfactory.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gpmfactory.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gpmfactory.com\/index.php\/wp-json\/wp\/v2\/comments?post=263"}],"version-history":[{"count":0,"href":"https:\/\/gpmfactory.com\/index.php\/wp-json\/wp\/v2\/posts\/263\/revisions"}],"wp:attachment":[{"href":"https:\/\/gpmfactory.com\/index.php\/wp-json\/wp\/v2\/media?parent=263"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gpmfactory.com\/index.php\/wp-json\/wp\/v2\/categories?post=263"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gpmfactory.com\/index.php\/wp-json\/wp\/v2\/tags?post=263"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/gpmfactory.com\/index.php\/wp-json\/wp\/v2\/ppma_author?post=263"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}