In my JSF2 project I want to include following two style sheet to my Facelet page based on a condition which is to be obtained from a managed bean.
<link rel="stylesheet" href="css/menu_style_1.css" type="text/css" />
<link rel="stylesheet" href="css/menu_style_2.css" type="text/css" />
How can I achieve this?
try
<h:outputStylesheet name="css/menu_style_1.css" target="head" rendered="#{myBean.myValue eq 'myCondition1'}"/>
and
<h:outputStylesheet name="css/menu_style_2.css" target="head" rendered="#{myBean.myValue eq 'myCondition2'}"/>
OR... you can do it in one line...
<h:outputStylesheet name="css/#{myBean.myValue == 'true' ? 'menu_style_1.css' : 'menu_style_2.css'}" target="head" />
I guess if you want to stick to the link tag you can try something like that
<link rel="stylesheet" href="css/#{myBean.myValue == 'true' ? 'menu_style_1.css' : 'menu_style_2.css'}" type="text/css" />
Related
I followed these instructions for my app:
https://github.com/yeoman/generator-angular#readme
My Index (before build)
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/app.css -->
<link href="app.less" type="text/css" rel="stylesheet/less">
<!-- endbuild -->
My dist Index (in text-editor)
<html ng-app="myApp"> <head> <meta charset="utf-8"> <title>Datavalidering</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> <link rel="stylesheet" href="styles/vendor.2ac5f564.css"> <link rel="stylesheet" href="styles/app.d41d8cd9.css"> </head> <body>
Dist index (browser)
<head>
<style type="text/css">#charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}</style>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="styles/vendor.2ac5f564.css"> <link rel="stylesheet" href="styles/app.d41d8cd9.css">
<style type="text/css">body { display: none !important }</style></head>
<body>
The problem may be in gruntfile.js
http://plnkr.co/edit/r2hdhWY7olIw0pBHJ4VF?p=preview
Thank you in advance for your answers!
This happens because of (less.js):
// Simulate synchronous stylesheet loading by blocking page rendering
if (!options.async)
{
css = 'body { display: none !important }';
head = document.head || document.getElementsByTagName('head')[0];
style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
}
so, all you need to do is add this before less.js
<script>
less = {
async: true
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.6.1/less.min.js"></script>
I'm not using Angular, but had a similar problem where this <style type="text/css">body { display: none !important }</style> suddenly appears at the end of head tag, effectively renders the whole page to not displaying anything.
I found out that the culprit was less.js. Simply commenting the line fixes it.
I have found a solution and the culprit.
It comes from the "Jetpack".
This image shows the location of the code in WordPress Directory:
I have some GSP variables set in the "main" layout file of my Grails application (included below). The values of these variables don't appear to be accessible in the GSP pages that are rendered by the sitemesh. Also, they are not visible in any templates that are rendered by the tag. I have tried setting the scope="request" (see code) below, but that doesn't appear to make any difference. I'm clearly not understanding the scoping rules for GSP variables.
Can anyone clarify how GSP variables are scoped and make a recommendation on how I can communicate them from the layout all the way down to templates (if I can at all).
<!DOCTYPE html>
<%-- <html lang="${org.springframework.web.servlet.support.RequestContextUtils.getLocale(request).toString().replace('_', '-')}"> --%>
<html lang="${session.'org.springframework.web.servlet.i18n.SessionLocaleResolver.LOCALE'}">
<head>
<title><g:layoutTitle default="${meta(name:'app.name')}" /></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<asset:javascript src="bootstrap.js" />
<theme:load />
<asset:javascript src="application.js" />
<asset:stylesheet src="application.css" />
<asset:link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<g:layoutHead />
<%-- Defineform body layout column dimensions. These values are used by Bootstrap based forms to
layout using configured column widths and offsets. --%>
<g:set var="labelWidth" value="${grailsApplication.config.ark.layout.labelWidth ?: 'col-sm-3'}" scope="request" />
<g:set var="controlWidth" value="${grailsApplication.config.ark.layout.controlWidth ?: 'col-sm-4'}" scope="request" />
<g:set var="controlOffset" value="${grailsApplication.config.ark.layout.controlWidth ?: 'col-sm-offset-3'}" scope="request" />
<%-- For Javascript see end of body --%>
</head>
<body>
<g:render plugin="arkUi" template="/layouts/menu/navbar"/>
<g:render plugin="arkUi" template="/layouts/content"/>
<g:render plugin="arkUi" template="/layouts/footer"/>
<!-- Include deferred Javascript files and other resources -->
<asset:deferredScripts/>
</body>
</html>
The issue here is that Grails first parses the target GSP page to (among other things) determine which layout to use, then parses the layout GSP and combines them. So the layout can see variables you set in the page but not vice-versa.
I'm building a game site in asp.net mvc all games are going to be in unity3d
The error I receive when i test my page out is the following;
"Failed to download data file"
Here is what is in my .layout.cshtml
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - Hippokros</title>
<link href="~/Content/zocial.css" rel="stylesheet" />
<link href="~/Content/Hippokros.css" rel="stylesheet" />
<link href="~/Content/base_welcome.css" rel="stylesheet" />
<script type="text/javascript" src="http://webplayer.unity3d.com/download_webplayer-3.x/3.0/uo/UnityObject.js"></script>
<script type="text/javascript">
function GetUnity() {
if (typeof unityObject != "undefined") {
return unityObject.getObjectById("unityPlayer");
}
return null;
}
if (typeof unityObject != "undefined") {
unityObject.embedUnity("unityPlayer", "platformer.unity3d", 480, 320);
}
</script>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#RenderSection("Header", false)
Here is the page that I'm placing the div tag that should have the game object embeded.
<div id="unityPlayer">
<div class="missing">
<a href="http://unity3d.com/webplayer/" title="Unity Web Player. Install now!">
<img alt="Unity Web Player. Install now!" src="http://webplayer.unity3d.com/installation/getunity.png" width="193" height="63" />
</a>
</div>
</div>
The game file is in the root project folder. ? I think that's right
and the web.config is setting up the MIME type correctly I think?
<system.webServer>
<staticContent>
<mimeMap fileExtension=".unity3d" mimeType="application/octet-stream" />
</staticContent>
<handlers>
<remove name="BlockViewHandler"/>
<add name="BlockViewHandler" path="*" verb="*" preCondition="integratedMode" type="System.Web.HttpNotFoundHandler" />
</handlers>
I've lost a lot of hours out of dev time working on this problem that i know it's probably just an easy reference or configuration setting change.
Please help!
change <mimeMap fileExtension=".unity3d" mimeType="application/octet-stream" />
to <mimeMap fileExtension=".unity3d" mimeType="application/vnd.unity" />
in my data_feed controller and bar action, there's only one line in bar.html.erb:
[1,2,3,4]
My expected output by requesting http://localhost:3000/data_feed/bar is just one line I wrote above.
However, rails help me add some html heads into that page, as below:
<!DOCTYPE html>
<html>
<head>
<title>Guustock</title>
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/charts.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/data_feed.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/show.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/charts.js?body=1" type="text/javascript"></script>
<script src="/assets/data_feed.js?body=1" type="text/javascript"></script>
<script src="/assets/show.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="lhHWCW82xtqQ8fmgBZemDggL2DGJe+4chXM8MY1LKvs=" name="csrf-token" />
</head>
<body>
[1,2,3,4]
How can I avoid rails doing this?
Thanks!
Env:
linux mint 11.0
ruby 1.9.3 with rvm
rails 3.2.1
EDIT:
Actually I want to provide the json format data in this page as an ajax data source. So these heads will not helpful but break the data.
You're probably rendering within the layout (a view template, which lives in app/views/layouts/), which is the default. If you want to render an action without the layout, use something like
render :bar, :layout => false
in the appropriate action.
See also: http://guides.rubyonrails.org/layouts_and_rendering.html
EDIT:
Please see the documentation linked above. For JSON rendering, you might use this directly from the controller:
render :json => #product
or in your case
render :json => [1,2,3,4]
You could also use JSON view templates (for which you'll need to render again). Using a bar.html.erb template for json is not only tricky as you noticed, it will also produce the wrong content type headers.
I've been battling various resource inclusion issues in my migration from Grails 1.3.7 from Grails 2.0, probably not understanding a few things to begin with.
Firstly, what does
<g:javascript library="application" />
do? (this was in the default main.gsp provided in Grails 1.3.7).
Secondly, for including jquery across my application, can I just do
<r:require module='jquery' />
<r:layoutResources />
in the top of my main sitemesh page that does the
<g:layoutHead />
...
<g:layoutBody />
and "be done with it", using the
<r:layoutResources />
a second time after the
<g:layoutBody />
Thanks
Yes I struggled a little with this at first too.
So firstly the <g:javascript library="application" /> refers to a module defined in a config/*.Resources.groovy file (default is config/ApplicationResources.groovy), inside that you have named modules, eg:
modules = {
application {
resource url: 'js/jquery/jquery-ui-1.8.15.custom.min.js', disposition: 'head'
}
}
Secondly by example a Grails2 main.gsp (cutdown a lot here):
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><g:layoutTitle default="Grails"/></title>
<link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}" type="text/css">
<link rel="stylesheet" href="${resource(dir: 'css', file: 'mobile.css')}" type="text/css">
<link rel="stylesheet" href="${resource(dir: 'css/redmond', file: 'jquery-ui-1.8.15.custom.css')}" type="text/css">
<g:layoutHead/>
<g:javascript library="jquery"/>
<r:require module="application"/>
<r:layoutResources/>
</head>
<body>
<g:layoutBody/>
<r:layoutResources/>
</body>
</html>
Hope that sets you in the right direction