In this blog we look how we can use an external REST service with JDev 12.2.1.2. To make things more interesting we don’t use an ADF based REST service and we look how to get nested data into the UI.
For this sample we like to create an application which allows to search for music tracks and show the results in a table or listview. To get the music data we use a REST service and to display the data we use ADF faces application.
In Part 1 we create the application and the project for the REST Data Control. In Part 2 we started creating the UI using the REST Data Control. In this final part we are enhancing the UI by using nested data from the REST Web Service and add this as column to the search result table. Before we start we look at the use case again.
Use Case
Before we begin implementing something which uses the external REST service we have to think about the use case. We like to implement a music title search using the external MusicBrainz REST service. A user should be able to enter a music title or part of a music title and as a result of the search she/he should get a list of titles, the artist or artists, the album and an id.
Handling nested Data
The use case demands that we add the artist and the album the music track is on to the same table. A look at the table in it’s current layout, make this understandable.
First of all we need to identify the dat a we want to add to the table in the response we get from the service.
Let’s investigate the JSON data, part of it, we get from the service for the search for the track ‘yesterday’
{
"created": "2017-08-02T12:42:48.815Z",
"count": 5985,
"offset": 0,
"recordings": [
{
"id": "465ad10d-97c9-4cfd-abd3-b765b0924e0b",
"score": "100",
"title": "Yesterday",
"length": 243560,
"video": null,
"artist-credit": [
{
"artist": {
"id": "351d8bdf-33a1-45e2-8c04-c85fad20da55",
"name": "Sarah Vaughan",
"sort-name": "Vaughan, Sarah",
"aliases": [
{
"sort-name": "Sarah Vahghan",
"name": "Sarah Vahghan",
"locale": null,
"type": null,
"primary": null,
"begin-date": null,
"end-date": null
},
...
]
}
}
],
"releases": [
{
"id": "f088ce44-62fb-4c68-a1e3-e2975eb87f52",
"title": "Songs of the Beatles",
"status": "Official",
"release-group": {
"id": "5e4838fa-07f1-3b93-8c9d-e7107774108b",
"primary-type": "Album"
},
"country": "US",
I marked the info ne need in blue in the data above. We see that the artist name is inside a list of name ‘artist_credit’ and that there can be multiple artists inside the ‘artist_credit’. This is a typical master/detail relationship.
The same is true for the album name which is an attribute inside a list of ‘releases’. The big question now is how do we get the nested data into the table as column.
When we expand the MusicBrainz Data Control we see the same structure we saw in the JSON data
So, the data is there, we only need to get to it. The data is structured like a tree and ADF is capable of accessing data in a tree structure (e.g. using an af:tree component). However, we like to use a simple table and don’t want to use a af:tree or af:treeTable. To get to the data, we first have to add the nested structure to the recordings binding we already use to display the current two columns of the table.
Right now we see the first level of the tree, the ‘recodrings’. Click the green ‘+’ sign to add the next level ‘artist_credit’
Add all attributes to the right side
As the artist name is still one level down, click the green ‘+’ sign again and add the ‘artist’ level
And shuffle the id and name attribute to the right side
Finnally we need to add the ‘releases’ level to get to the album name. For this select the ‘recordings’ level (the first) and click the green ‘+’ sign
And shuffle the id, title and track_count to the right side
Now all related data we need can be accessed via the ‘recordings’ binding.
We start with the artist column. Select the af:table in the structure window and open hte properties window
Click the green ‘+’ sign twice in the columns section to add two columns
Select the first added column (score in the image) and change the display label to ‘Artist’ and the component To Use’ to ‘ADF Output Text’. The second added column we change the display label to ‘Album’ and the ‘Component To Use’ again to ‘ADF Output Text’
We change the ‘Value Binding’ in the next step.
To get to the data for the artists we need to traverse two levels of sub rows. First level is the ‘artist_credit’, the second level is the artist itself. Here we have to keep in mind, that there can be more than one artist. In this case we have to join the names into one string for the table. As the ‘artist_credit’ itself can occur more than once, at least that’S what the data structure is telling us, we use an iterator to get the data.
The value property points to the current row and selects the ‘artist_creadit’. Each item we get from this iterator we access via the var property. So the item inside the iterator can be addressed as ‘artists’.
The artists can be one or more so we need another iterator to get to the artist data.
<af:iterator id="i2" value="#{artists.artist}" var="art" varStatus="artStat">
The value property for this iterator points to the artist we got from the outer iterator and is addressed as #{artists.artist}. To access attributes inside the artist data structure we use the var property and set it to ‘art’.
Now we have to somehow joint multiple artist names together if a track has more than one artist. The MusicBrainz Web Service helps us here by providing a ‘joinphrase’ which can be used to build one string for all artists. This ‘joinphrase’ can be .e.g a ‘&’ or a ‘,’. The full column code for the artist looks like
<af:iterator id="i2" value="#{artists.artist}" var="art" varStatus="artStat">
Here is some sample data for a search for the track ‘Something Stupid’ (to make it more readable I removed some attributes
"recordings": [
{
"title": "Something Stupid",
"artist-credit": [
{
"joinphrase": " duet with ",
"artist": {
"name": "The Mavericks",
}
},
{
"joinphrase": " & ",
"artist": {
"name": "Raul Malo",
}
},
{
"artist": {
"name": "Trisha Yearwood",
}
}
]
This data will be translated into the artist: “The Mavericks duet with Raul Malo & Trisha Yearwood”.
For the album column it’s easier. This too needs an iterator, but we don’t have to go down another level and we don’T have to join the data we get from the iterator. The column code for the album looks like
<af:iterator id="i1" value="#{row.artist_credit}" var="artists">
<af:iterator id="i2" value="#{artists.artist}" var="art"
varStatus="artStat">
<af:outputText value="#{art.name}#{artists.joinphrase}" id="ot5"/>
</af:iterator>
</af:iterator>
The whole table for the search results look like
With this the page is ready and we can run the application. After start we see the page
Now entering a search term ‘something stupid’ into the search field will show
or trying the search with ‘dave’ will show
This concludes this mini series about how to use external REST Services and build an ADF UI from it.
The source code for this sample can be loaded from GitHub BlogUsingExternalREST. The sample was done using JDeveloper 12.2.1.2 and don’t use a DB.
JDev & ADF Goodies 