How to reference CSS / JS / image resource in Facelets template?

I've done tutorial about Facelets templating.

Now I've tried to create a page that isn't in same directory as the template. I've got problems with page style, because of styles are referenced with relative path like so:

<link rel="stylesheet" href="style_resource_path.css" />

I can use absolute referencing by starting with /:

<link rel="stylesheet" href="/project_root_path/style_resource_path.css" />

But this will bring me troubles when I'll be moving application to a different context.

So I'm wondering what is best way to reference CSS (and JS and image) resources in Facelets?

edited May 29 '15 at 5:57

BalusC

840k29631123193

asked Dec 3 '11 at 11:47

kravemir

4,999134583

add a comment |

I've done tutorial about Facelets templating.

Now I've tried to create a page that isn't in same directory as the template. I've got problems with page style, because of styles are referenced with relative path like so:

<link rel="stylesheet" href="style_resource_path.css" />

I can use absolute referencing by starting with /:

<link rel="stylesheet" href="/project_root_path/style_resource_path.css" />

But this will bring me troubles when I'll be moving application to a different context.

So I'm wondering what is best way to reference CSS (and JS and image) resources in Facelets?

edited May 29 '15 at 5:57

BalusC

840k29631123193

asked Dec 3 '11 at 11:47

kravemir

4,999134583

add a comment |

I've done tutorial about Facelets templating.

Now I've tried to create a page that isn't in same directory as the template. I've got problems with page style, because of styles are referenced with relative path like so:

<link rel="stylesheet" href="style_resource_path.css" />

I can use absolute referencing by starting with /:

<link rel="stylesheet" href="/project_root_path/style_resource_path.css" />

But this will bring me troubles when I'll be moving application to a different context.

So I'm wondering what is best way to reference CSS (and JS and image) resources in Facelets?

edited May 29 '15 at 5:57

BalusC

840k29631123193

asked Dec 3 '11 at 11:47

kravemir

4,999134583

I've done tutorial about Facelets templating.

Now I've tried to create a page that isn't in same directory as the template. I've got problems with page style, because of styles are referenced with relative path like so:

<link rel="stylesheet" href="style_resource_path.css" />

I can use absolute referencing by starting with /:

<link rel="stylesheet" href="/project_root_path/style_resource_path.css" />

But this will bring me troubles when I'll be moving application to a different context.

So I'm wondering what is best way to reference CSS (and JS and image) resources in Facelets?

jsf resources jsf-2 facelets templating

edited May 29 '15 at 5:57

BalusC

840k29631123193

asked Dec 3 '11 at 11:47

kravemir

4,999134583

edited May 29 '15 at 5:57

BalusC

840k29631123193

asked Dec 3 '11 at 11:47

kravemir

4,999134583

edited May 29 '15 at 5:57

BalusC

840k29631123193

edited May 29 '15 at 5:57

BalusC

840k29631123193

edited May 29 '15 at 5:57

BalusC

840k29631123193

asked Dec 3 '11 at 11:47

kravemir

4,999134583

asked Dec 3 '11 at 11:47

kravemir

4,999134583

asked Dec 3 '11 at 11:47

kravemir

4,999134583

add a comment |

3 Answers
3

active

oldest

votes

Introduction

The proper JSF 2.x way is using <h:outputStylesheet>, <h:outputScript> and <h:graphicImage> with a name referring the path relative to webapp's /resources folder. This way you don't need to worry about the context path as you would do in JSF 1.x. See also How to include CSS relative to context path in JSF 1.x?

Folder structure

Drop the CSS/JS/image files in /resources folder of the public webcontent as below (just create one if not already exist at the same level as /WEB-INF and /META-INF).

WebContent
 |-- META-INF
 |-- WEB-INF
 |-- resources
 | |-- css
 | | |-- other.css
 | | `-- style.css
 | |-- js
 | | `-- script.js
 | `-- images
 | |-- background.png
 | |-- favicon.ico
 | `-- logo.png
 |-- page.xhtml
 :

