Tools201210152. 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
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>
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);
}
});
13. JQuery
• http://www.w3schools.com/jquery/
• <div id= "address" class= "high" >
$("div").hide(); $("#address").hide(); $(".high").hide();
• Meer selectors zijn mogelijk
15. Asynchronous JavaScript and
XML
$("button").click(function(){
$.ajax({
url:"test2.txt",
success:function(result){
$("div").html(result);
}
});
});
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>
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);
}
});
}