Thursday, January 14, 2010

Scripting Part II

Example 2


In the previous example we made our first script, now we will take that sample and we will modify it to show how hummingbird allow you to animate objects in a powerful way.First of all you must know that hummingbird includes a powerful animation tool called TweenLite, this is a tweener which allow us animate any numerical property of any object using interpolation.First we must modify the previous script in the following way:

In the designer edit the page alex1 and add a text component with the text ‘animate me’ and the coordinates x and y like show the following picture:



The just created text must have the name alex1_2 (remember that the system will assign it a name automatically), Then modify the page in such way you must have the events like is showed in the following pictures:


… we need the tweenlite library so include it in the imports event.


...In the onCreated event of the alex1_2 object we give initial position to the text. Note the use of the me event parameter, which reference to alex1_2 component.


...Last we modify the alex1_1_onClick event, first we get a reference to the text component that says ‘animate me’, with that reference we use tweenlite to animate the x coordinate of the text (using its wrapper). We could animate many properties at same time using the same code line.

Save the page and now test it: open another tab or window in your browser and write on the address:http://url/webdesigner/webdesigner.html?cp=alex1where url is the url to the server (replace with the corresponding in your case).Press enter and your browser must show you your page with the two texts, then click on the text ‘push me’ and then you must see how the text ‘animate me’ moves softly horizontally.
Now you have a very little idea of the power of scripting with Hummingbird.In the following posts you will see how to use the properties and methods of the components to make really amazings web sites.

Friday, January 1, 2010

Scripting Engine Part I




We are pleased to announce that hummingbird now supports scripting. Yes, now you can control your web pages using a powerful object orientated programming language through which you will have access a methods, properties, and events of every component on your web site, and many useful global functions


Introduction to the scripting language



The language supports sentences like the one encountered in AS3 or Javascript:

Import , for import libraries to use.


{ and } (curly braces to define a block of sentences)


var (to define variables)


for (to make loops)


break (to break loops)


continue (to jump to the next step in a loop)


if (for evaluate conditions)


while (to make loops)


function (allow you define your own functions)


return (to return from a function)


switch (to execute a sentences group upon a value)


// (comment the line)


/* and */ (comments lines between)


numerical operators like +,-,*,/


logical operators like &&, || , not (and, or and not respectively)

Accesing the scripts window



The script window is the place where you write your scripts. You can access it choosing a page in the control panel and pressing the button ‘ir al dise├▒ador’ you will go to the designer, and once you are in design mode go to menu ‘edicion’ and scripts option. Then you will see the following window:



On this window you will write all the scripts for your page.



As you can see there are two areas on this window. To the left you will see all the events that you write for every control on the page and clicking on any of these events you will see the corresponding script for that event.


At the beginning (when the page has no any one script) you will see this window in blank but pressing the button ‘agregar’ you will add a new blank row to the left panel, then you click on the row and will appears a cursor inside it, so you can edit it (you write the object_event name inside it), and then you write the corresponding script on the right panel. If you want to delete an event, you must choose first the event and then press the ‘borrar’ button.


About the hummingbird object architecture




Hummingbird organizes all the components (which are objects) in a hierarchical way (parent/child relationship). Is important to know the hierarchy of the page you are scripting to gain access to any object you want to manipulate with scripting.



Watch the following picture:






0 The root component is the page object (this is true for any page)


1 is a panel component which is behind (remember you can superpose components) the components numbered like 2, 3, 4, 5, 6, 7, etc.


2 is a text component which is a direct child of the page object


3 is a panel component which is a direct child of the page object


4 is a picture component which is a direct child of 3 (a panel)


5 is a text component which is a direct child of the page object


6 is a video component which is a direct child of the page object


7 is a remarks panel which is a direct child of the page object.


There are others components inside the page but with these we could have an idea about the hierarchy model.

So what if you want to use some property or method of the number 4 component (the picture component) ? . Well in this case you must gain access to the page object, then trough the page object get a reference to the panel (number 3 object), and with the panel reference get a reference to the picture.

So the question now is how do you get a reference to an object?. Watch the following script:


var o=page.findObject2("/jaime29_6/jaime30_5");

if (o!=null)

o.visible=false;


This script is inside an event, and in any event there is always a variable passed to the event named page which refers to the page object, the page object has a findObject2 method which returns a reference to an object. In this case we want a reference to the component jaime30_5 which is a direct child of jaime29_6 which is a direct child of the page object. Watch this path always must begin with /. The reference returned for findObject2 is saved in the o variable and in the followings lines of the script we use this variable (reference) to the object to change the visible property to false, making it disappear from the page. The object still exists and if you want to make it appears again only need to change the visible property to true again. Note that if findObject2 can’t find an object it returns null.

Now you know how access the components on your pages, but there is something you must know about the components and it say relation with the way hummirbird set the position and size of any component:

Every component (image, text, video, panel, remarks panel) that you put on a page is wrapped for an invisible component which give the position (x and y properties) and the size (width and height properties) to the component. So if you want to change any of these properties (x,y,width or height) you must reference this wrapper component. The way to make this is showed:


var o=page.findObject2("/jaime29_6/jaime30_5");

if (o!=null)

{

o.parent.y=6;

o.visible=true;

}


the first line get a reference to the jaime30_5 object the second line checks we found the object, the fourth line change the property y of the wrapper using the parent property of the component. So if you want to reference the wrapper object of a component use the parent property.


Events



An event is an action usually initiated for the user that has an associated code and that is executed automatically in response to that event.

Events could be executed when a user click on a component, after a double click on a component, roll over a component, etc.

