Script Portlet - First Step Video Series Presentation

30 %
70 %
Information about Script Portlet - First Step Video Series Presentation
Technology

Published on April 26, 2014

Author: rosorio

Source: slideshare.net

Description

The Script Portlet is a Web Content Manager based portlet that enables script developers to quickly create portlets. It is an easy way to create a client side portlet that consumes services. These services could be services written by IT personnel or just services available on the web. Since it is a Web Content Manager portlet, the scripts, the HTML, and the CSS are stored in Web Content Manager library. IT personnel could create the first version, and then authorized users can modify it to meet their needs. You can also take advantage of WCM features, such as versioning and workflow, as well as WCM tags inside your Script Portlet. We will show how this is done during the demo.

Here is the presentation of the youTube video: http://www.youtube.com/watch?v=Gn2MUUicFUA

© 2014 IBM Corporation Page 1 IBM Collaboration Solutions - Digital Experience Enablement Series Creating my first Script Portlet Google Maps Service & WCM Contents First Step Video Series Rafael Osorio - rosorio@br.ibm.com Worldwide Digital Experience TechSales Specialist Daniel Collins - daniel_collins@us.ibm.com Worldwide Digital Experience TechnicalSales Specialist

© 2014 IBM Corporation Page 2IBM Collaboration Solutions -- Digital Experience Enablement Series IBM’s statements regarding its plans, directions, and intent are subject to change or withdrawal without notice at IBM’s sole discretion. Information regarding potential future products is intended to outline our general product direction and it should not be relied on in making a purchasing decision. The information mentioned regarding potential future products is not a commitment, promise, or legal obligation to deliver any material, code or functionality. Information about potential future products may not be incorporated into any contract. The development, release, and timing of any future features or functionality described for our products remains at our sole discretion Performance is based on measurements and projections using standard IBM benchmarks in a controlled environment. The actual throughput or performance that any user will experience will vary depending upon many factors, including considerations such as the amount of multiprogramming in the user’s job stream, the I/O configuration, the storage configuration, and the workload processed. Therefore, no assurance can be given that an individual user will achieve results similar to those stated here. Please Note

© 2014 IBM Corporation Page 3IBM Collaboration Solutions -- Digital Experience Enablement Series Agenda • Script Portlet: What? • Script Portlet: Why? • Video Demo Pre-Requisites • Video Demo Scenario • Video Demo Overview • Video Demo – First Steps • Conclusion

© 2014 IBM Corporation Page 4IBM Collaboration Solutions -- Digital Experience Enablement Series Script Portlet: What? A simple script application ScriptHTML Actual services written in Java or other languageJSON calls • The scripts, CSS and HTML are stored in WCM • IT might create the first version, but authorized users out in various business units or geographies or whatever, can tweak them as needed to fit there needs Written by IT team or just services on the web. CSS

© 2014 IBM Corporation Page 5IBM Collaboration Solutions -- Digital Experience Enablement Series Leverage Scripting Skills Enable exploitation of key portlet and portal concepts • Start the programmer off requiring only the skills they already have. • Progressively disclose to them additional Portal/Portlet capabilities A sample script portlet might be dojo or jquery or anything Script Portlet: Why?

© 2014 IBM Corporation Page 6IBM Collaboration Solutions -- Digital Experience Enablement Series Video Demo Pre-Requisites • WebSphere Portal 8.0.0.1 with CF10 or WebSphere Portal 8.5; • Script Portlet installed (available here: https://ibm.biz/BdRhLC); • Internet access to consume the Google Maps service;

© 2014 IBM Corporation Page 7IBM Collaboration Solutions -- Digital Experience Enablement Series Video Demo Scenario – Travel Agency • You are a developer (John) of a Travel Agency Website. Jessica (The Travel Agency Owner) would like to provide a service in the Travel Agency's website. She wants to be able to show where in Brazil the stadiums are and a little more info when you click on the markers on a Map. • Because of the short time to the FIFA World Cup 2014, you need to do it for yesterday... Jessica Travel Agency Owner John Web Developer

© 2014 IBM Corporation Page 8IBM Collaboration Solutions -- Digital Experience Enablement Series Video Demo Scenario • Our Demo: FIFA World Cup 2014 Stadiums Map: – External Service: Google Maps with Brazil Map – Web Content: IBM Web Content Manager with Stadium details (Description, Location, Image...)

© 2014 IBM Corporation Page 9IBM Collaboration Solutions -- Digital Experience Enablement Series Video Demo Overview • Adding the Script Portlet: Create/Edit Page & Add Script Portlet • Editing the Script Portlet: Edit the portlet and add the HTML, Head, Script and CSS. • Aggregating WCM Contents: Create WCM Authoring Template, Site Area, Contents and Menu Component. Edit the Script Portlet to call the WCM Menu Component.

© 2014 IBM Corporation Page 10IBM Collaboration Solutions -- Digital Experience Enablement Series Script Portlet - First Steps

© 2014 IBM Corporation Page 11IBM Collaboration Solutions -- Digital Experience Enablement Series An example of adding a Google Map to your website <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(57.0442, 9.9116); var settings = { zoom: 15, center: latlng, mapTypeControl: true, mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, navigationControl: true, navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), settings); } </script> <body onload="initialize()"> <div id="map_canvas" style="width:800px; height:500px"></div> </body>

© 2014 IBM Corporation Page 12IBM Collaboration Solutions -- Digital Experience Enablement Series Editing the HTML <div> <h2 class="blockHeading">FIFA World Cup 2014 - Stadiums</h2> <div id="map-canvas"></div> </div>

© 2014 IBM Corporation Page 13IBM Collaboration Solutions -- Digital Experience Enablement Series Editing the Script var map; function initialize() { var mapOptions = { zoom: 4, center: new google.maps.LatLng(-15.798, -47.866), mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); } google.maps.event.addDomListener(window, 'load', initialize);

© 2014 IBM Corporation Page 14IBM Collaboration Solutions -- Digital Experience Enablement Series Editing the CSS #map-canvas { margin: 0; padding: 0; height: 600px; width: 100%; }

© 2014 IBM Corporation Page 15IBM Collaboration Solutions -- Digital Experience Enablement Series Editing the Head <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"> </script> * Use head section only for prototyping. For production, use theme modules

© 2014 IBM Corporation Page 16IBM Collaboration Solutions -- Digital Experience Enablement Series Creating some WCM Components • WCM Content Authoring Template (Stadium) • WCM Site Area (Stadiums) • WCM Menu Component (Stadium Google Map Marks List) • WCM Contents (each Stadium Details Content: e.g.: Maracanã, Mineirão, Castelão, etc)

© 2014 IBM Corporation Page 17IBM Collaboration Solutions -- Digital Experience Enablement Series Creating the WCM Menu Component (Google Maps Marks) var companyPos[Placeholder tag="listnum"] = new google.maps.LatLng([Element context="autofill" type="content" key="Latitude"], [Element context="autofill" type="content" key="Longitude"]); var companyMarker[Placeholder tag="listnum"] = new google.maps.Marker({ position: companyPos[Placeholder tag="listnum"], map: map, title:"[Element context="autofill" type="content" key="Stadium Name"] - [Element context="autofill" type="content" key="City"]" });

© 2014 IBM Corporation Page 18IBM Collaboration Solutions -- Digital Experience Enablement Series Updating the WCM Menu to add Infoboxes about the Stadium var contentString[Placeholder tag="listnum"] = '<div id="content">'+ '<h1 id="firstHeading" class="firstHeading">[Element context="autofill" type="content" key="Stadium Name"]</h1>'+ '<div id="bodyContent">'+ '<p>[Element context="autofill" type="content" key="Stadium Image"]</p>'+ '<p>[Element context="autofill" type="content" key="Stadium Description"]</p>'+ '</div>'+ '</div>'; var infowindow[Placeholder tag="listnum"] = new google.maps.InfoWindow({ content: contentString[Placeholder tag="listnum"] }); google.maps.event.addListener(companyMarker[Placeholder tag="listnum"], 'click', function() { infowindow[Placeholder tag="listnum"].open(map,companyMarker[Placeholder tag="listnum"]); });

© 2014 IBM Corporation Page 19IBM Collaboration Solutions -- Digital Experience Enablement Series Updating the Script to reference the WCM Menu Component var map; function initialize() { var mapOptions = { zoom: 4, center: new google.maps.LatLng(-15.798, -47.866), mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); } [Component name="YourWCMLib/Stadium Google Map Marks List"] google.maps.event.addDomListener(window, 'load', initialize);

© 2014 IBM Corporation Page 20IBM Collaboration Solutions -- Digital Experience Enablement Series Conclusion – Script Portlet • It is an easy way to create portlet leveraging Script Skills; • It enables to consume an external service and use any javascript UI framework; • You can mix Script with WCM components in a very easy way; • You can take advantage of WCM benefits (e.g.: workflow, version, history, etc).

© 2014 IBM Corporation Page 21IBM Collaboration Solutions -- Digital Experience Enablement Series * Add comments in the video with questions, suggestions and feedback. As soon as possible we will try to answer it.

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

EXAMPLE PRESENTATION SCRIPT The following is an ...

EXAMPLE PRESENTATION SCRIPT ... presentation. (Slide 1) Hi, ... I went to purchase my first car this past winter,
Read more

Introduction to Script Portlet using AngularJS | Prolifics

... to give an introduction to the NEW Script Portlet using ... Portlet”. 7. Great, we finished our first ... Script Portlet Presentation: ...
Read more

Presentation Software | Online Presentation Tools | Prezi

Welcome to Prezi, the presentation software that uses motion, zoom, ... Creation, presentation, and analytics tools for sales and marketing teams.
Read more

Step Brothers: Prestige Worldwide Presentation - YouTube

... like and favorite and check out my other videos! ... Prestige Worldwide Presentation ... Step Brothers: Prestige Worldwide Presentation ...
Read more

How to Do a Presentation in Class: 10 Steps (with Pictures)

How to Do a Presentation in ... not your script. Your presentation should include much more than you ... My first class assignment is a presentation, ...
Read more

presentations skills - BusinessBalls

I first heard a speaker called Michelle Ray use ... cartoons and video ... creating and giving presentations creating presentations - step ...
Read more

Learning Web Experience Factory - IBM developerWorks

Social business wiki for IBM Web Experience Factory ... as the first step in ... the WebSphere Portlet Factory Designer or using ANT scripts. ...
Read more

BBC - Script Library - Writers Room

Script Library. Search by: Read BBC ... Series 1 Episode 1. Read this script from the BBC TV Drama archive. TV. Atching Tan. Read these scripts from the ...
Read more

YouTube

Enjoy the videos and music you love, upload original content, and share it all with friends, family, and the world on YouTube. ... FIRST Look | Aamir Khan ...
Read more