I need to use paper-range-slider element with displayFunction callback to customize the display content in slider.
In paper-range-selector v1.3 version support this feature, but it requires at least polymer v2.x, where as my polymer version is v1.3(paper-range-selector v0.2.7 is supported for this polymer version but displayFunction feature is not supported in it).
So i am trying to create custom-slider-element where it uses the paper-range-selector(v0.2.7) elements and add displayFunction feature and custom-slider-element can be used in my application.
Could any one tell me how to import behaviour of paper-range-slider to custom-slider-element? So that all the properties and methods added to custom-slider-element should directly pass to paper-range-selector.
Related
I have two custom elements having similar functionality and both having an <iron-ajax> element(in local DOM template) to make service calls, I was trying to extract these common part into a behavior. But I also realize that polymer behavior does not carry local DOM template. Is there a way to let the behavior have the <iron-ajax>? dynamically create it using Document.create?
As "behavior" is the Polymer way of doing code sharing, can a DOM element be shared across elements?
You should create an other element for your API calls which have inside the <iron-ajax> and have your api call methods, then you need just change the iron-ajax element in your elements and use your <api-element> for this.
Below are two methods which i can think of
Create iron-ajax element at root level of your application and then refer to that element from each of your element using querySelector or getElementById on document
In your behavior create iron-ajax element from javascript with createElement function of javascript.
In both the cases you can add event listener on response and error.
I am relatively new to programming and have been reading up and watching videos on Polymer 1.0. But I am struggling to wrap my head around some of it, I have a general understanding of the elements and have been browsing the catalog. But I am not making certain connections. Such as how an item on a paper-menu element can be accessed by using on-iron-select calling _itemSelected?
how does on-iron-select link to paper-menu, and where is the documentation for this? I have looked trough the catalog and the bower repo I have downloaded and I can't see it.
I event build some basic elements and console logged this.$, even there I do not see this properties and attributes
In order to dive into what's going on, you need to understand Polymer 1.0's Behaviors.
Once that background info is established, the source for the <paper-menu> element will point you in the right direction:
Polymer({
is: 'paper-menu',
behaviors: [
Polymer.IronMenuBehavior
]
});
That Polymer.IronMenuBehavior in turn makes use of its own set of behaviors, including Polymer.IronSelectableBehavior. All those incremental behaviors create the overall functionality that you're seeing in the <paper-menu> element.
The nice thing about this approach is that any other element that also makes use of, e.g., Polymer.IronSelectableBehavior will share the same general properties and methods, and a collection of elements feels like more of a coherent library.
I am working on a project in which I am constructing a graph with several nodes and edges using Polymer and web components. I am using an underlying library which is developed in-house by my company which is not based on web components. This library contains functions for creating nodes, initializing graph etc.I have created a custom element called graph which would interact with the library. Following is the declaration of this element:
<polymer-element name="cmp-graph" attributes="canvas" constructor="CMPGraph">
<template>
<div id="graph_win_placeholder">
<div id="graph_win" class="canvas">
<div id="graph_canvas" class="graph-area">
</div>
</div>
</div>
</template>
</polymer-element>
In my Javascript code of the element, I call a function in the library to initialize the graph. This function call needs a handle to the canvas div (the div with id="graph_canvas"). So I pass this.$.graph_canvas as a parameter while making the function call. But the library throws an exception since it is expecting a native version of the div and instead gets a wrapped one since this.$.graph_canvas corresponds to the wrapped version of the div.
I was experimenting different solutions and passing shadow=native as a parameter in the query string while loading my application worked.
But now the problem is, my application can run only on Chrome, Canary and Opera since other browsers do not have the native support for Shadow DOM. Is there any other way to solve this problem?
Any help will be appreciated.
Thanks.
If there is no architectural issue in your library, as a last resort you can
upwrap node just before usage.
Remember to check if Polyfill is present on page or not, otherwise below code will break on chrome.
if(typeof ShadowDOMPolyFill !== undefined)
{
var unwrappedNode = ShadowDOMPolyFill.unwrap(node);
}
Is there any framework for UI development in Flex 4.5 ? Better standard for creating UI view layers using Action script. Also how to create states and state transitions in Action script?
Is there any framework for UI development in Flex 4.5 ?
Flex is a framework for UI Development. You can read up on the Flex Component Lifecycle for more information on how it works.
Better standard for creating UI view layers using Action script.
I don't understand what you're asking for here. You want a better standard than what?
Also how to create states and state transitions in Action script?
You can create states and state transitions in ActionScript similar to how you do it in MXML. Every component has a states array; and each entry in the state array will be an instance of the State class which will have a bunch of 'commands' to add or remove children or change properties. The full list is in the state class API documentation under the related API elements header.
Setting up states in ActionScript is tedious, though.
How can I test if my browser supports the new semantic HTML 5 elements like:
<nav>
<footer>
and so on?
Dive Into HTML5 > Detecting HTML5 Features:
There are four basic techniques for detecting whether a browser supports a particular feature. From simplest to most complex:
Check if a certain property exists on a global object (such as window or navigator).
Example: testing for geolocation support
Create an element, then check if a certain property exists on that element.
Example: testing for canvas support
Create an element, check if a certain method exists on that element, then call the method and check the value it returns.
Example: testing which video formats are supported
Create an element, set a property to a certain value, then check if the property retained its value.
Example: testing which <input> types are supported
Also, there is
Modernizr, an open source, MIT-licensed JavaScript library that detects support for many HTML5 & CSS3 features.
Plus:
Appendix A: The All-In-One Almost-Alphabetical No-Bullshit Guide to Detecting Everything.
For a quick, non-programming check: The HTML5 Test