tag:blogger.com,1999:blog-15206718596474453072024-03-13T22:42:07.619-07:00Hummingbird CMS-alexhttp://www.blogger.com/profile/03053409769511814909noreply@blogger.comBlogger22125tag:blogger.com,1999:blog-1520671859647445307.post-7124065293393599222014-10-11T13:29:00.000-07:002014-10-15T07:51:06.158-07:00<div style="text-align: center;">
<span style="font-size: large;">Beta test open </span></div>
<br />
If you want to try the new Hummingbird CMS send us an email trough the link: <a href="http://www.hummingbird-cms.com/webdesigner/index.html?cp=hummingbird1">http://www.hummingbird-cms.com/webdesigner/index.html?cp=hummingbird1</a> and tell us about you. Is completely free. If You have a blog include it in the message. we are accepting requests to participate in our beta. We have limited quotas.<br />
If you are selected we will send you an email with all the details, so you will can to try it.<br />
<br />
Thanks for your interest.<br />
The Hummingbird Team.alexhttp://www.blogger.com/profile/03053409769511814909noreply@blogger.com0tag:blogger.com,1999:blog-1520671859647445307.post-4865968378126276332012-02-24T06:00:00.005-08:002012-03-03T13:04:55.472-08:00New widget for HB<div style="text-align: justify;">There was a time since i wrote my last post, the reason is i wanted to take some time to rethink somethings about the way i did face the project, and take away of it for a while, and dedicate some time for me. I think is time to write a new post and on this time i will show a new HB widget consisting of a music mp3 player. You can see a picture of the component below:<br /></div><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/-KoaSZDihvwc/T0eZ-VTWYkI/AAAAAAAAAZY/cYRrMoN3Hn0/s1600/imagen107.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://1.bp.blogspot.com/-KoaSZDihvwc/T0eZ-VTWYkI/AAAAAAAAAZY/cYRrMoN3Hn0/s400/imagen107.jpg" alt="" id="BLOGGER_PHOTO_ID_5712703948492005954" border="0" /></a><br /><div style="text-align: justify;">You can see the player on the bottom (the black box). The player has the typical look, with play, stop, repeat, etc controls. The events offered for this widget are the ready and soundLoaded event, and the main methods are set_url,startPlay,setRepeat,stop. You can also change the appearance of the widget using style's properties. :)</div>alexhttp://www.blogger.com/profile/03053409769511814909noreply@blogger.com0tag:blogger.com,1999:blog-1520671859647445307.post-90922639683058949962011-06-03T14:16:00.000-07:002011-06-12T08:55:52.234-07:00Hummingbird ScreenshotsHere you can see some screenshots of Hummingbird:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/-JpCVbNGAkq8/TelZUpC1nfI/AAAAAAAAAWo/AfIubr99XGg/s1600/imagen96B.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://3.bp.blogspot.com/-JpCVbNGAkq8/TelZUpC1nfI/AAAAAAAAAWo/AfIubr99XGg/s400/imagen96B.jpg" alt="" id="BLOGGER_PHOTO_ID_5614116621644045810" border="0" /></a><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/-itQbsfjAFGw/TemqTES6-TI/AAAAAAAAAWw/QMvoytqxeyw/s1600/imagen98.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://2.bp.blogspot.com/-itQbsfjAFGw/TemqTES6-TI/AAAAAAAAAWw/QMvoytqxeyw/s400/imagen98.jpg" alt="" id="BLOGGER_PHOTO_ID_5614205655041374514" border="0" /></a><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/-WFXrUQGi3JM/TemsR472lbI/AAAAAAAAAW4/HGxl8sIG6Qc/s1600/imagen99.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://1.bp.blogspot.com/-WFXrUQGi3JM/TemsR472lbI/AAAAAAAAAW4/HGxl8sIG6Qc/s400/imagen99.jpg" alt="" id="BLOGGER_PHOTO_ID_5614207833835214258" border="0" /></a><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/-J66uTPyxJZU/Temvf9sq3OI/AAAAAAAAAXA/p2dLIqpySos/s1600/imagen100.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://1.bp.blogspot.com/-J66uTPyxJZU/Temvf9sq3OI/AAAAAAAAAXA/p2dLIqpySos/s400/imagen100.jpg" alt="" id="BLOGGER_PHOTO_ID_5614211374166760674" border="0" /></a><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/-UzWyvm720EY/TfKQUP-McwI/AAAAAAAAAYY/q39-dLl2wyM/s1600/imagen102C.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://1.bp.blogspot.com/-UzWyvm720EY/TfKQUP-McwI/AAAAAAAAAYY/q39-dLl2wyM/s400/imagen102C.jpg" alt="" id="BLOGGER_PHOTO_ID_5616710362843607810" border="0" /></a><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/-VUEkG9ESc8c/TfKQUQnRR7I/AAAAAAAAAYg/o8E9-N2Dpqc/s1600/imagen104C.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://3.bp.blogspot.com/-VUEkG9ESc8c/TfKQUQnRR7I/AAAAAAAAAYg/o8E9-N2Dpqc/s400/imagen104C.jpg" alt="" id="BLOGGER_PHOTO_ID_5616710363015890866" border="0" /></a><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/-FOvQEAiIG50/TfThXNYqtgI/AAAAAAAAAYw/PXnotyRNJaA/s1600/imagen106B.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://1.bp.blogspot.com/-FOvQEAiIG50/TfThXNYqtgI/AAAAAAAAAYw/PXnotyRNJaA/s400/imagen106B.jpg" alt="" id="BLOGGER_PHOTO_ID_5617362424084215298" border="0" /></a><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/-mwIbYdYI3OE/TfLZnAfMW7I/AAAAAAAAAYo/UxVQzjJzQ4M/s1600/imagen106.jpg"><br /></a>alexhttp://www.blogger.com/profile/03053409769511814909noreply@blogger.com0tag:blogger.com,1999:blog-1520671859647445307.post-17281044959188212312011-05-17T12:13:00.000-07:002014-11-19T07:49:41.632-08:00Creating Windows on HB<br />
<div style="text-align: justify;">
On this post i will show you the way you can create and manage windows on HB.</div>
<br />
Following is the image showing the HB page we will working on at design time:<br />
<br />
<a href="http://3.bp.blogspot.com/-KIx0bFgRF2w/TdLQdfmRdqI/AAAAAAAAAWE/8FZh5xYn0wU/s1600/imagen90.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" src="http://3.bp.blogspot.com/-KIx0bFgRF2w/TdLQdfmRdqI/AAAAAAAAAWE/8FZh5xYn0wU/s400/imagen90.jpg" id="BLOGGER_PHOTO_ID_5607773691146499746" style="cursor: pointer; display: block; height: 300px; margin: 0px auto 10px; text-align: center; width: 400px;" /></a><br />
<div style="text-align: justify;">
the components on the page are:<br />
<br />
<div style="text-align: justify;">
- database7_1, database7_2: are text, when the user click on 'create windows' we will create three windows, and when click on 'close all windows' all the windows opened will be closed.<br />
- database7_3: this widget will allow us to create windows. we will can move the windows on the page dragging with the mouse from the window's title area.<br />
- database7_4: we will use this widget to create a 'canvas' object, then we will load some HB page inside it and finally we will put the canvas inside the window.</div>
<br />
following is the page at visit time:<br />
<br />
<a href="http://4.bp.blogspot.com/-FNT-TLPeYLc/TdLSvsoxaqI/AAAAAAAAAWM/DesU2QSLbEc/s1600/imagen91.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" src="http://4.bp.blogspot.com/-FNT-TLPeYLc/TdLSvsoxaqI/AAAAAAAAAWM/DesU2QSLbEc/s400/imagen91.jpg" id="BLOGGER_PHOTO_ID_5607776202907544226" style="cursor: pointer; display: block; height: 300px; margin: 0px auto 10px; text-align: center; width: 400px;" /></a><br />
On the next image you can see how we can move the windows on the page using the mouse:<br />
<br />
<a href="http://3.bp.blogspot.com/-qJY1_J4P4sY/TdLUZqoEpfI/AAAAAAAAAWU/1PSiFNPcqTQ/s1600/imagen92.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" src="http://3.bp.blogspot.com/-qJY1_J4P4sY/TdLUZqoEpfI/AAAAAAAAAWU/1PSiFNPcqTQ/s400/imagen92.jpg" id="BLOGGER_PHOTO_ID_5607778023433872882" style="cursor: pointer; display: block; height: 300px; margin: 0px auto 10px; text-align: center; width: 400px;" /></a><br />
and next is the code for every event to do this page work:<br />
<br />
<span style="font-weight: bold;">database7_1_onClick</span> event:<br />
<br />
// here we create some windows using the widget<br />
<br />
var pagesToLoad=new Array();<br />
pagesToLoad.push('jaime2');<br />
pagesToLoad.push('jaime4');<br />
pagesToLoad.push('jaime5');<br />
<br />
var o=page.findObject2('/database7_3');<br />
if (o!=null)<br />
{<br />
for (var i = 0 ;i < pagesToLoad.length ; i++)<br />
{<br />
var w=o.content.application.new_window();<br />
w.title='Window '+(i+1);<br />
// si no especificamos el ancho y alto de la ventana, esta se ajustará a su contenido<br />
w.closeButton(true,w.constant_remove); // show close button<br />
// we want respond to some events<br />
w.addEvents('close|mouseDownOutside','|','win');<br />
// set some styles for the window<br />
w.setStyle('borderColor',0x0099CC);<br />
w.setStyle('borderThicknessLeft',3);<br />
w.setStyle('borderThicknessRight',3);<br />
// show the window<br />
o.content.application.windowManager.addPopUp(w,page,false);<br />
// center the window on the browser<br />
o.content.application.windowManager.centerPopUp(w);<br />
<br />
<br />
<br />
/*<br />
no we create a canvas object, then add the canvas<br />
to the window and load inside it an HB page<br />
*/<br />
var cw=page.findObject2('/database7_4');<br />
var canvas=cw.content.application.new_canvas();<br />
// si no especificamos el ancho y alto del canvas este se ajustara a su contenido<br />
if (canvas!=null)<br />
{<br />
w.addChild(canvas);<br />
page.cargar_pagina(canvas,pagesToLoad[i],'','');<br />
global.canvasWindow=canvas;<br />
}<br />
} // fin ciclo for<br />
<br />
}<pagestoload .length="" a="" add="" ajustara="" alto="" an="" ancho="" and="" bordercolor="" borderthicknessleft="" borderthicknessright="" browser="" button="" canvas="" canvaswindow="canvas;" center="" ciclo="" close="" contenido="" create="" cw="page.findObject2('/database7_4');" de="" del="" el="" especificamos="" esta="" este="" events="" fin="" for="" hb="" i="" if="" inside="" it="" la="" load="" mousedownoutside="" no="" on="" page="" respond="" se="" set="" show="" si="" some="" styles="" su="" the="" then="" title="Window " to="" var="" w="o.content.application.new_window();" want="" we="" win="" window="" y=""><br /><span style="font-weight: bold;"><br /><br />database7_2_onClick</span> event:<br /><br />// here we close all the popups<br />ac=page.getAllPopups();<br />if (ac.length>0)<br />{<br /> var o=page.findObject2('/database7_3');<br /> for (var i = 0 ; i < ac.length ; i++)<br /> o.content.application.windowManager.removePopUp(ac[i]);<br />} <ac .length="" i=""><br /><span style="font-weight: bold;"><br />win_windowClose</span> event:<br /><br />// a window is being closed for the user, you can do something here<br /><br /><span style="font-weight: bold;">win_windowMouseDownOutside</span> event:<br /><br />// the user clicks outside the window, you can do something here<br /><br /><br /></ac></pagestoload></div>
alexhttp://www.blogger.com/profile/03053409769511814909noreply@blogger.com0tag:blogger.com,1999:blog-1520671859647445307.post-52244320582447871402011-04-28T12:36:00.001-07:002011-04-29T07:36:53.782-07:00Communicating with data services of third party , YouTube sample - II<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/-bFCqHD3oYDU/TbnO31THOJI/AAAAAAAAAV8/378Xds5xQ9k/s1600/imagen89.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://2.bp.blogspot.com/-bFCqHD3oYDU/TbnO31THOJI/AAAAAAAAAV8/378Xds5xQ9k/s400/imagen89.jpg" alt="" id="BLOGGER_PHOTO_ID_5600735070207293586" border="0" /></a><br />This is the second part of the YouTube Sample, which shows you how to connect to YouTube's data services. Following is the code of the others script events:<br /><br /><span style="font-weight: bold;">database5_3_ready</span> event:<br /><br />// create textInput to get the search string from the user<br />var cw=page.findObject2("/database5_3");<br />var t=cw.content.application.new_textInput();<br />t.y=40;t.x=33;t.width=277;<br />// next line: when user press enter will trigger searchString_textInputEnter event<br />t.addEvents('enter','|','searchString')<br />page.content.addChild(t);<br />global.t=t; // saves reference to the textInput for use it in other events<br /><br /><br /><br />// CREATE AN IMAGE AND LOAD THE CHROMELESS PLAYER FROM YOUTUBE<br />var im=cw.content.application.new_image();<br />im.y=160;im.x=33;<br />im.width=399;im.height=377;<br />im.id="player";<br />im.addEvents("loadComplete",'|','videoPlayer');<br />im.source="http://www.youtube.com/apiplayer?version=3";<br />page.content.addChild(im);<br />global.vidPlayer=im; // saves reference to the player for use it in other events<br /><br />// create a vertical box which will be the video list container<br />create_vBox();<br />// create a vertical box which will be the comments list container<br />create_vBoxComments();<br /><br />setButtonMode(); // set button mode for some componentes<br /><br /><br /><span style="font-weight: bold;">videoPlayer_imageLoadComplete</span> event:<br /><br /><br />if (me.id="player")<br />{<br />// set a listener to 'watch' when the chromeless player contained<br />// inside this component is ready to interaction<br />me.content.addEventListener("onReady",page.g_scripts.listener);<br />}<br /><br /><br /><br /><span style="font-weight: bold;">listener</span> event:<br /><br />if (event.currentTarget==global.vidPlayer.content && event.type=='onReady')<br />{<br />/*<br />the chromeless video player triggered the onReadyEvent,<br />signaling is ready to be used<br />*/<br />var w=500;<br />var h=400; //w*3/4;<br />event.currentTarget.setSize(w, h);<br />}<br /><br /><span style="font-weight: bold;">searchString_textInputEnter</span> event:<br /><br />/*<br />here we send the search request to youtube<br />*/<br />searchVideos();<br /><br /><span style="font-weight: bold;">database5_1_onClick</span> event:<br /><br />/*<br />here we send the search request to youtube<br />*/<br />searchVideos();<br /><br /><br /><span style="font-weight: bold;">serverResponse</span> event:<br /><br /><br />// prepare some variables to store the video data<br />var videos=new ArrayCollection();<br />var video=null;<br /><br />// get some namespaces from the xml data<br /><br />var os = result.result.namespace("openSearch");//::totalResults;<br />global.totalResults=result.result.os::totalResults;<br /><br /><br />var ns= result.result.namespace("");<br />var gd = result.result.namespace("gd");<br />var media = result.result.namespace("media");<br />var yt = result.result.namespace("yt");<br /><br />var vList=null;<br />vList = result.result.ns::entry;<br /><br /><br />for each(var vElement in vList)<br />{<br /><br />video=new Object();<br />if (video!=null)<br />{<br />video.title = vElement.ns::title;<br />video.published = vElement.ns::published;<br />video.rating = Number(vElement.gd::rating.@average);<br />video.description = vElement.media::group.media::description;<br />video.keywords = vElement.media::group.media::keywords;<br />video.category = vElement.media::group.media::category;<br />video.thumbnail = vElement.media::group.media::thumbnail[0].@url;<br />video.duration = Number(vElement.media::group.yt::duration.@seconds);<br />//video.url = vElement.media::group.media::content.(@type == "application/x-shockwave-flash").@url;<br />video.url = vElement.media::group.media::content.(String(@url).substr(0,4) == "http").@url;<br />video.urlComments=vElement.gd::comments.gd::feedLink.@href;<br />//if(video.url != null && video.url.length > 0)<br />{<br /> videos.addItem(video);<br />} <br />}<br /><br />} // end of for each<br /><br />global.videos=videos; // save the videos in the global variable<br /><br />// now we build the videoList from the video list<br />buildVideoList();<br /><br />showOneOf();<br /><br /><br /><span style="font-weight: bold;">serverError</span> event:<br /><br />Alert.show('error calling video search');<br /><br /><br /><span style="font-weight: bold;">serverResponseComments</span> event:<br /><br /><br />// prepare some variables to store the comments<br />var comments=new ArrayCollection();<br />var comment=null;<br /><br />// get some namespaces from the xml data<br /><br />var os = result.result.namespace("openSearch");<br />global.totalResultsComments=result.result.os::totalResults;<br /><br />var ns= result.result.namespace("");<br /><br /><br />var vList=null;<br />vList = result.result.ns::entry;<br /><br /><br />for each(var vElement in vList)<br />{<br /><br />comment=new Object();<br />if (comment!=null)<br />{<br />comment.title = vElement.ns::title;<br />comment.published = vElement.ns::published;<br />comment.updated = vElement.ns::updated;<br />comment.content = vElement.ns::content;<br />comment.authorName = vElement.ns::author.ns::name;<br /><br />{<br /> comments.addItem(comment);<br />} <br />}<br /><br />} // end of for each<br /><br />global.comments=comments; // save the comments in the global variable<br /><br />// now we build the commentsList from the comments list<br />buildCommentsList();<br /><br />showOneOfComments();<br /><br /><br /><span style="font-weight: bold;">serverErrorComments</span> event:<br /><br />Alert.show('error calling comments for video');<br /><br /><br /><span style="font-weight: bold;">database5_5_onClick</span> event:<br /><br />// user click the play video button<br />if (global.vidPlayer==null)<br />{<br />// cromeless video player not instantiated<br />return;<br />}<br />global.vidPlayer.content.playVideo();<br /><br /><br /><span style="font-weight: bold;">database5_6_onClick</span> event:<br /><br />// user click the pause video button<br />if (global.vidPlayer==null)<br />{<br />// cromeless video player not instatiated<br />return;<br />}<br />global.vidPlayer.content.pauseVideo();<br /><br /><br /><span style="font-weight: bold;">database5_8_onClick</span> event:<br /><br />// user click the rewind video button<br />if (global.vidPlayer==null)<br />{<br />// cromeless video player not instatiated<br />return;<br />}<br />global.vidPlayer.content.seekTo(0, true);<br /><br /><br /><span style="font-weight: bold;">database5_9_onClick</span> event:<br /><br />// back the video list to the previous page<br />if (global.startIndex-global.maxResults>=1)<br />global.startIndex=global.startIndex-global.maxResults;<br />else<br />global.startIndex=1;<br /><br />searchVideos();<br /><br /><br /><span style="font-weight: bold;">database5_10_onClick</span> event:<br /><br />// forward the video list to the next page<br />if (global.startIndex+global.maxResults<=global.totalResults)<br />global.startIndex=global.startIndex+global.maxResults;<br />else<br />{<br />global.startIndex=global.totalResults-global.maxResults;<br />if (global.startIndex<1) global.startIndex=1;<br />}<br /><br />searchVideos();<br /><br /><span style="font-weight: bold;">database5_17_onClick</span> event:<br /><br />// back the comments list to the previous page<br />if (global.startIndexComments-global.maxResultsComments>=1)<br />global.startIndexComments=global.startIndexComments-global.maxResultsComments;<br />else<br />global.startIndexComments=1;<br /><br />searchComments();<br /><br /><br /><span style="font-weight: bold;">database5_18_onClick</span> event:<br /><br />// forward the video list to the next page<br />if (global.startIndexComments+global.maxResultsComments<=global.totalResultsComments)<br />global.startIndexComments=global.startIndexComments+global.maxResultsComments;<br />else<br />{<br />global.startIndexComments=global.totalResultsComments-global.maxResultsComments;<br />if (global.startIndexComments<1) global.startIndexComments=1;<br />}<br /><br />searchComments();<br /><br /><br /><span style="font-weight: bold;">videoList_canvasClick</span> event:<br /><br />if (me.id.indexOf('_')==-1) // name does not adjust to name convention of name_n<br />return;<br /><br />var arrName=me.id.split('_'); // separate name from number of component<br />var nameComponent=arrName[0];<br />var numComponent=arrName[1];<br /><br />if (nameComponent=='canvVideoList')<br />{<br />// the user click on a video of the video list, so we start to play the<br />// selected video in the chromeless player<br />if (global.vidPlayer==null)<br />{<br /> // cromeless video player not instatiated<br /> return;<br />}<br />global.vidPlayer.content.loadVideoByUrl(global.videos[numComponent].url);<br /><br />// set the title and description in the text above of the chromeless player<br />var t=page.findObject2("/database5_2");<br />if (t!=null)<br />{<br /> t.htmlText="<b>"+global.videos[numComponent].title+"</b>"+"\n"+global.videos[numComponent].description;<br />}<br /><br />// search and display the comments for this video<br />global.startIndexComments=1;<br />global.totalResultsComments=0;<br />global.urlComments=global.videos[numComponent].urlComments;<br />searchComments();<br />}<br /><br /><br /><span style="font-weight: bold;">videoList_canvasMouseWheel</span> event:<br /><br />// highlight the item of the video list where is the mouse pointer<br />if (global.lastCanvas!=null)<br />if (global.lastCanvas!=me)<br />{<br />global.lastCanvas.setStyle("backgroundColor", 0xffffff);<br />}<br /><br />me.setStyle("backgroundColor", 0xaaaaff);<br />global.lastCanvas=me;<br /><br /><br /><span style="font-weight: bold;">videoList_canvasRollOut</span> event:<br /><br />// restore the blank color of the item of the video list<br />me.setStyle("backgroundColor", 0xffffff);<br /><br /><br /><span style="font-weight: bold;">videoList_canvasRollOver</span> event:<br /><br />// highlight the item of the video list where is the mouse pointer<br />if (global.lastCanvas!=null)<br />if (global.lastCanvas!=me)<br />{<br />global.lastCanvas.setStyle("backgroundColor", 0xffffff);<br />}<br /><br />me.setStyle("backgroundColor", 0xaaaaff);<br />global.lastCanvas=me;<br /><br /><br /><span style="font-weight: bold;">commentsList_canvasClick</span> event:<br /><br />// do nothing (for the moment)<br /><br /><span style="font-weight: bold;">commentsList_canvasMouseWheel</span> event:<br /><br />// highlight the item of the comments list where is the mouse pointer<br />if (global.lastCanvasComments!=null)<br />if (global.lastCanvasComments!=me)<br />{<br /> global.lastCanvasComments.setStyle("backgroundColor", 0xffffff);<br />}<br /><br />me.setStyle("backgroundColor", 0xaaaaff);<br />global.lastCanvasComments=me;<br /><br /><br /><span style="font-weight: bold;">commentsList_canvasRollOut</span> event:<br /><br />// restore the blank color of the item of the comments list<br />me.setStyle("backgroundColor", 0xffffff);<br /><br /><br /><span style="font-weight: bold;">commentsList_canvasRollOver</span> event:<br /><br />// highlight the item of the comments list where is the mouse pointer<br />if (global.lastCanvasComments!=null)<br />if (global.lastCanvasComments!=me)<br />{<br /> global.lastCanvasComments.setStyle("backgroundColor", 0xffffff);<br />}<br /><br />me.setStyle("backgroundColor", 0xaaaaff);<br />global.lastCanvasComments=me;<br /><br /><br /><div style="text-align: justify;"><div style="text-align: justify;">That's all the events for the YouTube sample. You could enhanced the page adding many more controls to the video player, etc. Because with HB you can make that very easily.<br /><br />On this post you had learn how to connect to a third party data service, how to send and get data to/from the data service using the httpService object and how to create a user interface dynamically to show the data (on this case video data). You now could use this sample like a starting point to connect to others data services like FaceBook, Flickr, etc. :)<br /></div><br /><br /></div>alexhttp://www.blogger.com/profile/03053409769511814909noreply@blogger.com1tag:blogger.com,1999:blog-1520671859647445307.post-88865910352281303202011-04-18T14:25:00.000-07:002011-05-04T11:25:39.647-07:00Communicating with data services of third party , YouTube sample - I<div style="text-align: justify;">Hummingbird allow you communicate with external data services. you can do so, using the http services objects provided by HB. On this post i will show you how to communicate with the data services offered by Youtube, but you could adapt the sample to communicate with others services like the one offered for flickr, panoramio, facebook, etc.<br /></div>following are two images showing the HB page at design time, with the elements needed to do the sample:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/-HgUG5OwDPFw/TbeJ-8n9_pI/AAAAAAAAAVU/VyednxwjDAA/s1600/imagen84.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://2.bp.blogspot.com/-HgUG5OwDPFw/TbeJ-8n9_pI/AAAAAAAAAVU/VyednxwjDAA/s400/imagen84.jpg" alt="" id="BLOGGER_PHOTO_ID_5600096376177163922" border="0" /></a><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/-boZBvn7vQT0/TbeKVSUgOKI/AAAAAAAAAVc/jFI-hoUxsL0/s1600/imagen85.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://3.bp.blogspot.com/-boZBvn7vQT0/TbeKVSUgOKI/AAAAAAAAAVc/jFI-hoUxsL0/s400/imagen85.jpg" alt="" id="BLOGGER_PHOTO_ID_5600096759958223010" border="0" /></a><br /><br /><div style="text-align: justify;">The elements found on the page are:<br /><br />1. commonWidgets: this widget will allow us create the elements 3,5 and 9. <span style="font-weight: bold;">id: database5_3</span><br />2. search videos: is a text component, when the user click on it, access the youtube data services, and get a video list corresponding to the words in the element 3 (textInput). <span style="font-weight: bold;">id: database5_1</span><br />3. textInput: here you enter the words corresponding to the videos you want to get from youtube.<br />4. text: it show you the title and description of the video you are watching currently. <span style="font-weight: bold;">id: database5_2</span><br />5. video player: it is the chromeless video player provided by youtube. it allow us play streamed videos directly from the YouTube's servers.<br />6. play button: play the video. <span style="font-weight: bold;">id: database5_5</span><br />7. stop button: stop the video you are watching. <span style="font-weight: bold;">id: database5_6</span><br />8. rewind button: rewind the video. <span style="font-weight: bold;">id: database5_8</span><br />9. video list: this is an vBox component generated using the cwidgets, it shows you the video list corresponding to the videos that match your search criteria. it show you the videos in a paged way, and you can use the buttons below it to move between pages. When you click on a video on this list the video begins to play.<br />10. back video list: allow you get the previous video list page. <span style="font-weight: bold;">id: database5_9</span><br />11. forward video list: allow you get the next video list page. <span style="font-weight: bold;">id: database5_10</span><br />12. text: shows you the start and end videos showed on the video list, and the total of videos. <span style="font-weight: bold;">id: database5_12</span><br />13. comments list: this is an vBox component generated using the cwidgets, it shows you the comments list corresponding to the video that is being played. it show you the comments in a paged way, and you can use the buttons below it to move between pages.<br />14. back comments list: allow you get the previous comments list page. <span style="font-weight: bold;">id: database5_17</span><br />15. forward comments list: allow you get the next comments list page. <span style="font-weight: bold;">id: database5_18</span><div style="text-align: justify;">16. text: shows you the start and end comments showed on the comments list, and the total of comments. <span style="font-weight: bold;">id: database5_19</span></div><br />The next pictures show you the HB page in action (on visit mode):<br /></div><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/-76nB8bfLIHY/TbeLpG56T8I/AAAAAAAAAVk/rw4evhpob1k/s1600/imagen86.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://4.bp.blogspot.com/-76nB8bfLIHY/TbeLpG56T8I/AAAAAAAAAVk/rw4evhpob1k/s400/imagen86.jpg" alt="" id="BLOGGER_PHOTO_ID_5600098200002908098" border="0" /></a><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/-M0o5Vxnd1pM/TbeLpEAi7dI/AAAAAAAAAVs/5BmsiSZjS3M/s1600/imagen87.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://4.bp.blogspot.com/-M0o5Vxnd1pM/TbeLpEAi7dI/AAAAAAAAAVs/5BmsiSZjS3M/s400/imagen87.jpg" alt="" id="BLOGGER_PHOTO_ID_5600098199225429458" border="0" /></a><br /><div style="text-align: justify;">One of the things you must know when you try to use data services of third party is the way you will communicate with the data services and the format of the returned data. On this case we will get data from Youtube, so you will have to understand how works the YouTube API, so you must read this:<br /></div><br /><a href="http://code.google.com/apis/youtube/2.0/developers_guide_protocol.html">YouTube API protocol</a><br /><a href="http://code.google.com/apis/youtube/flash_api_reference.html">YouTube API player</a><br /><br /><div style="text-align: justify;">The above links will provide you with useful info in order to understand what we will do next.<br /><br />A first question you could be asking yourself is ¿ why use the YouTube's video player instead the HB video player ? Youtube don't allow you access flv videos directly, instead they provides two video players which allow us play the videos. Maybe by googling sometime you could find some hacks to access flv videos directly from YouTube, but there is not guarantee it keep working , because YouTube is constantly closing that hacks.<br /></div><br />Following you can see the scripts of the page in the scripts editor:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/-CVLN6CG3Vbs/TbhvSP2fKwI/AAAAAAAAAV0/3kZVZlJNgRc/s1600/imagen88.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://2.bp.blogspot.com/-CVLN6CG3Vbs/TbhvSP2fKwI/AAAAAAAAAV0/3kZVZlJNgRc/s400/imagen88.jpg" alt="" id="BLOGGER_PHOTO_ID_5600348495918607106" border="0" /></a><br />and next is the code of every event script:<br /><br /><span style="font-weight: bold;">imports</span> event:<br /><br />import mx.controls.Alert;<br />import mx.collections.ArrayCollection;<br /><br /><br />// create our webService object<br />global.serv=page.newHttpService();<br />global.serv.service.url="http://gdata.youtube.com/feeds/api/videos";<br />global.serv.service.resultFormat="e4x";<br />global.serv.service.method = "GET";<br /><br />// the next webservice will be used to retrieve the comments for the played video<br />global.servComments=page.newHttpService();<br />global.servComments.service.resultFormat="e4x";<br />global.servComments.service.method = "GET";<br /><br />/*<br />every time a search is made we will save<br />the results videos in the next variable<br />*/<br />global.videos=null;<br />// the next variable will be our video list component container<br />global.vb=null;<br />// the next variable will show us the last canvas of the video list that was higlighted<br />global.lastCanvas=null;<br />// the next 3 variables will be used to control the movement of the video list pages<br />global.startIndex=1;<br />global.maxResults=10;<br />global.totalResults=0; // when searching this will be filled with the total numbers of videos<br /><br /><br /><br />// the next 3 variables will be used to control the movement of the comments list pages<br />global.startIndexComments=1;<br />global.maxResultsComments=30;<br />global.totalResultsComments=0; // when searching this will be filled with the total numbers of comments for the selected video<br />// the next variable will save the comments for a video<br />global.comments=null;<br />// the next variable will be our comments list container<br />global.vbComments=null;<br />// the next variable will show us the last canvas of the comments list that was higlighted<br />global.lastCanvasComments=null;<br />// the next variable will save the url of the comments for the video being played<br />global.urlComments=null;<br /><br />// needed to use the chromeless player of youtube<br />page.allowDomain("www.youtube.com"); // this allows HB access the chromeless YouTube video player<br /><br />global.vidPlayer=null; // this will be the chromeless videoPlayer Object<br /><br /><span style="font-weight: bold;">functions</span> event:<br /><br /><br />function clearCommentsList()<br />{<br />if (global.vbComments!=null)<br /> global.vbComments.removeAllChildren();<br /><br /><br />}<br /><br /><br /><br />function buildCommentsList()<br />{<br />/*<br /> this function take the data of the comments and build a nice<br /> comments list<br />*/<br /><br />clearCommentsList();<br /><br />// get a reference to the cWidget<br />var cw=page.findObject2("/database5_3");<br /><br />// get a reference to the vertical box created<br />var vb=global.vbComments;<br />if (vb==null)<br />{<br /> Alert.show("vbox for comments list not created");<br /> return;<br />}<br /><br /><br />// loop over our comments list<br />for (var i = 0 ; i < global.comments.length ; i++)<br />{<br /> // this is the i-esimal comment of the list<br /><br /><br /> /* the data fields for a comment are:<br /> comment.title<br /> comment.published<br /> comment.updated<br /> comment.content<br /> comment.authorName<br /> */<br /><br /><br /><br /> // create a text object to show some text of the video<br /> var text=cw.content.application.new_text();<br /> text.y=6;text.x=4;<br /> text.width=vb.width-24;<br /> //text.height=100; // component will be autosized according content<br /> text.autoResize=true; <br /> text.htmlText="<b>TITLE: "+global.comments[i].title+"\nAUTHOR: "+global.comments[i].authorName+"</b>\n"+global.comments[i].content;<br /> text.setStyle("color", 0x000000);<br /> text.id="text"+i;<br /> //text.truncateToFit=true; // dont need truncateToFit<br /> //text.addEvents("click");<br /> text.toolTip=global.comments[i].content;<br /> text.mouseChildren=false;<br /><br /><br /><br /> // create a canvas an locate every above object inside it<br /> var can=cw.content.application.new_canvas();<br /> can.setStyle("backgroundColor", 0xffffff);<br /> can.setStyle("borderStyle", "solid");<br /> can.setStyle("borderColor", 0x000000);<br /> can.setStyle("borderThickness", 1);<br /> can.autoLayout=true;<br /> can.addChild(text);<br /><br /> //can.height=text.y+text.height+4; // canvas will be autoLayout<br /> //can.width=text.x+text.width+4; // canvas will be autoLayout<br /> can.id="canvCommentsList_"+i;<br />/*<br />next line: the events of the canvas (rollover,rollOut, etc.) will begin with commentsList prefix<br />*/<br /> can.addEvents("rollOver|rollOut|click|mouseWheel",'|','commentsList');<br /> can.hScrollPolicy("off");<br /> can.vScrollPolicy("off");<br /> can.buttonMode=true;<br /><br /> // add the canvas with its childrens to the container vBox<br /> vb.addChild(can);<br /><br />}<br /><br />} // end of function buildCommentsList<br /><global.comments.length;i++) this="" is="" esimal="" list="" data="" fields="" for="" comment="" title="" published="" updated="" authorname="" create="" a="" object="" to="" show="" some="" of="" the="" video="" var="" text="" y="6;text.x=4;" width="vb.width-24;" height="100;" component="" will="" be="" autosized="" according="" content="" autoresize="true;" htmltext="<b>TITLE: "><br /><br /><br /><br />function showOneOfComments()<br />{<br /> // set the a message like this: 1-10 of 123<br /> var c=page.findObject2("/database5_19");<br /> if (c!=null)<br /> {<br /> c.text=global.startIndexComments+"-"+(global.startIndexComments+global.maxResultsComments-1)+" of "+global.totalResultsComments;<br /> }<br />}<br /><br /><br />function searchComments()<br />{<br />// this function search for the comments of a video<br />if (global.urlComments==null)<br /> return;<br /><br />var startIndex=global.startIndexComments;<br />var maxResults=global.maxResultsComments;<br /><br />global.servComments.service.url=global.urlComments;<br />var params=new Object();<br />params["max-results"]=maxResults;<br />params["start-index"]=startIndex;<br /><br />global.servComments.call(params,"serverResponseComments","serverErrorComments");<br /><br />}<br /><br />function create_vBoxComments()<br />{<br />var cw=page.findObject2("/database5_3");<br /><br />// creates a vBox which will be the container for the comments list<br />var vb=cw.content.application.new_vBox();<br />// set styles for vBox<br />vb.setStyle("borderStyle", "solid");<br />vb.setStyle("borderColor", 0x000000);<br />vb.setStyle("borderThickness", 1);<br />vb.setStyle("verticalGap", 0); // vertical space between childrens<br /><br />vb.height=473;<br />vb.width=397;<br />vb.x=34;vb.y=544;<br />vb.setStyle("backgroundColor", 0xffffff);<br />page.content.addChild(vb);<br />global.vbComments=vb;<br /><br />} // end of function vBoxComments<br /><br /><br /><br />function setButtonMode()<br />{<br />// set buttonMode for search videos button<br />var pb=page.findObject2("/database5_1");<br />pb.buttonMode=true;<br />pb.mouseChildren=false; // this is a text so we need this too<br /><br />// set buttonMode for the player buttons (play,stop,rewind)<br />var pb=page.findObject2("/database5_5");<br />pb.buttonMode=true;<br />var pb=page.findObject2("/database5_6");<br />pb.buttonMode=true;<br />var pb=page.findObject2("/database5_8");<br />pb.buttonMode=true;<br /><br />// set button mode for videolist buttons (back video list,forward video list)<br />var pb=page.findObject2("/database5_9");<br />pb.buttonMode=true;<br />var pb=page.findObject2("/database5_10");<br />pb.buttonMode=true;<br /><br />// set button mode for commentslist buttons (back comments list,forward comments list)<br />var pb=page.findObject2("/database5_17");<br />pb.buttonMode=true;<br />var pb=page.findObject2("/database5_18");<br />pb.buttonMode=true;<br /><br />}<br /><br />function showOneOf()<br />{<br /> // set the a message like this: 1-10 of 32456<br /> var c=page.findObject2("/database5_12");<br /> if (c!=null)<br /> {<br /> c.text=global.startIndex+"-"+(global.startIndex+global.maxResults-1)+" of "+global.totalResults;<br /> }<br />}<br /><br /><br />function searchVideos()<br />{<br />/*<br /> here we send the search request to youtube<br />*/<br /><br />//Alert.show(global.serv);<br /><br />var searchString=global.t.text;<br />var startIndex=global.startIndex;<br />var maxResults=global.maxResults;<br /><br />//global.serv.service.url=global.serv.service.url + "?vq=" + searchString + "&max-results=10";<br />//global.serv.call(null,"serverResponse","serverError");<br /><br />var params=new Object();<br />params["vq"]=searchString;<br />params["max-results"]=maxResults;<br />params["format"]=5; // check this video format<br />params["start-index"]=startIndex;<br />global.serv.call(params,"serverResponse","serverError");<br /><br />} // end of search videos function<br /><br /><br />function create_vBox()<br />{<br />var cw=page.findObject2("/database5_3");<br /><br />// creates a vBox which will be the container for the video list<br />var vb=cw.content.application.new_vBox();<br />// set styles for vBox<br />vb.setStyle("borderStyle", "solid");<br />vb.setStyle("borderColor", 0x000000);<br />vb.setStyle("borderThickness", 1);<br />vb.setStyle("verticalGap", 1); // vertical space between childrens<br /><br />vb.height=919;<br />vb.width=430;<br />vb.x=463;vb.y=97;<br />vb.setStyle("backgroundColor", 0xffffff);<br />page.content.addChild(vb);<br />global.vb=vb;<br /><br /><br />} // end of function create_vBox<br /><br /><br />function clearVideoList()<br />{<br />if (global.vb!=null)<br /> global.vb.removeAllChildren();<br /><br /><br />}<br /><br /><br />function buildVideoList()<br />{<br />/*<br /> this function take the data of the videos and build a nice<br /> video list<br />*/<br /><br />clearVideoList();<br /><br />// get a reference to the cWidget<br />var cw=page.findObject2("/database5_3");<br /><br />// get a reference to the vertical box created<br />var vb=global.vb;<br />if (vb==null)<br />{<br /> Alert.show("vbox for video list not created");<br /> return;<br />}<br /><br />// loop over our video list<br />for (var i=0; i < global.videos.length ; i++)<br />{<br /> // this is the i-esimal video of the list<br /><br /> // creates an image object to show a thumbnail for the video<br /> var im=cw.content.application.new_image();<br /> im.source=global.videos[i].thumbnail;<br /> im.id="im"+i;<br /> //im.addEvents("click");<br /> im.y=6;im.x=4;<br /> im.height=150;im.width=150;<br /><br /> // create a text object to show some text of the video<br /> var text=cw.content.application.new_text();<br /> text.htmlText="<b>"+global.videos[i].title+"</b>"+"\n"+global.videos[i].description;<br /> text.y=im.y;text.x=im.x+im.width+2;<br /> text.height=100;<br /> text.width=250;<br /> text.setStyle("color", 0x000000);<br /> text.id="text"+i;<br /> text.truncateToFit=true;<br /> //text.addEvents("click");<br /> text.toolTip=global.videos[i].title+"\n"+global.videos[i].description;<br /> text.mouseChildren=false;<br /><br /> /*<br /> // create a play button<br /> var but=cw.content.application.new_button();<br /> but.label="play";<br /> but.height=15;<br /> but.x=90;but.y=140;<br /> but.id="button"+i;<br /> but.visible=false;<br /> but.addEvents("click");<br /> but.data=i;<br /> */<br /><br /> // create a canvas an locate every above object inside it<br /> var can=cw.content.application.new_canvas();<br /> can.setStyle("backgroundColor", 0xffffff);<br /> can.setStyle("borderStyle", "none");<br /> can.setStyle("borderColor", 0x000000);<br /> can.setStyle("borderThickness", 1);<br /> can.addChild(im);<br /> //can.addChild(but); // si el boton es agregado despues del text inhibe el funcionamiento de los hyperlinks.<br /> can.addChild(text);<br /><br /> can.height=im.y+im.height-30;<br /> can.width=text.x+text.width+4;<br /> can.id="canvVideoList_"+i;<br /></global.comments.length;i++)>// next line: the events of the canvas (rollover,rollOut, etc.) will begin with videoList prefix<br /><global.comments.length;i++) this="" is="" esimal="" list="" data="" fields="" for="" comment="" title="" published="" updated="" authorname="" create="" a="" object="" to="" show="" some="" of="" the="" video="" var="" text="" y="6;text.x=4;" width="vb.width-24;" height="100;" component="" will="" be="" autosized="" according="" content="" autoresize="true;" htmltext="<b>TITLE: "> can.addEvents("rollOver|rollOut|click|mouseWheel",'|','videoList');<br /> can.hScrollPolicy("off");<br /> can.vScrollPolicy("off");<br /> can.buttonMode=true;<br /><br /> // add the canvas with its childrens to the container vBox<br /> vb.addChild(can);<br />}<br /><br /><br />} // end of function buildVideoList<global.videos.length;i++) this="" is="" esimal="" list="" creates="" an="" image="" thumbnail="" for="" im="cw.content.application.new_image();" source="global.videos[i].thumbnail;" id="im" click="" y="6;im.x=4;" height="150;im.width=150;" create="" a="" object="" to="" show="" some="" of="" the="" video="" var="" text="" htmltext="<b>"><br /><br /><br /></global.videos.length;i++)></global.comments.length;i++)>alexhttp://www.blogger.com/profile/03053409769511814909noreply@blogger.com0tag:blogger.com,1999:blog-1520671859647445307.post-46590370898072124712011-03-25T08:02:00.000-07:002011-04-11T20:25:16.596-07:00Creating dynamically user interfaces with the cWidgets widget<div style="text-align: justify;">This post will show you: how to create dynamically user's interfaces using the cWidgets widget. This widget will let you create various different widgets like text inputs, buttons, combo boxes , check boxes, option buttons, radio buttons, etc.<br /></div><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/-hSG6DMamExQ/TZ9fPa9ymSI/AAAAAAAAAUE/acXmyWgY1kY/s1600/imagen72.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://1.bp.blogspot.com/-hSG6DMamExQ/TZ9fPa9ymSI/AAAAAAAAAUE/acXmyWgY1kY/s400/imagen72.jpg" alt="" id="BLOGGER_PHOTO_ID_5593293980758612258" border="0" /></a><br /><div style="text-align: justify;">The first step to use the cWidgets widget is ensure it is in the HB server. for more info about this read the post titled 'accessing databases with Hummingbird and scripting, part I', section 'uploading a widget to the hummingbird server'.<br />The cWidgets is visible only at design time.<br />On this case the page we are working on has the name database4. following is at design time:<br /></div><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/-xVyw41zeFoQ/TaCq_2Y_4QI/AAAAAAAAAUM/CcQcUMbvAig/s1600/imagen74.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://1.bp.blogspot.com/-xVyw41zeFoQ/TaCq_2Y_4QI/AAAAAAAAAUM/CcQcUMbvAig/s400/imagen74.jpg" alt="" id="BLOGGER_PHOTO_ID_5593658751103000834" border="0" /></a><br /><div style="text-align: justify;">database4_1 corresponds to the cWidget and database4_2 is a panel component. The code for the different events next:<br /></div><br /><span style="font-weight: bold;">imports </span>event<span style="font-weight: bold;">:<br /><br /></span>import mx.collections.ArrayCollection; // we need this to use ArrayCollections<br />import mx.controls.Alert; // needed if we want to show messages alerts<br /><br />/*<br />we will use the next variable to syncronize the creation of<br />the widget cWidget in database4_1 with the creation of<br />the panel database4_2<br />*/<br />global.flag=0; // this variable will allow us to detect when the widget and the panel are created<br /><br /><br />// The next are needed for communication with the midleware<br />import Connection; // needed to connect with the midleware<br />/*<br />next we create an connection object and stored it in a global variable (con)<br />for later use<br />*/<br />global.con=page.newConnection();<br />// loading of the loadPolicy file in order to have acces to the remote call procedures<br />global.con.loadPolicyFile("http://alex.cl/WebServPortalFlex/crossdomain.xml");<br />// open the connection to the midleware (made with asp.net)<br />global.con.openConnection("http://alex.cl/WebServPortalFlex/Gateway.aspx");<br /><br /><br /><span style="font-weight: bold;">database4_1_ready</span> event:<br /><br />global.flag++;<br />if (global.flag==2) // the widget and the panel are ready, so we create our interface<br />create_interface();<br /><br /><span style="font-weight: bold;">database4_2_onCreated</span> event:<br /><br />global.flag++;<br />if (global.flag==2) // the widget and the panel are ready, so we create our interface<br />create_interface();<br /><br /><span style="font-weight: bold;">functions</span> event:<br /><br />function create_interface()<br />{<br />/*<br />this function create our interface dynamically<br />*/<br /><br />// get a reference to the cWidget<br />var o=page.findObject2("/database4_1");<br />if (o!=null)<br />{<br />// use the cWidget reference to create some objects<br /><br />// create label 'name' and a textInput<br />var l1=o.content.application.new_label();<br />l1.text='Name';l1.x=10;l1.y=10;<br /><br />var t1=o.content.application.new_textInput();<br />t1.x=60;t1.y=10;t1.width=150;<br /><br />// create label 'email' and a textInput<br />var l2=o.content.application.new_label();<br />l2.text='Email';l2.x=10;l2.y=40;<br /><br />var t2=o.content.application.new_textInput();<br />t2.x=60;t2.y=40;t2.width=150;<br /><br />// create label 'subject' and a textInput<br />var l3=o.content.application.new_label();<br />l3.text='Subject';l3.x=10;l3.y=70;<br /><br />var t3=o.content.application.new_textInput();<br />t3.x=60;t3.y=70;t3.width=150;<br /><br />// create label 'recipient' and a comboBox<br />var l4=o.content.application.new_label();<br />l4.text="Recipient";l4.x=10;l4.y=110;<br /><br />var c1=o.content.application.new_comboBox();<br />c1.editable=false;<br />c1.x=70;c1.y=110<br />var dataP=new ArrayCollection();<br />dataP.addItem({label:'General',data:'0'});<br />dataP.addItem({label:'Clients',data:'1'});<br />dataP.addItem({label:'IT dept.',data:'2'});<br />c1.dataProvider=dataP;<br />c1.addEvents("change");<br />c1.toolTip='select the recipient';<br />c1.height=20;<br />// apply some styles to the combo<br /><br />c1.setStyle("cornerRadius", 4);<br />c1.setStyle("selectionColor", 0xffcc99);<br />c1.setStyle("rollOverColor", 0xffcc66);<br /><br /><br />//pa.addChild(o.content.application.new_checkBox());<br /><br />// create textArea for the message<br />var t4=o.content.application.new_textArea();<br />t4.x=10;t4.y=140;t4.width=200;t4.height=100;<br /><br />// create a 'send' button<br />var b1=o.content.application.new_button();<br />b1.label="Send";<br />b1.x=10;b1.y=260;<br />b1.toolTip='press this button to send the message';<br />b1.id="send";<br />b1.addEvents("click");<br /><br />// create a 'clear' button<br />var b2=o.content.application.new_button();<br />b2.label="Clear";<br />b2.x=100;b2.y=260;<br />b2.toolTip='press this button to clear all the data';<br />b2.id="clear";<br />b2.addEvents("click");<br /><br />// we will add the above objects inside a panel<br />// we get a reference to the panel<br />var pa=page.findObject2("/database4_2");<br />if (pa!=null)<br />{<br /> // now we add the just created objects to the panel<br /> pa.addChild(l1);<br /> pa.addChild(l2);<br /> pa.addChild(l3);<br /><br /> pa.addChild(t1);<br /> pa.addChild(t2);<br /> pa.addChild(t3);<br /> pa.addChild(l4);<br /> pa.addChild(c1);<br /> pa.addChild(t4);<br /><br /><br /> pa.addChild(b1);<br /> pa.addChild(b2);<br /><br /> /*<br />save references to texinputs, combobox and textarea into<br />global variables for use in others events<br />*/<br /> global.t1=t1;<br /> global.t2=t2;<br /> global.t3=t3;<br /> global.c1=c1;<br /> global.t4=t4;<br /><br />}<br /><br />}<br /><br /><br />} // end of function create_interface<br /><br /><br /><div style="text-align: justify;">On the above script you must notice the line where i put an id to the buttons and the line using the addEvents method. These lines will allow us work with the click events of the both buttons in order to detect when the user click the 'send' or 'clear' button, like you will see later.<br /><br /></div>These are all our events for the moment. you can see them on the scripts window next:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/-vGaY4g6WGDE/TaCvBcxPPcI/AAAAAAAAAUU/5r-089ehLcA/s1600/imagen75.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://3.bp.blogspot.com/-vGaY4g6WGDE/TaCvBcxPPcI/AAAAAAAAAUU/5r-089ehLcA/s400/imagen75.jpg" alt="" id="BLOGGER_PHOTO_ID_5593663176631598530" border="0" /></a><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/-15KK5jA5ocg/TaCvIm1NAEI/AAAAAAAAAUc/bf_qK2IpVOs/s1600/imagen76.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://2.bp.blogspot.com/-15KK5jA5ocg/TaCvIm1NAEI/AAAAAAAAAUc/bf_qK2IpVOs/s400/imagen76.jpg" alt="" id="BLOGGER_PHOTO_ID_5593663299591667778" border="0" /></a><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/-zMThceV1et0/TaCvPfaZSzI/AAAAAAAAAUk/KVMoHS464vc/s1600/imagen77.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://1.bp.blogspot.com/-zMThceV1et0/TaCvPfaZSzI/AAAAAAAAAUk/KVMoHS464vc/s400/imagen77.jpg" alt="" id="BLOGGER_PHOTO_ID_5593663417859263282" border="0" /></a><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/-xjL30CN-jJ0/TaCvVBOUgzI/AAAAAAAAAUs/kM_-aa9fr2w/s1600/imagen78.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://3.bp.blogspot.com/-xjL30CN-jJ0/TaCvVBOUgzI/AAAAAAAAAUs/kM_-aa9fr2w/s400/imagen78.jpg" alt="" id="BLOGGER_PHOTO_ID_5593663512834769714" border="0" /></a><br /><span style="font-weight: bold;"><br /></span><div style="text-align: justify;"><span>At this</span><span> point you will have the interface, but it don't make anything when the user press the buttons, for that you will need add the next event:</span><br /></div><span><br /><span style="font-weight: bold;">database4_1_buttonClick</span> event:<br /><br />/*<br />this event script will be called for all the click events of the<br />buttons created with the cWidget database4_1<br />you can identify every button for its id property like showed below<br />*/<br /><br />switch(me.id)<br />{<br />case 'send':<br />// send button pressed<br /><br />var name=global.t1.text;<br />var email=global.t2.text;<br />var subject=global.t3.text;<br />var recipient=global.c1.selectedLabel;<br />var message=global.t4.text;<br /><br />// you must validate the data according some criteria<br /><br />// after validation you proceed to send the message<br />global.con.call("WebServPortalFlex.servicios.sendMail","serverResponse","serverError",name,email,subject,recipient,message);<br />break;<br />case 'clear':<br />// clear button pressed<br />global.t1.text="";<br />global.t2.text="";<br />global.t3.text=""<br />global.c1.selectedIndex=0;<br />global.t4.text="";<br />break;<br />}<br /><br /><span style="font-weight: bold;">serverResponse</span> event:<br /><br />Alert.message("your message was sended");<br /><br /><span style="font-weight: bold;">serverError</span> event:<br /><br />Alert.message("there was an error trying to send your message");<br /><br /><br /></span><div style="text-align: justify;"><span>On the sample showed on this post you must create the midleware code that receive the data from the HB page and send the email, using (on this case) asp.net. if you need more info about creating the midleware layer with asp.net read the post titled "</span><span>Accessing databases with hummingbird and scripting part II".</span><br /><span>A nice thing about locate the interface inside the panel is that you can move the panel with the mouse on the designer, in order to locate all the interface inside it where you want. :)</span><br /></div><span><br /><br /></span>alexhttp://www.blogger.com/profile/03053409769511814909noreply@blogger.com0tag:blogger.com,1999:blog-1520671859647445307.post-13287079497229240912011-03-09T16:25:00.000-08:002011-04-04T09:55:27.257-07:00Creating menus with the hb_menuBar widgetThis post will show you: how to create dinamically menus using the hb_menuBar widget like showed on the next picture:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/-osn9B7rHmBg/TYyvALjXnII/AAAAAAAAASs/1QET7mUrWNE/s1600/imagen61.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://2.bp.blogspot.com/-osn9B7rHmBg/TYyvALjXnII/AAAAAAAAASs/1QET7mUrWNE/s400/imagen61.jpg" alt="" id="BLOGGER_PHOTO_ID_5588033655295941762" border="0" /></a><br /><div style="text-align: justify;">The hb_menuBar widget let you create menu bars which contains drop down menus. This menus are defined using a simple xml syntax, and you can control the appearance of the menu using styles.<br />You can create as many menuBars like you need using the same hb_menuBar widget.<br /><br />The first step is upload the hb_menuBar widget to the HB server, for an explanation about how to upload a widget read the post entitled 'Accessing databases with Hummingbird and scripting part I' and the section entitled 'Uploading a widget to the Hummingbird server'.<br /><br /></div>Once you have upload the hb_menuBar widget to the HB server. you must put the widget onto a HB page, like showed on this picture:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/-sfJuNRW8e-w/TYziQ8QOQLI/AAAAAAAAAS8/rGHPfl8Kv9E/s1600/imagen62.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://4.bp.blogspot.com/-sfJuNRW8e-w/TYziQ8QOQLI/AAAAAAAAAS8/rGHPfl8Kv9E/s400/imagen62.jpg" alt="" id="BLOGGER_PHOTO_ID_5588090018339897522" border="0" /></a><br />On the above image you can see the widget on the upper right corner. This widget is only visible at design time.<br />The steps to create a menuBar using the hb_menuBar widget:<br />- get access to the instance of hb_menuBar widget.<br />- create a new instance of a menu using the instance of the hb_menuBar.<br />- set the options of the menu with xml using the setXml method of the widget.<br />- set some properties like the width, height, etc.<br />- set some styles for the menu in order to change its appearance.<br />- add the menu instance to a container (using the addChild method) in order to make it visible to the user. this container could be the page object (page.content.addChild) or a panel object that is visible to the user.<br /><br />following is the code corresponding to every step described:<br /><br />// get access to the menuBar widget instance<br />var mb=page.findObject2("/database2_2");<br />// create a new menu using the hb_menuBar instance<br />var m=mb.content.application.new_menu();<br />/*<br />set the options of the menu into a string variable with xml<br />in the xml string the 'label' attribute is the text for the menu's option and the 'data' attribute is used to identify the option selected for the user<br />*/<br /><pre>var menus=''+<br />' <root>'+<br />' <menuitem label="Home" data="1"/>'+<br />' <menuitem label="Products" data="0">'+<br />' <menuitem label="Cms software" data="2"/>'+<br />' <menuitem label="CMR" data="3"/>'+<br />' </menuitem>'+<br />' <menuitem label="About us" data="0">'+<br />' <menuitem label="Who we are" data="4"/>'+<br />' <menuitem label="Clients" data="5"/>'+<br />' <menuitem label="Partners" data="6"/>'+<br />' </menuitem>'+<br />' <menuitem label="Contact" data="0"> '+<br />' <menuitem label="Send us a message" data="7"/>'+<br />' <menuitem label="Address" data="8"/>'+<br />' </menuitem>'+<br />' </root>';<br /></pre><br /><br />m.setXml(menus); // pass the xml with the options to the widget<br /><br />// set the width of the menu to 100 percent of its container<br />m.percentWidth='100';<br />//m.height=30; // set the height of the menu<br /><br />// set some styles for the menu<br />m.setStyle('cornerRadius', 0);<br />m.setStyle('letterSpacing', 1);<br />m.setStyle('fillColors',[0x3333ff, 0x0066ff]);<br />m.setStyle('rollOverColor',0x0033cc);<br />m.setStyle('color', 0xffffff);<br />m.setStyle('textRollOverColor', 0xffffff);<br />m.setStyle('themeColor', 0x0066ff);<br />m.setStyle('fontFamily', 'Times New Roman');;<br />m.setStyle('fontSize', 20);<br />m.setStyle('fontWeight', 'normal');<br />m.setStyle('fontStyle', 'italic');<br />m.setStyle('textIndent', 0);<br />m.setStyle('borderColor', 0x333399);<br />m.setStyle('borderStyle','none');<br />m.setStyle('fillAlphas',[1, 1]);<br />// we set the background color for the dropdown menus<br />var ms=new CSSStyleDeclaration(".myMenuBar"); // we create a CSS<br />ms.setStyle("backgroundColor",0x000000);<br />//ms.setStyle("backgroundAlpha",0.5);<br />m.setStyle('menuStyleName',"myMenuBar");<br /><br /><br />/*<br />add the menu to a panel, remember that the menu width<br />will be 100 percent of the width of its container, on this case<br />the container is the panel<br />*/<br />var o=page.findObject2("/database2_3"); // get a reference to the panel<br />if (o!=null)<br />{<br />// if you need center the menu onto the page uncomment the next line<br />//o.parent.x=page.content.width/2-o.parent.width/2;<br />o.addChild(m); // add the menuBar to the panel<br /><br />}<br /><br /><br />we write the above code in the ready event of the hb_menuBar widget, like showed here:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/-dtP-4wZ44V8/TY0YHZM58dI/AAAAAAAAATE/RPM3kSHoS64/s1600/imagen64.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://2.bp.blogspot.com/-dtP-4wZ44V8/TY0YHZM58dI/AAAAAAAAATE/RPM3kSHoS64/s400/imagen64.jpg" alt="" id="BLOGGER_PHOTO_ID_5588149227939819986" border="0" /></a><br /><div style="text-align: justify;">The reason why we put the above code on the ready event of the widget is this:<br />Every widget triggers a 'ready' event when is initialized, let say when is just created, so this event is the ideal place to put our code in order to create a widget's instance when the page is just loaded into the user's browser, because that will be the moment when our widget will be created and the 'ready' event will be triggered. You must take into account that the video, the text, the panel and the picture are not widgets, they are built-in components and they don't trigger a 'ready' event, but if you need to execute some code when these built-in components are just created you can use the 'onCreated' event of the built-in component.<br /></div><br /><div style="text-align: justify;">after follow the steps described above you will have a nice menuBar on your HB page. But there is a question for resolve and is ¿ how do you execute an action when the user selects an option ?.<br />This is simple: when the user selects an option the widget will trigger and event called 'menuClick' and it passes to the event a parameter called 'data' which corresponds to the 'data' attribute defined for you on the xml string for the menu. watch the following code located in the menuClick event of the hb_menuBar widget:<br /></div><br />/*<br />this event is triggered when a user makes click on some option<br />of the menu, every option must have a data property which is passed<br />to this event in the info.data parameter, so you will know what option<br />was clicked by watching for this data<br />*/<br /><br />if (info.data==0)<br />return;<br />// show a little message with the data attribute of the option selected<br />Alert.show("option choosed:"+info.data);<br />// now you must exec some action in response to the selected option<br />switch (info.data)<br />{<br />case '1': // home<br /><br />break;<br />case '2': // cms software<br /><br />break;<br />case '3': // cmr<br /><br />break;<br />case '4': // who we are<br /><br />break;<br />default: // others options<br /><br />break;<br />};<br /><br />you will see the above code on this picture:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/-pL_Pc8bzLHg/TY0stInlJeI/AAAAAAAAATM/wK9JlrSgCJI/s1600/imagen65.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://1.bp.blogspot.com/-pL_Pc8bzLHg/TY0stInlJeI/AAAAAAAAATM/wK9JlrSgCJI/s400/imagen65.jpg" alt="" id="BLOGGER_PHOTO_ID_5588171866555885026" border="0" /></a><br />That is, now you have completed all the steps to have a nice menuBar on your page. :)<br /><br /><div style="text-align: justify;">a nice feature about the menuBar widget is that you can change the options of the menu at runtime, lets say you can add, replace o remove any option of the menu to adapt the menu according some criteria, like for example the perfil of the user that visits the page. You can disable an option using the 'enabled' attribute with a value of false.<br />On the next picture you can see how using a button labeled 'change menu' we change the options of the menu when the visitor click on the button:<br /></div><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/-XTMuBJAY_kA/TY9uGxMqPqI/AAAAAAAAATU/oS2159_l2TA/s1600/imagen66.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://3.bp.blogspot.com/-XTMuBJAY_kA/TY9uGxMqPqI/AAAAAAAAATU/oS2159_l2TA/s400/imagen66.jpg" alt="" id="BLOGGER_PHOTO_ID_5588806725154782882" border="0" /></a><br /><div style="text-align: justify;">On the above picture you see how we added a last line of code to the 'ready' event of the hb_menuBar widget (database2_2_ready) in order to store a reference to the menu. this reference will allow us modify the menu in other events. On this case we will change the menu's options in the click event of the button 'database2_4' . you can see the code of the event on the next picture:<br /></div><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/-1Kxo6f_8oE0/TY9vau55gwI/AAAAAAAAATc/rlHPqbSdCR4/s1600/imagen67.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://1.bp.blogspot.com/-1Kxo6f_8oE0/TY9vau55gwI/AAAAAAAAATc/rlHPqbSdCR4/s400/imagen67.jpg" alt="" id="BLOGGER_PHOTO_ID_5588808167648232194" border="0" /></a><br /><br /><div style="text-align: justify;">On the image you can see that using the setXml method of the menuBar with a new set of options the menu is refreshed automatically on the page. watch that we are using the 'enabled' attribute with a value of false to disable the option labeled 'CMR'.<br />On the next image you can see the menu with the new options set, just after we clicked the 'change menu' button:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/-VZL-bzDx8CU/TY9zOlLorxI/AAAAAAAAATk/LE4aGkFUKiw/s1600/imagen68.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://4.bp.blogspot.com/-VZL-bzDx8CU/TY9zOlLorxI/AAAAAAAAATk/LE4aGkFUKiw/s400/imagen68.jpg" alt="" id="BLOGGER_PHOTO_ID_5588812356926353170" border="0" /></a><br />A last note above the hb_menuBar widget: you can control the transparency level of the drop down menus, like you see on this picture:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/-tNKxuvo33bM/TZEPpskKadI/AAAAAAAAAT0/vtW8r2MfI9U/s1600/imagen70.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://4.bp.blogspot.com/-tNKxuvo33bM/TZEPpskKadI/AAAAAAAAAT0/vtW8r2MfI9U/s400/imagen70.jpg" alt="" id="BLOGGER_PHOTO_ID_5589265821555386834" border="0" /></a><br /><br />nice :)<br /><br /></div>alexhttp://www.blogger.com/profile/03053409769511814909noreply@blogger.com0tag:blogger.com,1999:blog-1520671859647445307.post-67869882997254410932011-02-23T15:08:00.000-08:002011-03-09T17:15:06.807-08:00Displaying data with the hb grid widget<div style="text-align: justify;">The last posts show you how to get data records from a backend, and how to display them on a grid object using a widget. now is time to see the hb_grid in more detail.<br />Like you know the hb_grid widget let you show data in a tabular way. you can create many instances of a grid using only an hb_grid widget, like is shown on this image:<br /></div><br /><div style="text-align: justify;"><div style="text-align: justify;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/-4CC7EnUOPCo/TWfHR76KxAI/AAAAAAAAARc/yzoiEPQo758/s1600/hb_grid_widget1.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 146px;" src="http://3.bp.blogspot.com/-4CC7EnUOPCo/TWfHR76KxAI/AAAAAAAAARc/yzoiEPQo758/s400/hb_grid_widget1.JPG" alt="" id="BLOGGER_PHOTO_ID_5577645774475019266" border="0" /></a>Every instance is completely independent from the others instances of the widget.<br />You use the dataProvider property to indicate to a grid where are the data to be show.<br />The data showed on a grid are tied to the variable containing those data when you use the dataProvider property with an arrayCollection variable, and if the user modify some data item on a grid he (she) really modify the variable containing that data.<br />now look at the following image:<br /></div><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/-LgKlcLiyxdg/TWfTppeoAkI/AAAAAAAAARk/CXCtDOOiywc/s1600/hb_grid_widget2.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 198px;" src="http://4.bp.blogspot.com/-LgKlcLiyxdg/TWfTppeoAkI/AAAAAAAAARk/CXCtDOOiywc/s400/hb_grid_widget2.JPG" alt="" id="BLOGGER_PHOTO_ID_5577659375984050754" border="0" /></a><br /></div><br /><div style="text-align: justify;">The property that allow edit the data showed on a grid is the editable property, you must note that the grid has a editable property and the dataGridColumn has an editable property too, but this last one, if not indicated, is set to true by default.<br />Now watch this image:<br /></div><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/-Wt9jVrHzzYI/TWfVjPMCRJI/AAAAAAAAARs/frW9KH8o05I/s1600/imagen58.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://4.bp.blogspot.com/-Wt9jVrHzzYI/TWfVjPMCRJI/AAAAAAAAARs/frW9KH8o05I/s400/imagen58.jpg" alt="" id="BLOGGER_PHOTO_ID_5577661464870798482" border="0" /></a><br /><div style="text-align: justify;">On the above image there are two grids (grid1 and grid2), created using the same hb_grid widget, the left most grid (grid1) has its editable property set to true and the right most grid (grid2) has its editable property set to false, however when we change any data item on the grid 1 automatically the data are refreshed on the grid 2, like you can see on the second row (the 'titulo' column).<br />If you want to add a new row (either with data or not) you must to add the data to the dataProvider variable not to the widget, lets say you add the data to the variable containing the data for the grid.<br />in the same way if you want to delete a data row from the hb_grid widget you only must delete it in the variable associated to the dataProvider property.<br />The widget always is refreshed automatically when you change a data, add rows, or delete rows from the variable associated with the widget.<br />The variable that you assign to the dataProvider is a variable of type array or arrayCollection, where every element into the array corresponds to a data row in the grid, and every one of this elements really is an object with attributes which will be the columns (fields) of the hb_grid.<br />do you remember the previous posts ? there you find a line in the serverResponse event that look so:<br /><br />var registros=page.loadArrayCollection(result.Table.serverInfo);<br /><br />that line takes the data returned from the midleware and convert them into an arrayCollection, which could be used with the hb_grid. when the data are converted into the arrayCollection every data row (data base row) returned from the midleware is converted into a element (object) of the arrayCollection, and each element (object) into the array will has so many attributes like data fields (data base columns) has the returned rows .<br />to clarify this look this code:<br /><br />// using an arrayCollection will ensure that the data are automatically refreshed<br />// the variable registros could be used assigned later to the dataProvider of an hb_grid widget<br />var registros=new ArrayCollection();<br />registros.addItem({id:10,name:"alex araya",valor:true});<br />registros.addItem({id:12,name:"jaime araya",valor:false});<br /><br />the above code creates an arrayCollection with two elements. Its equivalent using an array is:<br /><br />var registros=new Array();<br />registros.push({id:10,name:"alex araya",valor:true});<br />registros.push({id:12,name:"jaime araya",valor:false});<br /><br />here we are constructing our array in a harcoded way. The first line creates a empty array, on the second we push our first element (data record) into the array with three attributes (data fields). this attributes are id, name and valor (value). the third line creates another data record into the array with the same attributes and other values for every attribute. this array could be used later like a dataProvider for the hb_grid.<br /><br />Other useful properties of the hb_grid are:<br />selectedItem: it is an object that represents the selected row of the hb_grid, is null if there is no one row selected.<br />selectedIndex: it is a number representing the subscript in the array of the selected item of the hb_grid.<br />alpha: is <span style="" id="pageFilter" runtime="Flash::9##Lite::4##">the alpha transparency value of the hb_grid . Valid values are 0 (fully transparent) to 1 (fully opaque). The default value is 1. objects with<code></code><span style="font-family:monospace;"></span> </span>alpha <span style="" id="pageFilter" runtime="Flash::9##Lite::4##">set to 0 are invisible</span>.<br />enabled: (true/false) indicates whether the component (hb_grid) can accept user interaction.<br />id: is a string corresponding to the ID of the hb_grid. it could be useful to identify the hb_grid that has triggered an event, like you'll see later.<br />showHeaders: (true/false) indicates whether the widget should show column headers.<br />visible: (true/false) if true the hb_grid is visible, if false is invisible.<br /><span id="pageFilter" runtime="Flash::9##AIR::1.1##" product="Flex::3##">selectedItem: Represents a reference to the selected item in the data provider</span>, if there is no item selected it will be null.<br />selectedIndex: is the index in the data variable (dataProvider property) of the selected item. <span id="pageFilter" runtime="Flash::9##AIR::1.1##" product="Flex::3##">If there is no selected item it will be </span><span id="pageFilter" runtime="Flash::9##AIR::1.1##" product="Flex::3##">-1.<br /><br />The events triggered for the hb_grid are the following:<br /><br />item_change: executed when </span>selectedIndex or selectedItem property changes as a result of user interaction. The parameters passed to your event script for this event are:<br />me: is the hb_grid instance that triggered the event.<br />info: is an object that in the case of this event will have the following attributes:<br />info.row: is the row of the hb_grid's cell where the user is now.<br />info.col: is the col of the hb_grid's cell where the user is now.<br /><br />item_click: executed when the user click on a cell of the grid. The parameters passed to your event script for this event are:<br />me: is the hb_grid instance that triggered the event.<br />info: is an object that in the case of this event will have the following attributes:<br />info.row: is the row of the hb_grid's cell where the user made click.<br />info.col: is the col of the hb_grid's cell where the user made click.<br /><br />item_editBeginning: executed when the user begins the editing of a cell. The parameters passed to your event script for this event are:<br />me: is the hb_grid instance that triggered the event.<br />info: is an object that in the case of this event will have the following attributes:<br />info.row: is the row of the hb_grid's cell being edited.<br />info.col: is the col of the hb_grid's cell being edited.<br />dataField: is <span style="" id="pageFilter" runtime="Flash::9##AIR::1.1##" product="Flex::3##">the name of the field or property in the data associated with the item's column.</span><br /><br /><br />item_editEnd: executed when the user ends the editing of a cell. The parameters passed to your event script for this event are:<br />me: is the hb_grid instance that triggered the event.<br />info: is an object that in the case of this event will have the following attributes:<br />info.row: is the row of the hb_grid's cell being edited.<br />info.col: is the col of the hb_grid's cell being edited.<br />dataField: is <span style="" id="pageFilter" runtime="Flash::9##AIR::1.1##" product="Flex::3##">the name of the field or property in the data associated with the item's column.</span><br />This event is cancelable, meaning that if you event script returns false, the value entered by the user will be rejected. This is useful for custom data validation.<br /><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/-liAKARu_QdM/TXV_bY5MtfI/AAAAAAAAAR8/ODNNKQUJ_XI/s1600/imagen59.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://1.bp.blogspot.com/-liAKARu_QdM/TXV_bY5MtfI/AAAAAAAAAR8/ODNNKQUJ_XI/s400/imagen59.jpg" alt="" id="BLOGGER_PHOTO_ID_5581507421711152626" border="0" /></a><br /><br /><br />The above image show you two grids (grid1 and grid2). Every event triggered for the grid2 (the right most grid) is registered in a text component trough scripting, so we can watch the moment when a event is triggered for the hb_grid.<br /><br />The hb_grid allows you using other controls for data input instead of the default text control, like you see on the next image where you can see a combo box:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/-cFeiLo7LwHg/TXWCBNcmtII/AAAAAAAAASE/f9xpkP4yubM/s1600/imagen60.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://2.bp.blogspot.com/-cFeiLo7LwHg/TXWCBNcmtII/AAAAAAAAASE/f9xpkP4yubM/s400/imagen60.jpg" alt="" id="BLOGGER_PHOTO_ID_5581510270496715906" border="0" /></a><br />At the present the controls that you can use for editing a cell are:<br />- ComboBox<br />- CheckBox<br />- Text Input<br />- Button<br />- NumericStepper<br /><br /><br /></div><br />post not ended...alexhttp://www.blogger.com/profile/03053409769511814909noreply@blogger.com0tag:blogger.com,1999:blog-1520671859647445307.post-11156898802309797942011-02-21T17:48:00.000-08:002011-03-12T06:28:15.313-08:00Accessing databases with Hummingbird and scripting part II<div style="text-align: justify;">On this post you will see how to create the midleware layer for our database sample application. we will use asp.net+fluorineFX framework.<br />If you had never used fluorineFX, you can visit:<br /></div><a href="http://www.fluorinefx.com/">http://www.fluorinefx.com/</a><br /><br /><div style="text-align: justify;">if you want to learn how to preparing an asp.net project in order to use the fluorineFX framework visit:<br /></div><a href="http://www.fluorinefx.com/docs/fluorine/index.html">http://www.fluorinefx.com/docs/fluorine/index.html</a><br /><br /><div style="text-align: justify;">is very simple using fluorineFX with asp.net, and like you will see on the official documentation, you must to add a reference on the asp.net project to the fluorineFX framework, and then you are ready to coding.<br />You must to create a new project called 'WebServPortalFlex'.<br />Once you have your project configured to use fluorineFX, you must to create a new class called 'servicios' like you see on the following picture:<br /></div><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/-Qy3BbASXy6k/TWPX_RiCp6I/AAAAAAAAARE/TbCDpe5NQMQ/s1600/imagen55.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://1.bp.blogspot.com/-Qy3BbASXy6k/TWPX_RiCp6I/AAAAAAAAARE/TbCDpe5NQMQ/s400/imagen55.jpg" alt="" id="BLOGGER_PHOTO_ID_5576538245652719522" border="0" /></a><br /><div style="text-align: justify;">write a function called ejecuta_query and a function called obtenerPaginasUsuario inside the class servicios, with the following code:<br /></div><br /><br /><br />private DataSet ejecuta_query(String query)<br />{<br /><br />// you must to change the conexion variable to use your own conexion string<br />String conexion="server=localhost;database=dbtest;uid=dbuserid;pwd=dbpassword;";<br /><br />SqlConnection con=new SqlConnection(conexion);<br />DataSet ds=new DataSet();<br />SqlDataAdapter da = new SqlDataAdapter(query,con);<br />try<br />{<br />da.Fill(ds);<br />}<br />catch(Exception er)<br />{<br />con.Close();<br />return ds;<br />};<br /><br />con.Close();<br />return ds;<br /><br />}<br /><br /><br /><br />public DataSet obtenerPaginasUsuario(string username)<br />{<br />DataSet ds;<br />int regs;<br />string query="exec sp_obtenerPaginasUsuario '"+username+"'";<br />ds=ejecuta_query(query);<br />regs=ds.Tables[0].Rows.Count;<br />if (regs==0)<br />{<br />// return some info to the front end to indicate that there is no rows<br />}<br /><br />return ds;<br /><br />}<br /><br /><div style="text-align: justify;">That's all, now you have finished the midleware layer, it has only a remote procedure (function) called obtenerPaginasUsuario. this function will be called for the front end.<br /><br /><br />Now you will must write your backend logic in the sql server database.<br /><br />first you must be sure that there is a database on the sql server engine, with the name that you pretend to use in the conexion string of the asp.net project. next you must be sure that inside this database there is a user account with the username and password that you are using in the conexion string.<br />The next step is to create the table that will store the data. this table has the following structure:<br /></div><br />CREATE TABLE tb_pagina (<br />cod_pag varchar (100) ,<br />correlativo int ,<br />titulo varchar(255),<br />username varchar (50) ,<br />fecha_creacion datetime ,<br />fecha_modificacion datetime<br />)<br /><br /><div style="text-align: justify;">Then you must to insert some records for testing later our app.<br /><br />Then you must to create a new stored procedure with the following code:<br /></div><br />create proc sp_obtenerPaginasUsuario(@username varchar(50))<br />as<br />begin<br /><br />create table #paginas(cod_pag varchar(100),titulo varchar(255),fecha_creacion datetime,<br />fecha_modificacion datetime);<br /><br />insert into #paginas select distinct cod_pag,titulo,fecha_creacion,fecha_modificacion<br />from tb_pagina where username=@username<br /><br />select '0' as cod,'' as men,a.cod_pag,a.titulo,convert(varchar,a.fecha_creacion,103) as fecha_creacion,<br />convert(varchar,a.fecha_modificacion,103) as fecha_modificacion<br />from #paginas a order by convert(datetime,a.fecha_creacion)<br /><br />end<br /><br /><br /><br /><div style="text-align: justify;"><div style="text-align: justify;">you must give to the above stored procedure the permissions to get records from the database, and you must be sure that the user's account that you are using on the 'conexion' string variable is granted to execute the stored procedure.<br /></div><br />That's all, now you finished the back end logic. now is time for test our front end:<br /><br />open a web browser, and visit the Hummingbird page created, you must see something like this:<br /></div><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/-4UaGQNNzBw4/TWPkqLRX1DI/AAAAAAAAARM/bJULHjtTLec/s1600/imagen56.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://1.bp.blogspot.com/-4UaGQNNzBw4/TWPkqLRX1DI/AAAAAAAAARM/bJULHjtTLec/s400/imagen56.jpg" alt="" id="BLOGGER_PHOTO_ID_5576552176846099506" border="0" /></a><br /><div style="text-align: justify;">Remember that the hb_grid widget is invisible in visit mode, that's the reason why it no appears on the above image. Now click on the 'get rows' text and you will see a grid with the records retrieved from the database like showed on this image:<br /></div><br /><div style="text-align: justify;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/-3dVMBXrXUVQ/TWPl4KaxwjI/AAAAAAAAARU/_xEbXg76NMs/s1600/imagen57.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://3.bp.blogspot.com/-3dVMBXrXUVQ/TWPl4KaxwjI/AAAAAAAAARU/_xEbXg76NMs/s400/imagen57.jpg" alt="" id="BLOGGER_PHOTO_ID_5576553516646908466" border="0" /></a>Great, on these posts you have learned how to access a backend, retrieve records from it, create a grid dinamically and show data on it. Remember that this is only a very simple sample and there is very much that you can make with HB.<br />On the next post i will show you the hb_grid widget with more details, so you will have a more complete understanding about it and how it integrates inside HB.<br /></div><br />Have a nice day... :)alexhttp://www.blogger.com/profile/03053409769511814909noreply@blogger.com0tag:blogger.com,1999:blog-1520671859647445307.post-48748314632048453752011-02-20T06:24:00.000-08:002011-03-25T11:16:49.221-07:00Accessing databases with Hummingbird and scripting part I<div style="text-align: justify;">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:<br /></div><div style="text-align: justify;"><div style="text-align: justify;">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.<br />The good news are that now HB allow you to accessing your own data stored in other servers.<br />HB works like a three layers architecture. watch the following image:<br /></div><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/-Q3gXRxvagsg/TWgRoNhNMZI/AAAAAAAAAR0/-haXlBAGeUY/s1600/hb_architecture.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 375px;" src="http://4.bp.blogspot.com/-Q3gXRxvagsg/TWgRoNhNMZI/AAAAAAAAAR0/-haXlBAGeUY/s400/hb_architecture.JPG" alt="" id="BLOGGER_PHOTO_ID_5577727521019736466" border="0" /></a>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:<br /><div style="text-align: justify;"><br />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.<br /><br />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).<br /><br />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.<br /><br />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).<br />For the sample we will use the following:<br />- For the front end we will use obviously HB.<br />- 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: <a href="http://www.fluorinefx.com/">http://www.fluorinefx.com/</a>. you could use any other language supporting RPC.<br />- For the backend logic we will use sql server, but you could use any other database engine.<br /><br />1. first we will create an HB page:<br />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.<br />select the database1 page and press the button 'ir al diseñador' ('go to the designer' ) on the control panel.<br /><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/-apyyiMiYyUI/TWLdp-dB76I/AAAAAAAAAPc/2-G_mBnIGws/s1600/imagen42.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://1.bp.blogspot.com/-apyyiMiYyUI/TWLdp-dB76I/AAAAAAAAAPc/2-G_mBnIGws/s400/imagen42.jpg" alt="" id="BLOGGER_PHOTO_ID_5576263001847230370" border="0" /></a><br /><br />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:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/-IZIF2qHJRC8/TWLfWDjJS3I/AAAAAAAAAPk/aNtRKTmySfc/s1600/imagen43.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://2.bp.blogspot.com/-IZIF2qHJRC8/TWLfWDjJS3I/AAAAAAAAAPk/aNtRKTmySfc/s400/imagen43.jpg" alt="" id="BLOGGER_PHOTO_ID_5576264858640927602" border="0" /></a><br /><div style="text-align: center;"><span style="font-weight: bold;"><u>Uploading a widget to the Hummingbird server</u></span><br /></div><br />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:<br /><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/-Z3RzuZHfpeI/TWLiDdQyJUI/AAAAAAAAAPs/G68G1_OgOdA/s1600/imagen44.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://4.bp.blogspot.com/-Z3RzuZHfpeI/TWLiDdQyJUI/AAAAAAAAAPs/G68G1_OgOdA/s400/imagen44.jpg" alt="" id="BLOGGER_PHOTO_ID_5576267837660603714" border="0" /></a>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:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/-wUZ-ULYk_2Y/TWMFnr9QGBI/AAAAAAAAAQ8/bbPgs4ZVAk0/s1600/imagen45.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://4.bp.blogspot.com/-wUZ-ULYk_2Y/TWMFnr9QGBI/AAAAAAAAAQ8/bbPgs4ZVAk0/s400/imagen45.jpg" alt="" id="BLOGGER_PHOTO_ID_5576306942987474962" border="0" /></a><br />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.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/-b8eJr7bKr5Y/TWLkl5-uM2I/AAAAAAAAAP8/wB6YPkQgUJ4/s1600/imagen47.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://2.bp.blogspot.com/-b8eJr7bKr5Y/TWLkl5-uM2I/AAAAAAAAAP8/wB6YPkQgUJ4/s400/imagen47.jpg" alt="" id="BLOGGER_PHOTO_ID_5576270628508283746" border="0" /></a>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:<br /><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/-_A4aEWO168k/TWLlceVcF6I/AAAAAAAAAQE/uJfb3EPLXjA/s1600/imagen48.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://2.bp.blogspot.com/-_A4aEWO168k/TWLlceVcF6I/AAAAAAAAAQE/uJfb3EPLXjA/s400/imagen48.jpg" alt="" id="BLOGGER_PHOTO_ID_5576271565980178338" border="0" /></a><br />so now you will see a widget on your page that says grid widget:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/-ETjhHu38VV8/TWLm31NsCrI/AAAAAAAAAQM/xUQvkhdSZ2g/s1600/imagen49.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://4.bp.blogspot.com/-ETjhHu38VV8/TWLm31NsCrI/AAAAAAAAAQM/xUQvkhdSZ2g/s400/imagen49.jpg" alt="" id="BLOGGER_PHOTO_ID_5576273135489780402" border="0" /></a><br />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).<br />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:<br /><br />import mx.controls.Alert; // used to display little messages on the page<br />import Connection; // needed to connect with the midleware<br />/*<br />next we create a connection object and store it in a global variable (con)<br />for later use<br />*/<br />global.con=page.newConnection();<br />// loading of the loadPolicy file in order to have acces to the remote call procedures<br />global.con.loadPolicyFile("http://alexaraya.cl/WebServPortalFlex/crossdomain.xml");<br />// open the connection to the midleware (made with asp.net)<br />global.con.openConnection("http://alexaraya.cl/WebServPortalFlex/Gateway.aspx");<br /><br />/*<br />the nexts imports will allow to create a datagrid and the necesary columns to<br />present the data to the user<br />*/<br />import mx.controls.DataGrid;<br />import mx.controls.dataGridClasses.DataGridColumn;<br /><br /><br />Like showed on this pic:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/-LwNf22JV2GM/TWLtmyEIc3I/AAAAAAAAAQU/8L_vSWrW5XE/s1600/imagen50.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://4.bp.blogspot.com/-LwNf22JV2GM/TWLtmyEIc3I/AAAAAAAAAQU/8L_vSWrW5XE/s400/imagen50.jpg" alt="" id="BLOGGER_PHOTO_ID_5576280539168011122" border="0" /></a><br />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.<br />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:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/-eR9uVuQNrlU/TWLvCPoFuTI/AAAAAAAAAQc/6N_dC0rKR48/s1600/imagen51.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 324px;" src="http://2.bp.blogspot.com/-eR9uVuQNrlU/TWLvCPoFuTI/AAAAAAAAAQc/6N_dC0rKR48/s400/imagen51.jpg" alt="" id="BLOGGER_PHOTO_ID_5576282110471551282" border="0" /></a><br />this file must be created for you and located in the same folder like the asp.net application.<br /><br />Now we write the logic for the 'get rows' button (the onClick event):<br /><br />/* when the user press the "get rows" button we execute a remote<br />procedure called "obtenerPaginasUsuario" that returns all the pages of<br />a user, on this case the name of the user is jaime<br />if we get a positive response from the midleware the serverResponse event<br />will be triggered, and if there was an error the serverError event will be triggered<br />*/<br /><br />global.con.call("WebServPortalFlex.servicios.obtenerPaginasUsuario","serverResponse","serverError","jaime");<br /><br />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.<br /><br />The next picture shows the onClick event for the button:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/-2PgnMNiZ5PY/TWLzVY3LrUI/AAAAAAAAAQk/PcUIZ8EjDiA/s1600/imagen52.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://1.bp.blogspot.com/-2PgnMNiZ5PY/TWLzVY3LrUI/AAAAAAAAAQk/PcUIZ8EjDiA/s400/imagen52.jpg" alt="" id="BLOGGER_PHOTO_ID_5576286837414800706" border="0" /></a>now we write the script for the response event:<br /><br />/*<br />this event is executed when the midleware returns info succefuly.<br />first we convert the records into an arrayCollection object that can be used<br />for the grid. the records returned from the midleware are in the result<br />parameter<br />*/<br />var registros=page.loadArrayCollection(result.Table.serverInfo);<br /><br />/* we create a datagrid using the hb_grid widget contained in<br />the database1_2 object (an image object)<br />*/<br />var o=page.findObject2("/database1_2");<br />var dg=o.content.application.new_grid();<br />/* now we create the columns for the datagrid */<br />var columns=new Array();<br />var c1=new DataGridColumn();<br />c1.dataField="cod_pag";<br />c1.headerText="codigo pagina";<br />c1.editable=false;<br />c1.width=100;<br />columns.push(c1);<br />var c2=new DataGridColumn();<br />c2.dataField="titulo";<br />c2.headerText="titulo";<br />c2.editable=false;<br />c2.width=300;<br />columns.push(c2);<br />dg.columns=columns; // assign the columns to our new grid<br />// let know to the datagrid where are the data to be used<br />dg.dataProvider=registros;<br />/* adjust some properties like the position on the page for the grid,<br />row height, etc.<br />*/<br />dg.x=100;dg.y=100;dg.height=500;<br />dg.rowHeight=30;<br />dg.showHeaders=true;<br />/*put some styles for the grid like colors for the rows,<br />header colors, font , etc.<br />*/<br />dg.setStyle("alternatingItemColors", [0x9999cc, 0x9999ff]);<br />dg.setStyle("headerColors", [0x9999ff, 0xcccccc]);<br />dg.setStyle("color", 0x0B333C);<br />dg.setStyle("rollOverColor",0xcc3366);<br />dg.setStyle("selectionColor", 0xcc9900);<br />dg.setStyle("fontFamily", "Courier");<br />dg.setStyle("fontSize", 11);<br />dg.setStyle("horizontalGridLines", true);<br />dg.setStyle("verticalGridLineColor", 0xffffff);<br />// add the datagrid to the page in order to be visible to the user<br />page.content.addChild(dg);<br /><br /><br />this is showed on this picture:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/-PIqEbDpK_w4/TWL4nnseAyI/AAAAAAAAAQs/GDLspckkQCg/s1600/imagen53.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://1.bp.blogspot.com/-PIqEbDpK_w4/TWL4nnseAyI/AAAAAAAAAQs/GDLspckkQCg/s400/imagen53.jpg" alt="" id="BLOGGER_PHOTO_ID_5576292648192181026" border="0" /></a><br /><br />the last step to end our HB page is write the script for the serverError event:<br /><br />Alert.show("an error ocurred on the midleware"); // shows a message to the user<br /><br /><br />like showed on this image:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/-QwM1z7zqSZg/TWL7tNoOdmI/AAAAAAAAAQ0/z4ElZzP-Qq0/s1600/imagen54.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://3.bp.blogspot.com/-QwM1z7zqSZg/TWL7tNoOdmI/AAAAAAAAAQ0/z4ElZzP-Qq0/s400/imagen54.jpg" alt="" id="BLOGGER_PHOTO_ID_5576296042809161314" border="0" /></a><br /><br />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...<br /><br /></div></div>alexhttp://www.blogger.com/profile/03053409769511814909noreply@blogger.com0tag:blogger.com,1999:blog-1520671859647445307.post-29135532689921961012011-02-09T07:41:00.000-08:002011-02-12T06:00:36.583-08:00Collaborators<div style="text-align: justify;">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.<br /></div><br /><span style="font-weight: bold;">Alberto Nudman</span><br /><br /><div style="text-align: justify;">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.<br /><br />Contact info:<br /><a href="http://cl.linkedin.com/pub/alberto-nudman/4/b48/532">LinkedIn</a><br /></div>alexhttp://www.blogger.com/profile/03053409769511814909noreply@blogger.com0tag:blogger.com,1999:blog-1520671859647445307.post-24240246774544153532010-11-30T06:38:00.000-08:002011-04-12T18:58:11.616-07:00Using an event script with differents components<div style="margin: 0px 0px 0.75em; line-height: 1.3em; text-align: justify; color: rgb(17, 34, 51);font-family:Verdana,Arial,sans-serif;font-size:10pt;"><span style="font-size:100%;">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.</span></div><div style="margin: 0px 0px 0.75em; line-height: 1.3em; text-align: justify; color: rgb(17, 34, 51);font-family:Verdana,Arial,sans-serif;font-size:10pt;"><span style="font-size:100%;">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 </span><span style="line-height: 16px;font-size:100%;" >regular expressions</span></div><div style="text-align: justify;"><span style="color: rgb(17, 34, 51);font-family:Verdana,Arial,sans-serif;font-size:100%;" ><span style="line-height: 1.3em;">I changed the script engine so that it now looks for an event script using regular expressions</span></span><span style="font-size:100%;">:</span><br /></div><div style="text-align: justify;"><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_5sUJSQLVQq8/TPUP1SRuyAI/AAAAAAAAAO0/qf-lQl5eNGU/s1600/imagen40.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://3.bp.blogspot.com/_5sUJSQLVQq8/TPUP1SRuyAI/AAAAAAAAAO0/qf-lQl5eNGU/s400/imagen40.jpg" alt="" id="BLOGGER_PHOTO_ID_5545355924290324482" border="0" /></a><br /><div style="text-align: justify;">But ¿ what does this mean ?<br />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...<br />This will reduce the code needed and will make it easier to read.<br />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.<br /><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_5sUJSQLVQq8/TPUVIXdkftI/AAAAAAAAAO8/HTNpEKPyns4/s1600/imagen41.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://1.bp.blogspot.com/_5sUJSQLVQq8/TPUVIXdkftI/AAAAAAAAAO8/HTNpEKPyns4/s400/imagen41.jpg" alt="" id="BLOGGER_PHOTO_ID_5545361749657812690" border="0" /></a><br /></div><br />have a nice day. :)<br /></div>alexhttp://www.blogger.com/profile/03053409769511814909noreply@blogger.com0tag:blogger.com,1999:blog-1520671859647445307.post-7148614654358136862010-11-19T21:32:00.000-08:002010-11-21T06:29:15.892-08:00Some pics of la Serena<div style="text-align: justify;">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.<br />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.<br /></div><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_5sUJSQLVQq8/TOe9WFzSwTI/AAAAAAAAAOs/9b0Fm97DigU/s1600/paseo-la-serena.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 240px;" src="http://4.bp.blogspot.com/_5sUJSQLVQq8/TOe9WFzSwTI/AAAAAAAAAOs/9b0Fm97DigU/s320/paseo-la-serena.jpg" alt="" id="BLOGGER_PHOTO_ID_5541606053714772274" border="0" /></a><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_5sUJSQLVQq8/TOdhesxRHsI/AAAAAAAAANc/7q9W9ZdIL_s/s1600/costanera-4.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 210px;" src="http://1.bp.blogspot.com/_5sUJSQLVQq8/TOdhesxRHsI/AAAAAAAAANc/7q9W9ZdIL_s/s320/costanera-4.jpg" alt="" id="BLOGGER_PHOTO_ID_5541505046544457410" border="0" /></a><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_5sUJSQLVQq8/TOdhe-cdfTI/AAAAAAAAANk/A1Vwbkj67EY/s1600/playa-la-barca.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 210px;" src="http://2.bp.blogspot.com/_5sUJSQLVQq8/TOdhe-cdfTI/AAAAAAAAANk/A1Vwbkj67EY/s320/playa-la-barca.jpg" alt="" id="BLOGGER_PHOTO_ID_5541505051289025842" border="0" /></a><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_5sUJSQLVQq8/TOdhfAwsZxI/AAAAAAAAANs/A0pitNwv7EQ/s1600/playa-blanca2.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 210px;" src="http://2.bp.blogspot.com/_5sUJSQLVQq8/TOdhfAwsZxI/AAAAAAAAANs/A0pitNwv7EQ/s320/playa-blanca2.jpg" alt="" id="BLOGGER_PHOTO_ID_5541505051910760210" border="0" /></a><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_5sUJSQLVQq8/TOdhfrTS8FI/AAAAAAAAAN0/ITBaVHjHQyI/s1600/playa-blanca.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 210px;" src="http://2.bp.blogspot.com/_5sUJSQLVQq8/TOdhfrTS8FI/AAAAAAAAAN0/ITBaVHjHQyI/s320/playa-blanca.jpg" alt="" id="BLOGGER_PHOTO_ID_5541505063330181202" border="0" /></a><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_5sUJSQLVQq8/TOdhgPb6qZI/AAAAAAAAAN8/HH8g4jG01bU/s1600/surf.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 210px;" src="http://4.bp.blogspot.com/_5sUJSQLVQq8/TOdhgPb6qZI/AAAAAAAAAN8/HH8g4jG01bU/s320/surf.jpg" alt="" id="BLOGGER_PHOTO_ID_5541505073030015378" border="0" /></a><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_5sUJSQLVQq8/TOdiSwC7AuI/AAAAAAAAAOE/x7fuOiQVHyY/s1600/puesta-de-sol2.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 210px;" src="http://4.bp.blogspot.com/_5sUJSQLVQq8/TOdiSwC7AuI/AAAAAAAAAOE/x7fuOiQVHyY/s320/puesta-de-sol2.jpg" alt="" id="BLOGGER_PHOTO_ID_5541505940777009890" border="0" /></a><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_5sUJSQLVQq8/TOdiTFqFbyI/AAAAAAAAAOM/ZxNXia8gSKE/s1600/parador.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 210px;" src="http://3.bp.blogspot.com/_5sUJSQLVQq8/TOdiTFqFbyI/AAAAAAAAAOM/ZxNXia8gSKE/s320/parador.jpg" alt="" id="BLOGGER_PHOTO_ID_5541505946578415394" border="0" /></a><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_5sUJSQLVQq8/TOdiUGcPEkI/AAAAAAAAAOU/dc32NtUCU4k/s1600/centro.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 210px;" src="http://1.bp.blogspot.com/_5sUJSQLVQq8/TOdiUGcPEkI/AAAAAAAAAOU/dc32NtUCU4k/s320/centro.jpg" alt="" id="BLOGGER_PHOTO_ID_5541505963968631362" border="0" /></a><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_5sUJSQLVQq8/TOdiVcjooaI/AAAAAAAAAOc/zBJDkNrn_rg/s1600/jardin-japones.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 210px;" src="http://3.bp.blogspot.com/_5sUJSQLVQq8/TOdiVcjooaI/AAAAAAAAAOc/zBJDkNrn_rg/s320/jardin-japones.jpg" alt="" id="BLOGGER_PHOTO_ID_5541505987085115810" border="0" /></a><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_5sUJSQLVQq8/TOdiVpF3EnI/AAAAAAAAAOk/nEeZTXA4v0k/s1600/calle-tipica.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 210px; height: 320px;" src="http://3.bp.blogspot.com/_5sUJSQLVQq8/TOdiVpF3EnI/AAAAAAAAAOk/nEeZTXA4v0k/s320/calle-tipica.jpg" alt="" id="BLOGGER_PHOTO_ID_5541505990449894002" border="0" /></a>alexhttp://www.blogger.com/profile/03053409769511814909noreply@blogger.com0tag:blogger.com,1999:blog-1520671859647445307.post-55757877064014322632010-11-19T17:45:00.000-08:002010-12-16T07:13:14.927-08:00Improvements to the video component<div style="text-align: justify;">i was thinking in possible improvements to the video component and i have finished the coding of the following features:<br /><br />- 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.<br /><br />- i have added two new methods to the control:<br />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.<br />and when is used with false, the controls will be always visible.<br /><br />show_controls(true/false): allows you hide or show the controls (play button, etc.).<br /><br />- now the component shows the played time and the total time of the video.</div>alexhttp://www.blogger.com/profile/03053409769511814909noreply@blogger.com0tag:blogger.com,1999:blog-1520671859647445307.post-45494380496041169682010-11-17T13:07:00.001-08:002011-05-04T15:23:50.568-07:00FAQ for hummingbird<div style="text-align: justify;">I was thinking that a faq (frequently asked questions) is a good way to respond some questions that you could have. So here is:<br /><br /><span style="font-weight: bold;">¿ what is hummingbird ?</span><br />Hummingbird is a powerful online cms (content management system)<br /><br /><span style="font-weight: bold;">¿ but what is a cms ?</span><br />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.<br /><br /><span style="font-weight: bold;">¿ will I need to create an account to use it ?</span><br />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.<br /><br /><span style="font-weight: bold;">¿ will I can to control who has access to my pages ?</span><br />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)<br /><br /><span style="font-weight: bold;">¿ what is the copying permission ?</span><br />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.<br /><br /><span style="font-weight: bold;">¿ has hummingbird a control panel ?</span><br />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).<br />On the control panel you can see and delete your uploaded resources (images and videos). And you have access to your account info.<br /><br /><span style="font-weight: bold;">¿ could you tell me about the designer ?</span><br />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.<br /><br /><span style="font-weight: bold;">¿ will use my web pages this ajax type technology with all the advantages that it provides ?</span><br />yes, every time someone visit a page, the page will use this technology when need it.<br /><br /><span style="font-weight: bold;">Ok, but tell me more about the editor</span>.<br />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.<br /><br /><span style="font-weight: bold;">¿ what are the built in components offered for the editor ?</span><br />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.<br />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.<br /><br /><span style="font-weight: bold;">¿ what can i do with the scripting language ?</span><br />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.<br /><br /><span style="font-weight: bold;">¿ and if I need some widget not offered for hummingbird ?</span><br />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.<br />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.<br /><br /><span style="font-weight: bold;">¿ could be a hummingbird page embedded inside other page ?</span><br />of course, you can embeding in other page using for example a div or iframe tag.<br /><br /><span style="font-weight: bold;">¿ why the name hummingbird ?</span><br />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.</div>alexhttp://www.blogger.com/profile/03053409769511814909noreply@blogger.com0tag:blogger.com,1999:blog-1520671859647445307.post-15475939087152068162010-11-12T10:53:00.000-08:002011-04-11T11:23:47.806-07:00Looking for a partner<div style="text-align: justify;">At this time, Hummingbird has come to the point where it's ready for testing with users, but i face some questions:<br /><br />1. I need someone that supports the project with web hosting. The web hosting must have the following features:<br />- asp.net<br />- sql server 2000 or above<br />- high speed<br />- big disk space<br />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.<br /><br />2. To hummingbird begins to fly, the project will need that any project needs: funds.<br />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.<br /><br />At this moment i am looking for a partner ideally from USA, that help the project to get the following:<br />- review any mistake in the text of this blog.<br />- get a web hosting with the above features (this is a primary need at this time).<br />- 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.<br />- the partner would be ideally someone who has participated sucefully on software ventures, <span id="result_box" class="short_text" lang="en"><span style="" title="">self-motivated, with high communication skills, able 'to sell' the project.</span></span><br /><span id="result_box" class="short_text" lang="en"><span style="" title="">- the partner will be in charge of the creation of the business plan.</span></span><br /><span id="result_box" class="short_text" lang="en"><span style="" title=""></span></span><br /><br /><span id="result_box" class="short_text" lang="en"><span style="" title="">¿ why could be interesting for someone invest on Chile ?</span></span><br /><span id="result_box" class="short_text" lang="en"><span style="" title="">i want to invite you to read the following article on techcrunch:</span></span><br /><span id="result_box" class="short_text" lang="en"><span style="" title=""><a href="http://techcrunch.com/2009/10/10/chile-wants-your-poor-your-huddled-masses-your-tech-entrepreneurs/">investing on chile </a></span></span><br /><span id="result_box" class="short_text" lang="en"><span style="" title="">and this other one:</span></span><br /><span id="result_box" class="short_text" lang="en"><span style="" title=""><a href="http://startupchile.wordpress.com/">startup chile</a></span></span><br /><br /><br />so ¿ what can i offers to you at this moment ?<br />on the economic nothing for the moment. But if the projects become a big success, you will share the profits with me.<br />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 <span id="result_box" class="short_text" lang="en"><span style="" title="">successful </span></span>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.<br />If you have the needed, then send me a resume and tell me about you and your contacts network.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_5sUJSQLVQq8/TOFCt8FPZjI/AAAAAAAAANU/HcR-n--O0qA/s1600/the_best_demotivational_posters_of_may_84.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 284px;" src="http://2.bp.blogspot.com/_5sUJSQLVQq8/TOFCt8FPZjI/AAAAAAAAANU/HcR-n--O0qA/s400/the_best_demotivational_posters_of_may_84.jpg" alt="" id="BLOGGER_PHOTO_ID_5539782373632075314" border="0" /></a></div>alexhttp://www.blogger.com/profile/03053409769511814909noreply@blogger.com0tag:blogger.com,1999:blog-1520671859647445307.post-3413151999370638782010-09-01T09:50:00.001-07:002011-03-12T10:16:10.145-08:00Enhanced widgets support<div style="text-align: justify;">i had been working on the widgets support, enhancing the communication system and support between hummingbird and the widgets.<br />on the following picture you will see a new button on the tools window:<br /></div><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_5sUJSQLVQq8/TH6EdW4h_ZI/AAAAAAAAAL0/UUJYUv3kUEY/s1600/imagen35.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://3.bp.blogspot.com/_5sUJSQLVQq8/TH6EdW4h_ZI/AAAAAAAAAL0/UUJYUv3kUEY/s400/imagen35.jpg" alt="" id="BLOGGER_PHOTO_ID_5511988633841827218" border="0" /></a><br /><div style="text-align: justify;">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.<br />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.<br /><div style="text-align: justify;">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.<br />On the following picture you will see a simplified schema showing this:<br /></div><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/-5To-MWFQgD8/TXu4OCuUkFI/AAAAAAAAASc/1i3ItO_7_ow/s1600/imagen36B.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 239px;" src="http://2.bp.blogspot.com/-5To-MWFQgD8/TXu4OCuUkFI/AAAAAAAAASc/1i3ItO_7_ow/s400/imagen36B.jpg" alt="" id="BLOGGER_PHOTO_ID_5583258714444697682" border="0" /></a>I have developed two widgets for testing, and i must to say it works great.<br /></div><div style="text-align: justify;">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.<br />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.<br />It open too new business possibilities developing widgets for hummingbird. These widgets could be developed for some partner ? maybe. these are thoughts of mine.<br /></div>alexhttp://www.blogger.com/profile/03053409769511814909noreply@blogger.com0tag:blogger.com,1999:blog-1520671859647445307.post-38357511586558807712010-07-19T12:57:00.000-07:002010-08-23T07:22:13.835-07:00Now supporting widgets<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_5sUJSQLVQq8/TESvUQl-phI/AAAAAAAAAK8/eCHfEoGxMXU/s1600/nowSupportingWidgets.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 120px; height: 120px;" src="http://2.bp.blogspot.com/_5sUJSQLVQq8/TESvUQl-phI/AAAAAAAAAK8/eCHfEoGxMXU/s400/nowSupportingWidgets.png" alt="" id="BLOGGER_PHOTO_ID_5495710207885354514" border="0" /></a><br /><p class="MsoNormal" style="text-align: justify;"><!--[if gte mso 9]><xml> <w:worddocument> <w:view>Normal</w:View> <w:zoom>0</w:Zoom> <w:hyphenationzone>21</w:HyphenationZone> <w:compatibility> <w:breakwrappedtables/> <w:snaptogridincell/> <w:wraptextwithpunct/> <w:useasianbreakrules/> </w:Compatibility> <w:browserlevel>MicrosoftInternetExplorer4</w:BrowserLevel> </w:WordDocument> </xml><![endif]--><style> <!-- /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-parent:""; margin:0cm; margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:"Times New Roman"; mso-fareast-font-family:"Times New Roman";} @page Section1 {size:612.0pt 792.0pt; margin:70.85pt 3.0cm 70.85pt 3.0cm; mso-header-margin:36.0pt; mso-footer-margin:36.0pt; mso-paper-source:0;} div.Section1 {page:Section1;} --> </style><!--[if gte mso 10]> <style> /* Style Definitions */ table.MsoNormalTable {mso-style-name:"Tabla normal"; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-parent:""; mso-padding-alt:0cm 5.4pt 0cm 5.4pt; mso-para-margin:0cm; mso-para-margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:10.0pt; font-family:"Times New Roman";} </style> <![endif]--><span style="" lang="EN-US"><o:p></o:p></span> </p><p class="MsoNormal" style="text-align: justify;"><span style="" lang="EN-US"><br /></span></p><p class="MsoNormal" style="text-align: justify;"><span style="" lang="EN-US">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).<o:p></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="" lang="EN-US"><o:p> </o:p></span></p><p class="MsoNormal" style="text-align: justify;"><span style="" lang="EN-US"><o:p><br /></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="" lang="EN-US">Why use widgets ?</span></p><p class="MsoNormal" style="text-align: justify;"><br /><span style="" lang="EN-US"><o:p></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="" lang="EN-US">The support of widgets<span style=""> </span>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.<o:p></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="" lang="EN-US"><o:p> </o:p></span></p><p class="MsoNormal" style="text-align: justify;"><span style="" lang="EN-US"><o:p><br /></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="" lang="EN-US">What kind of funcionalities could be offered trough widgets ?</span></p><p class="MsoNormal" style="text-align: justify;"><br /><span style="" lang="EN-US"><o:p></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="" lang="EN-US">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.<o:p></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="" lang="EN-US"><o:p> </o:p></span></p><p class="MsoNormal" style="text-align: justify;"><span style="" lang="EN-US"><o:p><br /></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="" lang="EN-US">What way will be used the properties/methods in to a widget ?</span></p><p class="MsoNormal" style="text-align: justify;"><br /><span style="" lang="EN-US"><o:p></o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span style="" lang="EN-US">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).</span></p><p class="MsoNormal" style="text-align: justify;"><br /></p><p class="MsoNormal" style="text-align: justify;"><br /><span style="" lang="EN-US"><o:p></o:p></span></p>alexhttp://www.blogger.com/profile/03053409769511814909noreply@blogger.com0tag:blogger.com,1999:blog-1520671859647445307.post-21278900417770188272010-01-14T07:25:00.000-08:002010-02-02T17:36:27.220-08:00Scripting Part II<div align="center"><strong><u>Example 2</u></strong></div><br /><br /><div align="justify">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:</div><br /><div align="justify">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: </div><br /><div align="justify"></div><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_5sUJSQLVQq8/S089q8MmCwI/AAAAAAAAAJ4/-ALkXpAM9E8/s1600-h/screen_script5.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://3.bp.blogspot.com/_5sUJSQLVQq8/S089q8MmCwI/AAAAAAAAAJ4/-ALkXpAM9E8/s400/screen_script5.JPG" alt="" id="BLOGGER_PHOTO_ID_5426623883927489282" border="0" /></a><br /><p>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:<br /></p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_5sUJSQLVQq8/S0893X-6tMI/AAAAAAAAAKA/EG-joZi6uM8/s1600-h/screen_script6.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://1.bp.blogspot.com/_5sUJSQLVQq8/S0893X-6tMI/AAAAAAAAAKA/EG-joZi6uM8/s400/screen_script6.JPG" alt="" id="BLOGGER_PHOTO_ID_5426624097544746178" border="0" /></a><div align="justify"><br />… we need the tweenlite library so include it in the imports event. </div><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_5sUJSQLVQq8/S08-B7NQbJI/AAAAAAAAAKI/Znq5hO0X8nk/s1600-h/screen_script7.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://1.bp.blogspot.com/_5sUJSQLVQq8/S08-B7NQbJI/AAAAAAAAAKI/Znq5hO0X8nk/s400/screen_script7.JPG" alt="" id="BLOGGER_PHOTO_ID_5426624278798822546" border="0" /></a><br /><p>...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.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_5sUJSQLVQq8/S08-O6-SLNI/AAAAAAAAAKQ/kA1L8U38E3w/s1600-h/screen_script8.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://3.bp.blogspot.com/_5sUJSQLVQq8/S08-O6-SLNI/AAAAAAAAAKQ/kA1L8U38E3w/s400/screen_script8.JPG" alt="" id="BLOGGER_PHOTO_ID_5426624502074322130" border="0" /></a><br /></p>...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.<br /><br /><div align="justify"> </div><div align="justify">Save the page and now test it: open another tab or window in your browser and write on the address:<a href="http://url/webdesigner/webdesigner.html?cp=alex1">http://url/webdesigner/webdesigner.html?cp=alex1</a>where 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.</div><div align="justify"> </div><div align="justify">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.</div><br /><div align="justify"></div>alexhttp://www.blogger.com/profile/03053409769511814909noreply@blogger.com2tag:blogger.com,1999:blog-1520671859647445307.post-69354531883007118742010-01-01T17:24:00.000-08:002011-03-09T13:58:38.877-08:00Scripting Engine Part I<a href="http://4.bp.blogspot.com/_5sUJSQLVQq8/S0tsPBOuC4I/AAAAAAAAAIE/-h01hZ8BQlU/s1600-h/screen_script1.JPG"></a><br /><br /><div style="text-align: right;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_5sUJSQLVQq8/Sz6g2viVhFI/AAAAAAAAAHk/JwhnG-a-Hiw/s1600-h/nowSupporting.png"><img id="BLOGGER_PHOTO_ID_5421947863734518866" style="margin: 0px auto 10px; display: block; width: 120px; cursor: pointer; height: 120px; text-align: center;" alt="" src="http://4.bp.blogspot.com/_5sUJSQLVQq8/Sz6g2viVhFI/AAAAAAAAAHk/JwhnG-a-Hiw/s400/nowSupporting.png" border="0" /></a><br /></div><v:stroke joinstyle="miter"><v:f eqn="if lineDrawn pixelLineWidth 0"><v:f eqn="sum @0 1 0"><v:f eqn="sum 0 0 @1"><v:f eqn="prod @2 1 2"><v:f eqn="prod @3 21600 pixelWidth"><v:f eqn="prod @3 21600 pixelHeight"><v:f eqn="sum @0 0 1"><v:f eqn="prod @6 1 2"><v:f eqn="prod @7 21600 pixelWidth"><v:f eqn="sum @8 21600 0"><v:f eqn="prod @7 21600 pixelHeight"><v:f eqn="sum @10 21600 0"><v:path connecttype="rect" gradientshapeok="t" extrusionok="f"><o:lock aspectratio="t" ext="edit"><v:imagedata title="nowSupporting" src="file:///C:%5CWINDOWS%5CTEMP%5Cmsohtml1%5C01%5Cclip_image001.png"><p class="MsoNormal" style="text-align: right;" align="right"><o:p></o:p></p><p class="MsoNormal" style="text-align: justify;"><span lang="EN-US">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</span><br /></p><p class="MsoNormal" style="text-align: justify;"><span lang="EN-US"><o:p></o:p></span></p><br /><p class="MsoNormal" style="text-align: center;" align="center"><u><span lang="EN-US" style="font-size:14px;"><strong>Introduction to the scripting language</strong></span></u><br /></p><p class="MsoNormal" style="text-align: center;" align="center"><span lang="EN-US" style="font-size:14px;"><o:p></o:p></span></p><br /><br /><p class="MsoNormal" style="text-align: justify;"><span lang="EN-US">The language supports sentences like the one encountered in AS3 or Javascript:</span><br /></p><p class="MsoNormal" style="margin-left: 36pt; text-indent: -18pt; text-align: justify;"><b><span lang="EN-US">Import </span></b><span lang="EN-US">, for import libraries to use.<b><o:p></o:p></b></span></p><br /><p class="MsoNormal" style="margin-left: 36pt; text-indent: -18pt; text-align: justify;"><b><span lang="EN-US">{ </span></b><span lang="EN-US">and <b>} </b>(curly braces to define a block of sentences)<b><o:p></o:p></b></span></p><br /><p class="MsoNormal" style="margin-left: 36pt; text-indent: -18pt; text-align: justify;"><b><span lang="EN-US">var </span></b><span lang="EN-US">(to define variables)<b><o:p></o:p></b></span></p><br /><p class="MsoNormal" style="margin-left: 36pt; text-indent: -18pt; text-align: justify;"><b><span lang="EN-US">for</span></b><span lang="EN-US"> (to make loops)<o:p></o:p></span></p><br /><p class="MsoNormal" style="margin-left: 36pt; text-indent: -18pt; text-align: justify;"><b><span lang="EN-US">break </span></b><span lang="EN-US">(to break loops)<o:p></o:p></span></p><br /><p class="MsoNormal" style="margin-left: 36pt; text-indent: -18pt; text-align: justify;"><b><span lang="EN-US">continue </span></b><span lang="EN-US">(to jump to the next step in a loop)<o:p></o:p></span></p><br /><p class="MsoNormal" style="margin-left: 36pt; text-indent: -18pt; text-align: justify;"><b><span lang="EN-US">if </span></b><span lang="EN-US">(for evaluate conditions)<o:p></o:p></span></p><br /><p class="MsoNormal" style="margin-left: 36pt; text-indent: -18pt; text-align: justify;"><b><span lang="EN-US">while </span></b><span lang="EN-US">(to make loops)<o:p></o:p></span></p><br /><p class="MsoNormal" style="margin-left: 36pt; text-indent: -18pt; text-align: justify;"><b><span lang="EN-US">function </span></b><span lang="EN-US">(allow you define your own functions)<o:p></o:p></span></p><br /><p class="MsoNormal" style="margin-left: 36pt; text-indent: -18pt; text-align: justify;"><b><span lang="EN-US">return </span></b><span lang="EN-US">(to return from a function)<o:p></o:p></span></p><br /><p class="MsoNormal" style="margin-left: 36pt; text-indent: -18pt; text-align: justify;"><b><span lang="EN-US">switch </span></b><span lang="EN-US">(to execute a sentences group upon a value)<o:p></o:p></span></p><br /><p class="MsoNormal" style="margin-left: 36pt; text-indent: -18pt; text-align: justify;"><b><span lang="EN-US">// </span></b><span lang="EN-US">(comment the line)<b><o:p></o:p></b></span></p><br /><p class="MsoNormal" style="margin-left: 36pt; text-indent: -18pt; text-align: justify;"><b><span lang="EN-US">/*</span></b><span lang="EN-US"> and <b>*/ </b>(comments lines between)<b><o:p></o:p></b></span></p><br /><p class="MsoNormal" style="margin-left: 36pt; text-indent: -18pt; text-align: justify;"><span lang="EN-US">numerical operators like +,-,*,/<o:p></o:p></span></p><br /><p class="MsoNormal" style="margin-left: 36pt; text-indent: -18pt; text-align: justify;"><span lang="EN-US">logical operators like &&, || , not (and, or and not respectively)</span><br /><br /></p><p class="MsoNormal" style="text-align: center;" align="center"><b><u><span lang="EN-US" style="font-size:14px;">Accesing the scripts window</span></u></b><br /></p><p class="MsoNormal" style="text-align: center;" align="center"><b><u><span lang="EN-US" style="font-size:14px;"><o:p></o:p></span></u></b></p><br /><br /><p class="MsoNormal" style="text-align: justify;"><span lang="EN-US">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:</span><br /><br /><br /></p><p class="MsoNormal" style="text-align: justify;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_5sUJSQLVQq8/Sz6hWyJoKBI/AAAAAAAAAHs/-lw5NGJXeAU/s1600-h/scriptsWindow.JPG"><img id="BLOGGER_PHOTO_ID_5421948414192003090" style="margin: 0px auto 10px; display: block; width: 400px; cursor: pointer; height: 300px; text-align: center;" alt="" src="http://4.bp.blogspot.com/_5sUJSQLVQq8/Sz6hWyJoKBI/AAAAAAAAAHs/-lw5NGJXeAU/s400/scriptsWindow.JPG" border="0" /></a></p><br /><p class="MsoNormal" style="text-align: justify;"><span lang="EN-US"><o:p></o:p></span></p><p class="MsoNormal" style="text-align: justify;"><span lang="EN-US"><o:p></o:p></span></p><p class="MsoNormal" style="text-align: justify;"><span lang="EN-US">On this window you will write all the scripts for your page.<o:p></o:p></span></p><br /><br /><p class="MsoNormal" style="text-align: justify;"><span lang="EN-US">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.<o:p></o:p></span></p><br /><p class="MsoNormal" style="text-align: justify;"><span lang="EN-US">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.</span></p><p class="MsoNormal" style="text-align: justify;"><br /></p><p class="MsoNormal" style="text-align: center;" align="center"><b><u><span lang="EN-US" style="font-size:14px;">About the hummingbird object architecture</span></u></b></p><p class="MsoNormal" style="text-align: justify;"><span lang="EN-US"><o:p></o:p></span></p><br /><br /><br /><p class="MsoNormal" style="text-align: justify;"><span lang="EN-US">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.<o:p></o:p></span></p><br /><br /><p class="MsoNormal" style="text-align: justify;"><span lang="EN-US">Watch the following picture:</span></p><br /><br /><p class="MsoNormal" style="text-align: justify;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_5sUJSQLVQq8/Sz6hkMD6LJI/AAAAAAAAAH0/3GsRgpauhZ0/s1600-h/imagen19Scripting.JPG"><img id="BLOGGER_PHOTO_ID_5421948644485639314" style="margin: 0px auto 10px; display: block; width: 400px; cursor: pointer; height: 300px; text-align: center;" alt="" src="http://3.bp.blogspot.com/_5sUJSQLVQq8/Sz6hkMD6LJI/AAAAAAAAAH0/3GsRgpauhZ0/s400/imagen19Scripting.JPG" border="0" /></a> </p><br /><br /><p class="MsoNormal" style="text-align: justify;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_5sUJSQLVQq8/Sz6h1ohpcsI/AAAAAAAAAH8/ujd3XPf4_HA/s1600-h/jerarquiaEjemplo.JPG"><img id="BLOGGER_PHOTO_ID_5421948944184341186" style="margin: 0px auto 10px; display: block; width: 400px; cursor: pointer; height: 380px; text-align: center;" alt="" src="http://4.bp.blogspot.com/_5sUJSQLVQq8/Sz6h1ohpcsI/AAAAAAAAAH8/ujd3XPf4_HA/s400/jerarquiaEjemplo.JPG" border="0" /></a></p><br /><p class="MsoNormal" style="text-align: justify;"><span lang="EN-US"><o:p></o:p></span></p><p class="MsoNormal" style="text-align: justify;"><o:lock aspectratio="t" ext="edit"><o:rel ext="edit" iddest="#_s1035" idsrc="#_s1035"><o:rel ext="edit" iddest="#_s1035" idsrc="#_s1036" idcntr="#_s1034"><o:rel ext="edit" iddest="#_s1035" idsrc="#_s1037" idcntr="#_s1033"><o:rel ext="edit" iddest="#_s1035" idsrc="#_s1038" idcntr="#_s1032"><o:rel ext="edit" iddest="#_s1038" idsrc="#_s1039" idcntr="#_s1031"><o:rel ext="edit" iddest="#_s1035" idsrc="#_s1040" idcntr="#_s1030"><o:rel ext="edit" iddest="#_s1035" idsrc="#_s1041" idcntr="#_s1029"><o:rel ext="edit" iddest="#_s1035" idsrc="#_s1042" idcntr="#_s1028"><v:fill type="gradient" focus="100%" method="linear sigma" detectmouseclick="t" rotate="t" color2="fill darken(118)"><v:path connecttype="none" extrusionok="t"><o:lock text="t" ext="edit"><v:stroke joinstyle="miter"><v:path connecttype="none" fillok="f" arrowok="t"><o:lock ext="edit" shapetype="t"><v:shape id="_s1028" type="#_x0000_t33" strokeweight="2.25pt" adj="-296820,-33440,-296820" connectortype="elbow" spid="_x0000_s1028"><v:shape id="_s1029" type="#_x0000_t33" strokeweight="2.25pt" adj="-296820,-35530,-296820" connectortype="elbow" spid="_x0000_s1029"><v:shape id="_s1030" type="#_x0000_t33" strokeweight="2.25pt" adj="-296820,-38515,-296820" connectortype="elbow" spid="_x0000_s1030"><v:shape id="_s1031" type="#_x0000_t33" strokeweight="2.25pt" adj="-383220,-237048,-383220" connectortype="elbow" spid="_x0000_s1031"><v:shape id="_s1032" type="#_x0000_t33" strokeweight="2.25pt" adj="-296820,-51205,-296820" connectortype="elbow" spid="_x0000_s1032"><v:shape id="_s1033" type="#_x0000_t33" strokeweight="2.25pt" adj="-296820,-68974,-296820" connectortype="elbow" spid="_x0000_s1033"><v:shape id="_s1034" type="#_x0000_t33" strokeweight="2.25pt" adj="-296820,-139929,-296820" connectortype="elbow" spid="_x0000_s1034"><v:fill type="gradient" focus="-50%" rotate="t" color2="blue"><v:fill type="gradient" focus="-50%" rotate="t" color2="blue"><v:fill type="gradient" focus="-50%" rotate="t" color2="blue"><v:fill type="gradient" focus="-50%" rotate="t" color2="blue"><v:fill type="gradient" focus="-50%" rotate="t" color2="blue"><v:fill type="gradient" focus="-50%" rotate="t" color2="blue"><v:fill type="gradient" focus="-50%" rotate="t" color2="blue"><v:fill type="gradient" focus="-50%" rotate="t" color2="blue"><w:wrap type="none"></w:wrap></v:fill></v:fill></v:fill></v:fill></v:fill></v:fill></v:fill></v:fill></v:shape></v:shape></v:shape></v:shape></v:shape></v:shape></v:shape></o:lock></v:path></v:stroke></o:lock></v:path></v:fill></o:rel></o:rel></o:rel></o:rel></o:rel></o:rel></o:rel></o:rel></o:lock></p><p class="MsoNormal" style="margin-left: 36pt; text-indent: -18pt; text-align: justify;"> </p><p class="MsoNormal" style="margin-left: 36pt; text-indent: -18pt; text-align: justify;"><o:lock aspectratio="t" ext="edit"><o:rel ext="edit" iddest="#_s1035" idsrc="#_s1035"><o:rel ext="edit" iddest="#_s1035" idsrc="#_s1036" idcntr="#_s1034"><o:rel ext="edit" iddest="#_s1035" idsrc="#_s1037" idcntr="#_s1033"><o:rel ext="edit" iddest="#_s1035" idsrc="#_s1038" idcntr="#_s1032"><o:rel ext="edit" iddest="#_s1038" idsrc="#_s1039" idcntr="#_s1031"><o:rel ext="edit" iddest="#_s1035" idsrc="#_s1040" idcntr="#_s1030"><o:rel ext="edit" iddest="#_s1035" idsrc="#_s1041" idcntr="#_s1029"><o:rel ext="edit" iddest="#_s1035" idsrc="#_s1042" idcntr="#_s1028"><v:fill type="gradient" focus="100%" method="linear sigma" detectmouseclick="t" rotate="t" color2="fill darken(118)"><v:path connecttype="none" extrusionok="t"><o:lock text="t" ext="edit"><v:stroke joinstyle="miter"><v:path connecttype="none" fillok="f" arrowok="t"><o:lock ext="edit" shapetype="t"><v:shape type="#_x0000_t33" strokeweight="2.25pt" adj="-296820,-33440,-296820" connectortype="elbow" spid="_x0000_s1028"><v:shape type="#_x0000_t33" strokeweight="2.25pt" adj="-296820,-35530,-296820" connectortype="elbow" spid="_x0000_s1029"><v:shape type="#_x0000_t33" strokeweight="2.25pt" adj="-296820,-38515,-296820" connectortype="elbow" spid="_x0000_s1030"><v:shape type="#_x0000_t33" strokeweight="2.25pt" adj="-383220,-237048,-383220" connectortype="elbow" spid="_x0000_s1031"><v:shape type="#_x0000_t33" strokeweight="2.25pt" adj="-296820,-51205,-296820" connectortype="elbow" spid="_x0000_s1032"><v:shape type="#_x0000_t33" strokeweight="2.25pt" adj="-296820,-68974,-296820" connectortype="elbow" spid="_x0000_s1033"><v:shape type="#_x0000_t33" strokeweight="2.25pt" adj="-296820,-139929,-296820" connectortype="elbow" spid="_x0000_s1034"><v:fill type="gradient" focus="-50%" rotate="t" color2="blue"><v:fill type="gradient" focus="-50%" rotate="t" color2="blue"><v:fill type="gradient" focus="-50%" rotate="t" color2="blue"><v:fill type="gradient" focus="-50%" rotate="t" color2="blue"><v:fill type="gradient" focus="-50%" rotate="t" color2="blue"><v:fill type="gradient" focus="-50%" rotate="t" color2="blue"><v:fill type="gradient" focus="-50%" rotate="t" color2="blue"><v:fill type="gradient" focus="-50%" rotate="t" color2="blue"><w:wrap type="none"><span lang="EN-US">0 The root component is the page object (this is true for any page)<o:p></o:p></span></w:wrap></v:fill></v:fill></v:fill></v:fill></v:fill></v:fill></v:fill></v:fill></v:shape></v:shape></v:shape></v:shape></v:shape></v:shape></v:shape></o:lock></v:path></v:stroke></o:lock></v:path></v:fill></o:rel></o:rel></o:rel></o:rel></o:rel></o:rel></o:rel></o:rel></o:lock><span lang="EN-US"><br /></span></p><br /><p class="MsoNormal" style="margin-left: 36pt; text-indent: -18pt; text-align: justify;"><span lang="EN-US">1 is a panel component which is behind (remember you can superpose components) the components numbered like 2, 3, 4, 5, 6, 7, etc.<o:p></o:p></span></p><br /><p class="MsoNormal" style="margin-left: 36pt; text-indent: -18pt; text-align: justify;"><span lang="EN-US">2 is a text component which is a direct child of the page object<o:p></o:p></span></p><br /><p class="MsoNormal" style="margin-left: 36pt; text-indent: -18pt; text-align: justify;"><span lang="EN-US">3 is a panel component which is a direct child of the page object<o:p></o:p></span></p><br /><p class="MsoNormal" style="margin-left: 36pt; text-indent: -18pt; text-align: justify;"><span lang="EN-US">4 is a picture component which is a direct child of 3 (a panel)<o:p></o:p></span></p><br /><p class="MsoNormal" style="margin-left: 36pt; text-indent: -18pt; text-align: justify;"><span lang="EN-US">5 is a text component which is a direct child of the page object<o:p></o:p></span></p><br /><p class="MsoNormal" style="margin-left: 36pt; text-indent: -18pt; text-align: justify;"><span lang="EN-US">6 is a video component which is a direct child of the page object<o:p></o:p></span></p><br /><p class="MsoNormal" style="margin-left: 36pt; text-indent: -18pt; text-align: justify;"><span lang="EN-US">7 is a remarks panel which is a direct child of the page object.</span></p><p class="MsoNormal" style="margin-left: 36pt; text-indent: -18pt; text-align: justify;"><br /></p><p class="MsoNormal" style="text-align: justify;"><span lang="EN-US">There are others components inside the page but with these we could have an idea about the hierarchy model.<o:p></o:p></span></p><p class="MsoNormal" style="text-align: justify;"><span lang="EN-US">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<span style="font-size:0pt;"> </span>a reference to the panel (number 3 object), and with the panel reference get a reference to the picture. <o:p></o:p></span></p><p class="MsoNormal" style="text-align: justify;"><span lang="EN-US">So the question now is how do you get a reference to an object?. Watch the following script:</span></p><br /><p class="MsoNormal" style="text-align: justify;"><span lang="EN-US" style="font-size:100%;">var o=page.findObject2("/jaime29_6/jaime30_5");<o:p></o:p></span></p><p class="MsoNormal" style="text-align: justify;"><span lang="EN-US" style="font-size:100%;">if (o!=null)<o:p></o:p></span></p><p class="MsoNormal" style="text-align: justify;"><span lang="EN-US" style="font-size:100%;">o.visible=false;</span></p><br /><p class="MsoNormal" style="text-align: justify;"><span lang="EN-US">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.<o:p></o:p></span></p><p class="MsoNormal" style="text-align: justify;"><span lang="EN-US">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:<o:p></o:p></span></p><p class="MsoNormal" style="text-align: justify;"><span lang="EN-US">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:</span></p><br /><p class="MsoNormal" style="text-align: justify;"><span lang="EN-US">var o=page.findObject2("/jaime29_6/jaime30_5");<o:p></o:p></span></p><p class="MsoNormal" style="text-align: justify;"><span lang="EN-US">if (o!=null)<o:p></o:p></span></p><p class="MsoNormal" style="text-align: justify;"><span lang="EN-US">{<o:p></o:p></span></p><p class="MsoNormal" style="text-align: justify;"><span lang="EN-US">o.parent.y=6;<o:p></o:p></span></p><p class="MsoNormal" style="text-align: justify;"><span lang="EN-US">o.visible=true;<o:p></o:p></span></p><p class="MsoNormal" style="text-align: justify;"><span lang="EN-US">}</span></p><br /><p class="MsoNormal" style="text-align: justify;"><span lang="EN-US">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.</span></p><br /><p class="MsoNormal" style="text-align: center;" align="center"><span lang="EN-US" style="font-size:14px;"><u><strong>Events</strong></u></span></p></v:imagedata></o:lock></v:path></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:stroke><div style="text-align: justify;"><div style="text-align: justify;"><v:stroke joinstyle="miter"><v:f eqn="if lineDrawn pixelLineWidth 0"><v:f eqn="sum @0 1 0"><v:f eqn="sum 0 0 @1"><v:f eqn="prod @2 1 2"><v:f eqn="prod @3 21600 pixelWidth"><v:f eqn="prod @3 21600 pixelHeight"><v:f eqn="sum @0 0 1"><v:f eqn="prod @6 1 2"><v:f eqn="prod @7 21600 pixelWidth"><v:f eqn="sum @8 21600 0"><v:f eqn="prod @7 21600 pixelHeight"><v:f eqn="sum @10 21600 0"><v:path connecttype="rect" gradientshapeok="t" extrusionok="f"><o:lock aspectratio="t" ext="edit"><v:imagedata title="nowSupporting" src="file:///C:%5CWINDOWS%5CTEMP%5Cmsohtml1%5C01%5Cclip_image001.png"><br /><br /><p class="MsoNormal" style="text-align: justify;"><span lang="EN-US">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.<o:p></o:p></span></p></v:imagedata></o:lock></v:path></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:stroke></div><div style="text-align: justify;"><v:stroke joinstyle="miter"><v:f eqn="if lineDrawn pixelLineWidth 0"><v:f eqn="sum @0 1 0"><v:f eqn="sum 0 0 @1"><v:f eqn="prod @2 1 2"><v:f eqn="prod @3 21600 pixelWidth"><v:f eqn="prod @3 21600 pixelHeight"><v:f eqn="sum @0 0 1"><v:f eqn="prod @6 1 2"><v:f eqn="prod @7 21600 pixelWidth"><v:f eqn="sum @8 21600 0"><v:f eqn="prod @7 21600 pixelHeight"><v:f eqn="sum @10 21600 0"><v:path connecttype="rect" gradientshapeok="t" extrusionok="f"><o:lock aspectratio="t" ext="edit"><v:imagedata title="nowSupporting" src="file:///C:%5CWINDOWS%5CTEMP%5Cmsohtml1%5C01%5Cclip_image001.png"><p class="MsoNormal" style="text-align: justify;"><span lang="EN-US">Events could be executed when a user click on a component, after a double click on a component, roll over a component, etc.<o:p></o:p></span></p></v:imagedata></o:lock></v:path></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:stroke></div><div style="text-align: justify;"><v:stroke joinstyle="miter"><v:f eqn="if lineDrawn pixelLineWidth 0"><v:f eqn="sum @0 1 0"><v:f eqn="sum 0 0 @1"><v:f eqn="prod @2 1 2"><v:f eqn="prod @3 21600 pixelWidth"><v:f eqn="prod @3 21600 pixelHeight"><v:f eqn="sum @0 0 1"><v:f eqn="prod @6 1 2"><v:f eqn="prod @7 21600 pixelWidth"><v:f eqn="sum @8 21600 0"><v:f eqn="prod @7 21600 pixelHeight"><v:f eqn="sum @10 21600 0"><v:path connecttype="rect" gradientshapeok="t" extrusionok="f"><o:lock aspectratio="t" ext="edit"><v:imagedata title="nowSupporting" src="file:///C:%5CWINDOWS%5CTEMP%5Cmsohtml1%5C01%5Cclip_image001.png"><p class="MsoNormal" style="text-align: justify;"><span lang="EN-US">Events could be executed also programmatically, like you will see after.<o:p></o:p></span></p><p class="MsoNormal" style="text-align: justify;"><span lang="EN-US">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:<br />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.</span></p></v:imagedata></o:lock></v:path></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:stroke></div></div><br /><br /><p><v:stroke joinstyle="miter"><v:f eqn="if lineDrawn pixelLineWidth 0"><v:f eqn="sum @0 1 0"><v:f eqn="sum 0 0 @1"><v:f eqn="prod @2 1 2"><v:f eqn="prod @3 21600 pixelWidth"><v:f eqn="prod @3 21600 pixelHeight"><v:f eqn="sum @0 0 1"><v:f eqn="prod @6 1 2"><v:f eqn="prod @7 21600 pixelWidth"><v:f eqn="sum @8 21600 0"><v:f eqn="prod @7 21600 pixelHeight"><v:f eqn="sum @10 21600 0"><v:path connecttype="rect" gradientshapeok="t" extrusionok="f"><o:lock aspectratio="t" ext="edit"><v:imagedata title="nowSupporting" src="file:///C:%5CWINDOWS%5CTEMP%5Cmsohtml1%5C01%5Cclip_image001.png"><strong><u>onCreated</u></strong><br /><br /><strong>executed when:<br /></strong>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.<br /><br /><strong>parameters passed to the event:</strong><br />page: reference to the page object.</v:imagedata></o:lock></v:path></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:stroke></p><p><v:stroke joinstyle="miter"><v:f eqn="if lineDrawn pixelLineWidth 0"><v:f eqn="sum @0 1 0"><v:f eqn="sum 0 0 @1"><v:f eqn="prod @2 1 2"><v:f eqn="prod @3 21600 pixelWidth"><v:f eqn="prod @3 21600 pixelHeight"><v:f eqn="sum @0 0 1"><v:f eqn="prod @6 1 2"><v:f eqn="prod @7 21600 pixelWidth"><v:f eqn="sum @8 21600 0"><v:f eqn="prod @7 21600 pixelHeight"><v:f eqn="sum @10 21600 0"><v:path connecttype="rect" gradientshapeok="t" extrusionok="f"><o:lock aspectratio="t" ext="edit"><v:imagedata title="nowSupporting" src="file:///C:%5CWINDOWS%5CTEMP%5Cmsohtml1%5C01%5Cclip_image001.png">me: reference to the object created.</v:imagedata></o:lock></v:path></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:stroke></p><p><v:stroke joinstyle="miter"><v:f eqn="if lineDrawn pixelLineWidth 0"><v:f eqn="sum @0 1 0"><v:f eqn="sum 0 0 @1"><v:f eqn="prod @2 1 2"><v:f eqn="prod @3 21600 pixelWidth"><v:f eqn="prod @3 21600 pixelHeight"><v:f eqn="sum @0 0 1"><v:f eqn="prod @6 1 2"><v:f eqn="prod @7 21600 pixelWidth"><v:f eqn="sum @8 21600 0"><v:f eqn="prod @7 21600 pixelHeight"><v:f eqn="sum @10 21600 0"><v:path connecttype="rect" gradientshapeok="t" extrusionok="f"><o:lock aspectratio="t" ext="edit"><v:imagedata title="nowSupporting" src="file:///C:%5CWINDOWS%5CTEMP%5Cmsohtml1%5C01%5Cclip_image001.png">global: reference the global object (explained after)</v:imagedata></o:lock></v:path></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:stroke></p><p><v:stroke joinstyle="miter"><v:f eqn="if lineDrawn pixelLineWidth 0"><v:f eqn="sum @0 1 0"><v:f eqn="sum 0 0 @1"><v:f eqn="prod @2 1 2"><v:f eqn="prod @3 21600 pixelWidth"><v:f eqn="prod @3 21600 pixelHeight"><v:f eqn="sum @0 0 1"><v:f eqn="prod @6 1 2"><v:f eqn="prod @7 21600 pixelWidth"><v:f eqn="sum @8 21600 0"><v:f eqn="prod @7 21600 pixelHeight"><v:f eqn="sum @10 21600 0"><v:path connecttype="rect" gradientshapeok="t" extrusionok="f"><o:lock aspectratio="t" ext="edit"><v:imagedata title="nowSupporting" src="file:///C:%5CWINDOWS%5CTEMP%5Cmsohtml1%5C01%5Cclip_image001.png">id: this is a string corresponding to the id of the component.</v:imagedata></o:lock></v:path></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:stroke></p><p class="MsoNormal"><span style="font-size:100%;"><b><span lang="EN-US" style="font-family:Georgia;">Applies</span></b></span><b><span lang="EN-US" style="font-family:Georgia;"><span style="font-size:100%;"> to</span><o:p></o:p></span></b></p><br /><p class="MsoNormal"><span lang="EN-US">Text, image, video, remarks panel, panel.<o:p></o:p></span></p><br /><v:stroke joinstyle="miter"><v:f eqn="if lineDrawn pixelLineWidth 0"><v:f eqn="sum @0 1 0"><v:f eqn="sum 0 0 @1"><v:f eqn="prod @2 1 2"><v:f eqn="prod @3 21600 pixelWidth"><v:f eqn="prod @3 21600 pixelHeight"><v:f eqn="sum @0 0 1"><v:f eqn="prod @6 1 2"><v:f eqn="prod @7 21600 pixelWidth"><v:f eqn="sum @8 21600 0"><v:f eqn="prod @7 21600 pixelHeight"><v:f eqn="sum @10 21600 0"><v:path connecttype="rect" gradientshapeok="t" extrusionok="f"><o:lock aspectratio="t" ext="edit"><v:imagedata title="nowSupporting" src="file:///C:%5CWINDOWS%5CTEMP%5Cmsohtml1%5C01%5Cclip_image001.png"><strong><u>onDirectChildsCreated</u></strong> </v:imagedata></o:lock></v:path></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:stroke><br /><v:stroke joinstyle="miter"><v:f eqn="if lineDrawn pixelLineWidth 0"><v:f eqn="sum @0 1 0"><v:f eqn="sum 0 0 @1"><v:f eqn="prod @2 1 2"><v:f eqn="prod @3 21600 pixelWidth"><v:f eqn="prod @3 21600 pixelHeight"><v:f eqn="sum @0 0 1"><v:f eqn="prod @6 1 2"><v:f eqn="prod @7 21600 pixelWidth"><v:f eqn="sum @8 21600 0"><v:f eqn="prod @7 21600 pixelHeight"><v:f eqn="sum @10 21600 0"><v:path connecttype="rect" gradientshapeok="t" extrusionok="f"><o:lock aspectratio="t" ext="edit"><v:imagedata title="nowSupporting" src="file:///C:%5CWINDOWS%5CTEMP%5Cmsohtml1%5C01%5Cclip_image001.png"><p><strong>executed when:</strong><br />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. </p><p><strong>parameters passed to the event:</strong><br />page: reference to the page object.</p><p>me: reference to the object created.</p><p>global: reference the global object (explained after)</p><p>id: this is a string corresponding to the id of the component. </p><p>codPag: is a string corresponding to the name of the page just loaded.</p><p class="MsoNormal"><span style="font-size:100%;"><b><span lang="EN-US" style="font-family:Georgia;">Applies</span></b></span><b><span lang="EN-US" style="font-family:Georgia;"><span style="font-size:100%;"> to</span><o:p></o:p></span></b></p><p class="MsoNormal"><span lang="EN-US">Page, panel.<o:p></o:p></span></p><br /><strong><u>onClick</u></strong><br /><p><strong>executed when:<br /></strong>when the user click on the component. </p><p><strong>parameters passed to the event:</strong><br />page: reference to the page object.</p><p>me: reference to the object clicked.</p><p>global: reference the global object (explained after)</p><p>id: this is a string corresponding to the id of the component clicked.</p><p class="MsoNormal"><b><span lang="EN-US" style="font-family:Georgia;"><span style="font-size:100%;">Applies to:</span><o:p></o:p></span></b></p><p class="MsoNormal"><span lang="EN-US">Text, image, video, remarks panel, panel.<o:p></o:p></span></p><br /><strong><u>onDoubleClick </u></strong><br /><p><strong>executed when:<br /></strong>when the user double click on the component. </p><p><strong>parameters passed to the event:<br /></strong>page: reference to the page object.</p><p>me: reference to the object double clicked.</p><p>global: reference the global object (explained after)</p><p>id: this is a string corresponding to the id of the component double clicked.</p><p class="MsoNormal"><b><span lang="EN-US" style="font-family:Georgia;"><span style="font-size:100%;">Applies to:</span><o:p></o:p></span></b></p><p class="MsoNormal"><span lang="EN-US">Text, image, video, remarks panel, panel.<o:p></o:p></span></p><br /><br /><u><strong>onRollOver</strong> </u><br /><p><strong>executed when:<br /></strong>when the user roll over the mouse pointer on the component. </p><p><strong>parameters passed to the event:</strong><br />page: reference to the page object.</p><p>me: reference to the object which the mouse is roll over.</p><p>global: reference the global object (explained after)</p><p>id: this is a string corresponding to the id of the component which the mouse is roll over.</p><p class="MsoNormal"><b><span lang="EN-US" style="font-family:Georgia;">Applies to:<o:p></o:p></span></b></p><p class="MsoNormal"><span lang="EN-US">Text, image, video, remarks panel, panel.<o:p></o:p></span></p><br /><br /><strong><u>onRollOut </u></strong><br /><p><strong>executed when:<br /></strong>when the user roll out the mouse pointer out the component. </p><p><strong>parameters passed to the event:<br /></strong>page: reference to the page object.</p><p>me: reference to the object which the mouse is roll out.</p><p>global: reference the global object (explained after)</p><p>id: this is a string corresponding to the id of the component which the mouse is roll out.</p><p class="MsoNormal"><b><span lang="EN-US" style="font-family:Georgia;">Applies to:<o:p></o:p></span></b></p><p class="MsoNormal"><span lang="EN-US">Text, image, video, remarks panel, panel.<o:p></o:p></span></p><br /><br /><strong><u>onPlay</u></strong><br /><p><strong>executed when:<br /></strong>when a video begins to play because a user click the play video component button.</p><p><strong>parameters passed to the event:</strong><br />page: reference to the page object.</p><p>me: reference to the video object which is begin to play.</p><p>global: reference the global object (explained after)</p><p>id: this is a string corresponding to the id of the video component which is begin to play.</p><p class="MsoNormal"><b><span lang="EN-US" style="font-family:Georgia;">Applies to:<o:p></o:p></span></b></p><p class="MsoNormal"><span lang="EN-US">Video.<o:p></o:p></span></p><br /><br /><strong><u>onStop </u></strong><br /><p><strong>executed when:</strong><br />when a video stop to play because a user click the stop video component button. </p><p><strong>parameters passed to the event:</strong><br />page: reference to the page object.</p><p>me: reference to the video object which is stop to play.</p><p>global: reference the global object (explained after)</p><p>id: this is a string corresponding to the id of the video component which is stop to play.</p><p class="MsoNormal"><b><span lang="EN-US" style="font-family:Georgia;">Applies to:<o:p></o:p></span></b></p><p class="MsoNormal"><span lang="EN-US">Video.<o:p></o:p></span></p><br /><br /><strong><u>onRewind </u></strong><br /><p><strong>executed when:</strong><br />when a video rewind because a user click the rewind video component button. </p><p><strong>parameters passed to the event:</strong><br />page: reference to the page object.</p><p>me: reference to the video object which is rewind.</p><p>global: reference the global object (explained after)</p><p>id: this is a string corresponding to the id of the video component which is rewind.<br /></p><p class="MsoNormal"><b><span lang="EN-US" style="font-family:Georgia;">Applies to:<o:p></o:p></span></b></p><p class="MsoNormal"><span lang="EN-US">Video.<o:p></o:p></span></p><br /><p><strong><u>onPlayEnd</u></strong></p><p><strong>executed when:<br /></strong>when a video reaches the end during playback.</p><p><strong>parameters passed to the event:<br /></strong>page: reference to the page object.</p><p>me: reference to the video object which is ending to play.</p><p>global: reference the global object (explained after)</p><p>id: this is a string corresponding to the id of the video component.</p><p class="MsoNormal"><b><span lang="EN-US" style="font-family:Georgia;">Applies to:<o:p></o:p></span></b></p><p class="MsoNormal"><span lang="EN-US">Video.<o:p></o:p></span></p><br /><br /><strong><u>onScroll </u></strong><br /><p><strong>executed when:<br /></strong>when the user scrolls the page using either the horizontal or vertical scroll bar. </p><p><strong>parameters passed to the event:<br /></strong>page: reference to the page object.</p><p>me: reference to object scrolled (in this case the page).</p><p>global: reference the global object (explained after)</p><p>id: this is a string corresponding to the id of the scrolled component.</p><p class="MsoNormal"><b><span lang="EN-US" style="font-family:Georgia;">Applies to:<o:p></o:p></span></b></p><p class="MsoNormal"><span lang="EN-US">Page.<o:p></o:p></span></p><br /><br /><u><strong>onResize</strong> </u><br /><p><strong>executed when:</strong> </p><p>when the browser’s window is resized.</p><p><strong>parameters passed to the event:<br /></strong>page: reference to the page object.</p><p>me: reference to the object resized (in this case the page).</p><p>global: reference the global object (explained after)</p><p>id: this is a string corresponding to the id of the resized component.</p><p class="MsoNormal"><b><span lang="EN-US" style="font-family:Georgia;">Applies to:<o:p></o:p></span></b></p><p class="MsoNormal"><span lang="EN-US">Page.<o:p></o:p></span></p><br /><p align="center"><v:stroke joinstyle="miter"><v:f eqn="if lineDrawn pixelLineWidth 0"><v:f eqn="sum @0 1 0"><v:f eqn="sum 0 0 @1"><v:f eqn="prod @2 1 2"><v:f eqn="prod @3 21600 pixelWidth"><v:f eqn="prod @3 21600 pixelHeight"><v:f eqn="sum @0 0 1"><v:f eqn="prod @6 1 2"><v:f eqn="prod @7 21600 pixelWidth"><v:f eqn="sum @8 21600 0"><v:f eqn="prod @7 21600 pixelHeight"><v:f eqn="sum @10 21600 0"><v:path connecttype="rect" gradientshapeok="t" extrusionok="f"><o:lock aspectratio="t" ext="edit"><v:imagedata title="nowSupporting" src="file:///C:%5CWINDOWS%5CTEMP%5Cmsohtml1%5C01%5Cclip_image001.png"><u><strong>Special Events</strong></u></v:imagedata></o:lock></v:path></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:stroke></p><p align="justify"><v:stroke joinstyle="miter"><v:f eqn="if lineDrawn pixelLineWidth 0"><v:f eqn="sum @0 1 0"><v:f eqn="sum 0 0 @1"><v:f eqn="prod @2 1 2"><v:f eqn="prod @3 21600 pixelWidth"><v:f eqn="prod @3 21600 pixelHeight"><v:f eqn="sum @0 0 1"><v:f eqn="prod @6 1 2"><v:f eqn="prod @7 21600 pixelWidth"><v:f eqn="sum @8 21600 0"><v:f eqn="prod @7 21600 pixelHeight"><v:f eqn="sum @10 21600 0"><v:path connecttype="rect" gradientshapeok="t" extrusionok="f"><o:lock aspectratio="t" ext="edit"><v:imagedata title="nowSupporting" src="file:///C:%5CWINDOWS%5CTEMP%5Cmsohtml1%5C01%5Cclip_image001.png"></v:imagedata></o:lock></v:path></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:stroke><v:stroke joinstyle="miter"><v:f eqn="if lineDrawn pixelLineWidth 0"><v:f eqn="sum @0 1 0"><v:f eqn="sum 0 0 @1"><v:f eqn="prod @2 1 2"><v:f eqn="prod @3 21600 pixelWidth"><v:f eqn="prod @3 21600 pixelHeight"><v:f eqn="sum @0 0 1"><v:f eqn="prod @6 1 2"><v:f eqn="prod @7 21600 pixelWidth"><v:f eqn="sum @8 21600 0"><v:f eqn="prod @7 21600 pixelHeight"><v:f eqn="sum @10 21600 0"><v:path connecttype="rect" gradientshapeok="t" extrusionok="f"><o:lock aspectratio="t" ext="edit"><v:imagedata title="nowSupporting" src="file:///C:%5CWINDOWS%5CTEMP%5Cmsohtml1%5C01%5Cclip_image001.png">There are some special events whose syntax is only the event name. These are:</v:imagedata></o:lock></v:path></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:stroke></p><p align="justify"><v:stroke joinstyle="miter"><v:f eqn="if lineDrawn pixelLineWidth 0"><v:f eqn="sum @0 1 0"><v:f eqn="sum 0 0 @1"><v:f eqn="prod @2 1 2"><v:f eqn="prod @3 21600 pixelWidth"><v:f eqn="prod @3 21600 pixelHeight"><v:f eqn="sum @0 0 1"><v:f eqn="prod @6 1 2"><v:f eqn="prod @7 21600 pixelWidth"><v:f eqn="sum @8 21600 0"><v:f eqn="prod @7 21600 pixelHeight"><v:f eqn="sum @10 21600 0"><v:path connecttype="rect" gradientshapeok="t" extrusionok="f"><o:lock aspectratio="t" ext="edit"><v:imagedata title="nowSupporting" src="file:///C:%5CWINDOWS%5CTEMP%5Cmsohtml1%5C01%5Cclip_image001.png"><strong><u>imports</u></strong></v:imagedata></o:lock></v:path></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:stroke></p><p align="justify"><v:stroke joinstyle="miter"><v:f eqn="if lineDrawn pixelLineWidth 0"><v:f eqn="sum @0 1 0"><v:f eqn="sum 0 0 @1"><v:f eqn="prod @2 1 2"><v:f eqn="prod @3 21600 pixelWidth"><v:f eqn="prod @3 21600 pixelHeight"><v:f eqn="sum @0 0 1"><v:f eqn="prod @6 1 2"><v:f eqn="prod @7 21600 pixelWidth"><v:f eqn="sum @8 21600 0"><v:f eqn="prod @7 21600 pixelHeight"><v:f eqn="sum @10 21600 0"><v:path connecttype="rect" gradientshapeok="t" extrusionok="f"><o:lock aspectratio="t" ext="edit"><v:imagedata title="nowSupporting" src="file:///C:%5CWINDOWS%5CTEMP%5Cmsohtml1%5C01%5Cclip_image001.png"><strong>executed when:</strong></v:imagedata></o:lock></v:path></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:stroke></p><p align="justify"><v:stroke joinstyle="miter"><v:f eqn="if lineDrawn pixelLineWidth 0"><v:f eqn="sum @0 1 0"><v:f eqn="sum 0 0 @1"><v:f eqn="prod @2 1 2"><v:f eqn="prod @3 21600 pixelWidth"><v:f eqn="prod @3 21600 pixelHeight"><v:f eqn="sum @0 0 1"><v:f eqn="prod @6 1 2"><v:f eqn="prod @7 21600 pixelWidth"><v:f eqn="sum @8 21600 0"><v:f eqn="prod @7 21600 pixelHeight"><v:f eqn="sum @10 21600 0"><v:path connecttype="rect" gradientshapeok="t" extrusionok="f"><o:lock aspectratio="t" ext="edit"><v:imagedata title="nowSupporting" src="file:///C:%5CWINDOWS%5CTEMP%5Cmsohtml1%5C01%5Cclip_image001.png">only once when page load start.</v:imagedata></o:lock></v:path></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:stroke></p><p align="justify"><v:stroke joinstyle="miter"><v:f eqn="if lineDrawn pixelLineWidth 0"><v:f eqn="sum @0 1 0"><v:f eqn="sum 0 0 @1"><v:f eqn="prod @2 1 2"><v:f eqn="prod @3 21600 pixelWidth"><v:f eqn="prod @3 21600 pixelHeight"><v:f eqn="sum @0 0 1"><v:f eqn="prod @6 1 2"><v:f eqn="prod @7 21600 pixelWidth"><v:f eqn="sum @8 21600 0"><v:f eqn="prod @7 21600 pixelHeight"><v:f eqn="sum @10 21600 0"><v:path connecttype="rect" gradientshapeok="t" extrusionok="f"><o:lock aspectratio="t" ext="edit"><v:imagedata title="nowSupporting" src="file:///C:%5CWINDOWS%5CTEMP%5Cmsohtml1%5C01%5Cclip_image001.png"><strong>parameters passed to the event:</strong></v:imagedata></o:lock></v:path></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:stroke></p><p align="justify"><v:stroke joinstyle="miter"><v:f eqn="if lineDrawn pixelLineWidth 0"><v:f eqn="sum @0 1 0"><v:f eqn="sum 0 0 @1"><v:f eqn="prod @2 1 2"><v:f eqn="prod @3 21600 pixelWidth"><v:f eqn="prod @3 21600 pixelHeight"><v:f eqn="sum @0 0 1"><v:f eqn="prod @6 1 2"><v:f eqn="prod @7 21600 pixelWidth"><v:f eqn="sum @8 21600 0"><v:f eqn="prod @7 21600 pixelHeight"><v:f eqn="sum @10 21600 0"><v:path connecttype="rect" gradientshapeok="t" extrusionok="f"><o:lock aspectratio="t" ext="edit"><v:imagedata title="nowSupporting" src="file:///C:%5CWINDOWS%5CTEMP%5Cmsohtml1%5C01%5Cclip_image001.png">page: reference to page object</v:imagedata></o:lock></v:path></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:stroke></p><p align="justify"><v:stroke joinstyle="miter"><v:f eqn="if lineDrawn pixelLineWidth 0"><v:f eqn="sum @0 1 0"><v:f eqn="sum 0 0 @1"><v:f eqn="prod @2 1 2"><v:f eqn="prod @3 21600 pixelWidth"><v:f eqn="prod @3 21600 pixelHeight"><v:f eqn="sum @0 0 1"><v:f eqn="prod @6 1 2"><v:f eqn="prod @7 21600 pixelWidth"><v:f eqn="sum @8 21600 0"><v:f eqn="prod @7 21600 pixelHeight"><v:f eqn="sum @10 21600 0"><v:path connecttype="rect" gradientshapeok="t" extrusionok="f"><o:lock aspectratio="t" ext="edit"><v:imagedata title="nowSupporting" src="file:///C:%5CWINDOWS%5CTEMP%5Cmsohtml1%5C01%5Cclip_image001.png">global: reference to global object.</v:imagedata></o:lock></v:path></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:stroke></p><p align="justify"><v:stroke joinstyle="miter"><v:f eqn="if lineDrawn pixelLineWidth 0"><v:f eqn="sum @0 1 0"><v:f eqn="sum 0 0 @1"><v:f eqn="prod @2 1 2"><v:f eqn="prod @3 21600 pixelWidth"><v:f eqn="prod @3 21600 pixelHeight"><v:f eqn="sum @0 0 1"><v:f eqn="prod @6 1 2"><v:f eqn="prod @7 21600 pixelWidth"><v:f eqn="sum @8 21600 0"><v:f eqn="prod @7 21600 pixelHeight"><v:f eqn="sum @10 21600 0"><v:path connecttype="rect" gradientshapeok="t" extrusionok="f"><o:lock aspectratio="t" ext="edit"><v:imagedata title="nowSupporting" src="file:///C:%5CWINDOWS%5CTEMP%5Cmsohtml1%5C01%5Cclip_image001.png"><strong>applies to:</strong></v:imagedata></o:lock></v:path></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:stroke></p><p align="justify"><v:stroke joinstyle="miter"><v:f eqn="if lineDrawn pixelLineWidth 0"><v:f eqn="sum @0 1 0"><v:f eqn="sum 0 0 @1"><v:f eqn="prod @2 1 2"><v:f eqn="prod @3 21600 pixelWidth"><v:f eqn="prod @3 21600 pixelHeight"><v:f eqn="sum @0 0 1"><v:f eqn="prod @6 1 2"><v:f eqn="prod @7 21600 pixelWidth"><v:f eqn="sum @8 21600 0"><v:f eqn="prod @7 21600 pixelHeight"><v:f eqn="sum @10 21600 0"><v:path connecttype="rect" gradientshapeok="t" extrusionok="f"><o:lock aspectratio="t" ext="edit"><v:imagedata title="nowSupporting" src="file:///C:%5CWINDOWS%5CTEMP%5Cmsohtml1%5C01%5Cclip_image001.png">none object</v:imagedata></o:lock></v:path></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:stroke></p><p align="justify"><v:stroke joinstyle="miter"><v:f eqn="if lineDrawn pixelLineWidth 0"><v:f eqn="sum @0 1 0"><v:f eqn="sum 0 0 @1"><v:f eqn="prod @2 1 2"><v:f eqn="prod @3 21600 pixelWidth"><v:f eqn="prod @3 21600 pixelHeight"><v:f eqn="sum @0 0 1"><v:f eqn="prod @6 1 2"><v:f eqn="prod @7 21600 pixelWidth"><v:f eqn="sum @8 21600 0"><v:f eqn="prod @7 21600 pixelHeight"><v:f eqn="sum @10 21600 0"><v:path connecttype="rect" gradientshapeok="t" extrusionok="f"><o:lock aspectratio="t" ext="edit"><v:imagedata title="nowSupporting" src="file:///C:%5CWINDOWS%5CTEMP%5Cmsohtml1%5C01%5Cclip_image001.png"><strong>comments:</strong></v:imagedata></o:lock></v:path></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:stroke></p><p align="justify"><v:stroke joinstyle="miter"><v:f eqn="if lineDrawn pixelLineWidth 0"><v:f eqn="sum @0 1 0"><v:f eqn="sum 0 0 @1"><v:f eqn="prod @2 1 2"><v:f eqn="prod @3 21600 pixelWidth"><v:f eqn="prod @3 21600 pixelHeight"><v:f eqn="sum @0 0 1"><v:f eqn="prod @6 1 2"><v:f eqn="prod @7 21600 pixelWidth"><v:f eqn="sum @8 21600 0"><v:f eqn="prod @7 21600 pixelHeight"><v:f eqn="sum @10 21600 0"><v:path connecttype="rect" gradientshapeok="t" extrusionok="f"><o:lock aspectratio="t" ext="edit"><v:imagedata title="nowSupporting" src="file:///C:%5CWINDOWS%5CTEMP%5Cmsohtml1%5C01%5Cclip_image001.png">this event is intended to be used to indicate the libraries needed to use some classes.</v:imagedata></o:lock></v:path></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:stroke></p><p align="justify"><v:stroke joinstyle="miter"><v:f eqn="if lineDrawn pixelLineWidth 0"><v:f eqn="sum @0 1 0"><v:f eqn="sum 0 0 @1"><v:f eqn="prod @2 1 2"><v:f eqn="prod @3 21600 pixelWidth"><v:f eqn="prod @3 21600 pixelHeight"><v:f eqn="sum @0 0 1"><v:f eqn="prod @6 1 2"><v:f eqn="prod @7 21600 pixelWidth"><v:f eqn="sum @8 21600 0"><v:f eqn="prod @7 21600 pixelHeight"><v:f eqn="sum @10 21600 0"><v:path connecttype="rect" gradientshapeok="t" extrusionok="f"><o:lock aspectratio="t" ext="edit"><v:imagedata title="nowSupporting" src="file:///C:%5CWINDOWS%5CTEMP%5Cmsohtml1%5C01%5Cclip_image001.png"><strong><u></u></strong></v:imagedata></o:lock></v:path></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:stroke> </p><p align="justify"><v:stroke joinstyle="miter"><v:f eqn="if lineDrawn pixelLineWidth 0"><v:f eqn="sum @0 1 0"><v:f eqn="sum 0 0 @1"><v:f eqn="prod @2 1 2"><v:f eqn="prod @3 21600 pixelWidth"><v:f eqn="prod @3 21600 pixelHeight"><v:f eqn="sum @0 0 1"><v:f eqn="prod @6 1 2"><v:f eqn="prod @7 21600 pixelWidth"><v:f eqn="sum @8 21600 0"><v:f eqn="prod @7 21600 pixelHeight"><v:f eqn="sum @10 21600 0"><v:path connecttype="rect" gradientshapeok="t" extrusionok="f"><o:lock aspectratio="t" ext="edit"><v:imagedata title="nowSupporting" src="file:///C:%5CWINDOWS%5CTEMP%5Cmsohtml1%5C01%5Cclip_image001.png"><strong><u>functions</u></strong></v:imagedata></o:lock></v:path></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:stroke></p><p align="justify"><v:stroke joinstyle="miter"><v:f eqn="if lineDrawn pixelLineWidth 0"><v:f eqn="sum @0 1 0"><v:f eqn="sum 0 0 @1"><v:f eqn="prod @2 1 2"><v:f eqn="prod @3 21600 pixelWidth"><v:f eqn="prod @3 21600 pixelHeight"><v:f eqn="sum @0 0 1"><v:f eqn="prod @6 1 2"><v:f eqn="prod @7 21600 pixelWidth"><v:f eqn="sum @8 21600 0"><v:f eqn="prod @7 21600 pixelHeight"><v:f eqn="sum @10 21600 0"><v:path connecttype="rect" gradientshapeok="t" extrusionok="f"><o:lock aspectratio="t" ext="edit"><v:imagedata title="nowSupporting" src="file:///C:%5CWINDOWS%5CTEMP%5Cmsohtml1%5C01%5Cclip_image001.png"><strong>executed when:</strong></v:imagedata></o:lock></v:path></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:stroke></p><p align="justify"><v:stroke joinstyle="miter"><v:f eqn="if lineDrawn pixelLineWidth 0"><v:f eqn="sum @0 1 0"><v:f eqn="sum 0 0 @1"><v:f eqn="prod @2 1 2"><v:f eqn="prod @3 21600 pixelWidth"><v:f eqn="prod @3 21600 pixelHeight"><v:f eqn="sum @0 0 1"><v:f eqn="prod @6 1 2"><v:f eqn="prod @7 21600 pixelWidth"><v:f eqn="sum @8 21600 0"><v:f eqn="prod @7 21600 pixelHeight"><v:f eqn="sum @10 21600 0"><v:path connecttype="rect" gradientshapeok="t" extrusionok="f"><o:lock aspectratio="t" ext="edit"><v:imagedata title="nowSupporting" src="file:///C:%5CWINDOWS%5CTEMP%5Cmsohtml1%5C01%5Cclip_image001.png">only once when page load start.</v:imagedata></o:lock></v:path></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:stroke></p><p align="justify"><v:stroke joinstyle="miter"><v:f eqn="if lineDrawn pixelLineWidth 0"><v:f eqn="sum @0 1 0"><v:f eqn="sum 0 0 @1"><v:f eqn="prod @2 1 2"><v:f eqn="prod @3 21600 pixelWidth"><v:f eqn="prod @3 21600 pixelHeight"><v:f eqn="sum @0 0 1"><v:f eqn="prod @6 1 2"><v:f eqn="prod @7 21600 pixelWidth"><v:f eqn="sum @8 21600 0"><v:f eqn="prod @7 21600 pixelHeight"><v:f eqn="sum @10 21600 0"><v:path connecttype="rect" gradientshapeok="t" extrusionok="f"><o:lock aspectratio="t" ext="edit"><v:imagedata title="nowSupporting" src="file:///C:%5CWINDOWS%5CTEMP%5Cmsohtml1%5C01%5Cclip_image001.png"><strong>parameters passed to the event:</strong></v:imagedata></o:lock></v:path></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:stroke></p><p align="justify"><v:stroke joinstyle="miter"><v:f eqn="if lineDrawn pixelLineWidth 0"><v:f eqn="sum @0 1 0"><v:f eqn="sum 0 0 @1"><v:f eqn="prod @2 1 2"><v:f eqn="prod @3 21600 pixelWidth"><v:f eqn="prod @3 21600 pixelHeight"><v:f eqn="sum @0 0 1"><v:f eqn="prod @6 1 2"><v:f eqn="prod @7 21600 pixelWidth"><v:f eqn="sum @8 21600 0"><v:f eqn="prod @7 21600 pixelHeight"><v:f eqn="sum @10 21600 0"><v:path connecttype="rect" gradientshapeok="t" extrusionok="f"><o:lock aspectratio="t" ext="edit"><v:imagedata title="nowSupporting" src="file:///C:%5CWINDOWS%5CTEMP%5Cmsohtml1%5C01%5Cclip_image001.png">page: reference to page object</v:imagedata></o:lock></v:path></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:stroke></p><p align="justify"><v:stroke joinstyle="miter"><v:f eqn="if lineDrawn pixelLineWidth 0"><v:f eqn="sum @0 1 0"><v:f eqn="sum 0 0 @1"><v:f eqn="prod @2 1 2"><v:f eqn="prod @3 21600 pixelWidth"><v:f eqn="prod @3 21600 pixelHeight"><v:f eqn="sum @0 0 1"><v:f eqn="prod @6 1 2"><v:f eqn="prod @7 21600 pixelWidth"><v:f eqn="sum @8 21600 0"><v:f eqn="prod @7 21600 pixelHeight"><v:f eqn="sum @10 21600 0"><v:path connecttype="rect" gradientshapeok="t" extrusionok="f"><o:lock aspectratio="t" ext="edit"><v:imagedata title="nowSupporting" src="file:///C:%5CWINDOWS%5CTEMP%5Cmsohtml1%5C01%5Cclip_image001.png">global: reference to global object.</v:imagedata></o:lock></v:path></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:stroke></p><p align="justify"><v:stroke joinstyle="miter"><v:f eqn="if lineDrawn pixelLineWidth 0"><v:f eqn="sum @0 1 0"><v:f eqn="sum 0 0 @1"><v:f eqn="prod @2 1 2"><v:f eqn="prod @3 21600 pixelWidth"><v:f eqn="prod @3 21600 pixelHeight"><v:f eqn="sum @0 0 1"><v:f eqn="prod @6 1 2"><v:f eqn="prod @7 21600 pixelWidth"><v:f eqn="sum @8 21600 0"><v:f eqn="prod @7 21600 pixelHeight"><v:f eqn="sum @10 21600 0"><v:path connecttype="rect" gradientshapeok="t" extrusionok="f"><o:lock aspectratio="t" ext="edit"><v:imagedata title="nowSupporting" src="file:///C:%5CWINDOWS%5CTEMP%5Cmsohtml1%5C01%5Cclip_image001.png"><strong>comments:</strong></v:imagedata></o:lock></v:path></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:stroke></p><p align="justify"><v:stroke joinstyle="miter"><v:f eqn="if lineDrawn pixelLineWidth 0"><v:f eqn="sum @0 1 0"><v:f eqn="sum 0 0 @1"><v:f eqn="prod @2 1 2"><v:f eqn="prod @3 21600 pixelWidth"><v:f eqn="prod @3 21600 pixelHeight"><v:f eqn="sum @0 0 1"><v:f eqn="prod @6 1 2"><v:f eqn="prod @7 21600 pixelWidth"><v:f eqn="sum @8 21600 0"><v:f eqn="prod @7 21600 pixelHeight"><v:f eqn="sum @10 21600 0"><v:path connecttype="rect" gradientshapeok="t" extrusionok="f"><o:lock aspectratio="t" ext="edit"><v:imagedata title="nowSupporting" src="file:///C:%5CWINDOWS%5CTEMP%5Cmsohtml1%5C01%5Cclip_image001.png">this event is intended to declare global user functions.</v:imagedata></o:lock></v:path></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:stroke></p><p align="justify"><v:stroke joinstyle="miter"><v:f eqn="if lineDrawn pixelLineWidth 0"><v:f eqn="sum @0 1 0"><v:f eqn="sum 0 0 @1"><v:f eqn="prod @2 1 2"><v:f eqn="prod @3 21600 pixelWidth"><v:f eqn="prod @3 21600 pixelHeight"><v:f eqn="sum @0 0 1"><v:f eqn="prod @6 1 2"><v:f eqn="prod @7 21600 pixelWidth"><v:f eqn="sum @8 21600 0"><v:f eqn="prod @7 21600 pixelHeight"><v:f eqn="sum @10 21600 0"><v:path connecttype="rect" gradientshapeok="t" extrusionok="f"><o:lock aspectratio="t" ext="edit"><v:imagedata title="nowSupporting" src="file:///C:%5CWINDOWS%5CTEMP%5Cmsohtml1%5C01%5Cclip_image001.png"><strong><u></u></strong></v:imagedata></o:lock></v:path></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:stroke> </p><p align="justify"><v:stroke joinstyle="miter"><v:f eqn="if lineDrawn pixelLineWidth 0"><v:f eqn="sum @0 1 0"><v:f eqn="sum 0 0 @1"><v:f eqn="prod @2 1 2"><v:f eqn="prod @3 21600 pixelWidth"><v:f eqn="prod @3 21600 pixelHeight"><v:f eqn="sum @0 0 1"><v:f eqn="prod @6 1 2"><v:f eqn="prod @7 21600 pixelWidth"><v:f eqn="sum @8 21600 0"><v:f eqn="prod @7 21600 pixelHeight"><v:f eqn="sum @10 21600 0"><v:path connecttype="rect" gradientshapeok="t" extrusionok="f"><o:lock aspectratio="t" ext="edit"><v:imagedata title="nowSupporting" src="file:///C:%5CWINDOWS%5CTEMP%5Cmsohtml1%5C01%5Cclip_image001.png"><strong><u>proxy</u></strong></v:imagedata></o:lock></v:path></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:stroke></p><p align="justify"><v:stroke joinstyle="miter"><v:f eqn="if lineDrawn pixelLineWidth 0"><v:f eqn="sum @0 1 0"><v:f eqn="sum 0 0 @1"><v:f eqn="prod @2 1 2"><v:f eqn="prod @3 21600 pixelWidth"><v:f eqn="prod @3 21600 pixelHeight"><v:f eqn="sum @0 0 1"><v:f eqn="prod @6 1 2"><v:f eqn="prod @7 21600 pixelWidth"><v:f eqn="sum @8 21600 0"><v:f eqn="prod @7 21600 pixelHeight"><v:f eqn="sum @10 21600 0"><v:path connecttype="rect" gradientshapeok="t" extrusionok="f"><o:lock aspectratio="t" ext="edit"><v:imagedata title="nowSupporting" src="file:///C:%5CWINDOWS%5CTEMP%5Cmsohtml1%5C01%5Cclip_image001.png"><strong>executed when:</strong></v:imagedata></o:lock></v:path></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:stroke></p><p align="justify"><v:stroke joinstyle="miter"><v:f eqn="if lineDrawn pixelLineWidth 0"><v:f eqn="sum @0 1 0"><v:f eqn="sum 0 0 @1"><v:f eqn="prod @2 1 2"><v:f eqn="prod @3 21600 pixelWidth"><v:f eqn="prod @3 21600 pixelHeight"><v:f eqn="sum @0 0 1"><v:f eqn="prod @6 1 2"><v:f eqn="prod @7 21600 pixelWidth"><v:f eqn="sum @8 21600 0"><v:f eqn="prod @7 21600 pixelHeight"><v:f eqn="sum @10 21600 0"><v:path connecttype="rect" gradientshapeok="t" extrusionok="f"><o:lock aspectratio="t" ext="edit"><v:imagedata title="nowSupporting" src="file:///C:%5CWINDOWS%5CTEMP%5Cmsohtml1%5C01%5Cclip_image001.png">depends the use you give to it.</v:imagedata></o:lock></v:path></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:stroke></p><p align="justify"><v:stroke joinstyle="miter"><v:f eqn="if lineDrawn pixelLineWidth 0"><v:f eqn="sum @0 1 0"><v:f eqn="sum 0 0 @1"><v:f eqn="prod @2 1 2"><v:f eqn="prod @3 21600 pixelWidth"><v:f eqn="prod @3 21600 pixelHeight"><v:f eqn="sum @0 0 1"><v:f eqn="prod @6 1 2"><v:f eqn="prod @7 21600 pixelWidth"><v:f eqn="sum @8 21600 0"><v:f eqn="prod @7 21600 pixelHeight"><v:f eqn="sum @10 21600 0"><v:path connecttype="rect" gradientshapeok="t" extrusionok="f"><o:lock aspectratio="t" ext="edit"><v:imagedata title="nowSupporting" src="file:///C:%5CWINDOWS%5CTEMP%5Cmsohtml1%5C01%5Cclip_image001.png"><strong>parameters passed to the event:</strong></v:imagedata></o:lock></v:path></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:stroke></p><p>page: reference the page.</p><p>global: reference the global object.</p><p>object: this is an custom object that you can pass to the event.</p><br /><br /><p align="center"><u><strong>Example</strong></u></p><p align="justify">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:<br /></p></v:imagedata></o:lock></v:path></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:stroke><a href="http://4.bp.blogspot.com/_5sUJSQLVQq8/S0tsgXQd2TI/AAAAAAAAAIM/orNK2HIdCmo/s1600-h/screen_script1.JPG"><img id="BLOGGER_PHOTO_ID_5425549479352588594" style="margin: 0px auto 10px; display: block; width: 400px; height: 300px; text-align: center;" alt="" src="http://4.bp.blogspot.com/_5sUJSQLVQq8/S0tsgXQd2TI/AAAAAAAAAIM/orNK2HIdCmo/s400/screen_script1.JPG" border="0" /></a><br /><br />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”);<br /><v:stroke joinstyle="miter"><v:f eqn="if lineDrawn pixelLineWidth 0"><v:f eqn="sum @0 1 0"><v:f eqn="sum 0 0 @1"><v:f eqn="prod @2 1 2"><v:f eqn="prod @3 21600 pixelWidth"><v:f eqn="prod @3 21600 pixelHeight"><v:f eqn="sum @0 0 1"><v:f eqn="prod @6 1 2"><v:f eqn="prod @7 21600 pixelWidth"><v:f eqn="sum @8 21600 0"><v:f eqn="prod @7 21600 pixelHeight"><v:f eqn="sum @10 21600 0"><v:path connecttype="rect" gradientshapeok="t" extrusionok="f"><o:lock aspectratio="t" ext="edit"><v:imagedata title="nowSupporting" src="file:///C:%5CWINDOWS%5CTEMP%5Cmsohtml1%5C01%5Cclip_image001.png"><p align="justify">You must have in your page the following:</p><p align="justify"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_5sUJSQLVQq8/S0ttooepEyI/AAAAAAAAAIU/en9Mgi-oS5c/s1600-h/screen_script2.JPG"><img id="BLOGGER_PHOTO_ID_5425550720926028578" style="margin: 0px auto 10px; display: block; width: 400px; cursor: pointer; height: 300px; text-align: center;" alt="" src="http://1.bp.blogspot.com/_5sUJSQLVQq8/S0ttooepEyI/AAAAAAAAAIU/en9Mgi-oS5c/s400/screen_script2.JPG" border="0" /></a><br /><br />And on the second row:</p><p align="justify"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_5sUJSQLVQq8/S0tuA7r9hxI/AAAAAAAAAIc/uhkbKKEHglg/s1600-h/screen_script3.JPG"><img id="BLOGGER_PHOTO_ID_5425551138399029010" style="margin: 0px auto 10px; display: block; width: 400px; cursor: pointer; height: 300px; text-align: center;" alt="" src="http://2.bp.blogspot.com/_5sUJSQLVQq8/S0tuA7r9hxI/AAAAAAAAAIc/uhkbKKEHglg/s400/screen_script3.JPG" border="0" /></a><br />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:<a href="http://url/webdesigner/webdesigner.html?cp=alex1">http://url/webdesigner/webdesigner.html?cp=alex1</a>where 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:<br /><br /></p></v:imagedata></o:lock></v:path></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:stroke><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_5sUJSQLVQq8/S0tvBcPvvDI/AAAAAAAAAIk/-9q8brmvlNk/s1600-h/screen_script4.JPG"><img id="BLOGGER_PHOTO_ID_5425552246650682418" style="margin: 0px auto 10px; display: block; width: 400px; cursor: pointer; height: 300px; text-align: center;" alt="" src="http://2.bp.blogspot.com/_5sUJSQLVQq8/S0tvBcPvvDI/AAAAAAAAAIk/-9q8brmvlNk/s400/screen_script4.JPG" border="0" /></a><v:stroke joinstyle="miter"><v:f eqn="if lineDrawn pixelLineWidth 0"><v:f eqn="sum @0 1 0"><v:f eqn="sum 0 0 @1"><v:f eqn="prod @2 1 2"><v:f eqn="prod @3 21600 pixelWidth"><v:f eqn="prod @3 21600 pixelHeight"><v:f eqn="sum @0 0 1"><v:f eqn="prod @6 1 2"><v:f eqn="prod @7 21600 pixelWidth"><v:f eqn="sum @8 21600 0"><v:f eqn="prod @7 21600 pixelHeight"><v:f eqn="sum @10 21600 0"><v:path connecttype="rect" gradientshapeok="t" extrusionok="f"><o:lock aspectratio="t" ext="edit"><v:imagedata title="nowSupporting" src="file:///C:%5CWINDOWS%5CTEMP%5Cmsohtml1%5C01%5Cclip_image001.png"><br /><br /><p class="MsoNormal" style="text-align: justify;"><span lang="EN-US"><o:p></o:p></span></p><span lang="EN-US" style="font-size:14px;">This post will be continue soon….<o:p></o:p></span><br /><br /><p></p><br /></v:imagedata></o:lock></v:path></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:stroke>alexhttp://www.blogger.com/profile/03053409769511814909noreply@blogger.com0tag:blogger.com,1999:blog-1520671859647445307.post-14944694085797139152009-03-10T17:41:00.000-07:002011-03-09T14:29:02.754-08:00<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/-bCLsyOcHkjk/TXf-RemcaEI/AAAAAAAAASM/DgE8iCH2b6E/s1600/logoMain.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 350px;" src="http://3.bp.blogspot.com/-bCLsyOcHkjk/TXf-RemcaEI/AAAAAAAAASM/DgE8iCH2b6E/s400/logoMain.jpg" alt="" id="BLOGGER_PHOTO_ID_5582209839374559298" border="0" /></a><br /><span style="font-weight: bold;font-size:180%;" >Product Description</span><br /><br /><div style="text-align: justify;">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.<br /></div><div style="text-align: justify;">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.<br />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.<br />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).<br /></div><br /><br /><span style="font-weight: bold;font-size:180%;" >To whom is orientated ?</span><br /><br /><div style="text-align: justify;">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.<br /></div><br /><span style="font-weight: bold;font-size:180%;" >Advantages with regard to similar products</span><br /><br /><div style="text-align: justify;">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.<br />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.<br /><br /><br /><br />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:<br /></div><br /><a href="http://www.youtube.com/watch?v=wk3iyK357Cw">http://www.youtube.com/watch?v=wk3iyK357Cw</a><br /><br /><br />1. Main screen:<br /><div style="text-align: justify;"><div style="text-align: justify;">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 .<br /><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_5sUJSQLVQq8/TPbBduTr74I/AAAAAAAAAPE/D6nAcagoIR4/s1600/imagen1F.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://2.bp.blogspot.com/_5sUJSQLVQq8/TPbBduTr74I/AAAAAAAAAPE/D6nAcagoIR4/s400/imagen1F.JPG" alt="" id="BLOGGER_PHOTO_ID_5545832707544313730" border="0" /></a><br /><br /></div>2. Search screen:<br /></div><div style="text-align: justify;">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 ’.<br /></div><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_5sUJSQLVQq8/SbcJOy8g5hI/AAAAAAAAACM/WQ-K3w-6mtg/s1600-h/imagen2.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://1.bp.blogspot.com/_5sUJSQLVQq8/SbcJOy8g5hI/AAAAAAAAACM/WQ-K3w-6mtg/s400/imagen2.JPG" alt="" id="BLOGGER_PHOTO_ID_5311724435305195026" border="0" /></a><br /><br />3. Control panel:<br /><div style="text-align: justify;">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.<br /></div><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_5sUJSQLVQq8/SbcJp3JYrzI/AAAAAAAAACU/OmSDyIncnPQ/s1600-h/imagen3.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://1.bp.blogspot.com/_5sUJSQLVQq8/SbcJp3JYrzI/AAAAAAAAACU/OmSDyIncnPQ/s400/imagen3.JPG" alt="" id="BLOGGER_PHOTO_ID_5311724900289392434" border="0" /></a><br /><br />4. The resources Tab:<br /><div style="text-align: justify;">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.<br /></div><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_5sUJSQLVQq8/SbcJyjkcpII/AAAAAAAAACc/wE_nV4v4SGw/s1600-h/imagen4.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://4.bp.blogspot.com/_5sUJSQLVQq8/SbcJyjkcpII/AAAAAAAAACc/wE_nV4v4SGw/s400/imagen4.JPG" alt="" id="BLOGGER_PHOTO_ID_5311725049653011586" border="0" /></a><br /><br />5. The account tab:<br /><div style="text-align: justify;">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.<br /></div><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_5sUJSQLVQq8/SbcJ-tcJjEI/AAAAAAAAACk/hqKIsMXp6ds/s1600-h/imagen5.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://1.bp.blogspot.com/_5sUJSQLVQq8/SbcJ-tcJjEI/AAAAAAAAACk/hqKIsMXp6ds/s400/imagen5.JPG" alt="" id="BLOGGER_PHOTO_ID_5311725258460990530" border="0" /></a><br /><br /><div style="text-align: justify;">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.<br /></div><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_5sUJSQLVQq8/SbcKSCghJ3I/AAAAAAAAACw/0umMW62KFuY/s1600-h/imagen6.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://3.bp.blogspot.com/_5sUJSQLVQq8/SbcKSCghJ3I/AAAAAAAAACw/0umMW62KFuY/s400/imagen6.JPG" alt="" id="BLOGGER_PHOTO_ID_5311725590533973874" border="0" /></a><br /><br /><div style="text-align: justify;">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.<br /></div><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_5sUJSQLVQq8/SbcKZi21QRI/AAAAAAAAAC4/gGrRKI6Y5ec/s1600-h/imagen7.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://1.bp.blogspot.com/_5sUJSQLVQq8/SbcKZi21QRI/AAAAAAAAAC4/gGrRKI6Y5ec/s400/imagen7.JPG" alt="" id="BLOGGER_PHOTO_ID_5311725719476584722" border="0" /></a><br /><br /><div style="text-align: justify;">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.<br /></div><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_5sUJSQLVQq8/Sbco4e-wYEI/AAAAAAAAAFA/6P-32RQoA_w/s1600-h/imagen8.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://3.bp.blogspot.com/_5sUJSQLVQq8/Sbco4e-wYEI/AAAAAAAAAFA/6P-32RQoA_w/s400/imagen8.JPG" alt="" id="BLOGGER_PHOTO_ID_5311759236360855618" border="0" /></a><br /><br /><div style="text-align: justify;">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.<br /></div><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_5sUJSQLVQq8/SbcKry5cUGI/AAAAAAAAADI/_8-Va9VKmDo/s1600-h/imagen9.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://1.bp.blogspot.com/_5sUJSQLVQq8/SbcKry5cUGI/AAAAAAAAADI/_8-Va9VKmDo/s400/imagen9.JPG" alt="" id="BLOGGER_PHOTO_ID_5311726033020145762" border="0" /></a><br /><br /><div style="text-align: justify;">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.<br /></div><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_5sUJSQLVQq8/SbcK2wx1GwI/AAAAAAAAADQ/J6MFxhs8Q_A/s1600-h/imagen10.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://2.bp.blogspot.com/_5sUJSQLVQq8/SbcK2wx1GwI/AAAAAAAAADQ/J6MFxhs8Q_A/s400/imagen10.JPG" alt="" id="BLOGGER_PHOTO_ID_5311726221429906178" border="0" /></a><br /><br /><div style="text-align: justify;">11. In the next image we can see the window to upload files, which allow us upload several files simultaneously.<br /></div><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_5sUJSQLVQq8/SbcK_tXU0HI/AAAAAAAAADY/y_Sk63tbH38/s1600-h/imagen11.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://4.bp.blogspot.com/_5sUJSQLVQq8/SbcK_tXU0HI/AAAAAAAAADY/y_Sk63tbH38/s400/imagen11.JPG" alt="" id="BLOGGER_PHOTO_ID_5311726375132254322" border="0" /></a><br /><br /><div style="text-align: justify;">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.<br /></div><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_5sUJSQLVQq8/SbcLHQmvGaI/AAAAAAAAADg/V2QOonuT1WA/s1600-h/imagen12.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://2.bp.blogspot.com/_5sUJSQLVQq8/SbcLHQmvGaI/AAAAAAAAADg/V2QOonuT1WA/s400/imagen12.JPG" alt="" id="BLOGGER_PHOTO_ID_5311726504851216802" border="0" /></a><br /><br /><div style="text-align: justify;">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.<br /></div><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_5sUJSQLVQq8/SbcLPEvPZXI/AAAAAAAAADo/QUEa1d48nfU/s1600-h/imagen13.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://1.bp.blogspot.com/_5sUJSQLVQq8/SbcLPEvPZXI/AAAAAAAAADo/QUEa1d48nfU/s400/imagen13.JPG" alt="" id="BLOGGER_PHOTO_ID_5311726639104615794" border="0" /></a><br /><br /><div style="text-align: justify;">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.<br /></div><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_5sUJSQLVQq8/SbcLWFNGhBI/AAAAAAAAADw/T2j4MpCPOMM/s1600-h/imagen14.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://4.bp.blogspot.com/_5sUJSQLVQq8/SbcLWFNGhBI/AAAAAAAAADw/T2j4MpCPOMM/s400/imagen14.JPG" alt="" id="BLOGGER_PHOTO_ID_5311726759488947218" border="0" /></a><br /><br /><div style="text-align: justify;">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.<br /></div><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_5sUJSQLVQq8/SbcLdEyCVCI/AAAAAAAAAD4/38oEAZ4U9OI/s1600-h/imagen15.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://4.bp.blogspot.com/_5sUJSQLVQq8/SbcLdEyCVCI/AAAAAAAAAD4/38oEAZ4U9OI/s400/imagen15.JPG" alt="" id="BLOGGER_PHOTO_ID_5311726879634510882" border="0" /></a><br /><br /><div style="text-align: justify;">16. How was said early the components supports transparence levels and they can superpose on the others. Youcan see this in the next image.<br /></div><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_5sUJSQLVQq8/SbcLllxeXwI/AAAAAAAAAEA/XUHGM6FbouU/s1600-h/imagen16.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://2.bp.blogspot.com/_5sUJSQLVQq8/SbcLllxeXwI/AAAAAAAAAEA/XUHGM6FbouU/s400/imagen16.JPG" alt="" id="BLOGGER_PHOTO_ID_5311727025929477890" border="0" /></a><br /><br /><div style="text-align: justify;">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.<br /></div><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_5sUJSQLVQq8/SbcL5wrqRqI/AAAAAAAAAEQ/pwnmXapwAGo/s1600-h/imagen17.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://3.bp.blogspot.com/_5sUJSQLVQq8/SbcL5wrqRqI/AAAAAAAAAEQ/pwnmXapwAGo/s400/imagen17.JPG" alt="" id="BLOGGER_PHOTO_ID_5311727372455265954" border="0" /></a><br /><br /><div style="text-align: justify;">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.<br /></div><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_5sUJSQLVQq8/SbcMOaMyKwI/AAAAAAAAAEY/uGri08kCa40/s1600-h/imagen18.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://1.bp.blogspot.com/_5sUJSQLVQq8/SbcMOaMyKwI/AAAAAAAAAEY/uGri08kCa40/s400/imagen18.JPG" alt="" id="BLOGGER_PHOTO_ID_5311727727197432578" border="0" /></a><br /><br /><div style="text-align: justify;">19. A few samples of pages developed (for testing) with this system:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_5sUJSQLVQq8/TNvwIKqmdJI/AAAAAAAAANM/-PncwqDsuMY/s1600/imagen39.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://4.bp.blogspot.com/_5sUJSQLVQq8/TNvwIKqmdJI/AAAAAAAAANM/-PncwqDsuMY/s400/imagen39.jpg" alt="" id="BLOGGER_PHOTO_ID_5538284189874812050" border="0" /></a><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_5sUJSQLVQq8/TFnREtcWd9I/AAAAAAAAALk/iwyLDFXdHuU/s1600/imagen34.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://4.bp.blogspot.com/_5sUJSQLVQq8/TFnREtcWd9I/AAAAAAAAALk/iwyLDFXdHuU/s400/imagen34.jpg" alt="" id="BLOGGER_PHOTO_ID_5501658298657961938" border="0" /></a><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_5sUJSQLVQq8/TFXyYVWYQyI/AAAAAAAAALc/2cg3R5FnDiM/s1600/imagen32.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://1.bp.blogspot.com/_5sUJSQLVQq8/TFXyYVWYQyI/AAAAAAAAALc/2cg3R5FnDiM/s400/imagen32.jpg" alt="" id="BLOGGER_PHOTO_ID_5500569019764720418" border="0" /></a><br /></div><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_5sUJSQLVQq8/SzzI4nAjJoI/AAAAAAAAAHI/9BFO-WL8Tp4/s1600-h/imagen31.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://4.bp.blogspot.com/_5sUJSQLVQq8/SzzI4nAjJoI/AAAAAAAAAHI/9BFO-WL8Tp4/s400/imagen31.JPG" alt="" id="BLOGGER_PHOTO_ID_5421428926316750466" border="0" /></a><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_5sUJSQLVQq8/Sbkp9VHwVtI/AAAAAAAAAFQ/l_OfJu8QyFA/s1600-h/imagen19.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://1.bp.blogspot.com/_5sUJSQLVQq8/Sbkp9VHwVtI/AAAAAAAAAFQ/l_OfJu8QyFA/s400/imagen19.JPG" alt="" id="BLOGGER_PHOTO_ID_5312323369078642386" border="0" /></a><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_5sUJSQLVQq8/ScFaJFZDL1I/AAAAAAAAAGA/9zSX2lagy3Y/s1600-h/imagen29.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://3.bp.blogspot.com/_5sUJSQLVQq8/ScFaJFZDL1I/AAAAAAAAAGA/9zSX2lagy3Y/s400/imagen29.JPG" alt="" id="BLOGGER_PHOTO_ID_5314628147386462034" border="0" /></a><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_5sUJSQLVQq8/ScOyZvcGv0I/AAAAAAAAAGQ/SDcNX1bmsfo/s1600-h/imagen30.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://2.bp.blogspot.com/_5sUJSQLVQq8/ScOyZvcGv0I/AAAAAAAAAGQ/SDcNX1bmsfo/s400/imagen30.JPG" alt="" id="BLOGGER_PHOTO_ID_5315288140528140098" border="0" /></a><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_5sUJSQLVQq8/SbcMpbZEXoI/AAAAAAAAAEo/emkUG44U74c/s1600-h/imagen20.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://3.bp.blogspot.com/_5sUJSQLVQq8/SbcMpbZEXoI/AAAAAAAAAEo/emkUG44U74c/s400/imagen20.JPG" alt="" id="BLOGGER_PHOTO_ID_5311728191373860482" border="0" /></a><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_5sUJSQLVQq8/SbdW0sP7BNI/AAAAAAAAAFI/uffvLRV-h54/s1600-h/imagen22.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://3.bp.blogspot.com/_5sUJSQLVQq8/SbdW0sP7BNI/AAAAAAAAAFI/uffvLRV-h54/s400/imagen22.JPG" alt="" id="BLOGGER_PHOTO_ID_5311809748737918162" border="0" /></a><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_5sUJSQLVQq8/SbcMvKhnL2I/AAAAAAAAAEw/JIQ8GkxLzH4/s1600-h/imagen21.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://1.bp.blogspot.com/_5sUJSQLVQq8/SbcMvKhnL2I/AAAAAAAAAEw/JIQ8GkxLzH4/s400/imagen21.JPG" alt="" id="BLOGGER_PHOTO_ID_5311728289925508962" border="0" /></a>alexhttp://www.blogger.com/profile/03053409769511814909noreply@blogger.com2