47
Page 1 of 47 Oracle WebCenter Portal 11g Developer Workshop Lab 13 Building a Mobile Application with Oracle MAF

Oracle WebCenter Portal 11g - WordPress.com · application before continuing. Oracle Mobile Application Framework (MAF) is a hybrid mobile framework that enables developers to rapidly

  • Upload
    others

  • View
    4

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Oracle WebCenter Portal 11g - WordPress.com · application before continuing. Oracle Mobile Application Framework (MAF) is a hybrid mobile framework that enables developers to rapidly

Page 1 of 47

Oracle WebCenter Portal 11g Developer Workshop

Lab 13 – Building a Mobile Application with Oracle MAF

Page 2: Oracle WebCenter Portal 11g - WordPress.com · application before continuing. Oracle Mobile Application Framework (MAF) is a hybrid mobile framework that enables developers to rapidly

Page 2 of 47

Overview

IMPORTANT: Before starting this lab, make sure you went through the pre-requisite tasks, such as installing JDeveloper 12c with the MAF extension, installing the SDK, and configuring the emulator (if you’re not planning on deploying the application to your mobile phone). If possible, go over the getting started materials and deploy a tutorial application before continuing. Oracle Mobile Application Framework (MAF) is a hybrid mobile framework that enables developers to rapidly develop and deploy applications to iOS and Android platforms. Oracle MAF leverages Java, HTML5 and JavaScript to deliver a complete MVC framework with declarative user interface definition, device features integration and built-in security. Oracle MAF provides a visual and declarative development experience and maximizes code reuse resulting in faster development of mobile applications. In this lab, you will develop a mobile application to consume the REST services provided by the Portal. Because the REST interface provided by WebCenter Portal is too complex for the MAF wizards to leverage, you will deploy an application that will connect to the Portal and return information as web services. That way, you will be able to develop the entire mobile application without writing a single line of code! At the end of this exercise, you will be able to: 1. Create a new Mobile Application

2. Configure the navigation between the application views

3. Consume web service information

4. Deploy the application to a mobile device or emulator

Page 3: Oracle WebCenter Portal 11g - WordPress.com · application before continuing. Oracle Mobile Application Framework (MAF) is a hybrid mobile framework that enables developers to rapidly

Page 3 of 47

Instructions

1. Open JDeveloper 11.1.1.7.

2. Our mobile application will not access the Portal’s REST services directly. It will access the information through Web Services. In the lab_assets/Lab13_MAF folder, you will find a JDeveloper application called WCPREST. Open this application.

3. Expand the Services project and find the Java classes. You need to edit 2 files to set the hostname of your Portal server. The files you need to edit are:

o RESTUtils.java

o WCPortal.java

4. Set the SERVER_URL variable with the hostname and port of your Portal server (WC_Spaces managed server). Save all files.

5. Right-click the Services project and select Deploy -> wcprest…

6. Deploy this application to the WC_CustomPortal managed server. Make sure this managed server is running so you can access the web services.

7. Once the deployment is finished, you can access the Weblogic Console and see the wcprest application in the Deployments screen. Click on this application and you can see the web services that are available.

Page 4: Oracle WebCenter Portal 11g - WordPress.com · application before continuing. Oracle Mobile Application Framework (MAF) is a hybrid mobile framework that enables developers to rapidly

Page 4 of 47

8. The URLs for the web services will be:

o http://server:8890/wcprest/WCPortalService?WSDL

9. The web services will provide the following operations:

o getUserProfile: brings user profile information.

o setUserStatus: allows user to set the status message.

o getPortals: returns a list of portals available in the Portal server.

o getPortalInfo: brings information about a portal (requires guid parameter).

o getPortalRecentActivity: returns a list of recent activities executed in a portal (requires guid parameter).

o getPortalMembers: returns a list of members of a portal (requires guid parameter).

10. It’s highly recommended that you test these web services and all operations in SoapUI or a similar application before mapping them to your mobile app.

