Monday, December 10, 2012

Spring Social with JavaConfig (Part 6)

Review

In the previous section, we have discussed the remaining JavaConfig configurations. In this section, we will discuss the View layer along with Thymeleaf.

Table of Contents

Click on a link to jump to that section:
  1. Functional Specs
  2. Generate OAuth keys
    • Facebook
    • Twitter
  3. Spring Social configuration
  4. Spring Security configuration
  5. JavaConfig
    • ApplicationInitializer.java
    • ApplicationContext.java
    • DataConfig.java
    • ThymeleafConfig.java
    • spring.properties
  6. View with Thymeleaf
  7. Layers
    • Domain
    • Repository
    • Service
    • Controller
  8. Running the application
    • Clone from GitHub
    • Create the Database
    • Run with Maven and Tomcat 7
    • Run with Maven and Jetty 8
    • Import to Eclipse
    • Validate with W3C

View with Thymeleaf


The goal of this section is not to teach you everything about Thymeleaf but to point out the important sections. If you need a full Thymeleaf documentation, please see the official docs.

What is Thymeleaf?

Thymeleaf is a Java library. It is an XML / XHTML / HTML5 template engine (extensible to other formats) that can work both in web and non-web environments. It is better suited for serving XHTML/HTML5 at the view layer of web applications, but it can process any XML file even in offline environments.

It provides an optional module for integration with Spring MVC, so that you can use it as a complete substitute of JSP in your applications made with this technology, even with HTML5.

The main goal of Thymeleaf is to provide an elegant and well-formed way of creating templates. Its Standard and SpringStandard dialects allow you to create powerful natural templates, that can be correctly displayed by browsers and therefore work also as static prototypes. You can also extend Thymeleaf by developing your own dialects.

Source: Thymeleaf.org

Since we have numerous html pages with duplicate setup, I will focus on the ones that are most instructive.

Facebook profile.html
This displays our Facebook profile information.



Let's discuss the important attributes
  • The # means to resolve the attribute from the messages bundle
  • The $ means to resolve the attribute from the model
  • The # and $ can be combined together so that messages can be dynamically generated from the model and internationalized from the messages bundle
  • th:href attribute
    <link rel="stylesheet" href="../../../resources/css/style.css"  th:href="@{/resources/css/style.css}" />
    
    Declares a resource relative to the context of the app. When testing the html mockup, the th:href attribute is ignored by the browser. When running the app, Thymeleaf's preprocessor will ignore the value of the href attribute and use the value in the th:ref attribute.
  • th:text attribute
    <title th:text="#{'profile.title.' + ${source}}">Title</title>
    
    Declares the usual title element. When testing the html mockup, the th:text attribute is ignored by the browser. When running the app, Thymeleaf's preprocessor will ignore the value of the title and use the value in the th:text attribute.

    This is a common attribute. So pay attention to this one.
  • th:include attribute
    <div th:include="include :: menu"></div>
    
    Includes an html fragment. The fragment is declared in the include.html
  • th:src attribute
    <img src="#" th:src="@{'http://graph.facebook.com/' +  ${profileInfo.id}} + '/picture'" alt="profile image"/>    
    
    Declares an image element. The attribute th:src is similar with the th:href behavior.

    The value of th:src contains two parts: 'http://graph.facebook.com/' which is a literal string and ${profileInfo.id} is a model attribute. The value is sent by our Spring controller (see below):


  • th:if attribute
    <dd th:if="${#strings.isEmpty(profileInfo.email)}" th:text="'no email listed'">john@email.com</dd>     
    
    A conditional expression. This states "if the profileInfo.email attribute is empty, print out 'no email listed', but if it's not empty, then print out the value.

Note: To see the remaining html pages, please visit the Github repository. I've omitted them here because most of the Thymeleaf tags we've discussed here are also the same ones we've used on those pages.

login.html
This is the login page. We've shown it here because this is used by Spring Security for rendering the login page.



For more info, please see Spring Security 3.1 - Implement UserDetailsService with Spring Data JPA tutorial.

Next

In the next section, we will focus on the Domain, Repository, Service, and Controller classes Click here to proceed.
StumpleUpon DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google I'm reading: Spring Social with JavaConfig (Part 6) ~ Twitter FaceBook

Subscribe by reader Subscribe by email Share

11 comments:

  1. Hi kramas,

    can you help me with eliminating below error pls.

    [ServerImpl] JBoss (Microcontainer) [5.0.1.GA (build: SVNTag=JBoss_5_0_1_GA date=200902231221)] Started in 1m:27s:96ms
    [STDOUT] WARN : org.springframework.social.connect.web.ConnectController - Exception while handling OAuth2 callback (The OAuth2 'state' parameter doesn't match.). Redirecting to facebook connection status page.

    ReplyDelete
  2. I have read your blog its very attractive and impressive. I like it your blog.

    Spring online training Spring online training Spring Hibernate online training Spring Hibernate online training Java online training

    spring training in chennai spring hibernate training in chennai

    ReplyDelete

  3. نتمني منكم زيارة مدونتنا لالعاب الفلاش مدونة اكثر من رائعة وايضا تدوينتك اكثر من رائعة جدا ولذالك اطلب منك ان تلقي نظرة علي مدونتي التي ب موضيعاالعاب طبخ 2017 وايضا يوجد مدونة اخري ننتظر ان تلقي نظرة عليها العاب سباق سيارات لا تبخل علنا بنظرة انها حقا تستحق وايضا
    العاب سيارات 2018

    ReplyDelete
  4. thank you so much for your useful info. i really thankful to you..

    ReplyDelete
  5. Good Post! Thank you so much for sharing this pretty post, it was so good to read and useful to improve my knowledge as updated one, keep blogging.

    core java training in Electronic City

    Hibernate Training in electronic city

    spring training in electronic city

    java j2ee training in electronic city

    ReplyDelete
  6. This can be a very informative and helpful post, very genuine and practical advice. Is actually very great for all. Especially this article is helping to the beginner. Thanks! download instagram stories

    ReplyDelete
  7. This comment has been removed by the author.

    ReplyDelete
  8. This comment has been removed by the author.

    ReplyDelete
  9. This comment has been removed by the author.

    ReplyDelete