Scripting Parte II

Ejemplo 2

En el ejemplo anterior hicimos nuestro primer script, ahora tomaremos ese ejemplo, y lo modificaremos para mostrar cómo hummingbird te permite animar objetos de una manera simple y potente. Primero que nada debes saber que hummingbrid incluye una herramienta de animación llamada TweenLite, esta es un tweener, la cual nos permite animar cualquier propiedad númerica de cualquier objeto usando interpolación. Primero debemos modificar el ejemplo anterior de la siguiente manera:

En el diseñador edita la página alex1 y agrega un componente de texto con el texto 'animate me' y con las coordenadas x e y tal cómo se muestra en la siguiente imagen:

El texto recién creado debe tener el nombre alex1_2 (recuerda que el sistema le asignará un nombre automaticamente), luego modifica la página de tal forma que tengas los eventos, tal cómo se muestra en las siguientes imágenes:

… Necesitamos la librería tweenlite, así que la incluimos en el evento imports.

... En el evento onCreated del objeto alex1_2 damos la posición inicial al texto. Nota el uso del parametro de evento me, el cual referencia al componente alex1_2.

...Por último modificamos el evento alex1_1_onClick , primero obetnemos una referencia al componente de texto que dice 'animate me', con esa referencia usamos tweenlite para animar la coordenada x del texto (usando su wrapper). Podríamos animar muchas propiedades al mismo tiempo usando la misma línea de código.

Guarda la página y ahora pruebala: abre otra pestaña o ventana en tú browser y escribe lo siguiente en la barra de direcciones: http://url/webdesigner/webdesigner.html?cp=alex1 , donde url es la url del servidor (reemplazalo con el que corresponda en tú caso). Presiona enter y el browser te debería mostrar tú página con los dos textos, haz click sobre el texto 'push me' y deberías ver cómo el texto 'animate me' se mueve suavemente de forma horizontal.

Ahora tienes una pequeña idea de la potencia de los scripts en Hummingbird. En los siguientes posts verás cómo usar las propiedades y métodos de los componentes para crear impresionantes 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 picture component which is a direct child of 3 (a panel)

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

Product Description

It consists of a software of the type CMS (content management system), which will be accessible across Internet and that will allow the users to design and to create, modern and attractive web sites, in a simple and elegant way, which will be able to be modified later with facility.

To achieve this, has been created a system consisting of a portal, in which the users registers, creating a user's account, with which later they can enter to the system, and create one or several web pages, which will be associated with the above mentioned account, the user can establish linkage (hiperlinks) between different pages, to give form to websites.
The way which a user creates a page, is by putting elements of software preprogrammed, named components, each of which presents a functionality clearly defined inside the web page. The above mentioned components will allow to the user to create a page and insert on it text, images, videos, enter comments, and to 'incrust' pages inside other pages.
Each of the components can be relocated in a completely flexible way (using the mouse) inside the page, also it is possible to personalize the appearance of the above mentioned components to modify his size, color, transparence level, etc, etc. (depending on the type of component).

To whom is orientated ?

To any company or person who has a need to publish content (text, images, videos, etc., etc) and put it at the disposal of a potential public across Internet. Although the software was designed and developed to be used by a massive public on Internet, it must be mentioned that it might be used also in a corporate Intranet.

Advantages with regard to similar products

The big majority of the web sites constructed with the CMS that exist at present are limited, difficult to create and to modify, and inefficient in the form of interaction with the user, because they are based on languages or technologies that executes the client’s logic on the server.
The software product on development presents one real change with regard to the software that exist at present and it possesses unbeatable advantages with regard to other CMS, due to the facility with the one that it is possible to create and to edit the web sites, which will have a professional appearance, not being necessary to be provided with personnel specializing in computation, in addition to the efficiency that presents in the form how the communication of information is realized across Internet (using the last technologies how for example AJAX). The previous features produces a big reduction in the necessary time to publish contents on the web sites developed with the system, which later will produce a considerable reduction of costs.



Following is the screenshots of the LightNet CMS portal project with a brief description of every one. There is too a video on youtube, where you can see it in action:

http://www.youtube.com/watch?v=wk3iyK357Cw


1. Main page:

Across this a user can identify on to the system and enter to it. It allows to create a new account, go to the control panel of the account, gain access to a searcher of pages, etc. it still has not been finished because are needed somes graphic designs to incorporate them as linkage into diverse topics of help.

2. Search screen:

It allows to looking for a page either for code of page, for key words, for category or user name. The searcher uses skills of search using a ‘text search engine ’. The result of the search appears on paginated form, for what the user has buttons ‘to go to the first page’, ‘to go to the last page ’, ‘previous page’ and ‘following page ’.

3. Control panel:

He has three tabs, so called pages, resources and account. The page tab shows all the pages created by the user, and allows him to create a new page, erase it, edit it in the designer, or see her in visit mode. Also it allows to establish the information of the page, how for example the title, key words, category (all this will serve for the search engine), and also it allows to establish the permissions of the page (who will be able to have access to the page and that will be able to do with it). There exists a special user called 'anonymous'. This user corresponds to any user who visits the page logged in or not.

