Basic functions
Phi item API (application programming interface)
The following functions and event handler are available for all items:
|
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
All write functions return a reference to the object itself, so functions can be cascaded:
$('id').color('blue').bgColor('#FFFFCC').text('new item text');Server
For versions prior v2.0.0 you need to add loadModule('wrapper'); in the top section of your 
ServerScript file - since v2.0.0 the API is an integral part of Phi and always included. This API is not available for ServerScript prior version v1.5.0.
Client
For 
JavaScript the item API is available since v1.3.0.
Positioning
.x() .y() .left() .top() .width() .height() .pos() .zIndex() .tabIndex()
.x()
Synopsis
|
|
| ||||||||||||||||||||
Description
Read: returns the logical x-coordinate of the item. This is not necessarily the same as .left(): i.e. if the item has a border or a shadow the item has an offset which will be respected by this function. For repositioning and animations you should use this function. If you need the absolute position use .left().
Write: sets the x-coordinate of the item.
Note: child items in Layouts are counted relative to the top left corner of their parent position.
See also: .y(), .left(), .top(), .moveTo(), .moveBy().
Example
var x=$('id').x(); // read
$('id').x(120); // write: set the x-coordinate to 120.y()
Synopsis
|
|
| ||||||||||||||||||||
Description
Read: returns the logical y-coordinate of the item. This is not necessarily the same as .top(): i.e. if the item has a border or a graphical effect the item has an offset which will be respected by this function. For repositioning and animations you should use this function. If you need the absolute position use .top().
Write: sets the y-coordinate of the item.
Note: child items in Layouts are counted relative to the top left corner of their parent position.
See also: .x(), .left(), .top(), .moveTo(), .moveBy().
Example
var ypos=$('id').y(); // read
$('id').y(ypos+20); // write: adds 20px to the current y-coordinate.left()
Synopsis
|
|
| ||||||||||||||||||||
Description
Read: returns the absolute x-coordinate of the item. This is not necessarily the same as .x(): i.e. a border or a graphical effect will be ignored by this function. For repositioning and animations you should use .x().
Write: sets the x-coordinate of the item.
Note: child items in Layouts are counted relative to the top left corner of their parent position.
See also: .x(), .y(), .top(), .moveTo(), .moveBy().
Example
var xpos=$('id').left(); // read
$('id').left(xpos+120); // write: moves item 120px to the right.top()
Synopsis
|
|
| ||||||||||||||||||||
Description
Read: returns the absolute y-coordinate of the item. This is not necessarily the same as .y(): i.e. a border or a graphical effect will be ignored by this function. For repositioning and animations you should use .y().
Write: sets the y-coordinate of the item.
Note: child items in Layouts are counted relative to the top left corner of their parent position.
See also: .x(), .y(), .left(), .moveTo(), .moveBy().
Example
var ypos=$('id').top(); // read
$('id').top(120); // write: changes y-coordinate to 120px from the top - graphical effects are ignored.width()
Synopsis
|
|
| ||||||||||||||||||||
Description
Read: returns the logical width of the item. This is not necessarily the exact width: i.e. if the item has a border or a graphical effect it may have an offset which will be respected by this function.
Write: sets the logical width of the item.
Note: not all items support changing the width.
See also: .x(), .y(), .left(), .top(), .height(), .pos(), .moveBy().
Example
var w=$('id').width(); // read
$('id').width(120); // write - set the width to 120px.height()
Synopsis
|
|
| ||||||||||||||||||||
Description
Read: returns the logical height of the item. This is not necessarily the exact height: i.e. if the item has a border or a graphical effect it may have an offset which will be respected by this function.
Write: sets the logical height of the item.
Note: not all items support changing the height.
See also: .x(), .y(), .left(), .top(), .width(), .pos(), .moveBy().
Example
var h=$('id').height(); // read
$('id').height(20); // write - set the height to 20px.pos()
Synopsis
|
|
| ||||||||||||||||||||||||
Description
Short hand for getting or setting the item position relative to the document. If an item has e.g. a graphical effect or needs an offset the absolute and logical coordinates probably differ.
Read: returns an object o with the following properties:
-
o.left- absolute x-coordinate -
o.top- absolute y-coordinate -
o.x- logical x-coordinate v2.0.0 -
o.y- logical y-coordinate v2.0.0
Write: sets the logical position of the item.
Note: if the item is a child of a layout the position is counted relative to the parent top-left corner.
See also: .x(), .y(), .left(), .top(), .height(), .width(), .moveTo().
Example
var p=$('id').pos(); // read
alert( 'pos x:'+p.x+' y:'+p.y );
$('id').pos(120,20); // write - set the x-coordinate to 120 and y-coordinate to 20.zIndex()
Synopsis
|
|
| ||||||||||||||||||||
Description
Sets or gets the zIndex (stack position) of an item. Usually the item order (defined in the IDE) is used. However sometimes you need to changes this programmatically (especially if you use Master templates) or animations. Negative values are allowed. All values should be in the range from -10000 to 10000.
Read: returns the current zIndex used for this item.
Write: sets the current zIndex to idx.
Note: all items from a Master template are automatically stacked behind the items of the current page since v2.0.0.
See also: .tabIndex().
Example
var idx=$('id').zIndex(); // read - returns the current zIndex
$('id').zIndex( $('id2').zIndex()+1 ); // write - brings item 'id' in front of 'id2'.tabIndex()
Synopsis
|
|
| ||||||||||||||||||||
Description
Pressing the tab key focuses a new item - this sets or gets the tab index (focus order) of an item. You may change the tab order in the IDE. Usually only input items define a tab index.
Read: returns the current tab index used for this item.
Write: sets the current tab index to idx.
Note:
See also: .zIndex().
Example
var idx=$('id').tabIndex(); // read - returns the current tab index
$('id').tabIndex( $('id2').tabIndex()+1 ); // write - item 'id' will be focused after 'id2'Animation
.fadeIn() .fadeOut() .rotate() .moveBy() .moveTo() .rotateIn() .rotateOut() .slide() .stop()
.fadeIn()
Synopsis
|
|
| ||||||||||||||||||||||||||||||||
Description
Read: this is a write-only function and returns always a reference to itself.
Write: fades an item to maxopac, starting after start msec using easing curve ease and lasts duration msec.
Note: if start > 0 the item opacity is immediately set to 0. It becomes automatically visible after start.
See also: .fadeOut(), .rotateIn(), .rotateOut(), .opacity().
Example
$('id').fadeIn(1000,2000,0.8,'linear'); // starts after 1sec, lasts 2sec, fades to 80% opacity.fadeOut()
Synopsis
|
|
| ||||||||||||||||||||||||||||||||
Description
Read: this is a write-only function and returns always a reference to itself.
Write: fades an item to minopac, starting after start msec using easing curve ease and lasts duration msec.
Note: if start > 0 the item opacity is immediately set to 1. It automatically becomes visible after start and if minopac < 0.1 after animation the item will be hidden.
See also: .fadeIn(), .rotateIn(), .rotateOut(), .opacity().
Example
$('id').fadeOut(0,4000); // starts immediately, lasts 4sec, fades to fully transparent.rotate()
Synopsis
|
|
| ||||||||||||||||||||||||||||||||
Description
Rotates an item through different axis. Possible values for axis are (use an OR combination):
-
0x1x-axis orphi.xAxisinJavaScript -
0x2y-axis orphi.yAxisinJavaScript -
0x4z-axis orphi.zAxisinJavaScript
The speed is calculated in: 9000/step size milliseconds - therefor if step size equals 1.0 the duration for one complete turn for a given axis is 9sec.
Read: this is a write-only function and returns always a reference to itself.
Write: rotates the item through one or more given axis.
Note: the default rotates the z-axis in a 2D space. Older browser versions not supporting a 3D space will ignore the x-axis and y-axis
See also: .rotateX(), .rotateY(), .rotateZ(), .rotateToX(), .rotateToY(), .rotateToZ(), .stop().
Attention: This function is experimental. Expect inconsistencies.
Example
$('id').rotate(3,1.0,2.0); // rotates through the x-axis and y-axis with double speed for the y-axis
$('id').rotate(phi.xAxis|phi.zAxis,1.5,0,0.5); // JavaScript (client) only
$('id').rotate(); // rotates through the z-axis with a duration of 9sec for one turn.
$('id').rotate(7,1.0,0.5,2.0); // rotates through all axis with the given step size
setTimeout( function(){ $('id').stop(); }, 60000 ); // stops the rotation after 1min.moveBy()
Synopsis
|
|
| ||||||||||||||||||||||||||||||||||||||||||||
Description
Read: this is a write-only function and returns always a reference to itself.
Write: moves or resizes the item over a time period.
Note: not all items support resizing.
See also: .x(), .y(), .width(), .height(), .moveTo().
Example
$('id').moveBy(0,-20,0,0,5000); // starts after 5sec and moves the item 20px to the top
$('id').moveBy(0,0,100,100); // growth the item 100px in both directions
$('id').moveBy(-200,0,200,0); // moves 200px to the left while the item width is growing.moveTo()
Synopsis
|
|
| ||||||||||||||||||||||||||||||||||||
Description
Read: this is a write-only function and returns always a reference to itself.
Write: moves the item over a time period to a specific (logical) position.
Note: additional graphical effects will be respected and an offset will be added if necessary.
See also: .x(), .y(), .moveBy().
Example
$('id').moveTo(0,20,5000); // starts after 5sec and moves the item to the left border and 20px to the top
var y=$('id').y();
$('id').moveTo(200,y,0,4000); // moves immediately to x=200 while the y-coordinate will not be changed, lasts 4secTemplate:Func rotateIn Template:Func rotateOut
.slide()
Synopsis
|
|
| ||||||||||||||||||||||||||||
Description
Slides an item (or a group of items - i.e. layouts) up or down. This function enables you to create great sliding menu effects.
Read: this is a write-only function and always returns a reference to the item itself.
Write: slides an item 'up', i.e. hides an item if dir is empty or equals 'up' or shows an item if dir equals 'down' with a slide effect.
Note: if an item is already hidden and dir is 'up' or if the item is already visible and dir is 'down' than this function does nothing.
See also: .rotateOut(), .rotateIn(), .hide(), .show().
Example
$('id').slide(); // write - slides an item up within 400ms
$('id').slide('up',400,'easeOutBounce'); // write - slides an item up with a bouncing effect
$('id').slide('down',1000); // write - slides an item down and lasts 1sec for the animation.stop()
Synopsis
|
|
| ||||||||||||||||
Description
Read: this is a write-only function and returns always a reference to the item itself.
Write: stops any animation running on the item immediately.
Note:
See also:
Example
$('id').stop(); // writeTransformation
.rotateX() .rotateY() .rotateZ() .rotateToX() .rotateToY() .rotateToZ() .scale() .scaleTo() .$()
.rotateX()
Synopsis
|
|
| ||||||||||||||||||||
Description
Read: returns the current x-rotation.
Write: rotates the item through the x-axis angle degrees clockwise or counter-clockwise if angle is negative.
Note: if the browser does not support transformations in a 3D space, this function does nothing.
See also: .rotateToX(), .rotateY(), .rotateZ(), .rotate().
Attention: This function is experimental. Expect inconsistencies.
Example
var xangle=$('id').rotateX(); // read
$('id').rotateX(45); // write - rotates the item 45° vanishing to the top.rotateY()
Synopsis
|
|
| ||||||||||||||||||||
Description
Read: returns the current y-rotation.
Write: rotates the item through the y-axis angle degrees clockwise or counter-clockwise if angle is negative.
Note: if the browser does not support transformations in a 3D space, this function does nothing.
See also: .rotateToY(), .rotateX(), .rotateZ(), .rotate().
Attention: This function is experimental. Expect inconsistencies.
Example
var yangle=$('id').rotateY(); // read
$('id').rotateY(45); // write - rotates the item 45° vanishing to the left.rotateZ()
Synopsis
|
|
| ||||||||||||||||||||
Description
Read: returns the current z-rotation.
Write: rotates the item through the z-axis angle degrees clockwise or counter-clockwise if angle is negative.
Note: this reflects a rotation in 2D space and should be supported by any browser.
See also: .rotateToZ(), .rotateX(), .rotateY(), .rotate().
Example
var zangle=$('id').rotateZ(); // read
$('id').rotateZ(45); // write - rotates the item 45° clockwise.rotateToX()
Synopsis
|
|
| ||||||||||||||||||||||||||||
Description
Read: this is a write-only function and returns a reference to the item itself.
Write: rotates the item through the x-axis to angle degrees clockwise or counter-clockwise if angle is negative.
Note: if the browser does not support transformations in a 3D space, this function does nothing.
See also: .rotateX(), .rotateToY(), .rotateToZ(), .rotate().
Attention: This function is experimental. Expect inconsistencies.
Example
$('id').rotateToX(45,2000,'linear'); // write - rotates the item to 45° in 2sec.rotateToY()
Synopsis
|
|
| ||||||||||||||||||||||||||||
Description
Read: this is a write-only function and returns a reference to the item itself.
Write: rotates the item through the y-axis to angle degrees clockwise or counter-clockwise if angle is negative.
Note: if the browser does not support transformations in a 3D space, this function does nothing.
See also: .rotateToX(), .rotateY(), .rotateToZ(), .rotate().
Attention: This function is experimental. Expect inconsistencies.
Example
$('id').rotateToY(-45,4000); // write - rotates the item to -45° (counter-clockwise) in 4sec.rotateToZ()
Synopsis
|
|
| ||||||||||||||||||||||||||||
Description
Read: this is a write-only function and returns a reference to the item itself.
Write: rotates the item through the z-axis to angle degrees clockwise or counter-clockwise if angle is negative.
Note: this reflects a rotation in 2D space and should be supported by all browser.
See also: .rotateToX(), .rotateToY(), .rotateZ(), .rotate().
Example
$('id').rotateToZ(45,2000,'linear'); // write - rotates the item to 45° in 2sec.scale()
Synopsis
|
|
| ||||||||||||||||||||
Description
Affine (2D space) scaling. A scale factor of 2. doubles the size. A scale factor of 0.5 is half size. A scale factor of 1. is the normal size.
Read: returns the current scale factor.
Write: scales the item to factor f.
Note:
See also: .rotateX(), .rotateY(), .rotateZ(), .rotate().
Attention: This function is experimental. Expect inconsistencies.
Example
$('id').scale(); // read
$('id').scale(4); // write - scales the item 4 times the normal size..scaleTo()
Synopsis
|
|
| ||||||||||||||||||||||||||||
Description
Affine (2D space) scaling. A scale factor of 2. doubles the size. A scale factor of 0.5 is half size. A scale factor of 1. is the normal size.
Read: this is a write-only function and always returns a reference to the item itself.
Write: scales the item to factor f with duration d and easing curve ease.
Note: in combination with .mouseover() and .mouseout() you may create nice effects.
See also: .rotateToX(), .rotateToY(), .rotateToZ(), .scale().
Attention: This function is experimental. Expect inconsistencies.
Example
$('id').scaleTo(2,2000,'linear'); // write - doubles the size within 2sec.$()
Synopsis
|
|
| ||||||||||||||||
Description
Read: returns the ID string of this object.
Write: this is a read-only function.
Note: on a first view this function looks useless, but if you loop e.g. through a list of item objects this function might be useful.
See also: .wid().
Example
var id=$('myitem').$(); // read - id='myitem'Display
.cursor() .disabled() .opacity() .hide() .show() .visible() .toggle() .title() .wid()
.cursor()
Synopsis
|
|
| ||||||||||||||||||||
Description
The following cursor types are supported:
|
|
|
|
Read: returns the current used cursor.
Write: sets the current cursor to s, i.e. this cursor is shown if the user hovers the item.
Note:
See also: .disabled().
.opacity()
Synopsis
|
|
| ||||||||||||||||||||
Description
The opacity must be in the range of 0 (fully transparent) to 1 (opaque). An opacity of 0.5 is 50% transparent. Children (i.e. items in a layout) respect the opacity of the parent.
Read: returns the current opacity of the item.
Write: sets the opacity of the item.
Note: Phi normalizes the value to support also older IExplorer versions using an alpha filter.
See also: .visible(), .fadeIn(), .fadeOut().
Example
var opac=$('id').opacity(); // read
$('id').opacity(0.8); // write - makes the item 80% opaque.hide()
Synopsis
|
|
| ||||||||||||||||
Description
Items which have the CSS style visibility:hidden attached are treated as hidden as well. This is different to the jQuery behavior where an item needs the CSS style display:none to be treated as really hidden. However in Phi mode the display style is not available because of the nature how items are positioned. We recommend not to use to set the style directly - always use .hide() and .show() to be safe.
Read: this is a write-only function and returns always a reference to the item itself.
Write: the item becomes hidden immediately.
Note: an item with zero opacity is not treated as hidden.
See also: .show(), .visible(), .toggle(), .opacity().
Example
$('id').hide(); // write.show()
Synopsis
|
|
| ||||||||||||||||
Description
Makes an item visible. CSS styles set (like display:none or visibility:hidden) will be changed. An item with opacity 0 remains transparent.
Read: this is a write-only function and returns always a reference to the item itself.
Write: the item becomes visible immediately.
Note: The CSS style visibility:hidden is treated as invisible. This is a different behavior than in the jQuery API. We recommend to use always .show() and .hide() and not to set the style directly to be safe - plus display:none is not supported in Phi mode.
See also: .hide(), .visible(), .opacity().
Example
$('id').show(); // write.visible()
Synopsis
|
|
| ||||||||||||||||||||
Description
Read: returns true if the item is visible otherwise false.
Write: makes the item visible if b is true - hides the item if b is false.
Note: an item with zero opacity is not treated as hidden.
See also: .show(), .hide(), .toggle(), .opacity().
Example
if ( $('id').visible() ) doSomething(); // read
$('id').visible(0); // write - hides the item
$('id').visible(true); // write - shows the item.toggle()
Synopsis
|
|
| ||||||||||||||||
Description
Read: this is a write-only function and returns always a reference to the item itself.
Write: the item becomes hidden if it is visible and vice versa.
Note:
See also: .show(), .hide(), .visible(), .opacity().
Example
$('id').toggle(); // write.title()
Synopsis
|
|
| ||||||||||||||||||||
Description
Read: returns the current set title (tool tip) for this item.
Write: Sets the current title (tool tip) for this item.
Note: use an empty string to remove the tool tip.
See also:
Example
var t=$('id').title(); // read
$('id').title('<b>bold tags have no effect.</b>'); // write.wid()
Synopsis
|
|
| ||||||||||||||||
Description
In Phi each item has its own widget ID.
Read: returns the unique WID (widget ID) for this object.
Write: this is a read-only function.
Note: in ServerScript items can be created dynamically using createElementById().
See also: .$(), document.createElementById().
Example
var wid=$('image').wid(); // read - gets the widget ID (for image items this will be 16)
// ServerScript only:
loadModule('system');
var item=document.createElementById( 6, 'mybutton', 100, 50 ); // creates a button (wid=6)
item.text( 'My button' );
system.log( 'Button created with id'+item.$() );
