Jump to content


Photo

JSON Panel library for creating complex Fireworks panels using only JavaScript


  • Please log in to reply
9 replies to this topic

#1 jdunning

jdunning

    Fireworks Ninja

  • Members
  • PipPipPipPipPip
  • 173 posts

Posted 14 September 2009 - 09:07 AM

Similar to the Command Dialog extension (http://bit.ly/lKwQu) I released a few weeks ago, the new "JSON Panel" extension lets you create complex "Flash" panels for Fireworks using only JavaScript. No Flash or Flex needed. The extension can be downloaded here: http://bit.ly/cd6Mk

Posted Image

The panel above was created using the library. It works similarly to the built-in Info panel, where you can see the selection's size and position, and enter new values to change them. There's also a checkbox option that forces size changes to be proportional; if it's checked, changing the width or height values will scale the selection proportionally, which is something the Info panel doesn't do. The whole panel was written in JavaScript.

Besides the events generated by the Flex elements, you can also handle events generated by Fireworks, such as onFwActiveSelectionChange, which fires when the selection changes, or onFwActiveDocumentChange, which fires when the user switches to a different document. Handling these events lets you update the panel in response to user actions in the Fireworks UI.

One significant advantage of the library over building a panel in Flash, even if you know ActionScript well, is that you don't need to mess around with escaping your JavaScript code to pass to MMExecute() (anyone who's tried to build a panel will know what I mean). Since you're writing your event handlers in JavaScript, you can call the Fireworks API directly. As you're developing a panel and change the JavaScript, you just have to hit F5 to refresh the panel with the new code, similar to working with a webpage in a browser.

Anyway, I hope you find it useful. Let me know if you have any questions or run into any bugs.

#2 fuuuuu

fuuuuu

    FireworksFreak

  • Members
  • PipPip
  • 19 posts

Posted 13 October 2010 - 11:41 AM

Once again great tool and thanks for all your work! I've been using it quite a lot recently and noticed what might be an issue on Flex side perhaps. I can't get the TabNavigator to behave correctly. It seems only the first tab loads all my functions correctly (so that the nested elements trigger them if needed) and when I click on the second or third tab the functions will no longer work (on any of the tabs). All UI functionality works but they don't trigger what they're supposed to. Any ideas as to why this would happen?

#3 jdunning

jdunning

    Fireworks Ninja

  • Members
  • PipPipPipPipPip
  • 173 posts

Posted 14 October 2010 - 07:09 PM

Once again great tool and thanks for all your work!

Thanks! I'm glad to see someone actually using it. Sort of a niche tool. :)

I can't get the TabNavigator to behave correctly. It seems only the first tab loads all my functions correctly (so that the nested elements trigger them if needed) and when I click on the second or third tab the functions will no longer work (on any of the tabs). All UI functionality works but they don't trigger what they're supposed to. Any ideas as to why this would happen?

Quite possible there's a bug with tabs. Other than testing that the layout works, I haven't really used them for anything. Can you upload your panel here or send to fw at johndunning dotcom?

#4 jdunning

jdunning

    Fireworks Ninja

  • Members
  • PipPipPipPipPip
  • 173 posts

Posted 14 October 2010 - 09:14 PM

Quite possible there's a bug with tabs. Other than testing that the layout works, I haven't really used them for anything. Can you upload your panel here or send to fw at johndunning dotcom?


I've tried creating some tabs with child elements that respond to events, and it seems to work for me. I'd suggest installing the Fireworks Console before running your panel: http://johndunning.c...about/FWConsole

