JMP305: JumpStart Your Multi-Channel Digital Experience Development with Web Experience Factory IBM Corporation

Transcription

1 JMP305: JumpStart Your Multi-Channel Digital Experience Development with Web Experience Factory 2014 IBM Corporation

2 Agenda Multi-channel applications and web sites Rapid development with the model-based tools of Web Experience Factory Description of the sample application Build and deploy a multi-channel responsive application Build and test a service provider model for accessing a relational database Next steps and additional resources

3 Multi-channel applications and web sites 3

4 Why multi-channel web sites? 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

5 What does it take to build and deliver a multi-channel site? A web site framework WebSphere Portal Tools for building and managing a complete site that includes content and applications The premier web site 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 WCM and Content Template Catalog (CTC) Create, approve, publish content CTC 4.1 provides OOTB multi-channel content rendering Render content with UI optimized for any device

6 Multichannel Web Site Desktop Web Browser Tablet Web Browser Smartphone Web Browser 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 multi-channel web site

8 Portal responsive theme Build sites 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 Samples/patterns showing how to make your own responsive themes, layouts, styles, and content 8 IBM Web Experiences IBM Corporation

9 Key techniques for multi-channel UI support Responsive Web Design (RWD) techniques In the client, use CSS techniques 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 techniques: 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 or look Etc. Single WEF Source Model

13 Rapid development with the model-based tools of Web Experience Factory 13

14 What is Web Experience Factory? Model-based development framework for creating web applications and portlets Easier and faster than traditional coding Generate code the way you want it 14 Out of the box capabilities simplify and speed development Supports multi-channel web sites and applications Includes 150+ out-of-the-box builders that accelerate development Dynamic profiling and responsive web design allow you to write once, deploy to many devices

15 Web Experience Factory automation of design patterns WEF features a model-based development approach using builders A builder is a tool with a wizard-like configuration UI that automates a design pattern, generating all the necessary application code and artifacts Builders are combined in a model and edited using the Web Experience Factory graphical Designer IDE Web Experience Factory code generation engine Model Builder 1 Builder 2 Etc. Libraries and templates 15 Application code

16 Benefits of the model-based code generation approach 1) Rapid development Quickly generate fully-functional applications using a data-driven approach based on a service or data source Use complex technologies with no coding or learning curve, such as Ajax, back end data integration, mobile UI construction Customize the generated applications using provided tools and by integrating your code and your UI designs where desired 2) Flexibility and runtime variability using Dynamic Profiling Support mobile and multi-channel delivery from a single source model Generate multiple variations from single source model for user role, geography, customer/partner, etc. Allow runtime customization of applications 3) Automate and enforce your development standards and practices 16 Tailor the code generation framework for your standards and practices and design patterns

17 Tour of the Designer IDE Project files and folders Run Model icon Application Tree and Pages views browse generated artifacts Design View WYSIWYG view of generated pages Icons for Add Builder, Regen Model Builder list for this model Open Design View Palette Problems view (ignore at your peril) Tabs for other views such as Properties Tabs to switch between Source, Design, Model XML, and Builder Call Editor views

18 Description of the sample application 18

19 View and update a database of parks information From database to responsive UI Our sample application lets users view and update a database of park information The application is implemented with two models: A data provider that accesses the data source A user interface or consumer model that generates the UI Database Data Service Provider Model WSDL/SOAP WSDL/SOAP Web Service Web Service User Interface Model (Service Consumer)

20 Database and web service data providers We ll show two implementations of a data service provider: SQL database: we ll create and populate a table using the SQL Table Create builder WSDL/SOAP web service: we ll invoke a WSDL-based web service Here s the schema for the data:

21 UI-first development We ll be taking a UI-first development approach First, we ll use data from an XML file and build an initial implementation of our application The XML File Data Service builder on the WEF wiki is used for this We ll publish the model and deploy it on a portal page Then we ll build a service provider that connects to real relational database Finally we ll switch our UI layer to use the real back end provider When would you use this UI-first approach? This approach lets you build your UI before you have access to your final data source Some of the team can be working on UI while others work on data access It is useful for quick UI prototyping

