Page 1 of 16

Oracle WebCenter Portal 11g Developer Workshop

Lab 09 – Configuring Mobile Features

Page 2 of 16

Overview

WebCenter Portal offers specific features for mobile devices, such as user-agent identification, device and device families’ management, variant pages for mobile devices and mobile preview. Page templates can be created specifically for mobile devices, and Portal will identify the device type and deliver the right page. In this lab we will go over some of these features, and create a mobile version of a portal page. At the end of this exercise, you will be able to: 1. Create a new managed device

2. Create a new device group

3. Create variant pages for specific device groups

4. Preview mobile pages in Portal

Page 3 of 16

Instructions

1. Upload the files in the lab_assets/Lab09_Mobile folder to the Contribution Folders/OraHealth/images folder in the Content Server.

2. Log in to WebCenter Portal as weblogic. Go to the Administration page for the Portal. Go to the Device Settings tab and open the Devices tab.

3. Click on the Create button and set the following values:

o Name: NokiaLumia

o Display Name: Nokia Lumia

o User Agent: *Lumia 920*

o Description: Nokia Lumia

4. Click on the Choose Attributes button.

5. Check the Select All checkbox (on top) and uncheck the following attributes:

o Icon

o model-version

Page 4 of 16

6. Click OK and enter the following values:

o brand-name: Nokia

o device-os: Windows

o device-type: smartphone

o device_default_aspect_ration: 16x9

o device_os_version: Windows8.0

o device_preview_css: background-

image:url('http://server:7777/webcenter/content/conn/ucmserver/path/Cont

ribution%20Folders/OraHealth/images/Nokia_Lumia_800_VER.png'); background-repeat:no-repeat;background-position: center 20px;

o device_preview_horizontal_css: background-

image:url('http://server:7777/webcenter/content/conn/ucmserver/path/Cont

ribution%20Folders/OraHealth/images/Nokia_Lumia_800_HOR.png');

background-repeat:no-repeat;background-position: center 20px;height:810px;

Page 5 of 16

o device_preview_viewport_css: border:none; position:relative; top:200px;

o device_preview_viewport_horizontal_css: border:none; position:relative; top:86px;

o device_streaming_flv: True

o device_streaming_preferred_http_protocol: progressive_download

o device_streaming_preferred_protocol: http

o device_video_streaming: True

o display_orientation_support: True

o display_resolution_height: 1280

o display_resolution_width: 768

o is-wireless_device: true

o marketing-name: Lumia 920

o model-name: Lumia920

7. Click Create.

Page 6 of 16

8. We can see the new device at the end of the list.

9. Now we will create a new Device Group and add this new device to it.

10. Go to the Device Groups tab and click Create.

11. Set the following values:

o Name: WindowsPhones

Page 7 of 16

o Display Name: Windows Phones

12. Move the NokiaLumia device to the Selected Devices column.

13. Click Create.

14. Check the Available option.

Page 8 of 16

15. Go to the OraHealth portal and edit the Our Staff page.

16. First, let’s preview the page as it would appear in our new device.

17. Click on the Preview () button and select the Nokia Lumia device.

Page 9 of 16

18. The preview will appear.

19. We will create a ‘cleaner’ version of this page for mobile users.

20. Go to the Pages tab, select the Our Staff page, click on the Add button and select Page Variant.

Page 10 of 16

21. Select Windows Phones and make sure Copy Base Page Content and Style is checked. Click Create.

Page 11 of 16

22. Notice a new page in the navigation below Our Staff. This page will be delivered to devices that match the Windows Phone device group. Select this page and click Edit.

Page 12 of 16

23. Drag and drop the components in order to have a single column. Remove some of the Task Flows to reduce the amount of content in the page. Adjust the width of the box to 768px. Save the page.

24. Preview the page as Nokia Lumia to see the modified version of the page.

Page 13 of 16

25. Now preview the page as another mobile device, and see the original page rendered.

Page 14 of 16

26. For added bonus, create a Variant page for your mobile device and test it on your mobile browser.

Page 15 of 16

27. Save the page and exit edit mode.

Page 16 of 16

Oracle WebCenter Portal 11g Developer Workshop – LAB 09 Configuring Mobile Features

September, 2014

Author: Denis Abrantes

Oracle Corporation

World Headquarters

500 Oracle Parkway

Redwood Shores, CA 94065

U.S.A.

Worldwide Inquiries:

Phone: +1.650.506.7000

Fax: +1.650.506.7200

oracle.com

Copyright © 2014, Oracle. All rights reserved.

This document is provided for information purposes only and the

contents hereof are subject to change without notice.

This document is not warranted to be error-free, nor subject to any

other warranties or conditions, whether expressed orally or implied

in law, including implied warranties and conditions of merchantability

or fitness for a particular purpose. We specifically disclaim any

liability with respect to this document and no contractual obligations

are formed either directly or indirectly by this document. This document

may not be reproduced or transmitted in any form or by any means,

electronic or mechanical, for any purpose, without our prior written permission.

Oracle, JD Edwards, PeopleSoft, Fatwire and Siebel are registered trademarks of Oracle

Corporation and/or its affiliates. Other names may be trademarks

of their respective owners.