Errai: The browser as a platform

Friday, July 26, 2013

LESS support in Errai

As you may know, GWT supports some cool CSS tools. They have extended CSS and made it all more dynamic, that way your css can be more compact and GWT will create a permutation of your css just as it does for your Javascript. Now in Errai, we have our own approach to building user interfaces based on plain HTML5 templates. These templates can come directly from your designer our brand team. So supporting some of that dynamic behaviour is not feasible as we would loose the ability to directly preview the  templates in the browser without first running them through a template engine.

But, GWT is not the only dynamic CSS language. That is why we added support for LESS. It's already used by web designers, so they are familiar with it. You can convert it using javascript so that it you can still look at your templates in a browser. On top of that Errai will find all the LESS stylesheets in your project and convert them to CSS automatically and with this generated CSS it will perform some optimizations:

Optimizations

Basic minification

.div {
  /* This is the default background color */
  background: blue;
}
.empty {}

Would generate:
.div{background:blue;}

Selector merging

.div {prop: value;}
.div {foo: bar;}

Is converted into:
.div {prop:value;foo:bar;} 

Property merging

.a {background: blue;}
.b {background: blue;}

would give
.a,.b{background:blue;}

Finally the last thing it does is obfuscating the class selectors. For that to work it will go through your templates and find where these selectors are used and change them. To be able to use your CSS classes in your Java code, there is a utility that you can inject to access the selectors.

public class MyComponent extends Component {
   @Inject
   private LessStyle lessStyle;

...

   @PostCreate
   private void init() {
       textBox.setStyleName(lessStyle.get("input"));
   }
}

Errai will also inject this generated stylesheet into the head of your page. So, to use this, all you have to do is put a LESS file in your classpath and in true Errai fashion it will do the rest for you. This is available in the latest 3.0-SNAPSHOTs and 2.4-SNAPSHOTs. Give it a spin and let us know what you think.

What we could do next is automatically add variables to your LESS stylesheet so that you can have logic based on browser for instance.

6 comments:

  1. I'm very happy being Herpes free now. It was a sad incident that was announced to me after the check up in the hospital and I was diagnosed of HSV 2. I thank God now for using Dr.odey Abang to cure my virus. I'm not ashamed to say this because no virus of such can be detected in me. I'm Charlotte from Columbia. I thought about it many Times when I heard about this Herbal cures for Herpes. I was really happy when I came across blogs of comments of Doctors who run cures sicknesses and was comfortable to try Dr. Abang from patients testimony I came across here on my online page. I knew now they are real Africa herbalists who run cures for Herpes. There's every opportunity to be cure with natural herbs, because all medical prescriptions are derived from herbs and roots. Its really hard time living with Herpes on drugs which can't get you cure. I tried this and I can boost of myself now as a woman. I need to be loved not to lost, get your instant cure to all sicknesses from Dr, Odey Abang.
    He cures HSV,HPV,Cancer,low spam count and much more from the evidence I saw 💯 % sure no site effects with active immune booster

    Email him for you cure
    Odeyabangherbalhome@gmail.com
    WhatsApp/calls
    +2349015049094

    ReplyDelete
  2. Nothing is not possible in this word.
    Herpes I cried out for 8moths had a cure and was making use of the Medication that never wanted a life living on drugs, I applied Antibiotics, he prescribed for me the acyclovir(Zovirax), famciclovir (Famvir), andvalacyclovir (Valtrex).
    They never get me cured.
    My God keep blessing you and your Family. Dr
    ODEY ABANG, your a powerful Herbalist fir your work in my life
    I wish you know how I feel inside me when I was making use of does tablets that never could there get me cured. I had to search about some of my favourite blogs when I thought about Dr Odey abang from the testimonies of patients and I remember a friend who told me I should try Dr. Odey Abang herbal medicine. He told me the man can cure me,but was shy and feel its dirty taking in herbs made with African herbalists.
    You need to know I would have been cured before now since I knew him then, but still interested in letting you that was my punishment.
    Thanks reading my article, feel good and not make my mistake, I love testimonies and explanations of the new beginning is all I hope for
    Think about your live and use herbs to get you cured of your challenge on
    HIV/Aids
    SYPHILIS
    DIABETES
    CANCER
    ALL CAN BE CURED WITH MANY OTHERS BY DR. ODEY ABANG
    His email is for you so you speak to him

    Odeyabangherbalhome@gmail.com
    WhatsApp number +2349015049094

    ReplyDelete

  3. https://sites.google.com/view/movers-riyadh/
    https://sites.google.com/view/movers-riyadh/movers-mecca
    https://sites.google.com/view/movers-riyadh/home
    https://sites.google.com/view/movers-riyadh/movers-jedaah-elhamdniah
    https://sites.google.com/view/movers-riyadh/movers-yanbu

    ReplyDelete
  4. https://sites.google.com/view/movers-riyadh/movers-najran
    https://sites.google.com/view/movers-riyadh/movers-Jizan
    https://sites.google.com/view/movers-riyadh/jazan
    https://sites.google.com/view/movers-riyadh/taif
    https://sites.google.com/view/movers-riyadh/moversjeddah

    ReplyDelete
  5. https://sites.google.com/view/movers-riyadh/movers-abha
    https://sites.google.com/view/movers-riyadh/movers-elahsa
    https://sites.google.com/view/movers-riyadh/movers-elkhobar
    https://sites.google.com/view/movers-riyadh/movers-elkharj
    https://sites.google.com/view/movers-riyadh/movers-elmadina-elmnowara

    ReplyDelete