1631 Build Hybrid Multichannel Apps Using IBM Worklight, WebSphere Portal and Web Experience Factory

Transcription

1 1631 Build Hybrid Multichannel Apps Using IBM Worklight, WebSphere Portal and Web Experience Factory Jonathan Booth Lead Architect for IBM Web Experience Factory and WebSphere Portal Tooling Sam Alexander IBM Senior Managing Specialist, IBM Software Services for Collaboration

2 Agenda Multichannel web applications and web sites Hybrid mobile applications 2 Building and customizing a multichannel application using Web Experience Factory Building a hybrid application with camera access using Worklight and Web Experience Factory

3 Why multichannel web sites? 3 Users expect access to your web content and applications from any device Users increasingly expect an optimized experience on smartphones and tablets You can build and maintain one site for all devices, not multiple sites Your pages and applications have the same URL for any device

4 What does it take to build and deliver a multichannel site? A web site framework Tools for building and managing a complete site that includes content and applications Site rendering and navigation UI for any device An application development framework Render application UI optimized for any device without maintaining multiple code bases Support for mobile-specific features such as geolocation A content creation and delivery framework Create, approve, publish content Render content with UI optimized for any device 4

5 What does it take to build and deliver a multichannel site? A web site framework WebSphere Portal Tools for building and managing a complete site that includes content and applications The premier web site management framework Site rendering and navigation UI for any device responsive theme provides multichannel site rendering and navigation An application development framework Web Experience Factory Render application UI optimized for any device without maintaining multiple code bases Multichannel Feature Pack includes OOTB multichannel UI Support for mobile-specific features such as geolocation Dynamic Profiling can generate different code for different device classes A content creation and delivery framework Create, approve, publish content Render content with UI optimized for any device 5 WCM and Content Template Catalog (CTC) CTC 4.0 provides OOTB multichannel content rendering

6 Multichannel Web Site Desktop Web Browser Tablet Web Browser Smartphone Web Browser Firewall HTML/JS/CSS, Ajax REST services WebSphere Portal Server Personalization, access control, customization, navigation, etc. Portlets Web Experience Factory portlets, RAD portlets, social portlets, etc. Enterprise applications and services Content IBM Connections and social services

7 Demo multichannel web site

8 New Responsive Portal Theme Out of the box responsive support in Build sites faster that automatically adapt site navigation, layout and look and feel to screen size and device Out of the box support for leading phones and tablets (Apple, Android) Sample/patterns showing how a customers to make their own responsive themes, layouts, styles, and content responsive 8 IBM Web Experiences IBM

9 Key techniques for multichannel UI support Responsive Web Design (RWD) techniques Use CSS techniques in the client such as media queries and container classes in order to style elements for specific devices and contexts Both techniques are used extensively in CTC4 styles See following slides for examples Generate markup based on device user agent On the server, look at device user agent of incoming request Deliver markup and code that's tailored for the type of device 9

