Portail : WebSphere Portlet Factory RIA et Web 2.0 autour de WebSphere Portal

Transcription

1 LOT02P5 Portail : WebSphere Portlet Factory RIA et Web 2.0 autour de WebSphere Portal Arjen Moermans arjen.moermans@nl.ibm.com IT Specialist Lotus Techworks SWIOT 2009 IBM Corporation

2 Legal Disclaimer The information on the new product is intended to outline our general product direction and it should not be relied on in making a purchasing decision. The information on the new product is for informational purposes only and may not be incorporated into any contract. The information on the new product is not a commitment, promise, or legal obligation to deliver any material, code or functionality. The development, release, and timing of any features or functionality described for our products remains at our sole discretion. 2 2

3 Agenda Web 2.0, AJAX and Rich Internet Applications Introduction to WebSphere Portlet Factory WebSphere Portlet Factory and AJAX What s new in WebSphere Portlet Factory Demo 3

4 Agenda Web 2.0, AJAX and Rich Internet Applications Introduction to WebSphere Portlet Factory WebSphere Portlet Factory and AJAX What s new in WebSphere Portlet Factory Demo 4

5 The three patterns driving Web 2.0 Service, not software Software as a SERVICE COMMUNITY mechanisms Users add value Recommendations User-driven adoption Value on demand Web 2.0 Social networking features Tagging Low cost of entry User comments Public infrastructure Community rights management SIMPLE user interface and data services Easy to use, easy to remix Responsive UIs (RIA, AJAX) Feeds (Atom, RSS) Simple extensions Mashups (REST APIs) 5

6 Definitions of AJAX AJAX stands for Asynchronous JavaScript And XML AJAX is not a new programming language, but a new way to use existing standards and mechanisms With AJAX you can create better, faster, and more user-friendly web applications Supported in most modern browsers 6

7 Several Commonly Used Technologies Underlying Web 2.0 XML extensible Markup Language Textual Data Format Can be used for the representation of arbitrary data structures JSON JavaScript Object Notation Lightweight Data-interchange format {name-value pair, ordered list} Frequently used in AJAX applications; alternative to XML in representing an object REST Representational State Transfer Often used for data feeds Centered around operations on named resources (URI) Use HTTP Methods {POST, GET, PUT, DELETE} to provide CRUD operations Feeds XML formatted data usually retrieved over HTTP(S) Standards: RSS (read-only) ATOM (CRUD) 7

8 Several Commonly Used Technologies Underlying Web 2.0 AJAX Asynchronous JavaScript and XML Related technologies to create so called rich internet applications (RIA) Allows for creation of a rich user interface Cloud Dynamically scalable and often virtualised resources provided as a service over the Internet Software as a Service (SaaS) Platform as a Service (PaaS) Infrastructure as a Service (IaaS) Mashup Web page or application that combines data or functionality from two or more external sources to create a new service iwidget Mashable User Interface component Supports wiring (messaging) Defined using XML Open standard for creating widgets to be used in Mashups 8

9 For Web Developers there is a lot to learn 9

10 Traditional web application Client User interacts with page, triggers action User interaction Browser replaces entire page HTTP request HTTP response Server Request processed, full page HTML generated Time 10

11 AJAX-based Web Application User actions in the browser cause JavaScript to execute Script communicates directly with the server XmlHttpRequest or hidden IFRAME Server replies Data: text, JSON, XML, etc. HTML fragment JavaScript in the page interprets this reply and uses it to update one or more page areas Benefits Faster response time No flicker Potentially higher performance due to smaller pieces of data being transferred between server and client Dynamic W idgets provide Desktop-like look and feel 11

12 AJAX-based application (RIA) Client User interacts with page, triggers action User interaction JavaScript Script invoked to handle request Widget Part of page is refreshed based on new data/html HTTP request HTTP response Server Request processed, data or HTML fragment generated Time 12

13 The Dojo Toolkit Open source JavaScript toolkit Designed to ease the rapid development of JavaScript- or Ajax-based applications Includes support for: W idgets (spinners, sliders, popups, menus,.) Drag and drop support Animations Asynchronous communication Client-side data storage and more Works cross-browser Has much industry backing Strategic technology for IBM 13

14 Agenda Web 2.0, AJAX and Rich Internet Applications Introduction to WebSphere Portlet Factory WebSphere Portlet Factory and AJAX What s new in WebSphere Portlet Factory Demo 14

15 Remember this? For Web Developers there is a lot to learn IBM WebSphere Portlet Factory coming to the rescue 15

