ShowTable of Contents
The YNUI object offers various helpers for creating the user interface. It's already there, you don't need to create the object.
Colors
Since Ti 2.1 there are default colors or textures for some situations, but on iOS only. These YNUI properties wraps the iOS default textures and add default colors for Android.
yn_skin.COLOR_GROUP_TABLEVIEW_BACKGROUND
yn_skin.COLOR_SCROLLVIEW_BACKGROUND
yn_skin.COLOR_UNDER_PAGE_BACKGROUND
yn_skin.COLOR_VIEW_FLIPSIDE_BACKGROUND
yn_skin.COLOR_TABLEROW_TEXT
Gradients
A set of predefined gradients for using with the "backgroundGradient" property.
For example:
var button = Ti.UI.createButton({
backgroundGradient: yn_skin.gradient_button
});
yn_skin.GRADIENT_BUTTON
yn_skin.GRADIENT_GRAY_VERYLIGHT
yn_skin.GRADIENT_GRAY_LIGHT
yn_skin.GRADIENT_GRAY
yn_skin.GRADIENT_GRAY_DARK
yn_skin.GRADIENT_GRAY_VERYLIGHT2
yn_skin.GRADIENT_GRAY_LIGHT2
yn_skin.GRADIENT_GRAY2
yn_skin.GRADIENT_GRAY_DARK2
(same as GRAY above, but opposite direction)
yn_skin.GRADIENT_BLUEGRAY_VERYLIGHT
yn_skin.GRADIENT_BLUEGRAY_LIGHT
yn_skin.GRADIENT_BLUEGRAY
yn_skin.GRADIENT_BLUEGRAY_DARK
yn_skin.GRADIENT_BLUE_VERYLIGHT
yn_skin.GRADIENT_BLUE_LIGHT
yn_skin.GRADIENT_BLUE
yn_skin.GRADIENT_BLUE_DARK
Fonts
Pre defined fonts properties:
yn_skin.FONT_SMALL
yn_skin.FONT_TEXT
yn_skin.FONT_H1
yn_skin.FONT_TABLE_VERYSMALL
yn_skin.FONT_TABLE_SMALL
yn_skin.FONT_TABLE_MEDIUM
Available fonts in iOS
American Typewriter
AppleGothic
Arial
Arial Hebrew
Arial Rounded MT Bold
Courier
Courier New
DB LCD Temp
Geeza Pro
Georgia
Heiti J
Heiti K
Heiti SC
Heiti TC
Helvetica
Helvetica Neue
Hiragino Kaku Gothic ProN
Marker Felt
Thonburi
Times New Roman
Trebuchet MS
Verdana
Zapfino
UI Elements
Buttons
YNUI.createButton(bTitle, bTop, bWidth)
Creates a button with a predefined style to place somewhere in the window.
YNUI.createNavbarButton(bTitle, bWidth, bImage)
Creates a button with ai predefined style to place into the navbar.
The button automatically styles itself depending if you are on the iPhone or iPad.
YNUI.createFlexSpace()
Creates a flex space area to put left and right of buttons in a buttonbar to have the buttons centered.
Disable and enable standard buttons
These two functions set the "enabled" property and colors of text and border for a button. Best used with buttons that are created with YNUI.createButton();
YNUI.disableButton(button);
YNUI.enableButton(button);
Text field
YNUI.createTextField(style, hintText, defaultvalue, width, isPassword, height, top)
Creates a text field with a pre-defined style.
With:
style: a style for the field. Supported styles:
- "standard": used in standard input forms.
- "settings": a style for setting dialogs, with rounded borders.
- "blank": without borders, plain white.
hintText: (optional) the hintText for the field.
defaultvalue: (optional) a default value for the field.
width: (optional) the width for the field. Defaults to "90%".
isPassword: (optional) set to true to make a password style field where the content is hidden.
height: (optional) a height for the field. Defaults to 40.
top: (optional) margin to the top. Defaults to 10.
Text Area
YNUI.createTextArea(style, defaultvalue, width, height, top)
Creates a text area with a pre-defined style.
With:
style: a style for the field. Supported styles:
- "standard": used in standard input forms.
- "blank": without borders, plain white.
defaultvalue: (optional) a default value for the field.
width: (optional) the width for the field. Defaults to "90%".
height: (optional) the height for the field. Defaults to 200.
top: (optional) margin to the top. Defaults to 10.
Horizontal Line
YNUI.createHorizontalLine(color, width, top)
Activity Indicator
YNUI.createActivityIndicator(text, style)
With:
text: a label for the activity indicator box.
style: (optional) the color theme for the activity indicator. Supported styles:
- "dark" or "black"
- "white"
Alert and confirm
YNUI.alert(msg, title)
Creates an alert box.
With:
msg: the message to display.
title: (optional) a title for the alert box.
Example:
YNUI.alert("Domino To Go is great.", "My App")
YNUI.confirm(msg, callback, selectedButton, buttons)
Creates a confirm dialog with default or custom buttons. Program execution does not stop, you need a callback to handle the button click.
With:
msg: the message to display.
callback: the callback that is called when the user clicked a button. The number of the button the user clicked is in "e.index" (0 is the first button).
selectedButton: (optional) which button is pre selected - does not work in Titanium 1.8.
buttons: (optional) a string array of button labels if you want to use custom buttons. The cancel button should be button 2. The default buttons are "OK" and "Cancel".
Examples:
YNUI.confirm("You are about to delete the document. Proceed?", function(e) {if (e.index == 0) deleteDoc(); });
YNUI.confirm("You are about to delete the document. Proceed?", function(e) {if (e.index == 0) deleteDoc(); }, 0, ['Yes', 'No']);
Orientation
YNUI.isOrientationPortrait()
Returns true if the device is in portrait mode.
YNUI.isOrientationLandscape()
Returns true if the device is in landscape mode.
Platform
YNUI.isIPad()
Returns true if the device is an iPad.
YNUI.isIPhone()
Returns true if the device is an iPhone.
YNUI.isAndroid()
Returns true if the device runs Android.
YNUI.isTablet()
Returns true if the device is a tablet. A device is consideres as a table if it's an iPad or an Android device with screen width or height >899.
Screen
YNUI.getScreenWidth()
Returns the current width of the screen.
YNUI.getScreenHeight()
Returns the current height of the screen.
|