Barcelona Workshop 2008

Hazle un lifting a tus páginas Jaume Bosch (jaume.bosch@terra.es) Software Engineer and Developer at Atrapalo.com Jordi Roura (jordi@imestre.com) Web Analyst and Developer at Atrapalo.com

php | Ajax ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

php | Ajax ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

php | Ajax ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

php | Ajax ,[object Object],Servidor Modelo clásico Cliente Petición inicial HTTP Petición HTTP Servidor Cliente Petición inicial HTTP Petición JS Modelo Ajax Motor Ajax XMLHttpRequest

php | Ajax ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

php | Ajax ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

php | Ajax ,[object Object],[object Object], < script src ="http://yui.yahooapis.com/2.5.2/build/yahoo/yahoo-min.js">< /script >  < script src ="http://yui.yahooapis.com/2.5.2/build/event/event-min.js"> </script >  < script src ="http://yui.yahooapis.com/2.5.2/build/connection/connection-min.js">< /script > var div = document.getElementById( "container" ); var handleSuccess = function (o){ div.innerHTML = o.responseText; } var handleFailure = function (o){ div.innerHTML = "Error" ; } var callback = { success:handleSuccess, failure:handleFailure, }; function AjaxRequest(){ var sUrl = "examples/connection.php?userid=0" ; var request = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback); } Requisitos mínimos Ejemplo básico

php | Ajax ,[object Object],[object Object], < script src ="http://yui.yahooapis.com/2.5.2/build/yahoo/yahoo-min.js">< /script >  < script src ="http://yui.yahooapis.com/2.5.2/build/event/event-min.js"> </script > var oElement = document.getElementById( "elementid" ); function fnCallback(e) { alert( "click" ); } function fnCallback2(e) { alert( "mouseover" ); } YAHOO.util.Event.addListener(oElement, "click" , fnCallback); YAHOO.util.Event.addListener(oElement, "mouseover" , fnCallback2); Requisitos mínimos Ejemplo básico

php | Ajax ,[object Object],[object Object],var myServer = "./someScript.php" ; var mySchema = [ "ResultItem" , "KeyDataField" ]; var myDataSource = new YAHOO.widget.DS_XHR(myServer, mySchema); var myAutoComp = new YAHOO.widget.AutoComplete( "myInput" , "myContainer" , myDataSource);  < link type = "text/css" rel = "stylesheet" href ="http://yui.yahooapis.com/2.5.2/build/autocomplete/assets/skins/sam/autocomplete.css">  < script src ="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js">< /script >  < script src ="http://yui.yahooapis.com/2.5.2/build/connection/connection-min.js">< /script >  < script src ="http://yui.yahooapis.com/2.5.2/build/autocomplete/autocomplete-min.js">< /script > Requisitos mínimos Ejemplo básico

php | Ajax ,[object Object],<div id = "myAutoComplete" > <input type = "text" id = "myInput" > <div id = "myContainer" ></div> </div> HTML necesario

php | Ajax ,[object Object],[object Object], < link type = "text/css" rel = "stylesheet" href ="http://yui.yahooapis.com/2.5.2/build/datatable/assets/skins/sam/datatable.css">  < script src = "http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js">< /script > < script src = "http://yui.yahooapis.com/2.5.2/build/element/element-beta-min.js">< /script > < script src = "http://yui.yahooapis.com/2.5.2/build/datasource/datasource-beta-min.js" > < /script >  < script src ="http://yui.yahooapis.com/2.5.2/build/connection/connection-min.js">< /script >  < script src ="http://yui.yahooapis.com/2.5.2/build/datatable/datatable-beta-min.js">< /script > Requisitos mínimos

php | Ajax ,[object Object],YAHOO.example.XHR_JSON = new function () { var myColumnDefs = [ {key: "Title" , label: "Name" , sortable:true}, {key: "Phone" }, {key: "City" }, {key: "AverageRating" , label: "Rating" , sortable:true} ]; this.myDataSource = new YAHOO.util.DataSource( "assets/php/ylocal_proxy.php?" ); this.myDataSource.connMethodPost = true; this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_XML; this.myDataSource.responseSchema = { resultNode: "Result", fields: ["Title","Phone","City","AverageRating"] }; this.myDataTable = new YAHOO.widget.DataTable( "xml" , myColumnDefs, this.myDataSource, {initialRequest: "query=pizza&zip=94089&results=10" }); Ejemplo básico

php | Ajax ,[object Object],[object Object], < link type = "text/css" rel = "stylesheet" href ="http://yui.yahooapis.com/2.5.2/build/container/assets/skins/sam/container.css">  < script src ="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js">< /script >  < script src ="http://yui.yahooapis.com/2.5.2/build/container/container-min">< /script > YAHOO.example.container.panel = new YAHOO.widget.Panel( "panel" , { width: "320px" , visible:false, draggable:false, close:false } ); YAHOO.example.container.panel2.setHeader( "Panel from Script" ); YAHOO.example.container.panel2.setBody( "This is a dynamically generated Panel." ); YAHOO.example.container.panel2.setFooter( "End of Panel" ); YAHOO.example.container.panel2.render( "container" ); Requisitos mínimos Ejemplo básico

php | Ajax ,[object Object],[object Object], < link type = "text/css" rel = "stylesheet" href ="http://yui.yahooapis.com/2.5.2/build/tabview/assets/skins/sam/tabview.css">  < script src ="http://yui.yahooapis.com/2.5.2/build/tabview/tabview-min.js">< /script > Requisitos mínimos

php | Ajax ,[object Object],var tabView = new YAHOO.widget.TabView(); tabView.addTab( new YAHOO.widget.Tab({ label: 'lorem', content: '<p>Lorem ipsum dolor sit amet</p>', active: true })); tabView.addTab( new YAHOO.widget.Tab({ label: 'ipsum', content: '<ul><li><a href="#">Lorem ipsum dolor sit amet.</a></li>' })); tabView.addTab( new YAHOO.widget.Tab({ label: 'dolor', content: '<form action="#"><fieldset><legend>Lorem Ipsum</legend><label for="foo"> <input id="foo" name="foo"></label><input type="submit" value="submit"></fieldset></form>' })); tabView.appendTo('container'); Ejemplo básico

Barcelona Workshop 2008

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to Barcelona Workshop 2008

Similar to Barcelona Workshop 2008 (20)

Barcelona Workshop 2008