Re: Webfonts with ClientBundle, UiBinder

Thanks again, Jens, for your help on this issue. Font Awesome is a nice package and I am very pleased with the results. I can use the icon directly in UiBinder, but more importantly, I can set them in my code. I've created a class that builds a static a JSONObject that matches a file MIME type to the CssResource for the desired icon:

mimeTable.put("image/jpeg", 

  new JSONString(FontAwesomeBundle.INSTANCE.fa().fileImageOutline()));

In cases where I want to stack two icons, I return both styles with a space separation: 

mimeTable.put("text/x-vcard", 

  new JSONString(FontAwesomeBundle.INSTANCE.fa().fileOutline() + 

    " " + FontAwesomeBundle.INSTANCE.fa().user()));

    

In UiBinder I have

<g:Anchor addStyleNames="{local.black}" ui:field="fetchButton">

  <i ui:field="icon" class="{font.fa.fa} {font.fa.scale4x}"></i>

  <span ui:field="stack" class="{font.fa.stack} {font.fa.scale2x}">

    <i ui:field="stack2" class="{font.fa.fa} {font.fa.stack2x}"></i>

    <i ui:field="stack1" class="{font.fa.fa} {font.fa.stack1x}"></i>

  </span>

</g:Anchor>

I get a list of files as AutoBeans from the server and pass these to the matching Impl.java file where I call

String stylings = MimeAssociation.get(fileInfo.getMime());

String [] fontStyles = stylings.split(" ");

if (fontStyles.length == 1) {

  icon.addClassName(fontStyles[0]);

  stack.removeFromParent();

}

else {

  stack2.addClassName(fontStyles[0]);

  stack1.addClassName(fontStyles[1]);

  icon.removeFromParent();

}

The smaller size for stack--2x vs 4x--gives the icons in the list the same visual size.

The result looks good in both GWT desktop widget and the MGWT gray background, and I have a consistent look across all my icons.

On Wednesday, September 24, 2014 12:36:44 PM UTC-4, Thad Humphries wrote:

Success! Thank you. My CSS now starts with

@url fawoff woff;

@font-face{font-family:'FontAwesome';

  src: fawoff format('woff');

  font-weight:normal;font-style:normal}

  .fa{display:inline-block;font:normal ...

and the icon is there. Thank you. Once I flesh out my ClientBundle I'll be able add icons as needed from code or via UiBinder.

Interesting item: This change did not work at first when I simply stopped and started SDM (Dev Mode Off, Dev Mode On). However I was desperate so I stopped RunJettyRun in Eclipse and SDM in the terminal, and ran `gradle clean jettyDraftWar` for a complete rebuild. Only after that did the icon appear. Things like that are gonna make me paranoid. :)

On Wednesday, September 24, 2014 11:42:18 AM UTC-4, Jens wrote:

@font-face{

  font-family:'FontAwesome';

  @url fawoff woff?v=4.2.0;

  font-weight:normal;font-style:normal}

 .fa{display:inline-block;font:normal ... 

I guess it should be

@url fawoff woff;

@font-face {

   font-family: 'FontAwesome'

   src: fawoff format('woff') /* fawoff should be replaced with url of DataResource woff() */

   font-weight: normal;

   font-style: normal;

} 

-- J.

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" 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 http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.