A library for Sketch plugins that lets you load UI views from NIB files built with Interface Builder.
This library is designed for use with skpm.
-
Install the library in your plugin code:
npm install --save sketch-nibui
-
Create an XIB file in Interface Builder with a single top-level
NSView
orNSWindow
. -
Convert the XIB to a NIB and place it in your plugin's
assets
directory:ibtool --compile assets/MyUI.nib MyUI.xib
Note: I'm hoping to automate this in the future with a custom webpack plugin or loader for skpm.
-
Load the views in your plugin code using
nibui.load()
, which returns an object with arootView
property set to the top-levelNSView
in your NIB if successful.const nibui = require('sketch-nibui'); export default function(context) { let nib = nibui.load(context, 'MyUI'); // MyUI.nib let dialog = NSAlert.alloc().init(); dialog.setAccessoryView(nib.rootView); ... dialog.runModal(); }
You'll likely want to access subviews under your top-level NSView
. To do that:
-
In Interface Builder, select the subview and in the Identity inspector, set the view's Identifier to an ID like
myView
. -
Access it using
nib.views.myView
If your XIB has an NSWindow
as its top-level view, you can access it with nib.rootWindow
and its content view with nib.rootView
. Access subviews using nib.views.myView
like when the top-level view is an NSView
.
You can pair this library with something like MochaJSDelegate to attach event handlers to your views.
Hint: you can use the delegate for button clicks using yourButton.setTarget(delegate)
and
yourButton.setAction(NSSelectorFromString('yourClickAction:'));