How to add Vaadin Polymer elements in Vaadin 7 application? - polymer

I am trying to build a Vaadin 7 elements and it would be beneficial if I can somehow directly use the polymer elements like these ones -->
http://vaadin.github.io/gwt-polymer-elements/demo/#paper/ButtonSample
However, there is no clear cut explanation or tutorial on how to add polymer elements in Vaadin application directly.

If you want to use web components on server-side there is an experimental addon from vaadin. Here you find a demo application

On the Vaadin forum page suggestion is to take a look at:
https://vaadin.com/labs-elements, https://vaadin.com/directory#!addon/elements-add-on and
https://github.com/vaadin/serverside-elements
but this is still experimental.
While we are waiting for official support you can include Vaadin Elements as stated in Demystifying Web Components or to include Vaadin Elements as stated in Integrating JavaScript Components and Extensions and Using web components in plain java.

Related

Is platform.js considered "Polymer"?

I've been studying web components, and have gotten Google charts working.
It requires
bower_components/platform/platform.js
bower_components/google-chart/google-chart.html
But I don't see the word Polymer being mentioned.
Is platform.js considered Polymer, or do I need to include some sort of Polymer for cross browser compatibility?
Platform.js has been renamed to Webcomponents.js
Google is trying to separate webcomponent polyfills with Google's polymer elements. (core-*, paper elements, etc.)
Source:
https://blog.polymer-project.org/announcements/2014/10/16/platform-becomes-webcomponents/
Ajay's comment is correct: platform.js is not strictly a part of Polymer.
platform.js contains the polyfills to provide Web Components technology on non-supporting browsers.
But I don't see the word Polymer being mentioned.
It's part of the appeal of Web Components that you do not need to know the underlying technology to use a custom element. Polymer elements import polymer.html internally to provide the necessary code, but you never need to be aware of this if you don't care.

Will polymer build more ready-use components?

I am going to port our windows-based Customer Management software to Web-based. I find polymer may be a choice.
However, for our usage, we can't find polymer component has table-view, drop-down menu(aka. the "select" element in html), date-picker, tree list.
Will polymer add these components later? Or these components will not be the target?
Thanks,
Barry
Polymer is just primarily a polyfill library that helps enabling HTML 5 Web Components in browsers that don't support them by themselves.
Web Components can be written by any developer, so you might need to develop some controls on your own especially the table view one. I'd guess you'll find most of the others mentioned in your question implemented one way or another. You should check out some of the WebComponents collection pages:
http://customelements.io/
http://component.kitchen/
http://bower.io/search/?q=web-components
For your table view control: I had a similar problem couple of years ago and had to implement my own solution. Maybe you can find a regular HTML library that supports table views and make it a (Polymer) Web Component by yourself.

how to create Metro style, windows 8 style Webpage in JSF framework

I want to create Metro style web pages. I am using JSF v2.2. I am able to include CSS for this purpose, but it only randers buttons. Other awesome graphics that can be achieved by metro is not there.
something similar like here http://metro-webdesign.info/
PrimeFaces provides a Metro theme which is not free. But with such a theme, you will just be able to fake the style of Metro. You won't access to any JavaScript functionality available in the template linked in your question.
Otherwise, JSF is just a producer of HTML code. You can integrate yourself the template you linked in JSF.

Lightweight-as-possible UI stack for mobile HTML5 dev with Angular

I'm about to build a fairly simple 'energy use issue tracker' HTML5 mobile app (Android/iOS Webkit only) using Angular. I want to avoid frameworks like HTML5Boilerplate, and use as few js libs as possible, and avoid anything JQuery; neither are we using node.js. The only UI features I really need are screen transitions (preferably CSS3-based with hardware acceleration), and to avoid the 300ms tap delay. I've been considering angular-mobile-nav, but am interested in what others have chosen.
For now, this will be a 'save to home screen' single-page webapp so users can submit an issue (e.g. lights are on, no-one in the building'), take and attach a pic, and view/filter a list of issues already submitted, each of which can be up-voted and Tweeted. There's an existing REST backend the app will PUT/POST to, and we'll be using Server-sent events to update a list on the app.
None of that is too hard (I have the camera working and the backend is up and running), but finding a minimal Angular-friendly solution for a lightweight UI is holding me up.
I think AngularUI will let you reach your target specially UI Boostrap which contains a set of native AngularJS directives based on Twitter Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's JavaScript is required. The only required dependencies are AngularJS (minimal version 1.0.4 or 1.1.2) and Bootstrap CSS and regarding the size of the library minified version is around 40 KB.
I hope my answer help you and Please feel free to ask me any question? and I will be happy to answer.
consider ionic framework, Ionic is a beautiful front-end framework for developing hybrid mobile , it is still in beta version , but there is an active community working on it
http://ionicframework.com/

Adding tabs into Mozilla's Jetpack Panel module

Firefox extensions made in XUL had a nice Tab element. But with Jetpack, I see nothing that would allow me to make tabbed content in a panel module, for example.
I understand that Jetpack uses jQuery. Would the proper way to create tabs be to include jQuery UI or is there some other approach?
Yes, the Addon SDK encourages using standard web technologies instead of XUL, so the appropriate way is to use any JS framework; jQuery UI should be fine too.