CMXtraneous: JavaScript

Right on the edge of useful

Undocument Dreamweaver: Run a JavaScript function within the page you're editing

Posted Wednesday, December 22, 2004 9:29:13 PM by Danilo Celic

Danilo Celic

I ran across an interesting little Dreamweaver extensibility tidbit this evening while reading through the Dreamweaver application install Configuration folder. I'm writing it up now, as I'm not sure what use it will be for anything in particular any time soon for me, but I don't want to forget it.

You can invoke a JavaScript function in the page that you are editing. You can also call multiple functions within the page one after the other. Now, there is one pretty big limitation the function you're calling can't call other functions within the page. A bit limiting, but interesting anyway. Here's how you go about doing it:

var dom = dw.getDocumentDOM();
var p = dom.parentWindow;
p.runMe();
p.otherFunction();

Not milk-in-a-bag neat, but neat nonetheless, eh?

Using Tom's JavaScript Evaluation panel (or the Sniplet version), or within a Dreamweaver extension of your own, try the code above with a document that has the following code:

<html>
<head>
<title>DW invoke JS demo</title>
<script>
function runMe(){
document.content.innerHTML+= "add content ";
}

function otherFunction(){
alert("I can alert too");
}
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>

Have fun playing around. Let me know if you come up with how invoking JavaScript functions within the document might be good to do. I haven't thought of anything yet that would be useful given the inability to call other functions from within the invoked function.

Category tags: Extensibility, JavaScript, Dreamweaver

Undocumented Dreamweaver: dreamweaver.setFocus()

Posted Wednesday, December 15, 2004 10:14:32 PM by Danilo Celic

Danilo Celic

The topic slipped my mind for a while, but a thread in the Dreameaver Extensions forum I participated in brought it back up from the depths.

A while back I was testing out the code I was using to position the cursor for the column portion of the Go To Line Column extension. Code looked perfect, worked great....on paper. But wouldn't you know it, Dreamweaver had other things in mind. Funny thing was the if I added an alert() to try to figure out where the error was occurring, the error stopped happening. Remove the alert() and back comes the error.

Randy, one of the Dreamweaver engineers pointed out that perhaps it was a focus problem. When the user clicks into the text field to type in their column to go to, the document could be losing focus. He pointed out that there is a function used in a couple of places within Dreamweaver that can handle positioning the focus where you want it to, dreamweaver.setFocus(). This function takes a string as a parameter, with values of document, textView, or html. document places the focus into design view, textView places focus into code view, and html places the focus on the Code inspector (F10). All of these are predicated upon those views being visible at the time dw.setFocus() is invoked.

Interestingly, the reverse function dreamweaver.getFocus(), according to the docs, will return document, textView, html, site, or the name of the floater in focus. However, don't try site, or a floater name as the input to dw.setfocus() as you'll run into an error. Not sure exactly why that is, but that's how it works, at least in Dreamweaver MX 2004.

Category tags: JavaScript, Dreamweaver, Extensibility

Return the Code Navigator to Dreamweaver's Document toolbar

Posted Friday, December 10, 2004 11:54:33 AM by Danilo Celic

Danilo Celic

Yet Another Toolbar Item, brought up by installing Dreamweaver on a new system. It alwasy takes a bit to get things settled in correctly. Placing the toolbars properly, grouping panels, removing labels form toolbars, etc.

The Dreamweaver MX 2004 release introduced several feature removals. Among them, but not listed at the link above, the Code Navigation button on the Document toolbar was "removed" in favor of just being placed in the Code inspector (F10). The Code Navigation button allows the user to quickly jump to certain areas within the code of your page based upon the location of functions within the code. For example, if you were working on a page and you saw a call to a JavaScript function, you could use the Code Navigatioin button to jump directly to the function (as long as it was in the same page). That button instilled quite a habit in me I can tell you, expecially when building Dreamweaer extensions as they typically involve a lot of JavaScript functions.

You may have noticed that I put quotes around removed above. The reason for that is the Dreamweaver engineers didn't actually remove the functionality, they just commented out the small bit of XML code that told Dreamweaver to display the Code Navigation button. Not sure why they decided to do that, but when MX 2004 came out, I was temporarily lost until ~Angela told me about the commenting out issue.

