[sketch plugin]如何写一个可交互的webView界

作为一个不熟悉object-c的UI开发，原本以为有了cocoascript就完事大吉，然而在用oc写sketch插件界面的时候还是稍有吃力的。于是就研究下如何写一个webView的界面，并让webView和sketch间交互。

新建一个窗口

首先我们用AppKit的API写一个窗口

//窗口宽高
var panelWidth = 280; 
var panelHeight = 240;

// 新建一个panel
var panel = NSPanel.alloc().init();
//根据给定的矩形框设置窗口框架矩形的原点和大小，从而在屏幕上设置其位置和大小
panel.setFrame_display(NSMakeRect(0, 0, panelWidth, panelHeight), true);
  
panel.setStyleMask(NSTexturedBackgroundWindowMask | NSTitledWindowMask | NSClosableWindowMask | NSFullSizeContentViewWindowMask);
//设置panel背景色
panel.setBackgroundColor(NSColor.whiteColor());

// 设置title bar
panel.title = "";
panel.titlebarAppearsTransparent = true;

// 使panel居中并focus panel
panel.center();
panel.makeKeyAndOrderFront(null);
panel.setLevel(NSFloatingWindowLevel);

// Make the plugin's code stick around (since it's a floating panel)
COScript.currentCOScript().setShouldKeepAround_(true);

// 隐藏panel的最小化及最大化按钮
  panel.standardWindowButton(NSWindowMiniaturizeButton).setHidden(true);
  panel.standardWindowButton(NSWindowZoomButton).setHidden(true);

// 设置一个模糊背景阴影
var vibrancy = NSVisualEffectView.alloc().initWithFrame(NSMakeRect(0, 0, panelWidth, panelHeight));
  vibrancy.setAppearance(NSAppearance.appearanceNamed(NSAppearanceNameVibrantLight));
  vibrancy.setBlendingMode(NSVisualEffectBlendingModeBehindWindow);

由此，我们就获得了这样一个空白的窗口

在窗口中创建一个webView

在写 JavaScript 的时候，可以使用一个叫做 window 的对象，在Objective-C 中，我们可以拿到这个出现在 JavaScript 中的 window 对象，也就是 [webView windowScriptObject]。这个对象就是 WebView 的JS 与OC（在我们这里是sketch）间的桥梁。在cocoascript就是这样写

// 在panel中新建一个webView
var webView = WebView.alloc().initWithFrame(NSMakeRect(0, 0, panelWidth, panelHeight - 44));
// 获取webView的url，也就是我们事先写好的一个界面
var request = NSURLRequest.requestWithURL(context.plugin.urlForResourceNamed("panel.html"));
webView.mainFrame().loadRequest(request);//加载webView
webView.setDrawsBackground(false);

// 获取webView里的window对象
var windowObject = webView.windowScriptObject();

webView界面的代码

//css
.container{
  padding: 10px;
}
.value{
  width: 100%;
  height: 100%;
  background-color: #272822;
  color: #fff;
}
.text{
  padding: 10px;
  font-family: Consolas,"Liberation Mono",Menlo,Courier,monospace;
}
//HTML
<div class="container">
    <div class="value">
        <p class="text" id="textCSS">CSS</p>
    </div>
</div>

接着我们把这个webView加到窗口中

// 把这个webView加到窗口中
panel.contentView().addSubview(webView);

如此就获得了我们想要的界面，是不是棒棒的？
在下一篇文章里我们将讲解如何使这个webView和OC间交互。