@maccesar/titools 5.3.0 → 5.4.0

package/skills/alloy-guides/references/VIEWS_XML.md

@@ -1,599 +1,83 @@
-# Alloy XML Markup
+# Alloy XML views
 
-<!-- TOC-START -->
-## Contents
+Wrap every view in `<Alloy>`, which is a compiler element rather than a native View. Element names normally select `Ti.UI.create*`: `<Label>` creates a Label, `<ListView>` creates a ListView, and nesting adds children to their container.
 
-- [Introduction](#introduction)
-- [Collection Element](#collection-element)
-- [Model Element](#model-element)
-- [Module Attribute](#module-attribute)
-- [Module Element](#module-element)
-- [Require Element](#require-element)
-- [Namespace](#namespace)
-- [Conditional Code](#conditional-code)
-- [Property Mapping](#property-mapping)
-- [Event Handling](#event-handling)
-- [Data Binding](#data-binding)
-- [Non-Standard Syntax](#non-standard-syntax)
-
-<!-- TOC-END -->
-
-## Introduction
-
-In Alloy, the XML markup abstracts the Titanium SDK UI components, so you do not need to code the creation and setup of these components using JavaScript and the Titanium SDK API. All view files must be placed in the `app/views` folder of your project with the `.xml` file extension.
-
-The following code is an example of a view file:
-
-**app/views/index.xml**
+## A complete screen
 
 ```xml
+<!-- app/views/index.xml -->
 <Alloy>
     <Window class="container">
-        <Label id="label" onClick="doClick">Hello, World</Label>
-    </Window>
-</Alloy>
-```
-
-The `Alloy` tag is the root element for the XML markup and is required in all views. The Window element defines an instance of the `Ti.UI.Window` object and within that window instance is the `Label` element which defines an instance of a `Ti.UI.Label` object. Almost all of the Alloy XML tags are the class names of the Titanium UI components without the preceding namespace.
-
-Within a controller, a UI component can be referenced if its ID attribute is defined. For instance, the Label component in the above example has its ID defined as `label` and can be referenced in the controller using `$.label`.
-
-If the top-level UI component does not have an ID defined, it can be referenced using the name of the view-controller prefixed with a dollar sign and period (`$.`). For instance, the Window element in the above example can be referenced in the controller using `$.index`.
-
-The following table lists the attributes for the UI components:
-
-| Attribute      | Description                                                                                                                                                                                                  |
-| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `id`           | Identifies UI elements in the controller (prefixed with `$.`) and style sheet (prefixed with `#`). IDs should be unique per view but are not global, so multiple views can have components with the same ID. |
-| `class`        | Applies additional styles (prefixed with `.` in the TSS file). Overwrites the element style but not the id style.                                                                                            |
-| `autoStyle`    | Enables the autostyle feature for dynamic styling.                                                                                                                                                           |
-| `formFactor`   | Acts as a compiler directive for size-specific view components (`handheld` or `tablet`).                                                                                                                     |
-| `if`           | Use a custom query to apply additional styles to the element.                                                                                                                                                |
-| `module`       | Requires in a CommonJS module.                                                                                                                                                                               |
-| `ns`           | Overrides the default `Titanium.UI` namespace.                                                                                                                                                               |
-| `platform`     | Switches the namespace based on the platform.                                                                                                                                                                |
-| `<properties>` | Assigns values to UI object properties.                                                                                                                                                                      |
-| `<events>`     | Assigns callbacks to UI object events.                                                                                                                                                                       |
-
-The following table lists the special XML elements besides the Titanium UI components:
-
-| Element      | Description                                                 |
-| ------------ | ----------------------------------------------------------- |
-| `Alloy`      | Root element for all view XML files. Required in all views. |
-| `Collection` | Creates a singleton or instance of a collection.            |
-| `Model`      | Creates a singleton or instance of a model.                 |
-| `Module`     | Imports a module view inside this view.                     |
-| `Require`    | Imports a widget or includes another view inside this view. |
-| `Widget`     | Imports a widget inside this view.                          |
-
-`index.xml` is a special case that only accepts the following view components as direct children of the Alloy tag:
-
-* `Ti.UI.Window` or `<Window>`
-* `Ti.UI.TabGroup` or `<TabGroup>`
-* `Ti.UI.NavigationWindow` or `<NavigationWindow>`
-* `Ti.UI.iOS.SplitWindow` or `<SplitWindow>`
-
-Other views do not have any format restrictions.
-
-> **⚠️ WARNING**
-> With the release of CLI 7.1.0, you can use platform as a prefix in the XML. For example: `<Label ios:text="Hello iOS!" android:text="Hello Android!" />`
-
-## Collection Element
-
-The `Collection` XML element creates a singleton or instance of a collection. The `Collection` tag needs to be a child of the `Alloy` parent tag.
-
-### Creating a Singleton
-
-```xml
-<Alloy>
-    <Collection src="book" />
-    <Window>
-        <TableView id="table" />
-    </Window>
-</Alloy>
-```
-
-```javascript
-const library = Alloy.Collections.book;
-library.fetch();
-```
-
-### Creating an Instance
-
-```xml
-<Alloy>
-    <Collection id="localLibrary" src="book" instance="true"/>
-    <Window>
-        <TableView id="table" />
-    </Window>
-</Alloy>
-```
-
-```javascript
-const library = $.localLibrary;
-library.fetch();
-```
-
-## Model Element
-
-The `Model` XML element creates a singleton or instance of a model. The `Model` tag needs to be a child of the `Alloy` parent tag.
-
-### Creating a Singleton
-
-```xml
-<Alloy>
-    <Model src="book" />
-    <Window>
-        <TableView id="table" />
-    </Window>
-</Alloy>
-```
-
-```javascript
-const drama = Alloy.Models.book;
-drama.set('title', 'Hamlet');
-drama.set('author', 'William Shakespeare');
-```
-
-### Creating an Instance
-
-```xml
-<Alloy>
-    <Model id="myBook" src="book" instance="true"/>
-    <Window>
-        <TableView id="table" />
-    </Window>
-</Alloy>
-```
-
-```javascript
-const drama = $.myBook;
-drama.set('title', 'Hamlet');
-drama.set('author', 'William Shakespeare');
-```
-
-## Module Attribute
-
-You can require a CommonJS module in an Alloy view using the `module` attribute of an XML element.
-
-**app/lib/foo.js**
-
-```javascript
-exports.createFoo = args => {
-    const viewArgs = {
-        backgroundColor: args.color || 'white',
-        width: 100,
-        height: 100
-    };
-    const view = Ti.UI.createView(viewArgs);
-    const labelArgs = {
-        color: args.textColor || 'black',
-        text: args.text || 'Foobar'
-    };
-    const label = Ti.UI.createLabel(labelArgs);
-    view.add(label);
-    return view;
-};
-```
-
-**app/views/index.xml**
-
-```xml
-<Alloy>
-    <Window backgroundColor="white">
-        <Foo module="foo" color="blue" textColor="orange" text="Hello, World!"/>
+        <Label id="greeting">Hello</Label>
+        <Button id="go" onClick="doGo">Continue</Button>
     </Window>
 </Alloy>
 ```
 
-## Module Element
-
-You can also include a view from a native module using the `Module` XML element. The `method` attribute specifies which creation method to call. If omitted, defaults to `createView`.
-
-**app/views/index.xml**
-
-```xml
-<Alloy>
-  <Window>
-    <Module id="paint" module="ti.paint" method="createPaintView" eraseMode="false" strokeWidth="1.0" strokeColor="red" strokeAlpha="100" />
-    <Button onClick="eraseMe" bottom="0">Erase</Button>
-  </Window>
-</Alloy>
-```
-
-**app/controllers/index.js**
-
 ```javascript
-function eraseMe() {
-  $.paint.clear();
+// app/controllers/index.js
+function doGo() {
+    $.greeting.text = 'Going';
 }
-
-$.index.open();
-```
-
-## Require Element
-
-The `Require` XML element has two uses: including external views and importing widgets into the current view.
-
-### Including Views
-
-Views may be included in other views using the `Require` element. Specify the `type` attribute as `view` and the `src` attribute should be the view file minus the `.xml` extension. If you omit the `type` attribute, Alloy assumes it is implicitly set to `view`.
-
-**app/views/index.xml**
-
-```xml
-<Alloy>
-    <TabGroup>
-        <Tab id="leftTab">
-            <Require type="view" src="rss" id="rssTab"/>
-        </Tab>
-        <Tab id="rightTab">
-            <Require type="view" src="about" id="aboutTab"/>
-        </Tab>
-    </TabGroup>
-</Alloy>
-```
-
-To use UI objects from the included views:
-
-```javascript
-const aboutView = $.aboutTab.getView('aboutView');
-aboutView.url = 'http://www.google.com';
-```
-
-### Importing Widgets
-
-Within a view in the regular Alloy project space (`app/views`), use the `<Widget>` tag to import the widget into the application. For Alloy 1.4.x and prior, you need to assign the `src` attribute to the widget's name (the `id` in `widget.json`).
-
-**To import a widget:**
-
-1. Copy the widget to the `app/widgets` folder. The widget must be contained within its own folder.
-2. Add the `<Widget>` tag in the XML and specify its `src` attribute as the folder name of the widget.
-3. Update the `dependencies` object in the `config.json` file by adding a key/value pair with the name of the widget as the key and the version number as the value.
-
-You can optionally add the `id` and `name` attributes to the `Widget` element:
-- The `id` attribute allows you to reference the widget in the controller code.
-- The `name` attribute allows you to import a specific view-controller in the widget rather than the default one (`widget.xml`/`widget.js`). Specify the name of the view-controller minus the extension.
-
-For example, to import the `mywidget` widget, copy it to `app/widgets`:
-
-```
-app
-├── config.json
-├── controllers
-│   └── index.js
-├── views
-│   └── index.xml
-└── widgets
-    └── mywidget
-        ├── controllers
-        │   ├── foo.js
-        │   └── widget.js
-        ├── views
-        │   ├── foo.xml
-        │   └── widget.xml
-        └── widget.json
-```
-
-**app/views/index.xml**
-
-```xml
-<Alloy>
-    <Window>
-        <Widget src="mywidget" id="foo" name="foo" />
-    </Window>
-</Alloy>
-```
-
-**app/controllers/index.js**
-
-```javascript
 $.index.open();
-$.foo.myMethod();
-```
-
-Update the `dependencies` object in `config.json`:
-
-```
-...
-    "dependencies": {
-        "mywidget":"1.0"
-    }
-```
-
-### Passing Arguments
-
-You can add any custom attributes to the markup to initialize a widget or controller.
-
-**apps/views/index.xml**
-
-```xml
-<Require id="foobar" src="foo" customTitle="Hello" customImage="hello.png"/>
-```
-
-This is equivalent to:
-
-**apps/controllers/index.js**
-
-```javascript
-const foobar = Alloy.createController('foo', {
-    id: 'foobar',
-    customTitle: 'Hello',
-    customImage: 'images/hello.png'
-});
-```
-
-In the required view's controller:
-
-**apps/controllers/foo.js**
-
-```javascript
-const title = $.args.customTitle || 'Foobar';
-const image = $.args.customImage || 'default.png';
-```
-
-### Binding Events
-
-To bind a callback to an event in a required view using the `on` attribute:
-
-Parent View:
-
-```xml
-<Require id="fooButton" src="button" onClick="doClick" />
-```
-
-Button View:
-
-```xml
-<Alloy>
-    <Button id="button">Click Me!</Button>
-</Alloy>
-```
-
-In the controller of the required view:
-
-```
-$.button.addEventListener('click', e => {
-    $.trigger('click', e);
-});
-```
-
-### Adding Children Views
-
-If your Require element is a parent view, you can add children elements to it. These children elements are passed to the parent controller as an array called `$.args.children`.
-
-**app/views/info.xml**
-
-```xml
-<Alloy>
-    <View backgroundColor="yellow" borderWidth="0.5" borderColor="brown"/>
-</Alloy>
-```
-
-**controllers/info.js**
-
-```javascript
-_.each($.args.children || [], child => {
-    $.info.add(child);
-});
-
-$.info.height = Ti.UI.SIZE;
-```
-
-**app/views/index.xml**
-
-```xml
-<Alloy>
-    <Window class="container">
-        <Require src="info">
-            <Label>I am an info box.</Label>
-        </Require>
-    </Window>
-</Alloy>
 ```
 
-## Namespace
+`id="greeting"` exposes `$.greeting` and selects `#greeting` in TSS. `class="row highlighted"` applies two TSS classes. An element without an ID is created and added, but has no public handle. The root defaults to the filename (`$.index`) only if it has no explicit ID.
 
-By default, all UI components specified in the views are prefixed with `Titanium.UI` for convenience. However, to use a component not part of the `Titanium.UI` namespace, use the `ns` attribute.
+Text content sets the element's text property: Label `text`, Button `title`. Attribute values become numbers or booleans when recognized, so `top="20"` is numeric and `visible="false"` is false. Put structured dictionaries in TSS or JavaScript.
 
-```xml
-<BlurView ns="Ti.UI.iOS" id="blurView"/>
-```
+## Namespaces and native modules
 
-For UI objects that belong to a specific platform, use the `platform` attribute:
+For an object outside `Ti.UI`, specify its namespace:
 
 ```xml
-<SplitWindow platform="ios"/>
-```
-
-Also, use the alias `Ti` for `Titanium` when specifying namespaces.
-
-Many of the Titanium view proxies not part of the `Titanium.UI` namespace do not require that the `ns` attribute be explicitly set. The following elements are implicitly mapped to a namespace:
-
-| Element          | Namespace     |
-| ---------------- | ------------- |
-| Menu             | Ti.Android    |
-| MenuItem         | Ti.Android    |
-| Annotation       | Ti.Map        |
-| VideoPlayer      | Ti.Media      |
-| MusicPlayer      | Ti.Media      |
-| SearchView       | Ti.UI.Android |
-| AdView           | Ti.UI.iOS     |
-| CoverFlowView    | Ti.UI.iOS     |
-| NavigationWindow | Ti.UI         |
-| TabbedBar        | Ti.UI.iOS     |
-| DocumentViewer   | Ti.UI.iOS     |
-| Popover          | Ti.UI.iPad    |
-| SplitWindow      | Ti.UI.iOS     |
-| StatusBar        | Ti.UI.iOS     |
-
-## Conditional Code
-
-Add the `platform`, `formFactor` and `if` attributes to apply XML elements based on conditionals.
-
-* `platform`: Assign it a platform, such as, `android` or `ios`. Comma separate values to OR them. Prepend with `!` to negate.
-* `formFactor`: Assign it a device size–either `handheld` or `tablet`.
-* `if`: Assign it to a conditional statement in the `Alloy.Globals` namespace or `$.args` namespace.
-
-```xml
-<Alloy>
-    <Window>
-        <Module id="mapview" module="ti.map" method="createView">
-            <Annotation title="Cupertino" platform='ios' formFactor='tablet' latitude='37.3231' longitude='-122.0311'/>
-            <Annotation title="Redwood City" platform='ios' formFactor='handheld' latitude='37.4853' longitude='-122.2353'/>
-            <Annotation title="Mountain View" platform='android' latitude='37.3861' longitude='-122.0828'/>
-            <Annotation title="Palo Alto" platform='android,ios,mobileweb' latitude='37.4419' longitude='-122.1419'/>
-            <Annotation title="San Francisco" platform='mobileweb' latitude='37.7750' longitude='-122.4183'/>
-        </Module>
-    </Window>
-</Alloy>
+<Module id="player" ns="Ti.Media" method="createVideoPlayer" />
 ```
 
-## Property Mapping
-
-Each Titanium UI object property is defined as an attribute in the XML and TSS file if it accepts a string, boolean, number or Titanium SDK constant. Setting properties in the XML overrides the settings in the TSS file. Node text can also be used to define the `Label` text and `Button` title properties.
+For a native module, install its compatible binary and declare it in `tiapp.xml` before using it; see `ti-guides` for module setup. Alloy requires the named module:
 
 ```xml
-<Label borderWidth="1" borderColor="red" color="red" width="Ti.UI.FILL">Hello, World!</Label>
+<Module id="map" module="ti.map" method="createView" />
 ```
 
-### Proxy Properties
+## Conditional elements
 
-For properties that are assigned Titanium proxies, such as Views or Buttons, these properties can be declared. Create a child tag under the Titanium UI object tag, using the name of the property with the first character capitalized. Then, declare your Titanium proxy inline with the child property tag.
+`platform="android"` or `platform="ios"` excludes other-platform elements from the compiled build. Lists such as `platform="ios,android"` are OR conditions; `platform="!ios"` negates the selection.
 
 ```xml
 <Alloy>
     <Window>
-        <RightNavButton>
-            <Button title="Back" onClick="closeWindow" />
-        </RightNavButton>
+        <Button platform="android" title="Android only" />
+        <Button platform="ios" title="iOS only" />
+        <Label formFactor="tablet">Wide layout</Label>
     </Window>
 </Alloy>
 ```
 
-Currently, the following Titanium proxies and properties implemented using this syntax are:
+`formFactor` accepts `tablet` or `handheld`. Unlike the platform branch, released Alloy evaluates this using `Alloy.isTablet` at runtime; a universal app can contain both device layouts.
 
-| Titanium Proxy Object / Alloy tag             | Proxy Property                                                                 | Child Alloy Tag                                                                                   | Since                                   |
-| --------------------------------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------- | --------------------------------------- |
-| Ti.Android.MenuItem / `<MenuItem>`            | actionView                                                                     | `<ActionView>`                                                                                    | Alloy 1.6.0                             |
-| Ti.UI.iPad.Popover / `<PopOver>`              | contentView                                                                    | `<ContentView>`                                                                                   | Alloy 1.4.0                             |
-| Ti.UI.Label / `<Label>`                       | attributedString                                                               | `<AttributedString>`                                                                              | Alloy 1.7.6                             |
-| Ti.UI.ListSection / `<ListSection>`           | footerView, headerView                                                         | `<FooterView>`, `<HeaderView>`                                                                    | Alloy 1.3.0                             |
-| Ti.UI.ListView / `<ListView>`                 | footerView, headerView, pullView, searchView                                   | `<FooterView>`, `<HeaderView>`, `<PullView>`, `<SearchBar>` or `<SearchView platform="android">`  | Alloy 1.3.0                             |
-| Ti.UI.OptionDialog / `<OptionDialog>`         | androidView                                                                    | `<AndroidView>` or `<View>`                                                                       | Alloy 1.5.0                             |
-| Ti.UI.TableView / `<TableView>`               | footerView, headerPullView, headerView, search                                 | `<FooterView>`, `<HeaderPullView>`, `<HeaderView>`, `<Search>`                                    | Alloy 1.1.0                             |
-| Ti.UI.TableViewSection / `<TableViewSection>` | headerView                                                                     | `<HeaderView>`                                                                                    | -                                       |
-| Ti.UI.TextArea / `<TextArea>`                 | attributedString, keyboardToolbar                                              | `<AttributedString>`, `<KeyboardToolbar>`                                                         | Alloy 1.7.6, 1.5.0                      |
-| Ti.UI.TextField / `<TextField>`               | attributedHintText, attributedString, keyboardToolbar, leftButton, rightButton | `<AttributeHintText>`, `<AttributedString>`, `<KeyboardToolbar>`, `<LeftButton>`, `<RightButton>` | Alloy 1.7.6, 1.7.6, 1.3.0, 1.3.0, 1.3.0 |
-| Ti.UI.Window / `<Window>`                     | leftNavButton, rightNavButton, titleControl, toolbar                           | `<LeftNavButton>`, `<RightNavButton>`, `<TitleControl>`, `<WindowToolbar>`                        | Alloy 1.6.0                             |
-
-### Android ActionBar
-
-You can set ActionBar properties in the `ActionBar` element.
-
-**app/views/index.xml**
-
-```xml
-<Alloy>
-    <Window title="My App">
-        <ActionBar id="actionbar" platform="android" title="Home Screen" onHomeIconItemSelected="showInfo" />
-        <Menu>
-            <MenuItem id="editItem" title="Edit" onClick="editInfo" />
-            <MenuItem id="viewItem" title="View" onClick="viewInfo" />
-        </Menu>
-        <Label id="label">Use the ActionBar to Perform an Action.</Label>
-    </Window>
-</Alloy>
-```
-
-**app/styles/index.tss**
-
-```javascript
-"#editItem": {
-    showAsAction: Ti.Android.SHOW_AS_ACTION_ALWAYS
-},
-"#actionbar": {
-    displayHomeAsUp: true,
-    icon: "/images/actionicon.png"
-}
-```
-
-### iOS Navigation Button Shorthand
-
-When specifying either the `LeftNavButton` or `RightNavButton` element, you can define the `Button` attributes directly. This also works with iPad `Popover` objects. Note that you cannot use node text to define the button title with this shorthand.
-
-**app/views/index.xml**
-
-```xml
-<Alloy>
-    <NavigationWindow>
-        <Window>
-            <LeftNavButton title="Back" onClick="goBack" />
-            <Label>I am iOS!</Label>
-        </Window>
-    </NavigationWindow>
-</Alloy>
-```
-
-### iOS SystemButton Shorthand
-
-When specifying the `systemButton` attribute, you do not need to use the `Ti.UI.iOS.SystemButton` namespace.
-
-```xml
-<Button systemButton="CAMERA"/>
-<!-- Instead of -->
-<Button systemButton="Titanium.UI.iOS.SystemButton.CAMERA"/>
-```
-
-### TextField Keyboard Shorthands
-
-When specifying the `keyboardType` or `returnKeyType` for a TextField, you can use shorthand constants without the full namespace:
-
-```xml
-<TextField id="txt" keyboardType="DECIMAL_PAD" returnKeyType="DONE"/>
-<!-- Instead of -->
-<TextField id="txt" keyboardType="Titanium.UI.KEYBOARD_DECIMAL_PAD" returnKeyType="Titanium.UI.RETURNKEY_DONE"/>
-```
-
-This also works in TSS:
-
-```javascript
-"#txt": {
-  keyboardType: "DECIMAL_PAD",
-  returnKeyType: "DONE"
-}
-```
-
-## Event Handling
-
-In Alloy, events may be added in the views using a special attribute. Capitalize the first character of the event name and prefix it with `on`, so the `Ti.UI.Button` object events `click`, `dblclick` and `swipe` events will become the attributes: `onClick`, `onDblclick`, and `onSwipe`, respectively.
+## Composing screens
 
 ```xml
 <Alloy>
     <Window>
-        <Button id="confirmButton" onClick="confirmCB">OK</Button>
+        <Require src="header" id="header" />
+        <Label>Body</Label>
     </Window>
 </Alloy>
 ```
 
-## Data Binding
-
-If you have a collection of model data that needs to be automatically updated to a view as it changes, you need to use data binding techniques. See [Alloy Data Binding](./MODELS.md#alloy-data-binding) for more details.
+Provide the `header` view/controller in the app. `$.header` is its controller, so exported methods are reachable there. Its top-level native view is `$.header.getView()`. Arguments are read from `$.args` in that controller.
 
-## Non-Standard Syntax
+| Compiler element | Purpose |
+| --- | --- |
+| `Alloy` | Required root |
+| `Require` | Embed another app controller |
+| `Widget` | Embed a reusable widget |
+| `Module` | Create an object from another namespace or native module |
+| `Collection` | Declare a collection for data binding |
+| `Model` | Declare a model for data binding |
 
-Some Titanium view elements use special syntax. Refer to the **Alloy XML Markup** examples in the Titanium API Guides site for the following view objects:
+Continue with [styles](./VIEWS_STYLES.md), [models](./MODELS.md) and [widgets](./WIDGETS.md).
 
-* [AlertDialog](https://titaniumsdk.com/docs/sdk/Titanium.UI.AlertDialog)
-* [ButtonBar](https://titaniumsdk.com/docs/sdk/Titanium.UI.ButtonBar)
-* [CoverFlowView](https://titaniumsdk.com/docs/sdk/Titanium.UI.iOS.CoverFlowView)
-* [DashboardView](https://titaniumsdk.com/docs/sdk/Titanium.UI.DashboardView)
-* [ListView](https://titaniumsdk.com/docs/sdk/Titanium.UI.ListView)
-* [Map](https://titaniumsdk.com/modules/ti.map)
-* [Menu](https://titaniumsdk.com/docs/sdk/Titanium.Android.Menu)
-* [OptionBar](https://titaniumsdk.com/docs/sdk/Titanium.UI.OptionBar)
-* [OptionDialog](https://titaniumsdk.com/docs/sdk/Titanium.UI.OptionDialog)
-* [Picker](https://titaniumsdk.com/docs/sdk/Titanium.UI.Picker)
-* [SplitWindow](https://titaniumsdk.com/docs/sdk/Titanium.UI.iOS.SplitWindow)
-* [TabbedBar](https://titaniumsdk.com/docs/sdk/Titanium.UI.iOS.TabbedBar)
-* [Toolbar](https://titaniumsdk.com/docs/sdk/Titanium.UI.Toolbar)
+Source: [views](https://titaniumsdk.com/docs/alloy/views.md). The form-factor caveat corrects that page's compile-time wording against released Alloy 3.0.1.