Sun 1 Nov 2009

GWT 2.0: UiHandler

Posted by nola under gwt, java
Comments Off

I was pretty excited to find UiHandler, it makes the organization of code so much cleaner!

I am putting in the full code for both, so you can see the beauty for yourself! Pay attention to the comments where i put the gotchas that got me at first! :)
Before:

PLAIN TEXT
JAVA:
  1. package com.rubygeek.sandbox.client;
  2.  
  3. import java.util.ArrayList;
  4.  
  5. import com.google.gwt.core.client.GWT;
  6. import com.google.gwt.event.dom.client.ClickEvent;
  7. import com.google.gwt.event.dom.client.ClickHandler;
  8. import com.google.gwt.uibinder.client.UiBinder;
  9. import com.google.gwt.uibinder.client.UiField;
  10. import com.google.gwt.user.client.Window;
  11. import com.google.gwt.user.client.ui.Button;
  12. import com.google.gwt.user.client.ui.CheckBox;
  13. import com.google.gwt.user.client.ui.Composite;
  14. import com.google.gwt.user.client.ui.Widget;
  15.  
  16.  
  17. public class LanguageList extends Composite {
  18.  
  19.   interface MyUiBinder extends UiBinder<Widget, LanguageList> {}
  20.   private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);
  21.  
  22.   @UiField CheckBox rubyCheck;
  23.   @UiField CheckBox pythonCheck;
  24.   @UiField CheckBox javaCheck;
  25.   @UiField CheckBox phpCheck;
  26.   @UiField Button button;
  27.  
  28.   public LanguageList() {
  29. // bind XML file of same name of this class to this class
  30. initWidget(uiBinder.createAndBindUi(this));
  31.  
  32. final ArrayList<CheckBox> boxes = new ArrayList<CheckBox>();
  33. boxes.add(rubyCheck);
  34. boxes.add(pythonCheck);
  35. boxes.add(javaCheck);
  36. boxes.add(phpCheck);
  37.  
  38. // add button and handler to alert the values of checkboxes
  39. button.addClickHandler(new ClickHandler() {
  40. public void onClick(ClickEvent event) {
  41. String output = "";
  42. for(CheckBox box : boxes) {
  43. if (box.getValue()) {
  44. output += box.getFormValue() + ", ";
  45. }
  46. }
  47. Window.alert("You checked: "+ output);
  48. }
  49. });
  50.  
  51.   }
  52. }

After:

PLAIN TEXT
JAVA:
  1. package com.rubygeek.sandbox.client;
  2.  
  3. import java.util.ArrayList;
  4.  
  5. import com.google.gwt.core.client.GWT;
  6. import com.google.gwt.event.dom.client.ClickEvent;
  7. import com.google.gwt.uibinder.client.UiBinder;
  8. import com.google.gwt.uibinder.client.UiField;
  9. import com.google.gwt.uibinder.client.UiHandler;
  10. import com.google.gwt.user.client.Window;
  11. import com.google.gwt.user.client.ui.CheckBox;
  12. import com.google.gwt.user.client.ui.Composite;
  13. import com.google.gwt.user.client.ui.Widget;
  14.  
  15. public class LanguageList extends Composite {
  16.  
  17.   interface MyUiBinder extends UiBinder<Widget, LanguageList> {}
  18.   private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);
  19.  
  20.   final ArrayList<CheckBox> boxes = new ArrayList<CheckBox>();
  21.  
  22.   @UiField CheckBox rubyCheck;
  23.   @UiField CheckBox pythonCheck;
  24.   @UiField CheckBox javaCheck;
  25.   @UiField CheckBox phpCheck;
  26.  
  27.   // add ClickEvent handler to button with ui:field="languageButton" in the UiBinder code    
  28.   // !!! note no ; at end of this annotation, and the name of function does not matter, its the annotation that ties it to the
  29.   // body of the method, also this does not go inside the class :) (i spend 40 mins figuring that out...)
  30.   @UiHandler("languageButton")
  31.   void doClick(ClickEvent event) {
  32.       String output = "";
  33.       for(CheckBox box : boxes) {
  34.           if (box.getValue()) {
  35.               output += box.getFormValue() + ", ";
  36.           }
  37.       }
  38.       Window.alert("You checked: "+ output);
  39.  }
  40.  
  41.   public LanguageList() {
  42.       // bind XML file of same name of this class to this class
  43.       initWidget(uiBinder.createAndBindUi(this));
  44.       
  45.       boxes.add(rubyCheck);
  46.       boxes.add(pythonCheck);
  47.       boxes.add(javaCheck);
  48.       boxes.add(phpCheck);
  49.   }
  50. }

