Version: 1.0.0
Page Layouts for
Alpha WatchBenchTM


Root Page
|
Page 2
|
Page 3
|
Glance Page


If you are editing a file in the other window, tapping on the name of an object (for example, "label1root1") will insert that name into the text being edited at the current insertion point. The inserted text will be in the following form used by config files:
"insertedName": {},
Having that appear in the config file should be sufficient to make the object visible, though you may have to also add any objects it contains (such as within a group) to make them visible.

See the Files in a Project help file for more information.

Root Page
rootPage
This is the first page that comes up when the watch app runs. It has a wide range of object combinations that may be used to support a wide range of different designs. It is common to use just a few of these objects.

You must define the objects you want in the config for them to be visible. All others will be hidden.
biglabel1root
Label
System Bold 18.0 font, centered
label1root
Label
Body font
image1root
Image
Aspect fit
label2root
Label
Footnote font
bigbutton1root
Button
This button has a group in it, not direct text, to support the look of a large button with a thin border. Set the text of bigbutton1label1root instead of the button's text. When tapped, the button name given to AWB.buttonAction will be the one associated with "bigbutton1root". You need to define this in the config to make the button visible.
bigbutton1group1root
Group
Black background around button border line. Indents t/b/l/r: 0/5/10/10
bigbutton1group2root
Group
Background with white color giving border. Change the color to change the border color. Indents t/b/l/r: 1/1/1/1
bigbutton1group3root
Group
Black background for interior. Indents t/b/l/r: 6/6/4/4
bigbutton1label1root
Label
System 22.0 font, centered
button1root
Button
System 15.0 font
halfbutton1group1root
Group
This group uses horizontal layout of its contents so they are next to each other, not one above the other. It lets you have two smaller, half-width buttons. You need to define this in the config to make the buttons visible.
halfbutton1leftroot
Button
System 13.0 font, first 50% of container width.
halfbutton1rightroot
Button
System 13.0 font, second 50% of container width.
halfbutton2group1root
Group
This group uses horizontal layout of its contents so they are next to each other, not one above the other. It lets you have two smaller, half-width buttons. You need to define this in the config to make the buttons visible.
halfbutton2leftroot
Button
System 13.0 font, first 50% of container width.
halfbutton2rightroot
Button
System 13.0 font, second 50% of container width.
slider1group1root
Group
This group contains a small label above a slider. You need to define this in the config to make the contents visible. Indents t/b/l/r: 6/0/0/0
slider1label1root
Label
Footnote font, centered
slider1sliderroot
Slider
Defaults to 10 steps with a value of 0. The name associated with "slider1sliderroot" will be given to AWB.sliderChanged().
slider2group1root
Group
This group contains a small label above a slider. You need to define this in the config to make the contents visible. Indents t/b/l/r: 6/0/0/0
slider2label1root
Label
Footnote font, centered
slider2sliderroot
Slider
Defaults to 10 steps with a value of 0. The name associated with "slider2sliderroot" will be given to AWB.sliderChanged().
switch1root
Switch
Defaults to off (0). The name associated with "switch1root" will be given to AWB.switchChanged().
switch2root
Switch
Defaults to off (0). The name associated with "switch2root" will be given to AWB.switchChanged().
switch3root
Switch
Defaults to off (0). The name associated with "switch3root" will be given to AWB.switchChanged().
table1root
Table
Row types available: RowType1, RowType2, RowType3, RowType4, and RowType5. Create rows using AWBlib.populateTable().
notice1group1root
Group
This group is used to provide a background to indented text and/or a button. Set its color and cornerRadius as desired. You need to define this in the config to make the contents visible. Indents t/b/l/r: 5/5/8/8
notice1label1root
Label
Body font
notice1button1root
Button
System 15.0 font. Sized to fit content, and centered in the containing group.
label3root
Label
Body font
image2root
Image
Aspect fill
label4root
Label
Footnote font
button2root
Button
System 15.0 font
Top of Page
Page2
Page2
This is a page that other pages can "push" to. It is set up for a "details" page, with some labels, images, and buttons, and a table. It is common to use just a few of these objects.

