Accessing databases with Hummingbird and scripting part I

Although Hummingbird is a powerful tool for creating content for the web, there was situations where it did not had a way to help the users. i mean to the following situation:

Suppose that you have some information stored in a server, this server is accessible for Hummingbird. you want that Hummingbird (HB) access that data in order to displaying on a page created with it, or may be you could want to get some data input from the users, and save the data entered for the users in the server.
The good news are that now HB allow you to accessing your own data stored in other servers.
HB works like a three layers architecture. watch the following image:

The above image show you the three layers that interacts in order to get or store some data on a backend (database) server. let me give you a little explanation of every of them:

1. Front end layer: this is web content (page) created with Hummingbird, it executes (run) on the client (your pc). The users interacts with it in order to get or store some kind of info from the server. The front end makes requests to the midleware passing it parameters (if necesary) in order to get or store some info from the backend.

2. Midleware layer: This acts like an intermediary between the front end and the back end, it receives the parameters from the front end, validating them, and processing the request making (if necesary) a midleware request to the backend. passing parameters (if necesary) to it., then it takes the response from the backend and prepares its response sending it to the front end. you must implement (programming) this layer, because only you know the way that the midleware will manage the data to (from) the backend server. This layer could be an asp.net app, a java app, or anything that could receive (send) remoting procedure calls (RPC).

3. Backend layer: tipically is the database logic, implemented in a database engine (sql server, my sql, oracle, etc.). When the midleware makes a request to the backend tipically it executes an stored procedure on the data base server, then the stored procedure (sp) gets the data from the database and returns them to the midleware (a request to get data), or saves some info on the server (a request to store data). You must implement this layer, let say creating the sp's, tables, and every thing necesary in order to the midleware can comunicates with the backend.

now i will show a sample that implements every one of the layers in order to make a simple database request. The request will return several rows from the database and HB will show this rows on a page in tabular way using a grid object (implemented like a widget).
For the sample we will use the following:
- For the front end we will use obviously HB.
- For the midleware we will use asp.net + fluorineFX, fluorineFX is a framework that allow to an asp.net application managing remoting procedure calls. For more info visit: http://www.fluorinefx.com/. you could use any other language supporting RPC.
- For the backend logic we will use sql server, but you could use any other database engine.

1. first we will create an HB page:
enter to HB using your account. I will use an account called database, so my first page created with this account will be called database1.
select the database1 page and press the button 'ir al diseñador' ('go to the designer' ) on the control panel.




now you are in the designer. So press the button that says 'texto' (text) to create a text object with the text 'get rows', i will use this like a button to be clicked in order to get the records, but you could use other object that responds to a click event:

Uploading a widget to the Hummingbird server

The next step is upload a widget to the HB server. i had called this widget hb_grid because it allow you to show records in a tabular way. You must upload the widget like any other widget, let say like an image, so first you must press the 'foto' (picture) button on the tools panel, and you will see:


then press the 'subir imagen' (upload image) button, you will be presented with a little window, then press the 'elejir archivos' (choose files) button and navigate to the folder where is located the swf for the widget, like showed on this image:


when you select the file for the widget you will see a button on the little window with the text 'upload', you must press on it in order to begin the upload of the widget.

When the upload is finished you must to return to the create image window and select the just uploaded widget, and press the aplicar (apply) button, like showed on this picture:



so now you will see a widget on your page that says grid widget:


This widget is visible only in desing mode, but in visit mode is invisible. we will use this widget to show the data base rows inside a grid (in tabular way).
Now we will write some scripts to get the data to be shown. go to the 'edicion' (edition) menu and choose the 'script' option. you will see the scripts window. there you must write an imports event with the following code:

import mx.controls.Alert; // used to display little messages on the page
import Connection; // needed to connect with the midleware
/*
next we create a connection object and store it in a global variable (con)
for later use
*/
global.con=page.newConnection();
// loading of the loadPolicy file in order to have acces to the remote call procedures
global.con.loadPolicyFile("http://alexaraya.cl/WebServPortalFlex/crossdomain.xml");
// open the connection to the midleware (made with asp.net)
global.con.openConnection("http://alexaraya.cl/WebServPortalFlex/Gateway.aspx");

/*
the nexts imports will allow to create a datagrid and the necesary columns to
present the data to the user
*/
import mx.controls.DataGrid;
import mx.controls.dataGridClasses.DataGridColumn;


Like showed on this pic:


Remember that the imports event is the first in executing when a page is loaded on the client, so the above code will be executed before any other code on the page.
sure you are asking you what is the policy file. it is a file that must be located on the same directory of the asp.net application in order to give access to our front end to the remote access procedures contained on the midleware. the policy file is simply an xml file containing the following:


this file must be created for you and located in the same folder like the asp.net application.

Now we write the logic for the 'get rows' button (the onClick event):

/* when the user press the "get rows" button we execute a remote
procedure called "obtenerPaginasUsuario" that returns all the pages of
a user, on this case the name of the user is jaime
if we get a positive response from the midleware the serverResponse event
will be triggered, and if there was an error the serverError event will be triggered
*/

global.con.call("WebServPortalFlex.servicios.obtenerPaginasUsuario","serverResponse","serverError","jaime");

like i will show you in the next post , 'WebServPortalFlex' is the nameSpace in the asp.net project where is the procedure to be executed, servicios is a classname in the same asp.net project and obtenerPaginasUsuario is the name of the remote procedure (function) to be executed.

The next picture shows the onClick event for the button:

now we write the script for the response event:

/*
this event is executed when the midleware returns info succefuly.
first we convert the records into an arrayCollection object that can be used
for the grid. the records returned from the midleware are in the result
parameter
*/
var registros=page.loadArrayCollection(result.Table.serverInfo);

/* we create a datagrid using the hb_grid widget contained in
the database1_2 object (an image object)
*/
var o=page.findObject2("/database1_2");
var dg=o.content.application.new_grid();
/* now we create the columns for the datagrid */
var columns=new Array();
var c1=new DataGridColumn();
c1.dataField="cod_pag";
c1.headerText="codigo pagina";
c1.editable=false;
c1.width=100;
columns.push(c1);
var c2=new DataGridColumn();
c2.dataField="titulo";
c2.headerText="titulo";
c2.editable=false;
c2.width=300;
columns.push(c2);
dg.columns=columns; // assign the columns to our new grid
// let know to the datagrid where are the data to be used
dg.dataProvider=registros;
/* adjust some properties like the position on the page for the grid,
row height, etc.
*/
dg.x=100;dg.y=100;dg.height=500;
dg.rowHeight=30;
dg.showHeaders=true;
/*put some styles for the grid like colors for the rows,
header colors, font , etc.
*/
dg.setStyle("alternatingItemColors", [0x9999cc, 0x9999ff]);
dg.setStyle("headerColors", [0x9999ff, 0xcccccc]);
dg.setStyle("color", 0x0B333C);
dg.setStyle("rollOverColor",0xcc3366);
dg.setStyle("selectionColor", 0xcc9900);
dg.setStyle("fontFamily", "Courier");
dg.setStyle("fontSize", 11);
dg.setStyle("horizontalGridLines", true);
dg.setStyle("verticalGridLineColor", 0xffffff);
// add the datagrid to the page in order to be visible to the user
page.content.addChild(dg);


this is showed on this picture:



the last step to end our HB page is write the script for the serverError event:

Alert.show("an error ocurred on the midleware"); // shows a message to the user


like showed on this image:



That's all, now we ended our front end. The next step is create the midleware (with asp.net) and the backend logic (with sql server). I will show you the way in the next post...

Collaborators

follows are the collaborators of the project. If you like the project and you think that you can help it in some way, only send me an email and tell me the way you can do it.

Alberto Nudman

Alberto holds a degree in Chemical Engineering from Universidad de Chile, but has worked for the last 8 years in fields related to IT and software development. Its primary interests include software usability, interface design, and systems administration. In his spare time he likes to play with his two children and play the cello.

Contact info:
LinkedIn

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.