Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Summer - The HTML5 Library for Java and Scala


Published on

Spring I/O Madrid 2011

Published in: Technology, Education
  • Be the first to comment

Summer - The HTML5 Library for Java and Scala

  1. 1. SummerThe HTML5 Library for Java and Scala
  2. 2. What is Summer?• Presentation Technology for Spring MVC• HTML5 Template Language• Ground-base for Modular Web Applications
  3. 3. It’s about buildinglightweight and web friendly applications
  4. 4. It’s not fordesktop-like experiences written in pure Java
  5. 5. A mix of technologies Servlet 3.0 (JSR 315) HTML5 Jetty 8 WebSocket MavenBean Validation (JSR 303) Expression Language 2.2 (JSR 245)Spring 3 JPA 2.0 (JSR 317) JavaServer Faces 2.0 (JSR 314) jQuery 1.5 Dependency Injection for Java (JSR 330) CSS3
  6. 6. Apache 2.0 License
  7. 7. Why Spring?• Flexible, Powerful, Annotation Driven• Proven MVC Architecture• REST, Content Negotiation Support
  8. 8. Sample Spring Controller@Controller@RequestMapping("/technology")public class TechnologyController {     @RequestMapping(method=RequestMethod.GET)  @ResponseFormat({JsonView.class})  public ModelAndView list() {    return new ModelAndView("/list", new ModelMap(Technology.list()));  }     @RequestMapping("/{value}")  public ModelAndView view(@PathVariable("value") String value) {    return new ModelAndView("/view",      new ModelMap(Technology.find(value)));  }     @RequestMapping(value="/save", method={RequestMethod.POST})  public ModelAndView save(    @Valid @ModelAttribute Technology technology) {;    return new ModelAndView(new RedirectView("/" + technology.getValue(), true));  }  ...     }
  9. 9. Sample Domain Object@Configurable@Entity@Tablepublic class Technology implements Serializable {  @PersistenceContext  private transient EntityManager entityManager;  @Id  @GeneratedValue(strategy=IDENTITY)  @Column(unique=true, nullable=false)  private Integer id;     @Column(unique=true, nullable=false)  private String value;     @NotEmpty  @Column  private String name;  ...}
  10. 10. Sample Converter@Namedpublic class StringToLicenseConverter    implements Converter<String, License> {  public License convert(String source) {    if (StringUtils.isEmpty(source)) {      return null;    }    return License.find(source);  }}
  11. 11. Why Summer?• Built for Spring• Clean and expressive markup• Promotes Modularity and Best Practices
  12. 12. Why HTML5?• New semantic tags• Useful data-* attributes• WebSocket, Canvas, Local Storage, etc.
  13. 13. Why JSF 2.0• Composite components and templating• Partial rendering and resource relocation• Classpath resources
  14. 14. Sample Page<!DOCTYPE html><html>     <title>${}</title>         <header>    <h1>${resourceUtils.getMessage(page.title)}</h1>  </header>  <div data-template="paragraph">    Paragraph Content  </div>   <footer>    <p data-escape="false">${}</p>  </footer>  <script src="/js/app.js"></script></html>
  15. 15. Sample Form<!DOCTYPE html><html>     <title>${}</title>         <form action="/technology/${technology.value}" method="put">       <input type="hidden" value="${technology.value}" />    <fieldset data-legend="Basic Information" >      <input type="text" value="${}" data-label="Name:" />           <div data-repeat="${licenseList}" data-value="${technology.licenses}">        <input type="checkbox" value="${var.value}"          data-label="${}" />      </div>    </fieldset>    <button>Update</button>  </form>   </html>
  16. 16. Sample Table<!DOCTYPE html><html>     <title>Technologies</title>   <table>    <thead>      <tr>        <th>Name</th>        <th>Description</th>      </tr>    </thead>    <tbody data-repeat="${technologyList}" data-empty="None.">      <tr class="${varStatus.index mod 2 eq 0 ? odd : even}">        <td>${}</td>        <td>${stringUtils.ellipsis(var.description, 100)}</td>      </tr>    </tbody>     </table>   </html>
  17. 17. Some AJAX?<!DOCTYPE html><html>     <title>AJAX</title>     <p id="more" class="views">    <a href="/technology?more=true"      data-ajax="more content" data-ajax-method="post">      Show more...    </a>  </p>   <p id="content">    Dynamic content...  </p> </html>
  18. 18. What more?• Extended content negotiation support• WebSocket using Atmosphere• Strong Maven integration• Production and development modes
  19. 19. Development• Jetty Maven Plugin• JNDI environment entries• Extra module classpaths
  20. 20. Roadmap• Documentation and screencasts• Full HTML5 compatibility• Spring Roo integration• Bug fixes and performance improvements
  21. 21. Summer Extras• Better looking form components• Support for LESS CSS• Optimized CSS and JavaScript files• OneJar deployment• Servlet 2.5 support• Beautiful markup output
  22. 22. Muchas gracias! @asual