Can you create reusable components in html? Let's say I want to encapsulate some css / html and js into a tidy reusable component. How do web developers do this? I'm coming from the Flex, C# side of the planet.
2017 update
This question is 7 years old and a lot has changed since. Web components and are now implemented or can be used with polyfills in every major browser. Which means you can use Polymer by Google or X-Tag supported by Microsoft made exactly for this.
Sample approach using Polymer:
custom tag declaration in custom-tag.html:
<dom-module id="custom-tag">
<template>
<style>
h1 {
color: red;
}
</style>
<div class="text-holder">
<h1>[[name]]</h1>
<p>[[description]]</p>
</div>
</template>
</dom-module>
<script>
Polymer({
is: "custom-tag",
properties: {
name: String,
description: String
}
});
</script>
how to use custom tag in your page:
include tag in head:
<link rel="import" href="path/to/custom-tag.html"/>
and then:
<custom-tag
name="Lorem"
description="Lorem ipsum dolor sit amet.">
</custom-tag>
You'll need a simple http server because of the html import. Encapsulation you talked about is backed by Shadow DOM - javascript and css packed inside of custom tag won't "bleed out" and change anything outside of the element and vice versa (unless you force it). Polymer comes out with quite large asset of elements, you can find it here.
Everything about using elements and creating your own is covered here.
You can use Server-Side Includes to directly import pieces of HTML (e.g. a header), but most frameworks these days tend to approach things at a higher level, e.g. Apache Taglibs or Django templates.
It depends on your environment. HTML is (in a simple environ) often included with a server-side include (the syntax of which will depend on your server).
That way you could have:
<!-- #include header.html -->
<h1>Blog Page</h1>
<p>content...</p>
<!-- #include footer.html -->
Javascript is included externally so can be called from anywhere. If you're in a "simple" environment (no server-side code, CMS, etc) you might call module.js which in turn loads specific CSS styles and injects into the DOM the HTML you require.
If you're using a CMS of any sort, they will often have a module idea or plug-ins that wrap this up for you. What are you working with here?
Generally you can put snippets into a separate file that you can add in with a server side include:
<!--#include FILE="you_snippet.html" -->
If you have the option, you might want to have a look at some template languages like Apache Velocity. In Velocity, not only can you include different files, you can define macros that will generate the html for you.
You can try out the templating engines, like google closure template tools.
What you do here is basically create html layouts in a special file called soy files for which you are going to feed the data passed in as parameters and these data are going to be interpreted dynamically with javascript/java. Check out their tutorials, its pretty good. Closures are widely used in Gmail, Youtube and mostly all of Google's products.
Related
I have a question about linking libraries.
I usually do it this way:
<link href="sidebar/common/style.css" rel="stylesheet">
but now I wanted to start using thymeleaf fragments. Each tutorial I've seen about linking libraries using thymeleaf fragments looks the same. Why people always put "double" linking if it isn't necessery? (my code above works well and i don't need to link this libraries second time using thymeleaf)
For example my code above in every tutorial will look:
<link href="sidebar/common/style.css"
th:href="#{sidebar/common/style.css}" rel="stylesheet" >
Can anyone explain what is the correct and recommended way to link these libraries?
What about javascript and fontawesome linking?
I am sorry for this kind of question but I am just starting with thymeleaf and it gives me no peace. I hope that this will not upset the admin and a good answer will also be useful to others
There is no need to use both of the linking types simultaneously, unless you really need it for example for quick prototyping.
href="sidebar/common/style.css" is being used only when you open your template directly in the browser. It is a standard HTML tag which will be processed by your browser, while th:href will be ignored.
Whereas th:href="#{sidebar/common/style.css} will be processed by the template engine and href will be substituted by Thymeleaf.
Similarly, Thymeleaf will override the content of any HTML tag, then there is a th:text attribute present, for example:
<p th:text="${variableName}">That text will be overriden by variableName value</p>
What exactly is HTML Modules? I understand that it might allow a developer to create HTML as a module like how ES6 Modules are to JavaScript.
But, are these modules basically templates like Mustache, Handlebars and Pug? Or is it like a wrapper around a similar templating system that will allow us to import an HTML file easily into another HTML file?
Will it pave a way to avoid using templating libraries utilizing the Web Components?
[Update]
Here is the link to where I found this - https://github.com/w3c/webcomponents/blob/gh-pages/proposals/html-modules-explainer.md
HTML Modules are the new proposal for importing HTML files into a document.
HTML import supported a similar feature and permitted to import an HTML file (eventually containing itself JS and CSS) but it has been deprecated and JS module import has partially substituted that feature.
The point of HTML imports are to complete that part and make possible to import HTML files again instead of JavaScript files only.
Today you just can't import files that contain HTML (again, you could do that when meta rel=import href=myfile.html> which is not supported anymore).
If you want to do that, you have to write HTML in JavaScript string prior to process it.
The proposal also introduces notions such as import.meta.document that refer to the internal document to be imported.
Note that is it a proposal, even though it could be inserted into the spec, it should then be implemented by browsers, and finally adopted by the community in order to remain and become a stable feature.
Currently the closest you can use is the Lego Web-Component library that allows to include HTML as a module and extends native HTML functionality:
<template>
<p>Hello World!</p>
</template>
Used as:
<script src="./dist/index.js" type="module"></script>
<hello-world />
Example taken from https://github.com/polight/lego#hello-world
Let's see how the spec is going to evolve for HTML Modules in the future…
Is there a way to define Polymer web components directly in the HTML file for the page where they're used instead of importing them through link tags?
This seems like it would be faster vs having to request a page and then send requests for the web component html files as well. So far all the guides I've seen only reference importing via <link rel="import" href="/my_component.html" />.
You can use Polymer Bundler to reduce the number of network requests concatenating web components and dependencies in one file. You can find more info here.
As suggested in the other answer, it seems like a better approach to worry more about having a clear structure of your files/elements while you're developing, and to let a build script worry about stuff like that.
But since a bundler would basically do the same thing, define all the elements in a file, it's obviously possible. So only to answer the initial question, you can see a sample here.
So you just have to use multiple dom-module tags like:
<dom-module id="my-element">
...
</dom-module>
<dom-module id="my-inner-element">
...
</dom-module>
And multiple calls to customElements.define:
customElements.define(MyElement.is, MyElement);
customElements.define(MyInnerElement.is, MyInnerElement);
But I would most certainly recommend against writing your entire application in a single file.
Does HTML support splitting source over multiple files? I'm looking for some equivalent of C++'s #include; or maybe something like C#'s partial; an element that could take source path and inject the file contents at that place.
Apologies if this has been asked before. Google and SO searches didn't return much. I'm not a web guy, but the only solution I found was using an iframe, which many people do not like for various reasons.
It is just that my html source is becoming huge and I want to manage it by splitting into multiple files.
You can't, at least not in flat-HTML. What you can do is using Javascript to load and place the snippets. iframes are also non-ideal because contrary to what happens with directives like #include and partial, those snippets will never be compiled in one single page.
However, I think it's important here to understand how your pages will be served. Is this a static website? Because in this case I would write a simple script in your language of choice to compile the page. Let's say that you have a base like this:
<html>
<head>
<!-- ... -->
</head>
<body>
{{ parts/navigation.html }}
<!-- ... -->
</body>
</html>
You could write a script that runs through this file line by line and loads the content into a variable named, for example, compiled_html. When it finds {{ file }} it opens file, reads its content and append it to compiled_html. When it gets to the end, it writes the content of the variable into a HTML file. How you would implement it depends on the languages you know. I'm sure that it's pretty straightforward to do it in C#.
This way you'll be able to split the source of your HTML pages into multiple files (and reuse some parts if you need them), but you'll still end up with fully functional single files.
It is easily possible, if you are running PHP:
The PHP Language has the "include" command built in.
Therefore you can have your "index.php" (note you have to change the suffix, for the PHP parser to kick-in) and simply use following syntax.
<html>
<head>
[...] (header content you want to set or use)
</head>
<body>
<?php
include "relative/path/to/your/firstfile.html";
include "relative/path/to/your/secondfile.html";
include "relative/path/to/your/evenwithothersuffix/thirdfile.php";
include "relative/path/to/your/fourth/file/in/another/folder.html";
?>
[...] (other source code you whish to use in the HTML body part)
</body>
</html>
Basically making you main index.php file a container-file and the included html files the components, which you like to maintain seperately.
For further reading I recommend the PHP Manual and the W3Schools Include Page.
not possible with static html.
in general, this problem (lazy-fetching of content) is solved with a template processor.
two options:
template processor runs on the server side
any language
static website generators, server side rendering
template processor runs on the client side
javascript
web frameworks
I am developing a project and find that there are elements that are common to all pages, I wonder if there is any way to define these elements generally and call them from your html to avoid having to define each of the pages. thank you very much for your help
test.html
<div>Menu</div>
When you need to have this menu, just call this code in your page:
$('#result').load('ajax/test.html', function() {
alert('Load was performed.');
});
load()
Another option could be AngularJS, or just something like includes with PHP.
I don't know any way to do exactly this with pure HTML, but by mixing in a little server side script, you can. Just to give you an idea what it would look like:
This example uses PHP. If you are on a Microsoft server, you would need to translate this example into .NET or .aspx.
First, save the following to a file called "mytest.php" in the same folder as your other pages. (You can put it in a subfolder if you wish, but for this example I will keep it simple).
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Just one line for this test. A little useless, but you can see the point.
Now, in the <head> tag of your HTML, you can do this (I added the <head> tags just so you can see it... You would not want to have TWO sets of <head> tags.)
<head>
<?php include 'mytest.php'; ?>
</head>
Now, visit the page and display the HTML and you should see that line incorporated into your HTML. Note that any document that contains PHP code (as above) must end with a .php extension.
As #loops suggested, I would highly recommend AngularJS for the rescue.
It's a great MVC framework built with JavaScript and no external dependencies.
It offers the possibility to create custom elements using their Directives
So you could create a new element <mymenu></mymenu> and you can give this new tag some behaviour as well as bind events to it.
AngularJS takes care of all the rest and your new tag will be available across all the pages of your application.
And yes, you are correct thinking that should be done on the client side rather than server side.
I am happy to provide a full working example for you once you get your head around the framework first. Otherwise I think it will be too much information at once ;)