22 Prerequisites what you ll need to build these samples Portal this includes the responsive theme with support for mobile devices Multichannel Feature Pack 2 for Web Experience Factory 8.0 The latest fixpack for WEF 8.0, as described on the Feature Pack documentation site After installing the fixpack, create a WEF project and publish it to the Portal server In your project you will need to enable the Mobile and Dojo features

23 Build and deploy a multi-channel responsive application 23

24 Import the Feature Pack and sample archives to your project Download and unzip the Feature Pack it contains two WEF archive ZIP files and a readme file Import the MultichannelResponsiveUI.zip archive into your project, by right-clicking the project and selecting Import, Web Experience Factory Archive Your project must also have the Mobile and Dojo feature sets enabled Import the sample parks_multichannel.zip available on the WEF wiki here: Import the xml_file_data_service_builder.zip archive available here:

25 Test the XML file service provider model Open the model samples/parks/parksxmlprovider This uses the XML File Data Service builder to access data from an XML file, so that we can develop UI without our final back-end data source Run the model and use the generated service test harness to confirm the data is available

26 Use the Multichannel List & Detail wizard Create a new Web Experience Factory model and select your project Click Next

27 Use the Multichannel List & Detail wizard, continued Select Multichannel List and Detail as the model type Click Next

28 Use the Multichannel List & Detail wizard, continued Provide a name (we re using parks1 ), then select ParksXmlProvider as the Provider Model Enable Deploy as Portlet and Enable Device Type Profiling Click Next

29 Use the Multichannel List & Detail wizard, continued Provide a portlet title Click Next

30 Use the Multichannel List & Detail wizard, continued For the main view Data Service Operation, select getparks Click Next

31 Use the Multichannel List & Detail wizard, continued On the Details screen, enable Create Link To Details and select the options shown Click Next

32 Use the Multichannel List & Detail wizard, continued On this screen you need to select the runtime value used to retrieve a single record from the Data Service Set the value to: $ {Variables/parks1View_SelectedRowData/ParksServiceRow/ID} The <name>_selectedrowdata variable is generated by the View & Form builder, and it holds all the values when the user clicks on a row Note: in the generated model, this setting is in the Override Inputs section of the Service Consumer builder Click Next

33 Use the Multichannel List & Detail wizard, continued On this screen you need to change settings for four fields: Hide the ID field ( Hide Always ) Set the IMGFILENAME field type to Image Display Set the COUNTRY field type to Select (drop down) and the Lookup Table to Country Codes Set the DESCRIPTION field type to Rich Text Editor Set the Page Header Text as shown Click Next

34 Use the Multichannel List & Detail wizard, continued In this screen we ll specify the Data Layout to use for the list display We ll use the layout that s based on a CTC (Content Template Catalog) layout Set the Layout Template, Style Sheet File, and Data Layout Fields as shown Once you select a Layout Template, the Data Layout Fields section shows all the placeholder locations for the selected layout In the Value column you select your data fields Click Next

35 Use the Multichannel List & Detail wizard, continued Provide a name for your model and select Finish

36 The generated model after completing the wizard Here's the Designer after creating the model You can click between the two pages in the Application Tree view or Pages view to see them in the WYSIWYG Design view Application Design Tree and Pages WYSIWYG Views View You can double-click any builders in the Outline view to view or change settings We recommend leaving the main window of Designer on Design view so that you can see pages easily Outline View showing Builders

37 Run the model The list is displayed using the layout you selected

38 See some of the responsive web design behavior Middle By resizing your browser to a narrow size you can see some of the responsive behavior section of paging UI is hidden Items are laid out with photo at top and text fields underneath

39 View details screen After clicking anywhere on one of the park listings you ll see the details for that park

40 Publish and run the model as a portlet Publish the project to your server You need to publish since you ve just added a new portlet model Note that most other editing of models can be tested in portal without republishing Then go to the portal page where you want to display the portlet (or create a new page if you want) and add the portlet to the page

