Introduction
Panes act as the on-screen roots for all visible view hierarchies. If you want to show a view, that view must be placed directly or indirectly inside of a pane, and the pane itself append()ed in your SproutCore application.
Every SproutCore application should have a "main" pane added in its main() function. The easiest way to create a "main" pane is to use the SC.MainPane class. SpoutCore only allows one "main" pane to exist in the DOM at any time; if you try and append another "main" pane, any existing "main" pane will be removed automatically.
In addition to "main" panes, you can append() an unlimited number of non-main panes. These panes may be eligible to become "key" pane, which gives them (and the views inside them) first priority in handling keyboard events. For example, SC.Alert is a pane subclass that when shown, becomes the key pane. This allows it to capture the "Enter" and "ESC" keyboard commands, which it routes to the default button and the cancel button, respectively.
If a keyboard event is not handled by the "key" pane, SproutCore will automatically give the "main" pane a chance to handle the event.
All panes, regardless of "main" or "key" status, are siblings in the DOM and children of the <body> tag.
Class Hierarchy
- SC.Pane
- SC.MainPane
- SC.Panel
- SC.Alert
- SC.Sheet
- SC.Picker
- SC.Palette
SC.Pane
SC.Pane is the root of the pane hierarchy, and is a direct subclass of SC.View. Thus, all methods defined in SC.View apply (more or less) to panes. You will rarely create instances of SC.Pane, though you can if needed. The class is not "abstract".
SC.MainPane
SC.MainPane adds a small amount of code to make an SC.Pane instance into a pane with "main" status. You should use this class to root the view hierarchy for the "main" pane you want to show at startup.
SC.Panel
SC.Panel implements model panes -- panes that must be interacted with (or dismissed) before any other mouse events are handled by the application. This functionality is very useful for modal dialogs (SC.Alert), modal "sheets" (SC.Sheet), and context-sensitive dialogs (SC.Picker). SC.Menu is also a subclass of SC.Panel.
SC.Alert
SC.Alert contains a number of specialized class methods to create and show a modal alert in a single call. SC.Alert provides a more consistent user experience than the built-in alert() and confirm() functions provided by JavaScript.
SC.Sheet
SC.Sheet can be used anywhere an SC.Alert is used, but where a more complex modal dialog is required.
SC.Picker
SC.Picker is a powerful panel class that implements context-sensitive, inline, modal dialogs -- nearly always anchored around some view that is being edited or manipulated. Pickers contain a myriad of configuration options to specify their "preferred" layout and will automatically reposition themselves onscreen as the browser window is resized.
SC.Menu
SC.Menu is a kind of picker and configures itself automatically when shown. Because menus are inline modal, anchored to a specific view, and require complex positioning onscreen to display property, they make an ideal subclass for SC.Picker.
SC.Palette
Unlike SC.Panel, SC.Paletted does not prevent mouse handling outside of its visible views. Thus, palettes are useful anywhere a persistent helper window would be used in a Mac or Windows application. Examples include: floating toolbars and formatting palettes, temporary notifications (Growl), and inspectors.
Comments (0)
You don't have permission to comment on this page.