Discussion Forums  >  Buzztouch News and Announcements

Replies: 12    Views: 371

David @ buzztouch
buzztouch Evangelist
Profile
Posts: 6866
Reg: Jan 01, 2010
Monterey, CA
78,840
09/19/12 11:21 PM (13 years ago)

Custom Plugins + Interface Builder happy marriage.

The topic "Interface Builder" has been coming up for years. The questions generally sound like one of these.... (Note, .xib files are prounounced "nib" files, these are used in Xcode to configure a user interface in an iOS app) "Where are the .xib files in my project" "Why doesn't buzztouch use .xib files?" "Can I use xib files in my buzztouch project" etc, etc. We've never been big fans of Interface Builder but understand completely what it's used for, how it helps tons of folks, and why Apple includes it in Xcode. I've developed loads of apps with it and have come close a few times to "liking it" but continue to prefer good ole' fashion code. We added a plugin to the market today (Timer) that includes two Interface Builder files, 1 for iPhone and 1 for iPad. For many, this will lead to confusion because they are not used to seeing these types of files in buzztouch projects (or at all for that matter). For others, this will be a GIANT relief for exactly the opposite reason, they see xib files all over the place in all sorts of iOS apps and tutorials and can't live without them! These xib files sometimes help those used to seeing IB files in an iOS project "see" the relationship between the UIViewController (the plugin class file) and the xib file. There is no doubt that opening a .xib file in Xcode and making a few changes is super duper easy if you understand how it works. Technical stuff, and some tips on using IB files in your own custom plugins if you so choose.... --The relationship between the xib file and a plugin's class file is set in the Utilities Panel in Interface Builder. This is the panel that slides in and out on the right side of the screen (in default setup) in Xcode. To set this relationship, (tell Xcode which class file "powers" the xib file) highlight the File's Owner item in the Placeholders panel, then use the Utilities Panel to set the Custom Class to the class file for the plugin. Another way to say it: "Connect the class file to the File's Owner using Interface Builder." Example: If you had a plugin with class file name of "myMap" (.m and .h) you would choose "myMap" in the Custom Class file drop down list after selecting the File's Owner object. --When making xib files, they MUST HAVE EXACTLY THE SAME NAME AS THE PLUGIN class file. Literally, case sensitive. For a plugin class file with name "myMap" with myMap.m and myMap.h files, the xib file would be myMap.xib (and another one named myMap~ipad.xib if you're supporting iPad). The tilde (squiggly mark) is not a typo. This naming convention tells Xcode to "load this xib file when running on iPad." --When using xib files to do your layout, you are NOT setting up interface objects (like buttons, sliders, views, and other UI components) in code in the viewDidLoad method, you are setting them up using Interface Builder by dragging and dropping widgets on the screen. Don't try to do both, it always complicates things. --When the screen in your app "loads" iOS will look for an xib file with exactly the same name, then load it if it exists. This is like magic for new developers. Neat stuff. --Adding UI components in Interface Builder is only part of the process. The other part is the code that supports the widgets you drag to the screen. IBActions and IBOutlets are the magic connections you create. This post won't go into how these connections are created but just know that some people find it much easier to work this way. I'll try to find some time to make a video about this to show you how "easy" it is to create neat custom plugins using this method if you're adverse to writing code and / or are simply wondering how this could work in a buzztouch project. It can, and does, and the Timer plugin in the market is a good example to look at. We're also considering adding two blank xib files (one for iPhone and one for iPad) to the auto-generated files the Plugin Creator Tool makes so you can jump right in an start dragging things around if you so choose. It's also possible that we'll re-create some of the existing plugins with xib files. I say this because we'll end up updating lots of these anyway with some of the iOS 6 changes I mentioned in a few previous posts. We're always trying to make the process easier and more reliable and more understandable for app owners and plugin developers and it's beginning to look like we'll end up using xib as the standard approach, even if David (me) doesn't like it this way! Laughing a bit, I'm a code freak. Keep exploring and keep learning...good things happen to those that know iOS / Android dev. these days :-)
 
GoNorthWest
buzztouch Evangelist
Profile
Posts: 8197
Reg: Jun 24, 2011
Oro Valley, AZ
1,000,000
like
09/19/12 11:41 PM (13 years ago)
"if you're adverse to writing code" = the whole reason I use buzztouch! ;-) Can't wait to give this a shot. The new .xib-based plugin looks pretty cool! Mark
 
