Oracle WebCenter Portal 11g - WordPress.com...Oracle WebCenter Portal 11g Developer Workshop – LAB...
Transcript of Oracle WebCenter Portal 11g - WordPress.com...Oracle WebCenter Portal 11g Developer Workshop – LAB...
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.