零基础的 PhotoShop CEP 6 开发教程 「 7 」UI - 保持持久运行与界面颜色

《零基础的 PhotoShop CEP 6 开发教程》系列目录

「 0 」目录
「 1 」配置开发环境
「 2 」CEP 文件结构
「 3 」CEP 的运行机制
「 4 」Hello World ！
「 5 」事件（EVENTS）
「 6 」调用 JSX 并传递信息
「 7 」UI - HTML 开发的一些细节
「 8 」API - 文件读写与二进制数据
「 9 」签名打包与 ZXPSignCmd
「 X 」CEP 更新到 6.1版了

---

前面的文章已经介绍了很多 CEP 的基础概念和方法，接下了会说一些关于 UI 的事情，首先要说的就是 CEP 扩展面板的运行问题。

保持持久运行

CEP 扩展面板默认是不会持久运行的，也就是说只要面板被隐藏扩展就会被关闭，面板再打开就会重新载入扩展，相当于浏览网页时，把网页最小化就会重载网页一样，这往往是我们不想要的，所以我们这时就需要把我们的扩展持久化，让它被隐藏时只是不显示而已，不会重新载入。

重新展开面板会导致重新载入面板失去所有状态

让我们的扩展保持持久运行，需要发送一个 com.adobe.PhotoshopPersistent 事件，告诉宿主我们的扩展需要持久化运行：

      var cs= new CSInterface();  

      var event = new CSEvent();//创建一个事件
      event.type = "com.adobe.PhotoshopPersistent"; //注册持久化运行事件
      event.scope = "APPLICATION";
      event.extensionId = cs.getExtensionID(); // 我们的扩展 ID
      cs.dispatchEvent(event); //发送事件让宿主持久化运行我们的扩展

界面颜色

我们都知道，PhotoShop 可以设置界面外观的颜色，而我们的扩展是网页，它不能自动随着界面颜色改变而改变自己的颜色，这需要我们通过 JavaScript 取得 PhotoShop 界面颜色，另外还有捕捉界面颜色改变的事件，让 PhotoShop 界面颜色改变时我们的扩展也能跟着改变颜色。

PhotoShop 的界面颜色

获得界面颜色信息

通过访问 getHostEnvironment()方法获取宿主的信息对象，其中有一个子对象 .appSkinInfo 包含了宿主的界面外观信息：

  var cs = new CSInterface(); 

  var skIinInfo = cs.getHostEnvironment().appSkinInfo; 

  skIinInfo.panelBackgroundColor.color.red // 面板背景色 RGBA 值： R
  skIinInfo.panelBackgroundColor.color.green // 面板背景色 RGBA 值： G
  skIinInfo.panelBackgroundColor.color.blue // 面板背景色 RGBA 值： B
  skIinInfo.panelBackgroundColor.color.alpha // 面板背景色 RGBA 值： A （透明度）

对象	内容
panelBackgroundColor	面板背景颜色
appBarBackgroundColor	应用工具条背景色
panelBackgroundColorSRGB	面板背景颜色 在 sRGB 色彩空间的值
appBarBackgroundColorSRGB	应用工具条背景色 在 sRGB 色彩空间的值
baseFontFamily	界面字体类型
baseFontSize	界面字体尺寸

界面颜色改变事件

通过捕捉 Type 为 "com.adobe.csxs.events.ThemeColorChanged" 的事件就可以捕获界面颜色改变了，同时 CSInterface 有一个常量：CSInterface.THEME_COLOR_CHANGED_EVENT ，它们的作用是一样的，要注意的是这个事件不会向回调函数传递任何信息。

    var cs = new CSInterface(); 
    cs.addEventListener(CSInterface.THEME_COLOR_CHANGED_EVENT, tChanged);

    function tChanged(event)
    {
       var cs = new CSInterface() ;
       var skIinInfo = cs.getHostEnvironment().appSkinInfo;
    }