What's happening on the screen
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.
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.
Desktop browser - Your City.gov Home page
On other pages I have news, again coming from Connections...
Desktop browser - News page
and information about parks and I can go and select different park features that I'm looking for.
Desktop browser - Parks page
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.
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.
Smartphone - Your City.gov home page
I can tap; it opens up a menu. I can navigate to any of the pages in this site.
Smartphone - Drop-down menu
And they're all laid out differently for my smartphone device.
Smartphone - City News
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.
Smartphone - Parks page
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.
Smartphone - Landscape mode, Parks page
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.
Smartphone - Portrait mode, Parks page
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.
Tablet device - Your City.gov home page
It's got this slide-in navigation.
Tablet device - slide-in navigation
But again, I have access to all the same content and applications.
Tablet device - City News page
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."
Smartphone -- launching Your City app
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.
Smartphone - Your City.gov home page in hybrid app
But now there's a key difference since this is a hybird app.
Smartphone - Parks page in hybrid app
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.
Desktop browser - Report An Issue form
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.
Smartphone - Report An Issue form in hybrid app
I'll point it out my window, so you can see some of the snow we got last night. I'll save this picture.
Smartphone - Camera taking picture in hybrid app
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.
Smartphone - Report An Issue form in hybrid app
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.
Smartphone - Report An Issue list in hybrid app
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.
Web Experience Factory Designer - Camera (Feature Pack for 8.0) builder inputs
|25||OK, going back to my slides for a moment. This shows a diagram of what I just showed. You've got four different views, all accessing the same site with the same applications and content. |
I've got my desktop browser, the smartphone browser, the tablet browser, and the hybrid app that's been installed onto a mobile device. They all hit the same Portal server, get the same set of of pages, portlets, and content. And in turn the portlets may access your enterprise applications and other services like IBM Connections.
In the case of the hybrid app, it also accesses the Worklight server for things like notifications and security and application updates.
|Diagram of devices accessing IBM WebSphere Portal with IBM Worklight|
|26||OK, for more information, you can see these resources here. The WebSphere Portal Wiki, the Web Experience Factory wiki, and the Worklight product documentation.|
Thanks for watching.
|For more information|