11. Close JDeveloper 11.1.1.7 and open JDeveloper 12c.

Page 5: Oracle WebCenter Portal 11g - WordPress.com · application before continuing. Oracle Mobile Application Framework (MAF) is a hybrid mobile framework that enables developers to rapidly

Page 5 of 47

12. Click on New Application and select Mobile Application Framework Application.

13. Name your application OHMobileClient and click Next for the subsequent screens of the wizard, keeping all the default values. Click Finish in the last screen.

14. The first thing we need to do is create a Feature, which is an “area” or “part” of

the application. In the maf-feature.xml file editor, click the Create ( ) button and set the feature Name as Home.

Page 6: Oracle WebCenter Portal 11g - WordPress.com · application before continuing. Oracle Mobile Application Framework (MAF) is a hybrid mobile framework that enables developers to rapidly

Page 6 of 47

15. Go to the Content tab and click on the Create button for File. Select Task Flow.

16. Set the File Name as home-task-flow.xml and click OK.

17. In the Task Flow editor, drag and drop a View component into the diagram. Name it Home.

18. We need a few more views to get the basic functionality working. Add 6 more views to the diagram, with the following names:

o UserProfile

o UpdateStatus

o ListPortals

o PortalDetails

Page 7: Oracle WebCenter Portal 11g - WordPress.com · application before continuing. Oracle Mobile Application Framework (MAF) is a hybrid mobile framework that enables developers to rapidly

Page 7 of 47

o PortalMembers

o PortalActivity

19. Using the Control Flow Case component, create the following flows between the views:

o Home to UserProfile: goUserProfile

o UserProfile to UpdateStatus: goUpdateStatus

o UpdateStatus to UserProfile: goUserProfile

o Home to ListPortals: goPortalList

o ListPortals to PortalDetails: goPortalDetails

o PortalDetails to PortalMembers: goPortalMembers

o PortalDetails to PortalActivity: goPortalActivities

o PortalMembers to Home: goHome

o PortalActivity to Home: goHome

o PortalDetails to Home: goHome

Page 8: Oracle WebCenter Portal 11g - WordPress.com · application before continuing. Oracle Mobile Application Framework (MAF) is a hybrid mobile framework that enables developers to rapidly

Page 8 of 47

20. Double-click the Home view to create the AMX page. Leave only the Header facet checked and click OK.

Page 9: Oracle WebCenter Portal 11g - WordPress.com · application before continuing. Oracle Mobile Application Framework (MAF) is a hybrid mobile framework that enables developers to rapidly

Page 9 of 47

21. In the visual editor, go to the Preview tab and set the Form Factor to Android Medium. In the Structure Panel, expand the Panel Page and Facet – header and change the output text to OraHealth Mobile Client.

22. Add a Panel Group Layout to the Panel Page component and set the following properties:

o Layout: vertical

o Halign: center

o Valign: top

23. Inside the Panel Group Layout, add the following components, with these properties:

o Spacer: Height: 40

o Image: Source: http://server:7777/webcenter/content/conn/ucmserver/path/Contribution%20Folders/OraHealth/images/OraHealth_logo.jpg

Page 10: Oracle WebCenter Portal 11g - WordPress.com · application before continuing. Oracle Mobile Application Framework (MAF) is a hybrid mobile framework that enables developers to rapidly

Page 10 of 47

o Spacer: Height: 10

o OutputText:

Value: OraHealth Mobile Application

o Spacer: Height: 40

o Button (from the General Controls tab):

Text: View Portal List

Action: goPortalList [select from option list]

o Spacer: Height: 30

o Button:

Text: View User Profile

Action: goUserProfile [select from option list]

24. Your page should look like this:

Page 11: Oracle WebCenter Portal 11g - WordPress.com · application before continuing. Oracle Mobile Application Framework (MAF) is a hybrid mobile framework that enables developers to rapidly

Page 11 of 47

