IBM Script Portlet for WebSphere Portal Release 1.1

Size: px

Start display at page:

Download "IBM Script Portlet for WebSphere Portal Release 1.1"

Iris Cannon
10 years ago
Views:

1 IBM Script Portlet for WebSphere Portal Release 1.1

2 Topics Why script applications for WebSphere Portal The Script Portlet approach and its benefits Using Script Portlet Accessing data and services Downloadable samples Script Portlet and other development tools For more information

Portlet Accessing data and services Downloadable samples

3 Why script-based applications for WebSphere Portal Web programming skills using HTML/JS/CSS are easier to find than Java EE and portlet programming skills Many JavaScript libraries and frameworks are available and widely known (jquery, Backbone.js, AngularJS, Knockout, ExtJS, e.g.) Many organizations are moving toward a client-side application architecture The application code runs in JS on the client, accessing data via REST services This approach is has a number of potential benefits including performance and mobile/offline support The prevalence of JS across the industry continues to grow rapidly

JavaScript libraries and frameworks of your choice New in 1.

4 Script Portlet: Build JavaScript-based portlets using widely available skills and libraries, in the cloud or on premises with no Java code deployment Application HTML/CSS/JS managed in WCM JavaScript libraries and frameworks of your choice New in 1.1: Build/test Single Page Applications with your preferred tools, then import Rich portlet applications with support for Portal value-add features

5 The Script Portlet approach All the application code HTML, JS, CSS is stored and managed in Web Content Manager You can build applications from the browser using the Script Portlet Editor, with syntax highlighting and auto-indent You can import single page applications from your development environment of choice Data access is done with Ajax/REST services using JSON data These services can come from any provider, whether external via Portal s Ajax proxy or from Web Experience Factory or other provider Portal s key value-add features are available Eventing, portlet preferences, responsive and adaptive design, Public Render Parameters, etc.

access is done with Ajax/REST services using JSON data These services can come from any provider, whether external via Portal s Ajax proxy or from Web Experience

6 Key benefits of Script Portlet You can build portlets using web developer skills you can easily hire (JS/HTML/CSS, jquery, etc.) Line of Business is less dependent on Central IT - a small team of script programmers can make new portlets and customizations quickly and easily You can build portlets without deploying any new code on the server Accessing a cloud server from a browser you can create a new portlet in minutes, without installing any tools, for example by copy/paste of JS and HTML snippets All the features of WCM can be used for managing applications Projects and workflow can be used for approval by business and/or IT before applications go live All coding changes can be scoped to the same project as other changes to web content or portal-managed content You can create libraries of JavaScript, CSS, data, or markup, and link to them from within the WCM UI

code on the server Accessing a cloud server from a browser you can create a new portlet in minutes, without installing any tools, for example by copy/paste of JS and HTML snippets All the features of

7 Using Script Portlet

8 Scenario 1: Build from browser using Script Portlet Editor 1. Bring up the Script Portlet Editor and enter your <head>, HTML, JavaScript, and CSS You can copy/paste from samples on the web, from JSFiddle, etc., or type in your code <head> can be used for URLs to external libraries HTML should have the contents of your UI JavaScript has your application JS code CSS has your style definitions 2. Click File / Save to preview the app 3. Close the editor window to see the app on the portal page

9 Creating a new empty Script Portlet for editing Portal 8.5 page editing toolbar and the Create popup Empty Script Portlet showing the Edit button

10 Script Portlet Editor with Preview HTML and <head> JavaScript CSS Preview

11 Portlet running with page in View mode

12 Scenario 2: Build and test in external tool, then import (new v1.1 feature) 1. Develop your application with index.html and other files such as JS, CSS, and images Use your favorite editor Your app can have multiple JS, image, and other files This is the popular single page application web development model Test and debug in a browser such as Chrome or Firefox, by pointing at your index.html 2. ZIP up the entire folder 3. Create a new empty Script Portlet 4. Import the ZIP file and instantly run as a portlet

This is the popular single page application web development model Test and debug in a browser such as Chrome or Firefox, by

13 Building and testing application standalone, with ZIP of folder Editing HTML and JS in text editor Testing in browser by loading index.html ZIP file of application folder

14 The import confirmation screen and the running portlet index.html of application JS files Imported application running as portlet Image files

