作為一個(gè)不熟悉object-c的UI開(kāi)發(fā)，原本以為有了cocoascript就完事大吉距帅，然而在用oc寫(xiě)sketch插件界面的時(shí)候還是稍有吃力的。于是就研究下如何寫(xiě)一個(gè)webView的界面，并讓webView和sketch間交互哥艇。
新建一個(gè)窗口
首先我們用AppKit的API寫(xiě)一個(gè)窗口
//窗口寬高
var panelWidth = 280;
var panelHeight = 240;
// 新建一個(gè)panel
var panel = NSPanel.alloc().init();
//根據(jù)給定的矩形框設(shè)置窗口框架矩形的原點(diǎn)和大小，從而在屏幕上設(shè)置其位置和大小
panel.setFrame_display(NSMakeRect(0, 0, panelWidth, panelHeight), true);
panel.setStyleMask(NSTexturedBackgroundWindowMask | NSTitledWindowMask | NSClosableWindowMask | NSFullSizeContentViewWindowMask);
//設(shè)置panel背景色
panel.setBackgroundColor(NSColor.whiteColor());
// 設(shè)置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);
// 設(shè)置一個(gè)模糊背景陰影
var vibrancy = NSVisualEffectView.alloc().initWithFrame(NSMakeRect(0, 0, panelWidth, panelHeight));
vibrancy.setAppearance(NSAppearance.appearanceNamed(NSAppearanceNameVibrantLight));
vibrancy.setBlendingMode(NSVisualEffectBlendingModeBehindWindow);
由此胁黑，我們就獲得了這樣一個(gè)空白的窗口
在窗口中創(chuàng)建一個(gè)webView
在寫(xiě) JavaScript 的時(shí)候废封，可以使用一個(gè)叫做 window 的對(duì)象，在Objective-C 中丧蘸，我們可以拿到這個(gè)出現(xiàn)在 JavaScript 中的 window 對(duì)象漂洋，也就是 [webView windowScriptObject]。這個(gè)對(duì)象就是 WebView 的JS 與OC（在我們這里是sketch）間的橋梁力喷。在cocoascript就是這樣寫(xiě)
// 在panel中新建一個(gè)webView
var webView = WebView.alloc().initWithFrame(NSMakeRect(0, 0, panelWidth, panelHeight - 44));
// 獲取webView的url刽漂，也就是我們事先寫(xiě)好的一個(gè)界面
var request = NSURLRequest.requestWithURL(context.plugin.urlForResourceNamed("panel.html"));
webView.mainFrame().loadRequest(request);//加載webView
webView.setDrawsBackground(false);
// 獲取webView里的window對(duì)象
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>
接著我們把這個(gè)webView加到窗口中
// 把這個(gè)webView加到窗口中
panel.contentView().addSubview(webView);
如此就獲得了我們想要的界面，是不是棒棒的弟孟？
在下一篇文章里我們將講解如何使這個(gè)webView和OC間交互贝咙。
