Greg’s Online CS 193P Resources

April 7, 2009

Slider Demo “Slider”- SU iphone class #1

Filed under: cs 193p,iPhone — gregorykaiser @ 2:14 am
Tags:

The Demo was the best part of the first class. The computer screen is a bit unclear in the movie and the instructor makes a few mistakes. I have attempted to write down the steps needed to make the Slider demo here.

1. File>new project, choose “Window based Application”, Name it, and “Save”
2. (Window??)Look in MainWindow.xib , Double click to start Interface Builder
3. Drag UI elements (from Library) to Window to add them, Slider,
Label (double click change to “Value”, double click second label and change to “0”) in “Slider Attributes”(first tab of Inspector window) set “Values”-“Maximum” to “100”
4. Add Brains to the window by dragging an “Object” from Library to MainWindow.xib (??)
5. Click on the new Object, Tools>Inspector Click on fourth tab,
in Class field type “Controller”, hit enter, make sure the value sticks. It is critical to hit the “Enter key” to make sure the value “stick” in these windows.
6. Under “Class Actions” box click “+”, add “sliderChanged:” (:=takes one variable)
7. Under “Class Outlets” boxclick “+”, add “slider” for name and “UISlider” for id, hit enter
8. Under “Class Outlets” boxclick “+”, add “label” for name and “UILabel” for id, hit enter
9. Now we want to hook up Objects to actions. For “Controller” look in 2nd tab of “Inspector window”>”Outlets”, connect the slider and “0” label by clicking on the circle to the right of each of these entries and draging the blue line to the object
in the “Window” window
9. Now connect the slider to the value display field by selecting the slider in the “Window” window,
looking at “Slider Connections” (second tab in the inspector window), Under the “Events” connect the “Value Changed” right circle to the Controller.sliderChanged in the MainWindow.xib window. When you click on the Controller you will see a small popup to choose the sliderChanged value
10. Now we need to add the code that will display the slider value to the display label. Click on “Controller” in the “MainWindow.xib” window. Then choose from Interface Builder menu at the top ofthe screen “Files>Write Class Files…”, click the “Save” button, in next popup click on the project
and then the “Add” button. In the main project window if you click on “Slidertest” at the top of the “Groups & Files” pane you should now see in the “files” pane to the right the “Controller.h” (interface file) and “Controller.m” (implementation) files have been created and added. Click on the file name and in the editor pane under the files pane you will see the editor with the contents that have been created.
11. Click on “Controller.h”, and add “NSObject” in the line with the green comment. It should then be


@interface Controller : NSObject/* Specify a superclass (eg: NSObject or NSView) */ {

12. Click on “Controller.m” in the files pane, and add in the editor the need code

label.text = [NSString stringWithFormat: @"%.1f", slider.value];

and split the “{“.These lines should then look like

@implementation Controller
- (IBAction)sliderChanged:(id)sender
{
label.text = [NSString stringWithFormat: @"%.1f", slider.value];
}
@end

13. Then from top xcode menu choose Build>Build. Save all if the window pops up. Hopefully no errors are displayed.
14. Click on “Build and Go” icon on main xcode window toolbar. The iphone Simulator should start and run your application. Click and move slider to see the value change. Hit the home button to end the application and return the to home page.
15. Congratulations!

Advertisements

6 Comments »

  1. Thanks for the walkthrough. Tried fixing myself and couldn’t crack it.

    Comment by 700x23 — April 26, 2009 @ 9:04 am | Reply

    • Glad it was helpful. – Greg

      Comment by gregorykaiser — April 26, 2009 @ 3:42 pm | Reply

    • Glad it Helped!

      Comment by gregorykaiser — April 29, 2009 @ 4:47 am | Reply

  2. thanks for this tutorial! i had problems with random debug errors and this fixed it great, subscribed on RSS for the future 😀

    Comment by AK — April 29, 2009 @ 1:46 am | Reply

  3. In a nut-shell… how many “connections” need to be made… to what.. from what… and (most importantly) “why”?

    Why are ‘connections’ even needed at all?

    Can’t my code put the value from the slider into the label… and be done with it?

    Comment by Debbie — April 29, 2009 @ 5:59 am | Reply

    • As I am just learning I am not sure I am the right guy to answer your question. I will try. For Cocoa the application gets started by loading things defined in the .xib file (they are put there by Interface Builder when you drag objects on to the screen or connect objects to each other) and then ends up running in an event loop until it is time to exit.

      In the event loop your program gets called by the OS when certain events happen (touching a button on screen, timer tick). You find out about these events by registering with the OS to be called or notified when they happen.

      One connection is that when a user changes the value of the slider a “Slider value changed” event is sent by the OS to our program’s “sliderChanged:” code. There are hundereds of events but in our code we made a “connection” to get just this one. Then we made a connection from this sliderChanged code to update the label object.

      This is a simple case. The connections are needed to pass events and values through messages to objects that represent the slider and the label. Its Object Oriented code on the iPhone so we pass messages to objects instead of saying a=b.

      I hope this helps a little. If not try asking another question. Thanks for coming to my blog.

      Greg

      Comment by gregorykaiser — April 29, 2009 @ 4:44 pm | Reply


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.

%d bloggers like this: