Using Storyboards for OS X


so if you’ve done any iOS development
before you’ll be familiar with the concept of storyboards and these are files that essentially
allow you to visually layout all of the views of your application and make connections between them for
instance doing setting up a transition when a button
clicks on iOS it’s mainly focused on
transitioning between views On OS X yosemite we now
have storyboards when we do Cocoa development they’re slightly different
and that they’re not so much focus on doing full screen view transitions because
generally have a lot more screen real estate for desktop applications but it is a
great way just to visually layout and organize your applications so mister you’re just a quick example how this new feature works I’m so you
need to be actually running OS X 10.10 in order to use
storyboards from Xcode 6 just be aware that so from the welcome screen I’m to create
a new Cocoa application I am just gonna call it story and which
is swift as the language and then we have this check box saying
whether we want to use storyboards now if we don’t we’re gonna use regular
zip files like me know we always have when doing
Mac development if we check of you storyboards click Next and click Create it’s created a a basic I’m template project for us and if you
notice we have an app delegate that Swift a view controller subclass
already created for us and you’ll see why in a sec it when I
click on Team main story board amid a scandal screen real estate here so you can see
at the default in our story board we have a couple
items first we have are actual window controller this is holding are the main window for
our application and then we have this relationship
between this and this view controller subclass down here and this is actually linked
via this code file and what this is doing is essentially
setting the window content for our window to
this view controller so that’s how it is when we first come
in so now we want to do is to add some items am to our main view controller for me go in the object panel down here we’re gonna
create a really simple application I’m gonna get a collar well summit drag-out color well and then we’re gonna get a button is a
simple button which is going to load in a second view it’s
essentially going to take another view controller and put it over the top of this or replace
it now again like I mentioned as of right now
there’s not a lot of options as far as transitions go I’ll show you
what those are in a second let’s quickly wire these up to our swift
file some to go to the assistant editor and
let’s get a little more space here so here’s our an issue controller
subclass which is tied to this view controller but i wanna do is to get a reference to that color well summit drag this
control drag and I’ll just call it well and here you
can see how and I B outlet looks in swift I’m you know somewhat similar of course we
don’t have a header file and then we have our button but let me go back here so now what we
need to you add is another view controller
that we want to you transition to when we click on this
button let me go back to the object panel and I’m gonna drag out a new view
controller we put it to the side so now in this
view controller what we’re gonna have is I a box so we’re gonna get and NS box and the scroll down it is and I’m going to make this a box typeof
custom just so we can show a collar in there for me just drag that
their more increase the size like that and then we’re gonna need a
button which is going to close this view sewing bring out button here and which is at it like that so now we need to do is to create a new
NSN view controller subclass remembered that
automatically with the template it created one for us well now we’re gonna need to create one
for that second view controller something it’s a new file Coco class and I’m gonna call this second
controller now we don’t want to create a zip file
for game because we’re using storyboards so click Next and click Create and one other things that will give you
an error or warning is this is not the correct
initialization override to use with storyboards what we
want to use is net coder and then inside of that
call the super net coder initialization function so just be aware that I’m again this is
a beta version obviously let’s go back to the
storyboard and now what we need to do is to tell
this view controller that we want to use that new class some to come here and a custom class and
I’m gonna say second controller so now that that now that’s linked up okay so what the
next thing we need to do is to find that relationship between these two view controllers so this is the main
view control that’s gonna be shown we first launch the app we click this button essentially want to
transition to this view controller so to do that all you do is control drag
from the button to my main view controller and now you
can see we have this action segue pop up now these are the
transitions that are currently available as of right now so we can show the
second view controller as a popover as a modal window or as sheet now the other option is a custom segue
and that’s where we can define the animation that’s gonna happen between the two
ourselves amber will look at that in a future tutorial I’m a
sketchy sheet so now we click on this object you can
see under the Segway we it’s a stylesheet and you will gonna
wanna give that and identify your because we perhaps
might not sometimes what to perform the Segway we
can actually do checking I’m in code for that so now let’s run
the app and see what we have so far so they’re trying now by default you
gonna get some errors here in the console I’m again this is
obviously beta Xcode on beta I’m OS 10 so here I have the window I have my I’m
collar well the button and when I click we can see it’s now
transitioning that new view controller in as she now this button here we’re going
to use to control it we haven’t set that up yet so let’s do that so let’s select that view controller and let’s go to the assistant editor and what’s going here to second
controller and what we want to do you is firstly
let’s link up this button by control dragging and we’re gonna create an action so when
we click that we’re gonna call I’m and action method
called dismiss now all we have to do you I’m inside
here is to call self dot dismiss controller and pass in self so this is a ged kinda
vague global way I mean it will send this up throughout
the responder chain so if no matter what type love I am window this is in whether to pop over
sheet just by calling dismiss control it will close itself I and essentially transition back to
where it was before the other thing you need to do is to I
get a reference to my box here because I’m gonna want to fill it with
the color the comes out through that outlet so first let’s tested to make sure we
have our transition running so here’s the window cyclic down we now see it as a sheet i click and it goes
away so we have our transitioning between
views working now just to show you what it
would look like hereby select the segue and let’s go ahead and change the type from she to pop over and you can see we have options for the
anchored view where will be anchored but when I run this
here’s the window when I click button we can see we have essentially a a pop
I’ll pop under in this case but showing up in a popover window so we
have multiple options for how we want to
display that second view controller okay so now we want to do you is I’m when we click on this button here its do it’s performing the Segway but we
need a way to get this color value over to the second view controller in
this is a common issue of being able to send data between view controllers so there’s a method that we have to
implement I’m in order to make that happen you’re always going need to
implement this we going to our I main view controller this is the view controller that for our
main view that shows now we come into the app you can wanna
override a function called prepare for Segway and this gets called right before the I’m the transition happens between this
storyboard and the destination controller so what we can do in here is we can send
some data to that destination view controller for it to use so first we need a reference to that
destination controller and we can get it right of the Segway object so segue well actually it’s create this as a let so we’ll say to find a constant
here and Walcott second is equal to you segue and then as a property called
destination controller and will want to cast that to our second controller class we created so now we have a reference to that class
we have a reference to the destination P controller now we can set what’s called its
represented object and this is a data object can be
anything that we can send to that view controller so we’re gonna
say second dot represented object is equal to well that color and that’s gonna pull the NS
color out of our caller well and send it to that second view
controller to now if we go to the second controller that’s where file now when we first come
in and display our view I wanna set the
color above that and ice box so I’m gonna go to one of
the few override methods will do view will appear which is called right before the view
will appear and present to the user and what I wanna do here’s
to simply set box dot fill color equal to self dot represented object remember that represented object is a
collar and we should cast that here to and a
scholar so again going back right before the
Segway as a backup to happen this method gets called we get
a reference to the destination we said it’s represent the object to the
color and then in this class when the right before the
view appears we’re gonna set that box to the correct
color was test the application and here we go now let me choose color from the color well from the color
picker click button and now we can see we saw
that pop over salami change it to you sheet so we’ll go to are segue and change it to she its run that again and there we go click button and now we have our second
view controller act transitioning in and we’re getting
that color through the represented object and were
able to change to a different color here and things are connected up nicely so
this kinda thing so much easier to do now in Xcode 6 so that an overview of storyboards on OS
10 it’s still really early and I’m expecting things to change but it’s
great to be able to have this kinda visual overlay and and assembling of the various views in your application

Leave a Reply

Your email address will not be published. Required fields are marked *