Name Title Company

IBM Application Development Ease-of-Usewith JavaServer Faces (JSF) “Delivering applications faster, easier and with higher ROI“ Name Title Company

IBM Application Development Ease-of-Use Executive Overview “Delivering applications faster, easier and with higher ROI“ Name Title Company

Architect Developer 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

Developing Applications More Quickly • Drag-n-drop development of J2EE applications (No Coding Required) Spreadsheet Control Tabbed Panels Database Query Web Service Graphing Controls

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

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

Architect Developer 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

IBM Application Development Ease-of-Use Development Manager Overview “Delivering applications faster, easier and with higher ROI“ Name Title Company

Software development is a team sport “We need quality and speed!” CIO, IT Manager “So many APIs…how do I keep them under control?” Business Analysts VP Development Architect OperationsManager “Teamwork… We need good process and tools!” Developer Tester System Integrator Release Manager Project Manager “Development cycles takes too long” “Timelines…It’s never quick enough!”

Development Life Cycle Drives Multiple Roles Develop Iteratively Manage Requirements Manage Change Business Process Monitoring Business Process Modeling Analysis & Design Application Monitoringand Management Data Modeling Functional and Stress Testing Legacy Asset Reuse Visual Construction Application Integration Domino Development J2EE Development XML and Web Service Development C, C++ Development COBOL, PL/1, RPG Development Web Page and Site Development Portal Development Continuously Verify Quality ModelVisually Use Component Architectures

Multiple Roles Drive Multiple Tools Proliferation of Development Tools

WebSphere Studio Integrating Multiple Roles and Development Tools into a single IDE

Applications, Transactions and Processes Web Services: SOAP, WSDL, UDDI Middleware Connectors Relational Data Services, EJBs & Process Flows XML, Web Services, Portlets, Servlets, Java Server Faces/Pages Applications, Graphics, HTML, Applets Development Roles Web Site Development Java Development XML Web Services Development Portal Development Business Process Integration Cobol, PL/I 4GL Development Application Modeling End-2-End Development Directory and Security Servers Integration Servers TransactionServers Customers Partners Suppliers Employees Edge Servers Web Presentation Servers Web Application Servers DataServers

WebSphere Studio Supports Key Rational Roles Analyst Architect Developer Tester Model, simulateand monitor business processes Model applications and data Visually construct, hand code,and generate code Design, create, and execute tests • Follow a common process • Track project status • Manage requirements • Manage changeand assets • Manage quality Project Manager Rational Team Unifying Platform

Demos J2EE, Web Services, Portals, BI and beyond WebSphere Studio Fundamentals that Accelerate Development • 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! Perspectives Views Editors Hanoi Banking Code Assistance Web Services Databases UML

IBM Plug-ins and Toolkits for WebSphere Studio IBM WebSphere Studio • Java IDE (Eclipse IDE infrastructure) • Web (Designers, Struts Builders, JSF) • J2EE and EJB (Automates J2EE1.2/1.3 APIs) • Web Services (Create, consume, orchestrate) • XML/XSL (Build, generate, map, debug, etc.) • Database (Build and generate SQL and EJB apps) • Testing and Profiling • Integrated Servers (Auto hot redeploy) • J2EE dynamic build (Change code on-the-fly) Breadth: + J2EE and Web Services (model, build, test, team & deploy) • Portal (Portlet integrated development) • Host Integration (Enterprise modernization) • Business Process Integration (Model, Integrate, Conn, Monitor, Mgmt) Depth: • Rational • Portal and Pervasive • Business Integration • Commerce • DB2 • eServers • Business Components • Tivoli • Lotus • Voice • Host Access IBM WebSphere Studio “Extended” Family An open, comprehensive development environment for building on demand e-business applications Extend and customize with 100’s of 3rd party and open source tools Extend and customize with IBM eServer & IBM middleware tools A single, comprehensive development environment with unprecedented flexibility & extensibility Partner Tools & Middleware Rational XDE & Server Toolkits WebSphere Studio An open, industry-supported development platform