4. The resources Tab:

This tab allows to see the resources (images and videos) that the user has upload to the server and to erase them if these are not being used by any page. If, a users tries to erase a resource, being used for a page (there are dependencies towards the resource), the system will refuse to erase and it will show the names of the pages that depend on the resource.

5. The account tab:

This tab shows the information of the user account and allows to modify it, or to erase it. Erasing the account, the system also will erase all the pages created by the user, all the resources (images and videos) that it has uploaded to the server and all the permissions that have been granted to the user to any page.

6. When a new page is created the system assigns to it a name, which is formed by the user's name more a correlative number, we call to this name ‘page code’ and it will serve to identify in unique form to the page. The following image shows how we select the page called 'jaime8' and how using the button 'go to designer' we will proceed to go to the designer’ to edit it.

7. In the image below we can appreciate how we will edit the page jaime8 with the designer, this page has just been created (with the control panel), and for that it is empty. The system offers a menu, and a panel of tools, by means of which will be possible to modify the page, adding to it the necessary components, with which the final user (visitor) will interact.

8. In the next image we can appreciate how, on having pressed the button background in the panel tools, we will be able to modify the background color establishing a gradient formed by two colors to user election.

9. Pressing the 'text' button on the tools panel, the system will shows us the screen across which we will be able to create a component of text type, and control the background color of the text, the transparence level of it (alpha level of the text background), also it is possible to put a border around it, fix the border thickness, x and y coordinates where is located the text, etc. The text editor allow us to control the type of source, its size, its color, alignment and even to put hyperlinks (linkage to other pages) inside the text. Also it is possible to assign a code of page to the component so that the whole text operates how a hyperlink, in such a way that, on having clicked on it, it skips to another page. Every component that we create can be dragged by using the mouse to locate it just in the part of the page that we wish. Also we will be able with the mouse to modify the dimensions (width and height) of every component, or to rotate it.

10. Pressing the button 'image' on the tools panel, we gain access to the window that allow us to create or to edit a component of type image. This one offer us the possibility of upload an image to the server (of jpg type, gif, png or swf). Also we will be able to assign a code of page to the component so that it acts how hiperlink to another page. and also we have the option to previsualize an image before adding it to the page.

11. In the next image we can see the window to upload files, which allow us upload several files simultaneously.

12. In the image below we see the window that allows us to assign a page code to the image so it has a hiperlink behavior, allowing to open (navigate) a different page, the target parameter indicates to the system where to show the new page (in the same window, in other one, etc.). Also, if the page to load needs identification to be able to see it, it will be possible to indicate the account to use with the values user and password. If these are not indicated, the system assumes that it must to load the page how anonymous user.

13. On having pressed the button video on the tools panel, we will see to appear the window that allows us to add or to edit a video, establishing the background color, the level of transparence, a button to upload files of video in flash video format (.flv), etc. The video component created will have the buttons play, stop, rewind, volume control and a bar of advance of the video.

14. Pressing the button remark on the tools panel we will be able to add or to edit a remark's panel, the remarks panel allows to see the comments deposited by the visitors in paginated form. In the window that appears will be possible to indicate the background color of the panel, its level of transparence (alpha), the text color, the row colors of the comments, a gradient for the title formed by two colors, etc. Also it will be possible to indicate the height of every comment's row, the maximum quantity of characters that a user will be able to deposit for comment (0 indicates without limit), the number of comments for page, the title of the panel, also if a user not logued in (anonymous) will be able to comment or not. The component will show the buttons to add comments, and to move from a page of comments to other one.

15. Pressing the panel button on the tools panel we will be able to add a component so called panel of page, which will allow us to show a page inside of the current page, that is to say this component acts how a container of page. We will be able to control the background color of the panel, his transparence level, put it a border, etc. Pressing the button 'assign' will appear a window in which we will indicate the page that will appear inside the panel, if it is necessary we will indicate to the system the account to be used to gain access to the contained page and will indicate the destination of the page, in case that the page inside the panel has one or more links, with this parameter we will determine where the page of the link will appear. Can it be on the father page of this panel (thisPage), another window (anotherPage), the same panel (thisPanel), or to leave that the page inside the panel determines the destination (auto) or in the last case load it in another panel inside the father page of the panel.

16. How was said early the components supports transparence levels and they can superpose on the others. Youcan see this in the next image.

17. In the menu options the user can gain access to the window options of the page, which shows the with and height of the page being edited, and allows to establish parameters like for example if it is necessary to show or not the menu bar when the users to visit it, if the page must be centered either vertical or horizontally in the browser, and if it is necessary to show the page's border.

18. Once a user end the page's editing, the page could be accessed (visualized) by any visitor, which will have to write in the browser address bar the direction (URL) of the system, followed by the parameter cp=page code to visit. In the above image it is possible to see in the address bar of the browser how to get access to the page jaime8, in this case the final url is: http://alex/webdesigner/webdesigner.html?cp=jaime8.

19. A few samples of pages developed with this system: