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.