Vaadin: Pure Java Web Apps Long Island Java User Group 4/11/2013

Transcription

1 Vaadin: Pure Java Web Apps Long Island Java User Group 4/11/2013 Leon LaSpina - my background Math major in college with a little CS Learned Pascal in HS Fan of Java since 2000: Just teaching at first First web application 2010 (nciml.org) Smart Software Solutions October, 2011 Joined Long Island JUG Feb., 2013

2 Traditional Web App Quick recap of development issues the old way, to build Finnish appreciation Servlets written in Java handle core logic JSP with expression language for presentation Java Server Page = HTML with Java in it, compiles into a Servlet. JSTL (Java Standard Tag Library) for presentation logic in JSP CSS for Style JavaScript for front-end logic, form validation

3 Page Flow Servlet pulls some data, redirects to JSP JSP makes the web page the user sees User fills out form, submits to Servlet Servlet processes form, redirects to JSP for view Session Objects allow Servlets and JSPs to keep track of user data (username, user account info, shopping cart, etc...)

4 Gathering Data Q & A Traditional Java web application How does information move from an HTML form to the server? HTTP Get or Post: Sent as request parameters in URL or posted form data How do we get that data from the Servlet? Servlet doget method: Use request.getparameter( inputfield1 ); Why is this painful? And why can't my IDE help? Your HTML form variable names are really Strings. Troubleshooting Typos!? This programming isn't hard, but it's hardly interesting. Build an app this way Once. Good exercise. Build character. Learn to not make typos. Then go find a framework.

5 Vaadin Web App Built on top of GWT Google Web Toolkit Server logic and presentation logic both in Java Java code outputs JavaScript to run in the browser The browser does a LOT of work, generating HTML by running JavaScript Almost all communication is over AJAX framework handles it so you don't have to

6 Vaadin Data flow Use listeners on buttons or other UI elements. The same Java class can take care of generating the UI and processing data from it. Unlike Servlet, you can have class field variables. Each request gets its own instance of the Vaadin UI class. Vaadin handles session objects so we don't have to. All this Vaadin goodness does come with a learning curve...

7 Vaadin Looks Complicated

8 Vaadin: It's not public void init(vaadinrequest request) { // Create the content root layout for the UI VerticalLayout content = new VerticalLayout(); setcontent(content); // Add a simple component Label label = new Label("Hello Vaadin user"); content.addcomponent(label); // Add a component with user interaction content.addcomponent(new Button("What is the time?", new ClickListener() { public void buttonclick(clickevent event) { Notification.show("The time is " + new Date()); } })); }

9 Vaadin Requests and Navigation Request parameters still available: public class FormView { protected void init(vaadinrequest request) { groupname = request.getparameter("class"); String listpath = "/" + groupname + "/namelist.txt"; basepath = VaadinService.getCurrent().getBaseDirectory().getAbsolutePath(); FileResource fr = new FileResource(new File(basepath + listpath)); Navigation between views: public class MainUI extends UI { Navigator navigator; public void init(vaadinrequest request) { navigator = new Navigator(this, this); navigator.addview("form", new FormView(request)); navigator.addview("admin", new AdminUI()); navigator.navigateto("form"); }

10 Live Demo Need a Servlet container, in the past meant you need your own VPS to install Tomcat or GlassFish or IBM Websphere. Cloud Services are now cheap or free: Jelastic, winner of Duke Choice award. Appfog offers PHP, Ruby, Python, Java, NodeJS

11 Code Demo: CommentCollector HTML has no combobox (selector where you can add your own item if not listed). Implementing your own auto-complete requires a JavaScript library Note the custom form validation. How many lines of code did this form take me? Under 150