In case of Maven, it should be in /main/webapp/resources and thus not /main/resources (those are for Java resources (properties/xml/text/config files) which must end up in runtime classpath, not in webcontent). See also Maven and JSF webapp structure, where exactly to put JSF resources.

Referencing in Facelets

Ultimately, those resources are available as below everywhere without the need to fiddle with relative paths:

<h:head>
 ...
 <h:outputStylesheet name="css/style.css" />
 <h:outputScript name="js/script.js" />
</h:head>
<h:body>
 ...
 <h:graphicImage name="images/logo.png" />
 ...
</h:body>

The name attribute must represent the full path relative to the /resources folder. It does not need to start with /. You do not need the library attribute as long as you aren't developing a component library like PrimeFaces or a common module JAR file which is shared by multiple webapps.

You can reference the <h:outputStylesheet> anywhere, also in <ui:define> of template clients without the need for an additional <h:head>. It will via the <h:head> component of master template automatically end up in generated <head>.

<ui:define name="...">
 <h:outputStylesheet name="css/style.css" />
 ...
</ui:define>

You can reference <h:outputScript> also anywhere, but it will by default end up in the HTML exactly there where you declared it. If you want it to end up in <head> via <h:head>, then add target="head" attribute.

<ui:define name="...">
 <h:outputScript name="js/script.js" target="head" />
 ...
</ui:define>

Or, if you want it to end up at the end of <body> (right before </body>, so that e.g. window.onload and $(document).ready() etc isn't necessary) via <h:body>, then add target="body" attribute.

<ui:define name="...">
 <h:outputScript name="js/script.js" target="body" />
 ...
</ui:define>

PrimeFaces `HeadRenderer`

In case you're using PrimeFaces, its HeadRenderer will messup the default <h:head> script ordering as described above. You're basically forced to force the order via PrimeFaces-specific <f:facet name="first|middle|last">, which may end up in messy and "untemplateable" code. You may want to turn off it as described in this answer.

Packaging in JAR

You can even package the resources in a JAR file. See also Structure for multiple JSF projects with shared code.

Referencing in EL

You can in EL use the #resource mapping to let JSF basically print a resource URL like /context/javax.faces.resource/folder/file.ext.xhtml?ln=library so that you could use it as e.g. CSS background image or favicon. Only requirement is that the CSS file itself should also be served as a JSF resource, otherwise EL expressions won't evaluate. See also How to reference JSF image resource as CSS background image url.

.some 
 background-image: url("#resource['images/background.png']");

Here's the @import example.

@import url("#resource['css/other.css']");

Here's the favicon example. See also Add favicon to JSF project and reference it in <link>.

<link rel="shortcut icon" href="#resource['images/favicon.ico']" />

Referencing third-party CSS files

Third party CSS files loaded via <h:outputStylesheet> which in turn reference fonts and/or images may need to be altered to use #resource expressions as described in previous section, otherwise an UnmappedResourceHandler needs to be installed in order to be able to serve those using JSF. See also a.o. Bootsfaces page shows up in browser without any styling and How to use Font Awesome 4.x CSS file with JSF? Browser can't find font files.

Hiding in /WEB-INF

If you intend to hide the resources from public access by moving the whole /resources folder into /WEB-INF, then you can since JSF 2.2 optionally change the webcontent-relative path via a new web.xml context parameter as follows:

<context-param>
 <param-name>javax.faces.WEBAPP_RESOURCES_DIRECTORY</param-name>
 <param-value>/WEB-INF/resources</param-value>
</context-param>

In older JSF versions this is not possible.

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f8367421%2fhow-to-reference-css-js-image-resource-in-facelets-template%23new-answer', 'question_page');

);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

Introduction

Folder structure

Drop the CSS/JS/image files in /resources folder of the public webcontent as below (just create one if not already exist at the same level as /WEB-INF and /META-INF).