10 Responsive techniques: CSS media query With CSS media query, CSS styles can be different for different device sizes In this example layout, on a narrow phone screen the picture is above the text; on a wide/landscape screen the picture is at the left of text.fp80_ctclist.ctclistitem.itemimage img { height: 100px; width: screen and (max-width:435px) {.fp80_ctclist.ctclistitem.itemimage { float: none;width:97%;}.fp80_ctclist.ctclistitem.itemimage img { height: auto;width: 100%;} } 10

11 Responsive techni ques: container classes By using multiple CSS class selectors, styling is different based on what container an element is within For example, portlet styles can adjust based on whether the portlet is in a wide or narrow column on a portal page.wpthemeframe.wpthemelayoutcontainers.blockheading { font-size: 1.8em; color: #115D94;....wpthemeFrame.wpthemeLayoutContainers.wpthemeNarrow.blockHeading { font-size: 1.1em; color: #222222; text-transform: uppercase;... 11

12 Generating markup based on device user agent: Web Experience Factory device type profiling With device type profiling, a single WEF model can generate different code and markup based on the requesting device type Device types can be managed using Portal's device classification database, a properties file, or other mechanisms Any aspect of application can be controlled by device type: Turn features on/off Change layout Etc. Smartphones Desktop Sales Orders Application Model Smartphone Tablet

13 About design approaches for mobile and multichannel There are two general design style approaches you might consider for mobile UI: 1)You may want a web site that has a seamless look across all devices UI adapts for each device for a nice user experience but has a consistent look across devices This is the approach we're showing in most of this presentation 2)You may want very mobile-specific design styles on smartphones and tablets, while using a more traditional design on desktops UI for mobile devices may use the UX style guidelines for the specific device (e.g., ios, Android), or you can have a more generic smartphone UI Both approaches are well supported by WebSphere Portal and Web Experience Factory

14 Agenda Multichannel web applications and web sites Hybrid mobile applications 14 Building and customizing a multichannel application using Web Experience Factory Building a hybrid application with camera access using Worklight and Web Experience Factory

15 Three types of Mobile Applications Mobile web applications and multi-channel web sites Accessible over the internet without installing software Use device browsers to provide native-looking applications Built with standard web technologies (HTML5, CSS, JS) Hybrid applications Installed applications that use web rendering components on the device with a native application shell Leverage standard web technologies (HTML5, CSS, JS) Provide the ability to use native device features Native applications Installed applications built using each device's native SDK

16 Three types of Mobile Applications Mobile web applications and multi-channel web sites Accessible over the internet without installing software Use device browsers to provide native-looking applications Built with standard web technologies (HTML5, CSS, JS) Hybrid applications Installed applications that use web rendering components on the device with a native application shell Leverage standard web technologies (HTML5, CSS, JS) Provide the ability to use native device features Native applications Installed applications built using each device's native SDK Use WebSphere Portal and Web Experience Factory for rapid development of mobile web apps Combine Portal and Web Experience Factory with Worklight to provide hybrid features

17 Using IBM WebSphere Portal with Worklight WebSphere Portal provides a complete framework for building and managing multichannel web sites Sites can include dozens of applications and services, managed content, targeted and personalized delivery Sites can be accessed from any mobile or desktop device With Worklight, you can create an application that's installed on a mobile device and displays a complete Portal-managed web site that includes hybrid device functions Multichannel Portal-based web site Camera, local storage, contact list, notifications, etc. Hybrid features (camera) in Portal-based web site, viewed within an installed Worklight app

18 Multichannel Site with IBM Worklight Desktop Web Browser Smartphone Web Browser Tablet Web Browser Worklight Hybrid Shell Installed App Firewall & Proxy Security check, notification registration, etc. HTML/JS/CSS, Ajax REST services WebSphere Portal Server Personalization, access control, customization, navigation, etc. Portlets Web Experience Factory portlets, RAD portlets, social portlets, etc. Content Enterprise applications and services Worklight Server Notifications, application authorization, app validity, update service, etc. IBM Connections and social services

19 Demo hybrid application displaying multichannel web site

20 IBM Worklight and server-hosted hybrid applications A Worklight application installed on a device can include a browser view of a server-hosted application This is what allows applications running on Portal or WebSphere Application Server to be displayed in a Worklight application The server-hosted application can include Javascript calls to Worklight's Cordova API for access to device features such as camera, contacts, local storage, etc. The server-hosted application can be built using all the rapid development tools of IBM Web Experience Factory In the Worklight documentation, see for example Module 45.1 Integrate Existing Web Content

21 Agenda Multichannel web applications and web sites Hybrid mobile applications 21 Building and customizing a multichannel application using Web Experience Factory Building a hybrid application with camera access using Worklight, Web Experience Factory, and the new Camera builder

22 What is Web Experience Factory? Model-based development framework for creating web applications and portlets Out of the box capabilities simplify and speed development Supports multi-channel web sites and applications Easier and faster than traditional coding to develop exceptional web experiences Includes 150+ out-of-the-box builders that accelerate development Dynamic profiling allows you to write once, deploy to many devices 2012 IBM Corporation 22 Exceptional Web Experience Conference Europe

23 About the new Multichannel Feature Pack for Web Experience Factory 8.0 Available now as a download from Solutions Catalog Key features: Multichannel and Responsive UI support: New Layouts for the Data Layout builder New Responsive Web Design (RWD) themes including compatibility with CTC4 and WebSphere Portal Mobile themes New wizard making it easy to include this new support IBM Worklight Camera Builder Easily add hybrid camera capabilities to a model

24 About our sample application Lets users view citizen reports on issues such as potholes, graffiti, vandalism, streetlights out, etc. Later, we'll add the ability for users to post new reports that include a picture from a mobile device camera Uses key multichannel techniques: Responsive design Device type profiling

25 Service provider/consumer model architecture Web Experience Factory DB or other back end data source Provider builders SQL Data Services, Web services, REST services, SAP, Domino, PeopleSoft, Siebel, etc. Data transforms and schemas References to Java classes/libraries Service Interface operations and schemas Service (provider) model Presentation (consumer) model Presentation builders Service Consumer UI Themes View & Form, Data Services UI, Input Form, Data Page Data Field Settings Data Layout UI customization builders Desktop Tablet Phone 2012 IBM Corporation 25

26 Adding the Feature Pack archives to a project Download and unzip the Feature Pack it contains two WEF archive ZIP files and a readme file Import both of the archive ZIP files into your project, by right-clicking the project and selecting Import, Web Experience Factory Archive Your project must also have the Mobile feature set enabled 2012 IBM Corporation 26

27 The service provider model Contains just a single SQL Table Create builder This builder creates and populates a database table report_demo Initial data can be taken from an XML file, report_data.xml Running the generated test harness for the provider model 2012 IBM Corporation 27

28 Creating the consumer model To build the consumer or portlet model, we'll use the new Multichannel List and Detail (Feature Pack for 8.0) wizard from Feature Pack Then we'll add a few builders to enable create support and to customize the application a little Detailed steps are on following slides 2012 IBM Corporation 28

29 Creating the consumer model, continued Select File, New, Web Experience Factory Model Select your project (which must have the Feature Pack archives imported already) Select Multichannel List and Detail (Feature Pack for 8.0) for Model Type 2012 IBM Corporation 29

30 Creating the consumer model, continued Enter reports as the name, and select the provider model Enter Demo Reports as the portlet title 2012 IBM Corporation 30

31 Creating the consumer model, continued For View Data Operation, select listreports Create a link to details and select the REPORTDATE column, and select retrievereports as the operation for retrieving details data 2012 IBM Corporation 31

32 Creating the consumer model, continued As the input value for retrieving details data, select the ID field of the Row data in the reportsview_selectedrow Data variable The SelectedRowData variable is created by builders to hold data when you click on a record in a table or list 2012 IBM Corporation 32

33 Creating the consumer model, continued In the Data Field Settings screen, make the following changes Hide the ID field Set the IMGFILE field type to Image Display Set the REPORTTYPE field type to Select, and for Choices specify Graffiti, Pothole, Vandalism, Sign Damage, Streetlight, Other Enter Demo Reports as the page header text 2012 IBM Corporation 33

34 Creating the consumer model, continued In the Data Layout screen, you'll specify the layout you want to use for your list of data Select the Layout Template Thumbnail Multi-Line List (Feature Pack for 8.0) Set the values and styles as shown 2012 IBM Corporation 34

35 Creating the consumer model, continued On the last screen of the wizard, enter your desired model name and press Finish to complete the wizard 2012 IBM Corporation 35

36 OK, we finished the wizard now what do we have in the generated model? The wizard creates a model with 10 builders, generating two pages You don't have to use this wizard you could add the same builders from the builder picker one at a time (but that's more work) Next, we'll run the model, then walk through the builders to see what they do Two generated pages Ten builders 2012 IBM Corporation 36

37 Running the model View and details pages on desktop browser View and details pages on phone browser 2012 IBM Corporation 37

38 Walk-through of builders generated by wizard 1 - Comment builder includes some comments about potential next steps for this model Comment builders are also used to group builders together, such as grouping all the builders for one part of a portlet's functionality 2012 IBM Corporation 38

39 Walk-through of builders, continued 2, 3, 4 - Theme builders for desktop, phone, and tablet UI Themes in WEF let you control all the look and feel aspects of an entire set of applications in a central place: CSS styles Smart refresh and page loading progress indicators Page layouts Table and form layout rules (HTML templates) Table highlighting and paging controls Profiled to device type 2012 IBM Corporation UI Theme for desktop profile The three themes in this model are automatically profiled by device type, so that only one is enabled at a time depending on client device 39

40 Walk-through of builders, continued 5 - Portlet Adapter This builder makes a model available to run as a portlet In the builder you specify the portlet's name, title, and other settings After adding a Portlet Adapter builder to a model, you need to publish your project once in order to make the portlet available to Portal 2012 IBM Corporation 40

41 Walk-through of builders, continued 6 - Service Consumer This builder allows the model to access all the operations of a service provider It generates a Data Service that you can use to select operations In the case, the wizard has automatically populated the ID input for the retrievereports operation 2012 IBM Corporation 41