The JSON Panel code still has some console.log calls in it, so as events are triggered in a panel, you should see text appear in the console, like
fwlib.panel._handleEvent(...
. If you see logging info only while clicking the elements on the first tab, then something is indeed wrong.

#5 fuuuuu

fuuuuu

    FireworksFreak

  • Members
  • PipPip
  • 19 posts

Posted 20 October 2010 - 02:31 PM

Thanks! I'm glad to see someone actually using it. Sort of a niche tool. :)


Quite possible there's a bug with tabs. Other than testing that the layout works, I haven't really used them for anything. Can you upload your panel here or send to fw at johndunning dotcom?



Thanks for checking it out. It took me a few days to test it a bit more but I found what was actually happening. The stepper in my code (stripped down version of the longer JSON) is for some reason triggering until it reaches its max number. So the alert is popping up 5 times be because the stepper's max number is five but I only click on the stepper once. It seems it's changing after the event is triggered which sends it into an infinite loop.I'm not sure what I'm doing wrong.

Once again thanks for your help.

try {
    (function(){
        function Stepper(_name) {
            return { 
            	/*Max number is 5, so onUIChange is called 5 times consecutively*/
            	NumericStepper: { name: _name, width: 50, value: 0, stepSize: 1, maximum: 5, minimum: 0,  events: { change: onUIChange } } 
            };
        }
        function onUIChange(event) {
        	var ui = event.targetName;
        	switch(ui){
        		case "test1":
        			alert('blah');
        			break;
        		case "test2":
        			alert('blah2');
        			break;
        	}
        }
		var panelJSON = {

				children:[{ 
					Box:{width:300,children:[{
						TabNavigator:{width:200,height:150,children:[{
							VBox:{label:"1",children:[Stepper("test1")]}
							},{
							VBox:{label:"2",children:[{Label:{text:"placeholder"}}]}
							},{
	            			                VBox:{label:"3",children:[Stepper("test2")]}
	            		                }]}
					}]}
				}]
	
		};

		fwlib.panel.register(panelJSON);
	})();
} catch (exception) {
	alert([exception,exception.lineNumber,exception.fileName].join("\n"));
}

PS: I should mention I ran the tests and checked your FW Console (very helpful indeed), and it showed the event being dispatched 5 times (stepper's max) consecutively. Also, I'm using FW CS5.

#6 jdunning

jdunning

    Fireworks Ninja

  • Members
  • PipPipPipPipPip
  • 173 posts

Posted 20 October 2010 - 09:14 PM

The stepper in my code (stripped down version of the longer JSON) is for some reason triggering until it reaches its max number. So the alert is popping up 5 times be because the stepper's max number is five but I only click on the stepper once. It seems it's changing after the event is triggered which sends it into an infinite loop.I'm not sure what I'm doing wrong.

I'm not entirely sure why showing the alert and then dismissing it should re-trigger the stepper. But removing the alert() calls from your example seems to fix the problem. I can then click the up/down buttons in the stepper without it looping until it hits the maximum number.

I'll need to investigate why alert causes this problem, but if you're just trying to spit out debugging info, you can make console.log() calls instead, after you've opened the Fireworks Console panel. Note that the output of these calls is displayed only periodically, when the console polls for new log calls. But at least you won't have to dismiss the alert dialog boxes every time they pop up. Similar to the console in Firefox, you can pass multiple parameters to output, and passing an object or array will spit out a full string representation.

Hope that helps.

#7 fuuuuu

fuuuuu

    FireworksFreak

  • Members
  • PipPip
  • 19 posts

Posted 21 October 2010 - 04:05 PM

I'm not entirely sure why showing the alert and then dismissing it should re-trigger the stepper. But removing the alert() calls from your example seems to fix the problem. I can then click the up/down buttons in the stepper without it looping until it hits the maximum number.

I'll need to investigate why alert causes this problem, but if you're just trying to spit out debugging info, you can make console.log() calls instead, after you've opened the Fireworks Console panel. Note that the output of these calls is displayed only periodically, when the console polls for new log calls. But at least you won't have to dismiss the alert dialog boxes every time they pop up. Similar to the console in Firefox, you can pass multiple parameters to output, and passing an object or array will spit out a full string representation.

Hope that helps.


Yes, thanks. It seems it's working now. It never occurred to me that it would be caused by the alert() function.

Edit: Also discovered another issue (which probably was the root of my initial problem), which was my mistake but maybe someone else might run into it. I have a couple functions that return UI elements, and the name of these elements are passed through the function parameters. I was naming the elements with the same name even though they were different, so my stepper and colorpicker both had the Name property set to "header." Very subtle as it doesn't return errors and would build ok, it just wouldn't respond to dispatched events.

#8 jdunning

jdunning

    Fireworks Ninja

  • Members
  • PipPipPipPipPip
  • 173 posts

Posted 21 October 2010 - 04:58 PM

It never occurred to me that it would be caused by the alert() function.

I suspect that the alert dialog popping up in the middle of a click event being handled confuses Flash. Note that clicking into the text part of the stepper and then using up arrow to increment the number, instead of clicking the button, doesn't cause the loop.

#9 jdunning

jdunning

    Fireworks Ninja

  • Members
  • PipPipPipPipPip
  • 173 posts

Posted 21 October 2010 - 05:06 PM

I was naming the elements with the same name even though they were different, so my stepper and colorpicker both had the Name property set to "header." Very subtle as it doesn't return errors and would build ok, it just wouldn't respond to dispatched events.

Hmm, good catch. I could probably check for duplicate names when parsing the JSON. It already adds unique names for elements that have event handlers but no names. Not sure where to display the error, though. Pop an alert when the panel first loads? Insert some error element in the panel itself?

#10 fuuuuu

fuuuuu

    FireworksFreak

  • Members
  • PipPip
  • 19 posts

Posted 22 October 2010 - 08:52 AM

Hmm, good catch. I could probably check for duplicate names when parsing the JSON. It already adds unique names for elements that have event handlers but no names. Not sure where to display the error, though. Pop an alert when the panel first loads? Insert some error element in the panel itself?


Yeah, maybe a console.log() warning. I can't think of something myself but maybe there's a use for duplicate names, and if it's able to compile alright it could be a warning, but not sure.