Wednesday 17 April 2013

Exclude classes implemented by GWT and use our own implementation.


Exclude classes implemented by GWT and use our own implementation.

GWT projects can be organized in a variety of ways. In this section we are describing how to override one package implementation with another, specially on overriding implementation of GWT package. 
The <super-source> tag instructs the compiler to "re-root" a source path.


Let us explain with a simple example,

consider you want to replace some classes in gwt, let us say classes in com.google.gwt.json.client.JSONArray/Null/Object package, also when you use JSONParser of GWT json it shoul create instance of JSONValue of you implementation. To do this all you have to go through simple steps:


  1.  Create a project WaterTalks, with package com.water.talks;
  2.  Create your implementations in a similer package as in GWT, in this case create a package in you project source folder com.google.gwt.json.client and place your implementatinos inside it.
  3.  Place your com.google.gwt.json.client package inside com.water.talks.myImplementation, ensure not to change the package name in classes to new package name. Even if it show error never mind
  4.  Now in gwt.xml file in com.water.talks, insert a tag <super-source path="myImplementation" /> not that path in tag is the package in which you added you implementation.


Thats all, now when gwt compiles it will look for classes you implemented first before it looks for its own implementation.
A small tip, when you add files from other projects add it as a gwt project, by creating gwt.xmlfile inside it and ineriting that module.

Thanks :)

Friday 12 April 2013

How to embed custom fonts in web pages


How to embed custom fonts in web pages 


In order to do this yourself you need your font in at least 2 formats, I actually use all of them. This is the only way I know to convert the fonts at this moment, you can use "Font Squirrel". Once you have converted your fonts here is what you need: (place this in your CSS file)

@font-face {
font-family: 'Font Name HERE';
src: url('path_to_EOT_FONT.eot');
src: local('Font Name HERE'), url('path_to_SGV_FONT.svg')
format('svg'), url('path_to_WOFF_FONT.woff') format('woff'),
url('path_to_TTF_FONT.ttf') format('truetype');
}


One you have that some where (in the beginning) of your CSS, you can then call your font file by name in your font specification. Here is an example. Lets pretend I was using a font named "Crazy Font 1" here is what my CSS would look like.

h1 {
   font-family: ''Font Name HERE’, Arial, sans-serif;
}

Example using TimeBurner font in web page :

@font-face {
  font-family: TimeBurner; 

  src: url('TimeBurner/timeburner_regular.ttf') ,
  url('TimeBurner/timeburner_regular.eot');
}


style="font-family: 'TimeBurner';”



.Folder structure would look like this,




Thanks :) .