Overview
Introduction
PhiScript main goal is to provide every essential functionalities you need in the process of building web applications using JavaScript. When I start building PhiScript I just wanted a framework like Adobe Flex SDK for JavaScript, becase Adobe Flex SDK has some realy cool features that makes the development process very easy and fast. So if you are a Flex developer that wants to build applications using JavaScript this framework should be "gold mine" for you. If you don't know about Adobe Flex there is no problem PhiScript is very easy to use.
The project is hosted on GitHub.You can report bugs and discuss features on the issues page.
Downloads & Dependencies (Right-click, and use "Save As")
Development Version (0.8.5) 76.0kb, Full Source with Comments
Production Version (0.8.5) 41.10kb, Packed
Compiler (.air)(1.1.0) 524.0kb, Adobe AIR
PhiScript only hard dependency is Mootools
Example
To make an idea on how PhiScript is used for building JavaScript web applications checkout
the ToDo List Application Demo.
To learn more download the source code and read through the annotated source.
Compiler
Why a compiler and how to used
You can use PhiScript library without the compiler, because PhiScript library is just a collections of JavaScript classes. For example let's say we want to display two inputs to get the username and password and if there are correct we will display a message.
var myView = new View();
var hBox = phi.ui.HBox.create();
var txtInput1 = phi.ui.TextInput.create();
var txtInput2 = phi.ui.TextInput.create({displayAsPassword: true});
var btn = phi.ui.Button.create({text: "Login"});
hBox.addChild( txtInput1 );
hBox.addChild( txtInput2 );
hBox.addChild( btn );
myView.addChild( hBox );
btn.addEvent('click', function() {
var username = txtInput1.getText();
var password = txtInput2.getText();
if( username == 'admin' && password == 'admin' )
alert('You have login with success!');
})
// To render this we will add view to BODY element
phi.ui.RootBox.get().addChild( myView );
As you can is very hard to create a layout in this way plus if we need more layout constraints the code will be even bigger and hard to see how ui components are arrange in the tree. So for that we will use XML language to write our code and in combination with JavaScript we will have a much nicer code. Let's see the code above using XML:
// MyView.xml
<View>
<HBox>
<TextInput id="txtInput1" />
<TextInput id="txtInput2" displayAsPassword="true" />
<Button text="Login" onClick="login()" />
<JavaScript>
<![CDATA[
login: function()
{
var username = this.txtInput1.getText();
var password = this.txtInput2.getText();
if( username == 'admin' && password == 'admin' )
alert('You have login with success!');
}
]]>
</JavaScript>
</HBox>
</View>
As you can see the code now is much more easy to understand and easy to edit. But for that to work we need a compiler to transform that in JavaScript. So that is
why we need PhiScript compiler if we want to define our views using XML. If you open MyView.xml with PhiScript compiler it will generate a
MyView.js file that will contain something like this:
var MyView = new Class({
Extends: phi.ui.View,
createChildren: function()
{
this.addChild( this.hbox01() )
},
hbox01: function()
{
var result = phi.ui.HBox.create();
result.addChild( phi.ui.TextInput.create() );
result.addChild( phi.ui.TextInput.create({displayAsPassword: true}) );
.............................
.............................
return result
},
}
all you have to do in your code to used is:
<script src="MyView.js" type="text/javascript"></script>
<script>
function onDOMReady()
{
var myView = new MyView();
// and to add your view to BODY use RootBox
phi.ui.RootBox.get().addChild( myView );
}
</script>
and that is all. If you want to make changes, you only need to edit MyView.xml recompile and refresh the page and you should see the changes. Please read more
about Views and how you can create custom views in Views & Binding section.
API
Components list:
Controls: Component, Button, CheckBox, Image, Label, TextInput, Menu, ListBase, List
Containers: Container, CellBox, HBox, VBox, View, ViewStack, TitleWindow
phi.ui.Component extends: phi.ui.Object
Methods: addClass, removeClass, getPosition, setWidth, setHeight, getWidth, getHeight, setSize, getParent, getParentView, setVisible, getVisible, setEnabled, getEnabled, setBackgroundColor
Events: added, removed, click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, mouseup
addClass: ui.addClass( className )
- Add class to HTML element.
removeClass: ui.removeClass( className )
- Remove class from HTML element.
setWidth: ui.setWidth( width )
- Sets component width.
setHeight: ui.setHeight( height )
- Sets component height.
getWidth: ui.getWidth()
- Returns component width.
getHeight: ui.getHeight()
- Returns component height.
getParent: ui.getParent()
- Returns component parent.
getParentView: ui.getParentView()
- Returns component parent view.
Example:
<View id="myCustomView">
<HBox>
<TextInput />
<VBox>
<Button id="btn1" />
<Button id="btn2" />
</VBox>
</HBox>
</View>
If we use the XML above and we write this.btn1.getParentView() we will get myCustomView
setVisible: ui.setVisible( true|false )
- Sets the component visibility.
getVisible: ui.getVisible()
- Returns the component visibility.
phi.ui.Button extends: phi.ui.Component
XML:
<Button text=""
// Properties from phi.ui.Component
id="btn1"
width=""
height=""
style="" // This will use btn.addClass, ex. style="primary btn"
visible="true|false"
enabled="true|false"
buttonMode="true|false"
paddingLeft=""
paddingTop=""
paddingRight=""
paddingBottom=""
backgroundColor=""
// Events from phi.ui.Component
onMousedown=""
onMouseup=""
onClick=""
onKeyup=""
onKeydown="" />
setText: button.setText( text )
- Sets button text.
getText: button.getText()
- Return button current text.
phi.ui.CheckBox extends: phi.ui.Component
XML:
<CheckBox checked="true|false"
// + properties from phi.ui.Component ( see phi.ui.Button )
// + events from phi.ui.Component
/>
Methods: setChecked, getChecked
setChecked: chk.setChecked( true|false )
- Sets checkbox checked state
getChecked: chk.getText()
- Returns if checkbox is checked
phi.ui.Image extends: phi.ui.Component
XML:
<Image source="path/to/image"
// + properties from phi.ui.Component ( see phi.ui.Button )
// + events from phi.ui.Component
/>
Methods: setChecked, getChecked
setSource: img.setSource( path )
- Sets the URL of the image to load.
getSource: img.getSource()
- Return the image URL.
phi.ui.Label extends: phi.ui.Component
XML:
<Label text="true|false"
color="#FF0000"
fontSize="12"
// + properties from phi.ui.Component ( see phi.ui.Button )
// + events from phi.ui.Component />
Methods: setFontSize, setColor, setText, getText
setFontSize: lb.setFontSize( fontSize )
- Change text font size
setColor: lb.setColor( color )
- Change text color
setText: lb.setText( text )
- Change text
getText: lb.getText()
- Returns label text
phi.ui.TextInput extends: phi.ui.Component
XML:
<TextInput text="true|false"
color="#FF0000"
displayAsPassword="true|false"
// + properties from phi.ui.Component ( see phi.ui.Button )
onTextChange=""
onEnter=""
// + events from phi.ui.Component plus />
Methods: setText, setColor, displayAsPassword
Events: textChange, enter
setText: txtInput.setText( text )
- Sets input text
setColor: txtInput.setColor( color )
- Sets input text color
displayAsPassword: txtInput.displayAsPassword( true|false )
- Display input as password
phi.ui.Container extends: phi.ui.Component
Methods: addChild, addChildAt, moveChild, getChildAt, getChildIndex, lastChild, firstChild, removeChild, removeChildAt, hasChild, getChildren, removeAllChildren, createIterator
Events: childAdded, childRemoved, childrenCreated
addChild: c.addChild( uiComponent )
- Adds a child phi.ui.Component to this container
addChildAt: c.addChildAt( uiComponent, index )
- Adds a child phi.ui.Component to this container at a specific index
moveChild: c.moveChild( uiComponent, newIndex )
- Move child from current index to new index
getChildAt: c.getChildAt( index )
- Gets the nth child component
getChildIndex: c.getChildIndex( uiComponent )
- Gets the zero-based index of a specific child
lastChild: c.lastChild()
- Helper function, return container last child, it is the same as c.getChildren()[c.getChildren().length-1]
firstChild: c.firstChild()
- Helper function, return container first child, it is the same as c.getChildren()[0]
removeChild: c.removeChild( uiComponent )
- Removes a child phi.ui.Component from the child list of this Container.
removeChildAt: c.removeChildAt( inde )
- Removes a child phi.ui.Component from the child list of this Container at a specific index
removeAllChildren: c.removeAllChildren()
- Removes all children from the child list of this container
getChildren: c.getChildren()
- Returns all the container children.
createIterator: c.createIterator()
- This function is very useful to parse container children
Example:
// In this example we will hide all children
var iterator = c.createIterator();
while( iterator.next() )
iterator.current().setVisible( false );
phi.ui.CellBox extends: phi.ui.Container
Description: CellBox class is the base class used by phi.ui.HBox and phi.ui.VBox containers. The HTML element of this class is HTML Table. You cannot use this class in XML.
Methods: setChildVerticalAlign, setChildHorizontalAlign, setVerticalAlign, getVerticalAlign, setHorizontalAlign, getHorizontalAlign, setCellWidth, setCellHeight, setBorder, getBorder
setChildVerticalAlign: cellBox.setChildVerticalAlign( child, align )
- Sets vertical alignment for a specific child
setChildHorizontalAlign: cellBox.setChildHorizontalAlign( child, align )
- Sets horizontal alignment for a specific child
setVerticalAlign: cellBox.setVerticalAlign( align )
- Sets vertical alignment for all children plus the new ones that will be added to this container.
getVerticalAlign: cellBox.getVerticalAlign()
- Returns current vertical alignment
setHorizontalAlign: cellBox.setHorizontalAlign( align )
- Sets horizontal alignment for all children plus the new ones that will be added to this container.
getHorizontalAlign: cellBox.getHorizontalAlign( align )
- Returns current horizontal alignment
setCellWidth: cellBox.setCellWidth( trIndex, tdIndex, value )
- Sets cell width
setCellHeight: cellBox.setCellHeight( trIndex, tdIndex, value )
- Sets cell height
setBorder: cellBox.setBorder( value )
- Sets table border, this is good for debug
getBorder: cellBox.getBorder()
- Returns table border
phi.ui.HBox extends: phi.ui.CellBox
Description: The HBox container lays out its children in a single horizontal row.
XML:
<HBox gap=""
// Properties from phi.ui.CellBox
verticalAlign="top|middle|bottom"
horizontalAlign="left|center|right"
// Properties from phi.ui.Component
width=""
height=""
style=""
visible="true|false"
paddingLeft=""
paddingTop=""
paddingRight=""
paddingBottom="" />
Methods: setCellWidth, setCellHeight, setGap, getGap
setCellWidth: hBox.setCellWidth( index, value )
- Sets cell width
setCellHeight: hBox.setCellHeight( index, value )
- Sets cell height
setGap: hBox.setGap( value )
- This sets the size between children
getGap: hBox.getGap()
- Returns gap
phi.ui.VBox extends: phi.ui.CellBox
Description: The VBox container lays out its children in a single vertical column.
XML:
<VBox gap=""
// Properties from phi.ui.CellBox
verticalAlign="top|middle|bottom"
horizontalAlign="left|center|right"
// Properties from phi.ui.Component
width=""
height=""
style=""
visible="true|false"
paddingLeft=""
paddingTop=""
paddingRight=""
paddingBottom="" />
Methods: setCellWidth, setCellHeight, setGap, getGap
setCellWidth: vBox.setCellWidth( index, value )
- Sets cell width
setCellHeight: vBox.setCellHeight( index, value )
- Sets cell height
setGap: vBox.setGap( value )
- This sets the size between children
getGap: vBox.getGap()
- Return gap