[coco8] iOS - Hello World Tutorial

Before starting this tutorial, be sure you have met all of the requirements for iOS with S8 development. Specially the download of coco8 contribution. This contribution is our starting point for developing iOS apps with S8.

Tutorial: Hello World

• coco8.snapshot.js (Our S8 Smalltalk image)
• MainWindow.xib (If You want to create your own custom App Delegate class, You have to edit this file)

• "Slowly" double click on project name will change it to editable

• Accept suggested refactor

It's time to dive into Smalltalk

• Navigate to coco8/coco8/build folder. You will find:
  • Some Smalltalk source code files (.st)
  • A build editable file describing what will be included in the project S8 image (build.js)
  • A batch script file that creates the image. (_build.bat or _build.sh depending o the platform)
  • Most of Coco8 app Smalltalk code is in coco8App.st file. Open it with Your favorite editor
  • You will find Coco8AppDelegate class. This is the App Delegate of coco8App. If You want to know more about iOS App Delegates Click Here
  • If You want, You can change the name of the App Delegate class here don't forget to change it not only in the .st sources but also in MainWindow.xib using xCode InterfaceBuilder

! Coco8AppDelegate methodsFor: #ObjC !
applicationDidFinishLaunching: application
	" Private - Implements ObjC's post App launch action. "

	<objC: method>
	self window
		frame: UIScreen mainScreen bounds;
		rootViewController: self tabBarController;
		makeKeyAndVisible.
	NSFileManager installHooks.! !

! Coco8AppDelegate methodsFor: #tabs !
tabsSpecification
	" Private - Specification of main application tabs. "

	^#(
	#( #U8ApplicationsController #apps )
	#( #U8WorkspaceNavigationController #workspace )
	#( #U8BrowserNavigationController #browse )
	#( #U8MessagesNavigationController #messages )
	#( #U8TranscriptController #transcript )
	#( #U8InspectorNavigationController #inspector )
	#( #U8ServiceController #u8 )
	#( #U8SettingsController #settings )
	#( #U8ServersController #network )
	#( #PolygonViewController #polygon )
	) select: [:tuple| Smalltalk includesKey: tuple first ]! !

• The specs comes in an array of tuples.
• One tuple for tab.
• Each tuple has the Class name of the view controller associated to the respective tab, and decoration information (title, icon...)

• There are different approaches to create the UI for S8 - iOS apps, in this tutorial We choose the creation of a Storyboard using Xcode InterfaceBuilder

• Name it HelloWorld.StoryBoard and place it in an appropriate folder/group

• Paint The following components of the User Interface using Xcode InterfaceBuilder:

• An UITextField where the user will type his or her name.
• An UILabel for the personalized Salutation text
• An UIImageView to show a little icon that represents the current moment of the day (Morning, Afternoon, Evening or Night).

• Associating the View with the Controller consists in the following two tasks:
  • i) Set Custom Class and Identity that way:

• ii) Associate View components with Controller outlets:
  • Edit HelloWorld.storyboard file (Right click - Open as - Source Code)
  • Add connections tag in this way:

                        <subviews>
                            <textField opaque="NO" clipsSubviews="YES" contentMode="scaleToFill" ... id="W96-dh-CLq">
                                <rect key="frame" x="16" y="86" width="288" height="30"/>
                                ...
                            </textField>
                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" ... id="mcm-yA-qCm">
                                <rect key="frame" x="16" y="289" width="288" height="127"/>
                                <fontDescription key="fontDescription" name="HelveticaNeue-Medium" family="Helvetica Neue" pointSize="20"/>
                                <color key="textColor" red="0.0" green="0.0" blue="1" alpha="1" colorSpace="calibratedRGB"/>
                                <nil key="highlightedColor"/>
                            </label>
                            <imageView userInteractionEnabled="NO" contentMode="scaleToFill"  ... id="ziH-JK-PzL">
                                <rect key="frame" x="114" y="172" width="93" height="89"/>
                              ...
                              ...
                            </imageView>
                            ...
                            ...
                    </view>
                    

                    <connections>
                        <outlet property="dayMomentImageView" destination="ziH-JK-PzL" id="Abc-jq-542"/>
                        <outlet property="nameTextField" destination="W96-dh-CLq" id="PSC-aC-djj"/>
                        <outlet property="salutationLabel" destination="mcm-yA-qCm" id="Zqy-ai-6U1"/>
                    </connections>

• We can create a new file for app specific Smalltalk code. For example HelloWorld.st
• In this new flle We create HelloWorldViewController as a UIViewController subclass:

UIViewController
	subclass: #HelloWorldViewController
	instanceVariableNames: ''
	classVariableNames: ''
	category: #HelloSample!

• Add implementation spec for outlets, actions and methods

! HelloWorldViewController class methodsFor: #ObjC !
implementation
	" Private - Return the implementation literal of the receiver. "

	^(#outlets -> #(nameTextField salutationLabel dayMomentImageView))
	,(#actions -> #(#sayHello:))
	,(#methods -> #(
		#viewDidLoad
		#(#textFieldShouldReturn: 'BOOL id')
		))! !

• Build accessors for the three outlets:

HelloWorldViewController buildTypedAccessors: #(
	#( salutationLabel #UILabel )
	#( nameTextField #UITextField )
	#( dayMomentImageView #UIImageView )
)! !

• Initial settings for each time the view loads
  • the controller will be the nameField's delegate
  • The end of nameField edition will result in an invocation of #sayHello

! HelloWorldViewController methodsFor: #ObjC !
viewDidLoad
	" Private - Load/Set the view. "


	<objC: method>
	self salutationLabel text: ''.
	self nameTextField delegate: self.
	self nameTextField
		addTarget: self
		action: #sayHello:
		forControlEvents: 262144 "UIControlEventEditingDidEnd".
	^self super: #{arguments}! !

• Dismiss the System keyboard when tap "Enter" key

! HelloWorldViewController methodsFor: #ObjC !
textFieldShouldReturn: aFieldHandle
	" Private - Load/Set the view. "

	<objC: method>
	^(UITextField @ aFieldHandle) resignFirstResponder! !

• Personalize the salutation and shows it

! HelloWorldViewController methodsFor: #ObjC !
sayHello: sender
	" Private - Refresh the table contents. "

	| userName dayMoment nowHours salutationText |
	<objC: method>
	userName := self nameTextField text.
	nowHours := DateTime now hours.
	(nowHours between:0 and:5)|| (nowHours >= 21) ifTrue:[ dayMoment := 'Night'].
	(nowHours between:6 and:11) ifTrue: [ dayMoment :='Morning'].
	(nowHours between:12 and:17) ifTrue: [ dayMoment :='Afternoon'].
	(nowHours between:18 and:20) ifTrue: [ dayMoment :='Evening'].
	self dayMomentImageView image: (UIImage named: dayMoment asLowercase).
	salutationText := 'Good ',dayMoment, String cr, userName.
	self salutationLabel text:salutationText.! !

• Associate this controller with a corresponding storyboard

! HelloWorldViewController class methodsFor: #loading !
storyboardName
	" Return the storyboard name of the receiver (or nil). "

	^#HelloWorld! !

! Coco8AppDelegate methodsFor: #tabs !
tabsSpecification
	" Private - Specification of main application tabs. "

	^#(
	#( #HelloWorldViewController #hello )
	#( #U8WorkspaceNavigationController #workspace )
	#( #U8BrowserNavigationController #browse )
	#( #U8MessagesNavigationController #messages )
	#( #U8TranscriptController #transcript )
	#( #U8InspectorNavigationController #inspector )
	#( #U8ServiceController #u8 )
	#( #U8SettingsController #settings )
	#( #U8ServersController #network )
	#( #PolygonViewController #polygon )
	) select: [:tuple| Smalltalk includesKey: tuple first ]! !

Where to go from here?