currently I'm using a JSP templating system which uses this example's lib ("/WEB-INF/tlds/template.tld").
I'm not even sure how it's called.
Anyway it seems like it's not too developed, it makes problems with form POST method, I have no idea who made it (just found it) and I've heard about Apache's Struts & Tiles.
I'm not even sure that Struts does what I'm talking about.
Down to business:
A page in my site has this JSP content, that utilizes the template:
<%# taglib uri="/WEB-INF/tlds/template.tld" prefix="template"%>
<template:insert template="/WEB-INF/main_template_page/template.jsp">
<template:put name="title" content="Title here" direct="true" />
<template:put name="content" content="/content.jsp" />
</template:insert>
The template is:
<%# taglib uri='/WEB-INF/tlds/template.tld' prefix='template'%>
<html>
<head>
<title>
<template:get name='title' />
</title>
<link type="text/css" rel="stylesheet" href="/styles.css" />
</head>
<body>
<div id="div_header">
<div class="content">
<%#include file='header.html'%>
</div>
</div>
<div id="div_content">
<template:get name='content' />
</div>
<div id="div_footer">
<%#include file='footer.html'%>
</div>
</body>
</html>
So as you see each page gives the template some parameters and it all works nice.
Is there a "well-established" system that does that? I'm sure there is; What its name? Which would you use for pretty much simple pages, but, has to support dynamic ones with code (JSP).
Quaternion is right that Tiles and SiteMesh are both pretty popular decoration frameworks. You can also use JSP .tag files to achieve this, as shown in this answer.
I've never used SiteMesh, but I've worked on several projects at work that use Tiles and I don't care for it -- to me it's just an extra layer that doesn't add enough bang-for-my-buck. Tag files have the added bonus of being a built-in part of JSP.
Apache Tiles and Sitemesh are the two most popular systems. Tiles is more in keeping with what you demonstrated.
Related
Trying to implement Google Places API, to look for businesses.
I am trying to break down the result in different sections (name,address,city...) to stick it in a form.
Doing a bit of research, I have actually found the ultimate code to copy. However, I am using Django and I am too much of a newbie in coding, to understand how to alter the code to make it work with the framework. (https://jsfiddle.net/geocodezip/ep5aw171/1/)
Here is the code I have:
js file
function initMap(){
autocomplete = new google.maps.places.Autocomplete(document.getElementById("input"),{
componentRestrictions: {'country':['uk']},
fields: ['name','geometry'],
types:['establishment']
});
autocomplete.addListener('place_changed');
}
html
<html>
<h1>Google Places API Test</h1>
<body>
<input id="input" placeholder="*Name API" style="height: 75px; width:1000px">
<script src="{% static 'google_places_names.js' %}"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=xxx&libraries=places&callback=initMap"></script>
</body>
</html>
This bit works. When I type an address, I get the address of the what I am looking for (see screenshot)
Given that I am planning to use a django form to capture the information, I am assuming the html to look like this:
<html>
<h1>Google Places API Test</h1>
<body>
<input id="input" placeholder="*Name API" style="height: 75px; width:1000px">
<form id="GoogleAPI" method="POST" action="{% url 'google_api_test'%}">
{% csrf_token %}
<label for="address" class="hidden-el" hidden>Address</label>
{{form.name}}
<label for="address" class="hidden-el" hidden>Address</label>
{{form.address}}
...
</form>
<script src="{% static 'google_places_names.js' %}"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=xxx&libraries=places&callback=initMap"></script>
</body>
</html>
Looking at the different answers on the topic, there seems to be lot of code to write,so I am expecting anyone to do this here. But I wondering if someone may know a link to a Django tutorial for Google API for businesses (establishment). Found a few online, but they do not cover establishements and the approach appears to be different.
I understand the next step would be to call is to call autocomplete.getPlace() within a function. But all attempts I made proved to unsuccessful.
Would be grateful if anyone had any pointers!
when I'm working with an ember app, I would appreciate to see what component html I'm looking at. I know there is an Ember extension into the browser that can show me component names, but it would be much better to see it in the html. Something like this
<div id="ember282" class="ember-view">
<!-- components/my-component -->
<div id="ember317" class="ember-view">Component content</div>
<!-- components/my-component end -->
</div>
is it possible? and how?
Thank you
I've created a completely custom homepage in Sharepoint 2013 and it works fine (using custom HTML, CSS, JS, and Jquery Lib). I just need to know how to add the Sharepoint Suitebar to the top of the custom page.
I'm not using any type of Sharepoint template or master page template. I built my page like you would any other web page and uploaded my files into a directory within Sharepoint and then uploaded my custom page to the Site Pages directory and set it as home.aspx, which automatically makes it my homepage. Building a completely custom page like this is great, but I loose some built in features and components Sharepoint offers which I would like to use, the Suitebar being one of them.
My example HTML template here does not represent my actual custom homepage. I'm just linking this JSfiddle in hopes that someone will show me how/where to add in the Sharepoint Suitbar.
JSFiddle:
https://jsfiddle.net/x1vcdeLx/
<!DOCTYPE html>
<html>
<head>
<title>Sharepoint Custom Homepage</title>
<!-- Stylesheets -->
<link href="/sites/SiteAssets/css/reset.css">
<link href="/sites/SiteAssets/css/style.css">
</head>
<body>
<!-- BEGIN CREATIVE CONTENT -->
<div class="myContent">
<div class="row-1-of-3"></div>
<div class="row-2-of-3"></div>
<div class="row-3-of-3"></div>
</div>
<!-- END CREATIVE CONTENT -->
<!-- Scripts -->
<script src="/sites/SiteAssets/js/jquery-2.1.4.min.js"></script>
<script src="/sites/SiteAssets/js/jquery-easing-1.3.min.js"></script>
<script src="/sites/SiteAssets/js/script.js"></script>
</body>
</html>
You can go and download the Sharepoint master page then search for the controls which are used for that suite bar. Put those controls in your page and it may display properly.
To get the name of the portion of the suite bar see image below
How would I insert my navigation into my html file as following. (sort of wordpress style)
home.html:
<html>
<body>
(I dont know what to put here for nav)
<div main>
</div>
</body>
<html>
nav.html
<nav>
<img scr="logo.png">
<ul>
<li>home</li>
</ul>
</nav>
And then how do I implement the template on the with plates?
Note:
I'm using flatiron,plates,director
Plates doesn't support a way to inject html into another string.
It's used to bind DATA to your markup.
The easiest solution would be using files which can be concatenated in a sequence to form the page you want.
Example:
header.html
disclaimer.html
page1.html
page2.html
page3.html
footer.html
After choosing which components you need (let's say header.html, page2.html and footer.html) you can use plates to bind your data to the page markup and send everything back to the client.
Plates does support partials, see https://github.com/flatiron/plates#partials.
And here's another method (probably from before Plates had explicit support for partials):
https://stackoverflow.com/a/10076623/263447
I am trying to learn Play 2.0 with scala but I dont think i quite understand how the template system for play 2.0 works. I have used play 1.2 before and i am sort of looking for an equivalent to the #{include 'views/blah.html' /}. I essentially want to create a navbar that is rendered on all the pages.
Essentially in main.scala.html i have
#(title: String)(navbar: Html)(content: Html)
<!DOCTYPE html>
<html>
<head>
<title>#title</title>
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/main.css")">
<link rel="shortcut icon" type="image/png" href="#routes.Assets.at("images/favicon.png")">
<script src="#routes.Assets.at("javascripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
</head>
<header>
This is my header
</header>
<section class="navbar">#navbar</section>
<section class="content">#content</section>
<footer>
This is my footer
</footer>
and in my index.scala.html:
#navbar = {
<h1>Index</h1>
<ul>
<li>
<a href=#routes.Application.tasks>Tasks</a>
</li>
</ul>
}
#main("Home")(navbar){
content
}
in task.scala.html:
#(tasks: List[Task], taskForm: Form[String])
#import helper._
#main("Home") {
<h1>Index</h1>
<ul>
<li>
<a href=#routes.Application.tasks>Tasks</a>
</li>
</ul>
} {
task code
}
Now to include this navbar it seems i have to repeat this in every page this way i would have to hard code this navbar into every page. Is there a way to do this without without writing the whole navbar in every page?
I have also tried creating a navbar.scala.html file that contains
<h1>Index</h1>
<ul>
<li>
<a href=#routes.Application.tasks>Tasks</a>
</li>
</ul>
and saving under views/ then importing that using #import views.navbar but then i get an error stating 'navbar is not a member of views'. I am writing this in Eclipse Java EE IDE indigo if that helps.
Dont import it but just call it:
#navbar()
To include any other views template into another views template,
you simple call it using: #views.html.[location].[location].[location]()
Where [location] is just a break down of it's path.
for example:
#views.html.users.interface()
Be sure to put the "()" ie the brackets at the end of the statement if it does not take any parameters. Without the "()" you will get an error message like this:
"BaseScalaTemplate(play.api.templates...)"
If your template has parameters, be sure to include them when you call it, like this:
#views.html.users.interface( "name" )