16 Rapid Application Development for WebSphere Portal and Application Server and Lotus Mashups IBM WebSphere Portlet Factory is a portlet and web application creation environment that simplifies & accelerates the development, deployment, maintenance and reuse of custom SOA-based applications including SAP, Domino, PeopleSoft, Siebel and Web Service Servlets, Portlets and iwidgets WebSphere Portlet Factory is included with WebSphere Portal Server WebSphere Portlet Factory provides rapid application development and integration to existing applications, data & other IT assets for custom Servlet, Portlet and iwidget creation - reducing the complexity of J2EE development and speeding WebSphere Portal deployments 16

17 WebSphere Portlet Factory key features Plug-in to Eclipse & Rational Application Developer Multi-page complex custom portlets/ applications without coding Integration capabilities (SAP, Domino, PeopleSoft, Siebel, Web Services, Databases, Portal Content Repository) Service-oriented development (SOA) Support for Portal features such as portlet communication, business user configuration, auto-deploy, single sign-on Dynamic profiling capability, to create multiple variations from a single source model These are all built on Portlet Factory s software automation technology 17

18 WebSphere Portlet Factory key concepts Builder An adaptive, wizard-like component that implements a specific design pattern and iteratively generates Java, XML, and JSP Profile A set of parameters that vary Builder inputs to dynamically generate unique versions of the portlet Model A container of Builders 18

19 Agenda Web 2.0, AJAX and Rich Internet Applications Introduction to WebSphere Portlet Factory WebSphere Portlet Factory and AJAX What s new in WebSphere Portlet Factory Demo 19

20 Goals of AJAX support in Portlet Factory Enable creation of more interactive applications Partial-page refresh Rich widgets Client-side event handling Use Portlet Factory s automation to make complex AJAX techniques simple Builders can generate the necessary client-side and server-side elements Work with existing Portlet Factory builders and functionality Leverage existing server platforms W ebsphere Portal (6.0.x, 6.1.x) W ebsphere Application Server (6.0.x, 6.1.x) Tomcat 5.5.x (for development) 20

21 Portlet Factory AJAX architecture Many AJAX features require programmatic access to standalone data or HTML (REST) Just the data -- no surrounding portal HTML Some uses Partial page refresh XML data streamed to custom AJAX widgets or JavaScript code Pop-up windows Downloads of other file types such as computed images 21

22 Portal and AJAX Servlet Browser Full page request goes to portal on first page load Partial-page requests use AJAX servlet via a backchannel URL WebSphere Portal Portlet Factory WAR Portlet AJAX Servlet 22

23 AJAX servlet and security All requests to the AJAX servlet must come in the same user session that generated the URL Back-channel URLs contain a pseudo-random key; the actual action is found by looking up that key in a session-resident map Back-channel URLs are not bookmarkable 23

24 REST services Creating REST Services Easily create REST services that can be called by any client or server application Any Portlet Factory method, such as a service that accesses back end data from an integration builder, can be exposed as a REST service Consuming REST Services REST Service Call builder Supports RSS and ATOM Get, Put, Post and Delete Support 24

25 Partial-page refresh AJAX Region builder: Causes all actions within a specified area to refresh only within that area Can also be used for entire page or entire model (useful when model is contained in Portal or in another page using Model Container) Post-Action Behavior inputs of page action builders (Link, Button, HTML Event Action, Image Button) This tells a specific action which part of the page to refresh 25

26 Partial-page refresh using client events Client Event support enables cross-portlet client-side interaction Enables cross-portlet communication with partial page refresh Allows multiple locations to be updated from one event Leverages existing Portlet Factory event support Event Declaration builder specifies where to deliver events Server only, client only, or both server and client Client Event Handler builder adds listen support Page action builder that registers a handler for a specified client event 26

27 Agenda Web 2.0, AJAX and Rich Internet Applications Introduction to WebSphere Portlet Factory WebSphere Portlet Factory and AJAX What s coming in WebSphere Portlet Factory Demo 27

28 Create Sophisticated Web 2.0 Style User Interfaces Easily deliver polished, nuanced User Interfaces with depth and complexity including rounded corners and drop shadows Create UIs with Rounded Corners and Drop Shadows 28

29 Generate Compelling User Interfaces Out-Of-The-Box Delivers exceptional web experiences by providing compelling generated User Interfaces out-of-thebox Shows Current Records Display vs Total Records Improved Sort Column Indicator Click to Navigate to Specific Page Click to Navigate to Next or Previous Page Improved Button Appearance Click to Display Subset or All Records Enter to Navigate to Specific Page 29

