Control
Overview
The control class is the base class that provides all common methods used and available on almost every Tint control. This cannot be initialized on its own as its only purpose is to provide common functionality to other controls. To initialize a basic control use Container or Box.
Members
Description
Gets or sets the translucency of the control. This is a range from 0 to 1 (where 1 = completely visible, 0 = completely hidden).
Definition
number control.alphaExample
require('Common'); // include defaults, creates application context.
var win = new Window(); // create a new window.
win.visible = true; // make the window visible.
var dateWell = new DateWell();
win.title = "Date well should be 0.5 alpha.";
dateWell.style = "clock";
dateWell.range = true;
win.appendChild(dateWell);
dateWell.left = dateWell.top = 0;
dateWell.width = '300px';
dateWell.alpha = 0.5; // Set our newly added component to 50% visible.
Description
This controls whether position changes in this Control (or Window) should animate when changed. The default operating system animation is used to animate different position changes.
Definition
boolean control.animateOnPositionChange (default false)Description
This controls whether size changes to this Control (or Window) should animate when changed. The default operating system animation is used to animate different size changes.
Definition
boolean control.animateOnSizeChange (default false)Description
Gets or sets the preferred bottom position of the control. If this is set to a number its translated as the amount of pixels the bottom of the control should be to the bottom of the parent control. If a percentage represented as a string (E.g., '50%') is passed in, this is translated as positioning the bottom of the control at fifty percent of the parents height. If a control is passed in, this is translated as positioning the bottom it to the top of the passed in control.
Definition
various control.bottomExample
require('Common');
var win = new Window();
win.visible = true;
var buttonSecond = new Button();
var buttonThird = new Button();
var buttonNormal = new Button();
buttonNormal.title = "Aligned to bottom";
buttonNormal.bottom = '0'; // Vertically aligned to bottom
buttonNormal.center = '100%'; // Horizontally centered to window.
buttonNormal.width = '200px'; // 200 logical pixels wide.
// buttonNormal uses the default height requested by button.
buttonSecond.title = "20px from bottom";
buttonSecond.bottom = '20px'; // Position it 20 pixels from the bottom
buttonSecond.right = 0; // "Right align" or make this button flush
// with the right of the window.
buttonThird.title = "Third";
buttonThird.left = 0; // Position to the left of the window
buttonThird.bottom = '-20%'; // align it 20% of the parent height
// from the bottom.
// Add the buttons to the window.
win.appendChild(buttonSecond);
win.appendChild(buttonNormal);
win.appendChild(buttonThird);
Description
Gets an object with the properties width, height, x, and y that represent the position of the control from its parent control (in logical pixels or adjusted for the monitors DPI or scalefactor) where the coordinates start from the top (y) and left (x) of the parent. If the control is not on a window (e.g., Note it can still in the UI, such as a status bar but not on a Tint window) this throws an error.
Definition
object control.boundsExample
require('Common'); // include defaults, creates application context.
var win = new Window(); // create a new window.
win.visible = true; // make the window visible.
var buttonNormal = new Button();
buttonNormal.title = "Hello"; // set its text label.
win.appendChild(buttonNormal); // add button to window.
buttonNormal.left = buttonNormal.top = 0; // position top left.
var bounds = win.bounds;
console.log('Button is '+bounds.x+' from the left.');
console.log('Button is '+bounds.y+' from the top.');
console.log('Button is '+bounds.width+' wide.');
console.log('Button is '+bounds.height+' tall.');Description
Gets an object with the properties width, height, x, and y that represent the position of the control on the current screen (in logical pixels or adjusted for the monitors DPI or scalefactor) where the coordinates start from the top (y) and left (x) of the screen. If the control is not on a window (e.g., Note it can still in the UI, such as a status bar but not on a Tint window) this throws an error.
Definition
object control.boundsOnScreenExample
require('Common'); // include defaults, creates application context.
var win = new Window(); // create a new window.
win.visible = true; // make the window visible.
var bounds = win.boundsOnScreen;
console.log('Windows content area is '+bounds.x+' from the left.');
console.log('Windows content area is '+bounds.y+' from the top.');
console.log('Windows content area is '+bounds.width+' wide.');
console.log('Windows content area is '+bounds.height+' tall.');Description
Gets an object with the properties width, height, x, and y that represent the position of the control on the current window content area (in logical pixels or adjusted for the monitors DPI or scalefactor) where the coordinates start from the top (y) and left (x) of the window's content area. Note that this takes into account non-content area of the window such as frame. E.g., if your window is at 500 pixels from the top, and your control is placed at 20 pixels from the top of the window the boundsOnWindow will return 500 + (the native windows titlebar height) + 20. If the control is not on a window this throws an error.
Definition
object control.boundsOnWindowExample
require('Common'); // include defaults, creates application context.
var win = new Window(); // create a new window.
win.visible = true; // make the window visible.
var bounds = win.boundsOnWindow;
console.log('Windows content area is '+bounds.x+' from the left corner of window frame.');
console.log('Windows content area is '+bounds.y+' from the top of the window frame.');
console.log('Windows content area is '+bounds.width+' wide.');
console.log('Windows content area is '+bounds.height+' tall.');
var buttonNormal = new Button();
buttonNormal.title = "Hello"; // set its text label.
win.appendChild(buttonNormal); // add button to window.
buttonNormal.left = buttonNormal.top = 0; // position top left.
var bounds = buttonNormal.boundsOnWindow; // get the buttons location.
console.log('The button is '+bounds.x+' from the left corner of window frame.');
console.log('The button is '+bounds.y+' from the top of the window frame.');
console.log('The button is '+bounds.width+' wide.');
console.log('The button is '+bounds.height+' tall.');Description
Gets or sets the preferred center position of the control. If the value of this is set to a number the control's center (horizontally) is positioned to parent's center plus the offset (positive being below, negative above). If the passed in value is a string representing a percentage (e.g., 50%) the control's center is positioned to the parents center + the parents width/2 times the percentage. For example, to ensure the control is positioned at half-of-center of the parents control (or in the first 1/4 of the width), use 50%. If a control is set as the value the center of this controls is aligned to the center of the assigned control.
Definition
various control.centerExample
require('Common');
var win = new Window();
win.visible = true;
var buttonNormal = new Button();
buttonNormal.title = "Aligned to center";
buttonNormal.center = '0'; // align to center of parent.
buttonNormal.top = '0'; // align to top.
buttonNormal.width = '200px'; // 200 logical pixels wide.
// Add the buttons to the window.
win.appendChild(buttonNormal);
Description
Gets or sets the preferred height of the control. If the value of this is a number its translated as the pixel height that the control should have. If the value is a string representing a percentage (e.g., '50%') then the height is set to 50% of the parents height. Note that height cannot be calculated if both top and bottom are set (as the height is implicitly set in that circumstance).
Definition
various control.heightExample
require('Common');
var win = new Window();
win.visible = true;
var box = new Box();
box.left=box.right=0;
box.height='150px';
win.appendChild(box);
Description
Gets or sets the preferred left position of the control. If this is set to a number its translated as the amount of pixels to the right the control should be to the left of the parent control. If a percentage represented as a string (E.g., '50%') is passed in, this is translated as positioning the left of the control at fifty percent of the parents width. If a control is passed in, this is translated as positioning the left of the control to the right of the passed in control.
Definition
various control.leftExample
require('Common');
var win = new Window();
win.visible = true;
var buttonSecond = new Button();
var buttonThird = new Button();
var buttonNormal = new Button();
buttonNormal.title = "Aligned to top-left";
buttonNormal.left = '0'; // align to left
buttonNormal.top = '0'; // Horizontally centered to window.
buttonNormal.width = '200px'; // 200 logical pixels wide.
buttonSecond.title = "20px from left";
buttonSecond.left = '20px'; // Position it 20 pixels from the left
buttonSecond.top = '200px'; // Align it to the top by 200 pixels.
buttonThird.title = "Third";
buttonThird.left = '50%'; // Position it 50% from the left.
buttonThird.bottom = '-20%'; // align it 20% of the parent height
// from the bottom.
// Add the buttons to the window.
win.appendChild(buttonSecond);
win.appendChild(buttonNormal);
win.appendChild(buttonThird);
Description
Gets or sets the preferred middle position of the control. If the value of this is set to a number the control's middle (or verticla center) is positioned to parent's middle plus the offset (positive being below, negative above). If the passed in value is a string representing a percentage (e.g., 50%) the control's middle (or vertical center) is positioned to the parents middle + the parents height/2 times the percentage. For example, to ensure the control is positioned at the half-of-middle of the parents control (or in the first 1/4 of the height), use 50%. If a control is set as the value the middle of this controls is aligned to the middle of the assigned control.
Definition
various control.middleExample
require('Common');
var win = new Window();
win.visible = true;
var buttonNormal = new Button();
buttonNormal.title = "Aligned to middle";
buttonNormal.middle = '0'; // align to middle of parent.
buttonNormal.left = '0'; // align to left.
buttonNormal.width = '200px'; // 200 logical pixels wide.
// Add the buttons to the window.
win.appendChild(buttonNormal);
Description
Gets or sets the preferred right position of the control. If this is set to a number its translated as the amount of pixels to the left of the parent's right the control should be. If a percentage represented as a string (E.g., '50%') is passed in, this is translated as positioning the right of the control at fifty percent of the parents width. If a control is passed in, this is translated as positioning the right of the control to the left of the passed in control.
Definition
various control.rightExample
require('Common');
var win = new Window();
win.visible = true;
var buttonSecond = new Button();
var buttonThird = new Button();
var buttonNormal = new Button();
buttonNormal.title = "Aligned to top-right";
buttonNormal.right = '0'; // align to right
buttonNormal.top = '0'; // Horizontally centered to window.
buttonNormal.width = '200px'; // 200 logical pixels wide.
buttonSecond.title = "20px from right";
buttonSecond.right = '20px'; // Position it 20 pixels from the right
buttonSecond.top = '200px'; // Align it to the top by 200 pixels.
buttonThird.title = "Third";
buttonThird.right = '50%'; // Position it 50% from the right.
buttonThird.bottom = '20px'; // align it 20px of the parent height
// from the bottom.
// Add the buttons to the window.
win.appendChild(buttonSecond);
win.appendChild(buttonNormal);
win.appendChild(buttonThird);
Description
Gets or sets the preferred top position of the control. If this is set to a number its considered the amount of pixels below the top of the parent control. If a percentage represented as a string (E.g., '50%') is passed in, this is translated as positioning the top at fifty percent of the parents height. If a control is set to the top the top is translated as placing it right below the assigned control element.
Definition
various control.topExample
require('Common');
var win = new Window();
win.visible = true;
var buttonSecond = new Button();
var buttonThird = new Button();
var buttonNormal = new Button();
buttonNormal.title = "Hello";
buttonNormal.middle = '100%'; // Vertically centered to window.
buttonNormal.center = '100%'; // Horizontally centered to window.
buttonNormal.width = '200px'; // 200 logical pixels wide.
// buttonNormal uses the default height requested by button.
buttonSecond.title = "Second";
buttonSecond.top = 0; // Position at the top of the window.
buttonSecond.right = 0; // "Right align" or make this button flush
// with the right of the window.
buttonThird.title = "Third";
buttonThird.left = 0; // Position at the top of the window.
buttonThird.top = 0; // "Left align" or make this button flush
// with the left of the window.
// Add the buttons to the window.
win.appendChild(buttonSecond);
win.appendChild(buttonNormal);
win.appendChild(buttonThird);
Description
Gets or sets whether the control is visible or not.
Definition
boolean control.visibleExample
require('Common'); // include defaults, creates application context.
var win = new Window(); // create a new window.
win.visible = true; // make the window visible.
var dateWell = new DateWell();
dateWell.style = "clock";
dateWell.range = true;
win.appendChild(dateWell);
dateWell.left = dateWell.top = 0;
dateWell.width = '300px';
dateWell.visible = false; // Make our date picker hidden.
Description
Gets or sets the preferred width of the control. If the value of this is a number its translated as the pixel width that the control should have. If the value is a string representing a percentage (e.g., '50%') then the width is set to 50% of the parents width. Note that width cannot be calculated if both left and right are set (as the width is implicitly set in that circumstance).
Definition
various control.widthExample
require('Common');
var win = new Window();
win.visible = true;
var buttonSecond = new Button();
var buttonThird = new Button();
var buttonNormal = new Button();
buttonNormal.title = "width 200px";
buttonNormal.left = '0'; // align to left
buttonNormal.top = '0'; // align to top
buttonNormal.width = '200px'; // 200 logical pixels wide.
buttonSecond.title = "20px from right";
buttonSecond.left = '0px'; // align to left
buttonSecond.top = '30px'; // align to top by 30px
buttonSecond.width = '50%'; // 50% of the width of parent.
buttonThird.title = "Third";
buttonThird.left = '0'; // Position it left
buttonThird.top = '100px'; // align it 100px of the parent height
// from the bottom.
buttonThird.width = buttonSecond; // make the width equal to buttonSecond.
// or 50% of the width.
// Add the buttons to the window.
win.appendChild(buttonSecond);
win.appendChild(buttonNormal);
win.appendChild(buttonThird);
Methods
Description
Adds an event listener for various control level events. The first parameter is the name of the event, the second parameter is the function to call when the event happens (e.g., a callback).
Definition
control.addEventListener(eventName, callback)Example
require('Common');
var win = new Window();
win.visible = true;
var buttonNormal = new Button();
buttonNormal.title = "Hello";
buttonNormal.middle = '100%'; // Vertically centered to window.
buttonNormal.center = '100%'; // Horizontally centered to window.
buttonNormal.width = '200px'; // 200 logical pixels wide.
win.appendChild(buttonNormal);
buttonNormal.addEventListener('mousedown', function() {
console.log('mouse is down over button!');
});Parameters
| Name | Type | Description |
|---|---|---|
| eventName | string | The name of the control event to start listening to. |
| callback | function | The function that will be called when it occurs. |
Description
Removes an event listener for various control level events. The first parameter is the name of the event, the second parameter is the function that was originally given as the callback for addEventListener.
Definition
control.removeEventListener(eventName, callback)Example
require('Common');
var win = new Window();
win.visible = true;
var buttonNormal = new Button();
buttonNormal.title = "Hello";
buttonNormal.middle = '100%'; // Vertically centered to window.
buttonNormal.center = '100%'; // Horizontally centered to window.
buttonNormal.width = '200px'; // 200 logical pixels wide.
win.appendChild(buttonNormal);
var mouseDown = function() {
console.log('mouse is down over button!');
}
// Listen to event.
buttonNormal.addEventListener('mousedown', mouseDown);
// Stop listening to event.
buttonNormal.removeEventListener('mousedown', mouseDown);Parameters
| Name | Type | Description |
|---|---|---|
| eventName | string | The name of the control event to stop listening to. |
| callback | function | The function that would have been called. |
Events
Description
Fires when a keyboard key is down but before its released.
Definition
control.addEventListener('keydown', function() { ... });Description
Fires when a keyboard key is up and after the keydown event.
Definition
control.addEventListener('keyup', function() { ... });Description
Fires when a user presses the left mouse button down and before it's released.
Definition
control.addEventListener('mousedown', function() { ... });Description
Fires when the mouse cursor enters the visible bounds of the control.
Definition
control.addEventListener('mouseenter', function() { ... });Description
Fires when the mouse cursor leaves the visible bounds of the control.
Definition
control.addEventListener('mouseexit', function() { ... });Description
Fires when the mouse moves, and only when its moving over the control.
Definition
control.addEventListener('mousemove', function() { ... });Description
Fires when a user releases the left mouse button and after the mousedown event.
Definition
control.addEventListener('mouseup', function() { ... });Description
Fires when a user presses the right mouse button down and before it's released.
Definition
control.addEventListener('rightmousedown', function() { ... });Description
Fires when a user releases the right mouse button and after the rightmousedown event.
Definition
control.addEventListener('rightmouseup', function() { ... });