See the constructure is further slimmed down!

 

Sat 31 Oct 2009

GWT 2.0: UiBinder, first look at simple example

Posted by nola under gwt, java, Javascript/AJAX, open source
[6] Comments

Note: as of right now, you can only get this feature in Trunk. see here for how to download the source and use it More Info on release

One of the great new features coming out of GWT 2.0 is UiBinder, a way to make a declarative UI without making tons of objects. Reminding you of swing? Yeah, I didn't sign up to be a Swing developer. I was sort of disturbed when I started doing gwt and was writing tons of java to just do simple HTML things.

Full Source

PLAIN TEXT
JAVA:
  1. CheckBox rubyCheck = new CheckBox("Ruby");
  2. rubyCheck.setFormValue("ruby");
  3. boxes.add(rubyCheck);
  4.  
  5. CheckBox pythonCheck = new CheckBox("Python");
  6. pythonCheck.setFormValue("python");
  7. boxes.add(pythonCheck);
  8.  
  9. CheckBox javaCheck = new CheckBox("Java");
  10. javaCheck.setFormValue("java");
  11. boxes.add(javaCheck);
  12.  
  13. CheckBox phpCheck = new CheckBox("PHP");
  14. phpCheck.setFormValue("php");
  15. boxes.add(phpCheck);
  16.  
  17. // set up panel
  18. Panel panel = new VerticalPanel();
  19. panel.add(new Label("Choose a language:"));

Compare to the UiBinder code:

PLAIN TEXT
XML:
  1. <ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
  2.     xmlns:g='urn:import:com.google.gwt.user.client.ui'>
  3.     <g:VerticalPanel>
  4.       <g:Label>Choose a language:</g:Label>
  5.       <g:CheckBox ui:field="rubyCheck" formValue="ruby">Ruby</g:CheckBox>
  6.       <g:CheckBox ui:field="pythonCheck" formValue="python">Python</g:CheckBox>
  7.       <g:CheckBox ui:field="javaCheck" formValue="java">Java</g:CheckBox>
  8.       <g:CheckBox ui:field="phpCheck" formValue="php">PHP</g:CheckBox>
  9.       <g:Button ui:field="button">Submit</g:Button>
  10.     </g:VerticalPanel>
  11. </ui:UiBinder>

It is somewhat like HTML, each item with attribute "ui:field=" is the reference to the object that gets created in Java. Here's the Java code that uses this:

Full Source

PLAIN TEXT
JAVA:
  1. public class LanguageList extends Composite {
  2.  
  3.   interface MyUiBinder extends UiBinder<Widget, LanguageList> {}
  4.   private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);
  5.  
  6.   @UiField CheckBox rubyCheck;
  7.   @UiField CheckBox pythonCheck;
  8.   @UiField CheckBox javaCheck;
  9.   @UiField CheckBox phpCheck;
  10.   @UiField Button button;
  11.  
  12.   public LanguageList() {
  13.       // bind XML file of same name of this class to this class
  14.       initWidget(uiBinder.createAndBindUi(this));
  15.       
  16.       final ArrayList<CheckBox> boxes = new ArrayList<CheckBox>();
  17.       boxes.add(rubyCheck);
  18.       boxes.add(pythonCheck);
  19.       boxes.add(javaCheck);
  20.       boxes.add(phpCheck);
  21.   }

