Saturday, May 5, 2018

value function in GSS and math formulas

I've been struggling forever with a simple task of using size properties of an image as a constant in my ClientBundle managed .css file. Every time I have to calculate an offset based on some image width or height, I'm forced to involve ugly @eval. And with GSS things haven't become easier. My hope is that it was just me being blind in a search for a decent TOC of either GSS or full syntax of first generation CssResource-style .css files.

Here's a snippet:

@def POPUP_LOGGER_TOP_TAILS_HEIGHT value('popupLoggerTopTails.getHeight', 'px');
@def POPUP_LOGGER_RED_BUTTON_HEIGHT value('popupLoggerRedButton.getHeight', 'px');
@def TOP_PANEL_BUTTON_AREA_MARGIN_TOP divide(add(POPUP_LOGGER_TOP_TAILS_HEIGHT, POPUP_LOGGER_RED_BUTTON_HEIGHT), 2);

I get this error: popup-logger.gss[line: 54 column: 42]: Size must be a CssNumericNode with a unit or 0; was: popupLoggerTopTails().getHeight() + "px"

Obviously I'm using value wrong. Here's an excerpt from CssResource.java:
  • value("bundleFunction.someFunction[.other[...]]" [, "suffix"]) substitute the value of a sequence of named zero-arg function invocations. An optional suffix will be appended to the return value of the function. The first name is resolved relative to the bundle interface passed to com.google.gwt.core.client.GWT.create(Class). An example:
     .bordersTheSizeOfAnImage {     border-left: value('leftBorderImageResource.getWidth', 'px') solid blue;   }  
Now when it comes to GSS and the math functions:

Each of these functions can take a variable number arguments. Arguments may be purely numeric or CSS sizes with units (though mult() and divide() only allow the first argument to have a unit).

So technically this divide(add("15px", "10px"), 2) should work.

But instead of "15px" I get this this: popupLoggerTopTails().getHeight() + "px". Looks like a waste of opportunity. Completely unusable and counterintuitive design. It's not a value function. It's a string concatenation function. To become a value function it has to be already evaluated to "15px" at this point.

But I'm sure it's just yet another time when I got confused due to a lack of accessible use case examples. This code snippet at http://www.gwtproject.org:

@def SPRITE_WIDTH value('imageResource.getWidth', 'px') .selector { width: SPRITE_WIDTH; }

is literally the best example we ever had, which ironically contains a missing ";" after ")" syntax error.

--
You received this message because you are subscribed to the Google Groups "GWT Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at https://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.

No comments:

Post a Comment