42 Walk-through of builders, continued 7 - View and Form This builder can generate List, Details, Update, and Search screens based on Data Service operations In this case the List and Details pages are enabled 2012 IBM Corporation 42

43 Walk-through of builders, continued 8 - Data Field Settings This builder lets you easily control the appearance and behavior of all the fields in an application Automatically reference a shared library of Rich Data Definitions For each field, you can control labels, visibility, column sorting, validation, field type (drop-down, checkbox, rich text editor, date picker, etc.), and more 2012 IBM Corporation 43

44 Walk-through of builders, continued 9 - Data Layout This builder generates a wide variety of layouts for lists and repeating data You select a layout, then select the stylesheet file, then assign data fields into placeholder locations in the layout 2012 IBM Corporation 44

45 Walk-through of builders, continued 10 - Text This builder simply adds some text to one or more pages In this case, all the pages have a placeholder location for page_header_text, so the text will appear on all pages 2012 IBM Corporation 45

46 Customizing and enhancing the model WEF has a very rich set of builders and other tools for customizing and enhancing your models A large set of builders is available to add or modify functionality Dojo widgets, data charts, events and actions, formatting, navigation, data transform, etc., etc. Use the WYSIWYG Design view to move fields, hide, group, change layout When you need complete control of page layout, use the right-click commands to Export HTML for Customization Pages can be iteratively edited with any external tools or by design team 2012 IBM Corporation 46

47 Enable and configure File Upload support for the project File Upload (for uploading pictures) must be enabled by setting properties in the WEB-INF/config/override.properties file Add the properties shown below # This enables upload for the project bowstreet.upload.enabled=true # This sets the directory where uploaded files will be stored upon successful upload. bowstreet.upload.destinationpath=${bowstreet.rootdirectory}/../demo # This determines the maximum file size that can be uploaded at one time in KiloBytes. bowstreet.upload.maxfilesizek= IBM Corporation 47

48 Add the new portlet to a Portal test page Publish the project to your Portal test server Add the portlet to a page Note: if you want anonymous access to your portlets, you need to set Resource Permissions using Portal Administration, and edit the User role to add All Anonymous Users to the role 2012 IBM Corporation 48

49 Agenda Multichannel web applications and web sites Hybrid mobile applications 49 Building and customizing a multichannel application using Web Experience Factory Building a hybrid application with camera access using Worklight, Web Experience Factory, and the new Camera builder

50 New in Feature Pack: Camera Builder 50 Adds all the Cordova Javascript needed to invoke device camera and upload photos Optionally enables geolocation support IBM Web Experiences IBM

51 Camera builder samples on wiki CameraTest A very simple model using Camera builder, with no external dependencies This is a good model for verifying your configuration for using the Camera builder CitizenReports Lets users report issues such as graffiti, similar to what we're building in this presentation Stores report data in a database table CheckDeposit Shows how to use the Camera builder to let users take pictures of the front and back of a check Uses a stub service provider with no persistent storage of data