We still have to add them to the Array (which is use to display checked results) but doesn't that look so much better? And you are able to add the values of the checkboxes to the xml too.

When using UiBinder, make sure you add it as inherits to the xml for the module (i forgot at first and had errors with gwt trying to find UiBinder!)

I didn't do exactly one-to-one comparison between UiBinder and not, but i do have two complete gwt apps you can look at. I find it really helpful when learning something to look at complete apps rather than just snippits of code.

There is some documentation on Ui:Binder on Google Code, but at first I found it hard to follow since it doesn't say what files each piece goes in, it took me awhile to figure it out. Maybe its just me though. :)

Before UiBinder
After Ui Binder

Anyways, just a quick example that might help some people out there. I want to explore more about patterns in GWT and I'll write them up here.

 

Sat 31 Oct 2009

GWT: Using trunk

Posted by nola under Fun, gwt, Uncategorized
Comments Off

Lately, I have been fascinated with Google Web Toolkit as of late. What you say, you love ruby but doing java?!!? My ruby friends will probably smack me but really i love all languages. The widgets and rpc stuff, that is pretty cool as well as learning how to do MVP. There are some new features in trunk that will be released "this fall" but I don't want to wait that long, so last night i set about to checkout and compile trunk and try it out!

1. I installed the latest version of eclipse Galileo, with the Google plugin

http://code.google.com/eclipse/

2. Checkout the source code

http://code.google.com/webtoolkit/makinggwtbetter.html#workingoncode

Make sure you have ant installed. It takes awhile, i think maybe 20 mins or so on my macbook.

3. Setup the API directory in the Preferences for GWT
It took a while (and many searches) of messing around to figure out how to switch to the trunk version of the API.

Go to Eclipse > Preferences. Find the Google Web Toolkit on the left. It has an interface to add/remove APIs. Click add, add the path like so:
~/gwt/trunk/build/lib
I named it "trunk"

4. Create project
Create a new Web Application Project, select "trunk" as the version of API. And now you are on your way!

Once i've done a little more with it, I'll write about some of the new features that are really awesome.

 

Sun 20 Sep 2009

I like Tomatos. I like time.

Posted by nola under life, time management
1 Comment

In my constant battle to get stuff done and feel good about what I did, I am finding the Pomodoro Method very handy.

Basically you set a timer for 25 mins, work unhindered for that time, then take a 5 minute break. Repeat 3 more times, then take a 15-20 min break. This has helped me for a few reasons

  • If my task is BORING.. I procrastinate, go read facebook, email a friend. If I can tell myself, ok 25 mins of this then usually I get into the swing of it and get it done!
  • TOO MANY EMAILS! ... I could sit and watch my inbox fill up before my eyes. Usually, any email can wait at most 25 mins to be read or responded to. Using my break time to glance over email has improved my inbox organization. Knowing i have just 5 mins to sort through the mails that have arrived makes me choose what is most important
  • I use http://www.tomatoist.comto keep track of my timer. It seems to work the best. I like looking at the list for today and seeing "oh wow, I did 7 pomodoros!"
  • I feel good, even when I don't complete the task, it makes me feel good to know I spend some uninterrupted time on that task. I am under alot of pressure from various fronts, and feeling good is something that keeps me going.

I have used other time keeping things, like Awake for mac. Timers on my android. Some people keep a list of tasks and how many pomodoros they believe that task will need. Reading the Pomodoro Method has alot of good tips!

Post in the comments if you have tried this sort of thing before!

Edit: Found a mac app that is cool and integrate with twitter! http://pomodoro.ugolandini.com/

 

Sun 13 Sep 2009

WindyCityRails2009 was a blast!!

Posted by nola under devchix, Fun, Ruby, Ruby On Rails
Comments Off

Even though I don't do ruby at work, I do it for fun on weekends. I paid for my own self to go to the WindyCityRails conference and tutorial on Cucumber, RSpec Testing. It was well worth the money!! Not many things can get me to go up to Chicago early in the morning and on a weekend!

