2010 Exceptional Web Experience

Size: px

Start display at page:

Download "2010 Exceptional Web Experience"

Ethelbert Lamb
5 years ago
Views:

1 2010 Exceptional Web Experience Session Code: TECH-D07 Session Title: What's New In IBM WebSphere Portlet Factory Jonathan Booth, Senior Architect, WebSphere Portlet Factory, IBM Chicago, Illinois 2010 IBM Corporation

2 What's New In IBM WebSphere Portlet Factory Portlet Factory overview Build complete applications faster than ever Deliver an exceptional web experience with Dojo and rich UI features Build applications easily using visual design and layout features Deliver to multiple devices including smartphones and tablets More new features Q&A 2

3 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. 3

4 What's New In IBM WebSphere Portlet Factory Portlet Factory overview Build complete applications faster than ever Deliver an exceptional web experience with Dojo and rich UI features Build applications easily using visual design and layout features Deliver to multiple devices including smartphones and tablets More new features Q&A 4

more) Automated support for service-oriented development Dynamic profiling capability, to create multiple variations from a

5 Key Portlet Factory features Rapid development of portlets and web applications with rich Web 2.0 capabilities Comprehensive integration capabilities (SAP, Domino, relational DB, web/rest services, PeopleSoft, Siebel, and more) Automated support for service-oriented development Dynamic profiling capability, to create multiple variations from a single source model Support for multiple deployment platforms: WebSphere Portal WebSphere Application Server (servlet or portlet) IBM MashupCenter (widget) 5

Portlet Factory software automation framework Generates applications without writing code Uses

updated with new standards and technology, while preserving compatibility for existing customer

libraries Portlet Factory generates the code for you Has been proven in the market for several

6 Portlet Factory software automation framework Generates applications without writing code Uses a model-based development paradigm based on automation of design patterns Is continually updated with new standards and technology, while preserving compatibility for existing customer assets As new technologies such as Dojo are added, you don t have to learn new tools and libraries Portlet Factory generates the code for you Has been proven in the market for several years and deployed in critical applications by many customers Builders Application Model Libraries and code 6

7 What's New In IBM WebSphere Portlet Factory Portlet Factory overview Build complete applications faster than ever Deliver an exceptional web experience with Dojo and rich UI features Build applications easily using visual design and layout features Deliver to multiple devices including smartphones and tablets More new features Q&A 7

8 Build complete applications faster than ever New builders and wizards automate the creation of complete CRUD (Create, Read, Update, Delete) applications Get started quickly, then customize iteratively New builders New wizards Demo: Quickly build a DB CRUD application 8

Building a user interface with Data Services UI builder List, Search Results Data

Filter Uses new Data Service metadata that defines logical operations Details

Domino builders automatically generate metadata For other data sources such as W eb/

9 Building a user interface with Data Services UI builder List, Search Results Data Services UI builder generates the complete user interface for a CRUD application List Filter Uses new Data Service metadata that defines logical operations Details Retrieve List, Retrieve One, Update, Search, Create, Delete Update, Create SQL and Domino builders automatically generate metadata For other data sources such as W eb/ REST services, you can define logical operations using the Service Definition builder Search Query 9

inputs and results List view that fires an event for details Details view that receives an event List portlet

10 User interface patterns supported by Data Services UI Data Services UI builder can automate a number of UI design patterns: List view with optional Details, Update, Create, and Delete Optional filter inputs Search inputs and results List view that fires an event for details Details view that receives an event List portlet fires event Details portlet receives event Demo: Building list and details portlets using events for communication 10

11 Create applications with new database tables for rapid prototyping SQL Table Create builder creates a new database table with specified fields and implements complete CRUD service provider functionality Generate and populate relational database tables for creating new applications that don't rely on existing data Specify table name, column names, data types and primary key Optionally, provide sample data to define columns and load table data Supports rapid prototyping with database storage, without requiring any separate tools to create database tables Supports sharing application code that uses database tables, without requiring any database setup Enables auto-creation of application server data source for Cloudscape databases Demo: Create a new Contacts database 11

Control field UI and behavior automatically with Data Field Settings From a single Data Field Settings builder, you can easily control the appearance and behavior of all the fields in an

control labels, visibility, column sorting, validation, field type (drop-down, checkbox, rich text editor, date picker, etc.

12 Control field UI and behavior automatically with Data Field Settings From a single Data Field Settings builder, you can easily control the appearance and behavior of all the fields in an application Automatically reference a shared library of Rich Data Definitions A Dojo library is provided, and libraries can be customized to meet your standards For each field, you can control labels, visibility, column sorting, validation, field type (drop-down, checkbox, rich text editor, date picker, etc.), and more Generated page Data Field Settings Builder Rich Data Definition Shared Library Demo: Using Data Field Settings for control of fields Date (format, picker, validate) Currency (format, validate) US States (select, lookup) Rich Text (edit control) 12

13 What's New In IBM WebSphere Portlet Factory Portlet Factory overview Build complete applications faster than ever Deliver an exceptional web experience with Dojo and rich UI features Build applications easily using visual design and layout features Deliver to multiple devices including smartphones and tablets More new features Q&A 13

14 Deliver an exceptional web experience with Dojo and rich UI features A rich set of Dojo builders is available, to easily build compelling, highly interactive applications Smart refresh feature enables partial-page refresh automatically for a project Enhanced table features provide a rich interactive interface for tabular data Drag/drop columns in browser to reorder and resize Improved sorting user interface In-line editing, to update values in place with click-to-edit Enhanced UI themes provide centralized control over look and feel IBM ILOG jviews charting engine provides a comprehensive suite of charting features Demo: Sample application highlighting Dojo and rich UI features Includes bar, bubble, dial, line, pie, radar, scatter, and step charts 14

15 Dojo builders Dojo builders can be dragged from palette or applied via builder picker Dojo widgets can also be applied automatically to forms using Data Field Settings and Rich Data Definition Accordion Pane Animation Border Container Checkbox Data Grid Data Store Date/Time Picker Drag Source / Drop Target Drop Down Button Enhanced Table Modifier Form Dialog Hover Tab Container Inline Edit Light Box Page Element Progress Indicator Radio Button Group Rich Text Editor Select Slider Tab Container Title Pane Tooltip Tree 15 Demo: Using Dojo builders

16 Enhanced table features Drag and resize columns Enabled with Data Services UI or Dojo Enhanced Table Modifier In-line edit In-line edit of single or multiple fields Enabled with Dojo Inline Edit Drag and resize table columns from browser 16

Controlling overall style and look with themes Themes allow you to centrally

refresh and page loading progress indicators Page layouts Table and form layout

applied for a model, or automatically for a whole project You can also override

17 Controlling overall style and look with themes Themes allow you to centrally control and modify the look and feel of an entire application: CSS styles Smart refresh and page loading progress indicators Page layouts Table and form layout rules (HTML templates) Table highlighting and paging controls A theme can be applied for a model, or automatically for a whole project You can also override theme elements at any level with the Theme builder Blue theme Rounded theme Enterprise theme 17

18 Create Advanced Visualizations with IBM ILOG JViews Provides a comprehensive, robust suite of charting components for visualizing data Includes bar, bubble, dial, line, pie, radar, scatter, and step charts ILOG entitled for evaluation use only, license purchase required for production deployment. Upgrade to WebSphere Dashboard Framework to expand ILOG entitlement. 18

19 What's New In IBM WebSphere Portlet Factory Portlet Factory overview Build complete applications faster than ever Deliver an exceptional web experience with Dojo and rich UI features Build applications easily using visual design and layout features Deliver to multiple devices including smartphones and tablets More new features Q&A 19

Build applications easily using visual design and layout features Use drag and drop and rightclick menus from Design view Graphical design and direct editing features are enhanced in each Portlet

20 Build applications easily using visual design and layout features Use drag and drop and rightclick menus from Design view Graphical design and direct editing features are enhanced in each Portlet Factory release These features work seamlessly with Portlet Factory's builder automation New direct editing features in Design view: Merge columns Create groups and set labels Select multiple fields to set formatting, show/hide, move, group Properties view for quick control of validation, formatting, labels, and sorting Demo: Using direct editing features in Design view 20

21 Using customized page layouts with HTML authoring tools For a complete customized layout, you can use HTML and CSS created with your favorite HTML authoring tool Two general approaches for using custom HTML: Data-driven approach: start with data services in Portlet Factory, then use Export HTML for Data Layout for the area you want to customize UI-driven approach: start with visual design and wire frames, then use Portlet Factory to add transactional and dynamic elements Customer example: large global financial services enterprise Touchscreen application deployed at bank branch locations Detailed screens were created by outside design firm, and HTML/CSS wireframes were built (UI-driven approach) Portlet Factory models/builders import the HTML and generate the complete application code dynamically Latest HTML/CSS is automatically incorporated on every iteration 21

22 Retail banking kiosk transaction screen shots 22

23 Retail banking kiosk transaction screen shots 23

24 What's New In IBM WebSphere Portlet Factory Portlet Factory overview Build complete applications faster than ever Deliver an exceptional web experience with Dojo and rich UI features Build applications easily using visual design and layout features Deliver to multiple devices including smartphones and tablets More new features Q&A 24

Deliver to multiple devices including smartphones and tablets Single Application Renders in Smartphones or Desktop

Javascript Enables rapid creation of a single application capable of rendering in a browser, smartphone, or tablet

tool for desktop and mobile application development iphone Desktop Brow ser Provides ability to optimize user

25 Deliver to multiple devices including smartphones and tablets Single Application Renders in Smartphones or Desktop Portlet Factory can be used to build applications for any smartphone or other device that supports HTML and Javascript Enables rapid creation of a single application capable of rendering in a browser, smartphone, or tablet device Customers can access applications via their preferred channel IT organization can utilize a single development tool for desktop and mobile application development iphone Desktop Brow ser Provides ability to optimize user experience based on target device, from a single code base Reduces maintenance costs Android Demo: Sample smartphoneenabled application 25

Building mobile and multi-channel applications Portlet Factory's dynamic profiling capability enables multi-channel

optimize the UI and layout for different device types Examples of UI that might be tailored for different devices: Des

lists Data presentation, such as how many fields are displayed, using list vs.

26 Building mobile and multi-channel applications Portlet Factory's dynamic profiling capability enables multi-channel rendering from a single code base Sm artphone m ultiple sm all screens Any builders that generate UI can be profiled to optimize the UI and layout for different device types Examples of UI that might be tailored for different devices: Des ktop Brow ser single screen Navigation style, such as horizontal tabs vs. lists Data presentation, such as how many fields are displayed, using list vs. table, showing details on separate screens Data aggregation, such as one large screen with several groups vs. navigation to multiple screens Look and feel (colors, fonts, etc.) Demo: Building a multichannel application 26

27 Multi-channel execution architecture Client devices WebSphere Portal Mobile Navigation UI (e.g., vertical lists) Portlet Factory WAR Mobile Profile Smartphone Mobile enabled Portal Theme Device Portlet Profile Factory Selection Engine Handler Desktop Profile Desktop browser Desktop Navigation UI (e.g., horizontal tabs) 27 Source Model Generated mobile application code and pages Generated desktop application code and pages Shared Services and Data Access

28 What's New In IBM WebSphere Portlet Factory Portlet Factory overview Build complete applications faster than ever Deliver an exceptional web experience with Dojo and rich UI features Build applications easily using visual design and layout features Deliver to multiple devices including smartphones and tablets More new features Q&A 28

29 And there's more... Deployment Simplified remote deployment support and automatic synchronization with remote servers Deploy on-premises or in the cloud Performance and scalability Reduced WAR size (41% smaller on latest Portal version) Enhanced memory management for paging large data sets New options for discarding and caching service result data Web and REST services Web Service Multiple Operations builder enhancements for working with large WSDL files Option to automatically generate JSON REST services from service providers 29

30 And still more... Internationalization and multi-language support Support for changing language without requiring logout Spreadsheet import and download Support for Lotus Symphony in addition to Excel New wiki samples and resources Interactive demos and learning videos highlighting key product features, techniques and tips Rich UI and Dojo samples Multi-page form sample Smartphone sample Siebel and PeopleSoft samples 30

31 What's New In IBM WebSphere Portlet Factory Portlet Factory overview Build complete applications faster than ever Deliver an exceptional web experience with Dojo and rich UI features Build applications easily using visual design and layout features Deliver to multiple devices including smartphones and tablets More new features Q&A 31

32 For More Information Portlet Factory wiki Includes numerous samples and articles, best practices documents, and links to other resources Portlet Factory forums on developerworks These are very active and are monitored closely by the Portlet Factory team WebSphere Portal Information Center WebSphere Portal Business Solutions Catalog (on Lotus Greenhouse) WebSphere and Lotus Web Content Management Portal Open Beta 32

33 We Value Your Feedback! Please complete the session survey for this session: TECH-D07 Session Speakers: Jonathan Booth, IBM 33

34 IBM Corporation All Rights Reserved. The information contained in this publication is provided for informational purposes only. While efforts were made to verify the completeness and accuracy of the information contained in this publication, it is provided AS IS without warranty of any kind, express or implied. In addition, this information is based on IBM s current product plans and strategy, which are subject to change by IBM without notice. IBM shall not be responsible for any damages arising out of the use of, or otherwise related to, this publication or any other materials. Nothing contained in this publication 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. 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. IBM, the IBM logo, Lotus, Lotus Notes, Notes, Domino, Quickr, Sametime, WebSphere, UC2, PartnerWorld are trademarks of International Business Machines Corporation in the United States, other countries, or both. Unyte is a trademark of WebDialogs, Inc., in the United States, other countries, or both. Java and all Java-based trademarks are trademarks of Sun Microsystems, Inc. in the United States, other countries, or both. Microsoft and Windows are trademarks of Microsoft Corporation in the United States, other countries, or both. UNIX is a registered trademark of The Open Group in the United States and other countries. If you reference Linux in your presentation, please mark the first use and include the following; otherwise delete: Linux is a registered trademark of Linus Torvalds in the United States, other countries, or both. Other company, product, or service names may be trademarks or service marks of others. All references to Open Financial, Open Insurance, Juke Box. refer to a fictitious company and are used for illustration purposes only. 34

Application Integration with WebSphere Portal V7

Application Integration with WebSphere Portal V7 Rapid Portlet Development with WebSphere Portlet Factory IBM Innovation Center Dallas, TX 2010 IBM Corporation Objectives WebSphere Portal IBM Innovation