Simple Photoshop Panel: a few questions [UPDATE html+css+js]

Anyone, especially newbies, asking for help with Photoshop Scripting and Photoshop Automation - as opposed to those contributing to discussion about an aspect of Photoshop Scripting

Moderators: Tom, Kukurykus

fhuel

Simple Photoshop Panel: a few questions [UPDATE html+css+js]

Post by fhuel »

Hello everyone,
this is my first post in this forum and I would first thank you because you made me learn extended script
Thank also to this forum I was able to make this little script that, even if it's just a test, is helping me a lot with quick UI prototyping : http://projects.allrightdesign.com/maquette/

BUT…

I'm trying to make the leap and learn how to make panels, I found extended script relatively simple and well documented after all… But using flash builder to make panels is a real pain.
I did read all the guides and documents I can find, but everything is a mess… The ovelapping of CSI and CSXS drive me crazy, and most important I can't find a reliable and up to date documentation on these subjects…

For my first panel everything I would like it to do is set a folder, just being persistent ...and very little more.
I've made this script that exports images "for the web", and it does so based on layers and layer groups names.
I just would like to let the user pick a folder, and that this choice will be there even if the user close and reopen the panel.
Then I need a big button to run the script ( and this does already work ), and a button to show an "how to" state … and a little bit of graphical configuration won't hurt

This is my code so far, can you please tell me where I do wrong ?
Can CSI and CSXS coexists ?
Is it possible to create a panel just with flash (CS6) ? I don't understand the need to use Flash builder, I find it pretty over complex for a relatively simple task as create a "package" for a jsx script… Do I miss something ?

Code: Select all<?xml version="1.0" encoding="utf-8"?>
<csxs:CSExtension xmlns:fx="http://ns.adobe.com/mxml/2009"
              xmlns:s="library://ns.adobe.com/flex/spark"
              xmlns:csxs="com.adobe.csxs.core.*"
              xmlns:ns1="*"
              xmlns:mx="library://ns.adobe.com/flex/mx"
              width="283" height="136" applicationComplete="appComplete()"
              currentState="lasagna"
              width.lasagna="240" height.lasagna="200" xmlns:csawlib="com.adobe.csawlib.*">
   <fx:Script>
      <![CDATA[
      
         import com.adobe.csxs.core.CSInterface;
         import flash.filesystem.File;
         import mx.states.*;
         import mx.controls.Alert;
         import mx.events.FlexEvent;
         import mx.rpc.events.*;
         import mx.collections.*;
         import com.adobe.csxs.core.CSXSInterface;
         import com.adobe.csxs.events.*;
         import com.adobe.csxs.types.*;
         
         private var defaultColor:String;

         [Bindable]
         private var hostName:String = HostObject.mainExtension;
         
         [Embed (source= "Prova.jsx" , mimeType= "application/octet-stream" )]
         private static var myScriptClass:Class;
         
         public var jsxInterface:HostObject;
         
         private function init():void{
            var windowSize:WindowGeometry = new WindowGeometry(100,100,350,350);
            //CSXSInterface.instance.evalScript("PhotoshopPersistent");.getInstance().requestStateChange(StateChangeEvent.WINDOW_RESIZE, windowSize);
         }
         
         public function appComplete():void{
             CSInterface.instance.autoThemeColorChange = true;
            
            //make it persistent : *** IT DOESN'T WORK! ***
            CSInterface.instance.evalScript("PhotoshopPersistent");
            
            jsxInterface = HostObject.getRoot(HostObject.extensions[0]);
            jsxInterface.eval( new myScriptClass().toString());
         }

         protected function lasagna(event:MouseEvent):void
         {
            jsxInterface.lasagna( path.text );
         }
         
         protected function browse(event:MouseEvent):void
         {
            var f : File = new File;
            f.addEventListener(Event.SELECT, onFolderSelected);
            f.browseForDirectory("Choose a directory");
         }
         
         public function onFolderSelected(e:Event):void
         {
            var f:File = e.target as File;
            path.text = f.nativePath;
         }
         
         protected function openURL_clickHandler(e:MouseEvent):void
         {
            var request:URLRequest = new URLRequest("http://www.adobe.com");
            try {
               navigateToURL(request)
            } catch(error:Error) {
               trace("navigateToURL Error");
            }
         }
         
      ]]>
   </fx:Script>
   
   <csxs:states>
      <s:State name="lasagna"/>
      <s:State name="help"/>
   </csxs:states>

   <s:Image includeIn="lasagna" x="10" y="16" width="29" height="29" source="@Embed('assets/folder.png')"/>
   <s:TextInput id="path" includeIn="lasagna" x="47" y="20" width="111" borderAlpha="0.2" borderColor="#000000" color="#E0E0E0" doubleClick="browse(event)" doubleClickEnabled="true" prompt="set a default folder"/>
   <s:Button id="browseFolder" includeIn="lasagna" x="168" y="20" width="61" label="Browse" chromeColor="#262626" click="browse(event)" color="#FFFFFF"/>
   
   <s:Button includeIn="lasagna" x="80" y="80" width="85" height="85" click="lasagna(event)" skinClass="skins.Lasagna"/>
   
   <s:Button includeIn="lasagna" x="210" y="173" width="19" height="19" skinClass="help" click="currentState='help'"/>
   <s:Button includeIn="lasagna" x="10" y="173" width="19" height="19" skinClass="link" click="openURL_clickHandler(event)"/>
   <s:Button includeIn="help" x="10" y="181" width="19" height="19" label="back" click="currentState='lasagna'" skinClass="back"/>
   
   <s:RichEditableText includeIn="help" x="10" y="10" width="239" color="#535353" enabled="false" text="HOW TO&#xd;Name all the layers or layer groups you want to export with a filename:&#xd;&#xd;• file.jpg&#xd;• file_75.jpg &#xd;• file.png or file_8.png &#xd;• file.gif&#xd;&#xd;You can set an output folder (optional) and then go Lasagna!"/>
   <s:RichEditableText includeIn="help" x="133" y="190" width="116" color="#828282" fontSize="10" fontStyle="italic" text="Lasagna v1.0" textAlign="right"/>
   
   <csxs:transitions>
      <s:Transition id="myTransition" fromState="lasagna" toState="help">
         <s:Parallel>
            <s:Fade/>
            <s:Move/>
         </s:Parallel>
      </s:Transition>
   </csxs:transitions>
   
</csxs:CSExtension>

Thank you guys for your help



--------------------- UPDATE ------------------------

Ok guys, since the new version of Adobe Configurator (3.1) supports "full frame" html panel and direct js calls to the photoshop environment,
probably it makes sense for me to try rebuilding the panel in a way that I find a little easier and a lot less messy...
Does anyone even tried this new approach ?
Everything seems to work fine except that when I call _AdobeInvokeFunctionInScriptFile() nothing happens.
Do you know a way to debug, to se some sort of error or such... ?

Thanks