Can angular-ui-grid be used with angular material design? - material-design

The title pretty much says it all: Can angular ui-grid be used with angular material design in a way that follows the material design principles?

It can, but only at a look and feel level. Basically most of the visual elements in ui-grid are over-rideable with templates (cellTemplate, rowTemplate etc). You can also override a lot of the css. So if you're prepared to work through it there's no reason why most of it cannot be tailored.

Be aware that the customize style option on the ui-grid site does not give you the ability to change most of the classes that you will eventually need to in order to make it conform to the material design spec. Additionally it lacks responsive features or the ability to create the kinds of animations/transitions that are a signature of material design.
I really like both projects, its just hard to try and build an app on two frameworks that are currently under active development. I am using ui-grid in my Angular-Material app, but I don't think I would if I had to do it over again

Related

Pagination directive in angular-material

Is there any pagination directive in angular-material to use with md-list?
These do work, but are not material design based.
https://github.com/brantwills/Angular-Paging
https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination
I'm not sure that you can mix these 2 projects but I would look to use bootstrap for angular, with a customization for materiel design;
https://angular-ui.github.io/bootstrap/#/pagination
If it's not shaping enough for material design, here for the customization:
https://fezvrasta.github.io/bootstrap-material-design/
Recently I've made a package md-collection-pagination that is great for this use case.

For loops and layout support in express.js template engine

I come from a PHP background and I've used frameworks such as CakePHP and Laravel and it is quite easy to work with layouts and views in all of them.
And the possibility of using PHP inside those template engines provide a way to do things such as:
<?php for($i=0; $i<1000; $i++){ ?>
<td>demo</td>
<? } ?>
Now, starting with Node and express.js I found out template engines seems quite basic here. I've tried hjs, hogan, swig, mustache, handlebars... none of them offers both :
Layout support (templates and views)
A way to do loops like the one I named before.
Am I missing something? Am I asking for too much?
Which one would you recommend me?
A lot of the template engines for Javascript take the philosophical view that it's better to enforce a fairly strict separation between logic and presentation, meaning that the complexity of code/logic allowed in the template is deliberately limited. For a quick overview of this topic, see http://blog.startifact.com/posts/older/the-new-hot-thing-in-web-development-client-side-templating-languages.html (it's about client-side templating, but since it's Javascript, a lot of those same template languages are the ones popular in node.js / Express). This idea of logicless templates exists in the PHP world as well, it's just not as common.
For a more academic treatment of this subject, see this paper: http://www.cs.usfca.edu/~parrt/papers/mvc.templates.pdf. (The author is also the author of a popular template engine for Java called StringTemplate.) The author makes a lot of good points, and in general I agree with the idea of logicless templates, but there are times when it can be inconvenient and I find myself more on the fence about it...see this link for some further considerations. Obviously there are also those who want to be able to anything from a template (as you can in PHP) and believe it's fine to rely on the self-restraint of the programmer not to put too much code in the view, which is where template engines like EJS come in.
Having said all that, it's important to note that what you want to achieve is possible in Handlebars (which is one of the "logicless" languages) and probably many of the others you tried as well. To do it in Handlebars, you'd need to create a custom helper. This might be what you're looking for:
https://www.npmjs.org/package/handlebars-helper-repeat
Example usage:
{{#repeat 10}}
{{> button }}
{{/repeat}}
You could also extend it to be able to support arguments to be able to control the starting number or increment, although that would probably be getting into logic that might be better done in the JS code (according to the Handlebars philosophy) while preparing the data for the template.
With regard to layouts, the closest thing in Handlebars (which is the template engine I'm most familiar with) is partials. This link provides a good introduction to those: http://blog.teamtreehouse.com/handlebars-js-part-2-partials-and-helpers.
Personally I'm a big fan of the template language in an awesome framework (built on Express) called Derby. Its template language is similar to Handlebars, but comes with a couple of handy extensions - just enough to make it a bit more convenient to use without allowing too much logic to creep into the template. Unfortunately I don't think there's a standalone version of it (i.e. you have to use the full Derby framework), but you could create custom helpers in Handlebars to achieve a similar effect.

Is there a clever way how to share custom controls among Xpages applications?

For our Xpages application stack we have to create cca. 100 controls that will cover our new UI parts/helpers and some additional services. These controls are meant to be very general and have to be used by many Xpages applications. Now question is how to share these controls among applications(databases). Controls need some managed beans to work, also some CSS, JS and images. To copy the whole stuff into each application and maintain it somehow is not the way (even design inheritance doesnt help here). What's more ... mixing these 100 controls among application specific controls is real hell as controls doesn't support any namespaces or some packages grouping (like java in Package Explorer), so at the end we have very long list of controls in DDE which is nightmare to navigate and work with.
We tried to use Extension Library approach and followed this tutorial
http://www-10.lotus.com/ldd/ddwiki.nsf/dx/Master_Table_of_Contents_for_XPages_Extensibility_APIs_Developer_Guide
... but honestly I tried 3 times on my computer from scratch and even example project from tutorial didn't work properly and still caused some errors in update site project. My colleague also tried this on his computer with no luck. And entire process as described in the article above is set of many java classes, XML and configuration files even for small control (eclipse plugin project -> feature project -> updated site project and then you have to install this update site test it and when bug occurs you have to run another cycle ...). Comparing to e.g. this http://tapestry.apache.org/component-classes.html its extremely heavy weight approach in Xpages.
So my question is, is there any other approach that can help us in this area to share controls among applications? Or is there any update expected in this area for upcoming Notes release e.g. R9.1 ?
the most efficient way to share controls is an extension library. It does come with a learning curve. You could use Nathan's XSP Starter Kit to ease your pain. Alternatively you can use the import/export plug-in from OpenNTF to move controls (and their supporting files) around.
In any case: XPages custom controls do support name spaces and grouping -> just have a look at the property panel of a control. You can define:
the namespace (defaults to xc, but you are free to design your own)
the group it should appear in
icons
how it looks at design time (to hide the inner workings)
So step 1 is to group and clean and then think about the distribution. Extlib definitely would be best.
There is good ol' method for sharing design elements in NSF: templates. You can make your database a template, and then inherit just specific design elements by copy/pasting them at designer level. In design element's properties view, Design tab, look for "Inherit from the design template" property. It contains template name from which you copied the element. Watch out for the property "Prohibit design refresh or replace to modify", it should be off.
This has some consequences when deploying the application to production, though, so please, read the documentation/help about template inheritance. Especially combination with XPages/custom controls requires the template to be built and signed.
We use it to share custom controls like application layout and picklists with no problems.

Sass+Compass+Susy in Divshot

I'm looking for adequate tool to help with responsive design and, so far, Divshot looks as the best one.
Considering that I plan to use Sass+Compass with Susy grid, I wonder if it's possible to use it in Divshot?
As far as I can see, only {Bootstrap, Foundation, Ratchet} are supported, but I'm asking seeing the following quote:
Here at Divshot we’re huge fans of Sass, a powerful CSS3 preprocessor with attitude. To quickly build our new landing page I took advantage of some nifty mixins I collected from around the web in addition to the myriad of mixins available in Compass.
in this post?
At the moment Divshot supports Compass but not Susy. You can include Compass in your custom stylesheet like you normally would:
#import "compass"
Your CSS is sent over to Alloy, our web API for CSS preprocessors. You can take a look at the gems we're using here: https://github.com/divshot/alloy/blob/master/Gemfile. We'll consider adding Susy in the near future!

drupal breadcrumb experience

I was wondering what people are using for generating breadcrumbs in drupal. I've seen various modules and was wondering which ones people have had success with.
Thanks for any thoughts.
Bad news from me: personally I always custom-write breadcrumb code because every professional job I do has different requirements and no generic breadcrumb module can do it all.
I used to create a hook_preprocess_page function then issued my own hook to see if any module would like to rebuild the breadcrumbs - I do it this way so that, for instance, if I have a specialised node I can put the breadcrumb-building code for that node type into its support module (and not try to cram it all into one ever-expanding function - it's the Drupal Way).
Nowadays I use ctools plugins instead of a module hook in the hook_preprocess_page since you can do additional clever stuff.
(If using Panels you'd have to create a new breadcrumb panel pane and work from there. Word to the wise: Panels destroys $_GET['q'] which can make it harder to build breadcrumbs in some situations.)

Resources