1. IBM Software Group © 2003 IBM Corporation Name Title Company IBM Application Development Ease-of-Use with JavaServer Faces (JSF) “Delivering applications faster, easier and with higher ROI“

2. IBM Software Group © 2003 IBM Corporation Name Title Company IBM Application Development Ease-of-Use  Executive Overview  “Delivering applications faster, easier and with higher ROI“

3. IBM Software Group © 2003 IBM Corporation 3 Application Development Challenges It takes too long to deliver applications “We need to Design, Develop and Deploy applications more quickly” J2EE is too complex “We need to leverage open standards, keep it simple and make it easy for Microsoft heritage developers to get on board” Integration is cost prohibitive “We need to integrate our people, processes and information using web services, databases and existing systems” VP Development Developer Architect

4. IBM Software Group © 2003 IBM Corporation 4 Developing Applications More Quickly Drag-n-drop development of J2EE applications (No Coding Required) Spreadsheet Control Tabbed Panels Web Service Graphing Controls Database Query

5. IBM Software Group © 2003 IBM Corporation 5 Simplifying J2EE Development Database development drag-n-drop ease-of-use Web Services development drag-n-drop ease-of-use Portals drag-n-drop ease-of-use

6. IBM Software Group © 2003 IBM Corporation 6 Integrating People, Processes and Information Model your business, simulate a process and assess cost savings Describe everything as a web service and integrate using workflow tools

7. IBM Software Group © 2003 IBM Corporation 7 Application Development Challenges Addressed It takes too long to deliver applications “We need to Design, Develop and Deploy applications more quickly” IBM’s new JavaServer Faces (JSF) tools accelerate development using a drag-n-drop approach (no coding required) J2EE is too complex “We need to leverage open standards, keep it simple and make it easy for Microsoft heritage developers to get on board” IBM’s new JSF tools make J2EE easier than.NET and very attractive to Microsoft heritage developers Integration is cost prohibitive “We need to integrate our people, processes and information using web services, databases and existing systems” IBM’s new JSF tools automate web services and database integration IBM’s business process integration and workflow tools save time VP Development Developer Architect

8. IBM Software Group © 2003 IBM Corporation Name Title Company IBM Application Development End-to-End Development  Development Manager Overview  “Delivering applications faster, easier and with higher ROI“

9. IBM Software Group © 2003 IBM Corporation 9 WebSphere Studio Integrating Multiple Roles and Development Tools into a single IDE

10. IBM Software Group © 2003 IBM Corporation 10 Web Presentation Servers Web Application Servers Directory and Security Servers Data Servers Integration Servers Transaction Servers Customers Partners Suppliers Employees Application s, Graphics, HTML, Applets XML, Web Services, Portlets, Servlets, Java Server Faces/Pages Services, EJBs & Process Flows Relatio nal Data Applications, Transactions and Processes Middleware Connectors Web Services: SOAP, WSDL, UDDI Edge Servers Application Modeling Web Site Development Java Development XML Web Services Development Portal Development Business Process Integration Cobol, PL/I 4GL Development Development Roles End-2-End Development

11. IBM Software Group © 2003 IBM Corporation 11 Analyst Architect Developer Tester Visually construct, hand code, and generate code Design, create, and execute tests Model, simulate and monitor business processes Model applications and data Model applications and data  Follow a common process  Track project status  Manage requirements  Follow a common process  Track project status  Manage requirements  Manage change and assets  Manage quality  Manage change and assets  Manage quality Project Manager Project Manager WebSphere Studio Supports Key Rational Roles

12. IBM Software Group © 2003 IBM Corporation 12 J2EE, Web Services, Portals, BI and beyond The Workbench Perspectives, Views and Editors Switch between roles and tooling easily Customize and minimize learning curves Bottom Line  The Workbench adjusts to fit you… not the other way around! Dynamic Development Automatic, Incremental Build across all artifacts Automatic J2EE hot-redeployment Bottom Line  Super-Fast Build/Change/Test Cycles! On Demand Code Smarts Contextual code assist & smart editors speed coding Wizards and builders facilitate open standards & best practices Bottom Line  Faster Low/High-Level coding & maintenance! WebSphere Studio Fundamentals that Accelerate Development

13. IBM Software Group © 2003 IBM Corporation 13 Core IDE infrastructure and Java development tools (JDT) Web App User Interface tools: Web Pages, Web Sites, Portlets, Struts and JavaServer Faces J2EE and EJB tools Web Services tools XML and XSL tools Relational Databases tools Testing, Debugging and Profiling tools Integrated Servers (J2EE App Servers) On-the-fly coding with Hot Method Replace J2EE dynamic build engine with incremental compile…while you type Plugin Extensibility: Coding, Modeling, Frameworks, Testing, Teaming, Best Practices, Patterns, IBM Server toolkits and beyond (>400 plugins) (http://www.eclipse.org/community/plugins.html)http://www.eclipse.org/community/plugins.html WebSphere Studio Top 10 List Eclipse WebSphere Studio “From J2EE to Web Services, WebSphere Studio has breadth and depth…”

14. IBM Software Group © 2003 IBM Corporation 14 Partial List of Studio/Eclipse Toolkit Plugins (>400 Plugins) IBM Plugins/Toolkits: Rational XDE Modeler, Testers, Profiling, etc. WebSphere Business Integration Adapters WebSphere Portal Toolkit WBI Message Broker Tools WBI Modeler and Monitor Host Integration Toolkit (HOD, HATs, etc.) WebSphere Commerce Toolkit WebSphere Portal Toolkit WebSphere Mobile Device Toolkits Voice Application, Multimodal Access Toolkits Tivoli Monitoring Resource Model Builder Toolkit DB2 Everyplace Toolkit DB2 Development Client Toolkit Lotus Domino Toolkit Other 3 rd Party Plugins: Eclipse Colorer for editing 100+ languages Visual Rules Instantiations CodePro Studio Visual SlickEdit Eclipse Visual Editor SWT Visual Builder (Rich Clients) JDK 1.5 Eclipse plugin RSS Reader (streaming XML) DBExplorer Versant OO DB enJin Versata Business Logic Designer Velocity Framework Editor Canoo Ultra Light Client Catalyst Systems Openmake Build Manager Exaltec J2EE Application Generator MMAEclipse Mathematica plugin PHPEclipse plugin JavaSpider Object Application Grapher Single Eclipse IDE  IBM Studio + Plugins (i.e. Rational, Portal, WBI, 3 rd parties…) Rational XDE & Server Toolkits WebSphere Studio Partner Tools & Middleware Rational XDE & Server Toolkits WebSphere Studio Partner Tools & Middleware

15. IBM Software Group © 2003 IBM Corporation 15 Rational XDE & Server Toolkits WebSphere Studio Partner Tools & Middleware RequisitePro XDE & Studio Studio & ClearCase ClearCase & ClearQuest ClearQuest & Project Console WBI Modeler Integration across/within tools (i.e. change requests) WebSphere Studio Eclipse Integration IBM Rational Tools by Discipline

16. IBM Software Group © 2003 IBM Corporation 16 technology Rational Development Disciplines SW (Project Console, ClearQuest, ClearCase, etc.) IBM Software Development Platform

17. IBM Software Group © 2003 IBM Corporation Name Title Company IBM Application Development JSF Ease-of-Use In Action  Developer/Architect Overview  “Delivering applications faster, easier and with higher ROI“

18. IBM Software Group © 2003 IBM Corporation 18 J2EE Web Development Programming Effort Automated by JSF Input  Process  Output Input Constructing web page forms, formatting, validation, etc. GUI widget richness Calling appropriate “Action” when button pressed, etc. Passing data to business logic Processing Integrating to web services, databases, backends, biz logic, etc. Maintaining user session and application state information MVC layering, page flow and business logic modularity Output Forwarding control to results screen/page Displaying data, GUI controls, formatting, etc.

19. IBM Software Group © 2003 IBM Corporation 19 JavaServer Faces (JSR 127) – What Does it Provide? Based on MVC design pattern Clean separation of Model, View, and Controller User Interface Component Model – Set of standard widgets Specification allows extending custom GUI components (i.e. DataTable, Graphing, Tree, Panel) User Interface components are decoupled from its rendering Allows for other technologies and pervasive devices (e.g. WML, etc) to be used Validation Framework allows server-side validation Server side management of User Interface, session and state info Event driven architecture Server-side rich user interface components respond to client events Actions organize and process business logic Navigation model manages page flow using JSP path aliases

20. IBM Software Group © 2003 IBM Corporation 20 JavaServer Faces – How it works ServerBrowser Client Request Response JSP Page With JSFServlet (Faces Servlet) JavaBeanAction/Event

21. IBM Software Group © 2003 IBM Corporation 21 Java Server Faces- How it works JSF Servlet (FacesServlet) JSP Page With UI Component Tree 3. Creates / instantiate tree 4. Apply changes from request 5. Process Validations 8. Invoke RenderKit 1. Request Page 9. Render Response (HTML) 2. Invoke 6. Apply Model Values 7. Run Events ServerClient

22. IBM Software Group © 2003 IBM Corporation 22 Java Server Faces Life Cycle

23. IBM Software Group © 2003 IBM Corporation 23 Application Developer V5.1.2 JSF Design Points Accelerate GUI, Web Services, Database, Portlet and MVC development Visual drag-n-drop development of UI, events, actions, page navigation, etc. Simplify J2EE development for non-Java programmers Enhance Web Application Development for J2EE experts Appeal to Microsoft developers (VB/Visual Studio.Net) Reduce development and deployment time and cost Standards based technologies JavaServer Faces - JSR 127 Service Data Objects - JSR 235 Portlets – JSR 168

24. IBM Software Group © 2003 IBM Corporation 24 JavaServer Faces Tools in WebSphere Studio PalettePalette PageDesignerPageDesigner EventPanelEventPanel Web Perspective AttributesAttributes Page Data ProjectNavigatorProjectNavigator

25. IBM Software Group © 2003 IBM Corporation 25 Agenda JSF in Action Web Services Creation and Consumption Database App CRUD and UI MVC Web App Rich Thin Clients Portlet Apps and Portal Integration

26. IBM Software Group © 2003 IBM Corporation 26 Creating New Web Services Generates all web services artifacts 1 1 Easily choose Java Class/EJB and methods to expose WSDL service definition file for chosen Class/EJB and methods Other infrastructure: Deployment descriptor, JAX/RPC request/response data definitions

27. IBM Software Group © 2003 IBM Corporation 27 Consuming Existing Web Services – Discover and Test Discovery tools use UDDI, a well known URL or a WSDL file 1 1 Web Services Explorer automates discovery and testing Launch separately or while building Faces JSPs Browse Web Service operations, request input parameters, response output Great general purpose unit testing environment

28. IBM Software Group © 2003 IBM Corporation 28 Consuming Existing Web Services – Calling From Application JSF Web Services Wizards Automate Construction 1 1 Creates web service proxy bean Creates Action method that calls proxy Creates input parameter bean and output results bean Drag-n-drop to create UI controls Binds input, output and action to UI controls

29. IBM Software Group © 2003 IBM Corporation 29 Web Services Ease-of-Use Examples External Web Services 1 1 Web Services Explorer Great for unit testing and experimenting Launched separately or while building a new Faces JSP Adding a Web Service to a project Proxy created that knows how to call the Web Service Input Parameters Bean Results Bean Action method created that uses the proxy bean Drag-n-drop is used to create the UI Once a Web Service is added to a project, any Faces JSP can use it Local Web Services 2 2 Easily explored using Web Services Explorer Easily added from local workspace

30. IBM Software Group © 2003 IBM Corporation 30 Agenda JSF in Action Web Services Creation and Consumption Database App CRUD and UI MVC Web App Rich Thin Clients Portlet Apps and Portal Integration

31. IBM Software Group © 2003 IBM Corporation 31 Creating Database Apps – Select “Relational Record List” Relational wizards automate Select queries 1 2 3 123 Connect to any relational database, select table(s) and columns graphically Construct query without knowledge of SQL, including input parameters and conditions Drag-n-drop to create UI controls for data display (DataTable) Binds input, output and action to UI controls Format data display for numbers, currency, dates, text, masks, etc.

32. IBM Software Group © 2003 IBM Corporation 32 Creating Database Apps – Insert, Update, Delete Rows “Relational Record” Relational wizards automate Update queries 1 2 3 123 Connect to any relational database, select table(s) and columns graphically Construct query without knowledge of SQL, including input parameters and conditions Drag-n-drop to create UI controls for data display (Form) Binds input, output and action to UI controls Format data input/output display for numbers, currency, dates, text, masks, etc. Validate input fields for length, numbers, text, etc.

33. IBM Software Group © 2003 IBM Corporation 33 Relational Data Ease-of-Use WebSphere/Service Data Objects (WDO/SDO) 1 2 3 123 Records and Record Lists abstract data access Build a query without knowledge of SQL, JDBC, etc. Select, Insert, Update, Delete Drag-n-drop tables and forms of data onto UI UI data display is automatically bound to Record/List queries Supports conditions, relationships, optimistic concurrency, etc. Easy to pass input parameters to queries Drill-down using hyperlinks Format display types like Currency, Decimal, String, Custom Masks, etc. Once created, Record and Record List queries can be re-used across the app/pages Drag-n-drop is granular and iterative…you can change your mind and not be limited by the style of a wizard Foreign Key relationships easy to navigate (leading to complex queries through an easy and intuitive process) Paging controls for automatic cursor control WebSphere Data Objects (WDO) are the first iteration of Service Data Objects (SDO) (JSR235)

34. IBM Software Group © 2003 IBM Corporation 34 What are WebSphere Data Objects (WDO)? Framework for simplifying and unifying the client programming model for accessing backend systems/data Automates construction of queries, results, data display, formatting, etc. A high-productivity solution for integrating data into Applications Relational databases available in WDO today EJBs, Domino, JCA, etc. (future) Supports common application patterns Optimistic concurrency Pagination (e.g. only retrieve 20 rows at a time) WebSphere Data Objects are consistent with the emerging standard: Service Data Objects (SDO) Joint IBM/BEA submission to the Java Community Process (JSR 235)

35. IBM Software Group © 2003 IBM Corporation 35 Service Data Objects The Problem Many different models and APIs for Data retrieval, Data representations, Meta- data retrieval, Meta-data representations, logic components No reasonable API available for “typed” XML data Lack of support for standard application patterns Optimistic concurrency, pagination of large data-sets, etc. Client Data Access APIs Data APIs Meta-Data APIs Data Access APIs Meta-Data Access APIs Client Mediator Data Access APIs Data APIs Meta-Data APIs Meta-Data Access APIs (Current Architectures) (SDO)

36. IBM Software Group © 2003 IBM Corporation 36 Service Data Objects SDO DataObject with XSD & EMF provide a single, standard API (& implementation) for data & meta-data that we can use in place of many other APIs Data is stored in a disconnected, source-independent format defined by the DataObject DataObjects are stored in a graph called a DataGraph Provides both dynamic loosely-typed and static strongly-typed interfaces to the data Remembers change history Data Mediator Service is responsible for filling graph of DataObjects from data source, updating data source from DataObject changes Data model (DataObject) Meta-data model Pluggable Data Mediator Client Data Access APIs Data APIs Meta-Data APIs Meta-Data Access APIs

37. IBM Software Group © 2003 IBM Corporation 37 Agenda JSF in Action Web Services Creation and Consumption Database App CRUD and UI MVC Web App Rich Thin Clients Portlet Apps and Portal Integration

38. IBM Software Group © 2003 IBM Corporation 38 JavaServer Faces Ease-of-Use 1 2 3 4 5 6 7 1234567 UI Components Standard HTML-like components Richer validation and formatting Extended rich components for graphing, trees, tabbed views, data tables, etc. Binding Data Automatically synchronizes input/output UI components with data (WebSvcs, DBs, Beans, etc.) Navigation Simple “GoToPage()” and indirect “Alias” approach Session and State Management Very simple, automatic and available at various levels of scope Page Data Makes integrating UI with Web Services, databases, JavaBeans intuitive and well organized Codebehind “PageCode” Files (One.java file for each.jsp) Event Driven nature eases thin and thick style of interaction Validation and Formatting provide rich capability and alleviate client side programming

39. IBM Software Group © 2003 IBM Corporation 39 Faces Client Components Included library of rich user interface controls for the Web Developer Easily develop rich interactive User Interfaces in Web Applications Extends JavaServer Faces, allowing a developer to quickly create highly interactive Web pages that run client-side Thin client: low maintenance (no installed client code to upgrade) More responsive web applications Reduced bandwidth (fewer round trips to the server) Components: Data grid, tabbed panel, rich text editor, input formatters, tree control, chart (bar/line/pie), client-side model object

40. IBM Software Group © 2003 IBM Corporation 40 Faces Client Components Tree Control Tabbed Panel ChartChart

41. IBM Software Group © 2003 IBM Corporation 41 Faces Client Component Features Client side infrastructure supporting Data Tables Web Services Event handling Manages data changes Sends updates to server NLV functions Leverage JavaScript / XML in the Browser Browser Runtime Macromedia Flash Plug-in JavaScript Grid Control Web Services Form Data Grid Table

42. IBM Software Group © 2003 IBM Corporation 42 Demonstration Agenda JSF in Action Web Services Creation and Consumption Database App CRUD and UI MVC Web App Rich Thin Clients Portlet Apps and Portal Integration

43. IBM Software Group © 2003 IBM Corporation 43 Portlet Ease-of-Use 1 2 12 Visual development uses the JSF styles of construction Portlet specific syntax and deployment descriptors are generated Click-2-Action and People Awareness drag-n-drop development Portal Server Test Environment is turnkey (Improved Portal Toolkit installation) Bottom line: Web Services, UI and MVC enhancements in JSF apply to portlets Portlet development is significantly enhanced and easier than ever before

44. IBM Software Group © 2003 IBM Corporation 44 Portlet Development JSF and Struts portlet creation by a wizard Click-to-Action People Awareness Drag & Drop Visual Portlet JSF editing in Page Designer

45. IBM Software Group © 2003 IBM Corporation 45 Demonstration Agenda JSF in Action Web Services Creation and Consumption Database App CRUD and UI MVC Web App Rich Thin Clients Portlet Apps and Portal Integration

46. IBM Software Group © 2003 IBM Corporation 46 J2EE Web Development Programming Effort Automated by JSF Input  Process  Output Input Constructing web page forms, formatting, validation, etc. GUI widget richness Calling appropriate “Action” when button pressed, etc. Passing data to business logic Processing Integrating to web services, databases, backends, biz logic, etc. Maintaining user session and application state information MVC layering, page flow and business logic modularity Output Forwarding control to results screen/page Displaying data, GUI controls, formatting, etc.

47. IBM Software Group © 2003 IBM Corporation 47 JSF In Action Summary WebSphere Studio 5.1.2 lays the foundation for taking Web, J2EE and Portal development to a new level of productivity WebSphere Studio 5.1.2 appeals to Web Developers J2EE is more powerful than.NET and JSF now makes it both easy and attractive to Microsoft heritage developers JSF Simplifies and enhances RAD development for both J2EE newbies and experts WebSphere Studio 5.1.2 appeals to Portal Developers Improved integration, visual portlet construction and JSF tools provide a comprehensive portlet development environment Bottom Line  Accelerates GUI, Web Services, Database, Portlet and MVC Web App development

48. IBM Software Group © 2003 IBM Corporation 48 Application Development Challenges Addressed It takes too long to deliver applications “We need to Design, Develop and Deploy applications more quickly” IBM’s new JavaServer Faces (JSF) tools accelerate development using a drag-n-drop approach (no coding required) J2EE is too complex “We need to leverage open standards, keep it simple and make it easy for Microsoft heritage developers to get on board” IBM’s new JSF tools make J2EE easier than.NET and very attractive to Microsoft heritage developers Integration is cost prohibitive “We need to integrate our people, processes and information using web services, databases and existing systems” IBM’s new JSF tools automate web services and database integration IBM’s business process integration and workflow tools save time VP Development Developer Architect

49. IBM Software Group © 2003 IBM Corporation 49 Resources ibm.com/developer (IBM developerWorks for technologies and products) ibm.com/developer/websphere (WebSphere Developers Domain) ibm.com/developer/rational (WebSphere Developers Domain) ibm.com/developer/ibm (All other product developer domains) www.redbooks.ibm.com (How To Books) ibm.com/software/ad (IBM App Dev Tools Homepage) ibm.com/websphere (WebSphere Family Homepage) WebSphereCentral.com (Presentations, references, tutorials, white papers, articles, links, etc.)

50. IBM Software Group © 2003 IBM Corporation 50 Backup Charts