作为一个不熟悉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间交互。
网友评论