设计师编程指南之Sketch插件开发 7 GUI
往期文章索引：
1 / 入门基本概念、page的相关操作
2 / artboard 、NSFileManager 和 NSString 关于文件及文件夹的相关操作
5/ Shape 的一些操作，主要介绍 line 及 rect
本期给大家介绍4种GUI交互方式：
1 提示用户
2 用户文本输入的方式
3 选项框输入的方式
4 保存数据至本地文件
1
提示用户
有2类，第一种类似于 web 开发的 alert 窗口：
[NSApp displayDialog:@'No artboards selected!']
另外一种，相当于 android 里的 toast （会自动消失的）
var doc=context.document; [doc showMessage:@"hello world"]
2
获取用户输入
输入框，相当于 web 的 input ，返回用户输入的 value
var doc=context.document; [doc askForUserInput:@"Enter something" initialValue:@"default"];
3
选项框
初始化一个 NSAlert 对象，设置其标题，及按钮。
// Create dialog
var dialog = NSAlert.alloc().init();
dialog.setMessageText("This a alert view"); dialog.addButtonWithTitle("Save");
dialog.addButtonWithTitle("Cancel");
新建一个 NSView ，作为 select 和 ckeckbox 的容器
var customView = NSView.alloc().initWithFrame(NSMakeRect(0, 0, 200, 180));
var label = createLabel(NSMakeRect(0, 150, 200, 25), 12, false, 'Label1:'); customView.addSubview(label);
var select=createSelect(NSMakeRect(0, 125, 200, 25), ["item1", "item2"]); customView.addSubview(select);
var checkbox = createCheckbox(NSMakeRect(0, 60, 200, 25), "checked", "checked_value", true, true); customView.addSubview(checkbox);
把 customView 添加进 dialog 里即可。
// Add custom view to dialog
dialog.setAccessoryView(customView);
分别封装3个函数：createLabel 、 createSelect 、 createCheckbox 。
function createLabel(frame, size, bold, text) {
var label = NSTextField.alloc().initWithFrame(frame);
label.setStringValue(text);
label.setBezeled(false);
label.setDrawsBackground(false);
label.setEditable(false);
label.setSelectable(false);
if (bold) {
label.setFont(NSFont.boldSystemFontOfSize(size));
}else {
label.setFont(NSFont.systemFontOfSize(size));
}
return label;
};
function createSelect(frame, items) {
var select = NSPopUpButton.alloc().initWithFrame(frame);
select.addItemsWithTitles(items); return select;
};
function createCheckbox(frame, name, value, onstate, enabled) {
var checkbox = NSButton.alloc().initWithFrame(frame);
checkbox.setButtonType(NSSwitchButton);
// checkbox.setBezelStyle(1);
checkbox.setTitle(name);
checkbox.setTag(value);
checkbox.setState(onstate ? NSOnState : NSOffState);
checkbox.setEnabled(enabled);
return checkbox;
};
监测 select 的事件变化,当 select 选项为第一个时，设置 checkbox 的状态为 true 。
// Listen for select box change event
select.setCOSJSTargetFunction(function(sender) {
if (select.indexOfSelectedItem() == 0) {
checkbox.setState(NSOnState);
checkbox.setEnabled(true);
} else if (select.indexOfSelectedItem() == 1) {
checkbox.setState(NSOffState); checkbox.setEnabled(false);
}
});
4
保存数据至本地文件
通过 NSSavePanel ，自定义一种文件格式，这里随意设定了一组数据 fileData
// Open dialog and exit if user selects Cancel
if (dialog.runModal() != NSAlertFirstButtonReturn) {
return;
}else{
//checkbox state log('checkbox state:'+checkbox.state()) log('select selected Item:'+select.indexOfSelectedItem()) // Create save dialog and set properties
var save = NSSavePanel.savePanel();
save.setNameFieldStringValue("untitled.mixlab"); save.setAllowedFileTypes(["mixlab"]); save.setAllowsOtherFileTypes(false); save.setExtensionHidden(false);
if (save.runModal()) {
var fileData={ "mixlab":"hello world", "version":48, "author":"shadow" };
var filePath = save.URL().path();
var file = NSString.stringWithString(JSON.stringify(fileData)); file.writeToFile_atomically_encoding_error(filePath, true, NSUTF8StringEncoding, null);
};
};
ps：关于打开本地文件GUI，在DIY一个Sketch插件，生成猫猫狗狗的全家福这篇文章已经介绍过。
*
知识星球
更多 sketch 插件的开发，代码的下载，可以在知识星球交流。还包括：
1 看到一些好案例，关键技术解决方案，写出文章又不成体系，发星球;
2 我会在知识星球发一些非常机密的研究心得;
3 一些非常有技巧的知识，给付费用户;
4 公众号的迭代版本，针对文章发更为升级、核心的内容。
5 当然，还有资深的专家在星球里。
*
热门文章
*
关于公众号：
本公众号定期更新人工智能&设计&科技内容。
谈点设计，敲点代码，偶尔创作点人工智能实验产品。
码字不易，开启新的打赏方式：