I went to a 3 hour tutorial class "Behaviour Driven Rails with RSpec and Cucumber" ... in my limited time I can spent with I've had a hard time getting my head around cucumber. I did rspec alot a few years ago, so thats a piece of cake. David Chelimsky and Corey Haines. 4 days before the conference, they sent an email to attendees of the tutorial with a list of resources to read and libraries to install. I worked all week on watching railscasts.com videos on cucumber, factories, testing. I always like to try things out myself first, then I am familiar with it when I go "to class" :) Dave and Corey did the class pair programming style..which was totally fascinating. There was one laptop, two wireless mice and one wireless keyboard. Dave typed on the laptop keyboard and Corey typed on the external keyboard. One would talk and explain things while the other typed. They took turns. It was really awesome. After watching them program, then they told us to split up in pairs and do the same thing for another scenario. I was sitting between two people so I kinda bounced between them. The one on my left didn't have the same version of rails, so he typed on my keyboard and we took turns. It was awesome, I had not really done pair programming quite like that before. They bounced between cucumber tests and rspec tests. I wish I could have recorded video and played it back in slow motion!

The regular talks:

Better Ruby through Functional Programming
Dean Wampler, Object Mentor, Inc.

I started to learn haskell once.. bought the O'Reilly book (which is excellent with little exercises)... but thats as far as I got with functional programming. This talk was interesting with code samples of ruby. We were challenged to learn a functional programming language. He mentioned others like scala, erlang ... hmm what to choose!

Super-easy PDF Generation with Prawn and Prawnto
John McCaffrey, Pathfinder Development

I have not had to make PDFs with ruby yet...but now I know there are some great libraries. Cool part of this is John was making a PDF of a ruby app, pulling in twitters happening at the conference and using Googles graphs APIs to make pretty graphs! I saw alot of people saying "I didn't know that Google had graph APIs!!!" :)

“Comics” Is Hard: On Domains and Databases
Ben Scofield, Viget Labs

When the talk started Ben asked for a show of hands of who reads comics? I meekly raised my hand. My husband is a comic book fan and I read them on occasion. I sat at his table for lunch and he asked me about it. I was surprised he saw my hand, iwas sitting near the back! This talk didn't have much code, but talked about the number of attributes that comic books have (title, issue, theme, publisher, etc) and how hard it was to model in a relational database. He talked about couch db, mongo ... i haven't tried any of those, but I might now that I know it can be the best choice for some data sets.

Rails 3 Update
Yehuda Katz, Engine Yard

Yehuda talked about whats coming up in Rails3. But by this time I was kinda brain dead and was trying to make plans for dinner!

Devchix!!!
A few of the local chix came to the after party and hung out. There was a few at the conference I had not met yet and a few I invited to join! It was awesome. It was so fun. I caught up some of my ruby buddies I hadn't seen in awhile and made some new friends. I was sad to see it end...

 

Thu 10 Sep 2009

Cool Toys: GMail

Posted by nola under cool toys
1 Comment

I haven't had a cool toys post about something web related in awhile. I got the idea for this kind post from a friend whom I told him something cool, and he said "HEY you need to share your cool toys!"

