Using an event script with differents components

There will be times when we will need that a group of components to share an event script because it could be easier to code in that way, allowing us to reduce the code and contributing to make it more understandable.

I was remembering for example when I was programming in visual basic and in that language I made use of a feature named "controls array", where a group of controls did share the same event code. This was very nice and i was thinking how to implement such a thing in Hummingbird, so I produced a simple and effective solution using regular expressions

I changed the script engine so that it now looks for an event script using regular expressions:

But ¿ what does this mean ?
it means: every time an user put the mouse pointer on a component (onRollOver Event) named samples14_1 or samples14_2 or samples14_3 or samples14_4 or samples14_5 then execute the following code associated to the event...
This will reduce the code needed and will make it easier to read.
Maybe you are asking yourself how will i know what object triggered and event ? that's simple. Every event's script receives a parameter called 'me', which is a reference to the object that triggered the event, and an 'id' parameter which is a string with the ID of the object.

have a nice day. :)

Some pics of la Serena

like you know, i am living on La Serena, Chile. This is a beautiful city, and for that reason i want to show you some pics of it.
When i am not coding or designing software i love to take a ride on my old car, swimming on the beach, watch the sunset, and eat some chinese food, because the life is not only work ;) . So if some day you travel to La Serena maybe we could meet you each other.

Improvements to the video component

i was thinking in possible improvements to the video component and i have finished the coding of the following features:

- now the video component has support for video with alpha channel: this allow you display video with transparent backgrounds. i think is a cool feature.

- i have added two new methods to the control:
autohide_controls (true/false): if you use this method with true, then when the user put the mouse pointer over the video component, the controls (play button, stop, etc.) will appear, and when the user moves the mouse pointer out of the video component the controls will disappear.
and when is used with false, the controls will be always visible.

show_controls(true/false): allows you hide or show the controls (play button, etc.).

- now the component shows the played time and the total time of the video.

FAQ for hummingbird

I was thinking that a faq (frequently asked questions) is a good way to respond some questions that you could have. So here is:

¿ what is hummingbird ?
Hummingbird is a powerful online cms (content management system)

¿ but what is a cms ?
in simple words a cms is a software that allows people to create and update a website easily. In the particular case of hummingbird this is a online cms because all the work is made only using a web browser, so you don’t need to install any other program on your pc.

¿ will I need to create an account to use it ?
yes, prior you can use hummingbird you will need to create an account, and then all the pages you create will be associated to your account.

¿ will I can to control who has access to my pages ?
yes, hummingbird allow you to control who have access to your pages, because on the control panel you can add users to a list associated to a page, with distinct types of permissions, and the users could be granted to visiting or copying a page. There is an especial user called anonymous who is interpreted like any user. So if you grant the anonymous user to visit a page any user could see it (visit the page)

¿ what is the copying permission ?
the copying permission allow you to grant an user to copy a page to his own account and then he or she could make changes to the copied page, adapting it to his/her necesities. This is the way the users can share their pages with others. In Hummingbird there is a searcher to find pages granted to be copied.

¿ has hummingbird a control panel ?
yes, it has a control panel. And it is the place where you create a page, delete a page or start the editor (for editing the page).
On the control panel you can see and delete your uploaded resources (images and videos). And you have access to your account info.

¿ could you tell me about the designer ?
The designer is the place where you will build your pages, this is a powerful wysiwyg editor, thinked to be easy to use and make you feel comfortable with it. This was possible because hummingbird uses an ajax type technology. That allow it Improving its communication speed, its interface usability (there is no need to load the whole page when accessing data on the server, eliminating so the unpleasant flickering that you see on common web pages), making you feel like if you are working with a desktop application.

¿ will use my web pages this ajax type technology with all the advantages that it provides ?
yes, every time someone visit a page, the page will use this technology when need it.

Ok, but tell me more about the editor.
Initially, when you creates a new page and you get into to the editor, you will have a blank web page, using the editor you will change your page putting on it differents components or widgets from a toolbox. The components could be superposed, you will can move o resize every component on the page very easily using the mouse, every component has a properties window associated to it, where you could change its properties like colors, text, image, transparency level, border lines, shadows, etc. etc.

