JSFL dialog

Code snippets, JSFL

JSFL DialogWhile 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 += ‘

‘;
dialogXML += ‘‘;
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.

🙂 Let me know if you have some nice references or JSFL scripts to share.

Learn more:

Find all my JSFL tools on Github.

11 responses to “JSFL dialog”

  1. Mark Knol says:

    Oh, forgot to mention I’ll publish the improved version of ‘name it right.jsfl’ soon.

  2. DieTapete says:

    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/

  3. Pierre says:

    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).

  4. Pierre says:

    Setting <radio selected=”true” … /> that is. ^^

  5. Phil says:

    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…

  6. 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.

  7. Mark says:

    Hey Colin, Thanks for the update, this must have been changed in a newer Flash version, I never experienced issues with it.

  8. molecule says:

    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
    }

  9. molecule says:

    désolé c’était le script jsfl, voici le xml :

  10. molecule says:

    dialog title=”JSFL dialog” buttons=”accept, cancel”>

    </dialog

Say something interesting

Please link to code from an external resource, like gist.github.com.