So how do you get this button back? At it's simplest, all you'd need to do would be to uncomment the code for the button within the proper XML file: /Configuration/Toolbars/toolbars.xml**. However, due to to the way that Dreamweaver works with multi-user operating systems, if you have installed an extension that has modifed any of the built in toolbars, then you may find that the commented out code is no longer present within toolbars.xml.

Open up your user copy of toolbars.xml and look for code similar to that listed below. It may be all in one line rather than spaced out. I'd suggest doing a Find for DW_CodeNav, to see if it is present. If it is present and commented out, then uncomment it.

<menubutton id="DW_CodeNav"
image="Toolbars/images/MM/codenav.png"
disabledImage="Toolbars/images/MM/codenav_dis.png"
imageMac="dwres:18067"
disabledImageMac="dwres:18080"
tooltip="Code navigation"
enabled="dw.getFocus() == 'textView' || dw.getFocus() == 'html'"
menuID="DWCodeNavPopup"
update="onViewChange"/>

If this code is not present in your user config toolbars.xml, then copy the code above, and paste it into your toolbars.xml file within the <toolbar> tag with an id of DW_Toolbar_Main. If you want to keep the original placement from Dreamweaver MX, then paste the code just after the <button> tag with an id of DW_DocRefresh. Save toolbars.xml, then close and restart Dreamweaver, and you should now have the Code Navigation button present on your Document toolbar.

Note: You can also copy the code from the application install configuration folder. As well as the code for the reference button which was also commented out.

**Dreamweaver Configuration files locations

Category tags: Dreamweaver, Extensibility, JavaScript

sIFR Release Candidate 2 Has Arrived...

Posted Thursday, December 09, 2004 5:16:46 PM by Stephanie

Stephanie

Just released, sIFR RC2. I just downloaded the new version to update a project. I have another in the works now that will really benefit from beautiful image-like headings. They've fixed some Opera quirks as well as the Flash URL limit.

Be sure to check it out. And if you haven't been following along and wonder what it's really about, you can view Danilo Celic's Breeze presentation about sIFR. He gave a nice visual guide to the process.

I'll type more later. For now, I've got a beach volleyball tournament to win. ;)

Category tags: CSS, Designing for the Web, Dreamweaver, Flash, JavaScript

Keeping your toolbars visible in Dreamweaver

Posted Monday, December 06, 2004 11:08:29 AM by Danilo Celic

Danilo Celic

When you install some extensions, Dreamweaver has a nasty habit of resetting your toolbars. So if you have the Standard toolbar visible, you may find after installing an extension that the toolbar has been turned off and isn't visible any more. There may be more situations where this happens, but I've seen it happen when you install an extension that modifies the menu system, if you install a toolbar extension, or if you reload extensions.

To see your toolbars getting reset, CTRL+Click on the Options menu of the Insert bar when it is Tab layout, and select Reload Extensions. Please note that resetting your toolbars will cause them to stack up vertically, turn off any toolbars that are not set to be visible by default, and the toolbars will get reattached to the document window, if you have moved your toolbars off of it.

While you can't stop Dreamweaver from resetting your toolbars, you can stop it from turning off the toolbars that you want to remain visible:

Go to your user configuration folder and open up /Toolbars/toolbars.xml. If you do not have toolbars.xml in your user folder, then go into the application install folder and open that toolbars.xml file. Back up the file, by saving a copy with a different file extension, or save a back up copy in another folder. Within toolbars.xml, look for the <toolbar> tag with an ID of Standard_Toolbar. Change the value of the initiallyVisible attribute to "true". Save toolbars.xml and restart Dreamweaver.

If you have other toolbar extensions installed, and they disapper, then you can change the initiallyVisible attribute to true and they won't disappear when your toolbars are reset. Some toolbar extensions will install their own XML file into the Toolbars folder. You'll need to open that file in order to perform the necessary edits.

Category tags: Dreamweaver, Extensibility, JavaScript