Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Microsoft PowerPoint - <b>jQuery</b>-3-UI.pptx

506 views

Published on

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

Microsoft PowerPoint - <b>jQuery</b>-3-UI.pptx

  1. 1. © 2009 Marty Hall j jQuery Part III: y Rich Interfaces with jQuery UI (j (jQuery 1.3, jQuery UI 1.7) y ,j y ) Originals of Slides and Source Code for Examples: http://courses.coreservlets.com/Course-Materials/ajax.html p j Customized Java EE Training: http://courses.coreservlets.com/ Servlets, JSP, JSF 1.x & JSF 2.0, Struts Classic & Struts 2, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6. Developed and taught by well-known author and developer. At public venues or onsite at your location. © 2009 Marty Hall For live Ajax & GWT training, see training courses at http://courses.coreservlets.com/. t htt // l t / Taught by the author of Core Servlets and JSP, More Servlets and JSP and this tutorial. Available at public JSP, tutorial venues, or customized versions can be held on-site at your organization. •C Courses d developed and t l d d taught b M t H ll ht by Marty Hall – Java 6, intermediate/beginning servlets/JSP, advanced servlets/JSP, Struts, JSF 1.x & 2.0, Ajax, GWT, custom mix of topics Customized Java EE Training: http://courses.coreservlets.com/ – Ajax courses can concentrate on one library (jQuery, Prototype/Scriptaculous, Ext-JS, Dojo) or survey several • Courses developed and taught by coreservlets.com experts (edited by Marty) Servlets, JSP, JSF 1.x & JSFEJB3, Struts Classic & Struts 2, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6. – Spring, Hibernate/JPA, 2.0, Ruby/Rails Developed and taught by well-known author and developer. At public venues or onsite at your location. Contact hall@coreservlets.com for details
  2. 2. Topics in This Section • Overview • Installation and setup • Widgets – Static tabbed panels – Ajax tabbed panels – Accordion panels – Date picker – Slider – Progress bar 5 © 2009 Marty Hall Introduction Customized Java EE Training: http://courses.coreservlets.com/ Servlets, JSP, JSF 1.x & JSF 2.0, Struts Classic & Struts 2, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6. Developed and taught by well-known author and developer. At public venues or onsite at your location.
  3. 3. Overview • Set of rich GUI elements and effects – Tabbed panels, slider, etc – Effects similar to Scripaculous – Drag and drop API • Pros – Official part of j p jQuery y – Well tested – Very clean design – Many still show meaningful results if JavaScript disabled – Theming framework • Cons – No autocompleter (!) 7 – Not as extensive as Dojo, ext/JS, or YUI Downloading • Download custom bundle – h //j http://jqueryui.com/download i /d l d – Select widgets and effects you want – Press “Download” to download ZIP file of result • Unzip – Unzip result into location of your choice • D Download additional themes l d dditi l th – http://jqueryui.com/download – Deselect all widgets and options, choose different theme • You can also interactively build a customized theme – Unzip and copy entries in “css” folder to “css” folder of original download • Bookmark the documentation 8 – http://docs.jquery.com/UI/
  4. 4. Installing Files • Load normal jQuery as before – jQuery UI download gives an additional copy in “js” folder, so if you are using jQuery UI, one download from jq y jqueryui.com is sufficient • As discussed in previous sections, it is common to rename jQuery-1.3.x.min.js to jQuery.js to simplify upgrades • Copy jQuery ui 1.7.x.custom.min.js jQuery-ui-1.7.x.custom.min.js – E.g., copy download_folder/js/jQuery-ui- 1.7.x.custom.min.js to WebContent/scripts – It is common to leave detailed name for this file, since UI i t l d t il d f thi fil i capabilities change from version to version • Copy CSS “theme” folder py – E.g., copy download_folder/css/ui-lightness to WebContent/css/ 9 Setting Up Page: Overview • Load required jQuery UI files – jquery.js (renamed from jquery-1.3.2.min.js) – jquery-ui-1.7.1.custom.min.js – Any custom CSS files your app uses • Load your files that use jQuery UI – Any custom JavaScript files your app uses – themename/jquery-ui-1.7.1.custom.min.css 10
  5. 5. Setting Up Page: Example <link rel="stylesheet" href="./css/ui-lightness/jquery-ui-1.7.1.custom.css" href=" /css/ui lightness/jquery ui 1 7 1 custom css" type="text/css"/> <link rel="stylesheet" href="./css/sample-styles.css" href=" /css/sample styles css" type="text/css"/> <script src="./scripts/jquery.js" type="text/javascript"></script> t "t t/j i t"></ i t> <script src="./scripts/jquery-ui-1.7.1.custom.min.js" type="text/javascript"></script> <script src="./scripts/jquery-ui-examples.js" i t " / i t /j i l j " type="text/javascript"></script> 11 © 2009 Marty Hall Tabbed Panels with Static Content Customized Java EE Training: http://courses.coreservlets.com/ Servlets, JSP, JSF 1.x & JSF 2.0, Struts Classic & Struts 2, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6. Developed and taught by well-known author and developer. At public venues or onsite at your location.
  6. 6. Overview • Idea – T bb d panel where clicking tabs changes content inside Tabbed l h li ki t b h t t i id • HTML – Make a div container to hold the tabs • <div id="main-tabbed-panel-div">…</div> – Include a ul list containing internal hyperlinks • <ul> <li><a href="#panel1">Go to Panel 1</a></li> <li><a href="#panel2">Go to Panel 2</a></li> </ul> – Include divs whose ids match the href values (minus “#”) # ) • <div id="panel1">Content for panel 1</div> <div id="panel2">Content for panel 2</div> • Basic JavaScript – Call “tabs()” on the div container • $("#main-tabbed-panel-div").tabs(); 13 Example: HTML <div id="static-tabbed-panel-div"> <ul> <li><a href="#panel1">Panel 1</a></li> <li><a href="#panel2">Panel 2</a></li> <li><a href="#panel3">Panel 3</a></li> </ul> <div id="panel1"> <p>Content for first panel.</p> <p>Foo, bar, baz.</p><p>Yadda, yadda, yadda.</p> <p>Foo bar baz </p><p>Yadda yadda yadda </p> </div> <div id="panel2"> <p>Content for second panel.</p> <p>Foo, bar, baz.</p><p>Yadda, yadda, yadda.</p> </div> <div id="panel3"> <p>Content for thi d panel.</p> < >C t t f third l </ > <p>Foo, bar, baz.</p><p>Yadda, yadda, yadda.</p> </div> 14 </div>
  7. 7. Example: JavaScript $(function() { $("#static-tabbed-panel-div").tabs(); $("# t ti t bb d l di ") t b () … }) }); 15 Example: Results 16
  8. 8. Options for jQuery UI Widgets • You can supply anonymous object – Object has optional fields – Fields specify configuration and operational options • Examples – $("#some-id").tabs(); – $("#some-id") tabs({ option1: "foo", $( #some id ).tabs({ foo option2: "bar", option3: "baz" }) No t ili N trailing comma 17 Main Options for tabs({…}) for Static Content • selected (default: 0) – T b to be selected initially Tab b l d i i i ll • collapsible (default: false) – Can you click selected tab to hide it (and thus all panels)? • $("#main-id").tabs({ collapsible: true }); • disabled (default: empty array) – A array of t b numbers (0-based) that should be disabled An f tab b (0 b d) th t h ld b di bl d on startup • event (default: click) ( ) – The type of event that should initiate tab selection • $("#main-id").tabs({ event: "mouseover" }); • fx – Many options for specifying animation when tabs are 18 selected. See docs for details.
  9. 9. © 2009 Marty Hall Tabbed Panels with Dynamic ( j ) Content y (Ajax) Customized Java EE Training: http://courses.coreservlets.com/ Servlets, JSP, JSF 1.x & JSF 2.0, Struts Classic & Struts 2, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6. Developed and taught by well-known author and developer. At public venues or onsite at your location. Overview • Idea – T bb d panel where clicking tabs gets server content Tabbed l h li ki b • HTML – Make a div container to hold the tabs • <div id="main-tabbed-panel-div">…</div> – Include a ul list containing external relative hyperlinks • <ul> <li><a href="url1">Get Content for Panel 1</a></li> <li><a href="url2">Get Content for Panel 2</a></li> </ul> – That’s all! • Basic JavaScript – C ll “tabs()” on the div container Call “ b ()” h di i • $("#main-tabbed-panel-div").tabs(); 20
  10. 10. Example: HTML <div id="ajax-tabbed-panel-div"> <ul> <li><a href="time-panel.jsp">Show Time</a></li> <li><a href="list-panel.jsp?range=5"> Show Small Numbers</a></li> <li><a href="list-panel.jsp?range=500"> Show Big Numbers</a></li> </ul> </div> 21 Example: JavaScript $(function() { $( #ajax tabbed panel div ).tabs({ $("#ajax-tabbed-panel-div") tabs({ collapsible: true }); … }); 22
  11. 11. Example: JSP • time-panel.jsp <h3>It is now <%= new java.util.Date() %></h3> Do you know where your closures are doing? • list-panel.jsp p j p <% double range = 10.0; try { String r = request.getParameter("range"); range = I t Integer.parseInt(r); I t( ) } catch(Exception e) {} %> <h3>Numbers from 0 to <%= range %></h3> <ul> <li><%= Math.random() * range %></li> <li><%= Math.random() * range %></li> <li><%= Math.random() * range %></li> <li><%= Math.random() * range %></li> <li><%= Math.random() * range %></li> </ul> 23 Example: Results 24
  12. 12. Main Options for tabs({…}) for Ajax Content • ajaxOptions (default: {}) – Any of the options used for $.ajax in first jQuery section • $("#main-id").tabs({ ajaxOptions: { error: errorHandler }}); • cache (default: false) – Should jQuery remember content for previously-selected tabs? Very helpful if result is always the same for a given y p y g URL. • spinner (default “<em>Loading…</em>”) – T to show in tab title after tab selected but before Text h i b il f b l db b f content is received from server 25 © 2009 Marty Hall Accordion Panels Customized Java EE Training: http://courses.coreservlets.com/ Servlets, JSP, JSF 1.x & JSF 2.0, Struts Classic & Struts 2, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6. Developed and taught by well-known author and developer. At public venues or onsite at your location.
  13. 13. Overview • Idea – Horizontally stacked panels with wide tabs • HTML – Make a div container to hold the tabs • <div id="main-accordion-panel-div">…</div> – Include alternating pairs of text with links and content • <h2><a href="#">Panel 1</a></h2> • <div>Content for Panel 1</div> • <h2><a href="#">Panel 2</ ></h2> <h2>< h f "#">P l 2</a></h2> • <div>Content for Panel 2</div> • Basic Ja aSc pt as c JavaScript – Call “accordion()” on the div container 27 • $("#main-accordion-panel-div").accordion(); Example: HTML <div id="accordion-panel-div"> <h2><a href="#">Panel 1</a></h2> href= # >Panel <div> <p>Content for first panel.</p> <p>Foo, bar, baz.</p><p>Yadda, yadda, yadda.</p> </div> <h2><a href="#">Panel 2</a></h2> <div> <p>Content for second panel.</p> <p>Foo, bar, baz.</p><p>Yadda, yadda, yadda.</p> </div> <h2><a href="#">Panel 3</a></h2> <div> <p>Content for third panel.</p> <p>Foo, bar, baz.</p><p>Yadda, yadda, yadda.</p> </div> 28 </div>
  14. 14. Example: JavaScript $(function() { $("#accordion-panel-div").accordion(); $("# di l di ") di () … }) }); 29 Example: Results 30
  15. 15. Main Options for accordion({…}) • active (default: 0) – Index or selector for initially-selected item • collapsible, event – C you click to hide? Event to trigger selection. Can li k hid ? E i l i – Same as with tabs() • animated (default: true) – Name of jQuery animation to use when showing content • $("#main-id").accordion({ animated: "fadeIn" }); 31 © 2009 Marty Hall Date Picker Customized Java EE Training: http://courses.coreservlets.com/ Servlets, JSP, JSF 1.x & JSF 2.0, Struts Classic & Struts 2, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6. Developed and taught by well-known author and developer. At public venues or onsite at your location.
  16. 16. Overview • Idea – Click in textfield to pop up calendar. Choosing day from calendar puts date string into textfield • HTML – Make an input field • <input type="text" id="date-field"/> p yp • Basic JavaScript – Call “datepicker()” on the textfield • $("#date-field").datepicker(); 33 Example: HTML <form action=#"> <table> <tr><td align="right"> From: <input type="text"/></td></tr> <tr><td align="right"> Departure Date: <input type="text" id="start-date"/></td></tr> / / / <tr><td align="right"> To: <input type="text"/></td></tr> <tr><td a g t td align="right"> g t Return Date: <input type="text" id="end-date"/></td></tr> <tr><td align="center"> <input type="button" value="Show Flights"/> <input type="button" value="Show Hotels"/> / </td></tr> </table> </form> 34
  17. 17. Example: JavaScript $(function() { $("#start-date").datepicker(); $("#start date") datepicker(); $("#end-date").datepicker({ changeMonth: true, numberOfMonths: 2 }); … }); 35 Example: Results 36
  18. 18. Main Options for datepicker({…}) datepicker({ }) • defaultDate (default: today) – I i i ll selected date Initially l dd • changeMonth (default: false) changeYear (default: false) – Should jQuery include a dropdown list to let you choose the month or year? • dayNames (default Sunday Saturday) Sunday…Saturday) monthNames (default January…December) – Names to use for the days and months. For other y languages. There are also various options for short versions of days. • numberOfMonths (default: 1) – How many months to show at a time 37 © 2009 Marty Hall Slider Customized Java EE Training: http://courses.coreservlets.com/ Servlets, JSP, JSF 1.x & JSF 2.0, Struts Classic & Struts 2, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6. Developed and taught by well-known author and developer. At public venues or onsite at your location.
  19. 19. Overview • Idea – Interactive slider to let user choose numeric values • Also supports double-handled sliders for choosing ranges • HTML – Make a placeholder div • <div id="div-for-slider"></div> • Basic JavaScript – Call “slider()” on the div, supply function to be called when slider moves • $("#div-for-slider").slider({ slide: sliderEventHandler }); – Look up value later • Event handler takes two arguments: event and ui. Use ui.value to get current slider value 39 Example: HTML <form action="#"> <table> … <tr><td align="right"> Temperature: </td> <td align="left" width="300"> <div id="slider-div" style="margin-left: 10px"></div> <div id="temp-display" align="center">32</div> / </td></tr> <tr><td align="center" colspan="2"> <input type="button" value="Order Coffee /> type= button value= Order Coffee"/> </td></tr> </table> </form> / 40
  20. 20. Example: JavaScript function showTemp(event, ui) { $("#temp-display").html(ui.value); $("#temp display") html(ui value); } $(function() { $("#slider-div").slider({ min: 32, max: 212, slide: showTemp }); … }); 41 Example: Results 42
  21. 21. Main Options for slider({…}) • min(default: 0) – V l corresponding t left or top Value di to l ft t • max – Value corresponding to right or bottom • slide – Function to call every time value changes. Function takes two arguments: event and ui object. Use ui.value to get currently g j g y selected value. • step (default: 1) – Granularity of changes • value (default: min) – The initial value • orientation (default: auto) i t ti (d f lt t ) – horizontal or vertical 43 © 2009 Marty Hall Progress Bar Customized Java EE Training: http://courses.coreservlets.com/ Servlets, JSP, JSF 1.x & JSF 2.0, Struts Classic & Struts 2, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6. Developed and taught by well-known author and developer. At public venues or onsite at your location.
  22. 22. Overview • Idea – Sh Shows progress from 0% to 100% f • Output only: does not accept user input • HTML – Make a placeholder div • <div id="div-for-progress-bar"></div> • Basic JavaScript – Call “progressbar()” on the div • $("#div-for-progress").progressbar(); – Have another event that changes values of bar • Look up value with $("#div-for-progress").progressbar("option", "value"); • Change value with $("#div-for-progress").progressbar("option", "value", num); 45 Example: HTML <form action="#"> <div id="progressbar-div"></div> <di id " b di "></di > <input type="button" value="Click 10 Times" id="progressbar-button"/> </form> 46
  23. 23. Example: JavaScript function updateProgressBar() { var currentVal = $("#progressbar-div").progressbar("option", "value"); if (currentVal < 100) { currentVal += 10; + $("#progressbar-div").progressbar("option", "value", currentVal); } } $(function() { $("#progressbar-div").progressbar(); $("#progressbar-button").click(updateProgressBar); … }); 47 Example: Results 48
  24. 24. © 2009 Marty Hall Wrap-up Customized Java EE Training: http://courses.coreservlets.com/ Servlets, JSP, JSF 1.x & JSF 2.0, Struts Classic & Struts 2, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6. Developed and taught by well-known author and developer. At public venues or onsite at your location. Summary • Setup – Load jquery.js, jquery-ui…js and themename/…css • Ajax tabbed panels – HTML • <div id="main"> <ul><li><a href="relative-url-1">Panel 1</1></li> ul li a href relative url 1 Panel 1 /1 /li <li><a href="relative-url-2">Panel 2</1></li>… </ul></div> – JavaScript • $("#main").tabs(); • Others – Static tabbed panels, accordion panel, date picker, slider, 50 progress bar
  25. 25. © 2009 Marty Hall Questions? Customized Java EE Training: http://courses.coreservlets.com/ Servlets, JSP, JSF 1.x & JSF 2.0, Struts Classic & Struts 2, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6. Developed and taught by well-known author and developer. At public venues or onsite at your location.

×