i pad uicatalog_lesson02
TRANSCRIPT
Disclaimer – For EducaAonal Purposes • This training PowerPoint is in no means reproducing the documents that it may reference.
• Which also means that the references may change at the owners will.
• It only provides references to public sites as a means for the person reading this to do more research and verify any informaAon at their leisure.
• The purpose of this document’s original intent was simply to provide myself a means of walking through various soluAons and reference points.
• I offer no personal support of this document and release it “as is” with no commercial intent.
UICatalog -‐-‐ Apple • Apple provides a sample tutorial for various UI Controls and Views called UICatalog.
• This sample is really meant for the iPhone, but I will likely apply some iPad to it.
• See hVp://developer.apple.com/library/ios/#samplecode/UICatalog
UICatalog – Why? • I decided to walk through UICatalog because it gives various samples to show what UiKit can do.
• I also decided to enhance the example to actually be more iPad like, for example, Split Views.
A note about iPad stencils… • There is always the need to mockup the Gui before development for good requirements.
• There are many iPad stencils, OmniGraffe being popular, and stencil sets at places like, hVp://webdesignledger.com/freebies/11-‐ui-‐kits-‐for-‐iphone-‐and-‐ipad-‐development
•
A note about iPad stencils… • There is always the need to mockup the Gui before development for good requirements.
• There are many iPad stencils, OmniGraffe being popular, and stencil sets at places like, hVp://webdesignledger.com/freebies/11-‐ui-‐kits-‐for-‐iphone-‐and-‐ipad-‐development
• These are good tools, and for some of them, a OS X operaAng system is required, be it MacBook or VMWare.
My favorite…stencils… • For my purposes, I use the iOS simulator, Gimp, hVp://www.gimp.org/ and screen grab with Command-‐Shid-‐4, screen shot commands.
My favorite… • Copying from the Simulator, we can just cut and paste icons, and various screen controls for our stencils.
• Running UIControl, we can start pasAng:
So where are we now….
• We can create new screen captures and combine them using Gimp to see what a GUI may look like.
• We can grab snippets of code from samples like UIControl to match up with the GUI.
• Capturing from different samples, and using cut and paste screens can show what an App may look like before coding.
The Language…. • We are doing ObjecAve-‐C (Obj-‐C) in this example, which is a superset of the C language, from NeXTSTEP, that objecAfies C that adds Smalltalk-‐style messaging. hVp://en.wikipedia.org/wiki/ObjecAve-‐C
• We could have built the App in straight C, C++, ObjecAve-‐C++, or even C#.
• You can also learn Obj-‐C on Windows using GnuStep, hVp://en.wikipedia.org/wiki/GNUstep
UIKit.H and AppKit.H…. • Also note, that we are using UIKit.h, which is the graphics framework for iPad and iPhone, and part of Cocoa-‐Touch, hVp://en.wikipedia.org/wiki/Cocoa_Touch
• For the Mac OSX, we would be using Cocoa and AppKit.h. hVp://en.wikipedia.org/wiki/Cocoa_(API)
• Most kits will use MVC, which is design paVern in most Programming Languages.
UIKit.H …. • The UIKit Reference can be found at hVp://developer.apple.com/library/ios/#documentaAon/UIKit/Reference/UIKit_Framework/_index.html
A few words about MVC • The Model-‐View-‐Controller (MVC):
• hVp://en.wikipedia.org/wiki/Model–view–controller
Main.m…. • All C, C++, and C# languages will start with a Main funcAon, and we would normally find ours in main.m:
MainViewController.m…. • The main is going to start the MainViewController::viewDidLoad to start the first page with the menuList:
MainViewController.m…. • An array called menuList is used to store the Controllers from the main page:
AppDelegate.m…. • Ader the main starts, the AppDelegate gets called to make the window visible, usually in the applicaAonDidFinishLaunching funcAon:
A liVle recap…. • MVC was menAoned earlier, and in the previous slides, we have a UIApplicaAon, navigaAonController, and window.
• Not to go into too much detail, these items do not have to be Coded Objects, but can be delegated .XIB files.
• The MainWindow.xib will be called from the AppDelegate and filled in by the MainViewController.
The base Window • The Window, MainViewController, NavigaAon bar and Appdelegate are ascoiated with each other in the MainWindow.xib:
UIView • All the Views, Controls, Windows, and Controllers can be added using the Interface Builder:
NIB File The NIB file is the compiled set of XIB files, the XML, for the App.
It will be packaged in the deployed App. hVp://developer.apple.com/library/mac/#documentaAon/Cocoa/Conceptual/LoadingResources/CocoaNibs/CocoaNibs.html
XIB File There are many XML file formats to help generate GUI’s, for example in Microsod's WPF, there is the XAML file format.
For IOS, it is the XIB file format.
These file formats offer a good base to iniAalize the graphics based on the devices grid system, but Aghter control of the graphics will rely on the MVC code.
Interface Builder The XIB file can be managed in Xcode’s Interface Builder.
See hVp://en.wikipedia.org/wiki/Interface_Builder
Pro’s and Cons of IB and XIB can be found at hVp://mobile.tutsplus.com/tutorials/iphone/interface-‐builder/
AcAons and Outlets • Outlets will allow Controllers to talk to the View, AcAons will allow the View to talk to the Controller.
• The AcAon sends a message to a target, usually through a “sender” and the target will implement a responder.
• See Cocoa Fundamentals Guide hVps://developer.apple.com/library/mac/#documentaAon/Cocoa/Conceptual/CocoaFundamentals/CommunicaAngWithObjects/CommunicateWithObjects.html#//apple_ref/doc/uid/TP40002974-‐CH7-‐SW15
We have seen Outlets • In AppDelegate.h, we already see 2 Outlets, one for window, and one for navigaAonController using the IBOutlet keyword.
BuVonsViewController • StarAng from the top of the menuList and working down, we have the BuVonsViewController: