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

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 on line, 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 Hummingbird CMS 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 screen:

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 has a 3D rotating menu with five icons that will allow you access the different s screens .

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 (for testing) with this system: