Think Bohemian » custom

Custom Error Pages With Rails and Authlogic

Richard Schneeman — Sat, 16 Jan 2010 18:27:36 +0000

Everyone wants their site to be pretty, even when its crashing horribly. So check out these two resources:

Custom dynamic error pages in Ruby on Rails

Authlogic and rescue_from ActionController::RoutingError

Enjoy, and happy erroring!

Custom jQuery UI Rails Button Form Helper

Richard Schneeman — Tue, 13 Oct 2009 02:22:14 +0000

Today I got a little bored with my standard rails buttons

Not bad…but could use a little pizazz. So I decided to take a crack at jQuery UI. A great javascript and style framework that promised to be easy to use and provides theme-able styles.

Once you’ve got jQuery UI integrated nicely into your rails project (note i had to change my url paths in the stylesheet), you can style your submit button easily by adding some classes just like this:

<%= f.submit "Generate Secure Email", :class => "ui-corner-all ui-state-default " %>

Though, this isn’t 100% what I was looking for, it’s a good start. When we hover over the button, it changes color, and when we press it, our rails form submits. Though you’ll notice that the cursor doesn’t change when you hover over the button and we haven’t put an icon in it yet. To get the correct behavior i hard coded in a button:

This solved the button styling and behavior, but we still don’t have our icon. After browsing the inter webs i found a nice page of jQuery-UI button demos and I managed to modify my code to include a nice icon:

Perfect! It works like a dream, but it’s not very rails-esq. Lets turn this into a reusable chunk of code by making a helper method to extend form builder. In app/helpers/application_helper.rb

class ActionView::Helpers::FormBuilder
    def button_with_icon(text , icon)
     object_name = self.object_name
     return ""
    end
end

Now In my View I can put:

<%=  f.button_with_icon("Generate Secure Email", "mail-closed") %>

And I get my perfectly formatted button complete with an Icon!

Note:

<% form_for :person, @person, :url => { :action => "create" } do |f| %>
    <%= f.object_name %>
<% end %>

will print out “person”, thats why in the helper we call self.object_name on the form_builder class. Pretty cool huh?

OnClick Rails Helper for Disqus Style Input Fields

Richard Schneeman — Sun, 11 Oct 2009 22:54:25 +0000

If you haven’t seen comments by Disqus, you should probably check them out. If you don’t care about having programmatic access (as of this post) then its the simplest way of adding a comment system to your website. While their comment widget is pretty neat, i wanted to have the same effects on my input fields that they use, but with all the control and “flexibility” that rails gives me.

I wanted an input that had the default text grayed out, when you click on it and start typing your text becomes black, and if you delete your text and click outside of the area, the input goes back to its default value. And back to gray. To accomplish this task, i wrote my own custom helper /app/helpers/application_helper.rb:

def default_text_field(name, value)

text_field(name, :value => value,  :class => "gray-input", :onfocus => "if (this.value=='#{value}') this.value = '';this.style.color = 'black';", :onblur => "if (this.value=='') {this.value = '#{value}';this.style.color = '';}" )

end

So now when i use it in a view like this:

<%= f.default_text_field :website, "Example.com" %>

My view acts like this:

The CSS needed for this to work properly is extremely simple:

.gray-input {
color: #7a7a7a;
}

Of course you can use another color if you wish. Hope you enjoyed this little tip, and I hope all your users fall all over themselves at the awesomeness of your sweet new inputs. Good luck, and happy coding.