Events could be executed also programmatically, like you will see after.

In Hummingbird when an event is to be executed the system passes certain parameters that could be useful for the associated script. In the following lines you will see the events names, when is executed and the parameter passed to it:
All the following events must be written with the syntax: object_eventname, where object is the id of the object and eventname is the name of the event.



onCreated

executed when:
when an object has been created on the page, like result of loading a page. This event is useful for initialize some properties of the created component.

parameters passed to the event:
page: reference to the page object.

me: reference to the object created.

global: reference the global object (explained after)

id: this is a string corresponding to the id of the component.

Applies to


Text, image, video, remarks panel, panel.


onDirectChildsCreated

executed when:
during a page load operation, when all the direct childs of a container (a page object or panel object) has been created on the page. This event is useful for initialize some properties of the created components.

parameters passed to the event:
page: reference to the page object.

me: reference to the object created.

global: reference the global object (explained after)

id: this is a string corresponding to the id of the component.

codPag: is a string corresponding to the name of the page just loaded.

Applies to

Page, panel.


onClick

executed when:
when the user click on the component.

parameters passed to the event:
page: reference to the page object.

me: reference to the object clicked.

global: reference the global object (explained after)

id: this is a string corresponding to the id of the component clicked.

Applies to:

Text, image, video, remarks panel, panel.


onDoubleClick

executed when:
when the user double click on the component.

parameters passed to the event:
page: reference to the page object.

me: reference to the object double clicked.

global: reference the global object (explained after)

id: this is a string corresponding to the id of the component double clicked.

Applies to:

Text, image, video, remarks panel, panel.



onRollOver

executed when:
when the user roll over the mouse pointer on the component.

parameters passed to the event:
page: reference to the page object.

me: reference to the object which the mouse is roll over.

global: reference the global object (explained after)

id: this is a string corresponding to the id of the component which the mouse is roll over.

Applies to:

Text, image, video, remarks panel, panel.



onRollOut

executed when:
when the user roll out the mouse pointer out the component.

parameters passed to the event:
page: reference to the page object.

me: reference to the object which the mouse is roll out.

global: reference the global object (explained after)

id: this is a string corresponding to the id of the component which the mouse is roll out.

Applies to:

Text, image, video, remarks panel, panel.



onPlay

executed when:
when a video begins to play because a user click the play video component button.

parameters passed to the event:
page: reference to the page object.

me: reference to the video object which is begin to play.

global: reference the global object (explained after)

id: this is a string corresponding to the id of the video component which is begin to play.

Applies to:

Video.



onStop

executed when:
when a video stop to play because a user click the stop video component button.

parameters passed to the event:
page: reference to the page object.

me: reference to the video object which is stop to play.

global: reference the global object (explained after)

id: this is a string corresponding to the id of the video component which is stop to play.

Applies to:

Video.



onRewind

executed when:
when a video rewind because a user click the rewind video component button.

parameters passed to the event:
page: reference to the page object.

me: reference to the video object which is rewind.

global: reference the global object (explained after)

id: this is a string corresponding to the id of the video component which is rewind.

Applies to:

Video.


onPlayEnd

executed when:
when a video reaches the end during playback.

parameters passed to the event:
page: reference to the page object.

me: reference to the video object which is ending to play.

global: reference the global object (explained after)

id: this is a string corresponding to the id of the video component.

Applies to:

Video.



onScroll

executed when:
when the user scrolls the page using either the horizontal or vertical scroll bar.

parameters passed to the event:
page: reference to the page object.

me: reference to object scrolled (in this case the page).

global: reference the global object (explained after)

id: this is a string corresponding to the id of the scrolled component.

Applies to:

Page.



onResize

executed when:

when the browser’s window is resized.

parameters passed to the event:
page: reference to the page object.

me: reference to the object resized (in this case the page).

global: reference the global object (explained after)

id: this is a string corresponding to the id of the resized component.

Applies to:

Page.


Special Events

There are some special events whose syntax is only the event name. These are:

imports

executed when:

only once when page load start.

parameters passed to the event:

page: reference to page object

global: reference to global object.

applies to:

none object

comments:

this event is intended to be used to indicate the libraries needed to use some classes.

functions

executed when:

only once when page load start.

parameters passed to the event:

page: reference to page object

global: reference to global object.

comments:

this event is intended to declare global user functions.

proxy

executed when:

depends the use you give to it.

parameters passed to the event:

page: reference the page.

global: reference the global object.

object: this is an custom object that you can pass to the event.



Example

Now we will make our first web page that includes scripting.We will suppose you have an account with username alex, you have created your first page with this account, so this page will have the name alex1. you must give the user ‘anonimo’ permissions to visit it. Now you must get into the designer for the page alex1, put a text component with the text ‘push me’. So you page will see like this:



you can see the name of the text we have just created is jaime1_1. Remember the components on a page always begin with the username, followed by the number of the page and followed for underscore plus the number of the component.Now is time for scripting. So go to the script window and press the ‘agregar’ button, then click on the first row of the left panel and write on it ‘imports’, then in the right panel write: mx.controls.Alert;Then you must press ‘agregar’ again, write on the second row of the left panel ‘alex1_1_onClick’, and in the right panel write:Alert.show(“Hello World”);

You must have in your page the following:



And on the second row:


Remember Save the page.Congratulations! You have written your first script. Now is time to test the page: open another tab or window in your browser and write on the address:http://url/webdesigner/webdesigner.html?cp=alex1where url is the url to the server (replace with the corresponding in your case).Press enter and your browser must show you your page with the text, then click on the text and then you must see this:



This post will be continue soon….