| |
| |
What is left to do in order to complete the site is to edit each of the five main panel (Content) states:
To make it editable, click the Content (default state) item in the AJAX Panels tab of the Files panel. In the index page, in Design view, click inside the default Content panel state. Change the title from Content to Home, and then replace the sample text below the title with:
----------
This tutorial site is built with MX AJAX Toolbox. Notice how only the main panel refreshes, independently and asynchronously, when you click one of the menu items on the left.
Look around, and you will notice various AJAX elements:
Tabset
AJAX links with rich-text tooltips
Photo gallery
Collapsible region
Accordion
----------
Save the changes.
To make it editable, click the Content/MX AJAX Toolbox item in the AJAX Panels tab of the Files panel. In the index page, in Design view, click inside the MX AJAX Toolbox panel state, and then follow the steps below:
Remove the "Content :: " part from the title, as well as the sample text below the title (triple-click in that paragraph to select it, and then press Delete).
Press Enter to create a second empty paragraph below the title.
Switch to Code view and replace the second <p> </p> code section with:
<div style="width: 378px; margin-left: 30px;"></div>
This way, you are creating a container for the AJAX tabset that you are adding here so that it won't display right next to the orange border, but a little to the right.
Place the cursor right before </div> and then switch back to Design view.
Apply the AJAX Tabset Wizard from the MX AJAX Toolbox tab of the Insert bar. The wizard has two steps.
Configure the first step of the AJAX Tabset Wizard as shown below:
Leave the suggested tabset name.
In the Tabset width text box enter 376.
Note: To the tabset width of 376, the left and right border widths are added (1 pixel each). This way, in browser you obtain the width of the div container, namely 378.
In the Tabset height text box enter 400. This height includes the tabs as well.
Select the External file content type.
Click Next to continue configuring the wizard.
In the second step of the AJAX Tabset Wizard you get to specify the titles and filenames for the tabset regions:
To define the first tabset region, click the Plus (+) button above the Tabset regions grid. In the dialog box that opens enter its title - Overview, and then click OK:
The item is added in the grid and it is automatically selected. At the same time, the File name text box is automatically populated, starting from the title you entered. You can use the two text boxes below the grid for editing if you want to.
In a similar manner, add two more tabset regions: Features and Benefits.
Click Finish when you are done configuring the wizard.
Notice the corresponding translator added in page. Since the tabset content comes from external files, you cannot click each of the tabs in the translator and edit its region. To edit the regions, you will use the associated Property Inspector.
Click anywhere inside the tabset translator and notice the property inspector displayed in the lower part of the Dreamweaver interface:
With the Overview item selected in the Display Tab drop-down menu, click the Open Tab File button. The overview file will open. Replace the default text ("Overview" region content here) with:
----------
MX AJAX Toolbox is a set of tools that allows you to build AJAX-driven websites from scratch, or add AJAX functionality to existing websites. It is an intuitive visual environment for rapid application development. It will allow web developers and designers alike to quickly empower their web applications with AJAX technique, without any hand-coding.
Notable features:
Use AJAX panels and AJAX links to load only the content that is needed, asynchronously, without refreshing entire pages.
Bring powerful effects and interactivity to your websites, with a suite of AJAX widgets and controls: accordion, collapsible region, tabset, rating, photo gallery, dialog box, tooltip previews.
Your AJAX websites will gracefully degrade: they will still work in browser environments with JavaScript turned off, and search engines will be able to index all site contents.
----------
Place the cursor at the beginning of the new text, and proceed similar to here (steps 1-3) to insert the logo_MX_AJAX_Toolbox.png image from the logos folder in the site root.
With the image selected, switch to Code view. In the selected code, press Space right after the opening <img tag, and add the following code section (before the src attribute):
style="margin: 0 10px 10px 0; float: left;"
This will allow the text to be displayed next to the image, and at the same time providing some space between the two.
Save the overview file and close it.
Back to the index page, having the tabset selected, choose the Features item in the Display Tab drop-down menu, and click the Open Tab File button. The features file will open. Replace the default text ("Features" region content here) with:
----------
AJAX panels with multiple states, which load asynchronously, without refreshing the entire page. A loading indicator is displayed during asynchronous calls.
AJAX links with preview in tooltip.
Bookmarking and browser history work as expected. Pages can be refreshed, and the browser's Back and Forward buttons can be used to navigate a site's particular panel states.
Graceful degradation: Screen-readers can "read" content, search engines can access it, and your AJAX applications will works when JavaScript is disabled.
Appealing design effects and styles: fade effect on page load, rounded corners, and gradient background.
AJAX table sorter and navigation bar for your dynamic tables.
Interactive controls which can retrieve content from separate files or from the same page: accordion, tabset, collapsible region, and dialog box.
Photo gallery with thumbnails navigation.
Rating widget to interact with web visitors and let them assess site content.
And more...
----------
Save the features file and close it.
Back to the index page, having the tabset selected, choose the Benefits item in the Display Tab drop-down menu, and click the Open Tab File button. The benefits file will open. Replace the default text ("Benefits" region content here) with:
----------
Whether you want to quickly put together a prototype to show to your clients, or build a fully-featured web application, MX AJAX Toolbox can help you build fast. Its wizards and intuitive interfaces help you take full advantage of the benefits of AJAX, without changing your usual workflow in Dreamweaver.
Go interactive. Build Rich Internet Applications that interact with your site visitors, to provide them with a unique web experience. No longer will they have to wait for the entire page to refresh: they can continue using the website, as parts of it load separately and asynchronously.
There's no need to hand-code XMLHttpRequest, learn JavaScript or re-invent popular AJAX techniques and patterns. With MX AJAX Toolbox, you have them all at your fingertips.
Benefit from a reliable AJAX platform, that is gracefully degradable, accessible by search engines and screen readers, and helps you overcome technical limitations in typical AJAX applications.
----------
Save the benefits file and close it.
In the Files tab of the Files panel, notice these three new files in the site structure (they were automatically generated by the AJAX Tabset Wizard):
After following the steps above, the index page in Dreamweaver, in Design view, should look like this (regarding the MX AJAX Toolbox state of the Content panel):
Save the index file and upload it to the server. You can preview it in browser (press F12) if you want to. Click the MX AJAX Toolbox link in the menu on the left to see the AJAX tabset at work.
Note: In Dreamweaver, you can also click the Preview in browser icon in the Insert bar, and the current/visible states in each panel will be previewed in browser.
To make it editable, click the Content/News item in the AJAX Panels tab of the Files panel. In the index page, in Design view, click inside the News panel state, and then follow the steps below:
Remove the "Content :: " part from the title, as well as the sample text below the title (triple-click in that paragraph to select it, and then press Delete).
Create a recordset to retrieve information about news. Go to the Application panel, Bindings -> + -> Recordset (Query). Configure the window that opens as shown below:
Name the recordset rsNews.
Select the conn_AJAX_panels database connection defined earlier.
Select the news_nws database table to retrieve information for completing this panel state.
Select only three of the database columns, namely id_nws (used when transforming each news title into a link), title_nws, and description_nws.
Do not filter the recordset.
Sort the records descending by the date_nws column so that the most recent news will be displayed first.
You can press the Test button and see the retrieved data (news title and description).
Click OK to create the recordset.
Expand the rsNews recordset in the Bindings tab of the Application panel, and drag and drop the title_nws column in the empty paragraph below the News title. Once dropped in page, it is selected. Press the right arrow key to position the cursor right after this dynamic text, and then press Shift+Enter to create a new line in the paragraph.
On the new line drag and drop the description_nws column from the same recordset.
Having this dynamic text selected, click the Unordered List button in the Property Inspector.
Select the <li> (list item) tag in the Tag Selector, and then click the Repeated Region icon in the Application tab of the Insert bar. Configure the window that opens as shown below:
Select the rsNews recordset that retrieves the news title and description.
Choose to show all the records.
Click OK to apply the repeated region.
Before transforming the news title into an AJAX link, you have to create a new state in the Content panel where the news body will be displayed (and the link will point to this state). In order to add a new panel state, you have to be in the master page. Right-click anywhere inside the News panel state, and from the contextual menu that pops-up, select the AJAX Panels/Go to Master Page option:
Now that you are in the master page, the Add State button from the MX AJAX Toolbox tab in the Insert bar is active. Click that icon and 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 NewsBody.
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 main panel.
Once the state is created, you are automatically redirected to it and you can edit it. So since you are there, edit the NewsBody state right now.
First of all, create a recordset. Proceed as above, with the following differences:
Name the recordset rsNewsBody.
Select these database columns: id_nws, title_nws, body_nws, and date_nws.
Add a filtering condition: the id_nws primary key must match the URL parameter id_nws.
There is no need to sort the recordset.
If you press the Test button, you will be asked for a test value for the id_nws parameter, and if a match is found, you will see the retrieved data.
Click OK to create the recordset.
Select the state title (Content :: NewsBody). Expand the rsNewsBody recordset in the Bindings tab of the Application panel, and drag and drop the title_nws column on top of the selected title.
Remove the sample text below the title (triple-click in that paragraph to select it, and then press Delete). In the empty paragraph type [Published on: ]. Drag and drop the date_nws column from the rsNewsBody recordset before the closing bracket "]".
In a new paragraph below this one drag and drop the body_nws column from the same recordset.
Create one more paragraph and type: Back to News List. Select this text section and click the Align Right button in the Property Inspector. You will transform this text into an AJAX link to the News state in the Content panel.
Having the text selected, apply the AJAX Link server behavior from the Application panel, Server Behaviors -> + -> MX AJAX Toolbox. The dialog box has two tabs. In this situation, you only need to configure the first one:
In the Target Panel drop-down menu select the Content panel.
In the Target Panel State drop-down menu select the News state.
The Link Text text box displays the selected text.
Do not check the Enable tooltip option.
Click OK to create the AJAX link.
There is one more thing that you should do before completing the NewsBody state. Since it will display different content depending on the id_nws URL parameter value, it would be useful if the page title in browser will show the current news title. To accomplish this, access the AJAX Meta server behavior from the Application panel, Server Behaviors -> + -> MX AJAX Toolbox. Configure the window that opens as shown below:
Click the InterAKT Dynamic Data button next to the AJAX Title text box. In the window that opens, select a recordset column, namely title_nws from the rsNewsBody recordset, and then click OK (the mark-up code is automatically generated):
Again, leave the Meta Description and Meta Keywords textareas blank.
Click OK to generate the dynamic AJAX title.
Save your work in the NewsBody state, and go back to the News state - click the Edit Panel States icon from the MX AJAX Toolbox tab in the Insert bar, and from the options that pop-up, select Content - News:
The News state will open. Select (single-click) the {rsNews.title_nws} dynamic text. Apply the AJAX Link server behavior from the Application panel, Server Behaviors -> + -> MX AJAX Toolbox. The dialog box has two tabs.
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 Panel State drop-down menu select the NewsBody state.
The Link Text text box displays the selected dynamic text.
Check the Enable tooltip option.
Click the next tab to continue configuring the server behavior.
In the second tab (Advanced) of the server behavior you get to specify the URL parameters passed:
Click the Plus (+) button above the Link parameters grid. In the dialog box that opens enter its name - id_nws, and then click OK:
Click the Dynamic Data button next to the Parameter value text box. In the dialog box that opens select the id_nws column from rsNews recordset, and then click OK:
Click OK to create the AJAX link.
In the Files tab of the Files panel, notice one new file in the site structure (it was automatically generated when you created a new panel state, NewsBody):
After following the steps above, the index page in Dreamweaver, in Design view, should look like this (regarding the News state of the Content panel):
Save the index file and upload it to the server. You can preview it in browser (press F12) if you want to. Click the News link in the menu on the left to see the AJAX links and tooltips at work.
Note: In Dreamweaver, you can also click the Preview in browser icon in the Insert bar, and the current/visible states in each panel will be previewed in browser.
To make it editable, click the Content/Portfolio item in the AJAX Panels tab of the Files panel. In the index page, in Design view, click inside the Portfolio panel state, and then follow the steps below:
Start with the first four instructions from the Content/MX AJAX Toolbox panel state.
Apply the AJAX Photo Gallery command from the MX AJAX Toolbox tab of the Insert bar. The dialog box has two tabs.
Configure the first tab (Basic) of the AJAX Photo Gallery command as shown below:
Leave the suggested photo gallery name.
Click the Browse button to locate, in the site structure, the portfolio folder storing the needed photos (it is found in the site root).
In the Photo width text box enter 376.
In the Photo height text box enter 300.
Note 1: These two dimensions are the width and the height of the area in which your photos will be displayed and box-resized. The width of this box gives the width of the thumbnails navigation bar as well (so it is basically the width of the photo gallery).
Note 2: To the photo gallery width of 376, the left and right border widths are added (1 pixel each). This way, in browser you obtain the width of the div container, namely 378.
Note 3: Images that fit inside this box will be displayed as they are, in the center of the box. Images that do not fit will be proportionally resized by the browser (another width and height will be set for them in HTML). This way, their quality will be affected. So it is recommended that you set appropriate dimensions for the photo gallery (according to your photos), or that you previously resize large photos.
Choose to display the thumbnails navigation bar at the Bottom.
Choose not to show the thumbnail loader.
Click the next tab to continue configuring the command.
Configure the second tab (Advanced) of the AJAX Photo Gallery command if you want to display a short description for each photo (as a tooltip). The description and the corresponding image filename should be stored in an XML file:
Leave the default values (blank) in the interface controls. You will learn how to benefit from this feature in another tutorial.
Click OK to generate the photo gallery.
Notice the corresponding translator added in page. One of the images in the folder is retrieved and displayed in the photo box, and the same image is displayed as thumbnails in the navigation bar.
After following the steps above, the index page in Dreamweaver, in Design view, should look like this (regarding the Portfolio state of the Content panel):
Save the index file and upload it to the server. You can preview it in browser (press F12) if you want to. Click the Portfolio link in the menu on the left to see the AJAX photo gallery at work.
Note: In Dreamweaver, you can also click the Preview in browser icon in the Insert bar, and the current/visible states in each panel will be previewed in browser.
To make it editable, click the Content/Contact item in the AJAX Panels tab of the Files panel. In the index page, in Design view, click inside the Contact panel state. Remove the "Content :: " part from the title, and then replace the sample text below the title with:
----------
Web address: http://www.interaktonline.com/
E-mail: contact@interaktonline.com
Address: 1-11 Economu Cezarescu ST, AYASH Center, 1st floor, Sector 6, ZIP 060754, Bucharest, Romania
Phone: +4021 312.51.91
Fax: +4021 312.53.12
----------
Save the changes.
Finally, the site is completed! This is how it should look in browser:
Use the menu on the left to navigate through all the pages you created, and notice how only the main panel refreshes. Do not forget to check out the AJAX tabset in the MX AJAX Toolbox page, the AJAX links and tooltips in the News page, the AJAX photo gallery in the Portfolio page, and the AJAX collapsible region and AJAX accordion in the site third column.