SproutCore UI talk at the  July SproutCore Meetup
Upcoming SlideShare
Loading in...5
×
 

SproutCore UI talk at the July SproutCore Meetup

on

  • 2,593 views

SproutCore UI is a framework that sits on top of the SproutCore 2.0 framework. It's used to build interactive app-like interfaces easily for the web, with a strong focus on mobile platforms. This talk ...

SproutCore UI is a framework that sits on top of the SproutCore 2.0 framework. It's used to build interactive app-like interfaces easily for the web, with a strong focus on mobile platforms. This talk from the July 2011 SproutCore Meetup highlights the project's goals, architecture, and API.

Watch the talk here: http://www.vimeo.com/26454701

Q&A: http://www.vimeo.com/26453952

Statistics

Views

Total Views
2,593
Views on SlideShare
2,574
Embed Views
19

Actions

Likes
3
Downloads
38
Comments
0

4 Embeds 19

https://twitter.com 9
http://francescoagati.posterous.com 6
http://twitter.com 2
http://posterous.com 2

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • Prefer declarative over imperative APIs. No boilerplate. Things that takes 10s of lines in Cocoa, are a few lines in SC UI. We can do that because we \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

SproutCore UI talk at the  July SproutCore Meetup SproutCore UI talk at the July SproutCore Meetup Presentation Transcript

  • SproutCore UIApp–Like Experiences On The Web
  • Hi.
  • Goals
  • Design is difficult
  • Boilerplate is boring
  • arguments = []arguments << "--ignore-case"arguments << "-Q"arguments << self.searchQuery.stringValuebundle_path = NSBundle.mainBundle.resourcePathlaunch_path = "#{bundle_path}/ack"ackTask = NSTask.alloc.initackTask.setLaunchPath launch_pathackTask.setCurrentDirectoryPath @projectRootackTask.setArguments argumentsoutputPipe = NSPipe.alloc.initerrorPipe = NSPipe.alloc.initackTask.setStandardOutput outputPipeackTask.setStandardError errorPipeackTask.launchoutData = outputPipe.fileHandleForReading.readDataToEndOfFileerrData = errorPipe.fileHandleForReading.readDataToEndOfFileackTask.waitUntilExitstatus = ackTask.terminationStatusif status == 0 stdOutput = NSString.alloc.initWithData(outData, encoding:NSUTF8StringEncoding) process_output stdOutputelsif status == 1 no_matcheselse ack_errorend
  • arguments <<"--ignore-case"arguments << "-Q"arguments << self.searchQuery.stringValueoutput = `ack #{arguments.join ‘ ‘}`process_output outputif ($?) no_matches
  • Focus onapp, not tools
  • What is it?
  • App-likeexperiences
  • Themeability
  • Component vs Structural views
  • Billing Form NameCard Number Submit
  • Structural = Chrome
  • Component =Interactivity
  • Component StructuralViews ViewsCheckbox SplitViewRadio NavigationViewTextField CardViewSlider TabViewButtonProgressSegmented
  • API
  • {{ui}}
  • {{#ui NavigationView controller="MyApp.navController"}} <h2>My App</h2> {{collection MyApp.CollectionView}}{{/ui}}
  • {{#ui SplitView}} {{#ui SplitPane}} <h2>My App</h2> {{collection MyApp.CollectionView}} {{/ui}} {{#ui SplitPane}} <h2>Main Content</h2> {{/ui}}{{/ui}}
  • Component Views
  • <h2>My App</h2>{{ui ButtonView title="Submit"}}{{ui TextField placeholder="Search"}}
  • UI.LayoutManager
  • {{#view MyApp.MyView anchor="top" height="50"}} <h2>My App</h2>{{/view}}
  • My App
  • {{#view MyApp.MyView anchor="top" height="50"}} <h2>My App</h2>{{/view}}{{#view MyApp.OtherView}} <h2>Main Content</h2>{{/view}}
  • My AppMain Content
  • GestureRecognizers
  • MyApp.MyView = SC.View.extend({ pinchStart: function(evt) { }, pinchChange: function(evt) { $(#gestureTest).css(-webkit-transform,scale3d(+scale+, +scale+,1)); }, pinchEnd: function(evt) { }});
  • SC.EventManager
  • Parent View Target ViewSC.EventDispatcher DOM
  • Parent View Target ViewSC.EventDispatcher DOM
  • Parent View Target ViewSC.EventDispatcher DOM
  • Parent View Target ViewSC.EventDispatcher DOM
  • Parent ViewTarget View SC.EventDispatcher DOM
  • Event ManagerParent ViewTarget View SC.EventDispatcher DOM
  • Event ManagerParent ViewTarget View SC.EventDispatcher DOM
  • Event ManagerParent ViewTarget View SC.EventDispatcher DOM
  • Event ManagerParent ViewTarget View SC.EventDispatcher DOM
  • Event ManagerParent ViewTarget View SC.EventDispatcher DOM
  • Event ManagerParent ViewTarget View x SC.EventDispatcher DOM
  • Where?
  • github.com/sproutcore/ sproutcore-ui
  • pivotaltracker.com/projects/ 328313
  • Questions? Majd Taby @jtabymajd@strobecorp.com