| |
| |
In the AJAX Panels tab of the Files panel, click the Menu (default state) item in order to make it editable in the index master page. First of all, you need to create a recordset to use for retrieving the required information (artist names). Go to the Application panel, Bindings -> + -> Recordset (Query). Configure the window that opens as shown below:
Name the recordset rsArtistNames.
Select the conn_music_catalog database connection defined earlier.
Select the artist_art database table to retrieve information for completing the menu.
Select only two of the table columns, namely id_art (used when transforming each menu entry into a link) and name_art (it will be displayed in the menu).
Do not filter the recordset.
Sort the records ascending by the name_art column so that they will be displayed in alphabetical order.
You can press the Test button and see the retrieved data (artist names).
Click OK to create the recordset.
Add the artist names to the menu by following the instructions below:
In the index file, in the Menu panel, place the cursor after the Home item and press Enter. In the new bulleted list item enter the following text: Favorite artists.
Create another list item (press Enter) below the Favorite artists one, and then press the Text Indent button in the Property Inspector.
Expand the rsArtistNames recordset in the Bindings tab of the Application panel, and drag and drop the name_art column in the new empty list item.
Note: You will notice that in Design view, the Content panel went underneath the Menu one. This happened because the dynamic text dropped in page is pretty wide, and it expands the width of the Menu panel, causing the two panels not to fit next to each other anymore (the width of the wrapper container is 800 pixels - check out the \includes\jaxon\css\panels.css file):
That page in browser looks OK though, so do not worry about this.
Click the dynamic text dropped in page, and then the last <li> tag in the Tag Selector (it is already highlighted, but it is important to click it again) to select the list element in the nested bulleted list.
Keep the current selection and click the Repeated Region icon in the Application tab of the Insert bar. Configure the window that opens as shown below:
Select the rsArtistNames recordset that retrieves the artist names.
Choose to show all the records.
Click OK to apply the repeated region.
If you save, upload, and preview the index page in browser, you will notice that the menu items are indented a little too much and the longer artist names spread on two rows. To fix this issue in the Menu panel, switch to Code view in Dreamweaver, and locate the opening <ul> tags for the two bulleted lists. Right before ">" add style="margin-left: 20px; padding: 0px;". The two code lines should become:
<ul class="menulinks" style="margin-left: 20px; padding: 0px;">
<ul style="margin-left: 20px; padding: 0px;">
Save the index file and upload it to the server. Preview it in browser (press F12) to see the new menu:
Continue to work on the site menu and transform the artist names into AJAX links with tooltips:
If you want a rich-text tooltip to be displayed when the mouse pointer hovers these menu items, you need to decide upon a panel state from where the tooltip to be retrieved: it can be the same state to which the menu item points or another one, especially created for the tooltip. Go with the second possibility.
Click the Add State icon in the MX AJAX Toolbox tab of the Insert bar. Configure the window that opens as shown below:
The panel in which you are adding a new state is the Content one.
In the State name text box enter MenuTooltip.
Click in the next two text boxes and values will be automatically generated.
Leave the Meta Description and Meta Keywords textareas blank.
Click OK to create the new state in the master panel.
Once the state is created, you are automatically redirected to it and you can edit it. So since you are there, edit the MenuTooltip state right now.
First of all, you need to create a recordset to use for retrieving information about each artist (picture and short description). Go to the Application panel, Bindings -> + -> Recordset (Query). Configure the window that opens as shown below:
Name the recordset rsArtistTooltip.
Select the conn_music_catalog database connection.
Select the artist_art database table to retrieve the needed information for tooltips.
Select only two of the database columns, namely picture_art and desc_art.
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.
Remove the default content (press Ctrl+A and then Delete) from the MenuTooltip state.
Click the Images : Image icon in the Common tab of the Insert bar and configure the dialog box that opens as shown below:
In the Select file name from radio group choose the Data sources option.
Select the picture_art column from the rsArtistTooltip recordset. Notice how the URL text box below is populated.
Add content/artists/ right before the automatically added content in the URL text box. This way, the artist's picture will be correctly displayed, given the relation between the filename stored in the database table and the image file stored in the content/artists/ folder from your site.
Click OK when you are done.
Click Cancel in the Image Tag Accessibility Attributes dialog box that pops-up, as explained here.
Create a new paragraph below the dynamic image inserted in page (in Design view, press the right arrow key to deselect it and then Enter). Expand the rsArtistTooltip recordset in the Bindings tab of the Application panel, and drag and drop the desc_art column in the new paragraph. With this, the tooltip panel state is complete. Save the changes.
To go back and complete the default state of the Menu panel, click the Edit Panel States button in the MX AJAX Toolbox tab of the Insert bar. In the pop-up menu that shows, select the Menu - default item in order to make it editable in the index master page:
Click the {rsArtistNames.name_art} dynamic text in the default state of the Menu panel. Apply the AJAX Link server behavior from the Application panel, Server Behaviors -> + -> MX AJAX Toolbox. The dialog box has three tabs.
Note: You can also apply the AJAX Link command from the MX AJAX Toolbox tab of the Insert bar.
Configure the first tab (Basic) of the AJAX Link server behavior as shown below:
In the Target panel drop-down menu select the Content panel.
In the Target state drop-down menu select the ArtistDetail state.
The Link text text box displays the selected dynamic text.
Click the next tab to continue configuring the server behavior.
Configure the second tab (Parameters) of the AJAX Link server behavior as shown below:
Since each artist name should point to a different page (more exactly, different information), the link must pass an URL parameter. Click the Plus (+) button above the Link parameters grid. In the window that opens enter id_art:
Click OK to add the parameter name.
Click the Dynamic Data button next to the Parameter value text box and select the id_art column from the rsArtistNames recordset:
Click OK to add the parameter value.
Click the next tab to continue configuring the server behavior.
Configure the third tab (Tooltips) of the AJAX Link server behavior as shown below:
Check the Enable tooltip option.
In the Panel drop-down menu select the Content panel since the tooltip is stored in one of its states.
In the State drop-down menu select the MenuTooltip state.
In the Width text box enter 200.
In the Height text box enter 400.
Click OK when you are done configuring the server behavior.
The Menu panel (with its only default state) is now completed. Save the index file and upload it to the server. Preview it in browser (press F12) and check out the menu on the left:
Notice how the artist names are displayed as links and how a tooltip window (200x400) shows whenever the mouse hovers one of the items.
In the next topic you will create the page that displays information about artists.