JSFL dialog
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.
[xml]
[/xml]
Open the dialog with JSFL
Save it as test-dialog.jsfl in the same folder as the .xml file.
// xmlPanel returns an Object with values of the dialog.
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.
function showXMLPanel(xmlString)
{
var localConfigURI = fl.configURI;
// Verify that the provided path ends with ‘/’
if (localConfigURI.charAt(localConfigURI.length – 1) != “/”) localConfigURI = localConfigURI + “/”;
var path = localConfigURI + “Commands/.dialog-” + parseInt(Math.random() * 1000) + “.xml”
FLfile.write(path, xmlString);
var xmlPanelOutput = fl.getDocumentDOM().xmlPanel(path);
FLfile.remove(path);
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.
// create an XUL with JSFL
var dialogXML = ”;
dialogXML += ‘‘;
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
Find all my JSFL tools on Github.
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/
Setting doesn’t actually do anything.
Is there a solution for assigning the default radio-button selected?
(sorry I know this post is dated but I’m really curious if there is a parameter for this).
Setting <radio selected=”true” … /> that is. ^^
Hi there !
Thanx for your code, which helped me a LOT with a jsfl I was trying to code.
There is a little problem, still.
If I open a FLA, OR if I create a new blank one in Flash before executing the command, everything works fine. But if I execute Flash, then the jsfl command, I get a javascript error, telling me that fl.getDocumentDOM() is null.
Which is correct, because I didn’t open any FLA yet. But what I want to code, is a dialog box which lets the user choose one directory, then the jsfl scans every FLA found in this directory and applies them a bunch of modifications. So there’s no logical reason, in this case, to have any FLA “pre-open”. Do you have any idea how I can avoid this error without having to open a document in Flash IDE ?
Thanx again for your kind help…
In the step “Open the dialog with JSFL”, there appears to be a bug in your call to xmlPanel().
You wrote:
var xmlPanelOutput = fl.getDocumentDOM().xmlPanel(fl.configURI + “/Commands/test-dialog.xml”);
But it should be:
var xmlPanelOutput = fl.getDocumentDOM().xmlPanel(fl.configURI + “Commands/test-dialog.xml”);
The “/” before “Commands” is redundant because fl.configURI has a trailing “/” at the end of the path. As written, your example causes the following error:
xmlPanel: Argument number 1 is invalid.
Hey Colin, Thanks for the update, this must have been changed in a newer Flash version, I never experienced issues with it.
very good, thanx !
if someone still uses Flash / Animate; =)
here is the xml code that does not appear in this post anymore :
// xmlPanel returns an Object with values of the dialog.
var xmlPanelOutput = fl.getDocumentDOM().xmlPanel(fl.configURI + “/Commands/_dialog.xml”);
if (xmlPanelOutput.dismiss == “accept”) {
// user confirms dialog
fl.trace(“myTextfield: ” + xmlPanelOutput.myTextfield);
fl.trace(“myColor: ” + xmlPanelOutput.myColor);
} else {
// user canceled dialog
}
désolé c’était le script jsfl, voici le xml :
dialog title=”JSFL dialog” buttons=”accept, cancel”>
</dialog
https://gist.github.com/molecul3/019d0e3b540608157c480103372cb3ba