Building a page on a webservice reference

Creating a standard looking page on a webservice reference is one thing. Making it more user-friendly is another. In this recipe, we are going to take a look at some of the possibilities for fine-tuning the look of the page created in the previous recipe.

Getting ready

Make sure that the Flickr REST webservice reference from the previous recipe is available.

How to do it...

Because the REST service we created earlier responds with an XML message, we can use output parameters to hold the returned data. To add these parameters, navigate to the webservice reference in Shared Components and select the Flickr REST service.

  1. Find the REST Output Parameters section and click Add Output Parameter.
  2. In the Name field, enter photo_id.
  3. In the Path field, enter /photos/photo/@id.
  4. Add another parameter using values title and /photos/photo/@title.
  5. Add a third parameter using values secret and /photos/photo/@secret.
    How to do it...
  6. Click Apply Changes at the top of the screen.

We are now going to create a Form and Report based on these new parameters.

  1. Go to the Application Builder.
  2. Click the Create Page button.
  3. Select Form and click Next.
  4. Select Form and Report on Web Service and click Next.
  5. Select the Flickr REST service and the operation doREST and click Next.
  6. Keep all defaults and click Next.
  7. Check all boxes next to the Result parameters to select them all and click Next.
  8. Create a new tab for this page and click Next until we reach the confirmation page.
  9. Click Create Form and Report.

Now we can run the page to see the result. In the input fields, use the same values that we used in the previous recipe to compare the outcome.

How to do it...

Keep in mind that this will only work correctly if the response contains a single record, else APEX will throw an error. For this to be corrected, we have to change the generated query that extracts the data out of the XML response. We will do that later in this recipe.

To make this page a little more user-friendly, we will make some changes to the way the fields are displayed. First of all, not all input parameters need to be shown. Method and Api_Key will always be the same, so we will make them hidden parameters.

  1. Go to Application Builder and open the page we created for this webservice call.
  2. Under Region | Body | doREST find the item for METHOD.
  3. Right-click the METHOD item and click Edit.
  4. Change Display as to Hidden using the select list.
  5. Change Default Value to flickr.people.getPublicPhotos.
  6. Click Apply Changes.
  7. Now find the API_KEY item and click Edit.
  8. Again change Display as to Hidden.
  9. Change Default Value to your Flickr API_KEY.
  10. Click Apply Changes.

If we run the page now, we can see that only the User_id field is left on the screen. The other values will be sent to the webservice call without the user having to input them.

The Report could also use a little makeover. Let's make the PHOTO_ID column a clickable link to the Flickr page for the photo.

  1. Find the Results region and expand all Report Columns.
  2. Right-click on the Photo_id column and click Edit.
  3. Scroll down to the Column Link section.
  4. Change Link Text to #photo_id#.
  5. Change Target to URL.
  6. Change URL to http://www.flickr.com/photos/&P17_USER_ID./#photo_id#. If the user_id item is named differently in your situation, change that part of the URL accordingly.
  7. Click Apply Changes and run the page again.

Clicking on the data in the Photo_Id column will redirect to the Flickr page for the photo.

How to do it...

How it works…

The extraction of data from the XML response is done by making use of the XML-DB functionality of the Oracle database. Most of the time we won't see a lot of this when we are creating simple request/response pages. In this recipe, we've seen a hint of this when we extracted data using paths like /photos/photo/@id. This path is directly related to the structure of the XML response.

In the next section, we will see a more elaborate way to extract date from this XML.

There's more…

Remember that we promised to solve the problem with more users that have more than one photo attached? We're going to do that now.

To understand the problem, we need to look at the XML response that we are getting from Flickr. The following is an example from a user that has two photos available to show: 

<?xml version="1.0" encoding="utf-8" ?>
<rsp stat="ok">
<photos page="1" pages="1" perpage="100" total="2">
<photo id="5155098679" owner="52012402@N05" secret="3f51a3dc69" server="4042" farm="5" title="image074" ispublic="1" isfriend="0" isfamily="0" />
<photo id="4793142352" owner="52012402@N05" secret="5716d82714" server="4141" farm="5" title="image111" ispublic="1" isfriend="0" isfamily="0" />
</photos>
</rsp>

[1346_08_03.xml]

As we can see, the XML has three nodes: rsp, photos, and photo. And that is exactly the problem here. Because the generated code from APEX is only told that there is a single 'photo' node, it will fail when a second 'photo' is found. For that to be corrected, we have to tell APEX to look a level higher and loop through everything that is found underneath that level.

  1. Go to the Edit Page screen, right-click on the Results region, and click Edit.
  2. Change the query to the following:
    select extractValue(value(t),'*/@page') "page"
, extractValue(value(ti),'*/@secret') "secret"
, extractValue(value(ti),'*/@id') "photo_id"
, extractValue(value(ti),'*/@title') "title"
from wwv_flow_collections c
, table(xmlsequence(extract(c.xmltype001,'*/photos'))) t
, table(xmlsequence(extract(value(t),'*/photo'))) ti
where c.collection_name = 'P17_DOREST_RESULTS'

    [1346_08_04.sql]

  3. Now run the page again and use a User_Id with more than one photo in the profile.
There's more…

And now that we are going, we can also change the page so that the image itself is shown as a thumbnail on this page itself and have the link on the page direct to the photo immediately.

  1. Return to the query for the Results region.
  2. Change the query to the following:
    select extractValue(value(t),'*/@page') "page"
, extractValue(value(ti),'*/@secret') "secret"
, extractValue(value(ti),'*/@id') "photo_id"
, extractValue(value(ti),'*/@farm') "farm"
, extractValue(value(ti),'*/@server') "server"
, extractValue(value(ti),'*/@title') "title"
, '<img src="http://farm'||extractValue(value(ti),'*/@farm')||'.static.flickr.com/'||extractValue(value(ti),'*/@server')||'/'||extractValue(value(ti),'*/@id')||'_'||extractValue(value(ti),'*/@secret')||'_s.jpg">' "image"
from wwv_flow_collections c
, table(xmlsequence(extract(c.xmltype001,'*/photos'))) t
, table(xmlsequence(extract(value(t),'*/photo'))) ti
where c.collection_name = 'P17_DOREST_RESULTS'

[1346_08_05.sql]

As we can see there are some new columns that will be selected. We need those later to create the direct link to the large image.

The last column with the "image" alias is actually some HTML code to generate an<img> tag for a Flickr image with size 's', which is the size of a thumbnail.

  1. Now go the Report Attributes tab and click on the pencil icon next to the image column.
  2. Under Column attributes change Display as to Standard Report Column and click Apply Changes.

    The thumbnail is now set up. Now let's change the link.

  3. Click on the pencil icon next to the photo_id column.
  4. Scroll down to the Column Link section and change the URL to http://farm#farm#.static.flickr.com/#server#/#photo_id#_#secret#_b.jpg.
  5. Click Apply Changes.

As we are tidying up, we can also remove the columns that are not interesting from view.

  1. Uncheck the checkboxes under the Show column for page, secret, farm and server.
  2. Click Apply Changes.
  3. Run the page to see the final results.
There's more…

With this knowledge in hand, we can

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.133.152.198