IBM Script Portlet for WebSphere Portal

Transcription

1 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 JavaScript API including portlet preference support

2 Topics The Script Portlet approach Using Script Portlet Working with the browser-based Script Portlet Editor Importing applications Using command line support for working with external editors and tools Downloadable samples Accessing data and services Script Portlet and other development tools For more information

3 Why script-based applications for WebSphere Portal Web programming skills using HTML/JS/CSS are very prevalent and widely available 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

4 Script Portlet - build JavaScript-based portlets using widely available web development skills and libraries Application HTML/CSS/JS is stored in Web Content Manager and can be edited with browser-based editor JavaScript libraries and frameworks of your choice Build/test applications with your preferred tools, then import or push to server Rich portlet applications with support for Portal value-add features

5 The Script Portlet approach All the application artifacts HTML, JS, CSS, images, etc. are stored and managed in Web Content Manager (WCM) WCM features such as projects and workflow can be used Code deployment by IT is not needed You can build applications from the browser using the Script Portlet Editor, with syntax highlighting and auto-complete You can import applications built with HTML/JS/CSS from your development environment of choice Data access is done with Ajax/REST services, typically using JSON data Services can come from any provider, whether external via Portal s Ajax proxy or a provider built with tools such as Web Experience Factory or Rational Application Developer Portal s key value-add features are available Eventing, portlet preferences, responsive design, Public Render Parameters, etc.

6 Developing applications with Script Portlet There are two basic ways to build applications with Script Portlet: 1. Build right from the browser-based Script Portlet Editor Type or use copy/paste Auto-complete and syntax highlighting are available Click Save to update and see a live preview Preview can be opened in a separate window 2. Build and test with any external tools, then use Import or command line push to update the application on the server Applications can include any number of files such as JS, images, HTML fragments, etc. See following slides for details on each approach

7 Building an application from the browser using the Script Portlet Editor 1. Create a new empty Script Portlet on a page 2. Open the Script Portlet Editor and enter your HTML, JavaScript, and CSS You can copy/paste from samples on the web, from JSFiddle, etc., or type your code The HTML editor tab has any external references and all of your application UI The JavaScript tab has your application JS code CSS holds your style definitions 3. Click Save to preview the application 4. Close the editor window to see the application on the portal page

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

9 The Script Portlet Editor with tree view, tabbed editors, and preview JavaScript and CSS tabs Tree view of files HTML editing tab New for 1.2 Beta: tabbed editors with tree view at left Preview window

10 Viewing the running portlet after closing the Script Portlet Editor

11 Building an application with external tools and importing into a Script Portlet 1. Develop your application standalone with index.html and other files such as JS, CSS, and images Use your favorite editor to work with files on your workstation/laptop Your application can have multiple JS, image, and other files An HTML page (typically index.html ) renders the main application this is what will be running as a portlet Test and debug in a browser such as Chrome or Firefox by pointing at your index.html 2. ZIP up your entire application folder 3. Create a new empty Script Portlet 4. Click Import and select your ZIP file to upload and import it

12 Building and testing standalone, with ZIP of application folder Edit your HTML/JS/CSS in any text editor Test standalone in browser by loading index.html Create a ZIP file of the application folder,with index.html at root

13 Importing application ZIP file and running as a portlet Import dialog with ZIP selected Import confirmation showing imported files The running portlet after closing the dialog

14 Using the Script Portlet Editor to view and edit all the imported application files New for 1.2 Beta: all imported files can be viewed and edited in Script Portlet Editor

15 Using the sp push command line support for iterative edit/update using external editing tools New for 1.2 Beta 1. Create your initial application standalone with an index.html and other files such as JS, CSS, and images, just as when using Import 2. Create a new empty Script Portlet and use the File / Export command to download a ZIP that includes a pre-configured sp-config.json file 3. Put the sp-config.json file at the root of your application folder 4. Run the "sp push" command to update the Script Portlet with all your latest files Use the "-root" argument to specify your application folder, such as: sp push -root c:\samples\scripts\hello 5. Refresh your browser to see your latest code running Once you have this set up, you can just do sp push followed by browser refresh for an ultra-quick iterative edit/test cycle

16 Using sp push for a rapid iterative edit/test cycle Developer workstation 1. Edit files using any editor Portal server (local or remote) WCM WCM Content Item, with elements for application files (HTML/JS/CSS/images/etc.) 2. Run sp push command Portal page with Script Portlet 3. Refresh browser

17 Command line configuration file sp-config.json { } "excludes": [ "^bin$", "^lib$", "^src$", "^\\.classpath$", "^\\.project$", "^sp-config.json$", "^sp-cmdln.log$", "^sp.bat$", "^sp.sh$" ], "mainhtmlfile": "index.html", "portaluser": "wpsadmin", "portalpassword": "wpsadmin", "scriptportletserver": " "wcmcontentid": "a5fde826-0a52-4e9f-af93-0c456f3b8d22" Example sp-config.json file - this is generated with the values for your server and script portlet instance by Export. wcmcontentid identifies the Script Portlet instance. Application folder with sp-config.json at root Note: portalpassword is only for use with an unsecured development server. If this or other properties are not specified in the JSON file, you will be prompted for them.

18 Integrating command line support with editors and IDEs IDEs and editors typically have a way to invoke external programs This can be used to invoke sp push right from your IDE/editor This may be invoked from a command or icon, or it may be automatically triggered by operations such as saving a file For example, with Eclipse you can use External Tools Configurations to define a configuration that invokes sp.bat (or sp.sh) with the push argument, using the predefined Eclipse variable ${project_loc} as the working directory Eclipse IDE with Script Portlet Push as External Tool

19 JavaScript API and portlet preference support New for 1.2 Beta With portlet preferences you can provide application customization at the portlet instance level Applications can be configured from the browser, to let business users, page authors, or administrators customize the application Each instance of the portlet has different preference data Preference data is stored as JSON The customization user interface is part of the your Script Portlet application, built with any UI and functionality you want A JavaScript object <namespace>sphelper has functions to store or retrieve preference data See the latest published samples for an example The sphelper API also provides utility functions to obtain commonly used values such as the current user name

20 Examples of customization using preferences API A Stock Tracking application can be configured for which stocks to show A customer list can be configured for which columns to display

21 Downloadable Samples

22 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 Portlet Preferences

23 Downloadable sample screenshots

24 Accessing Data and Services

25 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 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

26 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

27 Script Portlet and Other Development Tools

28 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

29 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)

30 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

31 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: