Polymer 1.0 - card layout - polymer-1.0

Since Polymer 0.5 included card layout, I missed it very much in Polymer 1.0. I have tried a lot of things and googled a whole day to find a good solution. For those, having same trouble, I will answer my own question.

On the Polymer element catalog there is an element called paper-material. This looks to be want you want to use.

Related

Polymer Dart as a SPA framework

I know that polymer is primarily used to create reusable elements, and angular is supposed to be used to create web apps (at least from a "high level" perspective), but I wonder, since you can wrap your own "Screens" as polymer elements, which actually could serve as controllers too, and switch the active page with the iron-pages element (see SPA demo), and you can also use more-routing well... instead of "routing by code", it supports one/two way binding and events, I've actually done some small SPA app like that myself, and so far so good actually! moving on-
Assuming I don't care about having some built-in REST wrapper such as the one provided by Angular (Easy to roll up my own if I use Dart), then in Dart's case:
Could polymer actually be used to create full apps?
Would it have any implications in performance if my whole app is in polymer? by that I mean, every screen is really an element, and so on.
Development speed, maintainability, and experience? (considering the fact that I use Dart which helps a lot in these areas)
Overall, is it a good idea? I'd like to know your opinions.
Any companies/indie devs have done this before? not necessarily with Dart, but with TypeScript/JS as well, although I'm 100% set on Dart.
I think Polymer is quite a good fit for that. I wouldn't necessarily go for "a Polymer element per page" but that might depend on the kind of application you are going to build. Especially in Dart Polymer it's a good start to make the root Element a Polymer element. You can for example keep the navigation and switch only a part of the view instead of the entire page (but that might be what you had in mind anyway)
You can also use dependency injection, which is a strong point of Angular.
The dirty checking might be better in Angular 2 but Angular isn't released yet and Polymer also has plans to improve here.

Most efficient Grid module/method with AngularJS?

I have a web app that is built aimed primarily at iPads on full screen mode. I've got to implement a select-able grid/matrix that has two levels of selections - one main item selection and one sub item selection. It looks something like this from our design:
First picture has main item selection, and
The application is built on AngularJS, and Bootstrap3. Right now we have implemented a working version of the grid using a custom jQuery plugin we authored and now are wondering why we ever did it. The code is buggy and constantly throws up new bugs. We are looking for an alternative form of implementation, hopefully a pure AngularJS one.
The criteria we're looking for are:
1. Responsiveness across devices - iPad/desktop
2. Stable DOM structure compatible with filtering (search bar at the top needs to work - not shown in figures).
3. Quick rendering from dynamically changing AJAX data.
4. Touch friendly
What are the best methods/ng-modules to implement something like this? We are on the verge of deciding to write a custom module, but don't wanna reinvent the wheel!
We did see ng-grid, but it still seems to be in Beta. We need a stable module.
SmartTable seems to be the most decent option as of now.
TIA!
Have you Tried Angular Material Gridlist I think it must something more clean. I frequently use it rather than bootstrap. Hope it helps
Take a look at Angular Grid. I know it works on iPad, the scrolling uses touch gestures. It performs very well in comparison to other AngularJS grids. I've used it with large grids on iPads and Androids.
Go for Ionic Framework in conjuction with angular-material.
Both have you covered in terms of UI elements and grid needs, and are very reliable. Both are very active frameworks.
They both reached v1 very recently.
You should seriously consider the time you're going to gain, even if at first you have to drop Bootstrap. I was anxious as well to drop ui-bootstrap, but really, you won't regret it (and you'll be wondering why you didn't do it before).
Docs are impeccable, Codepens and Plunkrs are all over the place, Blog posts abound...
Learning curve is... well... judge for yourself.

polymer and angular use together

I start learning recently polymer.
I want to hear yours opinion if its make sense to use both frameworks polymer and angular together or not and if polymer is really ready for production and what is your choice?
Polymer and Angular Together
Yes, of-course they both can be used independently as well as together. Actually they both are two different things and to serve two different purposes, Though they have some common features to offer.
Please refer to this answer for a detailed explanation. It covers more things and tells about how Polymer & Angular both can be used as part of the same project.
Polymer for Production
With the release of Polymer 1.0, they claim it to be the production ready and as per them they have focussed more on the speed and efficiency this time. As a major change of this release they have replaced the shadow dom with shady dom.
Finger Crossed, I am also intending to use it in my project. Though I have heard very little of it being used in Production by others.
I think Yes, is not a bad choice ! For example i try to use Angular for the little bit complex Service like the Auth Token Authentication, and Polymer for the others ! I want to use Material Design and the right choice is Polymer throught the Paper Element, i tried ngMaterial but is not so good like the Material in Polymer .... so my Answer for the Moment is Yes !

Custom arbor.js shapes

I'm creating html canvas illustrations using a an adobe illustrator plugin. Here is link to an example The example is an fried egg. As a fun project I'm making an illustrated restaurant menu linking things like eggs, bacon, bread etc.
I'm hopping to use these illustrations within arbor.js Any ideas how to do this?
I've found the best way to work out what's going on with arbor.js is to dive in and read the code, it's really well laid out. Look at the JavaScript for the sample project, in particular particleSystem.eachNode. You can see how and where the nodes and edges are rendered. For a more thorough version, check out the 'Altas' example - that shows how to do text rendering on the nodes.
Good luck!

Good facelets resources?

I've been working with JSF for some time, and been using the Apache-Trinidad tags. I like developing using this a lot but I keep hearing great things about facelets. Is anyone out there using it, and what exactly does it get you?
I've looked at the facelets site (https://facelets.dev.java.net/), but it doesn't do a very good job explaining the advantages or any tutorials about facelets. I looked on google, but everything seems to be from 2005 or 2006, surely there's been a lot of changes since then.
Anyone want to chime in with their opinion of facelets or point me to some good resources?
Facelets haven't really changed. It's a very simple templating engine that runs as a JSF view handler and replaces jsp.
The old resources are still valid.
Uses xml for templates.
You can use EL anywhere.
Very few tags.
Very simple
...
In my humble opinion, it is a much better approach to create the interface than JSPs.
It's really a great thing about facelets. They did it right the first time, so I guess theree has been no need to upgrade it. Also seems like something like facelets is making it's way into the JSF 2.0 spec. (http://jcp.org/en/jsr/detail?id=314)
At one of the places I work, I've just converted a project from JSF 1.1 to JSF 1.2 with facelets, and I really like it. What I got from it was:
Templating (no need for tiles)
Better debugging (debug views instead of just stack traces)
ui:repeat and c:if etc
Can use html intermixed with tags, allowing me to use a plain html table with colspans without no extra taglib if thats what I want.
syntax almost same as jsp, so it's easy to convert pages.
rolling your own components is now really simple.
As for resources, I guess the old ones are still valid.
I've just started working with facelets as well, and so far the best resource I've found is the book "The Definitive Guide to Apache MyFaces and Facelets" from Apress. While it's likely you won't need the other chapters, since you've worked with Trinadad tags already, I've found the examples they use to explain facelets give a good concrete foundation. I'm constantly refering to the text to pull out bits of code.
PS Here's the link from Google Books, it'll at least give you a taste of what's inside.

Resources