Dreamweaver MX Extensions

Workshop #1: Inserting Conditional Page Content with an If-Then Statement

For this workshop, we'll build a behavior that accomplishes a simple but incredibly useful task: displaying certain page content only if a particular field in a data source has a certain value. Our behavior will insert the if-then conditional statement that will wrap around some piece of page content, allowing that content to be hidden or shown as needed.

Task 1: Create the code to insert

As with any extension, a server behavior is only as good as the code it inserts . Also, with server behaviors as with regular behaviors, the code must be scripted according to certain formats, or it won't fit into the SBB's model, and it won't work.

Your conditional statement, written using the ASP/JavaScript model, might look like this:

<% if (Recordset.Fields.Item("fieldName").Value==testValue) { Response.Write(" conditional content here "); } %>

But you wouldn't be able to wrap this code around complex existing content. So instead, you'll write it like this (conditional content to be hidden or shown is displayed here in italic):

<% if (Recordset.Fields.Item("fieldName").Value==testValue) { %> <h1> conditional content here </h1> <% } %>

Splitting up the code like this lets you create a server behavior in two code blocks one before the user's current selection and one after. Thus, when using this server behavior, the user will select an image or table or text block, choose the server behavior, and that object will become conditionala procedure similar to defining a repeating region. (If you're not sure of this code or how it will work, test it out in its hand-coded form before building it into the behavior.)

Task 2: Create the behavior with hard-coded values

After you have code that works, open the Server Behavior panel and choose New Server Behavior from the + menu. Call your new behavior If-Then , choose the server model you want to use (ASP/JavaScript to match the examples here), and click OK to access the New Server Behavior dialog box. Here's where the building really happens.

1. In the New Server Behavior dialog box, click + to create the first code block. Leave the name at its default ( If-Then_block1 ) and click OK to return to the New Server Behavior dialog box. In the code field, enter the first portion of the code discussed in Task 1:

   <% if (Recordset.Fields.Item("fieldName").Value==testValue) { %>

   For positioning, choose Relative to Selection and Before Selection.

   note

   Why not use one code block set to Wrap Around the Selection, instead of two code blocks? The wrap feature works only for tag pairs, such as <cfm></cfm> .

2. Now click + to create the second code block. Again, accept the default name for the code block. In the code field, enter the second portion of code discussed in the previous task:

   <% } %>

   For positioning, choose Relative to Selection and After Selection.

3. Figure 9.13 shows how the completed dialog box should look with the first code block selected. When you have both code blocks in place, click OK to finish.

   Figure 9.13. The SBB main dialog box with code blocks assigned for the If-Then server behavior.

