Embed Size (px)
Citation preview
INTRO TO UICATALOG
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.
UICatalog – has a buVon for the code
UICatalog – Readme.txt, has info
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
•
Just download the sample…. • Run it in the iPad 5 Simulator:
IPAD STENCILS
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:
Gimp… • Cut and Paste, we can move the GUI around for size:
Gimp DocumentaAon • Gimp has a lot of documentaAon found at hVp://docs.gimp.org/2.8/en/ :
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.
PIECES AND PARTS
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:
AppDelegate.h….
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:
SOME BASIC TERMINOLOGY
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.
XIB Code GeneraAon
hVp://docs.xamarin.com/ios/advanced_topics/xib_code_generaAon
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.
CocoaDev on Outlets
Some AcAons… • In ImagesViewController, we see some AcAons, given by IBAcAon.
CocoaDev on AcAons
THE CONTROLLERS
BuVonsViewController • StarAng from the top of the menuList and working down, we have the BuVonsViewController:
BuVonsViewController.xib
BuVonsViewController.h • Declaring the BuVons.
BuVonsViewController.m • Define the BuVons.
ControlsViewController
ControlsViewController.xib
ControlsViewController.h • Declare the Controls.
ControlsViewController.m • Define the Controls.
TextFieldController
TextFieldController.xib
TextFieldController.h • Declare the TextFields.
TextFieldController.m • Define the TextFields.
SearchBarController
SearchBarController.xib
SearchBarController.h • Declare the SearchBar.
SearchBarController.m • Define the SearchBar.
TextViewController
TextViewController.xib
TextViewController.h • Declare the TextView.
TextViewController.m • Define the TextView.
ImagesViewController
ImagesViewController.xib
ImagesViewController.h • Declare the ImageView.
ImagesViewController.m • Define the ImageView.
WebViewController
WebViewController.xib
WebViewController.h • Declare the UIWebView.
WebViewController.m • Define the UIWebView.
SegmentViewController
SegmentViewController.xib
SegmentViewController.h • Declare the SegmentViewController.
SegmentViewController.m • Define the SegmentViewController.
ToolbarViewController
ToolbarViewController.xib
ToolbarViewController.h • Declare the toolbar.
ToolbarViewController.m • Define the toolbar.
AlertsViewController
AlertsViewController.xib
AlertsViewController.h • Declare the UIAlertViewDelegate.
AlertsViewController.m • Define the AcAon Sheets.
TransiAonViewController
TransiAonViewController.xib
TransiAonViewController.h • Declare the Image Views and senders.
TransiAonViewController.m • Define the Image Views and senders.
CONCLUSION
