Tools20121015

1,223 views

Published on

Tools for P&O 3

  • Be the first to comment

  • Be the first to like this

Tools20121015

  1. 1. Agile DevelopmentJavascript, JQUERY, AJAX Frans Van Assche
  2. 2. Opdracht1. Gebruik Chrome, IE, of installeer Firebug plugin in Firefox2. Ontwikkel een programma met een simple tracking Entity voor deze twee use cases • De gebruiker selecteert een cursus en kan via een start en stop zijn studietijd kan aangeven • Toon de statistieken1. Indien er tijd over is bekijk een of meerdere van de volgende zaken • Javascript • Jquery • Jquery mobile • AjaxJe werkt met een medestudent. Indien je vragen hebt – Medestudent en internet – Medestudenten uit je groep – Begeleider4. Set up van action log
  3. 3. https://docs.google.com/spreadsheet/ccc?key=0AhZ3foBCo3D8dEdlUlhXZWR2QUx1WEN1dTNmSkVQWUE#gid=0
  4. 4. guestbook.jsp<form action="/sign" method="post"> <div><textarea name="content" rows="3" cols="60"></textarea></div> <div><input type="submit" value="Post Greeting" /></div> <input type="hidden" name="guestbookName" value="<%= guestbookName %>"/></form>
  5. 5. SignGuestbookServlet public void doPost(HttpServletRequest req, HttpServletResponse resp) …User user = UserService.getCurrentUser();String guestbookName = req.getParameter("guestbookName");String content = req.getParameter("content");…resp.sendRedirect( "/guestbook.jsp?guestbookName=“ + guestbookName);
  6. 6. <servlet> <servlet-name>sign</servlet-name> <servlet-class> guestbook.SignGuestbookServlet </servlet-class></servlet><servlet-mapping> <servlet-name>sign</servlet-name> <url-pattern>/sign</url-pattern></servlet-mapping>
  7. 7. Javascript• Client-side scripting• Gelijkt op Java• Tutorial http://www.w3schools.com/js/
  8. 8. • <script type="text/javascript" src="jquery.js"></script>• Untyped language – Gebruik var• Object var adres = { naam: "test1.txt", straat: "Celestijnenlaan", nr: “200A", postcode: "3000", gemeente: "Leuven" }
  9. 9. • Function als data $.ajax({ url: "test1.txt", success: function(result) { alert(result); } });
  10. 10. Debugging• alert(‘Hoera het is gelukt!’);• Ingebouwd in Chrome en IE• http://getfirebug.com/
  11. 11. JQuery • http://www.w3schools.com/jquery/ • <div id= "address" class= "high" >$("div").hide(); $("#address").hide(); $(".high").hide(); • Meer selectors zijn mogelijk
  12. 12. • http://jquerymobile.com/• http://jquerytools.org/
  13. 13. Asynchronous JavaScript and XML$("button").click(function(){ $.ajax({ url:"test2.txt", success:function(result){ $("div").html(result); } });});
  14. 14. ?
  15. 15. String button = "No button clicked";if (req.getParameter("ajaxbtn")!=null){ button = req.getParameter("ajaxbtn"); resp.setContentType("text/plain"); resp.getWriter().println( "Click on button " + button + " recorded!");} else { if (req.getParameter("btn1")!=null) button = req.getParameter("btn1"); if (req.getParameter("btn2")!=null) button = req.getParameter("btn2"); if (req.getParameter("hiddenbtn")!=null) button = req.getParameter("hiddenbtn"); resp.sendRedirect("/btntest.jsp?btn=" + button);}System.out.println(button);
  16. 16. FORM <form id="visFormid" name="visForm" action="/clickbtn" method="post"> <button name="btn1" type="submit" value="Button 1">Button 1</button> <input name="btn2" type="submit" value="Button 2" /></form>
  17. 17. Hidden form<form id=“hiddenFormId" name=“hiddenForm" action="/clickbtn" method="post"> <input id="hiddenBtnId" type="hidden" name="hiddenbtn" /></form><button onclick="btnClicked(this)">Button 3</button><a href="javascript:return false;" onclick="btnClicked(this)">Button 4</a><span onclick="btnClicked(this)" style="background- color:red"> Button 5</span>
  18. 18. Hidden formfunction btnClicked(me){ $(#hiddenBtnId).val($(me).text()); $(#hiddenFormId).submit();}
  19. 19. Ajax (1)<button class="ajaxbtn"> Ajax Button 1</button>$(document).ready(function(){ $(“.ajaxbtn").click(function(){ $.ajax({ url:"/clickbtn", type:"post", data: "ajaxbtn="+$(this).text().trim(), success:function(result){ $(#ajaxResponse).html(result); } }); });});
  20. 20. Ajax(2)<button onclick="ajaxBtnClicked(this)"> Ajax Button 2</button>function ajaxBtnClicked(me){ $.ajax({ url:"/clickbtn", type:"post", data: "ajaxbtn="+$(me).text().trim(), success:function(result){ $(#ajaxResponse).html(result); } });}

×