设计师编程指南之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

获取用户输入

输入框,相当于 webinput ,返回用户输入的 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 ,作为 selectckeckbox 的容器

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插件,生成猫猫狗狗的全家福这篇文章已经介绍过。

原文发布于微信公众号 - 科技Mix设计Lab(Design-AI-Lab)

原文发表时间:2018-03-01

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏学海无涯

iOS开发之NSURLSessionUploadTask上传数据

苹果在 iOS9 之后已经废弃了NSURLConnection,NSURLSession成为其替代者,其基本知识网上很多,主要可以从NSURLSessionDa...

33910
来自专栏iOS Developer

Github源码推荐:(01.04):iOS开发蓝牙,启动动画,自定义Tabbar

1382
来自专栏iOS122-移动混合开发研究院

BlocksKit初见:一个支持将delegate转换成block的Cocoa库

简介 项目主页: https://github.com/zwaldowski/BlocksKit BlocksKit 是一个开源的框架,对 Cocoa 进行了扩...

21210
来自专栏iOS开发攻城狮的集散地

Url Scheme实现APP间通信、分享

接下来就以我之前写的UIActivityViewController系统原生分享-仿简书分享和iOS开源小项目-WSL两个Demo为例,让我们看下怎么可以让UI...

2498
来自专栏一“技”之长

iOS9系列专题二——全新的搜索功能api 原

        iOS9中为我们提供了许多新的api,搜索功能的加强无疑是其中比较显眼的一个。首先,我们先设想一下:如果在你的app中定义一种标识符,在siri...

995
来自专栏Rindew的iOS技术分享

iOS初步集成极光推送后你还要做这些事

3365
来自专栏冰霜之地

Weex 是如何在 iOS 客户端上跑起来的

2016年4月21日,阿里巴巴在Qcon大会上宣布跨平台移动开发工具Weex开放内测邀请。Weex能够完美兼顾性能与动态性,让移动开发者通过简捷的前端语法写出N...

3153
来自专栏一“技”之长

iOS运用runtime全局修改UILabel的默认字体

        在项目比较成熟的基础上,遇到了这样一个需求,应用中需要引入新的字体,需要更换所有Label的默认字体,但是同时,对于一些特殊设置了字体的labe...

1205
来自专栏iOS 开发杂谈

App的生命周期

注意: application:didFinishLaunchingWithOptions:: App 首次启动时调用,一般在这个函数里创建 window 对...

2251
来自专栏進无尽的文章

实践-小细节 III

Title:nil message:nil 标题和信息都设为 nil 不能设置为 @“” 这样还是会出现空白的标题

972

扫码关注云+社区

领取腾讯云代金券