WebContent
 |-- META-INF
 |-- WEB-INF
 |-- resources
 | |-- css
 | | |-- other.css
 | | `-- style.css
 | |-- js
 | | `-- script.js
 | `-- images
 | |-- background.png
 | |-- favicon.ico
 | `-- logo.png
 |-- page.xhtml
 :

Referencing in Facelets

Ultimately, those resources are available as below everywhere without the need to fiddle with relative paths:

<h:head>
 ...
 <h:outputStylesheet name="css/style.css" />
 <h:outputScript name="js/script.js" />
</h:head>
<h:body>
 ...
 <h:graphicImage name="images/logo.png" />
 ...
</h:body>

<ui:define name="...">
 <h:outputStylesheet name="css/style.css" />
 ...
</ui:define>

<ui:define name="...">
 <h:outputScript name="js/script.js" target="head" />
 ...
</ui:define>

<ui:define name="...">
 <h:outputScript name="js/script.js" target="body" />
 ...
</ui:define>

PrimeFaces `HeadRenderer`

Packaging in JAR

You can even package the resources in a JAR file. See also Structure for multiple JSF projects with shared code.

Referencing in EL

.some 
 background-image: url("#resource['images/background.png']");

Here's the @import example.

@import url("#resource['css/other.css']");

Here's the favicon example. See also Add favicon to JSF project and reference it in <link>.

<link rel="shortcut icon" href="#resource['images/favicon.ico']" />

Referencing third-party CSS files

Hiding in /WEB-INF

<context-param>
 <param-name>javax.faces.WEBAPP_RESOURCES_DIRECTORY</param-name>
 <param-value>/WEB-INF/resources</param-value>
</context-param>

In older JSF versions this is not possible.

Introduction

Folder structure

Drop the CSS/JS/image files in /resources folder of the public webcontent as below (just create one if not already exist at the same level as /WEB-INF and /META-INF).

WebContent
 |-- META-INF
 |-- WEB-INF
 |-- resources
 | |-- css
 | | |-- other.css
 | | `-- style.css
 | |-- js
 | | `-- script.js
 | `-- images
 | |-- background.png
 | |-- favicon.ico
 | `-- logo.png
 |-- page.xhtml
 :

Referencing in Facelets

Ultimately, those resources are available as below everywhere without the need to fiddle with relative paths:

<h:head>
 ...
 <h:outputStylesheet name="css/style.css" />
 <h:outputScript name="js/script.js" />
</h:head>
<h:body>
 ...
 <h:graphicImage name="images/logo.png" />
 ...
</h:body>

<ui:define name="...">
 <h:outputStylesheet name="css/style.css" />
 ...
</ui:define>

<ui:define name="...">
 <h:outputScript name="js/script.js" target="head" />
 ...
</ui:define>

<ui:define name="...">
 <h:outputScript name="js/script.js" target="body" />
 ...
</ui:define>

PrimeFaces `HeadRenderer`

Packaging in JAR

You can even package the resources in a JAR file. See also Structure for multiple JSF projects with shared code.

Referencing in EL

.some 
 background-image: url("#resource['images/background.png']");

Here's the @import example.

@import url("#resource['css/other.css']");

Here's the favicon example. See also Add favicon to JSF project and reference it in <link>.

<link rel="shortcut icon" href="#resource['images/favicon.ico']" />

Referencing third-party CSS files

Hiding in /WEB-INF

<context-param>
 <param-name>javax.faces.WEBAPP_RESOURCES_DIRECTORY</param-name>
 <param-value>/WEB-INF/resources</param-value>
</context-param>

In older JSF versions this is not possible.

Introduction

Folder structure

Drop the CSS/JS/image files in /resources folder of the public webcontent as below (just create one if not already exist at the same level as /WEB-INF and /META-INF).

