Presentation is loading. Please wait.

Presentation is loading. Please wait.

1 Web Applications – The Basics (Part 2). 2

Similar presentations


Presentation on theme: "1 Web Applications – The Basics (Part 2). 2"— Presentation transcript:

1 1 Web Applications – The Basics (Part 2)

2 2 http://localhost:8080/abc/j1.jsp

3 3 Webapps/abc/j1.jsp Hello! The time is now

4 4 JSP An External DSL for generating HTML Server: –Generates Java code off of it –Compiles –Runs Has extensions (Tag-libraries)

5 5 Java Blocks <% System.out.println( "Evaluating date now" ); java.util.Date date = new java.util.Date(); %> Hello! The time is now <% out.println( date ); out.println( " Your machine's address is " ); out.println( request.getRemoteHost()); %>

6 6 http://localhost:8080/abc/j2.jsp

7 7 Webapps/abc/j2.jsp <% int i = 0; while(i < 10) { %> i= <% ++i; } %>

8 8 Velocity: An Example Hello $customer.Name! #foreach( $mud in $mudsOnSpecial ) #if ( $customer.hasPurchased($mud) ) $flogger.getPromo( $mud ) #end

9 9 Velocity: Binding Data Customer customer = Database.retrieveByPK(primaryKey); context.put("customer", customer); List mudsOnSpecial = Database.selectSpecialMuds(); context.put("mudsOnSpecial", mudsOnSpecial);

10 10 Internal DSL: XMLBuilder (Ruby) require 'xmlbuilder' data = {'Coffee' => 'Pot', 'Saw' => 'Mill', 'Christmas' => 'Jam'} xml.html do head do title { 'Test Page' } end body do table :width => 500 do data.each do |key, value| tr do td { key } td { value } end element :p do "some text" end element :p do "Some other text" end end (By Daniel Spiewak, www.codecommit.com)

11 11 f8.html

12 12 Ajax Asynchronous JavaScript and XML User Interacts with the page Javascript code communicates with the server –(In the background) When a response arrives – Page is updated Note: Data does not have to be XML-ed

13 13 webapps/abc/f8.html Team Name: Suggestion: $(document).ready(function() { var element = $("#input"); element.keyup(function() { var params = {}; params.url = "d3.html"; params.data = 'input=' + $("#input").val(); params.dataType = 'json'; params.type = 'get'; params.success = function(items) { var bullets = " "; for(var i = 0; i < items.length; ++i) bullets += " " + items[i] + " "; bullets += " "; $("#suggestion").html(bullets); }; $.ajax(params); });

14 14 Source code: S3.java package s1; public class S3 extends HttpServlet { private static final long serialVersionUID = -8846608158862513134L; private static List teams = Arrays.asList("Australia", "Japan",... ); @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException { resp.setContentType("application/json"); resp.setCharacterEncoding("UTF-8"); String in = req.getParameter("input"); String result = process(in); resp.getWriter().println(result); } private String process(String in) { List matches = computeMatches(in); Collections.sort(matches); return computeOutput(matches); }

15 15 Source code: S3.java (cont.) package s1; public class S3 extends HttpServlet {... private String computeOutput(List matches) { if(matches.size() == 0) return "[]"; String result = "[" + matches.get(0).quote(); for(int i = 1; i < matches.size(); ++i) { if(matches.get(i-1).compareTo(matches.get(i)) != 0) break; result += ", " + matches.get(i).quote(); } result += "]"; return result; }

16 16 Source code: Match.java public class Match implements Comparable { public String team; public int charCount = 0; public Match(String team, String keyword) { this.team = team; if(keyword == null) return; Set s1 = Match.setOf(team); Set s2 = Match.setOf(keyword); s1.retainAll(s2); this.charCount = s1.size(); } public String quote() { return "\"" + team + "\""; } @Override public int compareTo(Match that) { return that.charCount - charCount; } private static Set setOf(String s) { s = s.toLowerCase(); HashSet result = new HashSet (); for(int i = 0; i < s.length(); ++i) result.add(s.charAt(i)); return result; }


Download ppt "1 Web Applications – The Basics (Part 2). 2"

Similar presentations


Ads by Google