15 Notes on importing applications with multiple JS and other files The contents of JavaScript files from the imported ZIP are inserted inline into either the <head> or HTML elements Additional imported files such as images, HTML fragments, and JSON files are stored with your Script Portlet and can be used, but they aren t shown in the Script Portlet Editor One of the published samples ( Imported Content Files ) shows how images, HTML fragments, and JSON files can be used from imported applications

files are stored with your Script Portlet and can be used, but they aren t shown in the Script Portlet Editor One of the

16 Other new features in Script Portlet v1.1 File Export This creates and downloads a ZIP file of a Script Portlet You can then use Import with the generated ZIP file Note that if you have imported a ZIP file that includes additional files such as images, HTML fragments, and JSON files, those additional files are not exported Import, Copy from Existing Script Select any Script Portlet on your Portal system and use it as a starting point for your Script Portlet

ZIP file Note that if you have imported a ZIP file that includes additional files such as images, HTML fragments,

17 Accessing Data and Services

18 Accessing data and services Data access for script-based applications is typically done using REST services with JSON format data Any number of tools, frameworks, and services can provide the REST/JSON services: Cloud-based services, including IBM SmartCloud services Cast Iron platform DataPower appliance WEF data providers (on Portal server or external) WAS connectors (on Portal server or external) External services can be accessed through Portal s Ajax proxy The current trend for application architecture is to have a four-tier architecture, especially for a mobile and multi-channel world A UI services layer sits in front of the enterprise service layer and provides REST/JSON services to the UI layer

external) WAS connectors (on Portal server or external) External services can be accessed through Portal s Ajax proxy The current trend for application architecture is to have a

19 Data service example: accessing bank account data Recent bank transactions for selected account, using data from REST/JSON service, displayed with jquery Datatables JS code uses jquery getjson function to call REST service, using accountnumber as input

service, displayed with jquery Datatables JS code uses jquery

20 Downloadable Samples

21 Downloadable samples You can download a set of samples for Script Portlet that illustrate a variety of techniques The samples include: Hello, World jquery Eventing (two cooperating portlets) jqplot Chart jquery DataTables Load WCM Content Launch Script (launching a Script Portlet in its own window) Public Render Parameters (two cooperating portlets) WCM tag samples (access to commonly-used context information such as user) Imported content files (includes image, HTML fragment, and JSON data files

22 Downloadable sample screenshots

23 Script Portlet and Other Development Tools

24 Script Portlets are first-class Portal citizens and play well with others Your Portal site can combine Script Portlets with any other portlets built with Web Experience Factory (WEF), Rational Application Developer (RAD), or other tools Portlets can communicate (e.g., with Public Render Parameters or JS/jQuery events) and share styling Script Portlet Data is from JSON REST services provided by WEF or RAD WEF or RAD Portlet

25 How Script Portlet fits with WEF and RAD tools Script Portlet does not replace WEF and RAD It is complementary to those IDE-based tools With Script Portlet you get the benefits of cloud-based development and WCM management of portlet assets With WEF or RAD you get the unique benefits those frameworks provide: WEF uses a model-based code generation approach using builders, for rapid development and multiple variations from a single model RAD includes a comprehensive set of tools for JEE development, with WYSIWYG and drag/drop tools for UI development With WEF or RAD you can build script-based portlets that use a server-side shell Most of the code is JS and HTML, delivered by a lightweight portlet shell The server-side shell can provide resources and services to the client JS and can integrate with server-side Portal features WEF has a Script Application builder and wizard for this approach (see next slide)

Script-based portlets using WEF Script Application Builder References to script libraries such as JQuery Script-Based Portlets Application JS file $(document).

26 Script-based portlets using WEF Script Application Builder References to script libraries such as JQuery Script-Based Portlets Application JS file $(document).ready( function() { // Get Accounts jqsample.displaychart(); }); Data Service Provider Model Data Access and Transformation Builders JSON/REST calls to server for data

27 For more information on Script Portlet Visit IBM Digital Experience Developer: Links to download of Script Portlet, samples, demo video, and other resources Video demo:

IBM Script Portlet for WebSphere Portal

IBM Script Portlet for WebSphere Portal Release 1.2 Beta, with key enhancements for: Multi-file editing with tabbed UI in Script Portlet Editor Command line support and integration with external tools