Juri Strumpflohner's TechBlog

GWT Button with image AND text

noreply@blogger.com (Juri Strumpflohner) — Mon, 15 Mar 2010 17:08:00 +0000

GWT just provides the basic widgets like check boxes, hyperlinks, buttons etc...and leave the more complex ones to the developer or to 3rd party providers. For instance they don't have lists. Another thing which quite surprised me, their implementation of a button doesn't allow to have images AND text at the same time although a lot of Google products have it (Wave, GDocs, Gmail...).
With GWT buttons you have mainly two possibilities, using Button or PushButton. The first is just the standard one while the latter allows to assign an image which is passed in its constructor. But also the PushButton doesn't allow to have both, image AND text visualized...which somehow seems to be a use case which is quite requested. A search on the web brought me to the GWT's JavaDoc describing a CustomButton widget which can be used like this:

<g:PushButton ui:field='pushButton' enabled='true'>
 <g:upFace>
  <b>click me</b>
 </g:upFace>
 <g:upHoveringFace>
  <b>Click ME!</b>
 </g:upHoveringFace>
 <g:downFace image='{res.save}' />
</g:PushButton>

But also this kind of implementation doesn't allow you to have an image and text declaration...* uff *.

So after that, similar as for the Hyperlink, I decided to implement one by myself. The implementation wasn't that difficult after all. Here's the source code:

import com.google.gwt.resources.client.ImageResource;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.Image;

public class CustomButton extends Button {
 private String text;
 
 public CustomButton(){
  super();
 }
 
 public void setResource(ImageResource imageResource){
  Image img = new Image(imageResource);
  String definedStyles = img.getElement().getAttribute("style");
  img.getElement().setAttribute("style", definedStyles + "; vertical-align:middle;");
  DOM.insertBefore(getElement(), img.getElement(), DOM.getFirstChild(getElement()));
 }
 
 @Override
 public void setText(String text) {
  this.text = text;
  Element span = DOM.createElement("span");
  span.setInnerText(text);
  span.setAttribute("style", "padding-left:3px; vertical-align:middle;");
  
  DOM.insertChild(getElement(), span, 0);
 }
 
 @Override
 public String getText() {
  return this.text;
 }
}

The according usage with the GWT UiBinder is the following:

...
<!-- Declaration of your ImageBundle -->
<ui:with field="res" type="com.sample.client.IDevbookImageBundle" />
...
<d:CustomButton ui:field="buttonSave" text="Save" resource="{res.save}"></d:CustomButton>

Pretty simple, isn't it? And it doesn't alter the button's behavior rather than adding the image. Some explanations might be needed as for instance you may wonder why I've overridden the setText(String), getText() of the standard Button widget. This was needed in order to wrap the text inside a span element which I can then identify when adding the image in order to position the image before the text. This has the drawback that a definition like

...
<d:CustomButton ui:field="buttonSave"resource="{res.save}">Save</d:CustomButton>

...won't work.

Moreover this widget may be enhanced by making it more configurable like adding the image after the text etc. I've also hard-coded some styles as you see in order to make the widget easier to use. The final outcome:

Client-server communication peculiarities with GWT and App Engine DataNucleus

noreply@blogger.com (Juri Strumpflohner) — Fri, 12 Mar 2010 19:21:00 +0000

I just had to fight with a strange exception which got raised after a GWT-RPC call to the App Engine back-end server which had the purpose to persistently store an entity into the data store.
The exception:

com.google.gwt.user.client.rpc.SerializationException: Type 'org.datanucleus.sco.backed.List' was not assignable to 'com.google.gwt.user.client.rpc.IsSerializable' and did not have a custom field serializer.For security purposes, this type will not be serialized.: instance = []
 at com.google.gwt.user.server.rpc.impl.ServerSerializationStreamWriter.serialize(ServerSerializationStreamWriter.java:610)
 at com.google.gwt.user.client.rpc.impl.AbstractSerializationStreamWriter.writeObject(AbstractSerializationStreamWriter.java:129)
 at com.google.gwt.user.server.rpc.impl.ServerSerializationStreamWriter$ValueWriter$8.write(ServerSerializationStreamWriter.java:152)
 at com.google.gwt.user.server.rpc.impl.ServerSerializationStreamWriter.serializeValue(ServerSerializationStreamWriter.java:534)
 at com.google.gwt.user.server.rpc.impl.ServerSerializationStreamWriter.serializeClass(ServerSerializationStreamWriter.java:700)
 at com.google.gwt.user.server.rpc.impl.ServerSerializationStreamWriter.serializeImpl(ServerSerializationStreamWriter.java:730)
 at com.google.gwt.user.server.rpc.impl.ServerSerializationStreamWriter.serialize(ServerSerializationStreamWriter.java:612)
 at com.google.gwt.user.client.rpc.impl.AbstractSerializationStreamWriter.writeObject(AbstractSerializationStreamWriter.java:129)
 at com.google.gwt.user.server.rpc.impl.ServerSerializationStreamWriter$ValueWriter$8.write(ServerSerializationStreamWriter.java:152)
 at com.google.gwt.user.server.rpc.impl.ServerSerializationStreamWriter.serializeValue(ServerSerializationStreamWriter.java:534)
 at com.google.gwt.user.server.rpc.impl.ServerSerializationStreamWriter.serializeClass(ServerSerializationStreamWriter.java:700)
 at com.google.gwt.user.server.rpc.impl.ServerSerializationStreamWriter.serializeImpl(ServerSerializationStreamWriter.java:730)
 at com.google.gwt.user.server.rpc.impl.ServerSerializationStreamWriter.serialize(ServerSerializationStreamWriter.java:612)
 at com.google.gwt.user.client.rpc.impl.AbstractSerializationStreamWriter.writeObject(AbstractSerializationStreamWriter.java:129)
 at com.google.gwt.user.server.rpc.impl.ServerSerializationStreamWriter$ValueWriter$8.write(ServerSerializationStreamWriter.java:152)
 at com.google.gwt.user.server.rpc.impl.ServerSerializationStreamWriter.serializeValue(ServerSerializationStreamWriter.java:534)
 at com.google.gwt.user.server.rpc.RPC.encodeResponse(RPC.java:609)
 at com.google.gwt.user.server.rpc.RPC.encodeResponseForSuccess(RPC.java:467)
 at com.google.gwt.user.server.rpc.RPC.invokeAndEncodeResponse(RPC.java:564)
 at com.google.gwt.user.server.rpc.RPC.invokeAndEncodeResponse(RPC.java:544)
 at com.google.gwt.user.server.rpc.RPC.invokeAndEncodeResponse(RPC.java:504)

The exception happened during the (de)serialization of the RPC call. But I didn't use any org.datanucleus.sco.backed.List type in my entities which I transfer over the network. The reason however is the persist operation on App Engine. The code is like

@Override
public void saveOrUpdate(SourceCodeItem item) {
 PersistenceManager pm = getPersistenceManager();
 try {
  pm.currentTransaction().begin();
  pm.makePersistent(item);
  pm.currentTransaction().commit();
 } catch (Exception ex) {
  if (pm.currentTransaction().isActive())
   pm.currentTransaction().rollback();
 } finally {
  pm.close();
 }
}

It takes an object of type SourceCodeItem and makes it persistent by calling makePersistent(...). This call to makePersistent changes the state of the passed object. The SourceCodeItem object has the following structure (cut out details):

@PersistenceCapable(identityType = IdentityType.APPLICATION)
public class SourceCodeItem implements IsSerializable {
 @PrimaryKey
 @Persistent(valueStrategy = IdGeneratorStrategy.IDENTITY)
 @Extension(vendorName = "datanucleus", key = "gae.encoded-pk", value = "true")
 private String id;

 @Persistent
 private String title;

 ...
 
 private List<Label> labels;

 public SourceCodeItem() {
  ...
  labels = new ArrayList<Label>();
 }
 ...
}

The highlighted member variable declaration is a list which is not persistent and it gets initialized in the constructor. However after a call to the JDO's makePersistent(..) this list will be instantiated with the above mentioned org.datanucleus.sco.backed.List type. If you don't "detach" the object from JDOs manager it will be transferred with that instance type of the list which cannot be serialized and you'll get the exception I described in the beginning.

Now you have two choices. Change your implementation of saveOrUpdate(SourceCodeItem) and explicitly detach your object. This would result in the following code:

@Override
public SourceCodeItem saveOrUpdate(SourceCodeItem item) {
        SourceCodeItem result = null;
 PersistenceManager pm = getPersistenceManager();
 try {
  pm.currentTransaction().begin();
  pm.makePersistent(item);
  pm.currentTransaction().commit();
                result = pm.detachCopy(item);
 } catch (Exception ex) {
  if (pm.currentTransaction().isActive())
   pm.currentTransaction().rollback();
 } finally {
  pm.close();
 }

        return result;
}

Alternatively, which is my favorite option is to add the following to your jdoconfig.xml:

<property name="datanucleus.DetachAllOnCommit" value="true"/>

In this way the detaching will be done automatically after a commit and you can leave the code as it was initially. In such a way you'd get the following lifecycle:

Tune your emulator with a pretty Nexus One skin!

noreply@blogger.com (Juri Strumpflohner) — Tue, 09 Mar 2010 16:39:00 +0000

I know it doesn't really increase your value during development. It's just for fun but those of you that like it, here are some links that point to Nexus One skins that can be used on your local dev emulator.

Installation is easy. Just extract it to <android-sdk-install-root>/platforms/<your-platform>/skins and then use it.

The result is pretty nice :)

Update
What I forgot to mention. If you have problems with the size of the emulator that is going to be started, you may want to add a -scale to your emulator run arguments. In Eclipse you add it under your Run Configurations:

That's what I'm missing in Visual Studio! Give me better code editor support!!

noreply@blogger.com (Juri Strumpflohner) — Tue, 02 Mar 2010 21:55:00 +0000

Visual Studio is great in doing many things as for instance in integrating with other MS products (obviously) or with debugging. The VS debugger is one of the best I've seen till now (using different IDEs).

One thing however I always again miss is having better code editor support. I'm also using Eclipse heavily and the code support which is given there is just amazing and by far better than in Visual Studio. Examples are not only the refactorings, but also shortcuts for jumping to classes / methods which in VS is only available through 3rd-party plugins. Ok...you can use the dropdown box on top...but it is far from usable (have to switch to mouse, etc...).

Another example I came across today in Eclipse is the following. I was just writing an argument matcher to be provided to Mockito in one of my test cases. I started with the following

Note, argument is of type object, so I did a check using the instanceof ("is" in C#) keyword wrapped within an if clause. I then continued to write argument.getLabels(),...

...not recognizing that getLabels() is actually a method of SourceCodeItem, wherefore I have to cast argument to SourceCodeItem first. But...wait; strangely Eclipse provided getLabels() in its suggestions as if it would be a valid method of argument?? Confirming it...

...Eclipse does the cast automatically for me!! That's what I call great support....I love it!

GWT Hyperlink Widget with Image

noreply@blogger.com (Juri Strumpflohner) — Sun, 28 Feb 2010 21:53:00 +0000

Standard GWT Hyperlink widgets don't seem to give the possibility to associate an image. This is quite awkward since you may want to provide nice icons along with your links. In my opinion, appropriate icons increase the user experience dramatically. But it is also not difficult to create image-enhanced hyperlink widgets.

public class HyperLink extends Hyperlink {

 public HyperLink(){
 }
 
 public void setResource(ImageResource imageResource){
  Image img = new Image(imageResource);
  img.setStyleName("navbarimg");
  DOM.insertBefore(getElement(), img.getElement(), DOM.getFirstChild(getElement()));
 }
}

Now you can use the widget like

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
 xmlns:g="urn:import:com.google.gwt.user.client.ui" 
 xmlns:v="urn:import:com.devbook.client.view" xmlns:d="urn:import:com.devbook.client.widget">
 <ui:style>
 </ui:style>
 <ui:with field="res" type="com.devbook.client.IDevbookImageBundle" />
 <g:DecoratorPanel ui:field="outerContainer">
  <g:HTMLPanel ui:field="mainContainer">
   <v:DecoratedPanel ui:field="titleContainer" text="Navigation"></v:DecoratedPanel>
   <g:VerticalPanel>
    <d:HyperLink resource="{res.add}" targetHistoryToken="addSourceItem">Add Item</d:HyperLink>
   </g:VerticalPanel>
  </g:HTMLPanel>
 </g:DecoratorPanel>
</ui:UiBinder>

The above XML file makes use of the UiBinder which has been introduced with GWT 2.0. You have to take a look at the highlighted parts. First the HyperLink widget (shown at the beginning of this post) is being referenced. Then a reference to the ImageBundle you have defined for your GWT module is created. This bundle is needed to reference the image you'll show on the HyperLink widget. The resource="{res.add}" will be translated to a call of setResource(ImageResource). The passed ImageResource is the one defined in your ImageBundle.

public interface IDevbookImageBundle extends ClientBundle {
 ...
 @Source("com/devbook/images/add.png")
 ImageResource add();
 ...
}

The final result:

GWT, App Engine and App Engine Data Classes

noreply@blogger.com (Juri Strumpflohner) — Tue, 23 Feb 2010 17:52:00 +0000

I currently have some time before starting with my Master thesis project which will bring me back to Android programming. So to make use of that, I started to develop a project I already wanted to implement a couple of years ago, but due to my Master studies I didn't have the time to. I'll need some beta testers soon, so keep track of my blog here to catch the moment when everything goes online.
What I can reveal so far is that it will be a web application, using Google's GWT and it will be hosted on Google's cloud computing platform App Engine.

Today I was finishing the implementation of the basic CRUD operations, using JDO and App Engine's DataNucleus DataStore. Now the app possibly needs to store large strings surely more than 255 characters. You'd think that shouldn't be a problem, but App Engine's DataStore has some implications one should be aware of. Beside these, there are some well defined core value types, under which there is the restriction that you have to use the com.google.appengine.api.datastore.Text instead of the String datatype if you plan to store more than 255 character strings. Ok, that shouldn't be a problem for us, should it? Well...not exactly. If you plan to use App Engine together with plain old JSP or whatever view technology that it won't be a problem, but if you use GWT you have to keep in mind that you're implementing a client-server system. The difference: the GWT client lives within the browser. So the data has to be transferred between the two end-points and has to be serializable accordingly. com.google.appengine.api.datastore.Text isn't serializable though. This means you cannot share your POJOs between your GWT client app and server-side code. Now you have different possibilities. Some that come to my mind right now are..

using DTOs (Data Transfer Objects) which isn't that comfortable 'cause it causes a lot of boilerplate code
writing a serializable version of com.google.appengine.api.datastore.Text data class.

Fortunately a guy has already implemented such a serializable version of Text and provides it for free. I just tried it out and it works seamlessly, without writing a single additional line of code. Here some steps on how to use it (available descriptions on the web are really bad).

Download the necessary jar files from http://www.resmarksystems.com/code/:
appengine-utils-client-1.0.jar
appengine-utils-server-1.0.jar
Include the appengine-utils-client-1.0.jar in your build path. Copy the appengine-utils-server-1.0.jar to your WEB-INF/lib folder.

On your GWT module file add the following:

<inherits name="com.resmarksystems.AppEngineDataTypes"/>

Restart your GWT app or compile it and everything should work as expected.

Resmarksystem's version doesn't just provide serializable versions of Text but also for Key, ShortBlob, Blob, Link, User.
If you get exceptions like

java.lang.ClassCastException: java.lang.String cannot be cast to com.google.appengine.api.datastore.Text

An IncompatibleRemoteServiceException was thrown while processing this call.

then it's probably because you didn't correctly include the jar files as mentioned in step 2 above.

DockLayoutPanel doesn't work correctly??

noreply@blogger.com (Juri Strumpflohner) — Fri, 19 Feb 2010 15:33:00 +0000

Suppose you'd like to create a layout like the following using GWT:

With GWT 2.0 the documentation suggests to use the DockLayoutPanel.

<g:DockLayoutPanel unit='EM'>
  <g:north size='4'>
    <g:Label>Header</g:Label>
  </g:north>

  <g:west size='16'>
    <g:Label>Navigation</g:Label>
  </g:west>

  <g:center>
    <g:ScrollPanel>
      <g:Label>Content Area</g:Label>
    </g:ScrollPanel>
  </g:center>
</g:DockLayoutPanel>

However pay attention, this won't work if you use the standard mechanism like

public void onModuleLoad() {
 RootPanel.get("main").add(new MainUI());
}

where the new MainUI() contains the DockLayoutPanel as root element (I assume you're using GWT's new UiBinder mechanism), then the DockLayoutPanel won't work surprisingly.

Instead you have to use

public void onModuleLoad() {
   RootLayoutPanel panel = RootLayoutPanel.get();
   panel.add(new MainUI());
}

HowTo: Launch JavaScript after async postback of UpdatePanel

noreply@blogger.com (Juri Strumpflohner) — Thu, 18 Feb 2010 14:00:00 +0000

Assume the scenario where you want to launch a JavaScript function after your UpdatePanel finished to do its async postback. This turns out to actually be quite simple. What you do is to use the ScriptManager.RegisterStartupScript(...) method.

ScriptManager.RegisterStartupScript(btnSave, this.GetType(), "myScriptKey", "myFunction()", true);

The only thing I found that people misdo is to not specify the correct instance (1st parameter) that caused the asynchronous postback to fire and thus the UpdatePanel to do the postback. In such a case it will just fail silently.

GWT DecoratorPanel style problems

noreply@blogger.com (Juri Strumpflohner) — Tue, 16 Feb 2010 22:54:00 +0000

I just experienced a nice side effect that happens if you use a DecoratorPanel. In my example it contained a list of items and everything is fine.

Decorator panel with no width indication

So far, everything is shiny. Bad things start when you want your DecoratorPanel to expand on the whole width of your page. So you add a width="100%" and get this

Decorator panel borders totally not working

Of course this is a style problem. Some browsing on the web and by reading through bug reports I came out with the following piece of CSS you have to place in your main GWT application's CSS file:

.gwt-DecoratorPanel {
    table-layout: fixed;
}
.gwt-DecoratorPanel .topLeft,
.gwt-DecoratorPanel .topRight {
    width: 5px;
}

Refresh your browser and everything should work fine.

Reloaded: Clean up your folder. For OSX

noreply@blogger.com (Juri Strumpflohner) — Sun, 07 Feb 2010 20:00:00 +0000

When downloading files from the web I usually have a predefined folder where all the downloads from my different browsers are stored. It doesn't take long till that folder grows to quite a remarkable size. Sorting out the files which are still needed is then a cumbersome and time-consuming process. Therefore, years ago I created a Java console app which takes care of removing files of a certain age.

Since I own a Mac this has become even more easy. For instance, to delete all files from a folder which haven't been accessed for 90 days and more, all you have to do is to create an automator script that executes the following unix shell command:

find /Users/Juri/Downloads/* -type f -atime +90 -exec rm -f {} \;

Note the usage of the parameter -atime. According to the man page

-atime n
     File  was  last  accessed n*24 hours ago.  When find figures out
     how many 24-hour periods ago the file  was  last  accessed,  any
     fractional part is ignored, so to match -atime +1, a file has to
     have been accessed at least two days ago.

This parameter assures that files which you often touch (open/modify) will not be deleted from the folder. It would be somehow wrong to use -mtime.

In addition after the overall cleaning process of the files you should get rid of empty folders which is done by invoking

find /Users/Juri/Downloads/* -type d -depth -empty -exec rmdir {} \;

Now you can combine everything in an Automator script and launch it at login time and voilà. From now on you don't have to care any more about cleaning your downloads folder :)

(P.S.: For future reference you may also like to redirect log entries into a file in order to know which files have been deleted)

Are anonymous Lambda style event handlers a readability killer?

noreply@blogger.com (Juri Strumpflohner) — Wed, 03 Feb 2010 14:21:00 +0000

A standard event handling method in C# looks something like this

public void SomeOtherMethod()
{
   MyClass aObj = new MyClass();
   aObj.MyCustomEventName += new EventHandler(OnMyCustomEventName);
   ...
}

private void OnMyCustomEventName(object sender, EventArgs e)
{
    //do what you need to
}

Pretty straightforward. Now since C# 3.0 you have the possibility to declare anonymous methods of the type

public void SomeOtherMethod()
{
   MyClass aObj = new MyClass();
   aObj.MyCustomEventName += delegate(Object sender, EventArgs e)
   {
      //do what you need to
   };
}

This makes it more concise since you define the event handling code directly at the point where you register the event.
This is, by the way, also possible in Java by declaring anonymous types such as

public void someOtherMethod(){
   ...
   MyClass aObj = new MyClass();
   aObj.setOnMyCustomEventListener(new IMyCustomEventListener(){

      public void onMyCustomEvent(...){
         //do what you need to
      }

   });
}

Note:IMyCustomEventListener is an interface and nevertheless we use the new to "instantiate" it. How's that possible? Well, this is a language feature which behind instantiates an anonymous object implementing the according interface.

It is very similar to the C# declaration of the event by using anonymous methods. Now, Lambda expression allow you to write this even more concisely

public void SomeOtherMethod()
{
   MyClass aObj = new MyClass();
   aObj.MyCustomEventName += (s,e) =>
   {
      //do what you need to
   };
}

Nice, isn't it? In this way defining an event is really fast. The only doubt I have is in terms of readability. Now clearly the example above is perfectly readable, but it is just a dummy example. But consider a method where you have to define lots of event handlers for different components. Then declaring all the handlers in the way above may soon get very smelly.
Note, beside others, one reason for applying Extract Method is for readability purposes. When reading over a method, your eyes should grasp the essence and you should be immediately able to tell what the method is about, although you may not know in detail what - for instance - the internally called method RetrieveExpiredItems(aProductBag) will do, but according to its name it will retrieve the expired items from an object called aProductBag and that may be enough because actually you may be interested in something completely different. On the other side, if you code everything in one method you may have substantial difficulties in finding the interesting piece because you're flooded with all the details you won't even care about.

This same principle may also apply to the "inline" definition of such event handlers using Lambda expressions. As long as they're simple "one-liners" it may not pose any major problem, but as soon as the code within these handlers starts to grow it may become problematic.

Time Machine backups to Windows shared network drive

noreply@blogger.com (Juri Strumpflohner) — Sun, 31 Jan 2010 09:00:00 +0000

As some of you may have already read I acquired a MacBook Pro about half a year ago and I love it ;) . Now one of the really cool things OS X provides is Time Machine backups.

It's so great because you simple don't have to do anything. If at all, you can specify the folders which should be excluded from the backup, but the rest is a completely automated process. Time Machine takes care of creating backups that contain the best possible coverage, starting from hourly, weekly to monthly backups, depending on the remaining space on your backup drive.

Now, Apple wouldn't be Apple if they wouldn't have a business model behind this thing.They call it Time Capsule and it is the device which is intented to be the backup drive on the other side of Time Machine. It is more than just a simple external (network capable) HD: it may also function as print server and router.

Anyway, I already bought an external HD about 1 1/2 years ago (I guess). Unfortunately it cannot be attached to the network, but just over USB. So for a while I used to do my backups by manually attaching my HD to the USB port of my MacBook and let Time Machine do its work. However this is cumbersome and you often forget to attach it regularly and moreover, the HD usually stands at some place in your apartment. You're not going to take it around and again, it's nerving to take your notebook there, attach it just for the purpose of doing backups.

So the idea came to my mind of sharing my HD over the network through another computer. I still have my very first notebook, an Acer which is about 6 years old now, I guess. I usually use it as some kind of server, also for sharing my non-network printer to the home wireless. So why shouldn't I also expose my HD?
A post on Superuser pointed me to some interesting pages (this one is another good one). I'm not going to repeat everything since you can get more informations on the linked pages. The main steps are the following:

Activate 'unsupported' network drives for backup

defaults write com.apple.systempreferences TMShowUnsupportedNetworkVolumes 1

Create a sparsebundle which will be used by TimeMachine for doing its job. This sparsebundle has to be created locally

sudo hdiutil create -size 320g -type SPARSEBUNDLE -nospotlight -volname "Backup of <computer_name>" -fs "Case-sensitive Journaled HFS+" -verbose ~/Desktop/<computer_name>_<mac address>.sparsebundle

Share the external HD on your Windows server (or notebook as in my case) and make sure you have the necessary user rights for writing/reading.
Mount the network drive and copy the created sparsebundle on it
Configure the network drive for backups by referencing it from within the Time Machine configuration

You have to pay attention that the hostname you indicate in the .sparsebundle name matches exactly your Mac's hostname. Spaces and strange characters may create problems.
Moreover I'd suggest to do the first backup directly over a wired network connection since the 1st backup may take quite a while.

I'm now using this backup mechanism for about three weeks and it works seamlessly. When my Mac is within the home wireless network it automatically connects to the shared backup drive and starts creating his hourly backups. Just great :)

HowTo: Use your iPhone as a remote control for presentations

noreply@blogger.com (Juri Strumpflohner) — Thu, 28 Jan 2010 14:09:00 +0000

My latest post is already a while back but I'm currently extremely busy. More posts will come in February. Today, I successfully presented my talk for the final exam of the "Technical Scientific Communication" course. It consisted of an approximately 10 minutes talk about a technical topic (preferably the current research topic). Using this occasion I have to say that iWorks's Keynote is just amazing. I've used MS PowerPoint, OpenOffice etc for a while, but when it comes to create professional looking presentations, none of them can cope with it.

But let's come back to the actual topic of this post. When doing such presentations, it is always quite uncomfortable if you don't have a remote pointer and you have to always use your touchpad or notebook's keyboard. It hinders you somehow in your freedom of movement during the presentation. But if you have an iPhone you actually have you're pointer already with you, without knowing ;) . Yesterday evening, Matthias pointed me to a really nice app for the iPhone provided by Logitech. It's called TouchMouse and consists of an iPhone app, freely available on the App Store and a small server as a back-end for the communication between your iPhone and Mac/PC. Yes, it also works for PCs (Windows).
However, the app isn't just made for the purpose of controlling presentations. What is does is basically to bring your notebook's touchpad to your iPhone.

So, as the figure shows, you have the left/center/right button and a couple of further configurations that let you customize the app. The best of all: it's totally free!

Source:
http://www.logitech.com/index.cfm/494/6367&hub=1&cl=us,en?bit=&osid=9

HowTo: Use globally defined resources in your ASPX code

noreply@blogger.com (Juri Strumpflohner) — Fri, 08 Jan 2010 07:42:00 +0000

When creating localized web applications using ASP.net you may often come across strings which are the same on many of your interface parts. Usually you probably use the VS functionality "Generate local resources" which creates you an appropriate resx file containing the keys of your ASP.net Page or UserControl. But take for instance the simple example of a "save button" having the text "Save". Using the "generate resources" approach will lead to a situation where the text "save" appears in many different resx files. This may render it particularly difficult to make changes afterwards, i.e. when your customer suddenly wants to have the text "save content" instead of "save" alone. It would therefore make perfectly sense to have this kind of text defined globally.

This can be done quite easily:

Add the special ASP.net folder "App_GlobalResources" to your ASP.net project
You can do this by right-clicking on the project and then choosing "Add / Add ASP.NET folder / App_GlobalResources".
Add a new resource file to the created folder
To achieve this, right-click on the App_GlobalResources folder you just created, then click "New Item" and choose "Resources file". Give it a meaningful name, i.e. "GlobalResources.resx".
Add a new entry for your "save" text
Add a new entry to the resource file with the key "Button_Save" and the value "Save".
Now open the ASPX code containing the definition of your button(s)
You can now set the localized text from the resource file as follows:
```
<asp:Button id="btnSubmit" runat="server" Text="<%$ Resources:GlobalResources, Button_Save %>"/>
```

Comments smell! Replace them with more expressive code.

noreply@blogger.com (Juri Strumpflohner) — Wed, 06 Jan 2010 16:53:00 +0000

As already pointed out in that post, here's another code example:

...
//300 = Italy
if(aCompany.NationId == 300)
{
   ...
}
...

The comment above the if clause is definitely a code smell. If you wouldn't have that and you come back three months after releasing the software in search for a bug, you probably don't remember what's the meaning of 300, right? Therefore, refactor it by writing more expressive code:

...
if(aCompany.NationId == Nation.TypeOf.Italy)
{
   ...
}
...

The comment is completely useless now. Every developer in the team will now understand the meaning of this code without any effort. Note, such code can lower the mean-time-to-repair (MTTR) significantly.

HowTo: Fade out div after some seconds using jQuery

noreply@blogger.com (Juri Strumpflohner) — Wed, 30 Dec 2009 16:15:00 +0000

Today I made a quick change to my blog. I don't know whether many of my readers noticed the possibility of expanding the reading area by clicking on the gray vertical bar which separates the left column with the post content.

Therefore, what I wanted to change was to automatically hide the left navigation bar after a certain amount of time and so to give maximum focus on the written content, which is, after all, the most important part :) .
Shouldn't be a problem with jQuery and so the first Google query brought me directly to StackOverflow (who wonders ;) ). The raised question there is exactly what I needed, I was however not really satisfied by the accepted answer. Its author suggests to use the jQuery's fadeOut method

$("#myDiv").fadeOut(5000);

This however does not cause a delay of 5 seconds but specifies the timespan of the fade-out process itself. Being not satisfied about the answer I went ahead in search of an alternative and came up with this solution, which btw is actually a workaround. What I did is to make use of the "fadeTo" method which allows takes two parameters:

The speed of the process of "fading to". One can indicate milliseconds as well as semantic names like "slow".
The percentage of opacity, where 1 = 100% opacity.

I specified it like

$("#sidebar-column").fadeTo(15000,1).fadeOut(1000);

So the process starts immediately and for 15 seconds it fades (an already 100% opaque container) to 100% opacity, i.e. nothing changes. This to simulate the delay. Then the fadeOut will start for a timespan of 1 second. Voilà. You have your delay. Now, of course you can find the "correct" solution, using other jQuery plugins which have been made just for the purpose of creating a delay (like pause(...) ?) etc.

The mentioned solution has some advantages which I'd not disregard:

it is a simple one-liner
you don't need any additional plugins

Here's my SO contribution.

Android SMS activity doesn't fill phone number

noreply@blogger.com (Juri Strumpflohner) — Sat, 26 Dec 2009 14:52:00 +0000

Today while fixing a bug for our current project we develop for the Android phone I found a strange behavior when trying to launch the phone's SMS sender activity. For those of you non-Android-devs, Android has the concept of Intents.

An intent is an abstract description of an operation to be performed. [...]
(from the Android docs)

This is a really nice mechanism. Basically you launch an Intent, specifying what you'd like to do and those activities out there which may be able to respond to your needs will answer. (a bit simplified of course ;) )

So in our code we launched the phones SMS sender activity by specifying the intent as

Intent smsIntent = new Intent(Intent.ACTION_VIEW, Uri.parse("tel:3330349"));
smsIntent.setType("vnd.android-dir/mms-sms");

startActivity(smsIntent);

The problem as you can see:

...the phone number that has been passed in the intent-uri is not displayed on the SMS activity as it should. I searched a bit around and well...there shouldn't be "tel:...." in the Uri but rather "smsto:...". Fair enough, although by specifying the type of the intent I'd expect to get it anyway. So what I did is to change the intent Uri to..

Intent smsIntent = new Intent(Intent.ACTION_VIEW, Uri.parse("smsto:3330349"));
smsIntent.setType("vnd.android-dir/mms-sms");

startActivity(smsIntent);

..expecting to get it to work now: nothing. Still the same result, the activity opens but there's no phone number displayed. So...?! *confused*
Well, I found that you basically have the following possibilities.

Just specify the Uri. Ok, it's enough, you have all of the needed information encoded in it, but again, additionally specifying the intent type shouldn't be a problem.
```
Intent smsIntent = new Intent(Intent.ACTION_VIEW, Uri.parse("smsto:3330349"));
//smsIntent.setType("vnd.android-dir/mms-sms");

startActivity(smsIntent);
```

Specify the phone number by adding it to the intent bundle data.

Intent smsIntent = new Intent(Intent.ACTION_VIEW);
smsIntent.putExtra("address", "3330349");
smsIntent.setType("vnd.android-dir/mms-sms");

startActivity(smsIntent);

Both will bring you the expected result

I understand, specifying the uri containing the "smsto" and the type is somehow redundant information, but anyway I wouldn't expect that it doesn't work at all.

Creating Test Suites with jUnit 4

noreply@blogger.com (Juri Strumpflohner) — Fri, 25 Dec 2009 09:48:00 +0000

A while back I've posted about how to enable the automatic (jUnit 3.8-style) creation of test suites in Eclipse. That was necessary for Eclipse 3.1.2 and previous. With Eclipse 3.2 and newer in combination with jUnit 4 there is no such wizard like with jUnit 3.8 which automatically creates you the test suite class, but you can use annotations for defining the jUnit 4 tests to run. So you basically create your test

public class MyJUnitTest{

   @Before
   public void setUp(){
      //do your setup stuff
   }

   @After
   public void tearDown(){
      //clean up
      //note setUp and tearDown can be named differently as you want
      //I just find it more clear to stick to this naming convention
   }

   @Test
   public void testSomething(){
      //the test
   }
}

...and then you define your test suite.

import org.somepackagename.someprog;
import org.junit.runners.Suite;
import org.junit.runners.Suite.SuiteClasses;

@RunWith( Suite.class )
@SuiteClasses( {MyJUnitTest.class} )
public class UnitTests {
}

Then you launch it like you would with any other normal unit test.

I like this grouping in test suites because in this way you go to your main package in your test project and just launch the tests you're interested (unit tests, integration tests...).

The power and simplicity of the Command pattern

noreply@blogger.com (Juri Strumpflohner) — Thu, 10 Dec 2009 09:15:00 +0000

Never thought of how to implement an "undo" function? Not that easy, huh? People in our architecture class today came up with quite creative solutions: two separate stacks storing operations, versioning of the object to go back etc... All quite complex. Well, I've thought about that already about a year ago, so it was quite easy for me and there you actually see how simple such a task becomes if you know the right pattern (I'll come to it immediately).

The key is actually to encapsulate the operation and the object the operation acts on. If you encapsulate that within an object you're already pretty much done. Every time you perform an operation you create such an object encapsulating that operation.

If you knew about it already...yes, it's the Command pattern :) . Now the interface above is the standard implementation, but adding undo is not a major difficulty. You can either add the method to the ICommand interface or create another abstract class/interface UndoableCommand using ICommand. Take for instance the operation "make bold" of a word within a document. Applying the Command pattern and adapting it for undo and redo functions is quite simple

For each concrete command you implement the interface. So an example implementation of such a BoldCommand could look like

public class BoldCommand implements ICommand{
   private Word aWord;

   public BoldCommand(Word aWord){
      this.aWord = aWord;
   }

   public void execute(){
      //call some appropriate object that knows how to perform
      //the action, i.e.
      aWord.setBold(true);   
   }

   public void undo(){
      //undoing is easy since we know here what we did previously and
      //we have the reference to the object we acted upon
      aWord.setBold(false);
   }

   public void redo(){
      execute();
   }
}

I guess this should look now pretty obvious to you. Of course this is just a simple code for demonstrating the idea. You need some more sophisticated structures that take care of these command objects. For the undo/redo you'd probably have some list that tracks all of these objects, removes old ones etc...
If you programmed already for the Eclipse platform, you probably came across the IAction interface and Action classes. Well that's one implementation of such a command pattern. They use it quite heavily there.

Now that you know the pattern, think about the solution you came up with previously (2 stacks, operations, undo operations etc..). Quite complicated :) I like this example because I think this example of the undo/redo functionality explains quite clearly the improvement of your code if you know the right - and obviously suitable - pattern.

MapView doesn't fire onLongClick event

noreply@blogger.com (Juri Strumpflohner) — Wed, 02 Dec 2009 22:39:00 +0000

Here's another curiosity I came across today while programming on my Android project. I was creating a MapView for displaying some interesting stuff on it.

Update: This post got a bit lengthy due to different problems that popped up while I was writing the post. So if you prefer to jump directly due to the final solution, feel free to do so.

Now there are different events the user may interact when having a map on the screen like just simple clicks or even moves when navigating on the map. So first of all I have my MapActivity class which again loads a MapView on it, defined in some layout xml file. So far so good. For reacting on click or move events I had to override the MapActivities "dispatchOnTouchEvent" method.

public class MyMapActivity extends MapActivity {
   ...
   @Override
   public void onCreate(...){
      super.onCreate(...);
      setContentView(R.layout.mymapviewlayout);

      this.mapView = (MapView)findViewById(R.id.myMapView);
      this.mapView.set....
      ...
      this.mapView.setClickable(true);
      ...
   }

   @Override
   public boolean dispatchTouchEvent(MotionEvent ev) {
      int actionType = ev.getAction();
      switch (actionType) {
         case MotionEvent.ACTION_MOVE:
       //react properly
              break;
      }

      return super.dispatchTouchEvent(ev);
   }
   ...
}

That worked pretty well. Now comes the strange behavior. I wanted to differentiate the action of a simple click (press down with immediate release) from a longer click (press down, hold a while and then release again). A fast search on the Android docs revealed the "setOnLongClickListener(OnLongClickListener)" method. Pretty nice, so I just needed to implement the listener an that's it? Actually that didn't work I adjusted my view s.t. it sets the necessary flags and implements the correct listeners...

public class MyMapActivity extends MapActivity {
   ...
   @Override
   public void onCreate(...){
      ...
      this.mapView.setClickable(true);
      this.mapView.setLongClickable(true);
      //direct listener implementation
      mapView.setOnLongClickListener(new OnLongClickListener() {
         public boolean onLongClick(View v) {
            //react
            return false;
         }
      });
      ...
   }

   ...
}

...however with no success. The event just didn't fire. I also tried to adapt the overridden dispatchTouchEvent method s.t. it forwards the event to the MapView like

@Override
   public boolean dispatchTouchEvent(MotionEvent ev) {
      int actionType = ev.getAction();
      switch (actionType) {
         case MotionEvent.ACTION_MOVE:
       //react properly
              break;
      }

      return this.mapView.dispatchTouchEvent(ev);
   }

..which would sound plausible, however with no success.

So the final solution I came up with was to add a GestureDetector to my MapActivity and delegate all touch events to that object. The according OnGestureListener implements a couple of event handlers, under which also the "onLongPress(...)" event handler. So I had to change my implementation to the following

public class MyMapActivity extends MapActivity implements OnGestureListener {
   ...
   private GestureDetector gestureDetector;

   @Override
   public void onCreate(...){
      super.onCreate(...);
      setContentView(R.layout.mymapviewlayout);

      this.gestureDetector = new GestureDetector(this);
      this.gestureDetector.setIsLongpressEnabled(true);

      this.mapView = (MapView)findViewById(R.id.myMapView);
      this.mapView.set....
      ...
      this.mapView.setClickable(true);
      ...
   }

   @Override
   public boolean dispatchTouchEvent(MotionEvent ev) {
      int actionType = ev.getAction();
      switch (actionType) {
         case MotionEvent.ACTION_MOVE:
       //react properly
              break;
      }

      return gestureDetector.onTouchEvent(ev);
   }
   ...

   //other methods of the OnGestureListener interface
   public void onLongPress(MotionEvent e) {
      ActivityUtils.showToast(this, "Pushed down", 3000);
   }
   ...
}

The result after doing a "long click" on the map:

That looks like it works :) . Don't ask me why it didn't work by just attaching the OnLongClickListener on the map and dispatching events to the MapView. It's now 11:40 PM and I think it's time to have a bit of sleep.

Update:
Indeed, it was late last night. Today morning when I launched my MapView the onLongClick worked, but everything else didn't work any more including move events click events etc. The reason is obvious: I forward everything to my GestureDetector wherefore the MapView will never get the events.
Due to a suggestion of Paul (see comments), I checked the inheritance hierarchy of the MapView and it inherits from ViewGroup. The LongClick event is defined on the level of the View object and for some reason the MapView doesn't react on it nor it lets you override the behavior.

So the final solution to the problem is to handle it on your own. What I did is to create my custom MapView which inherits from MapView. On that class I've overriden the onTouch event and made some kind of hack on it to achieve a long-touch event. The approach was basically to measure the time between the MotionEvent.ACTION_DOWN and the MotionEvent.ACTION_UP event.

public class MyMap extends MapView{
   ...

   public MyMapView(Context context, AttributeSet attrs) {
      super(context, attrs);
   }

   @Override
   public boolean onTouchEvent(MotionEvent ev) {
      if(ev.getAction() == MotionEvent.ACTION_DOWN){
         //record the start time
         startTime = ev.getEventTime();
      }else if(ev.getAction() == MotionEvent.ACTION_UP){
         //record the end time
         endTime = ev.getEventTime();
      }

      //verify
      if(endTime - startTime > 1000){
         //we have a 1000ms duration touch
         //propagate your own event
         return true; //notify that you handled this event (do not propagate)
      }
   }

}

What I left out here (since I don't want you to steal your own creativity ;) ) is to handle moves on the map which may also otherwise result in a long click. It's quite simple to fix that.

RT: Testing with VS2010 - A Bugs Life

noreply@blogger.com (Juri Strumpflohner) — Thu, 26 Nov 2009 19:00:00 +0000

I'm surely one who loves automated tests. Having them in place (with appropriate code coverage of course) and seeing the green bar or green check icons (depending on your IDE) just gives you the necessary peace for making changes to your application and for applying concepts like refactoring which otherwise is just as if you'd drive blindly (it may work, but it very much depends on your luck). And not just that, in my opinion writing unit tests makes you produce better, more loosely coupled code, 'cause otherwise testing would just be a nightmare. And this pushes you towards using best practices approaches like dependency injection, layering and so on. The only problem is that it is sometimes hard to motivate people to jump on board since they do not immediately recognize the value of automated testing. :(

I'm actually coming from the jUnit world but while diving recently into .Net development I got in touch with MS Tests, concepts like data-driven tests and the whole test-integration into MS's Visual Studio IDE. And I have to admit that I really like Microsoft's recent efforts to strive for best practices like MVC (or MVVM in WPF) and Unit testing.

Here I post a very nice presentation from a former work mate and colleague, Peter, hold on a user group. It's about the awesome integration of testing into the new VS2010 IDE. Enjoy.

Testing with VS2010 - A Bugs Life

View more presentations from Peter Gfader.

HowTo: Include JavaScript file from JavaScript code

noreply@blogger.com (Juri Strumpflohner) — Thu, 26 Nov 2009 07:45:00 +0000

Recently a colleague asked me on how to add a JavaScript file reference to an HTML document from within JavaScript code. It's actually quite easy. All you need is to create the appropriate element and attach it to the HTML document's dom structure on the appropriate position, i.e. the head element. The following JavaScript does the job.

function loadScript(src) {
   var script = document.createElement("script");
   script.type = "text/javascript";
   document.getElementsByTagName("head")[0].appendChild(script);
   script.src = src;
}

And then call it from within your JavaScript code with

loadScript('http://someurl.com/test.js');

Similarly you may want to attach a JavaScript function programmatically to the HTML body's onLoad event. This can be achieved with the following function

function addLoadEvent(func) {
   var old = window.onload;
   if (typeof window.onload != 'function') {
      window.onload = func;
   } else {
      window.onload = function() {
         old();
         func();
      }
   }
}

And then by calling it similarly as in the loadScript function

addLoadEvent(<someJavaScriptFunction>);

Implementing the onTouchEvent for the MapActivity

noreply@blogger.com (Juri Strumpflohner) — Tue, 24 Nov 2009 21:25:00 +0000

Android View classes expose an onTouchEvent(MotionEvent ev) method. As the name already suggests, by overriding this method you can handle touch events done by the user on the current view.

@Override public boolean onTouchEvent(MotionEvent event) {
   int action = event.getAction();
   switch (action) { 
      case (MotionEvent.ACTION_DOWN) : // Touch screen pressed
         break; 
      case (MotionEvent.ACTION_UP) : // Touch screen touch ended
         break; 
      case (MotionEvent.ACTION_MOVE) : // Contact has moved across screen
         break; 
      case (MotionEvent.ACTION_CANCEL) : // Touch event cancelled
         break;
   } 
   return super.onTouchEvent(event);

Now when you have a MapActivity you're tempted to do the same, however this won't work. The handler isn't being executed. I didn't find the exact reason for this behavior yet. Probably the reason is that the MapActivity doesn't automatically forward the event to the registered MapView or it just doesn't get notified about the event, since the motion event actually occurs on the MapView itself and not its parent, the MapActivity.

What can be done instead is to either register the event directly on the MapView

mapView.setOnTouchListener(new OnTouchListener() {
  
 public boolean onTouch(View v, MotionEvent event) {
  // TODO Auto-generated method stub
  return false;
 }
});

..or to override the MapActivity's dispatchTouchEvent(MotionEvent). What has to be considered however is to appropriately forward the event in this case. For overriding event handlers, the Android API suggests to

Returns: True if the event was handled, false otherwise.

Now if you catch some touch event and you do your according processing, then you have to be aware that if you return true, the onTouch event won't be propagated, with the side-effect that the user won't be able to move on the map (or better "move the map on the screen"). Therefore, while in other cases you would return true after handling the event, in this specific case of the MapActivity you may consider not returning (or returning false) and just propagating the event by invoking super.dispatchTouchEvent(...).

Visual Studio intellisense not working properly

noreply@blogger.com (Juri Strumpflohner) — Fri, 20 Nov 2009 12:40:00 +0000

Recently a work mate pointed me out that my Visual Studio Intellisense seemed to not work correctly. When writing...

this.Page.GetPostBackClientEvent(

...the info with the remaining parameters should appear automatically which was not the case on my machine. I actually hadn't noticed that before since you can just press CTRL+SHIFT+SPACE within the method call and you will get the parameter info.

Nevertheless I tried to figure out the reason and I was already fearing that some 3rd-party VS add-in may have broken my Intellisense and that I'd have to invoke "devenv.exe /resetuserdata" (which however is a pain). Then I found this setting inside the VS options dialog:

From the "grayed-out" checkbox I assume that some configuration was really damaged since otherwise it should either be in the disabled or enabled state. Anyway, ticking the checkbox in again solved my issue :)

HowTo: Get the selected list index on Android Activity from context menu event

noreply@blogger.com (Juri Strumpflohner) — Wed, 11 Nov 2009 08:08:00 +0000

Consider the situation where you have an Activity displaying a list of items. You have a context menu and a normal option menu. When pressing the option menu button, you can get the selected item and index as follows:

//the selected index
int index = listView.getSelectedItemPosition();

//selected item
Object selObj = listView.getSelectedItem();

It is as simple as that. If you registered a context menu on the list, then the situation changes slightly and the "getSelectedItemPosition()" will fail. Instead, you have to do something like this

AdapterView.AdapterContextMenuInfo menuInfo;
menuInfo = (AdapterView.AdapterContextMenuInfo)item.getMenuInfo();
int index = menuInfo.position;