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:
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.
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.
Applies to
Text, image, video, remarks panel, panel.
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.
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:
Posts
No comments:
Post a Comment