Play framework : how to use “moreStyles” and “more

Question

In the file main.html, in default project created by Play!, there's this line :

#{get 'moreStyles' /}

I understand that if I need to add more styles, in my view script, I have to use

#{set tag:'value' /}

where tag should be moreStyles, but it seems worng to set the value to the full HTML <link> tag. And what happens if the view needs to add more styles, or scripts?

Thanks!

Answer 1

#{set 'moreStyles'}
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/ui-lightness/jquery-ui.css" charset="${_response_encoding}"/>
#{/set} 
#{set 'moreScripts'}
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js" type="text/javascript" charset="${_response_encoding}"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/i18n/jquery.ui.datepicker-zh-CN.js" type="text/javascript" charset="${_response_encoding}"></script>
<script language="javascript">
    $(document).ready(function() {
        $('.datepicker').datepicker();
    });
</script>
#{/set}

Answer 2

you set more styles with:

#{set 'moreStyles'}
        #{stylesheet 'main.css' /}
#{/set}

like scripts:

#{set 'moreScripts'}
    #{script 'base64.js'/}
#{/set}

Answer 3

simply using the #{set} tag will overwrite the previous values.

that is if you issue

#{set 'moreStyles'}xxx#{/set}

and then

#{set 'moreStyles'}yyy#{/set}

then

#{get 'moreStyles' /}

will only return yyy

in order to achieve what you want you have to

#{set 'moreStyles'}
    #{get 'moreStyles' /}
    #{stylesheet 'main.css' /}
#{/set}

and then the stylesheet main.css will be added to the previous value of morestyles

On a similar situation I ended up creating my own #{addStyle} tag