Tools for P&O 3

1. Agile Development
Javascript, JQUERY, AJAX
Frans Van Assche

2. Opdracht
1. Gebruik Chrome, IE, of installeer Firebug plugin in Firefox
2. 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 statistieken
1. Indien er tijd over is bekijk een of meerdere van de volgende zaken
• Javascript
• Jquery
• Jquery mobile
• Ajax
Je werkt met een medestudent. Indien je vragen hebt
– Medestudent en internet
– Medestudenten uit je groep
– Begeleider
4. Set up van action log

4. https://docs.google.com/spreadsheet/ccc?key=0AhZ3foBCo3D8dEdlUlhXZWR2QUx1WEN1dTNmSkVQWUE#gid=0

6. 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>

7. 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);

8. <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>

9. Javascript
• Client-side scripting
• Gelijkt op Java
• Tutorial http://www.w3schools.com/js/

10. • <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"
}

11. • Function als data
$.ajax({
url: "test1.txt",
success: function(result) {
alert(result);
}
});

12. Debugging
• alert(‘Hoera het is gelukt!’);
• Ingebouwd in Chrome en IE
• http://getfirebug.com/

13. JQuery
• http://www.w3schools.com/jquery/
• <div id= "address" class= "high" >
$("div").hide(); $("#address").hide(); $(".high").hide();
• Meer selectors zijn mogelijk

14. • http://jquerymobile.com/
• http://jquerytools.org/

15. Asynchronous JavaScript and
XML
$("button").click(function(){
$.ajax({
url:"test2.txt",
success:function(result){
$("div").html(result);
}
});
});

16. ?

17. 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);

18. 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>

19. 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>

20. Hidden form
function btnClicked(me){
$('#hiddenBtnId').val($(me).text());
$('#hiddenFormId').submit();
}

21. 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);
}
});
});
});

22. 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);
}
});
}