develop wherever and whenever you want...
Docs > View Class Reference

View Class Reference

Summary 
Views are used to display information in Cocoa Typically, a Jasic cocoa application starts with a single "root" view that defines the target orientation and device for the app. This view is then used to create child views contained in it to display information and handle input. The root view is created by using the view constructor function below. Additional views are created by calling the create methods on the root view.

ViewObject View(type) 
number width 
number height 
LabelObject createLabel([x,y,]width,height) 
TextViewObject createTextView([x,y,]width,height) 
TextFieldObject createTextField([x,y,]width,height) 
ButtonObject createButton([x,y,]width,height) 
SliderObject createSlider([x,y,]width,height) 
ActivityIndicatorObject createActivityIndicator([x,y,]width,height) 
CheckboxObject createCheckbox([x,y,]width,height) 
ProgressIndicatorObject createProgressIndicator([x,y,]width,height) 
ImageViewObject createImageView([x,y,]width,height) 
ListViewObject createListView([x,y,]width,height) 
WebGLViewObject createGlView([x,y,]width,height) 
WebViewObject createWebView([x,y,]width, height) 
void setResizeOnKeyboard(flag) 
The following methods are common to all view objects void setBackgroundColor(red,green,blue,alpha) 
void setFrame(x,y,width,height) 
void moveToFront() 
void moveToBack() 
void hide() 
void setVisible(visible) 
bool isHidden() 
void close() 
void update() 
void onTouch(handler) 
Example 
root = new View("ipad-portrait"); 
root.setBackgroundColor(0.1,0.1,0.5,1); 
document.wait(); 


View 
Constructs a root view object. The root view defines whether the app is intended for iPhone or iPad and the orientation supported by the application.

ViewObject View(options) 
Parameters 
Options - string, one of the following: "ipad-portrait", "ipad-landscape", "iphone-portrait" or "iphone-landscape"

Return Value 
Root view object is returned.

Notes 
This object can then be used to create all child views. Please note that the application will automatcially terminate unless document.wait() is called to keep the application running and process all input events.


width 
Number property returning the width of the root view in pixels


height 
Number property returning the height of the root view in pixels


createLabel 
Creates a label view from a parent root view. A label view displays text information. LabelObject createLabel([x,y,]width,height) 
Parameters x (optional number) - left coordinate of child label view relative to parent in pixels 
y (optional number) - top coordinate of child label view relative to parent in pixels 
width - width of view in pixels 
height - height of view in pixels 
Return Value 
Label view object is returned Notes 
If no x and y coordinates are supplied, the view is centered in the parent


createTextView 
Creates a text view from a parent root view. Text view allows editing multiple lines of text and supports notification of text or selection changes

TextViewObject createTextView([x,y,]width,height)

Parameters 
x (optional number) - left coordinate of child label view relative to parent in pixels 
y (optional number) - top coordinate of child label view relative to parent in pixels 
width - width of view in pixels 
height - height of view in pixels Return Value 
Text view object is returned

Notes 
If no x and y coordinates are supplied, the view is centered in the parent based on width and height


createTextField 
Creates a text field from a parent root view. Text field allows editinga single line of text and supports notification of text or selection changes

TextFieldObject createTextField([x,y,]width,height)

Parameters 
x (optional number) - left coordinate of child label view relative to parent in pixels 
y (optional number) - top coordinate of child label view relative to parent in pixels 
width - width of view in pixels 
height - height of view in pixels 
Return Value 
Text view object is returned

Notes 
If no x and y coordinates are supplied, the view is centered in the parent based on width and height


createButton 
Creates a button view from a parent root view. A button has text and a click handler

ButtonObject createButton([x,y,]width,height)

Parameters 
x (optional number) - left coordinate of child label view relative to parent in pixels 
y (optional number) - top coordinate of child label view relative to parent in pixels 
width - width of view in pixels 
height - height of view in pixels 

Return Value 
Button view object is returned

Notes 
If no x and y coordinates are supplied, the view is centered in the parent based on width and height


