Friday, November 19, 2010

Books on my desk

These days I have in the pipeline three books I want to browse/read. The first is a book I've read already months ago: Pro Spring Dynamic Modules for OSGi™ Service Platforms. The other two are: OSGi and Equinox: Creating Highly Modular Java Systems and Eclipse Rich Client Platform (2nd Edition). I guess my motivation is a re-visitation of the pool of technologies I've used years ago to develop JDPF (Java Data Processing Framework). I still believe OSGi is a terrific technology.

Tuesday, November 09, 2010

UIBinder, CSS and Images (GWT)

I am working with GWT (Google Web Toolkit) since a while now. One of the things I am regularly doing (since version 2.0) is creating UIs through Declarative Layouts with UiBinder. While creating the ui.xml files it is normal to have the need of displaying images or icons.

1) Integrating background images with the ui:style section: for a long time have been using simple colors to create my look and feel but lately I started to feel the need to give the UI a better look using images as background. One way of getting this done with GWT is to include in the ui.xml file something like this - where the image is in the same folder of the ui.xml file:
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'>

  <ui:style>
    @url fileUrl bckImage;
    .titleBar { background: fileUrl repeat 0 0; }
  </ui:style>

  <ui:data field='bckImage' src='image.gif'/>

  <g:HorizontalPanel styleName='{style.titleBar}'>
  ...
  </g:HorizontalPanel>

</ui:UiBinder>

An alternative way:
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'>

  <ui:image field='gradient' src='image.gif' />

  <ui:style>
    @sprite .header {
      gwt-image: 'gradient';
      width: 100%;
      height: 18px;
    }
  </ui:style>

  <g:VerticalPanel>
    <g:HorizontalPanel ui:field='header' styleName='{style.header}'/>
  </g:VerticalPanel>

</ui:UiBinder>

2) Getting the images from the ClientBundle: in GWT it is possible to declare resources with something like the following:
package com.commonsemantics.example;

public class Example implements EntryPoint {

  public interface Resources extends ClientBundle
  {
     public static final Resources INSTANCE =  GWT.create(Resources.class);

     @Source("images/myIcon.jpg")
     ImageResource myIcon();
  }

  ...
}

Once the ImageResource is declared it is possible to use it in the ui.xml file:
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'>

  <ui:style>
    // This does not have any effect as the images are translated by GWT 
    // into background. In this configuration, in order to have the image 
    // of the right size, it has to be manually resized.
    .myImage { width: 18px; height: 18px; }
  </ui:style>

  <ui:with field='resources'
    type='com.commonsemantics.example.Example.Resources' /> 

  <g:HorizontalPanel styleName='{style.titleBar}'>
    <g:Image ui:field='rightSide' resource='{resources.myIcon}'  
      styleName='{style.myImage}'></g:Image>
  </g:HorizontalPanel>

  </ui:UiBinder>

3) Getting the images from the same package. When making use of images it is also possible to copy them in the same package of the class using them and refer to them as follow:
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'>

  <ui:image field='myImage' src='myImage.gif' />

  <g:HorizontalPanel>
    <g:Image ui:field='rightSide' resource='{myImage}'></g:Image>
  </g:HorizontalPanel>

</ui:UiBinder>

Thursday, May 27, 2010

About one of my FOAF problems

I am currently involved in defining the Annotation Ontology (AO). For this tasks I would like to be able to reuse existing ontologies and AO is actually built on top of the Annotea project schema. Another popular vocabulary would be FOAF. Now, FOAF defines - or better loosely defines - a foaf:Document class as: The Document class represents those things which are, broadly conceived, 'documents'. Also in the documentation (accessed today) I read: there is no distinction between physical or electronic documents.

In AO I need to point to the document I am annotating. As many of you might know, documents on the web, even if they have the same URI, are subject to change. For instance my curriculum is changing with the new projects I am working on. Unfortunately the URI is always the same. Therefore, it might be that I annotate a piece of text in a document today and, tomorrow that piece is gone and my annotation is orphan.

To be clear I can write something like:
<rdf:Description rdf:about="http://www.hcklab.org/paolo-ciccarese-cv.html">
  <rdf:type rdf:resource="Document"/>             
  <pav:sourceAccessedOn>2010-05-10</pav:sourceAccessedOn>
</rdf:Description>
After a while some other user (or myself again) creates some other annotation; this will result in:
<rdf:Description rdf:about="http://www.hcklab.org/paolo-ciccarese-cv.html">
  <rdf:type rdf:resource="Document"/>             
  <pav:sourceAccessedOn>2010-05-31</pav:sourceAccessedOn>
</rdf:Description>
As you can imagine, the access date is not working well as now we have a URI associated with two dates and there is no way to distinguish which date is associated to what annotation.

A better solution would be to have a stable URI for the webpage and a different URI for each version of the document. Something like:
<rdf:Description rdf:about="http://my.example.org/sd/2332">
  <rdf:type rdf:resource="Document"/>
  <ao:retrievedFrom rdf:resource="http://tinyurl.com/ykjn87p"/>
  <pav:sourceAccessedOn>2010-05-10</pav:sourceAccessedOn>
</rdf:Description>>

<rdf:Description rdf:about="http://tinyurl.com/ykjn87p">
  <rdf:type rdf:resource="WebPage"/>
</rdf:Description>
or, if we really want to keep FOAF in the picture:
<rdf:Description rdf:about="http://my.example.org/sd/2332">
  <rdf:type rdf:resource="SourceDocument"/>
  <ao:retrievedFrom rdf:resource="http://tinyurl.com/ykjn87p"/>
  <pav:sourceAccessedOn>2010-05-10</pav:sourceAccessedOn>
</rdf:Description>>

<rdf:Description rdf:about="http://tinyurl.com/ykjn87p">
  <rdf:type rdf:resource="http://xmlns.com/foaf/0.1/Document"/>
</rdf:Description>

Read more here

Friday, April 09, 2010

Genius for gene networks

Now that I cleaned the matrix data (see previous three posts) I can display them with Genius (google code) without having to deal with long genes descriptions:

First steps with Gridworks (3)

Once again I go back to the original file and, as I know that the first column has always the same format I will try: value.split(":")[-1] and the results will be:

And here we go:


In this case I've created a new column but I could have selected 'edit cell -> transform' to transform the original column directly.

Finally, to create exactly what I wanted:
value.split(':')[-2]+':'+value.split(':')[-1]

or
value.replace('Affymetrix:CompositeSequence:','')
or
value.split(':')[2,4].join(':')


In summary, with the last line of code, in a few seconds total (load the file and run the command) I can perform the desired transformation. Also, it would be helpful to be able to use the command "split multi-valued cells" with the choice of splitting into rows (as it is already possible now) or into columns (which is currently not possible).

First steps with Gridworks (2)

I am back on the 'Genius matrix' project and I notice that the column name is a bit cryptic, I therefore provide a new simple name.


Even if that was not the goal of my data cleaning I am still curious on how to split the first column in multiple ones using the separator ':' as criteria.


I select 'add column based on this column' and I get the following screen:

Using the "Gridworks Expression Language" (GEL) I can create a new column where I got rid of the prefix "Affymetrix:CompositeSequence" (as you can see in the above pic):

if(value.startsWith ("Affymetrix:CompositeSequence"), value.substring(29), value)

And the result is:


I still haven't used the separator ':' with my rule but the result is really close to what I wanted... and there is always the option to roll back.

Thursday, April 08, 2010

First steps with Gridworks (1)

I am having the chance of testing the alpha of Freebase Gridworks and given my appreciation for the work of David Huynh and Stefano Mazzocchi I am really excited about it. As these days I am working on a little software for visualizing gene networks and I need to perform a few simple steps for cleaning the data I decided to go Gridworks (video1 and video2). Gridworks is easy to install and once I run it, Gridworks opens a page in my browser.

I am then going to load a matrix in csv format simply filling in the data file location and a project name. Creating the project I get back the view of the matrix:


I now need to clean the first column that contains names such as:
Affymetrix:CompositeSequence:Rat230_2:1389668_at

and change them into something like: Rat230_2:1389668But first I want to visualize a larger number of rows (from 20 to 50) to make sure that the pattern is always the same. I select page size: 50 and this time the operation takes a few seconds to complete.
Now I want to find the best way to modify the first column and I start exploring the contextual menu:

Several quick options are available: transform to uppercase, lowercase, title case, collapse white spaces and so on. I also see a split multi-valued cells and this gets my attention. I select it, I specify as separator the semicolumn ':' and I get back:

This is not exactly what I wanted as I was expecting to get multiple columns out of the first one instead of getting multiple rows. Well, no problem the undo feature is one click away. You can either click on the top of the screen for the last command undo or you can browse the command history on the right of the screen and go back the desire amount of steps.


And I can go back to the original state.

Monday, February 22, 2010