25. The Home page is done (for now). Go back to the Task Flow and double-click the UserProfile view. Leave the Header and Primary Action facets checked and click OK.

Page 12: Oracle WebCenter Portal 11g - WordPress.com · application before continuing. Oracle Mobile Application Framework (MAF) is a hybrid mobile framework that enables developers to rapidly

Page 12 of 47

26. Go to the Preview tab, set the Form Factor as Android Medium. Expand the facets and set the Header text as User Profile. For the Button, set the Action as __back [select from option list]. Add a Panel Group Layout (layout Vertical, Halign Center, Valign Top) inside the Panel Page component.

27. Go back to the Task Flow and do the same procedure for the ListPortals and UpdateStatus views.

Page 13: Oracle WebCenter Portal 11g - WordPress.com · application before continuing. Oracle Mobile Application Framework (MAF) is a hybrid mobile framework that enables developers to rapidly

Page 13 of 47

28. Double-click the PortalDetails view. Leave the Header, Primary Action and Secondary Action facets checked and click OK.

29. Go to the Preview tab, set the Form Factor as Android Medium. Expand the facets and set the Header text as Portal Details. For the first button, set the Action as __back [select from option list]. For the second button, set the Action as goHome and the Text as Home. Add a Panel Group Layout – vertical inside the Panel Page component.

Page 14: Oracle WebCenter Portal 11g - WordPress.com · application before continuing. Oracle Mobile Application Framework (MAF) is a hybrid mobile framework that enables developers to rapidly

Page 14 of 47

30. Go back to the Task Flow and repeat the same procedure for the PortalMembers and PortalActivity views. Save all pages.

31. The navigation part of the application seems to be done. Your Task Flow should look like this:

32. Now it’s time to map the Web Services and operations to the pages. Right-click the ApplicationController project and select New -> From Gallery. From the option window, select Business Tier -> Web Services -> Web Service Data Control. Click OK.

Page 15: Oracle WebCenter Portal 11g - WordPress.com · application before continuing. Oracle Mobile Application Framework (MAF) is a hybrid mobile framework that enables developers to rapidly

Page 15 of 47

33. Set the Data Source Name as WCPortalService. Copy and paste the URL for the WCPortalService web service. Click Next.

34. In the next screen, click the Add All button ( ) to move all operations to the Selected column.

Page 16: Oracle WebCenter Portal 11g - WordPress.com · application before continuing. Oracle Mobile Application Framework (MAF) is a hybrid mobile framework that enables developers to rapidly

Page 16 of 47

35. Click Next for the remaining screens of the wizard. Click Finish to create the Data Control. You will now add web services information to the pages.

36. Open the UserProfile view. Expand the Data Controls tab, and expand WCPortalService -> getUserProfile() and find the Return object. This component contains the result set from the web service call. Drag and drop this component into the Panel Group Layout and select MAF Iterator.

Page 17: Oracle WebCenter Portal 11g - WordPress.com · application before continuing. Oracle Mobile Application Framework (MAF) is a hybrid mobile framework that enables developers to rapidly

Page 17 of 47

37. In the Gallery screen, change all Component to Use items to MAF Output Text. Click OK.

38. All the information needed is in the page; you will now format the layout of the page.

Page 18: Oracle WebCenter Portal 11g - WordPress.com · application before continuing. Oracle Mobile Application Framework (MAF) is a hybrid mobile framework that enables developers to rapidly

Page 18 of 47

39. Inside the Iterator component, add a Spacer (Height 10) above the Output Text components.

40. Below the Spacer, add a Panel Group Layout (Vertical / Center / Top)

41. Inside this Panel Group Layout, add the following components:

o Move the Output Text for the displayName attribute to the new Panel Group Layout. Set the Inline Style property as color:Maroon; font-size:x-large;

o Spacer: Height 5

o Image: Source #{row.photo}

PS: Delete the Output Text for the photo attribute.

o Spacer: Height 10

o Panel Group Layout: Layout Horizontal, Halign Center, Valign Middle

Inside this Panel Group Layout, add the following components:

Output Text:

o Value: User ID: #{row.email}

o Inline Style: color:Navy; font-size:small;

o PS: delete the Output Text for the email attribute.

Spacer: Width 5

Output Text:

o Value: User ID: #{row.id}

o Inline Style: font-size:small;

PS: delete the Output Text for the id attribute.

o Spacer: Height 10

o Deck (Layout tab)

o Set the following properties for the Deck component:

Displayed Child: #{pageFlowScope.pDisplayedChild}

Page 19: Oracle WebCenter Portal 11g - WordPress.com · application before continuing. Oracle Mobile Application Framework (MAF) is a hybrid mobile framework that enables developers to rapidly

Page 19 of 47

Inline Style: break-after:auto; column-count:1; column-

span:none; alignment-adjust:central; max-width:90%; background-color:rgb(248,254,175); border-bottom-left-radius:1px 1px; border-bottom-right-radius:1px 1px; border-color:#ffad52; border-top-left-radius:1px 1px; border-top-right-radius:1px 1px; border-width:medium; border-radius:2pt 2pt 2pt 2pt / 2pt 2pt 2pt 2pt ; border-style:solid;

PS: the Displayed Child property defines which member of the Deck will be displayed. The Deck will contain information about the user’s job title, job description and department. You can manipulate the Displayed Child property to set which information is displayed on the Deck.

o Inside the Deck component, add the following:

Transition (Operations tab):

Trigger Type: forwardNavigate

Transition: slideLeft

Transition:

Trigger Type: backNavigate

Transition: slideRight

PS: The Transition component defines the animation that will happen when the Displayed Child changes.

Link (commandLink). Set the following properties:

o ID: DeckChild1

o Text: [leave it empty]

o Inline Style: text-decoration:none;

Inside this component, add:

Panel Group Layout

o Layout: Vertical / Halign: Center / Valign: Middle

Inside the Panel Group Layout, add:

o Spacer: Height 10

o Output Text:

Page 20: Oracle WebCenter Portal 11g - WordPress.com · application before continuing. Oracle Mobile Application Framework (MAF) is a hybrid mobile framework that enables developers to rapidly

Page 20 of 47

Value: Department

Inline Style: color:Orange; font-size:large; text-decoration:none;

o Spacer: Height 10

o Output Text:

Value: #{row.organizations_department}

Inline Style: font-size:x-large; color:Maroon; text-decoration:none;

PS: Delete the Output Text for the department attribute.

o Spacer: Height 10

Add a Set Property Listener (Operations tab) to the Link component. Set the following properties:

o From: DeckChild2

o To: #{pageFlowScope.pDisplayedChild}

o Type: swipeLeft

Below the Link component, add another Link component.

Set the following properties for the Link component:

o ID: DeckChild2

o Text: [leave it empty]

o Inline Style: text-decoration:none;

Inside this component, add:

Panel Group Layout

o Layout: Vertical / Halign: Center / Valign: Middle

Inside the Panel Group Layout, add:

o Spacer: Height 10

o Output Text:

Page 21: Oracle WebCenter Portal 11g - WordPress.com · application before continuing. Oracle Mobile Application Framework (MAF) is a hybrid mobile framework that enables developers to rapidly

Page 21 of 47

Value: Job Description

Inline Style: color:Orange; font-size:large; text-decoration:none;

o Spacer: Height 10

o Output Text:

Value: #{row.organizations_description}

Inline Style: font-size:x-large; color:Maroon; text-decoration:none;

PS: Delete the Output Text for the description attribute.

o Spacer: Height 10

Add a Set Property Listener to the Link component. Set the following properties:

o From: DeckChild1

o To: #{pageFlowScope.pDisplayedChild}

o Type: swipeRight

Add another Set Property Listener to the Link component. Set the following properties:

o From: DeckChild3

o To: #{pageFlowScope.pDisplayedChild}

