1

Hi. In this demo I'm going to show an example of a multi-channel web site built using WebSphere Portal, Web Content Manager with the Content Template Catalog (or CTC), and Web Experience Factory. And then I'll show how with IBM Worklight you can provide an installed hybrid mobile app that gives users access to the same web site, but with the added ability to use native mobile device features, such as the camera. First, let's look at the site from my desktop browser.

2

This is an example of a city government web site. It gives users access to services, content, social features. On the home screen, you have content here from Web Content Manager, live updates from IBM Connections, and information about officials.

4

On other pages I have news, again coming from Connections...

5

and information about parks and I can go and select different park features that I'm looking for.

6

Now, let's switch over to my smartphone device and look at the same web site. I'm going to access the same URL that I was using from my desktop.

7

And here's the home page. Now, it's laid out differently from my mobile device. I can swipe down to see the different portlets, here's the elected officials, my tweets coming from IBM Connections. For navigation, I now have a drop-down menu here at the top left.

8

I can tap; it opens up a menu. I can navigate to any of the pages in this site.

9

And they're all laid out differently for my smartphone device.

10

Here's the Parks page again. Now, to see some of the responsive web design features of this site, let me turn my phone sideways into landscape mode.

11

And we'll see that the portlets are laid out differently. I've got the parks on the left and now the events are on the right. And also within the parks list, notice that's laid out differently with the picture at the left and the text on the right.

12

I'll rotate back again and here it is with the original layout. And this responsive and adaptive behavior is available out of the box with the latest versions of Portal Content Template Catalog and Web Experience Factory.

13

Looking briefly at the same site from my tablet device -- this is an iPad emulator -- again, I have access to the same site. Now, the navigation's a little different.

14

It's got this slide-in navigation.

15

But again, I have access to all the same content and applications.

16

Now let's go back to the smartphone and look at the same site accessed from a hybrid app that's installed onto my phone. I'm going to a launch the app called "Your City."

17

And again, it gives me access to the same web site. I've got all the same content, all the same pages. I can navigate around to any of the pages on this site.

18

But now there's a key difference since this is a hybird app.

19

Switching back over to my desktop for a moment, one of the applications on this site lets users report issues they see, such as things like graffiti, vandalism, potholes. On the desktop, I can fill out a form. If I want I can upload a picture of an issue and I can see a list of issues that have been reported.

20

But now back on my smartphone in the hybrid app, when I go to the same portlet, the same page to report an issue, I now have access to the phone's camera and I can take a picture of the issue that I want to report. So I'm going to tap the button that says "Take picture." It puts my phone into camera mode.

21

I'll point it out my window, so you can see some of the snow we got last night. I'll save this picture.

22

And it shows me a thumbnail and I can fill out the rest of the form. I'm going to say this is "Type: Other" and Description, I'll say, "Needs plowing." I'm now going to submit the report. It will send the picture and the information from the form up to the server.

23

And I can see it's listed along with the other reports that have been filed.

Now, this application and the other portlets that we saw in this demo were built using Web Experience Factory's model-based rapid development tools. And all the different forms and views, including the responsive multi-channel UI, were generated for me based on data services. For the camera support, that was implemented with a single Worklight Camera builder. And let me show you that briefly in the Web Experience Factory Designer.

24

With this builder, just by pointing and clicking to configure the builder, it can generate all the code that's needed to invoke the camera, save the picture, and upload it to the server. And that's leveraging the Worklight and Cordova libraries that are provided with the Worklight product.