JSFL dialog (2)
December 1st, 2011, under Code snippets, JSFL.
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);
}
else // user canceled dialog
{
}
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.
Let me know if you have some nice references or JSFL scripts to share.



















Oh, forgot to mention I’ll publish the improved version of ‘name it right.jsfl’ soon.
Did you already try xJSFL? http://www.xjsfl.com
Some nice scripts and tutorials on JSFL are also here http://ajarproductions.com/blog/flash-extensions/