WebContent
 |-- META-INF
 |-- WEB-INF
 |-- resources
 | |-- css
 | | |-- other.css
 | | `-- style.css
 | |-- js
 | | `-- script.js
 | `-- images
 | |-- background.png
 | |-- favicon.ico
 | `-- logo.png
 |-- page.xhtml
 :

Referencing in Facelets

Ultimately, those resources are available as below everywhere without the need to fiddle with relative paths:

<h:head>
 ...
 <h:outputStylesheet name="css/style.css" />
 <h:outputScript name="js/script.js" />
</h:head>
<h:body>
 ...
 <h:graphicImage name="images/logo.png" />
 ...
</h:body>

<ui:define name="...">
 <h:outputStylesheet name="css/style.css" />
 ...
</ui:define>

<ui:define name="...">
 <h:outputScript name="js/script.js" target="head" />
 ...
</ui:define>

<ui:define name="...">
 <h:outputScript name="js/script.js" target="body" />
 ...
</ui:define>

PrimeFaces `HeadRenderer`

Packaging in JAR

You can even package the resources in a JAR file. See also Structure for multiple JSF projects with shared code.

Referencing in EL

.some 
 background-image: url("#resource['images/background.png']");

Here's the @import example.

@import url("#resource['css/other.css']");

Here's the favicon example. See also Add favicon to JSF project and reference it in <link>.

<link rel="shortcut icon" href="#resource['images/favicon.ico']" />

Referencing third-party CSS files

Hiding in /WEB-INF

<context-param>
 <param-name>javax.faces.WEBAPP_RESOURCES_DIRECTORY</param-name>
 <param-value>/WEB-INF/resources</param-value>
</context-param>

In older JSF versions this is not possible.

Introduction

Folder structure

Drop the CSS/JS/image files in /resources folder of the public webcontent as below (just create one if not already exist at the same level as /WEB-INF and /META-INF).

WebContent
 |-- META-INF
 |-- WEB-INF
 |-- resources
 | |-- css
 | | |-- other.css
 | | `-- style.css
 | |-- js
 | | `-- script.js
 | `-- images
 | |-- background.png
 | |-- favicon.ico
 | `-- logo.png
 |-- page.xhtml
 :

Referencing in Facelets

Ultimately, those resources are available as below everywhere without the need to fiddle with relative paths:

<h:head>
 ...
 <h:outputStylesheet name="css/style.css" />
 <h:outputScript name="js/script.js" />
</h:head>
<h:body>
 ...
 <h:graphicImage name="images/logo.png" />
 ...
</h:body>

<ui:define name="...">
 <h:outputStylesheet name="css/style.css" />
 ...
</ui:define>

<ui:define name="...">
 <h:outputScript name="js/script.js" target="head" />
 ...
</ui:define>

<ui:define name="...">
 <h:outputScript name="js/script.js" target="body" />
 ...
</ui:define>

PrimeFaces `HeadRenderer`

Packaging in JAR

You can even package the resources in a JAR file. See also Structure for multiple JSF projects with shared code.

Referencing in EL

.some 
 background-image: url("#resource['images/background.png']");

Here's the @import example.

@import url("#resource['css/other.css']");

Here's the favicon example. See also Add favicon to JSF project and reference it in <link>.

<link rel="shortcut icon" href="#resource['images/favicon.ico']" />

Referencing third-party CSS files

Hiding in /WEB-INF

<context-param>
 <param-name>javax.faces.WEBAPP_RESOURCES_DIRECTORY</param-name>
 <param-value>/WEB-INF/resources</param-value>
</context-param>

In older JSF versions this is not possible.

I've got it working in CSS, but if I wanted to reference a file in JavaScript, then how? The notation url("#resource['otbofaces:date-entry/calendar.gif']") works great in a CSS file, but I've yet to find anything that I can use within a javascript file in order to get the correct resource location.
– mrswadge
Jan 21 '16 at 18:25

@mrswadge: stackoverflow.com/q/30130657
– BalusC
Jan 21 '16 at 22:05