o Type: swipeLeft

Below the second Link component, add a third Link. Set the following properties:

o ID: DeckChild3

o Text: [leave it empty]

o Inline Style: text-decoration:none;

Inside this component, add:

Panel Group Layout

Page 22: Oracle WebCenter Portal 11g - WordPress.com · application before continuing. Oracle Mobile Application Framework (MAF) is a hybrid mobile framework that enables developers to rapidly

Page 22 of 47

o Layout: Vertical / Halign: Center / Valign: Middle

Inside the Panel Group Layout, add:

o Spacer: Height 10

o Output Text:

Value: Job Title

Inline Style: color:Orange; font-size:large; text-decoration:none;

o Spacer: Height 10

o Output Text:

Value: #{row.organizations_title}

Inline Style: font-size:x-large; color:Maroon; text-decoration:none;

PS: Delete the Output Text for the title attribute.

o Spacer: Height 10

Add a Set Property Listener to the Link component. Set the following properties:

o From: DeckChild2

o To: #{pageFlowScope.pDisplayedChild}

o Type: swipeRight

42. So far your Structure Panel should look like this:

Page 23: Oracle WebCenter Portal 11g - WordPress.com · application before continuing. Oracle Mobile Application Framework (MAF) is a hybrid mobile framework that enables developers to rapidly

Page 23 of 47

43. Below the Panel Group Layout (pgl2) add a Spacer component (Height 10).

44. Below the Spacer component, add a Panel Group Layout with the following properties:

o Layout: Vertical

o Halign: Start

o Valign: Middle

o Inline Style: background-color:Silver;padding-bottom:10px;padding-top:5px;

45. Inside this Panel Group Layout, add the following components:

o Output Text:

Value: Current Status

Page 24: Oracle WebCenter Portal 11g - WordPress.com · application before continuing. Oracle Mobile Application Framework (MAF) is a hybrid mobile framework that enables developers to rapidly

Page 24 of 47

Inline Style: font-size:small; font-style:italic;

o Spacer: Height 3

o Output Text

Value: #{row.status}

Inline Style: color:Black; font-size:large;

PS: delete the Output Text for the status attribute.

46. Add a Spacer component (Height 10) below the Panel Group Layout (pgl7)

47. Below the Spacer, add a Command Button component. Set the Text property to Update Status and the Action to goUpdateStatus.

48. Add a Spacer (Height 10) below the Command Button.

49. Change the Value of the timezone Output Text to Timezone: #{row.timeZone}

50. Your Structure panel should look like this:

Page 25: Oracle WebCenter Portal 11g - WordPress.com · application before continuing. Oracle Mobile Application Framework (MAF) is a hybrid mobile framework that enables developers to rapidly

Page 25 of 47

51. The next step is to ensure the information from the user’s profile will be refreshed every time the user opens the page. Go to the Bindings tab and click the

Create ( ) button in the Executables column. Select Invoke Action and click OK.

Page 26: Oracle WebCenter Portal 11g - WordPress.com · application before continuing. Oracle Mobile Application Framework (MAF) is a hybrid mobile framework that enables developers to rapidly

Page 26 of 47

52. Set the ID as callGetUserProfile and select the getUserProfile bind.

53. Click OK. Move the executable to just below the variables component.

54. Save and close the page.

55. Now we need to return to the Home page and set which member of the Deck will be displayed when the page first renders. Open the Home page and select the View User Profile button.

o Add a Set Property Listener to the Button component. Set the following properties:

From: DeckChild1

To: #{pageFlowScope.pDisplayedChild}

Page 27: Oracle WebCenter Portal 11g - WordPress.com · application before continuing. Oracle Mobile Application Framework (MAF) is a hybrid mobile framework that enables developers to rapidly

Page 27 of 47

Type: [leave empty]

56. Go back to the Task Flow and double-click the UpdateStatus page.

57. Drag and drop the setUserStatus() Data Source into the Panel Group Layout. Select MAF Parameter Form…