It used to be it was cool to have @my-awesome-website.com email addresses. Having your own domain (I'm not a business owner, so I am not considering the cases where you want a certain domain for your email). Ahh, the days of squirelmail and thunderbird. Now you can have gmail on your domain, so that makes gmail even more cool. To have the power of gmail and the cool factor of having your own domain for email. I finally got my mom to switch to gmail from hotmail. I shuddered whenever she was with me and borrowed my laptop, went to hotmail.com ... yikes!!

Here are some cool toys I've found in gmail labs! Labs? wuts that? Go to Settings, click on Labs. Tons of toys.

Multiple Inboxes
I admit, I was resistant to labels for a long time. Where are my folders!?? why is this mail always there? I added labels sometimes, but I never archived. It was still there in my inbox. I always had thousands of emails in my inbox. I used to think that archive was some "compression" thing you could do to zip your mail on googles server. I started reading Getting Things Done book and one way to use that system is with folders in your email. I email myself a task, add a label and archive it. I get an email from someone I need to act on, add the action label. But, then I would have to click on my tasks label on the left, page loads, then I see all my tasks. When I found out about multiple inboxes, I found I was able to divide my inbox screen in two sections: actions, inbox. Now I have my actions visible at all times and I can easily click and remove action label and archive when its complete. This is what really has helped using email as my task list useful. At work I even have a third inbox showing my starred items. I star things I want to read, but don't have time at the moment.

Tip: Send and email to yourself at yourname+action@gmail.com and then you can filter all incoming emails that come to that address to automatically apply a label! It still comes to you as normal. I use this alot.

Chat on the right
I like my chat on the right, so I can have my label on the left. You can enable this in labs too.

Send & Archive
Does both actions at once! Helps keep the inbox cleared out. Though I sometimes have problems with this while on the train, apparently it takes a few more bits of power for teh internet tubes to do do these two actions at same time.

Title Tweeks
Shows the inbox count in the title bar first, easier to see when you have lots of tabs open.

Google Calendar Gadget
Shows your calendar on the left side under labels. Nice to see what is coming up next.


Google Docs Gadget
I dont often use this actually. I should, I'm always typing in docs.google.com in the browser. I do use it to get to a recent document I created.


Gmail offline
I used this before I had an aircard. It was nice to compose emails offline, then send then when i got net access.

I think that's about it!! And the other awesome thing about gmail is that it is super cool on android...but thats another blog post!

 

Tue 8 Sep 2009

How to get better at programming?

Posted by nola under android, devchix, java, open source
[2] Comments

Sometime ago a co-worker asked me what my github name was. I had forgotten..I hadn't used it in so long! He was surprised that I didn't have any open source code out there! I said, umm..i haven't written anything I think someone would want!

I tend to start projects, work a bit on them and leave them. I find something new and exciting. I get busy with school, work, and life. But I really want to make something that I can release as open source and work with people. At work, I am on a team of developers and its nice, when I am stuck or not sure if this thing is good idea, I can ask. In previous jobs, I was mostly the sole developer, or at least only one on my project.

How do I get better at programming? I've been thinking about this alot as I am trying to learn java (I have the syntax pretty well but there is more to a language than syntax). Well, its practice! practice and practice. Having someone review your code and get better because of it. I want to get better at Java. I want to make an android app. So I finally started one .. with someone!

I am part of this great group of ladies in DevChix. A group me and 3 others started sometime ago. I had the idea (and this has always been in the back of my mind when I started DevChix) to start a project with someone and commit to 2-4 hours a week. I posted to the list, found someone with some experience in android and also the same desires as me. We started a really simple app (a todo list, how original!) but its a start. I threw something together which was really a collection of all my started and not finished android apps rolled into one. I had listing of tasks, add tasks didn't work quite right. I uploaded what I had and Jessica checked it out and made it work. There is a long way to go ... but... hey we started it!

Our rough design:
http://wiki.devchix.com/index.php?title=Android_Project:_Daily_ToDo_List

Our project:
http://code.google.com/p/devchix/source/browse/

 

Sun 16 Aug 2009

Cool Toys – LED Art Kit

Posted by nola under electronics
Comments Off

A bunch of guys at work started talking about electronics and I never had opportunity to ever do anything with electronics. It seems geeky enough right? I've been programming something since i was 13, why not? So not knowing anything, I looked for something Cool.

I Found the LED Art Kit at MakerShed.com which was designed by BlinkyBug.com. It was really easy! I took it over to my father in laws since I read it "might" need soldering (never did that either!) .. it turned out to not need soldering after all.

I made my first YouTube video of it in action, best viewed in a dark room!

At first, the lights seemed really round:

From Cool Toys

Then reading the instructions, it said to drip hot glue on the LEDs to distort the light.

From Cool Toys

Then we got something like this!! Cool Beans!

From Cool Toys

Not too heavy in the electronics part, but it was a start. I ordered 3 other kits that do require soldering. I will post those .. if I can do it!

 

Thu 2 Jul 2009

Book Review: Computer Programming for Kids and Other Begininners

Posted by nola under book review, python
Comments Off

I got a copy of Computer Programming for Kids and other Beginners for review, I was interested because I have always thought that someday I would like to write a programming book for kids -- I would have given my right arm to have this book as a kid! Here are some things I have always considered and how this book taught them:

How to get "out of the dos window" ?
Whenever my husband sees me typing at the console, he calls it the "dos window!" and he thinks we could move past that! I explain that you can't point and click your way through life. But, visual is the way people think of UI's now and it makes the program seem "real" if it has a popup box rather than a prompt on the console. Right off the bat, this book starts out introducing EasyGUI. one example of usage is

user_response = easygui.msgbox("Hello there!")

Nice huh? easy and straight forward. I think a new programmer seeing progress like this is pretty cool and probably very encouraging!

Looping
Whenever I have tried to teach looping, i have started out with arrays and indexes. Starting from 0 to "count" has always been confusing. This book uses ranges to loop. Starts at one and keeps it simple. Great idea!

Game
There is a chapter on PyGame and has a simple ski game. Reading through the code in the book gives you an idea of what a game is like and it annotates the sections of code to help you follow. Putting this in the middle of the starting section is cool, it keeps the reader from being all about syntax and seeing real code help them keep the end goal in mind.

More Syntax
The book continues with functions, objects, modules ... but then another game chapter. This goes through some simple examples of graphics. Its pretty good I think, i think its easy for beginners to look sight of what they are making...syntax really isn't all that fun. But i think this book is going to keep someone interested.

More on GUI
PyCard is another GUI library to help. I haven't heard of this, but it looks pretty cool. Looks pretty easy to use.

String Formatting and File IO
This is something that is always at the beginning of a book. How interesting that it is last. I think because its not very interesting! Really how interesting is it to format a number. This chapter ends with a hangman game where the words are stored in files. Thats cool, something useful with files.

Infinity and Beyond!
The book ends with a few chapters to inspire the new programmer, computer simulations and hints on where to go next.

Overall an excellent book to inspire and keep a new programmer interested. Young and old alike. This book has fun stuff and tools to make it easy to learn (PyGame and PyCard). I'm actually wanting to go try some of this now...

 

Thu 18 Jun 2009

Book Review(so far): The RSpec Book

Posted by nola under book review, Ruby, Testing
Comments Off

This book is still in beta, but so far... I love it!

Chapter 1 is a very brief overview of RSpec and Cucumber and in Chapter 2 you are shown some examples. This is Real Code That Works! You can type it in and run. That is awesome, I was so excited last night that I almost couldn't stop and go to sleep (Doc tells me to get more sleep. BAH!). I've done RSpec on a fairly large project before, a few years ago. I had seen some presentation at the Chirb meetings about some kind of testing involving Stories and Scenarios. It was interesting then... I just wasn't sure how you can translate that into code. Now I see, it looks like this method has matured to the point where it is viable. Cucumber is only version 0.3.11 at this time but hey! Its cool, its tight, its gonna take off!

Chapter 3 - Starting off with a game example! WAY TO GO! Nothing more uninteresting than Yet Another Bank Account or Blog example. This is totally awesome. Its a very conversational at first, as you are learning how to apply the "Story" concept to the need. Once the planning is out of the way.... its time to code!

Chapter 4 - Cucumber, Writing steps to the stories

Chapter 5 - RSpec, writing rspec tests

Its great to see code that you can type in an run and its kinda fun, it a game! what isn't fun about that! Great book so far Dave Chelimsky, Dave Astels, Zach Dennis, Aslak Hellesoy, Bryan Helmkamp and Dan North. Right on! Looking forward to the rest :)

 

« Previous Page — Next Page »