While playing with JSFL and trying to create a faster interface for my name it right.jsfl I stumbled across a very interesting function inside JSFL. There is a powerful function called fl.getDocumentDOM().xmlPanel which shows dialogs using .xml-files. Actually you could use XUL (XML User Interface Language), which kinda looks like a mix of HTML and Flex. If you need a GUI for your JSFL script, you can open a nice custom dialog using XUL.
Why create tools inside a tool?
Yes, the Flash is a very nice IDE. But with JSFL you can extend it. You can build your own snippets and tools. It could be very helpful to automate some boring things. I think it is very powerful to have the ability to extend your environment for your everyday tasks.
Show a dialog with JSFL
Create a dialog file
This is an example of XUL. Save it as test-dialog.xml in your local commands folder.
<vbox>
<label control="myTextfield" value="Enter some text"/>
<textbox id="myTextfield"/>
<label control="myColor" value="Choose a nice color"/>
<radiogroup id="myColor">
<radio label="Orange"/>
<radio selected="true" label="Violet"/>
<radio label="Yellow"/>
</radiogroup>
</vbox>
</dialog>
Open the dialog with JSFL
Save it as test-dialog.jsfl in the same folder as the .xml file.
var xmlPanelOutput = fl.getDocumentDOM().xmlPanel(fl.configURI + "/Commands/test-dialog.xml");
if (xmlPanelOutput.dismiss == "accept") // user confirms dialog
{
fl.trace("myTextfield: " + xmlPanelOutput.myTextfield);
fl.trace("myColor: " + xmlPanelOutput.myColor);
}
else // user canceled dialog
{
}
Run it by clicking ‘Commands’ > ‘test-dialog’ in Flash; our custom dialog will show up. Nice! 
Give me more; I want dynamic dialogs
If you check out the documentation of fl.getDocumentDOM().xmlPanel, you see you only can pass a uri to a xml file, but there is no way to pass a XML or Object to it. Adobe if you read this post; that would be nice. But I found a hack to create a dialog from JSFL by dynamically create a XML and save it as temporary file and open that one as xmlDialog. The file will be removed after showing the dialog.
{
var tempUrl = fl.configURI + "/Commands/temp-dialog-" + parseInt(777 * 777) + ".xml"
FLfile.write(tempUrl, xmlString);
var xmlPanelOutput = fl.getDocumentDOM().xmlPanel(tempUrl);
FLfile.remove(tempUrl);
return xmlPanelOutput;
}
This function displays a dialog from a (xml) string and returns the values like you would expect from the xmlPanel-function. You could use a XML object for this too, but I think it’s easier to hack some variables into it or make templates with strings.
var dialogXML = ”;
dialogXML += ‘<dialog title="JSFL dynamic dialog" buttons="accept, cancel">’;
dialogXML += ‘<hbox>’;
dialogXML += ‘<label value="Enter 2x something"/>’;
dialogXML += ‘<textbox id="myText1" value=""/>’;
dialogXML += ‘<textbox id="myText2" value=""/>’;
dialogXML += ‘</hbox>’;
dialogXML += ‘</dialog>’;
var xmlPanelOutput = showXMLPanel(dialogXML);
if (xmlPanelOutput.dismiss == "accept") // user confirms dialog
{
fl.trace("myText1: " + xmlPanelOutput.myText1);
fl.trace("myText2: " + xmlPanelOutput.myText2);
}
Since you are dealing with strings, you can manipulate and add extra elements. This allows you to pass data from JSFL to your dialog.
So, can you make panels too?
I really hate custom panels, because I never get my workspace right for two screens (moving/closing/opening panels the whole day), so there is no room for other panels. I start loving JSFL-scripts because you can assign a shortcut-key to it, which runs the tool, without having a panel in my workspace.
Conclusion
I like to create handy snippets and will share more in the future. But if you thought (just like me) this is some kind of a new feature: It’s not.
@mknol since 2004.
— Keith Peters (@bit101) November 30, 2011
Let me know if you have some nice references or JSFL scripts to share.
Learn more:
- JSFL Reference (PDF)
- XUL controls
- XUL reference
- .. or my own XUL JSFL cheatsheet