设计师编程指南之Sketch插件开发 7 GUI
往期文章索引：
1 / 入门基本概念、page的相关操作
2 / artboard 、NSFileManager 和 NSString 关于文件及文件夹的相关操作
3 / DIY一个Sketch插件，生成猫猫狗狗的全家福
4 / NSPasteboard 、text 的操作
5/ Shape 的一些操作，主要介绍 line 及 rect
6/ Shape的curve操作
本期给大家介绍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插件，生成猫猫狗狗的全家福这篇文章已经介绍过。
举报
腾讯云开发者
