• If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • Stop wasting time looking for files and revisions. Connect your Gmail, DriveDropbox, and Slack accounts and in less than 2 minutes, Dokkio will automatically organize all your file attachments. Learn more and claim your free account.

View
 

Views-About

Page history last edited by JD Morgan 10 years, 2 months ago

Outline

  1. What is a view?
    1. Views manage the visual display of your application and act as first responders for incoming events
    2. When you create views they will generate HTML and insert them into your DOM automatically
    3. Views also listen for events and respond to them through event delegate
    4. Most of the time you will work with views by binding properties on the views to properties on the controller.  
      1. You may also directly set properties on the views to configure their behavior.  
      2. Occasionally you may also call method to add a delegate to gain finer-grained control as well 
    5. SproutCore comes with many built-in views that you can use in your application.  
      1. You can also create your own view subclasses to define custom controls
  2. How do views work?
    1. Views are arranged into a hierarchy of views.
      1. Child views are managed by parent views to control parts of the screen.
      2. The "root view" of every view hierarchy is always a subclass of SC.Pane, which is a special type of view that can display itself in your window without a parent view.  All other views require a parent view.
      3. A view is responsible for displaying its own content and any of its child views as well
      4. Events also start with a target view and then go up the hierarchy, giving parent views a chance to handle events for their children.
    2. Views display their content with a "layer" - a DOM element that contains the view's content for any of the layers for all of its children.
      1. Usually a view will generate its layer only when it is actually added to the screen. 
      2. The layer will actually be displayed, positioned, and resized by the browser automatically.  No JS needs to execute for your layer to display properly
      3. Whenever the state of a view changes, it will update or regenerate its layer and any of its children
      4. IMPORTANT:  Browsers are good at painting and updating HTML.  To achieve the best performance, your views should minimize the number of times they need to touch their layer directly.
    3. Views use a technique called event delegate to propagate events up their view hierarchy.
      1. This means you will rarely need to register event listeners like you would with traditional DOM programming.
      2. Whenever a mouse or touch event occurs, SproutCore will start with the deepest view that was underneath the event location and then travel up the view hierarchy until it finds a view that implements a method to respond to the event.
      3. Whenever a keyboard event occurs, SproutCore begins with the current firstResponder, which is the view that has keyboard focus.  It then travels up the view hierarchy until it finds a view that implements a method to respond to the event and calls it.
  3. Panes + Pages
    1. When you create an application, you will define your view layer by creating a view design.  A design is a configuration of views that you can instantiate whenever you are ready to display them on screen.
    2. Views are stored in a Page object, which keeps them in class form until they are first requested and then instantiates them on demand.  This helps you application load faster since it will do only the setup it needs to
    3. TODO
  4. Theming
    1. TODO  

 

 

Comments (0)

You don't have permission to comment on this page.