4. Test your behavior. Open a dynamic document (ASP/JavaScript, if you're following the examples here) and enter some simple content, like a line of text or a heading. Select the content and insert your server behavior. It should wrap around your content, turning it into conditional content. The code should look exactly the same as the code you created by hand in Task 1. If it doesn't, tweak it until it does.

Task 3: Replace hard-coded values with parameters The trickiest part of using the SBB can be figuring out how to add parameters to the code, how to treat quotation marks, and so on. Remember that each parameter will become a field in the behavior's dialog box. Also be aware of a few parameterentering gotchas:

• If a value appears in quotes in the final code, those quotes must be present surrounding the parameter.

• No + concatenation operators are necessary between parameters and nonparameter code.

• If the parameters refer to a recordset field, the recordset must be set in a separate parameter from the recordset field. This will become clear as you work.

With these dangers in mind, proceed to replace the hard-coded recordset and field name in your server behavior with user-specified parameters.

1. In the Server Behaviors panel, click +, and choose Edit Server Behavior from the menu. From the dialog box that appears, find the If-Then behavior and click Edit. This brings you back to the SBB main dialog box.

2. Select the first code block and take a look at its code. The hard-coded values you'll be replacing appear here in bold:

   <% if ( Recordset .Fields.Item(" fieldName ").Value == testValue ) { %>

3. Select and delete the word Recordset . Then click the Insert Parameter button. Call the parameter testRS . It will appear in the code surrounded by @@ signs.

4. Repeat the process with fieldName , being careful to select only the word and not its surrounding quotes. Call this parameter testField .

5. Finally, replace testValue with a parameter called testVal . Your code should now look like this ( replaced values appear in bold):

   <% if ( @@testRS@@ .Fields.Item(" @@testField@@ ").Value == @@testVal@@ ) { %>

6. The OK button now says Next. Click that button to set up your dialog box. You want the testRS form input element to be a Recordset menu, testField to be a Recordset Field menu, and testVal to be a regular text field. Figure 9.16 shows these options being chosen . You can also use the up and down arrows in this dialog box to rearrange the parameters, which will determine how they appear in the behavior's dialog box.

   Figure 9.14. Setting up the input elements for the If-Then behavior's dialog box.

   Figure 9.16. The SBB dialog box with Advanced options showing.

7. After you've done this, close all dialog boxes and test out your revised behavior. Make sure it still inserts the same code structure that you determined in Task 1. (Note that because you've included a Recordset Menu as one of your If-Then parameters, you'll have to be working in a dynamic document that already contains at least one recordset before Dreamweaver will let you apply this server behavior.) Figure 9.15 shows the dialog box for inserting the If-Then behavior, and the resulting code inserted into a document.

   Figure 9.15. The If-Then dialog box with values chosen, and the resulting server markup the behavior inserts into a document.

Task 4: Refine the behavior's appearance in the Server Behaviors panel

After the behavior has been inserted into a document, do you like the way it is titled as it appears in the Server Behaviors panel? More importantly, what happens when you select the applied behavior from the behaviors list? Doing that should select one of the code blocks in the document. For this behavior, it should select the first code block because that's where the main if-then statement exists.

If either of these things isn't to your liking, go to Edit Server Behavior again, and this time click the Advanced button to expand the main dialog box. Choose the code block to select, and change the title if you like. Figure 9.16 shows this happening.

Task 5: Refine the If-Then Server Behavior's dialog box

We've gone about as far as we can with the SBB. It's time to dip into the extension files to make the dialog box look a little more user-friendly.

1. Either in Dreamweaver or your text editor, find and open Configuration/ ServerBehaviors/ASP_JS/If-Then.htm. This is your behavior's main extension file, which contains the code for the dialog box.

2. What can you safely do in this file? For one thing, you can rename the interface elements so they have friendlier names than test_RS and so forth. You can also adjust how the form elements are laid out, if you don't find the default positioning intuitive. Figure 9.17 shows the dialog box being revised in Dreamweaver Design view, and the resulting dialog box created by these changes.

   Figure 9.17. The If-Then dialog box layout being edited in Dreamweaver, and the resulting interface changes.

Task 6: Add an Expression option to the dialog box

One possible source of confusion for your users is that some test values need to be in quotes (strings), and others don't (expressions and numbers ). We can easily add a checkbox to the dialog box to let users choose which kind of information they want to enter. Based on that checkbox, we'll add or remove quote marks from the value in the testVal field. All we need to do is create a function that reads the checkbox value and adjusts the field contents; then call that function when the user clicks OK to insert the behavior.

1. Still in the If-Then.htm extension file, add a row to the bottom of the table, with a check box and Expression label, like that shown in Figure 9.18.

   Figure 9.18. The If-Then dialog box with an Expression option checkbox at the bottom.

2. Now add a new function to the <head> section to account for this new input. Like this:

   1 function checkQuotes() { 2 var testVal=document.theForm.testVal.value; 3 var exprFlag=document.theForm.exprFlag.checked; 4 var regexp=/^["'].*["']$/; //look for quotes at beginning and end 5 if (testVal.search(regexp) <0) { //if there are no quotes 6 document.theForm.testVal.value=(exprFlag)?testVa1:'"'+testVal+'"'; 7 }else{ //if there are quotes 8 document.theForm.testVal.value=(exprFlag)?testVal.substring (1,testVal.length-1): testVal; 9 } 10 }

   What is this function doing? In line 2, it creates a variable ( testVal ) to collect the information entered into the text field. Then in line 3, it creates another variable ( exprFlag ) to determine whether the checkbox is selected or not. And it sets up a regular expression ( regexp ) to easily find quotes that might already be surrounding the text field value. Starting in line 5, then, a conditional tests to see if the text field contains no quotes. If line 5 finds no quotes, line 6 processes testVal , adding quotes if exprFlag is not selected. If line 5 finds quotes, line 8 processes testVal , removing quotes if exprFlag is selected.

   In short, if the user has selected the exprFlag check box, the function makes sure there are no quotes surrounding testVal ; if the user has not selected the check box, the function makes sure there are quotes.

3. Finally, you need to call this the checkQuotes() function. You want it to execute when the user clicks OK to apply the server behavior, but before any of the standard API functions execute. Because the OK button isn't coded into the If-Then.htm file, you can't use a standard event handler to trigger it. But if you know your way around the API procedure for server behaviors, you can piggyback it onto one of the functions that Dreamweaver calls automatically when the user clicks OK.

   Check out the API procedure diagram in Figure 9.12, and you'll see that the first API function to be executed when the user clicks OK is the applyServerBehavior() function. This function's job is to prepare data and pass it to applySB() for insertion.

   In the If-Then.htm file, find the applyServerBehavior() function. Call checkQuotes() at the very beginning of this function, so it executes before the behavior is processed (new code is in bold):

   function applyServerBehavior(sbObj) { checkQuotes(); var paramObj = new Object(); var errStr = ""; etc }

4. Try it out! Back in Dreamweaver, try inserting the If-Then server behavior into a dynamic document with various different values in the testVal field, with and without the exprFlag checkbox selected. The If-Then server behavior is now complete.