Skip to content

Instantly share code, notes, and snippets.

@matt-curtis
Last active August 29, 2015 14:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save matt-curtis/157ce38f6fb1040ef343 to your computer and use it in GitHub Desktop.
Save matt-curtis/157ce38f6fb1040ef343 to your computer and use it in GitHub Desktop.
Fireworks CSXS Notes

Building CSXS extensions for Fireworks with Adobe Flash Builder 4.x

1.) Fireworks does not have it's own CSWSBlaBlaLib to encapsulate DOM manipulation from AS3. You can only use this to execute JS functions (defined in your CSXS manifest.xml)

CSInterface.instance.evalScript("jsFunctionName", ..params);

This method is even more fun than the MMExecute method you'd be using if you were writing a normal panel, becuase all return objects have to be an XML string. I'm not kidding you. XML. You know, the markup format that is most well known for its use in RSS feeds.

So now, all of your JS functions return statements will look like this:

var returnXML = '<object>';
returnXML += '<property id="pleaseKillMe"><true/></property>';
returnXML += '</object>';

return returnXML;

So now you can write:

if(CSInterface.instance.evalScript("jsFunctionName", ..params).data.pleaseKillMe == true){}

Have fun kids!

2.) Important Compiler Flag so Flex 4 Panels don't ackt funny:

-includes=mx.managers.systemClasses.MarshallingSupport

I used to know what this does. I don't anymore. This is the literal equivalent of magic for me right now. Anyways Flex 3 Panels have this by default....?

3.) Theme/background matching FW panels

import com.adobe.csxs.core.CSInterface;
			
//  In applicationComplete/wherever you feel like
CSInterface.instance.autoThemeColorChange = true;

4.) Supported CSXS Events:

com.adobe.csxs.events.FWSelectionChangeEvent
com.adobe.csxs.events.internal.ims.FetchAccessToken
com.adobe.csxs.events.StopDebug
com.adobe.csxs.events.StartDebug
com.adobe.csxs.events.ExecutableExit
com.adobe.csxs.events.UserOffline
com.adobe.csxs.events.UserOnline
com.adobe.csxs.events.AppOffline
com.adobe.csxs.events.AppOnline
com.adobe.csxs.events.AdminOffline
com.adobe.csxs.events.AdminOnline
com.adobe.csxs.events.CheckSMSUpdate
com.adobe.csxs.events.AppDeactivated
com.adobe.csxs.events.AppActivated
com.adobe.csxs.events.ExtensionUnloaded
com.adobe.csxs.events.ExtensionLoaded
com.adobe.csxs.events.Logout
com.adobe.csxs.events.CancelLogin
com.adobe.csxs.events.Login

// Used like so
CSXSInterface.instance.addEventListener("eventName", callback);

The only one I've ever noticed fire is FWSelectionChangeEvent (which I'm guessing was only added for the sake of the CSS Properties CSXS Panel)...also it's the only one that gives you updates on what's happening with the DOM.

Also ExtensionLoaded and ExtensionUnloaded fire, but never for your own panel - only for another panel being opened.

5.) No modals!

Fireworks only supports the CSXS extension type Panel, and none of the fun ones - Modeless, Modal, etc. - so anything else ain't gonna fly. Your only options are creating another extension in your CSXS Manifest that doesn't have a menu item, so it doesn't show up under Window > Extensions. You can then request for that Panel to show up by calling:

CSInterface.instance.requestOpenExtension("your.second.panel's.extension.id");

Wow! Extraordinary. Now the user has two panels to play with instead of one, boy oh boy.

You can try to use NativeWindow (AIR feature, look it up) to open a new window, but even here Fireworks does its best to shoot you in the buttocks: New Windows open up inside your panel, replacing whatever Panel/SWF you had loaded before. I'm actually impressed by that one.

Your last recourse is to use fw.runScript("file:///Path/To/Your/SWF") to open a modal with your SWF inside. This'll work, however because it isn't a CSXS panel, it will have to use Flex 3 (specifically, flex_sdk_3.0.0.477A, the magic, prophesied Chosen Flex Version that can receive events, and run JavaScript using MMExecute!) or else the SWF won't load properly, so it won't be able to leverage AIR and you'll probably have to build it through a seperate project. Joy.

6.) CSXS Panels are still kinda funky

CSXS Panels themselves in Fireworks have two main issues:

  1. They can't decide on a consistent size to be. CSXS Panels in Fireworks want one they and one thing only: to be free to be the size they truly are, on the inside. A CSXS Panel doesn't care what size you resize it to, it will snap back to whatever size you define in your manifest/Application (CSExtension) tag whenever you next open it. See dad, it's not just a phase.

  2. They do this irritating flashing thing. CSXS Panel SWFs in Fireworks are not themselves displayed in their panel window, they're actually being subloaded by another SWF which is the actual root SWF: StageManager.swf. That's fine, except whoever wrote StageManager decided that all the panels should have a white background, and he wouldn't take no for an answer. That white flash you see when you first open a panel is StageManager.swf's background, letting you know of it's dark master's wishes. You can alleviate this a bit by doing nativeWindow.visible = false inside your preinitialize event so the white background shows only for a short time. But it still hurts.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment