Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Enabling behavior functions

From: Dreamweaver CS3 Beyond the Basics

Video: Enabling behavior functions

So, so far in our behavior, we have created some of the initial Core JavaScript functions and we have finished our user interface and remember we would refer to that as our Action file. Well, now it's time to link the two together and add our user interactivity into the mix. So you will notice that I have both the styleSwitcher JavaScript and a styleSwitcher.htm file open. So if you are working on this along with me with the Exercise Files, it's a really good idea to go ahead and have both these guys open as you finish these functions out, because occasionally when you are running your own behaviors, you are not going to remember, hey, what did I name that form element? So it's a really good idea just to kind of pop back and forth, so you can make sure that you're naming everything exactly what it needs to be named.

Enabling behavior functions

So, so far in our behavior, we have created some of the initial Core JavaScript functions and we have finished our user interface and remember we would refer to that as our Action file. Well, now it's time to link the two together and add our user interactivity into the mix. So you will notice that I have both the styleSwitcher JavaScript and a styleSwitcher.htm file open. So if you are working on this along with me with the Exercise Files, it's a really good idea to go ahead and have both these guys open as you finish these functions out, because occasionally when you are running your own behaviors, you are not going to remember, hey, what did I name that form element? So it's a really good idea just to kind of pop back and forth, so you can make sure that you're naming everything exactly what it needs to be named.

All right, so I am going to switch back to the styleSwitcher JavaScript file and I am going to scroll down to the last function that we added in our previous exercise, and that would be the Behavior Function. So I am going to scroll right below that, and we will go ahead and add another single line comment. Now, the function that we need to add this time is the applyBehavior Function. So I am going to do a single line comment to let people know, what this function is doing. I am going to type in, Returns the value entered into the user interface, and then passes that to the function call.

Okay, so what does this function do? Well, what this function is going to do for us is if somebody is using your Behavior and they have a link highlighted and they go up to the Behaviors panel and say plus and then chooses Behavior, this function is going to take care of which script is called In Run and what events are added to the link that they had highlighted. So we will go down to the next line, and I am going to type in, function applyBehavior, and I am going to open and close a parentheses. I will open up a Curly Brace, and as a habit, I am going to hit Enter twice and close our curly brace. Again, that always ensures that we have a both an opening and a close.

Okay. So we are going to go ahead and establish a variable and we will type in theName, and we will make its value equal to document.theForm.title.value and type in a semicolon. So okay, well what did this do? Well, theName is a variable that doesn't exist until now, so we can do that in JavaScript. We can just create variables anytime we want to and put any value we want to into them. So the value we are putting into them is using Dot Syntax and dot syntax is a way of navigating through a document structure.

So we are saying Documents, we go into Current document and then we are saying theForm. So find an element named theForm and if you remember, that is what we named the form in our Actions file in the previous exercise. Then we're saying, find an element called Title. That would be the text field that the user is going to type into. And then finally, we are saying, we want you to retrieve the value from that. So it's going to pull whatever value is currently inside of that text field. So we will go down to the next line and type in return and then in quotation marks, setActiveStyleSheet and really be careful of your capitalization and your spelling there. Open up a parentheses and then close your quotation marks, and type a plus symbol and type in theName, another plus symbol, open up a quotation mark, close the parentheses, close your quotations, and type in a semicolon.

Okay. Now, that may seem kind of odd to some of you who are not familiar with JavaScripting or any type of object oriented programming. So let's talk about what we have done just there now. Anytime you use Return, you are sending something out of the function. So after the function is called and has performed all of the tasks, it's going to return a value. In this case, it's returning another function call, and that function call is setActiveStyleSheet and then a value passed into it. Now, the reason that we are using all these quotation marks is because we are concatenating the value. So setActiveStyleSheet and its two parentheses are literal string values. That means it's just one letter followed by another letter. It doesn't have any intrinsic meaning right now.

But the name on the other hand is a variable and it needs to be evaluated, what is the value of the name. That value is going to be equal to whatever has been entered into the form. So essentially, what we are doing is we are doing the setActiveStyleSheet function call, but we are adding to it the value of whatever has been typed into the interface. So now, we can go down to our final core function and our final core function is going to allow people to modify our behavior once they have applied it. For all, in terms of purposes, our behaviors are now finished. But it wouldn't really be of that kind of a behavior if somebody couldn't edit it.

What happens if they type in a wrong style sheet name or they decide that they want to change the style sheet later on? Well, if you didn't add this next function, they wouldn't be able to do that. So I am going to go ahead and type in a single line comment, and I will enter in, Allows user to modify the behavior after initially applying it. So you don't have to be that robust with your commenting, you just want to identify exactly what this function is doing in a nice, succinct manner. We will go ahead and define another function. So type in function, and after that, I am going to type in, inspectBehavior.

Now, our other core functions weren't really expecting any arguments to be passed into them, but this one does. And the argument that this one is going to be looking for is enteredStr, entered String. So I will close my parentheses, open up a curly brace, hit Enter twice again, close the curly brace. All right, so now we are ready to go ahead and enter the code for the inspectBehavior function. Now, it's expecting one value to be passed in and that value is Entered String. So the first thing I am going to do is just go ahead and declare a variable inside this function, and I am going to type in var argArray.

Now arg is going to be short for argument. So this is basically an array of arguments and it's another way of just saying, it's an array of statements. So I will go down to the next line and I will do a single line comment. So you can actually do commenting in the middle of a function. That's fine. And then I am going to type in, calls a function from the shared string.js file. Now, when we built our action file, in the head of our document, we linked to a shared JavaScript file that Adobe supplies for us and this contains functions that's going to make inspecting our behavior a lot easier and you will see that in just a moment.

I am going to go down to the next line and I will type in another single line comment here and we will type in, this will retrieve the string entered by the user. So we know what our next line of code is about is about to do. So on the next line of code, type in var argArray. But we are going to go ahead and assign a value to it now. So equals, extract args, plural, and then open up a parenthesis and type in enteredString. That's the value being passed in through the function.

So go ahead and type in another semicolon. Then we will do another single line comment inside the function and type in use an array value of 1, since the first item returned is the name of the function called. And unfortunately, sometimes you have to be for both when you're doing your comment. All right, now we will type in document. theForm.title.value equals argArray and then in bracket notation, not parentheses but bracket notation, type in the number 1, type in the end of your bracket and type in a semicolon. Now be sure to save your file.

Okay. Well, let's talk about what this is doing. Well, we have a variable called argArray and it's storing a set of strings. So we are actually creating an array. An array can store more than one item inside of it, and as it stores those items, they are given a number. The numbering of arrays always starts with zero, so you start with zero, one, two, three, four, five, six, seven so forth and so on. So if you are looking for multiple values to be returned, you can store them in array and then you just ask for whichever value you need. Well, the value of argArray is a function call and the function call is extractArgs entered string. So the extractArgs is actually a function in that shared JavaScript file that we linked in our action file.

What the extractArgs function does is it peruses your entire document and it will find any string values that had been entered into this particular form. So anything has been entered into this form will be returned as an array. Now as the array returns, the first item in array and that would be zero, if we remember, the first time in the array which we numbered zero, will be the name of the function that's called. After that, will be a list of strings that were passed into the function. We are only interested in the first one, which would be whatever value somebody typed in. So since the first item is actually going to be the name of the function call, we need to pass in one, which in reality is the second item. That seems confusing, until you are used to using arrays, because you always know the first number is zero and then after that, it's one, two, three, four, five.

So our behavior is pretty much finished. In our next exercise, we will add a nice little bit of usability to our form by establishing focus on the form element when the dialog box originally opens.

Show transcript

This video is part of

Image for Dreamweaver CS3 Beyond the Basics
Dreamweaver CS3 Beyond the Basics

102 video lessons · 38727 viewers