You must define the objects you want in the config for them to be visible. All others will be hidden.
label1page2
Label
Body font
label2page2
Label
Footnote font
image1page2
Image
Aspect fit
button1page2
Button
System 15.0 font
group1page2
Group
This group is used to provide a background to indented text, image, and/or a button. Set its color and cornerRadius as desired. You need to define this in the config to make the contents visible. Indents t/b/l/r: 5/5/8/8
group1label1page2
Label
Body font
group1label2page2
Label
Footnote font
group1image1page2
Image
Aspect fill
group1button1page2
Button
System 15.0 font
table1page2
Table
Row types available: RowType1, RowType2, RowType3, RowType4, and RowType5. Create rows using AWBlib.populateTable().
separator1page2
Separator
Width of container. Defaults to white.
group2page2
Group
This group is used to provide a background to indented text, image, and/or a button. Set its color and cornerRadius as desired. You need to define this in the config to make the contents visible. Indents t/b/l/r: 5/5/8/8
group2label1page2
Label
Body font
group2label2page2
Label
Footnote font
group2image1page2
Image
Aspect fill
group2button1page2
Button
System 15.0 font
Top of Page
Page 3
Page3
This is a page that other pages can "push" to. It is set up for a "settings" page, with some sliders, switches, labels, images, and buttons. It is common to use just a few of these objects.

You must define the objects you want in the config for them to be visible. All others will be hidden.
image1page3
Image
Aspect fit
biglabel1page3
Label
System Bold 18.0 font
label1page3
Label
Body font
image1page3
Image
Aspect fit
label2page3
Label
Footnote font
button1page3
Button
System 15.0 font
halfbutton1group1page3
Group
This group uses horizontal layout of its contents so they are next to each other, not one above the other. It lets you have two smaller, half-width buttons. You need to define this in the config to make the buttons visible.
halfbutton1leftpage3
Button
System 13.0 font, first 50% of container width.
halfbutton1rightpage3
Button
System 13.0 font, second 50% of container width.
halfbutton2group1page3
Group
This group uses horizontal layout of its contents so they are next to each other, not one above the other. It lets you have two smaller, half-width buttons. You need to define this in the config to make the buttons visible.
halfbutton2leftpage3
Button
System 13.0 font, first 50% of container width.
halfbutton2rightpage3
Button
System 13.0 font, second 50% of container width.
slider1group1page3
Group
This group contains a small label above a slider. You need to define this in the config to make the contents visible. Indents t/b/l/r: 6/0/0/0
slider1label1page3
Label
Footnote font, centered
slider1sliderpage3
Slider
Defaults to 10 steps with a value of 0. The name associated with "slider1sliderpage3" will be given to AWB.sliderChanged().
slider2group1page3
Group
This group contains a small label above a slider. You need to define this in the config to make the contents visible. Indents t/b/l/r: 6/0/0/0
slider2label1page3
Label
Footnote font, centered
slider2sliderpage3
Slider
Defaults to 10 steps with a value of 0. The name associated with "slider2sliderpage3" will be given to AWB.sliderChanged().
switch1page3
Switch
Defaults to off (0).. The name associated with "switch1page3" will be given to AWB.switchChanged().
switch2page3
Switch
Defaults to off (0).. The name associated with "switch2page3" will be given to AWB.switchChanged().
switch3page3
Switch
Defaults to off (0).. The name associated with "switch3page3" will be given to AWB.switchChanged().
label3page3
Label
Body font
image2page3
Image
Aspect fill
label4page3
Label
Footnote font
button2page3
Button
System 15.0 font
Top of Page
Glance Page
glancePage
This is the page that comes up when the watch app's glance is displayed. It has a range of object combinations that may be used to support a range of different designs. It is common to use just a few of these objects.

The Glance page is run separately from the other pages. It has its own configuration, JS, state, and log files. Glance pages do not have buttons, sliders, etc. When tapped, they switch to the main root page. See the section in the Introduction help file about the Lifecycle of a WatchBench Project When Running.

You must define the objects you want in the config for them to be visible. All others will be hidden.
group1glance
Group
This group uses horizontal layout of its contents so they are next to each other, not one above the other. It is also indented from the right.
group1label1glance
Label
Body font, sized to fit content
group1image1glance
Image
Aspect fit, sized to fit content
group1label2glance
Label
Body font, sized to fit content
group1label3glance
Label
Footnote font, sized to fit content
group2glance
Group
This group uses vertical layout of its contents so they are one above the other. Indents t/b/l/r: 5/5/8/8
group2label1glance
Label
System Bold 18.0
group2label2glance
Label
Body font
group2image1glance
Image
Sized to fit content, centered horizontally
group2label3glance
Label
Body font
group1label4glance
Label
Footnote font
table1glance
Table
Row types available: RowType1, RowType2, RowType3, RowType4, and RowType5. Create rows using AWBlib.populateTable().
Top of Page