This is maybe a silly question as it seems quite obvious that it would be hard to implement but nevertheless i'd like to ask...
Taken this markup:
<input is="my-input" name="foo">
and this assumed component:
<polymer-element name="my-input">
<template>
<div>
<span class="myinput" name="{{name}}">
</div>
</template>
....
Is it possible to turn in rendered DOM into:
<div>
<span class="myinput" name="foo">
</div>
by effectively replacing the initial native HTML input?
The use case is to provide a fallback. If the browser is not capable of web components it will fall back to the native control. Furthermore authors can write the syntax they know: HTML - and can enhance the native control with a single 'is' attribute.
Update: No.
Shadow DOM encapsulation (as opposed to altering the user's DOM) is an essential concept in Polymer. There used to be a lightdom attribute that would do something similar to what you're asking for, but it ended up being removed (discussion).
You could very easily use native custom elements alone to implement something like this. Or maybe Mozilla's x-tag or IBM's delite have this use case covered.
Original Answer
Use the extends attribute on your polymer-element tag:
<polymer-element name="my-input" extends="input" attributes="name">
Here's a working example.
Related
When using element directives I have seen Angular element directives used in two ways:
1. As block level components
The element is styled as display:block, is the component and its children are the component's children, so the element itself is the component.
Use of directive:
<example class="Example"></example>
The directive's html:
<header class="Example-header"></header>
<img class="Example-image">
<footer class="Example-footer"></footer>
2. As an inline wrapper of the component
The element is left as display:inline and effectively acts as an invisible wrapper for the component itself:
Use of directive:
<example></example>
The directive's html:
<div class="Example">
<header class="Example-header"></header>
<img class="Example-image">
<footer class="Example-footer"></footer>
</div>
Obviously each have advantages and disadvantages for example extra markup, loss of layout context due to inline element etc, but is one the correct way? or is this another of Angular's vagaries?
I'm surprised no one responded, but the idea behind creating custom directives is the ability to create reusable pieces of code that fulfill a specific bit of functionality on your site.
This functionality, however, doesn't care about the styles that you are going to use. You can of course conditionally change classes and styles from within Angular, but the core component when dealing with the framework is the data.
With that being said, there is no "correct way" as you bolded in your question. Develop the directive to fit your needs and style of your site.
First this is probably opinion based but i'd really like to share my point of view about this.
If you really follow angular way of doing directives none of theses are a correct way.
Directives are intended to add a behavior to an HTML element.
The less the directive add HTML the best it is as it allow you to have a better control on this element.
Lets take an exemple.
We have a data grid (let say ui-grid, it doesn't really matter)
<ui-grid ...>
...
</ui-grid>
I had a the idea to add some button to add or remove element in the grid.
I first came up with this
<ui-grid ...>
...
</ui-grid>
<button ng-click="addItem()">Add</button>
<button ng-click="removeItem()">Remove</button>
I'm really happy with this and that's ok, but finally i need to use theses buttons in some other views. I'll have to duplicate the HTML, duplicate the JS and adapt it to the collection.
The common mistake
That's obviously not a good idea.
Instead i will do a directive. Lets say "button-list" : it produce the same html and behavior.
<ui-grid ...>
...
</ui-grid>
<button-list></button-list>
That's pretty cool.
Now i have some need. On one view i need the add button to be blue, on an other one i don't need to have a remove button, and on a last one i want the button text to be "X" and "+" (That's was some request by a client in a true story).
I could make a big object with a list of option and etc... but this is really painful and you need to touch the directive each time you need to add a custom different little behavior.
The good way to go
Now lets just think again about what i wanted to do.
I want the button to interact with the grid... and that's pretty much all. This is how we should go building a custom directive.
We could then produce this directive this way :
<div grid-button-container collection="mycollection">
<ui-grid ...>
...
</ui-grid>
<button grid-add-item>Add</button>
<button grid-remove-item>Remove</button>
</div>
So what do we have here ? We have three different directives.
grid-button-container : Its responsibility is to hold the list for the sub-directives.
grid-add-item : It add a function on click that add an element to the collection of grid-button-container.
grid-remove-item : It add a function on click that remove an element to the collection of grid-button-container.
Both grid-add-item and grid-remove-item will be requiring the grid-button-container to be used.
I cannot describe all the implementation of this (it would take too long) but i think this is how directives should be used. Such as almost no angular build-in directives (ng-*) add HTML and just add a behavior i think all the directives should be build in this way.
Pro :
You have a full control about your HTML
Directives are tiny and trivial
This is really re-usable
Cons :
Can be harder and longer to implement.
To make a final point, the two way you're asking about are just different. No one is better than the other it will just depend on your own HTML organisation and it will depend on the directive use.
Hope it helped.
I'm recently starting to explore AngularJS, and of course, i know it is ran at the client side, and since SPA (Single Page Applications) are becoming more and more common, i have a question regarding how to safely hide HTML elements.
Let me give a simple example:
Employee
<div ng-show="canSeeSalary">
{{salary}}
</div>
Now, of course, at runtime the div tag related to the salary won't be displayed, however by seeing the HTML source code, or using a developer tool like the one we have in Chrome, it would be possible to see the tag and probably its value.
I know tags like these should be filtered at the the server-side, of course, but since it has come to the client side, the div will be there.
My question is exactly, if there is any way i could hide these divs from the HTML source code, without needing to mix AngularJS with JSTL, for example.
Thanks in advance.
Try ng-if directive:
<div ng-if="canSeeSalary">
{{salary}}
</div>
Corresponding div element will be removed from the DOM. From the official documentation:
The ngIf directive removes or recreates a portion of the DOM tree
based on an {expression}. If the expression assigned to ngIf evaluates
to a false value then the element is removed from the DOM, otherwise a
clone of the element is reinserted into the DOM.
Use
Employee
<div ng-if="canSeeSalary">
{{salary}}
</div>
ng-if completely removes and recreates the element in the DOM rather than changing its visibility via the display css property
I would recommend using ngCloak rather than ngIf.
The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.
example:
<div ng-cloak> {{::test}} </div>
ngCloak # Official Angular Docs
What is the significance of cmdValue in the input tag in the following:
<input type="button" value="Bold" cmdValue="bold">
This is from <div id="actions"> on a website.
I looked up the input tag on several HTML reference sites and searched for cmdValue in conjunction with the input tag, but could find no data.
That is not a formal HTML attribute for any known tag.
That is certainly a customized attribute added by the developers of that website.
I prefer to forward you to read the answers of this question.
The significance is whatever the CSS or JavaScript code for the page assigns to it. You would need to analyze the page in detail to find this out.
As such, the nonstandard has no effect beyond getting inserted into the DOM as an attribute.
I'm currently making a facebook application and while investigating the (X)HTML source code for a message thread page to see if it was possible to link to specific messages within threads (apparently it's not), I encountered an HTML attribute that I cannot seem to find any information about. Some span elements on the page had a 'bindpoint' attribute that was set to various values (presumably element IDs). Here is an excerpt from the page source (I replaced some private info with Xs)
<div class="GBThreadMessageRow_Info">
<span class="GBThreadMessageRow_AuthorLink_Wrapper" bindpoint="authorLinkWrapper">
XXXXXXXX
</span>
<span class="GBThreadMessageRow_Date">
April 8, 2010 at 10:13pm
</span>
<span bindpoint="branchLinkWrapper" class="GBThreadMessageRow_BranchLink">Reply</span>
<span bindpoint="reportLinkWrapper" class="GBThreadMessageRow_ReportLink"> • Report</span>
</div>
I have never seen this attribute before and any information about it would be useful/helpful/interesting. Thanks!
As was said in the comments, it has to be something they're doing in the javascript code.
Facebook uses an interesting technique to import their javascript files dynamically (basically they seem to write out script tags in the javascript, when necessary), and it's not quite as simple as just pressing ctrl-F through the first file you find.
So, in conclusion, the bindpoint attribute is something internal to the Facebook eco-system, and not standard HTML. From the name, I assume it has something to do with which events (clicks, mouseovers, etc.) should be binded to the element in question, which is signified by a variable name give in the bindpoint attribute. Or maybe it has to do with which element the element in question should be 'binded' to, like the for attribute for a label. Anyway, this is pure speculation.
I want to look at using JSF but I'm put off by what appears to be the liberal use of html tables for layout by many components.
How do you go about using JSF to develop css-based layouts?
I seem to be labouring under a misaprehension here, but every JSF tutorial I've seen ends up producing table-based HTML layouts. I've also looked at RichFaces and IceFaces demos and there's an awful lot of tables-for-layout there as well.
Does anyone know of a JSF tutorial that develops a CSS based layout? If not, does anybody fancy making one? ;)
the liberal use of html tables for layout by many components
Many components? There are as far as I know only two which do that "unnecessarily": the <h:selectOneRadio> and <h:selectManyCheckbox>. If you want a table-less group of radiobuttons and checkboxes wherein you have the full control over the generated markup, just use the Tomahawk variant instead, which has an extra layout attribute value of spread. Here's an example of the <t:selectOneRadio> approach:
<t:selectOneRadio id="foo" value="#{bean.foo}" layout="spread">
<f:selectItems value="#{bean.foos}" />
</t:selectOneRadio>
...
<t:radio for="foo" index="0" />
...
<t:radio for="foo" index="1" />
...
<t:radio for="foo" index="2" />
...
Since JSF 2.2 it's even possible to do it "out the box" with new passthrough elements/attributes feature. Since JSF 2.3 it has even become part of standard component set. See also a.o. <h:selectOneRadio> renders table element, how to avoid this?
For the remainder, you just have the control of the general HTML output fully in your own hands. Just do not use tables for layout at all. I.e. do not use HTML <table> or JSF <h:panelGrid> for layout. Just use HTML <div> elements to display content blocks. Or if you're a JSF-purist, you can use <h:panelGroup layout="block"> to let JSF generate a HTML <div> element.
As to applying CSS, it isn't that hard, every JSF HTML component has a styleClass attribute wherein you can specify CSS classes (which would end up in a HTML class attribute) and style attribute wherein you can specify inline CSS (which would end up in a HTML style attribute).
You can even define global CSS styles and use the ID selectors. Only thing which you need to take care in JSF+CSS is that the JSF-generated HTML element IDs are prepended with the IDs of all parent NamingContainer components (e.g. <h:form>, <h:dataTable>, etc) with a colon : as separator. As the colon is an illegal character in CSS identifiers, you need to escape it using \. So styling the input element of for example
<h:form id="form">
<h:inputText id="input" ... />
which generates <input type="text" id="form:input" ... /> should be done as
#form\:input {
background: gray;
}
It's however very rare to select form input elements or table elements by ID. More commonly the classname is to be used (which is more semantic and better reuseable) and this doesn't need to be escaped. The ID are usually used by main layout components only anyway (header, menu, content, footer, title, etc) and they usually don't end up in a JSF NamingContainer.
See also:
How to use JSF generated HTML element ID with colon ":" in CSS selectors?
By default, JSF generates unusable ids, which are incompatible with css part of web standards
What is the need of JSF, when UI can be achieved from CSS, HTML, JavaScript, jQuery?
JavaServer Faces 2.2 and HTML5 support, why is XHTML still being used
I seem to be labouring under a misaprehension here, but every JSF tutorial I've seen ends up producing table-based HTML layouts. I've also looked at RichFaces and IceFaces demos and there's an awful lot of tables-for-layout there as well.
Start here: Java EE web development, where do I start and what skills do I need?
It is definitely possible to produce a website built on JSF that does not use tables for layout. I'm not sure why you think JSF relies upon tables? JSF provides the framework for you to develop whatever type of page you want.
Here is another link that may prove useful:
http://www.ibm.com/developerworks/java/library/j-jsf1/index.html