41 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

42 Walk-through of builders, continued Profiled to device type UI Theme for desktop profile 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 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

43 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 to make the portlet available to Portal

44 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 invoke operations In the case, the wizard has automatically populated the ID input for the getpark operation in the Override Inputs section

45 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

46 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 Uses a shared library of Rich Data Definitions For each field, you can control labels, visibility, sorting, validation, field type (drop-down, checkbox, rich text editor, date picker, etc.), and more

47 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

48 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 with a tag using that name

49 View the portlet on a portal page Save the page and go to View mode

50 View the portlet on multiple devices

51 Add Update support Next we ll add Update support to our application In Designer, double-click the View & Form builder Go to the Update Page Support section and change three inputs: Enable Create Update Page Set Update Method as shown Set Update Next Action to parksdemo1view_showresults, in order to refresh the list after making an update Click OK

52 View the Update screen in Design view Notice that a third application page has now been generated Select the Update page by clicking in the Application Tree or Pages view Here you can see the default layout for the fields on the Update page

53 Hide the IMGFILENAME field on the Update Page We will hide the IMGFILENAME field on the update page since we're not building support for uploading/updating image files Right-click the IMGFILENAME field in Design view and select Data Field Settings / Hide as shown This adds a Data Field Settings builder that hides the IMGFILENAME field and is scoped just to the Update page Confirm that the IMGFILENAME field is no longer visible in Design view

54 Test the Update support Save and Run the model From the Details screen, click Edit to go to the Update screen Change a value and click Submit to see your updates in the main list view

55 Try the Update support on mobile devices Note that the Update screen is laid out differently on smartphone The field labels are above the inputs instead of side-by-side This is controlled by the UI Theme for the device type Note: to see your model updates on device, clear cookies or logout/login

56 Customizing and enhancing the UI model WEF has a very rich set of builders and other tools for customizing and enhancing your user interface models A large set of builders is available to add or modify functionality Dojo widgets, events and actions, formatting, navigation, data transform, etc., etc. Use the WYSIWYG Design view to move fields, hide, group, or 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

57 Build and test a service provider model for accessing a relational database 57

58 Overview of database provider In this section we ll create a Data Service Provider model for accessing a table from a database The database table will be created and populated using the SQL Table Create builder That builder will create the table and generate a Data Service with operations for complete CRUD (Create/Read/Update/Delete) support We ll also enable testing support, which will generate a complete test harness for testing all the operations To provide similar functionality for an existing DB table, use the SQL Data Services builder If you need more control over your DB access, use other SQL builders such as SQL Call (which lets you invoke any SQL statement)

59 Create a new empty model Create a new model in the same project Select Empty for the model type (under Factory Starter Models) Name the model and select Finish to save it

60 Add SQL Table Create builder Click the Add a Builder Call icon at the top of the Outline view Select SQL Table Create, in the SQL category Click OK

61 Add SQL Table Create builder, continued In the builder, specify the Name Parks Click Fetch DataSource Names and then select jdbc/cloudscapeforwef from the drop-down list For Table Name, enter my_parks_table For Import Data, select the same XML file used in our XML file implementation: /WEB-INF/samples/parks/ParkLocations.xml Click Scan Import Data and select No in the popup that appears The builder should look similar to the screenshot at right, with column names filled in from the XML file

62 Add SQL Table Create builder, continued In the Table Columns input, set the PHONE and ID fields to String Make sure that all the columns are String except for LATITUDE and LONGITUDE

63 Add SQL Table Create builder, continued Near the bottom of the builder, open the Sample Data Formats and Advanced sections Set Maximum String Size to 4096 Select Enable Testing Support Then click Create Table You should see a popup message The table was created. Click OK to save and close the builder

64 Testing the SQL provider service Save and Run the model You will see the test harness for this service, with links for testing each operation Click on listparks to view the database table data

65 Update the UI model to use the new SQL provider Now we want to update our UI model to switch from the XML file provider to the SQL database provider we just created A few of the builders in the UI model will need to be updated This is because some operation names are different between the two providers