createSlider 
Creates a slider view from a parent root view. A slider allows the user to control a numeric value within a range

SliderObject createSlider([x,y,]width,height)

Parameters 
x (optional number) - left coordinate of child label view relative to parent in pixels 
y (optional number) - top coordinate of child label view relative to parent in pixels width - width of view in pixels 
height - height of view in pixels 
Return Value 
Slider view object is returned

Notes 
If no x and y coordinates are supplied, the view is centered in the parent based on width and height


createActivityIndicator 
Creates a an activity indicator view from a parent root view. The activity indicator can be animated on or off to indicate busy action

ActivityIndicatorObject createActivityIndicator([x,y,]width,height)

Parameters 
x (optional number) - left coordinate of child label view relative to parent in pixels 
y (optional number) - top coordinate of child label view relative to parent in pixels width - width of view in pixels height - height of view in pixels Return Value 
Activity indicator object is returned

Notes 
If no x and y coordinates are supplied, the view is centered in the parent based on width and height


createCheckbox 
Creates a checkbox view from a parent root view. A checkbox can be checked or unchecked

CheckboxObject createCheckbox([x,y,]width,height)

Parameters 
x (optional number) - left coordinate of child label view relative to parent in pixels 
y (optional number) - top coordinate of child label view relative to parent in pixels 
width - width of view in pixels 
height - height of view in pixels 
Return Value 
Checkbox view object is returned

Notes 
If no x and y coordinates are supplied, the view is centered in the parent based on width and height


createProgressIndicator 
Creates a progress indicator view from a parent root view. A progress indicator displays a visual range representing a numeric value

ProgressIndicatorObject createProgressIndicator([x,y,]width,height)

Parameters 
x (optional number) - left coordinate of child label view relative to parent in pixels 
y (optional number) - top coordinate of child label view relative to parent in pixels 
width - width of view in pixels 
height - height of view in pixels 

Return Value 
Progress indicator object is returned

Notes 
If no x and y coordinates are supplied, the view is centered in the parent based on width and height


createImageView 
Creates an image view from a parent root view. An image view displays an Image object (see Image)

ImageViewObject createImageView([x,y,]width,height)

Parameters x (optional number) - left coordinate of child label view relative to parent in pixels 
y (optional number) - top coordinate of child label view relative to parent in pixels 
width - width of view in pixels 
height - height of view in pixels 

Return Value 
Image view object is returned

Notes 
If no x and y coordinates are supplied, the view is centered in the parent based on width and height


createListView 
Creates a list view from a parent root view. A list view contains an array of items and fires events for selection changes in the list.

ListViewObject createListView([x,y,]width,height)

Parameters 
x (optional number) - left coordinate of child label view relative to parent in pixels 
y (optional number) - top coordinate of child label view relative to parent in pixels 
width - width of view in pixels height - height of view in pixels

Return Value 
List view object is returned

Notes 
If no x and y coordinates are supplied, the view is centered in the parent based on width and height


createGlView 
Creates a WebGL view from a parent root view. The WebGL view has a context which can be used to program 3D content using WebGL

WebGLViewObject createGlView([x,y,]width,height)

Parameters 
x (optional number) - left coordinate of child label view relative to parent in pixels 
y (optional number) - top coordinate of child label view relative to parent in pixels 
width - width of view in pixels 
height - height of view in pixels 

Return Value 
WebGL view object is returned

Notes 
If no x and y coordinates are supplied, the view is centered in the parent based on width and height


setBackgroundColor 
Changes the background color of a view.

setBackgroundColor(red,green,blue,alpha)

Parameters 
red - sets the red color component value between 0 and 1 
green - sets the green color component value between 0 and 1 
blue - sets the blue color component value between 0 and 1 
alpha - sets the alpha component value between 0 and 1 (0 transparent) 

Return Value 
none

Notes 
This method applies to all views.


setFrame 
Changes the position and size of a view within its parent

setFrame(x,y,width,height)

