I'm trying to mimic template inheritance as found in Django with a Grails app. I want to be able to define a '_header.gsp' which includes all the shared resources across the app:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>${title}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
%{--Shared Styles--}%
<link rel="stylesheet" href="${resource(dir: 'app/shared/css/bootstrap', file: 'bootstrap.min.css')}" type="text/css">
%{--Shared Libraries--}%
<script src="${resource(dir: 'lib/jquery', file: 'jquery.js')}"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
%{--View-specific styles--}%
<g:each var="style" in="${styles}">
<link rel="stylesheet" href="${style}" type="text/css">
</g:each>
%{--View-specific scripts--}%
<g:each var="include" in="${includes}">
<script src="${include}" type="text/javascript"></script>
</g:each>
For each specific view template I will include this _header.gsp with a dictionary to fill in the view-specific requirements:
<g:render template="/header"
model="[
title:'Alerts',
styles:[
'${resource(dir: "app/stuff/css", file: "other.css")}',
'${resource(dir: "app/stuff/css", file: "second.css")}'
],
includes:[
'${resource(dir: "app/stuff/src/main/js/", file: "app.js")}',
'${resource(dir: "app/stuff/src/main/js/", file: "filters.js")}'
]
]" />
This is not working, and I'm sure my syntax is wrong somewhere. Can you define a '$resource(dir)' path inside of a g:each like I have? Perhaps I need to use g:link? Can this be done with Grails?
It sounds like you just need to use the resources tag. Define your 'resources' in ApplicationResources.groovy. Then, in your layout include the r:layoutResources tag, and finally, in the gsp specify the resource modules you want to include on that page.
In ApplicationResources.groovy
modules = {
application {
dependsOn 'jquery'
resource url: 'css/other.css'
resource url: 'css/second.css'
resource url: 'js/bootstrap.js'
}
charting {
//Charting is dependent on the 'application' resource module above,
// so it will include everything from the application and the
// charting css and js.
dependsOn 'application'
resource url: 'css/chart.css'
resource url: 'js/pie-chart.js'
}
reports {
//Completely separate so there is no dependsOn.
// Like 'application' module, it will only include the resources below.
resource url: 'css/pdf.css'
resource url: 'js/interactive-report.js'
}
}
In the /grails-app/layouts/main.gsp
<head>
...
<r:layoutResources />
</head>
<body>
...
<r:layoutResources />
</body>
In the /grails-app/views/someDomain/
list.gsp
<head>
...
<r:require modules="application" />
</head>
<body>
...
</body>
report.gsp
<head>
...
<r:require modules="reports" />
</head>
<body>
...
</body>
charts.gsp
<head>
...
<r:require modules="charting" />
</head>
<body>
...
</body>
Related
I am following this example how to import and use moment in Ionic 2 RC5.
But it cant find the file. My improt is in src/index.html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Ionic App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#4e8ef7">
<!-- cordova.js required for cordova apps -->
<script src="cordova.js"></script>
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<link href="build/main.css" rel="stylesheet">
</head>
<body>
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- The bundle js is generated during the build process -->
<script src="build/main.js"></script>
<script src="node_modules/moment/moment.js" />
</body>
</html>
To use momentjs on ionic2 according to this link:
1- npm install moment --save
2- in your .ts file:
import * as moment from 'moment';
and for example:
ngOnInit() {
let now = moment().format('LLLL');
console.log(now);
}
I migrated my application from Rails 3.2 to 4.0. I am having css and js in my assets folder and public -> technology folder.
Now while running the application, the css and js under public folder are not applicable.
This is my layout:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ABC TECHNOLOGIES</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/technology/css/vendor/bootstrap.css">
<link rel="stylesheet" href="/technology/css/all.css">
<link rel="stylesheet" href="/technology/css/colorbox.css">
<%= javascript_include_tag "application" %>
<script src="/technology/js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script src="/technology/js/vendor/bootstrap.min.js"></script>
</head>
<body>
------------ some code ---------------
</body>
</html>
How to access my css / js from public folder in this layout?
Or is there any configurations I missed or made true/false in development.rb / application.rb etc; ?
This is the link I followed.
I am wanting to use Google Adsense with an Ember site I'm working on. However, if I just copy the code block I get from Google I get this error:
Error: `SCRIPT` tags are not allowed in HTMLBars templates (on line 3)
After doing some searching, it seems some people has the same issue, but I have not found a solution for this. Does anybody have any ideas?
Put external scripts in your app/index.html file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>TmpApp</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
{{content-for 'head'}}
<link rel="stylesheet" href="assets/vendor.css">
<link rel="stylesheet" href="assets/tmpapp.css">
{{content-for 'head-footer'}}
</head>
<body>
{{content-for 'body'}}
<script src="assets/vendor.js"></script>
<script src="assets/tmpapp.js"></script>
{{content-for 'body-footer'}}
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-12345678-1', 'auto'); // get the exact number from your Google Analytics admin screen
ga('send', 'pageview');
</script>
</body>
</html>
Notice the script is below the content-for 'body-footer'? Remember to use your own Google Analytics code from your admin section in Google Analytics.
I'm looking for a "live code" repository (e.g., jsBin, jsFiddle, CodePen, plunkr, etc.) template useful for sandboxing (i.e., "posting") Polymer questions about the firebase-collection or firebase-document.
In other words, I'm building a Polymer app using a Firebase backend and I need a template to use for posting questions to this site.
For example, here is the template I use to post Polymer questions. Is there one that anyone knows of that can also support questions about the firebase-collection or firebase-document elements? (I'm guessing this would require a firebase with public read/write access.)
http://jsbin.com/sitomotoji/edit?html,output
<!doctype html>
<head>
<meta charset="utf-8">
<!---- >
<base href="https://polygit.org/components/">
Toggle below/above as backup when server is down
<!---->
<base href="https://polygit2.appspot.com/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-button/paper-button.html" rel="import">
</head>
<body>
<dom-module id="x-element">
<template>
<style></style>
<paper-button on-tap="_handleTap">Click Me</paper-button>
</template>
<script>
(function(){
Polymer({
is: "x-element",
properties: {
},
_handleTap: function() {
alert('User clicked me!');
},
});
})();
</script>
</dom-module>
<x-element></x-element>
</body>
http://jsbin.com/xojoxubigi/edit?html,output
<!doctype html>
<head>
<meta charset="utf-8">
<!---- >
<base href="https://polygit.org/components/">
<!---- >
Toggle below/above as backup when server is down
<!---->
<base href="https://polygit2.appspot.com/components/">
<!---->
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="firebase-element/firebase-collection.html" rel="import">
<link href="paper-button/paper-button.html" rel="import">
</head>
<body>
<dom-module id="x-element">
<template>
<style></style>
<p>
<paper-button on-tap="_handleClick">Click Me</paper-button>
</p>
<!---->
<firebase-collection
location="https://dinosaur-facts.firebaseio.com/dinosaurs"
data="{{dinosaurs}}"></firebase-collection>
<template is="dom-repeat" items="[[dinosaurs]]" as="dinosaur">
<div>
[[dinosaur.height]]
</div>
</template>
<!---->
</template>
<script>
(function(){
Polymer({
is: "x-element",
_handleClick: function() {
console.log('You clicked me!');
}
});
})();
</script>
</dom-module>
<x-element></x-element>
</body>
motivation
I want to user bower (grunt) package of bootstrap in my django template folder. I am aware of django-bootstrap3 which ideally can be configured to use those "local"/deployed copies of bootstrap package.
For now, I need a plain example to work. So this is what I do
step 1: layout.html
I take an hello world template layout.html (from bootstrap docs page) and put it into templates folder registered within my django project:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
This example is valid for precompiled package.
step 2: bower
I run something like:
cd path/to/django/static/folder
bower install bootstrap
That creates a folder called bower_components
step 3: linking
?
PS
I am currently looking at yeoman board here to check if what is discussed is also a solution for me.
Use static files as documented on django page
{% static "bower_components/bootstrap/dist/css/bootstrap.css" %}
In detail,
Layout.html will be changed to (assuming django 1.6):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}title{% endblock %}</title>
{% load staticfiles %}
<!-- Bootstrap -->
<link href="{% static "bower_components/bootstrap/dist/css/bootstrap.css" %}" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
{% block content %}
{% endblock %}
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="{% static "bower_components/jquery/dist/jquery.min.js" %}"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="{% static "bower_components/bootstrap/dist/js/bootstrap.min.js" %}"></script>
</body>
</html>