58. In the Edit Form Fields screen, set the label as New Status and click OK.

59. Select the Button component that was created and set the following properties:

o Text: Set Status

o Action: goUserProfile

Page 28: Oracle WebCenter Portal 11g - WordPress.com · application before continuing. Oracle Mobile Application Framework (MAF) is a hybrid mobile framework that enables developers to rapidly

Page 28 of 47

o PS: With this configuration, the button will execute the service, and will navigate back to the User Profile page.

60. Save and close the page.

61. Double-click the ListPortals view. Expand the getPortals() data control and drag & drop the Return component to the Panel Group Layout. Select MAF List View.

62. In the List View Gallery screen, select the Main-Sub Text and the layout with the Icon and 2 lines of text. Click OK.

Page 29: Oracle WebCenter Portal 11g - WordPress.com · application before continuing. Oracle Mobile Application Framework (MAF) is a hybrid mobile framework that enables developers to rapidly

Page 29 of 47

63. Set the Main Text as displayName, the Subordinate Text as description and the Image as icon. Click OK.

Page 30: Oracle WebCenter Portal 11g - WordPress.com · application before continuing. Oracle Mobile Application Framework (MAF) is a hybrid mobile framework that enables developers to rapidly

Page 30 of 47

64. Go to the Bindings tab, select the Return component in the Bindings column

and click the Edit ( ) button.

65. Select the guid attribute and move it to the Display Attributes column.

66. Click OK. Click on the Create ( ) button in the Executables column. Select Invoke Action and click OK.

67. Set the ID as callGetPortals and select the getPortals bind.

Page 31: Oracle WebCenter Portal 11g - WordPress.com · application before continuing. Oracle Mobile Application Framework (MAF) is a hybrid mobile framework that enables developers to rapidly

Page 31 of 47

68. Click OK. Move the executable to just below the variables component.

69. Save the page. Go back to the Preview tab.

70. In the Structure Panel, expand List View -> List Item -> Table Layout -> Row Layout -> Cell Format and select the Image component. Set the Inline Style as height:25px; width:25px;

71. Select the List Item component and set the action to goPortalDetails.

72. Add a Set Property Listener to the List Item with the following settings:

o From: #{row.guid}

o To: #{pageFlowScope.PortalGuid}

Page 32: Oracle WebCenter Portal 11g - WordPress.com · application before continuing. Oracle Mobile Application Framework (MAF) is a hybrid mobile framework that enables developers to rapidly

Page 32 of 47

73. The #{pageFlowScope.PortalGuid} variable will contain the guid for the portal selected from the list. This value will be passed to the other pages to be used as parameters for the web service calls.

74. Save and close this page.

75. Back to the Task Flow, double-click the PortalDetails page.

76. Expand the getPortalInfo(String) data control and drag & drop the Return component into the Panel Group Layout. Select MAF Iterator.

77. In the Edit Action Binding screen, set the guid parameter as #{pageFlowScope.PortalGuid}. Click OK.

Page 33: Oracle WebCenter Portal 11g - WordPress.com · application before continuing. Oracle Mobile Application Framework (MAF) is a hybrid mobile framework that enables developers to rapidly

Page 33 of 47

78. In the Edit Iterator screen, format the fields according to the image:

79. Click OK. Go to the Bindings tab and click on the Create button in the Executables column. Select Invoke Action and click OK.

Page 34: Oracle WebCenter Portal 11g - WordPress.com · application before continuing. Oracle Mobile Application Framework (MAF) is a hybrid mobile framework that enables developers to rapidly

Page 34 of 47

80. Set the ID as callGetPortalInfo and select the getPortalInfo bind.

81. Click OK. Move the executable to just below the variables component.

82. Save the page. Go back to the Preview tab.

83. You can format the components of the page to improve the layout. Some recommendations:

o Output Text for displayName. Inline Style: color:Maroon; font-size:x-large;

