资源说明:An iPad SproutCore Touch demo for my talk at the iPhone Developer Conference 2010
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.
本源码包内暂不包含可直接显示的源代码文件,请下载源码包。