James Williamson
Author

 
Expand all | Collapse all
  1. 2m 3s
    1. Welcome
      1m 17s
    2. Using the exercise files
      46s
  2. 1h 23m
    1. Reviewing the Coding toolbar
      8m 42s
    2. Customizing the Coding toolbar
      9m 52s
    3. Taking advantage of Code Hinting
      7m 20s
    4. Using snippets and shortcuts
      11m 10s
    5. Using the Quick Tag Editor
      5m 18s
    6. Using Find and Replace
      9m 50s
    7. Regular expressions
      5m 39s
    8. Using Bridge with Dreamweaver CS3
      8m 28s
    9. Round-trip editing with Photoshop CS3
      3m 40s
    10. Leveraging image variables in Photoshop CS3
      7m 32s
    11. Integrating external variables into your workflow
      6m 16s
  3. 37m 26s
    1. Understanding the CSS Styles panel
      7m 59s
    2. Understanding the Cascade
      5m 50s
    3. Understanding Inheritance
      5m 8s
    4. Understanding Specificity
      7m 5s
    5. Managing CSS styles
      5m 4s
    6. Using Design-Time style sheets
      6m 20s
  4. 2h 19m
    1. Using the new CSS template pages
      5m 59s
    2. Understanding DIV tag structure and layout
      12m 0s
    3. Understanding the CSS box model
      10m 0s
    4. Using absolute and relative positioning
      8m 35s
    5. Understanding floating elements
      7m 9s
    6. Clearing floats
      7m 19s
    7. Using floats to control page layout
      3m 45s
    8. Building structure and assigning IDs
      10m 19s
    9. Applying basic styling to structured content
      11m 14s
    10. Positioning container elements
      11m 4s
    11. Enhancing layouts with background graphics
      11m 48s
    12. Creating faux columns with background graphics
      8m 55s
    13. Creating rounded corners with background graphics
      9m 17s
    14. Building navigation with CSS
      16m 57s
    15. Using Dreamweaver's Browser Check feature
      5m 31s
  5. 53m 22s
    1. Creating properly structured forms
      6m 30s
    2. Creating accessible forms
      6m 41s
    3. Using CSS to lay out form structure
      7m 40s
    4. Creating vertical columns for form elements
      7m 48s
    5. Adding user feedback
      5m 52s
    6. Applying advanced styling to forms
      8m 11s
    7. Client-side form validation
      4m 17s
    8. Validating forms with the Spry Validation tools
      6m 23s
  6. 1h 20m
    1. Understanding the Spry framework
      3m 43s
    2. Defining a data source for use in Spry
      3m 56s
    3. Creating a Spry table
      8m 8s
    4. Using the Spry widgets
      8m 11s
    5. Connecting various data sets
      4m 50s
    6. Understanding Spry widget structures
      7m 1s
    7. Applying custom styles to Spry widgets
      6m 24s
    8. Applying additional custom styles to Spry widgets
      8m 46s
    9. Controlling Spry widget behaviors with JavaScript
      6m 0s
    10. Controlling Spry widget animations with JavaScript
      9m 31s
    11. Creating effects with Spry behaviors
      4m 42s
    12. Hand-coding Spry
      9m 11s
  7. 1h 11m
    1. Creating a base template
      8m 6s
    2. Creating editable attributes
      6m 26s
    3. Creating a new page from a template
      7m 42s
    4. Applying a template to an existing page
      4m 36s
    5. Creating nested templates
      5m 24s
    6. Using repeating regions
      6m 34s
    7. Creating editable and non-editable optional regions
      6m 0s
    8. Using template parameters
      7m 26s
    9. Using template expressions
      9m 59s
    10. Using conditional template expressions
      8m 54s
  8. 54m 40s
    1. Examining XML structure
      2m 44s
    2. Creating an XML document
      9m 9s
    3. Using the CDATA structure
      5m 7s
    4. Creating an XSLT file
      4m 33s
    5. Binding data from an XML to an XSLT document
      5m 6s
    6. Inserting repeating regions into an XSL document
      5m 16s
    7. Creating a client-side XSL transformation
      2m 52s
    8. Styling a remote RSS feed
      7m 29s
    9. Creating a server-side XSL transformation
      5m 31s
    10. Writing XSL expressions
      6m 53s
  9. 1h 2m
    1. Overview of building dynamic websites
      1m 35s
    2. Installing PHP, MySQL, and Apache on Mac
      3m 22s
    3. Installing PHP, MySQL, and Apache on Windows
      3m 54s
    4. Creating a MySQL database
      3m 16s
    5. Defining a testing server and database bindings
      6m 14s
    6. Creating a database recordset
      4m 35s
    7. Adding dynamic content to the page
      5m 14s
    8. Creating repeating regions of dynamic content
      7m 6s
    9. Filtering database records
      7m 39s
    10. Using the Live Preview
      10m 22s
    11. Passing URL parameters
      4m 23s
    12. Dynamically generating links
      5m 18s
  10. 57m 9s
    1. Understanding behaviors
      5m 16s
    2. Installing additional behaviors
      3m 39s
    3. Planning to create a custom behavior
      3m 42s
    4. Examining existing behaviors
      5m 32s
    5. Building a behavior function
      7m 23s
    6. Creating an Action file
      6m 48s
    7. Enabling behavior functions
      9m 1s
    8. Initializing the user interface for a behavior
      3m 9s
    9. Loading behaviors in Dreamweaver
      6m 47s
    10. Testing and debugging behaviors
      5m 52s
  11. 27m 12s
    1. Running reports
      7m 41s
    2. Checking and validating links
      3m 40s
    3. Using cloaking
      5m 42s
    4. Using Check In/Check Out
      4m 3s
    5. Using Design Notes
      6m 6s
  12. 20s
    1. Goodbye
      20s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Dreamweaver CS3 Beyond the Basics.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.