JavaScript. jquery and other frameworks. Jacobo Aragunde Pérez. blogs.igalia.com/jaragunde

Transcription

1 JavaScript static void _f_do_barnacle_install_properties(gobjectclass *gobject_class) { GParamSpec *pspec; /* Party code attribute */ pspec = g_param_spec_uint64 (F_DO_BARNACLE_CODE, jquery and other frameworks "Barnacle code.", "Barnacle code", 0, G_MAXUINT64, G_MAXUINT64 /* default value */, G_PARAM_READABLE G_PARAM_WRITABLE G_PARAM_PRIVATE); g_object_class_install_property (gobject_class, F_DO_BARNACLE_PROP_CODE, Jacobo Aragunde Pérez jaragunde@igalia.com blogs.igalia.com/jaragunde

2 Introduction

3 why? hide differences among browsers to the programmer simplify navigation through the DOM ease the use of asynchronous requests add new features and, in general, simplify the most common tasks

4 Introducing... jquery

5 overview focused on simplifying JavaScript code handy features for document traversing event handling manipulating CSS and animating Ajax interactions provides a basic set of widgets

6 the basics how to use it <script src="jquery.js"></script> how it works heavy overload of the object $() it's the base of all jquery operations serves as a very powerful selector returns 'glorified' DOM elements can receive HTML or standard DOM objects to 'jquerify' them example: jquery-basic-example

7 Document traversing

8 basic selectors accessing elements through id $('#mydivid') accessing elements through class $('.mycssclass') accessing elements through tag $('input') example: jquery-selectors

9 combining selectors selectors can be combined $('input.mycssclass') //an input with that class more than one selection expression (~OR operation): $('ul#onelist, ul#anotherlist') $('ul#onelist').add('ul#anotherlist') example: jquery-selectors

10 combining selectors we can express hierarchy $('ul#mylist li') //all elements inside 'mylist' filtering a subset of objects: filter(), not(), first(), last()... $("li").filter(".selected") $("li").not(".selected") //complementary sets example: jquery-selectors

11 more selectors and many more selectors... $('input[name=login]') //by any parameter $('div:hidden') //by visibility $('li:even') //by position $("p:contains('text')") //by contents... all selection functions can be concatenated example: jquery-selectors

12 Event handling

13 introduction managed through the methods bind and unbind in the $ object can be applied to sets of objects transparently every onxxx event has a jquery equivalent, plus some more click, dblclick, change, select, submit, load, etc.

14 basic syntax attach a single event handler $('#mybutton').bind('click', onclickhandler(eventobject)) remove a previously attached event handler $('#mybutton').unbind() $('#mybutton').unbind('click') $('#mybutton').unbind('click', handler) fire an event $('#mybutton').trigger('click') example: jquery-dom-and-events

15 syntax variants two events to the same handler $('#foo').bind('mouseenter mouseleave', handlerfunction) two events with one handler each, on the same object $('#foo').bind({ click: function() { // do something on click }, mouseenter: function() { // do something on mouseenter } }) example: jquery-dom-and-events

16 syntax variants shorthand for bind function $('#mybutton').click(onclickhandler); $('form').submit(onclickhandler); shorthand for trigger function $('#mybutton').click(); $('form').submit(); example: jquery-dom-and-events

17 please notice... ready event replaces traditional window.onload in jquery $(document).ready(onreadyfunction); $().ready(onreadyfunction); //shorthand $(onreadyfunction); //shorthand triggers are applied to a set of objects transparently $('.button').click(onclickfunction); example: jquery-dom-and-events

18 please notice... inside the event handler body, this references to the object receiving the event $('#hideonclick').click(function () { }); $(this).hide(); $('#hideonclick').click(function (ev){ }); $(ev.target).hide(); //equivalent

19 fine tuning attach a handler to be run only once: $('#foo').one('click', runonlyonce); attach a handler to existing or future objects matching an expression: $('.bar').live('click', handler); prevent default behaviour of an event: $('.link').click(function(event) { }); event.preventdefault();

20 DOM manipulation

21 values and attributes get and set value of a form element $("name").val(); $("name").val("manolo"); get and set value of any attribute $("name").attr("id"); $("name").attr("id", "newid"); example: jquery-dom-and-events

22 DOM insertion move existing elements around the DOM $('#myelement').appendto('#newparent'); copy existing elements to a new location in the DOM $('#myelement').clone(). appendto('#newparent'); add text inside an element $("#paragraph").text("new content"); destroy an element $("#paragraph").remove(); example: jquery-dom-manipulation

23 animating show and hide $("#hideme").hide('slow'); custom animation $("#animateme").animate( { width:"50%", fontsize:"12px" }, 'slow'); animations can be combined $('#button').show('slow'). animate({ width:"50%" }, 'slow'). hide('slow'); example: jquery-animating

24 animating animations can receive a callback $("#removeme").hide('slow', function () { //remove element when it's hidden $(this).remove(); }); example: jquery-animating

25 manipulating CSS modify classes on a (set of) DOM element(s) $("#myelement").addclass("myclass"); $("#myelement").removeclass("myclass"); $("#myelement").toggleclass("myclass"); retrieve information about CSS $("#myelement").css( "color"); //returns color set CSS properties directly $("#myelement").css("color","red"); example: jquery-css

26 widgets

27 Introduction to jquery UI set of basic widgets for easy use It's heavier, so you can download only the set of widgets you need Available widgets and options: check API online at:

28 the basics files to include <link href="css/themename/jquery ui custom.css" rel="stylesheet" /> <script src="js/jquery min.js"></script> <script src="js/jquery ui custom.min.js"></script>

29 the basics how to use it: 1. select a DOM element where we will place the widget $("#datepicker") careful! The contents of the element will be replaced 2. apply widget $("#datepicker").datepicker() can receive an options object 3. call methods $("#datepicker").datepicker('getvalue') the name of the method is actually a string parameter example: jquery-ui-datepicker

30 build your own widget extend jquery with your own plugins a nice tutorial: template: jquery-plugin-boilerplate.js example: jquery-defaultwidget-plugin

31 Ajax interactions

32 Ajax interactions $.ajax() method contains all Ajax functionality $.ajax({ url: "jquery ajax test.html", success: function (data) { $("#result").append(data); } }); $.ajax({ url: "save some data.php", type: "POST", data: {parameter: "value"} success: function (success) { //check if successful } });

33 alternatives there are higher-level alternatives like $.get(), $.post() or $.load() $.get("jquery ajax test.html", function (data) { $("#result").append(data); } ); $.post("save some data.php", {parameter: "value"}, function (success) { //check if successful } ); $("#result").load("a chunk of.html"); example: jquery-ajax

34 more alternatives more alternatives: $.getjson(), $.getscript() $.getjson("list users.php", function(users) { $.each(users, function (i, value) { $('ul#userlist').append(<li>value</li>); }); } ); $.getscript("highcharts.js", function () { //now we can use the library new Highcharts.Chart(...); }); example: jquery-ajax-json, jquery-highcharts

35 Ext JS

36 overview focused on providing heavier components with complex functionality class-styled API provides components for windows grids charts place-holders and lots more!

37 the basics how to use it? <! ** CSS ** > <link rel="stylesheet" type="text/css" href="ext/resources/css/ext all.css" /> <! ** Javascript ** > <script src="ext/bootstrap.js"></script> example: ext-basic-example

38 document traversing syntax Ext.get('myId'); //selection by id Ext.select('.myClass'); //multiple selection using CSS selectors similar to jquery, but... these functions return specific objects from ExtJS example: ext-dom-and-events

39 document traversing however, building the page directly in the JS source is a common practice HTML stores the data JS 'shapes' them example: ext/examples/tabs/tabs.html

40 event handling syntax element.on('click',onclickfunction); Ext.onReady(onReadyFunction); //special case every ExtJS element / widget has its own set of events check them in the API example: ext-dom-and-events

41 managing ExtJS components constructor receives an object of config options var win = new Ext.Window({ layout:'fit', width:500, height:300, closeaction:'hide', plain: true, }); check the API for config options, methods and events of the component

42 example: window component var mywindow = new Ext.Window({ title:'hello world!', layout:'vbox', width:500, height:300, closeaction:'hide', plain: true, items: [...,... ], }); buttons: [{ text: 'Close', handler: function(){ mywindow.hide(); } }] example: ext-window

43 Ajax interactions Ext.Ajax, class Ext.Ajax.request({ url: 'foo.php', success: successfunction, failure: failurefunction, headers: { 'my header': 'foo' }, params: { foo: 'bar' } }); integrated in the widgets Ext.get('messageBox').load({ url: 'bar.php', }); example: ext-ajax

44 Ajax interactions new Ext.form.ComboBox({ store: new Ext.data.Store({ autoload: true, autosave: false, baseparams: {... }, proxy: new Ext.data.HttpProxy({ url: 'getcustomerprojectsservice.php', method: 'GET' }), reader: new Ext.data.XmlReader(...), listeners: { 'load': function () {... } }, }),... }); example: ext-ajax

45 References

46 references reference and tutorials about this framework reference and tutorials about this framework of course! ;)

47 Thanks for playing for your attention!

48