iPad UICatalog development in Objectve-C

1. LEARNING
IPAD
UICATALOG
IN
OBJ-­‐C
LESSON
2
Rich
Helton
Rhelton_1@yahoo.com
October
15,
2012

2. INTRO
TO
UICATALOG

3. 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.

4. 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

5. 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.

6. UICatalog
–
has
a
buVon
for
the
code

7. UICatalog
–
Readme.txt,
has
info

8. 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
•

9. Just
download
the
sample….
• Run
it
in
the
iPad
5
Simulator:

10. IPAD
STENCILS

11. 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.

12. 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.

13. 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:

14. Gimp…
• Cut
and
Paste,
we
can
move
the
GUI
around
for
size:

15. Gimp
DocumentaAon
• Gimp
has
a
lot
of
documentaAon
found
at
hVp://docs.gimp.org/2.8/en/
:

16. 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.

17. PIECES
AND
PARTS

18. 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

19. 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.

20. UIKit.H
….
• The
UIKit
Reference
can
be
found
at
hVp://developer.apple.com/library/ios/
#documentaAon/UIKit/Reference/
UIKit_Framework/_index.html

21. A
few
words
about
MVC
• The
Model-­‐View-­‐Controller
(MVC):
• hVp://en.wikipedia.org/wiki/Model–view–
controller

22. Main.m….
• All
C,
C++,
and
C#
languages
will
start
with
a
Main
funcAon,
and
we
would
normally
find
ours
in
main.m:

23. MainViewController.m….
• The
main
is
going
to
start
the
MainViewController::viewDidLoad
to
start
the
first
page
with
the
menuList:

24. MainViewController.m….
• An
array
called
menuList
is
used
to
store
the
Controllers
from
the
main
page:

25. AppDelegate.m….
• Ader
the
main
starts,
the
AppDelegate
gets
called
to
make
the
window
visible,
usually
in
the
applicaAonDidFinishLaunching
funcAon:

26. AppDelegate.h….

27. 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.

28. The
base
Window
• The
Window,
MainViewController,
NavigaAon
bar
and
Appdelegate
are
ascoiated
with
each
other
in
the
MainWindow.xib:

29. UIView
• All
the
Views,
Controls,
Windows,
and
Controllers
can
be
added
using
the
Interface
Builder:

30. SOME
BASIC
TERMINOLOGY

31. 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

32. 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.

33. XIB
Code
GeneraAon
 hVp://docs.xamarin.com/ios/
advanced_topics/xib_code_generaAon

34. 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/

35. 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

36. We
have
seen
Outlets
• In
AppDelegate.h,
we
already
see
2
Outlets,
one
for
window,
and
one
for
navigaAonController
using
the
IBOutlet
keyword.

37. CocoaDev
on
Outlets

38. Some
AcAons…
• In
ImagesViewController,
we
see
some
AcAons,
given
by
IBAcAon.

39. CocoaDev
on
AcAons

40. THE
CONTROLLERS

41. BuVonsViewController
• StarAng
from
the
top
of
the
menuList
and
working
down,
we
have
the
BuVonsViewController:

42. BuVonsViewController.xib

43. BuVonsViewController.h
• Declaring
the
BuVons.

44. BuVonsViewController.m
• Define
the
BuVons.

45. ControlsViewController

46. ControlsViewController.xib

47. ControlsViewController.h
• Declare
the
Controls.

48. ControlsViewController.m
• Define
the
Controls.

49. TextFieldController

50. TextFieldController.xib

51. TextFieldController.h
• Declare
the
TextFields.

52. TextFieldController.m
• Define
the
TextFields.

53. SearchBarController

54. SearchBarController.xib

55. SearchBarController.h
• Declare
the
SearchBar.

56. SearchBarController.m
• Define
the
SearchBar.

57. TextViewController

58. TextViewController.xib

59. TextViewController.h
• Declare
the
TextView.

60. TextViewController.m
• Define
the
TextView.

61. ImagesViewController

62. ImagesViewController.xib

63. ImagesViewController.h
• Declare
the
ImageView.

64. ImagesViewController.m
• Define
the
ImageView.

65. WebViewController

66. WebViewController.xib

67. WebViewController.h
• Declare
the
UIWebView.

68. WebViewController.m
• Define
the
UIWebView.

69. SegmentViewController

70. SegmentViewController.xib

71. SegmentViewController.h
• Declare
the
SegmentViewController.

72. SegmentViewController.m
• Define
the
SegmentViewController.

73. ToolbarViewController

74. ToolbarViewController.xib

75. ToolbarViewController.h
• Declare
the
toolbar.

76. ToolbarViewController.m
• Define
the
toolbar.

77. AlertsViewController

78. AlertsViewController.xib

79. AlertsViewController.h
• Declare
the
UIAlertViewDelegate.

80. AlertsViewController.m
• Define
the
AcAon
Sheets.

81. TransiAonViewController

82. TransiAonViewController.xib

83. TransiAonViewController.h
• Declare
the
Image
Views
and
senders.

84. TransiAonViewController.m
• Define
the
Image
Views
and
senders.

85. CONCLUSION