¿ what are the built in components offered for the editor ?
Hummingbird has build in components that you can use to build your web pages. These are the video component (to show your videos), the text component (allow you to show text with differents font styles, colors, etc.), image (to show pictures on .jpg, .png with alpha channels, or animated flash images. you can make that a text or image works like hiperlink.
Other component you find is the comments panel, and the page panel. this last one is a powerful component because it allows you to embed a page inside other page. Every component has properties, methods and events associated to it, in such way that you can controll it programatically using a powerful scripting language.

¿ what can i do with the scripting language ?
with the script language you can control every properties offered for any widget on your web pages, for example the color, position, size, data inside the widgets. additionally you could call to the differents methods on a widget. The script language is very complete and we could write a complete book about it to show all the possibilities that it offers to you. inclusive you can draw shapes 'on the fly' with it.

¿ and if I need some widget not offered for hummingbird ?
Hummingbird has supports for others widgets, and you could make your own widgets for it. I think this is a very important feature because allows the modularity and allows make expandable the widgets offered for hummingbird.
In hummingbird a widget is not an isolated entity. A widget offers properties, methods, and will fires events in response to user interaction. the page's designer could write an script to respond to some events fired for a widget, he or her could control the widget programmatically, or a widget could communicates with other widgets or components on the page, or send/receive data from remote services. this is a very powerful concept. The widget´s designer will decide the way a widget communicates with others components.

¿ could be a hummingbird page embedded inside other page ?
of course, you can embeding in other page using for example a div or iframe tag.

¿ why the name hummingbird ?
I choose this name when i was taking a ride with my girlfriend on my old car. i was parked in front of a forrest, talking with her when did appear some of this birds, flying speedy, with beautiful colors, i was watching it for a while and then i was thinking of that the software must be like this birds, speedy, beautiful and plenty of color.

Looking for a partner

At this time, Hummingbird has come to the point where it's ready for testing with users, but i face some questions:

1. I need someone that supports the project with web hosting. The web hosting must have the following features:
- asp.net
- sql server 2000 or above
- high speed
- big disk space
if you take into account the resources that will be used on the hummingbird's site (videos for example) you will understand why the need for high speed communication, and for similar reasons you will understand why is needed a big disk space.

2. To hummingbird begins to fly, the project will need that any project needs: funds.
3. i have many ideas on my mind for hummingbird, but i will need graphics designers, programmers, someone to write the e-manuals, etc. for take this ideas to reality. but these professionals costs money.

At this moment i am looking for a partner ideally from USA, that help the project to get the following:
- review any mistake in the text of this blog.
- get a web hosting with the above features (this is a primary need at this time).
- must have a good contacts network, for a good network i mean the partner is on contact and be able to convince to important people of the software's market in USA about the importance of the project on such way we could get funds, support on marketing and diffusion of the project.
- the partner would be ideally someone who has participated sucefully on software ventures, self-motivated, with high communication skills, able 'to sell' the project.
- the partner will be in charge of the creation of the business plan.


¿ why could be interesting for someone invest on Chile ?
i want to invite you to read the following article on techcrunch:
investing on chile
and this other one:
startup chile


so ¿ what can i offers to you at this moment ?
on the economic nothing for the moment. But if the projects become a big success, you will share the profits with me.
I have been working on the project since January 2008 completely for free, i think this show in some way my compromise with it, and i am completely convinced that hummingbird has the needed to be a successful software, so if you are dispose to take risks like me. maybe you and i could make that hummingbird begins to fly and make the next company that rocks the internet.
If you have the needed, then send me a resume and tell me about you and your contacts network.

Enhanced widgets support

i had been working on the widgets support, enhancing the communication system and support between hummingbird and the widgets.
on the following picture you will see a new button on the tools window:

At 'design time' (in the designer), when you select a widget and press this button hummingbird will prompt the widget for a properties window, this window will be presented to the user and using this an user will change the properties values. So this is the way a widget will provide its configuration settings to an user, allowing set its appearance (or skin), its data source, and so on.
The configuration settings will be saved later when the designer save the page. At that moment hummingbird will ask the widget for its settings (in xml format) and it will take that info and will proceeds to store it on the server.

in a similar way when a page is loaded hummingbird will load the settings for every widget on the page and will send that info to the corresponding widget, so the widget is configurated.
On the following picture you will see a simplified schema showing this:

I have developed two widgets for testing, and i must to say it works great.

At this point i am very happy with the new feature, because it opens new possibilities for hummingbird and is very important to make it expandable.
In hummingbird a widget is not an isolated entity. A widget offers properties, methods, and will fires events in response to user interaction. the page's designer could write an script to respond to some events fired for a widget, he or her could control the widget programmatically, or a widget could communicates with other widgets or components on the page, or send/receive data from remote services. this is a very powerful concept. The widget´s designer will decide the way a widget communicates with others components.
It open too new business possibilities developing widgets for hummingbird. These widgets could be developed for some partner ? maybe. these are thoughts of mine.

Now supporting widgets

Widgets are embedded objects into a page, offering properties, methods and events to user of the widget. These objects are in the form of a image with swf extension, and in order to be used on to a page have to be upload it to the server like any common image (like it would be a .png for example), and then draw the widget on the page, and configure it like necessary, either using script code or using another way depending on the widget used (look the widget’s documentation for further details).

Why use widgets ?

The support of widgets offered for hummingbird, allows the expansion of the plataform and the modularity of it same, using widgets you only use the needed objects for the page you are working on, loading it dinamically, allowing you to keep the page size optimized.

What kind of funcionalities could be offered trough widgets ?

The widget's developers could create any kind of widgets offering a wide range of funcionalities of many types, for example a widget could have access to methods and properties of other objets on the page, could access data services on to a remote server, could show a window on the page, etc.

What way will be used the properties/methods in to a widget ?

The way you will use the properties, methods of a widget depends upon the widget you are using. But it could be either using the scripts code or through a configuration’s window provided for the widget itself (look the widget's documentation for further details).

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.

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….