Parameters 
x - left most position of view in parent in pixels 
y - top most position of view in parent in pixels 
width - width in pixels 
height - height in pixels 

Return Value 
none

Notes 
This method can be used to move and resize views within a parent view. Since there is no method to retreive the current frame for a view, you can "attach" properties on the view to track information such as position or size. This is due to the fact that view objects are extensible as JavaScript objects.

Also note that all views are automatically scaled when the application is in panel mode (vs. fullscreen) so all dimesions are based on fullscreen and scaled during rendering when the application is running in a panel.


moveToFront 
Move the view in front of all other sibling views

moveToFront()

Parameters 
none

Return Value 
none

Notes 
Since there is no way to control the specific Z-index of a view. Combinations of moveToFront and moveToBack can be used to precisely order views visually.


moveToBack 
Move the view behind all other sibling views

moveToBack()

Parameters 
none

Return Value 
none

Notes 
Since there is no way to control the specific Z-index of a view. Combinations of moveToFront and moveToBack can be used to precisely order views visually.


hide 
Hide the view

hide()

Parameters 
none

Return Value 
none

Notes 
Makes a view invisible and disables all user interactions


setHidden 
Controls the visibility of a view off or on

setHidden(hidden)

Parameters 
hidden - boolean value true if hidden, false visible

Return Value 
none

Notes 
Turns the visibility of a view on or off


isHidden 
Query visibility of a view

hidden isHidden()

Parameters 
none

Return Value 
Boolean value true if the view is hidden

Notes

becomeFirstResponder 
Make the view the current recipient of keyboard input

void becomeFirstResponder()

Parameters 
none

Return Value 
none

Notes

resignFirstResponder 
Resign keyboard input and hide software keyboard is visible

void resignFirstResponder()

Parameters 
none

Return Value 
none

Notes


isFirstResponder 
Check if a view is the current keyboard input responder

boolean isFirstResponder()

Parameters 
none

Return Value 
Boolean value true if the view is the current keyboard responder

Notes 
First responder example r = new View("ipad-landscape"); 
tf = r.createTextField(0,0,r.width,100); 
tf.setBackgroundColor(0.7,0.8,0.6,1); 
b1 = r.createButton(0,120,r.width,100); 
b1.setText("Resign"); 
b2 = r.createButton(0,240,r.width,100); 
b2.setText("Become"); 
l = r.createLabel(0,360,r.width,100);

function click(sender) { 
if(sender.getText() == "Resign") 
tf.resignFirstResponder(); 
if(sender.getText() == "Become") 
tf.becomeFirstResponder();

l.setText(tf.isFirstResponder());   

}

b1.onClick(click); 
b2.onClick(click); 
document.wait(); 


close 
Close the view and remove it from the view list

close()

Parameters 
none

Return Value 
none

Notes 
Calling any methods on the view once its closed is invalid and will result in a runtime exception


update 
Force the view to repaint

update()

Parameters 
none

Return Value 
none

Notes 
Views in Cocoa typically automatically update when their content changes. So this method is reserved for future use.


onTouch 
Register a function to receive touch events for a view

void onTouch(handler)

Parameters 
handler - function to handle touch events for the view (see notes)

Return Value 
none

Notes 
The handler function for processing touch events has the form of:

function <handler>(type,xValues,yValues) 
type - string indicating the type of touch event "down" means touch has began "moved" means a touch move event happened "up" indicates touch event ending

xValues - Array of x coordinates of touch relative to view 
yValues - Array of y coordinates of touch relative to view 

The length of the xValues or yValues array can be used to determine the number of touch points which triggered the touch event.


setResizeOnKeyboard 
Controls whether the application view will resize and scale if the software keyboard is displayed or not

void setResizeOnKeyboard(flags)

Parameters 
flags - true or false to resize app view when software keyboard is displayed

Notes 
By default, the entire application view will resize when the on screen keyboard is displayed. This method allows override of this behavior. Typically, the flags can be set to false if all text field and text view views are in the upper half of the display area and would not be obstructed by the on screen keyboard.