o Delete the Output Text for icon and add an Image component (Source: #{row.icon})

o Output Text for description. Inline Style: font-style:italic;

o Add a Panel Group Layout (Horizontal) and move the Created By, Is Public and Is Offline components into it. Use Spacers to separate them. Set the following properties:

Panel Label and Message. Inline Style: font-size:x-small;

Output Text inside the Panel Label. Inline Style: font-size:small;

Output Text isPublic:

Value: #{row.isPublic eq 'true' ? 'Public' : 'Private'}

Inline Style: #{row.isPublic eq 'true' ? 'color:green;font-weight:bold;' : 'color:red;font-weight:bold;'}

Output Text isOffline:

Value: #{row.isOffline eq 'true' ? 'Offline' : 'Online'}

Inline Style: #{row.isOffline eq 'true' ? 'color:red;font-weight:bold;' : 'color:green;font-weight:bold;'}

Portal ID. Inline Style: font-size:small;

Output Text inside the Panel Label. Inline Style: font-size:x-small;

o Use Spacers to separate the components

84. Below the Portal ID component, add 2 buttons with the following properties:

o Button 1:

Page 35: Oracle WebCenter Portal 11g - WordPress.com · application before continuing. Oracle Mobile Application Framework (MAF) is a hybrid mobile framework that enables developers to rapidly

Page 35 of 47

Text: View Portal Members

Action: goPortalMembers

o Button 2:

Text: View Portal Activities

Action: goPortalActivities

85. Add a Set Property Listener to each button, sending the value of #{row.guid} to #{pageFlowScope.PortalGuid}

86. Your Structure Panel should be similar to this:

87. Save and close the page. Now we just need to create the pages that list the Portal Members and Recent Activities.

88. In the Task Flow, open the PortalMembers page. Expand the getPortalMembers(String) data control and drag & drop the Return component to the Panel Group Layout. Select MAF List View…

Page 36: Oracle WebCenter Portal 11g - WordPress.com · application before continuing. Oracle Mobile Application Framework (MAF) is a hybrid mobile framework that enables developers to rapidly

Page 36 of 47

89. Select the Main-Sub Text layout that has 2 lines of text and no images. Click OK. In the next screen, set the guid parameter as #{pageFlowScope.PortalGuid} .

90. Click OK. In the next screen, set the Main Text as displayName and the Subordinate Text as role. Click OK.

91. Go to the Bindings tab and click on the Create button in the Executables column. Select Invoke Action and click OK.

Page 37: Oracle WebCenter Portal 11g - WordPress.com · application before continuing. Oracle Mobile Application Framework (MAF) is a hybrid mobile framework that enables developers to rapidly

Page 37 of 47

92. Set the ID as callGetPortalMembers and select the getPortalMembers bind.

93. Click OK. Move the executable to just below the variables component.

94. Save and close the page.

95. Repeat steps 88-94 to configure the PortalActivity page. Drag and drop the Return component under getPortalRecentActivity(String) data control into the Panel Group Layout.

o For the guid parameter, set the value as #{pageFlowScope.PortalGuid}

o For the List View, set the Main Text as displayMessage and the Subordinate Text as simpleDate.

o In the Binding, create the callGetPortalRecentActivity executable.

96. Save and close the file.

97. We are now ready to deploy and test the first version of our mobile application.

Page 38: Oracle WebCenter Portal 11g - WordPress.com · application before continuing. Oracle Mobile Application Framework (MAF) is a hybrid mobile framework that enables developers to rapidly

Page 38 of 47

98. Go to the Application menu and select Deploy -> New Deployment Profile.

99. Select the correct deployment profile for your device and click OK.

100. Click OK in the next window to accept the configuration.

101. Before deploying the application, expand the Application Resources tab and go to Descriptors -> ADF META-INF and double-click the maf-application.xml file. Set the Name as OraHealth Client (this is the name that will appear on the device screen). Uncheck the Show Navigation Bar… options.

Page 39: Oracle WebCenter Portal 11g - WordPress.com · application before continuing. Oracle Mobile Application Framework (MAF) is a hybrid mobile framework that enables developers to rapidly

Page 39 of 47

102. Go to the Device Access tab and make sure Network is checked.

103. For Android users, don’t forget to make sure the Android SDK can connect to your device before deploying the application:

Page 40: Oracle WebCenter Portal 11g - WordPress.com · application before continuing. Oracle Mobile Application Framework (MAF) is a hybrid mobile framework that enables developers to rapidly

Page 40 of 47

104. Go to the Application menu and select Deploy -> [your deployment profile]. Select between deploying to device or emulator.

105. After the deployment is finished, check your device (or the emulator). You should find the new application in the applications list.

Page 41: Oracle WebCenter Portal 11g - WordPress.com · application before continuing. Oracle Mobile Application Framework (MAF) is a hybrid mobile framework that enables developers to rapidly

Page 41 of 47

106. You Home page should look like this:

PS: The warning icon means this application was deployed in debug mode. You can remove this by setting the application to Release mode. Check MAF documentation for more information.

PS: If you are using an Android phone, do not use the back button from the device to navigate to previous pages. This event must be handled with javascript (which we did not create). The default action of the device’s back button is to close the application. To return to previous pages, use the button with the __back action that you configured in each page. This button is the Icon on the top left corner of the screen:

107. Click on the View User Profile button. Let’s see what the User Profile page looks like.

Page 42: Oracle WebCenter Portal 11g - WordPress.com · application before continuing. Oracle Mobile Application Framework (MAF) is a hybrid mobile framework that enables developers to rapidly

Page 42 of 47

PS: The user’s picture will not be displayed because there is no direct authentication between the mobile

application and WebCenter Portal.

108. The orange box contains information about the user’s job title, job description and department. Swipe your finger to the right and left to see the other information. This is achieved with the Deck component that you used previously.

109. Click on the Update Status button to go to the Update Status page.

Page 43: Oracle WebCenter Portal 11g - WordPress.com · application before continuing. Oracle Mobile Application Framework (MAF) is a hybrid mobile framework that enables developers to rapidly

Page 43 of 47

110. Type in a new status and click Set Status. You will be directed back to the User Profile page.

111. Log into the portal to see your updated status in the User’s page.

112. Go back to the application’s Home page and click on View Portal List.

113. Select the OraHealth portal to see the information page.

Page 44: Oracle WebCenter Portal 11g - WordPress.com · application before continuing. Oracle Mobile Application Framework (MAF) is a hybrid mobile framework that enables developers to rapidly

Page 44 of 47

PS: Notice how isPublic and isOffline are displayed as indicators. If the portal is not public, the font will be red. Try creating a new portal and setting it to private, or taking it offline and see how the information is displayed in the application.

114. Click on the View Portal Members link to see the members.

Page 45: Oracle WebCenter Portal 11g - WordPress.com · application before continuing. Oracle Mobile Application Framework (MAF) is a hybrid mobile framework that enables developers to rapidly

Page 45 of 47

115. Go back and click on the View Portal Activities to see a list of recent activities. Make some changes to the portal and return to the page to see the new information.

116. You can turn the phone to Landscape mode to read more information.

Page 46: Oracle WebCenter Portal 11g - WordPress.com · application before continuing. Oracle Mobile Application Framework (MAF) is a hybrid mobile framework that enables developers to rapidly

Page 46 of 47

117. To close the application in the mobile phone, you can use the home or back buttons. A javascript code can be added to include a confirmation screen before closing the application.

118. Save the application and close JDeveloper.

Page 47: Oracle WebCenter Portal 11g - WordPress.com · application before continuing. Oracle Mobile Application Framework (MAF) is a hybrid mobile framework that enables developers to rapidly

Page 47 of 47

Oracle WebCenter Portal 11g Developer Workshop – LAB 13 Building a Mobile Application with Oracle MAF

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.