Adobe^® Photoshop^® Panel Developer's Guide

Flickr Search Panel: Modify Panel's Properties

The fourth part of the Flickr Search Panel is programming the Adobe Photoshop Panel to change its properties using ActionScript. The developer will program in ActionScript and set the initial size of the Flickr Search Panel and retrieve properties of the host environment (Adobe Photoshop) to mimic the panel's background, font style, and font size. The developer will program in ActionScript to create fly out menu items along with its event handlers to change the color background to differing colors.

Instructions:

The red colored text are the changes made to the Script tag in FlickrSearch.mxml:

<mx:Script>
   <![CDATA[
      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 photoFeed:ArrayCollection;
      private function init():void{
         searchText.addEventListener(FlexEvent.ENTER, requestPhotos);
         
         var windowSize:WindowGeometry = new WindowGeometry(100,100,350,350);
         CSXSInterface.getInstance().requestStateChange(StateChangeEvent.WINDOW_RESIZE, windowSize);
         
         var result:SyncRequestResult = CSXSInterface.instance.getHostEnvironment();
         var hostData:HostEnvironment = result.data;
         var skinInfo:AppSkinInfo = hostData.appSkinInfo;
         defaultColor = skinInfo.panelBackgroundColor.color.rgb;
         this.setStyle("backgroundGradientColors", [defaultColor, defaultColor]);
         this.setStyle("fontFamily", skinInfo.baseFontFamily);
         this.setStyle("fontSize", skinInfo.baseFontSize);
         
         var xmlMenu:XML = <Menu>
            <MenuItem Label="Photoshop Color Background"/>
            <MenuItem Label="---"/>
            <MenuItem Label="White Background"/>
            <MenuItem Label="Red Background"/>
            <MenuItem Label="Green Background"/>
            <MenuItem Label="Blue Background"/>
            </Menu>;
         CSXSInterface.getInstance().setPanelMenu(xmlMenu);
         CSXSInterface.getInstance().addEventListener(MenuClickEvent.FLYOUT_MENU_CLICK, onMenuHandler);
      }
      private function onMenuHandler(inEvent:MenuClickEvent):void {
         if ("Photoshop Color Background" == inEvent.menuName) {
            this.setStyle("backgroundGradientColors", [defaultColor, defaultColor]);
         } else if ("White Background" == inEvent.menuName) {
            this.setStyle("backgroundGradientColors", [0xffffff, 0xffffff]);
         } else if ("Blue Background" == inEvent.menuName) {
            this.setStyle("backgroundGradientColors", [0x005a8c, 0x005a8c]);
         } else if ("Red Background" == inEvent.menuName) {
            this.setStyle("backgroundGradientColors", [0x8c0000, 0x8c0000]);
         } else if ("Green Background" == inEvent.menuName) {
            this.setStyle("backgroundGradientColors", [0x008c00, 0x008c00]);
         } else {
            Alert.show("Unknown selection: " + inEvent.menuName);
         }
      }
      private function requestPhotos(event:Event):void{
         flickrService.cancel();
         var params:Object = new Object();
         params.format = "rss_200_enc";
         params.tags = searchText.text;
         flickrService.send(params);
      }
      private function photoHandler(event:ResultEvent):void{
         photoFeed = event.result.rss.channel.item as ArrayCollection;
      }
      private function faultHandler(event:FaultEvent):void{
         Alert.show("Not able to load photos from services","Error");
      }
   ]]>
</mx:Script>

Code Walkthrough: The private String variable, defaultColor, is to hold the value of the Adobe Photoshop default panel background. Inside the init tag, the variable windowSize sets up the initial size of the Flickr Search Panel by sending through CSXSInterface with the parameter StateChangeEvent.WINDOW_RESIZE. Inside the init tag, the getHostEnvironment() retrieves the host environment, Adobe Photoshop, properties. The Flickr Search Panel is first initialized to the default color. For this tutorial, the background color of an Adobe Photoshop default panel is retrieved by skinInfo.panelBackgroundColor.color.rgb and set in the setStyle function with the parameter backgroundGradientColors. In addition, the font family and the font size of an Adobe Photoshop default panel is retrieved by skinInfo.baseFontFamily and skinInfo.baseFontSize respectively and set in the setStyle function with the parameter fontFamily and fontSize respectively. Note: backgroundGradientColors, fontFamily, and fontSize are usually the parameters within the Application tag. Inside the init tag, the variable xmlMenu is an XML object to set up the flyout menu with the parameter MenuClickEvent.FLYOUT_MENU_CLICK. The --- is a separator in the fly out menu between the menu items. Note: Submenus are currently not supported and therefore flyout menus can only have one level. The event listener function onMenuHandler is the function that handles the user's selection of the menu items on the flyout menu.

Continue to Connect on Preferences

Table of Contents

Flickr Search Panel: Modify Panel's Properties