66 Update the UI model to use the new SQL provider, continued Open the Service Consumer builder by double-clicking it in the Outline view Change the Provider Model to use the SQL provider you created In the Problems view you ll now see some errors displayed that we ll need to fix, with corresponding red X in the Outline view Later (after updating View & Form builder) we ll need to update the Overridden Inputs

67 Update the UI model to use the new SQL provider, continued Open the View & Form builder and make the following changes: Change the View Data Operation to DataServices/parksDemo1/listParks Change the Details Method to DataServices/parksDemo1/retrieveParks Change the Update Method to DataServices/parksDemo1/updateParks Change the Details Link Column to PARKNAME Click OK

68 Update the UI model to use the new SQL provider, continued Now we ll update the input that s used to retrieve a single record retrieveparks gets a single record from ID Open the Service Consumer builder again by double-clicking it in the Outline view In Overridden Inputs, select retrieveparks and set the ID input value to ${Variables/parksDemo1View_SelectedRowData/ParksServiceRow/ID}

69 Update the UI model to use the new SQL provider, continued Open the Data Layout builder and make the following change Change the Container Field to [parksdemo1view_viewpage] parksdemo1view_viewpage/parksrowset/parksrow Select Move Details Link to Row if necessary Click OK

70 Update the UI model to use the new SQL provider, continued Save and Run the model It should look and function exactly as before Now it s using a real SQL database instead of an XML file

71 Using a WSDL-based web service For WSDL-based web services there are two builders available in WEF: Web Service Call provides access to a single operation defined in a WSDL document Web Service Multiple Operations provides access to any/all operations defined in WSDL In our example, we ll use a single Web Service Multiple Operations builder to access all the operations The operation names and fields are the same as our DB example

72 Service provider just a single Web Service Multiple Operations builder WSDL URL All operations enabled

73 Service Consumer UI model same as others The differences for different back ends or services are only in the Service Provider layer model The UI layer doesn t know or care which back end builders are used in the provider

74 Working with service providers and data access The service provider models in our examples were very simple, but there are a large number of builders and techniques available for building providers: Connect to other data sources using some of the other data access builders REST services, Domino, SAP, WCM, etc. Create and use schemas and map/transform data between schemas Use the Service Operation builder, the Transform builders, or LJO code with the IXml API Use the IXml API for Java working with XML data in Java code Use the caching options for cross-user caching where appropriate, in the Service Operation and Cache Control builders 74

75 Next steps and additional resources 75

76 Adding builders to enhance or customize the user interface Once you have an application working, there s a large set of builders you can use to modify or enhance the application, for example: Use the Design View palette to drag new elements or layouts Use the right-click command Export HTML for Customization to customize the HTML for a page Use the mobile or Worklight builders such as Geolocation or Camera to add advanced mobile capabilities Use the Application Page builder to add more pages to your application Use Link or Button builders to add navigation and actions Use the Model Container builder to include another model on a page, with complete interaction support in the contained model

77 Using IBM Worklight to build Camera support for creating new park listings By combining Portal and Web Experience Factory with IBM Worklight, you can: Provide an installed app that accesses your whole web site Use native device features within any portlets on the site Quickly add camera support using WEF s Camera builder With just four builders you can enhance our sample model to add a form for creating new park listings with Camera support Input Form adds a new input form page, using the createparks operation Camera adds complete camera support, using Worklight s JS APIs Link adds a link to access the new page Data Field Settings just hides the IMGFILENAME field on the create page

78 Adding Camera support configuration prerequisites To use Worklight features such as Camera support in a WEF portlet, you need to have the following in place: 1. A Worklight app that points to your Portal site installed on your test device or emulator 2. A WEF project with the Worklight Camera builder imported and with Worklight JavaScript files available See the WEF wiki and developerworks articles for setting this up

79 Adding Camera support, step 1 Input Form builder

80 Adding Camera support, step 2 Camera builder

81 Adding Camera support, step 3 Link builder