30 Rapidly Modify Application Look and Feel Enables rapid modification of application look and feel from a centralized theme for the entire application or specific models Theme defines Style Sheets, HTML templates, base pages etc. used to generate application User Interface Ships With New Enterprise Theme* Click to Enable Style Applied Includes Updated Support for Page Tabs and Paging Links/Buttons 30 * Based on IBM OneUI Initiative

31 Deliver Exceptional User Interfaces with Dojo Widgets Easily create forms with advanced Dojo User Interface widgets including pickers, validators, formatters, spinners and drop down buttons Highlights Selected Form Element Click to Display Options Click to Launch Date Picker Click to Launch Time Picker Click to Adjust Numeric Values Formats Input as Currency, Numbers, Dates and Times Easily Add Any Dojo Widget to Create Even More Advanced UIs Create Custom Validators using Regular Expressions Highlights Validation Errors as User Types Addresses, Dates, Times and Numbers 31

32 Increase User Interface Interactivity Using Visual Dojo Animation Effects Create highly interactive, visually stunning user interfaces by adding Dojo animations to application functions Supported animations include: Wipe in/out Fade in/out Highlight Animate Click to Fire Animation Fade User Interface Create Custom Animations and Chain Animations Together for Even More Visually Stunning Effects 32 Wipe User Interface

33 Dynamically Provide User Feedback with Dojo Progress Indicators Improve user experience and maintain user focus by indicating progress of application functions Supported Dojo indicators include: Progress bar Animated spinner Text only Specify Custom Images to Create Advanced Progress Indicators ANIMATED SPINNER PROGRESS BAR POPUP (MODAL) ANIMATED SPINNER 33

34 Simplify Display of Complex, Hierarchical Data Using a Dojo Tree Organize the display of hierarchical data using a dynamic Dojo tree with customizable icons and labels Display Custom Icons Click to Expand/ Collapse Tree Display Custom Labels Click to Fire Event 34

35 Create and Display Richly Formatted Text Using a Dojo Rich Text Editor Apply advanced formatting to text input including font style and effects, numbered and bullet lists and embedded links and images Apply Advanced Formatting by Clicking Icons on Toolbar Edit Text Like Office Productivity Tools 35

36 Interactively Capture User Input Using Dojo Popup Dialog Boxes Popup Dojo dialog boxes and prompt the user for input, while disabling the triggering application Click to Launch Popup Dialog Popup Launches Modally Blocking Access to Triggering Application Adds Input to Triggering Application Prompts User for Input 36

37 Return Search Results in Real-Time with Dojo Type-Ahead Search Improved type ahead search functionality generates tabular results user interface automatically Enter Search Criteria Displays Results Matching Criteria in Real-Time Automatically Generates Search Results UI Create a Custom Results UI for Advanced Layouts 37

38 Display Tabular Data in a Feature-Rich Dojo Grid Automatically provides column sorting and resizing, alternate row shading and event support Automatically Enables Click to Sort Columns Drag to Change Column Display Order or Width Double Click to Fire Application Event Automatically Applies Alternate Row Shading Modify Grid Content with Advanced Formatting (i.e. add links, date/number formatting etc.) 38

39 Develop Applications Using Latest IDEs Provides extensive updates for IDE support including: Eclipse IBM Rational Application Developer IBM Rational Software Architect IBM WebSphere Integration Developer

40 Deploy Applications to the Latest Platforms Running On-Premise or in the Cloud Provides extensive updates for IBM platform support including: IBM WebSphere Portal Server, Enable and Extend IBM WebSphere Portal Express IBM Mashup Center 2.0 IBM WebSphere Application Server 7.0.x IBM WebSphere Application Server Community Edition

41 Why WebSphere Portlet Factory for Web 2.0? Rapidly create AJAX portlets that support features such as drag & drop across portlets, in-line editing, partial page refreshing Leverage existing investments Seamlessly deploy rich AJAX portlets on WebSphere Portal and WebSphere Application Server, versions 5.1 and above Highly productive tooling shields developers from the complexities of Web 2.0. technologies 41

42 Agenda Web 2.0, AJAX and Rich Internet Applications Introduction to WebSphere Portlet Factory WebSphere Portlet Factory and AJAX What s new in WebSphere Portlet Factory Demo 42

43 Demo 43

44 For more information WebSphere Portlet Factory Wiki Portlet Factory product documentation (has samples and overview documentation) proddoc.html developerworks forums (Portlet Factory forums are quite active) Portlet Factory product support Portlet Factory product information 44

45 IBM Corporation All Rights Reserved. The workshops, sessions and materials have been prepared by IBM or the session speakers and reflect their own views. They are provided for informational purposes only, and are neither intended to, nor shall have the effect of being, legal or other guidance or advice to any participant. While efforts were made to verify the completeness and accuracy of the information contained in this presentation, it is provided AS IS without warranty of any kind, express or implied. IBM shall not be responsible for any damages arising out of the use of, or otherwise related to, this presentation or any other materials. Nothing contained in this presentation is intended to, nor shall have the effect of, creating any warranties or representations from IBM or its suppliers or licensors, or altering the terms and conditions of the applicable license agreement governing the use of IBM software. References in this presentation to IBM products, programs, or services do not imply that they will be available in all countries in which IBM operates. Product release dates and/or capabilities referenced in this presentation may change at any time at IBM s sole discretion based on market opportunities or other factors, and are not intended to be a commitment to future product or feature availability in any way. Nothing contained in these materials is intended to, nor shall have the effect of, stating or implying that any activities undertaken by you will result in any specific sales, revenue growth or other results. 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. All customer examples described are presented as illustrations of how those customers have used IBM products and the results they may have achieved. Actual environmental costs and performance characteristics may vary by customer. The following are trademarks of the International Business Machines Corporation in the United States and/or other countries. For a complete list of IBM trademarks, see IBM, the IBM logo, Lotus, Rational, and WebSphere. Java and all Java-based trademarks are trademarks of Sun Microsystems, Inc. in the United States, other countries, or both. Other company, product, or service names may be trademarks or service marks of others. 45

46 Backup Slides 46

47 Ajax-related features of Portlet Factory Partial-page refresh, within or across portlets Drag/drop Inline editing Tooltips Type-ahead Timed action Hover highlighting JSON (JavaScript Object Notation) REST (Representational State Transfer) service support 47

48 Dojo Extension Feature Set Drag/Drop Adds drag and drop capabilities to pages (within or across models) Dojo Inline Edit Adds editing capabilities to a field (click to initiate edit mode) Dojo Tooltip Displays a popup text box when you mouse over a target page area (simple caption string, or an entire page) Dojo Enable Adds Dojo support to a page in a model in order to manually add Dojo functionality 48

49 Type-ahead AJAX Type-Ahead builder can be applied to any text input field The list of choices for the drop-down can come from any XML in the model or from a Lookup Table The list of choices can be handled in two ways: Generate a single list and use automatic patternmatching as the user types Generate lists of choices as the user types, using custom code that looks at what the user has typed so far 49

50 Direct access to data or pages Many AJAX builders use the standalone data access of Portlet Factory under the covers Custom JavaScript code can also access standalone data For partial refresh in client code For client code access to data, e.g. XML Use webappaccess.getbackchannelactionurl() method Provides direct access to any action in Portlet Factory application 50

51 Using JSON JavaScript Object Notation Data interchange format commonly used in AJAX applications Can be directly evaluated as a JavaScript object Convenient format for JavaScript code no need to parse XML, etc. XML / JavaScript Converter generates JSON from any XML data in application 51

52 Some XML and corresponding JSON <EmployeeDetails> <EMPNO>000070</EMPNO> <FIRSTNME>EVA</FIRSTNME> <MIDINIT>D</MIDINIT> <LASTNAME>PULASKI</LASTNAME> <WORKDEPT>D21</WORKDEPT> <PHONENO>7831</PHONENO> <HIREDATE> </HIREDATE> <JOB>MANAGER </JOB> <EDLEVEL>16</EDLEVEL> <SEX>F</SEX> <BIRTHDATE> </BIRTHDATE> <SALARY> </SALARY> <BONUS>750.00</BONUS> <COMM> </COMM> </EmployeeDetails> { } "EmployeeDetails" : { "BIRTHDATE" : " ", "HIREDATE" : " ", "PHONENO" : "6789", "MIDINIT" : "S", "LASTNAME" : "GEYER", "EDLEVEL" : "16", "SALARY" : " ", "FIRSTNME" : "JOHN", "SEX" : "M", "BONUS" : " ", "COMM" : " ", "EMPNO" : "000050", "JOB" : "MANAGER ", "WORKDEPT" : "E01" } 52