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="" />

Methods: setText, getText

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.

HBox

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.

HBox

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