82 Adding Camera support, step 4 Data Field Settings builder

83 Creating a new park listing from Android emulator

84 Building multiple application variations with dynamic profiling Dynamic profiling is used to generate multiple application variations from a single source model In our example, profiling was used to generate different variations for desktop/tablet/smartphone devices Variations can be tied to user groups or other attributes For different customers, partners, roles, regions, etc. For different device types desktop vs. smartphone, for example Profiling also supports customization by administrators or end users Enables business users to customize the application without requiring additional coding by developers Any aspect of application can be varied by profile: look and feel, level of functionality, services, logic, etc.

85 Use the resources available on the wiki and forum Samples and articles There are a large number of downloadable samples that illustrate a wide variety of techniques See the Samples Directory page for a categorized list Reusable tools There are a number of tools such as builders and reporting tools that you can download and use in your projects Videos There are several videos for getting started using Experience Factory Web Experience Factory Best Practices forum on developerworks Go here to post questions and to search for previously-answered questions See this slide deck: Tips For Teams Adopting the Web Experience Factory Framework Experience_Factory

86 For more information Join our community: Latest news/blog Access to experts Links to valuable info including forums, wiki, samples etc. The WEF wiki: New RedWiki: IBM Redbooks: Developing Exceptional Multi-Channel Web Experiences: Youtube channel:

87 Growing Your IBM Skills Access to training in more cities local to you, where and when you need it, and in the format you want Global Skills Initiative Use IBM Training Search to locate training classes near to you Demanding a high standard of quality / see the paths to success Academic Initiative Learn about the New IBM Training Model and see how IBM is driving quality Check Training Paths and Certifications to find the course that is right for you Academic Initiative works with colleges and universities to introduce real-world technology into the classroom, giving students the hands-on experience valued by employers in today s marketplace Kenexa is making companies better through HR see how Kenexa can help your company Discover how you can leverage the IBM Analytics Talent Assessment 87 Learning Solutions Analytics Talent Assessment

88 Engage Online SocialBiz User Group socialbizug.org Join the epicenter of Notes and Collaboration user groups Follow us on LinkedIn Participate in the IBM Social Business group on LinkedIn: Facebook Like IBM Social Business on Facebook Social Business Insights blog ibm.com/blogs/socialbusiness Read and engage with our bloggers 88

89 Access Connect Online to complete your session surveys using any: Web or mobile browser Connect Online kiosk onsite 89

90 Acknowledgements and Disclaimers Availability. 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. The workshops, sessions and materials have been prepared by IBM or the session speakers and reflect their own views. They are provided for informational purposes only, and are neither intended to, nor shall have the effect of being, legal or other guidance or advice to any participant. While efforts were made to verify the completeness and accuracy of the information contained in this presentation, it is provided AS-IS without warranty of any kind, express or implied. IBM shall not be responsible for any damages arising out of the use of, or otherwise related to, this presentation or any other materials. Nothing contained in this presentation is intended to, nor shall have the effect of, creating any warranties or representations from IBM or its suppliers or licensors, or altering the terms and conditions of the applicable license agreement governing the use of IBM software. 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. 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. Copyright IBM Corporation All rights reserved. U.S. Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp. Please update paragraph below for the particular product or family brand trademarks you mention such as WebSphere, DB2, Maximo, Clearcase, Lotus, etc. IBM, the IBM logo, ibm.com, [IBM Brand, if trademarked], and [IBM Product, if trademarked] are trademarks or registered trademarks of International Business Machines Corporation in the United States, other countries, or both. If these and other IBM trademarked terms are marked on their first occurrence in this information with a trademark symbol ( or ), these symbols indicate U.S. registered or common law trademarks owned by IBM at the time this information was published. Such trademarks may also be registered or common law trademarks in other countries. A current list of IBM trademarks is available on the Web at Copyright and trademark information at If you have mentioned trademarks that are not from IBM, please update and add the following lines: [Insert any special 3rd party trademark names/attributions here] Other company, product, or service names may be trademarks or service marks of others. 90