Ashy_Ravaliya
Aspiring developer
Profile
Posts: 51
Reg: Apr 21, 2012
London, United ...
3,310
like
09/19/12 11:43 PM (13 years ago)
Great post! Thanks David!
 
Stobe
buzztouch Evangelist
Profile
Posts: 1528
Reg: Mar 04, 2011
Fredericksburg,...
24,680
like
09/20/12 03:45 AM (13 years ago)
This helps me a lot, since most of my plugins I've created in the past utilize IB. I haven't looked it up yet, but have been curious if there will be a third naming convention for iPhone 5's new pixel ration i.e. "-iphone" has been used to signify a iphone xib if you have an ipad xib also. Will there be one for i5?
 
Crown Solutions
Aspiring developer
Profile
Posts: 463
Reg: Nov 11, 2011
MN
13,480
like
09/20/12 05:45 AM (13 years ago)
Thanks David, I have a feeling this will help the market a lot. I have been looking at melding the two for a while now, and this will make thing much easier. I learn a lot better through code examples, and now having something to look at.
 
MGoBlue
Apple Fan
Profile
Posts: 980
Reg: Jun 07, 2011
Gold River, CA
10,600
like
09/20/12 06:08 AM (13 years ago)
Excellent! Look forward to trying it out.
 
mysps
Code is Art
Profile
Posts: 2082
Reg: May 14, 2011
Palma
33,320
like
09/20/12 06:17 AM (13 years ago)
Thanks David again for allowing the xibs in my project! As I mention, I'm a visual learner and it helped me alot being able to use the Interface Builder! Up and onward!! :)
 
Susan Metoxen
buzztouch Evangelist
Profile
Posts: 1706
Reg: May 01, 2011
Hopkins, Minnes...
26,260
like
09/20/12 06:23 AM (13 years ago)
This gives us a whole new way to make our apps beautiful! IB will be a lot easier to adjust than to put together from scratch.
 
ATRAIN53
Code is Art
Profile
Posts: 1755
Reg: Nov 17, 2011
Chicago
26,450
like
09/20/12 06:49 AM (13 years ago)
I've been using this technique a while. I had planned to release a plugin with just a blank XIB file to use as template for BT projects. I guess no need for that now...... Keeping the BT navigation controller in tact was the hardest part of making XIB files work properly. I would highly suggest watching some youtubes on simple IB lessons. It can literally write code by dragging and dropping stuff. Connecting IB outlets to the Files Owner using the ASSISTANT Editor is something you should see to understand. The 20 tutorials I read to explain it never made sense. but watching a 2:00 Video, it made sense in 5 seconds..... These are a few other gotchas and techniques I've run into while using IB in BT projects: 1) if you borrow other XIB files from other projects or move them around- Close your project and copy them in. Then open the project and CLEAN & BUILD, that seems to restore the class connection. 2) Deleting your DERIVED DATA can also help re-establish class connections because that will reindex your project when you close/open it. 3) you'll know if the class connection is broken if you click on the file owner and see no outlets to connect. viva la IB - love it or hate it, it's nice to have the added functionality to design screens. essential to follow tutorials....
 
Crown Solutions
Aspiring developer
Profile
Posts: 463
Reg: Nov 11, 2011
MN
13,480
like
09/20/12 06:53 AM (13 years ago)
Great point ATRAIN53- I was working with this as well and your #1 tip hung me up for a long time!!
 
mrDavid
BTMods.com
Profile
Posts: 3936
Reg: May 21, 2011
San Diego, CA
51,910
like
09/20/12 07:33 AM (13 years ago)
@mysps, congratulations on the plugin! @david, great info, fun to know (never messed with XIB actually) @atrain, a plugin like that would still be appreciated i'm sure ;) David buzztouchmods.com
 
Arubaman
Aspiring developer
Profile
Posts: 636
Reg: Oct 20, 2011
Akron
16,910
like
09/20/12 11:50 AM (13 years ago)
Being a visual learner I think this will help me immensely.
 
mutzy
Aspiring developer
Profile
Posts: 841
Reg: Nov 03, 2010
Medford, MA
9,860
like
09/30/12 05:16 PM (13 years ago)
This is great stuff! When I first joined BT over a year ago I had looked into incorporating xib files into my app since I think it will make our apps look MUCH more professional especially if I can have different views for iPad. I really can not wait to look more into this. I just may redo the home screens for ALL of my apps now...
 

Login + Screen Name Required to Post

pointerLogin to participate so you can start earning points. Once you're logged in (and have a screen name entered in your profile), you can subscribe to topics, follow users, and start learning how to make apps like the pros.