Summer - The HTML5 Library for Java and Scala

7,857 views

Published on

Spring I/O Madrid 2011

Published in: Technology, Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,857
On SlideShare
0
From Embeds
0
Number of Embeds
350
Actions
Shares
0
Downloads
88
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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 Licensehttp://www.asual.com/summerhttp://github.com/asual/summer
    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) {    Technology.save(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>${messages.page.title}</title>         <header>    <h1>${resourceUtils.getMessage(page.title)}</h1>  </header>  <div data-template="paragraph">    Paragraph Content  </div>   <footer>    <p data-escape="false">${properties.app.id}</p>  </footer>  <script src="/js/app.js"></script></html>
    15. 15. Sample Form<!DOCTYPE html><html>     <title>${technology.name}</title>         <form action="/technology/${technology.value}" method="put">       <input type="hidden" value="${technology.value}" />    <fieldset data-legend="Basic Information" >      <input type="text" value="${technology.name}" data-label="Name:" />           <div data-repeat="${licenseList}" data-value="${technology.licenses}">        <input type="checkbox" value="${var.value}"          data-label="${var.name}" />      </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>${var.name}</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

    ×