| |
| |
In the AJAX Panels tab of the Files panel, click the Content/ArtistDetail item in order to make it editable in the index master page. To retrieve detailed information about artists, you need data from both the artists and albums tables (so you need two recordsets).
Go to the Application panel, Bindings -> + -> Recordset (Query) to create the first recordset. Configure the window that opens as shown below:
Name the recordset rsArtistDetails.
Select the conn_music_catalog database connection.
Select the artist_art database table to retrieve information about artists.
Select all the table columns to be retrieved.
A filtering condition is needed: the value of the id_art column should match the id_art URL parameter.
There is no need for sorting the recordset.
If you press the Test button, you will be asked for a test value for the id_art parameter. If a match is found, you will see the retrieved data.
Click OK to create the recordset.
Once again go to the Application panel, Bindings -> + -> Recordset (Query) to create the second recordset. Configure the window that opens as shown below:
Name the recordset rsAlbumsList.
Select the conn_music_catalog database connection.
Select the album_alb database table to retrieve the album information.
Select only five of the table columns, namely id_alb, title_alb, release_year_alb, rate_alb, and votes_alb.
A filtering condition is needed: the value of the idart_alb column should match the id_art URL parameter.
There is no need for sorting the recordset.
If you press the Test button, you will be asked for a test value for the id_art parameter. If a match is found, you will see the retrieved data.
Click OK to create the recordset.
Select the {DETAIL TITLE} default text. In the Bindings tab of the Application panel, expand the rsArtistDetails recordset and drag and drop the name_art column on top of the selected text.
Select the default image placeholder below the artist name. In the Property Inspector, click the Browse for File button (folder icon) next to the Src text box and configure the dialog box that opens similar to here. The only difference is to select the picture_art column from the rsArtistDetails recordset.
Remove the default content below the image placeholder.
In a new paragraph below the image, type: Favorite albums:. Format it to be displayed as Heading 3 (from the Property Inspector). Then create another paragraph (press Enter) below this text section.
Launch the AJAX Dynamic Table Wizard from the MX AJAX Toolbox tab of the Insert bar. The wizard has three steps.
Configure the first step of the AJAX Dynamic Table Wizard as shown below:
Choose to get data a Recordset.
Select the rsAlbumsList recordset you created earlier.
Select the id_alb column as the primary key of the table.
Leave the Detail page text box blank. Your site visitors will not be able to edit your favorite albums information.
Set to display 3 albums at a time.
Click Next to continue configuring the wizard.
Configure the second step of the AJAX Dynamic Table Wizard as shown below:
Select the id_alb column in the Table columns grid and press the Minus (-) button above the grid to remove it from the dynamic table.
Select the release_year_alb column in the grid and change its header to Release year and its char width to 10.
Select the rate_alb column in the grid and change its char width to 7.
Select the votes_alb column in the grid and change its char width to 7.
Click Next to continue configuring the wizard.
Configure the third step of the AJAX Dynamic Table Wizard as shown below:
If so far you followed the exact steps of the tutorial, and if there was no user interface persistence that affected the default settings, leave the dialog box configured as it is by default (see the image above). To learn more about the interface controls role and default value, click the Help button at the bottom.
Click Finish to apply the wizard.
Save the index file, upload it to the server, and preview it in browser (press F12). Click the U2 item in the menu on the left:
Notice that albums are displayed three at a time. You can sort them by any of the columns in the dynamic table - simply click the respective header (first click will sort them ascending, second consecutive click will sort them descending). The Rate and Votes columns are empty for now because the albums have not been rated yet (the values in the database table are NULL).
The navigation bar at the bottom of the table gives you the possibility to browse (First, Previous, Next, Last) through all the albums (if there are more than 3). The navigation status above the table notifies you of the albums group currently previewed.
There are three more things that you have to do before this state is complete:
Transform the album titles into AJAX links pointing to the album detail state.
Add the rating possibility for each album.
Add an AJAX title so that the HTML title would display the name of the current artist (whose page you are viewing).
To transform the album title into AJAX links, proceed similar to here, considering the following differences:
Select the {rsAlbumsList.title_alb} dynamic text before applying the AJAX Link server behavior.
In the first tab (Basic) of the AJAX Link server behavior select AlbumDetail as the Target state.
In the second tab (Parameters) of the AJAX Link server behavior add two parameters:
A parameter named id_alb, that gets its value from the id_alb column of the rsAlbumsList recordset.
Another parameter named id_art, that gets its value from the id_art column of the rsArtistDetails recordset.
Do not check the Enable tooltip option in the third tab (Tooltips) of the AJAX Link server behavior.
To add the AJAX rating widget follow the next steps:
You need another column in the AJAX dynamic table where to place the rating widget for each album. Right-click the {rsAlbumsList.votes_alb} dynamic text, and in the contextual menu that opens select the Table -> Insert Rows or Columns option. Choose to add a new column after the current one:
Inside the new column, on the same row as the dynamic text, apply the AJAX Rating Wizard. Configure its dialog box as shown below:
Leave the suggested rating widget name.
Click the Dynamic Data button next to the Primary key text box and select the id_alt column from the rsAlbumsList recordset (in a window similar to this one).
Click the Dynamic Data button next to the Get rate from text box and select the rate_alt column from the rsAlbumsList recordset.
Select the conn_music_catalog database connection.
Select the album_alb database table as its records will be rated.
Select the id_alb column as the primary key of the table.
The current average rate is stored in the rate_alb column.
The current number of votes is stored in the votes_alb column.
Click OK to generate the rating widget.
Place the cursor on the first table row, in the new column. Type Rate album as the column header. Select this text section and in the Property Inspector, set its text color to white (either enter #FFFFFF in the associated text box or use the Color Picker control).
To set a different HTML title according to the artist page you are viewing, proceed as explained here, with the difference that you need to select the name_art column from the rsArtistDetails recordset.
Save the index file, upload it to the server, and preview it in browser (press F12). If you now click the U2 item in the menu on the left, this is how the page should look:
Notice how album titles are displayed as links. You can rate any of the albums by clicking one of the five stars. When you refresh the page in browser, you will see the updated values in the average rate (Rate) and number of votes (Votes) table columns. The average rate is also illustrated by the yellow stars in the rating widget (their number equals the integer part of the average rating score).
In the next topic you will create the page that displays information about albums.