Thanks @BalusC. I opted to go a completely different route and have used Font Awesome instead. :)
– mrswadge
Jan 22 '16 at 11:19

What I am missing is that I expected that a 'template.xhtml' is also a resource. So I was fully expecting to do something like <ui:composition template="/templates/report.xhtml"> with my template residing in web/resources/templates/report.xhtml, even making use of how resources are structured in libraries. It is not working that way.
– YoYo
Feb 25 '17 at 22:13

Thanks useful documentation
– Vision Mkhabela
Sep 12 '17 at 16:14

add a comment |

I've got it working in CSS, but if I wanted to reference a file in JavaScript, then how? The notation url("#resource['otbofaces:date-entry/calendar.gif']") works great in a CSS file, but I've yet to find anything that I can use within a javascript file in order to get the correct resource location.
– mrswadge
Jan 21 '16 at 18:25

@mrswadge: stackoverflow.com/q/30130657
– BalusC
Jan 21 '16 at 22:05

Thanks @BalusC. I opted to go a completely different route and have used Font Awesome instead. :)
– mrswadge
Jan 22 '16 at 11:19

What I am missing is that I expected that a 'template.xhtml' is also a resource. So I was fully expecting to do something like <ui:composition template="/templates/report.xhtml"> with my template residing in web/resources/templates/report.xhtml, even making use of how resources are structured in libraries. It is not working that way.
– YoYo
Feb 25 '17 at 22:13

Thanks useful documentation
– Vision Mkhabela
Sep 12 '17 at 16:14

I've got it working in CSS, but if I wanted to reference a file in JavaScript, then how? The notation url("#resource['otbofaces:date-entry/calendar.gif']") works great in a CSS file, but I've yet to find anything that I can use within a javascript file in order to get the correct resource location.
– mrswadge
Jan 21 '16 at 18:25

@mrswadge: stackoverflow.com/q/30130657
– BalusC
Jan 21 '16 at 22:05

Thanks @BalusC. I opted to go a completely different route and have used Font Awesome instead. :)
– mrswadge
Jan 22 '16 at 11:19

What I am missing is that I expected that a 'template.xhtml' is also a resource. So I was fully expecting to do something like <ui:composition template="/templates/report.xhtml"> with my template residing in web/resources/templates/report.xhtml, even making use of how resources are structured in libraries. It is not working that way.
– YoYo
Feb 25 '17 at 22:13

Thanks useful documentation
– Vision Mkhabela
Sep 12 '17 at 16:14

add a comment |

Suppose that you are running the in the sub directories of the web application. You may try like this :

 <link href="$facesContext.externalContext.requestContextPath/css/style.css" rel="stylesheet" type="text/css"/>

The '$facesContext.externalContext.requestContextPath/' link will help you to return immediately to the root of the context.

<link rel="stylesheet" type="text/css" href="styles/decoration.css" />

edited Jul 12 '17 at 8:21

answered Dec 3 '11 at 11:54

Abimaran Kugathasan

20.9k85993

1

Thanks. It's what i'm searching for.
– kravemir
Dec 3 '11 at 11:58

6

This is not the proper Facelets way though. This is more the JSP way.
– BalusC
Dec 3 '11 at 15:38

add a comment |

Suppose that you are running the in the sub directories of the web application. You may try like this :

 <link href="$facesContext.externalContext.requestContextPath/css/style.css" rel="stylesheet" type="text/css"/>

The '$facesContext.externalContext.requestContextPath/' link will help you to return immediately to the root of the context.

<link rel="stylesheet" type="text/css" href="styles/decoration.css" />

edited Jul 12 '17 at 8:21

answered Dec 3 '11 at 11:54

Abimaran Kugathasan

20.9k85993

1

Thanks. It's what i'm searching for.
– kravemir
Dec 3 '11 at 11:58

6

This is not the proper Facelets way though. This is more the JSP way.
– BalusC
Dec 3 '11 at 15:38

add a comment |

Suppose that you are running the in the sub directories of the web application. You may try like this :

 <link href="$facesContext.externalContext.requestContextPath/css/style.css" rel="stylesheet" type="text/css"/>

The '$facesContext.externalContext.requestContextPath/' link will help you to return immediately to the root of the context.

<link rel="stylesheet" type="text/css" href="styles/decoration.css" />

edited Jul 12 '17 at 8:21

answered Dec 3 '11 at 11:54

Abimaran Kugathasan

20.9k85993

Suppose that you are running the in the sub directories of the web application. You may try like this :

 <link href="$facesContext.externalContext.requestContextPath/css/style.css" rel="stylesheet" type="text/css"/>

The '$facesContext.externalContext.requestContextPath/' link will help you to return immediately to the root of the context.

<link rel="stylesheet" type="text/css" href="styles/decoration.css" />

edited Jul 12 '17 at 8:21

answered Dec 3 '11 at 11:54

Abimaran Kugathasan

20.9k85993

edited Jul 12 '17 at 8:21

answered Dec 3 '11 at 11:54

Abimaran Kugathasan

20.9k85993

answered Dec 3 '11 at 11:54

Abimaran Kugathasan

20.9k85993

answered Dec 3 '11 at 11:54

Abimaran Kugathasan

20.9k85993

1

Thanks. It's what i'm searching for.
– kravemir
Dec 3 '11 at 11:58

6

This is not the proper Facelets way though. This is more the JSP way.
– BalusC
Dec 3 '11 at 15:38

add a comment |

1

Thanks. It's what i'm searching for.
– kravemir
Dec 3 '11 at 11:58

6

This is not the proper Facelets way though. This is more the JSP way.
– BalusC
Dec 3 '11 at 15:38

Thanks. It's what i'm searching for.
– kravemir
Dec 3 '11 at 11:58

This is not the proper Facelets way though. This is more the JSP way.
– BalusC
Dec 3 '11 at 15:38

add a comment |

These answers helped me to fix the same issue. Although my problem was more complex since I was using SASS and GULP.

I had to change (please note the "" in front of the #. Probably side effect from gulp:

 <h:outputStylesheet library="my_theme" name="css/default.css"/> 

 background: $blue url("#resource['my_theme/images/background-homepage-h1.png']");

answered Jun 25 '17 at 3:46

Mircea Stanciu

1,96522228

add a comment |

These answers helped me to fix the same issue. Although my problem was more complex since I was using SASS and GULP.

I had to change (please note the "" in front of the #. Probably side effect from gulp:

 <h:outputStylesheet library="my_theme" name="css/default.css"/> 

 background: $blue url("#resource['my_theme/images/background-homepage-h1.png']");

answered Jun 25 '17 at 3:46

Mircea Stanciu

1,96522228

add a comment |

These answers helped me to fix the same issue. Although my problem was more complex since I was using SASS and GULP.

I had to change (please note the "" in front of the #. Probably side effect from gulp:

 <h:outputStylesheet library="my_theme" name="css/default.css"/> 

 background: $blue url("#resource['my_theme/images/background-homepage-h1.png']");

answered Jun 25 '17 at 3:46

Mircea Stanciu

1,96522228

These answers helped me to fix the same issue. Although my problem was more complex since I was using SASS and GULP.

I had to change (please note the "" in front of the #. Probably side effect from gulp:

 <h:outputStylesheet library="my_theme" name="css/default.css"/> 

 background: $blue url("#resource['my_theme/images/background-homepage-h1.png']");

answered Jun 25 '17 at 3:46

Mircea Stanciu

1,96522228

answered Jun 25 '17 at 3:46

Mircea Stanciu

1,96522228

answered Jun 25 '17 at 3:46

Mircea Stanciu

1,96522228

answered Jun 25 '17 at 3:46

Mircea Stanciu

1,96522228

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here