Partner Tools & Middleware Rational XDE & Server Toolkits WebSphere Studio The Eclipse Project • An open extensible tools platform • Includes base Java Development Tools (JDT) • Can plugin your own best-of-breed tools, into a single IDE • IBM contributed $40M software/R&D as initial Eclipse open source technology • 175+ Consortium Members • Growing Developer Community • Grassroots enthusiasm from developers • Over 18 Million downloads since November 2001 • Over 880,000 developers from >125 countries • Average 30,000 downloads/day (Oct, 2003) • Hundreds of plug-ins (http://www.eclipse.org/community/plugins.html) • 400+ Plug-ins - 335 tracked at eclipse-plugins.2y.net - 130 tracked at eclipse-workbench.com • 100+ Projects - 100+ Active projects at SourceForge.net - 28+ Active projects at freshmeat.net • Over 300 Universities submit Eclipse Proposals • 50+ Innovation Grants Approved • 100+ Teaching Grants Approved

Eclipse WebSphere Studio Partner Tools & Middleware Rational XDE & Server Toolkits WebSphere Studio WebSphere Studio Top 10 List “From J2EE to Web Services, WebSphere Studio has breadth and depth…” • 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)

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 3rd 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 Partner Tools & Middleware Partner Tools & Middleware Rational XDE & Server Toolkits Rational XDE & Server Toolkits WebSphere Studio WebSphere Studio Partial List of Studio/Eclipse Toolkit Plugins (>400 Plugins) Single Eclipse IDEIBM Studio + Plugins (i.e. Rational, Portal, WBI, 3rd parties…)

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

Develop • Java, J2EE, EJB • Web Pages, Sites • Web Services • Struts, JSF • Etc… Partner Tools & Middleware Rational XDE & Server Toolkits WebSphere Studio Design Develop • UML Tools • Business modeling • Requirements • Application modeling • Data modeling • Etc… Deploy Design >400 Others • Coding • Frameworks • Best Practices • Bells & Whistles • ... Studio + Eclipse Plugins = Limitless Possibilities Complete life cycle of J2EE, Web Services, Portal, Business Integration tools: Model Applications Build Applications Test Applications Deploy Applications Studio Test/Deploy • Unit test • Functional test • System test • Performance test • Load test • Change Management, • Etc...

Rational Development Disciplines SW (Project Console, ClearQuest, ClearCase, etc.) technology IBM Software Development Platform

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

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.

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

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

Java Server Faces Life Cycle

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

JavaServer Faces Tools in WebSphere Studio Web Perspective Project Navigator Page Designer Page Data Palette Attributes Event Panel

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

Creating New Web Services • Generates all web services artifacts 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

Consuming Existing Web Services – Discover and Test • Discovery tools use UDDI, a well known URL or a WSDL file 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

Consuming Existing Web Services – Calling From Application • JSF Web Services Wizards Automate Construction 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

Web Services Ease-of-Use Examples • External Web Services 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 • Easily explored using Web Services Explorer • Easily added from local workspace

Creating Database Apps – Select “Relational Record List” • Relational wizards automate Select queries 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.

Creating Database Apps – Insert, Update, Delete Rows “Relational Record” • Relational wizards automate Update queries 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.

Relational Data Ease-of-Use • WebSphere/Service Data Objects (WDO/SDO) 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)

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)

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. Data Access APIs Data Access APIs Data Access APIs Data APIs Data APIs Data APIs Data APIs Data APIs Data APIs Data APIs Client Data APIs Client Mediator Data Access APIs Meta-Data Access APIs Meta-Data Access APIs Meta-Data APIs Meta-Data APIs (SDO) (Current Architectures)

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 Access APIs Meta-data model Client Data APIs Pluggable Data Mediator Meta-Data Access APIs Data model (DataObject) Meta-Data APIs

JavaServer Faces Ease-of-Use 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

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

Faces Client Components Tabbed Panel Tree Control Chart

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 Data Grid Table Browser Runtime JavaScriptGrid Control Web ServicesForm MacromediaFlash Plug-in

Portlet Ease-of-Use 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

JSF and Struts portlet creation by a wizard Visual Portlet JSF editing in Page Designer People Awareness Drag & Drop Click-to-Action Portlet Development

Name Title Company