52 Configuring your development environment To build hybrid applications using the combination of Worklight and Web Experience Factory, you will need: A Worklight development environment with the device SDKs you'll be using (we're showing Android) The WEF Designer and a Portal or WAS server for testing Worklight/Cordova JavaScript files must be available on your server (see articles on wiki and developerworks for how to do this) These slides assume that you have those pieces in place, and that you can, for example, build and run a Hello, world Worklight Android application

53 Building a Worklight hybrid shell that points to Portal server Create a new Worklight Project of type Hybrid Application, and then give a name to the application Click Finish

54 Building a Worklight hybrid shell, continued Find your app within the project (under apps ), and select the right-click command New, Worklight Environment

55 Building a Worklight hybrid shell, continued Select Android phones and tablets and click Finish

56 Building a Worklight hybrid shell, continued Adding the Android environment will automatically create a new Android project called <projectname><app-name>android You won't edit the Android project directly since it's automatically generated and updated from your Worklight project You will use it to run the Android application

57 Building a Worklight hybrid shell, continued Now we'll edit three pieces of the default Worklight app: The app's Java class The app's config.xml file The app's Android Manifest file First, locate the Java file for the app and open it for editing It's in the app's folder, in android/native/src/com/<appname>

58 Building a Worklight hybrid shell, continued Edit the Java file to be similar to the following, by adding two imports and updating the method code This example IP address is for using the Android emulator; for a real device you would use the Portal's host name instead package com.reportsdemoapp; import import import import android.os.bundle; android.webkit.cookiemanager; android.webkit.cookiesyncmanager; com.worklight.androidgap.wldroidgap; public class ReportsDemoApp extends WLDroidGap public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); CookieSyncManager.createInstance(appView.getContext()); CookieManager.getInstance().removeSessionCookie(); // URL to Portal, using the host machine IP address used by Android emulator super.loadurl(" } public void loadurl(string url) { loadurl(url,false); } }

59 Building a Worklight hybrid shell, continued Locate the config.xml file in the app's android/native/res/xml folder and open it for editing Add a line similar to the following, to add your server to the Android whitelist Again, this is for the emulator; use the address of your server if you're running from a real device <access origin="

60 Building a Worklight hybrid shell, continued Locate the AndroidManifest.xml in the app's android/native folder and open it for editing Add these lines to the manifest in order to enable the permissions we'll be needing <uses-permission <uses-permission <uses-permission <uses-permission android:name="android.permission.camera" /> android:name="android.permission.access_coarse_location" /> android:name="android.permission.access_fine_location" /> android:name="android.permission.write_external_storage" />

61 Building a Worklight hybrid shell, continued Now right-click on the app folder and select Run As, Build All and Deploy This will update the Android native app with your changes

62 Building a Worklight hybrid shell, continued Now we're ready to run the hybrid application Right-click the Android application and select Run As, Android Application

63 Building a Worklight hybrid shell, continued Portal is now visible within the hybrid app shell Now we're ready to add the camera support

64 Adding a Create form to the WEF application Add an Input Form builder, setting the values as shown Additionally, in the Advanced section, disable the Generate main input

65 Adding a Create form, continued In the Outline view, drag the new Input Form builder so it's just above the Data Field Settings builder

66 Adding a Create form, continued Add a Button for navigating from the View page to the new Create Page

67 Adding a Create form, continued Next we'll hide some of the inputs on the Create page Add a Data Field Settings builder that references just that page Set the IMGFILE, REPORTDATE, LAT, and LON fields to Hide Always

68 Adding camera support Add a Camera builder Set the name as camera Select the Create page as the page Leave the Camera Layout HTML at the default, which displays a button for taking a picture and a placeholder for a thumbnail Leave Picture Source set to Camera and use the default setting for Thumbnail Display Enable Capture Geolocation Data

69 Adding camera support, continued Fill out the Target Field values in the Captured Picture Information table as shown This lets you save values related to a picture into the variable that's associated with the Create page This is what lets you easily pass information about a picture into a service operation

70 Adding camera support In the Advanced section, set the Subfolder For Uploaded Picture to reports Leave other inputs at their defaults Click OK

71 Run the model as a web application Click Run to run the model standalone Click New Report No camera options are shown, since the application is running as a pure web application, not a hybrid application Your submitted report will not have an accompanying image

72 Run as part of a hybrid application Run the Android application again, navigate to the page with the new portlet, and try the camera support

73 Run as part of a hybrid application, continued Click the Take Picture button to put the device or emulator into camera mode Take a picture, and approve it A thumbnail is displayed

74 Run as part of a hybrid application, continued Fill out the report type and comments fields, then click Submit The new report is added to the database table

75 Summary With the latest versions of WEF and Portal, you have state-of-the-art tools for building mobile and multi-channel web applications and web sites Build and manage a single site that renders on any device By combining IBM Worklight with WEF and Portal, you can create a hybrid application that's installed on a mobile device and displays a complete Portalmanaged web site with native device functions Use features such as camera where you need them Download these latest tools and get started! IBM Portal with the new responsive theme Multichannel Feature Pack for Web Experience Factory 8.0 IBM Worklight 5.0.5

76 Key resources for Web Experience Factory Web Experience Factory Community on developerworks Web Experience Factory wiki Includes samples and articles, best practices documents, and links to resources Learning Roadmap from the Web Experience Factory wiki Covers topics from your first installation to advanced topics such as creating builders Web Experience Factory forums on developerworks These are very active and are monitored closely by the Web Experience Factory team

77 Questions?

78 Legal disclaimer 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. If the text contains performance statistics or references to benchmarks, insert the following language; otherwise delete: 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. If the text includes any customer examples, please confirm we have prior written approval from such customer and insert the following language; otherwise delete: 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. Please review text for proper trademark attribution of IBM products. At first use, each product name must be the full name and include appropriate trademark symbols (e.g., IBM Lotus Sametime Unyte ). Subsequent references can drop IBM but should include the proper branding (e.g., Lotus Sametime Gateway, or WebSphere Application Server). Please refer to for guidance on which trademarks require the or symbol. Do not use abbreviations for IBM product names in your presentation. All product names must be used as adjectives rather than nouns. Please list all of the trademarks that you use in your presentation as follows; delete any not included in your presentation.please review text for proper trademark attribution of IBM products. At first use, each product name must be the full name and include appropriate trademark symbols (e.g., IBM Lotus Sametime Unyte ). Subsequent references can drop IBM but should include the proper branding (e.g., Lotus Sametime Gateway, or WebSphere Application Server). Please refer to for guidance on which trademarks require the or symbol. Do not use abbreviations for IBM product names in your presentation. All product names must be used as adjectives rather than nouns. Please list all of the trademarks that you use in your presentation as follows; delete any not included in your presentation. If you reference Adobe in the text, please mark the first use and include the following; otherwise delete: Adobe, the Adobe logo, PostScript, and the PostScript logo are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States, and/or other countries. If you reference Java in the text, please mark the first use and include the following; otherwise delete: Java and all Java-based trademarks are trademarks of Sun Microsystems, Inc. in the United States, other countries, or both. If you reference Microsoft and/or Windows in the text, please mark the first use and include the following, as applicable; otherwise delete: Microsoft and Windows are trademarks of Microsoft Corporation in the United States, other countries, or both. If you reference Intel and/or any of the following Intel products in the text, please mark the first use and include those that you use as follows; otherwise delete: Intel, Intel Centrino, Celeron, Intel Xeon, Intel SpeedStep, Itanium, and Pentium are trademarks or registered trademarks of Intel Corporation or its subsidiaries in the United States and other countries. If you reference UNIX in the text, please mark the first use and include the following; otherwise delete: 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. If the text/graphics include screenshots, no actual IBM employee names may be used (even your own), if your screenshots include fictitious company names (e.g., Renovations, Zeta Bank, Acme) please update and insert the following; otherwise delete: All references to [insert fictitious company name] refer to a fictitious company and are used for illustration purposes only. 78