How to build this app.

1. sc-init ImageSearch
2. cd image_search
3. sc-gen model ImageSearch.GoogleImage
   --> Fixture and model files have been created.
4. Edit models/google_image.js:

  DM: 1
       
5. Put this into the apps/image_search/fixtures/google_image.js file:

  DM: 2
    
6. Open the app in the browser and type this in the JS console:
  
  ImageSearch.store.find(ImageSearch.GoogleImage).getEach('tbUrl');
    
  You should see a list of the fixture thumbnail URLs. Great.
    
7. sc-gen controller ImageSearch.imagesController SC.ArrayController
8. Edit controllers/images.js:
  DM: 3
    
9. Add this to main.js to load the fixtures into the controller:

  DM: 4
    
10. Open the app in the browser again and type this:
    ImageSearch.imagesController.summary();
    It should say "8 images"
    
11. Build the basic UI by making resources/main_page.js look like this:

  DM: 5
    
12. Open it in the browser, you should see a list of the images on the left. But they are ugly.

13. sc-gen view ImageSearch.ImageThumbListItemView
14. Make views/image_thumb_list_item.js look like this:

  DM: 6
  
15. Add a file called style.css to the resources directory with this contents:

  DM: 7
  
16. Change the exampleView property of the scrollView in main_page.js to this:
  exampleView: ImageSearch.ImageThumbListItemView
  
17. reload the app. The list should look much nicer.

18. Now we want to display the selected image on the right. For that we need an object controller.
sc-gen controller ImageSearch.currentImageController SC.ObjectController

19. Edit controllers/current_image.js with this property:
  DM: 8
    
20. Add this line to the bottomRightView's contentView in main_page.js:
  DM: 9
  
21. Change the title's valueBinding to this:
  DM: 10
    
21. Reload the app. You should be able to see the big picture (no pun intended).

22. Our basic app is working. But now we want to be able to perform actual searches. Let's add a textfield.
    In main_page.js, replace the middleView's childViews line with this:
    
  DM: 11
      
23. Let's define the performSearch method in controllers/images.js next:

  DM: 12
  
24. Run your app, type something in the search box, press return and watch the console.

25. But we want to search Google Images. For that, we need a datasource.
    sc-gen data-source ImageSearch.GoogleImageDataSource
    
26. Change it's fetch method to look like this:

  DM: 13
    
27. We need to add a proxy to Buildfile:
  DM: 14

28. in core.js:

  DM: 15
  
29. Finally we need to change the DataStore's source to the new data source.
  in main.js:
  
  DM: 16
    
30. change the performSearch method:

  DM: 17
 
31. restart sc-server, reload the app

32. Add resizing image view:
  sc-gen view ImageSearch.ResizableImageView
  
  DM: 18
  
33. Change bottom right example view to ImageSearch.ResizableImageView

34. in resources:
  wget --no-check-certificate  https://github.com/jfahrenkrug/iphonedevcon2010-sproutcore-demo/raw/master/image_search/apps/image_search/resources/spinner.gif
  
35. Reload the app.

36. Replace topView in main_page.js with:
  DM: 19
  
37. Add showPopover to images.js:
  DM: 20
  
38. Reload, show on iPad

39. add Awesome Split View:
  sc-gen view ImageSearch.AwesomeSplitView
  
  DM: 21
  
40. Change main_page.js to AwesomeSplitView

41. Change main.js main function:
  DM: 22
  
42. Reload App. Done.