Grund arithmatic in GWT CssResource

Question

ich nach einem Weg, um so etwas zu tun:

// style.css 
@def borderSize '2px'; 

.style { 
    width: borderSize + 2; 
    height: borderSize + 2; 
} 

, wo die Breite und Höhe Attribute würde am Ende Wert von 4px hat.

Answer 1

Manchmal benutze ich die folgenden:

@eval BORDER_SIZE_PLUS_2 2+2+"px"; /* GWT evaluates this at compile time! */ 

Merkwürdig ist, dass dies nur funktioniert, wenn Sie stellen keine Leerzeichen zwischen dem + Operator und die Operanden. Außerdem können Sie in @eval keine Konstanten verwenden, die zuvor von @def definiert wurden. Sie können jedoch Konstanten verwenden, die als statische Felder in einem Ihrer Java-Klassen definiert sind:

@eval BORDER_SIZE_PLUS_2 com.example.MyCssConstants.BORDER_SIZE+2+"px"; 

Oder Sie könnten die Berechnung vollständig von Java ausgeführt werden lassen:

@eval WIDTH com.example.MyCssCalculations.width(); /* static function, 
                 no parameters! */ 
@eval HEIGHT com.example.MyCssCalculations.height(); 
.style { 
    width: WIDTH; 
    height: HEIGHT; 
} 

Aber was würde ich wirklich wie zu tun ist, um Ihren Vorschlag sehr ähnlich:

@def BORDER_SIZE 2; 
.style { 
    width: value(BORDER_SIZE + 2, 'px'); /* not possible */ 
    height: value(BORDER_SIZE + 3, 'px'); 
} 

ich glaube nicht, dass in GWT 2.0 möglich ist. Vielleicht finden Sie eine bessere Lösung - hier ist die Dev Guide Seite zu diesem Thema.

Answer 2

Ich würde auch gerne etwas so, aber es ist nicht möglich. Sogar in CSS 3 ist nichts geplant.

Wenn Sie wirklich so etwas machen wollen, ist eine Möglichkeit, PHP zu verwenden und Ihren Webserver zu konfigurieren, so dass .CSS-Dateien von PHP analysiert werden.

So könnte man so etwas wie

<? 
    $borderSize = 2; 
?> 

.style { 
    width: <? borderSize+2 ?>px; 
    height: <? borderSize+2 ?>px; 
} 

tut Da dies aber keine ‚Standard‘ Art und Weise ist, ich denke, es ist besser, es nicht zu tun.

Answer 3

Mozilla Art-von-nicht-wirklich unterstützt dies mit seiner CSS calc() Funktion.

gestohlen Dieses Beispiel schamlos (mit Namensnennung!) Von Ajaxian

/* 
* Two divs aligned, split up by a 1em margin 
*/ 
#a { 
    width:75%; 
    margin-right: 1em; 
} 
#b { 
    width: -moz-calc(25% - 1em); 
} 

Es ist nicht Cross-Browser, und es nur wahrscheinlich ist kaum von selbst bleeding-edge-Versionen von Firefox unterstützt, aber es gibt zumindest Fortschritte gemacht werden in dieser Richtung.

Answer 4

Sie können auch in Ihrem Provider Methode berechnen, wenn Sie einen Parameter in der Funktion gesetzt:

public static int getBaseFontSize(int sizeToAdd) { 
    if (true) { 
     return 9 + sizeToAdd; 
    } 
    return baseFontSize; 
}