GUI Programming

[iamthwee]

Hi Guys,

So this thread is going to be a tutorial on cross platform GUI programming the easy way. In this tutorial I'll be exploring all Operating systems, mainly, windows 7, mac os x and the most popular linux distro at the moment (Ubuntu).

However, I won't be using the dotnet framework or java because I don't believe in these frameworks and hopefully at some point their demise will be realised.

Also, I won't be writing the code natively in cocoa, wxwidgets, win32... Why because they suck, not only are they difficult to use, they require a different toolset for different operating systems.

The holy grail of GUI programming, to me is one bit of code that works on all operating systems, the syntax is simple to use, it doesn't have any bloated frameworks and most importantly the widgets, buttons, combo boxes need to look native.

Great, I all hear you say? Well what is this magic language you speak of?

Well it is called shoes.

So without further ado let's get started.

[ddanbe]

Currently, in my spare moments, I'm taking a walk through this
I must admit I'm a little bit more impressed.
It reminds me of an older programming language I loved a lot: LOGO
It used(among other things) turtle graphics to teach very young childeren the basics of programming. Python still can do that, look at this snip.
I think shoes could in a way serve the same purpose.

All I see for the moment is some juggling with UI elements. Not unimportant but where are the loop and decision constructs? What about file access?
Maybe it is there and I haven't dug deep enough?

[iamthwee]

Thanks ddanbe, people seem to fob something off, usually without a trial, as I guess what has happened when I first posted the link. After actually trialing something our opinions can change.

All I see for the moment is some juggling with UI elements. Not unimportant but where are the loop and decision constructs? What about file access?

Don't worry the answers are all coming, but I'm going to go through this comprehensively for everyone on all flavours of operating systems.

What about file access?

Yes it has that too.

[iamthwee]

OK, so let's make a few important assertions.

For windows operating systems you will want to download shoes 3 for windows and not shoes 3.2.

http://shoesrb.com/downloads/

Why, well two reasons, I think 3.2 uses jruby and eclipses standard GUI toolkit, which tries to get a native look and feel but fails. Shoes 3 however, the creator's original, works natively.

Simply download the application and click on the manual. There you can browse sample snippets ranging from file access to button, to color pickers.

Proof of concept, here is a screenshot of an application I threw together in windows 7.

It will however, be the last one I use for windows because I don't personally like windows. To create a double clickable app simply use the package manager and create a .shy file. This will allow you to double click on your application and run it.

As you can see the application looks gorgeous native.

[iamthwee]

Ubuntu linux install

So as expected the ubuntu linux install is a little more trickier but nothing we can't handle.

Simply choose your version, 64bit or 32bit and download the file.

Now the tricky part.

You will get a file called 'shoes-3.2.20-gt2-x86_64.install'

We need to make it executable.

So copy this file to your desktop.

1. Open a terminal window ctrl + alt +t
2. Type in cd Desktop
3. Type in sudo chmod +x *.install
4. Type in your password once prompted
5. Type in ./*.install

And you should have installed shoes. Finally, do a reboot and in your search menu you should see shoes.

Simply click the icon and you can use it the same as you would in windows.

Here is a sample application screenshot of a simple password generator app I threw together.

The code is as follows:

Shoes.app(title: "Password Assistant",
   width: 320, height: 380, resizable: true) do

    @but = button "Generate"



    stack(margin: 10) do
      flow do


       para "Select Password Strength:",:font => "Open Sans", :size => 11, :stroke => "#777", :weight => "heavy"
        list_box items: ["Strong", "Medium", "Weak"],
        choose: "types" do |list|
         @pass.text = list.text
       end
        @pass = para




      end
    end
    stack(margin: 10) do



      @note =edit_box :width => 300, :height =>200, :size => 15, :stroke => "#333", :weight => "ultralight" 

    @but.click {

      if @pass.text == "Strong"

        @note.text = random_string(32)

    elsif @pass.text == "Medium"
       @note.text = random_string(16)

    else
       @note.text = random_string(8)
    end

    }
  end

  def random_string(length=10)
    chars = 'abcdefghjkmnpqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ0123456789'
    password = ''
    length.times { password << chars[rand(chars.size)] }
    password
  end
end

[iamthwee]

Installation in Mac OS X.

Again, couldn't be simpler, download your version and double click the dmg.

Then to run your .rb app simply drag the file into the shoes icon in your dock.

I've noticed that there is no option to create a shy file in Mac os Yeosamite. So what I've found helpful is to right click on the rb file, choose get info and make sure you choose open with shoes.

[iamthwee]

In a tongue and cheek homage to java and dotnet I have created an animated bitmap/jpg app.

The code is as follows:

Shoes.app do
    background "#fff"
   s = stack width: 200, height: 500, margin: 10 do
        @yo= image "1.png"
        a=1
        animate(1) do |frame|
             a = a+1
             if a % 2 == 0
                s.clear { @yo= image "2.png" }
             else
                s.clear { @yo = image "1.png" }
             end
         end
     end
 end

The point is, look how clean the syntax is and how good it looks natively, the button and dropdown boxes render natively, examples to follow.

[iamthwee]

Before we start looking at stacks and flow and positioning, which, to be frank has clean examples on their tutorial page, I am first going to tell you what is the best IDE to program shoes in - sublime

Well, this is my personal biased opinion which, is generally right. I will also talk about setting up the perfect speedy workflow for writing shoes apps in sublime.

And later I will be talking about Shoes' issues, of which there are only a few.

[iamthwee]

OK today I will be showing you how to use sublime and text snippets.

Snippets are a great way to speed up development, essentially they are shortcodes, so as soon as you type a word it pull out a macro.

http://sublimetext.info/docs/en/extensibility/snippets.html

I have attached some ruby shoes snippets, however, you can modify them as you wish.

[iamthwee]

Issues with shoes

Some of the issues with shoes are:

1. The default installers aren't always as robust as they should be for the different OS or they plain don't work at all.

2. Drop down menus/ context menus are non existent, but who needs them anyway?

3. Tabs not yet implemented, this is my main gripe.

Other than that, shit just works, and is nippy to use.

Next, I will be delving into some practical apps, saving stuff to text files, and perhaps a quick database tutorial using sqllite. Stay tuned.

Any questions, I'll try to answer.

[iamthwee]

In today's lesson we are going to look at file access something ddanbe mentioned, opening and saving this couldn't be easier.

To save out to a file simply type:

button "save" do
    file = ask_save_file

    File.open(file, "w+") do |f|
        @file.text = f.write("something to write")
    end
end

To open and read simply type:

button "Open", :width => 75 do
    @file = ask_open_file

    alert(@file)
  end

I am also going to upload my revised sublime snippets.

[iamthwee]

OK seeing as there are no GUI elements for sliders in shoes, I thought I might try to code how to emulate this within shoes. Stay tuned to find out how.

[ddanbe]

Can't open your snippets probably because I have not yet installed Shoes.
Any idea of the amount of disk space needed?
Nice to see some file manipulation. :o)

[iamthwee]

Can't open your snippets probably because I have not yet installed Shoes.

If you run the installer for your operating system the easiest way to open a shoes app, is to save one of my snippets as somefilename.rb

The click the link 'open an app' and browse to this file.

Let me know how you get on.

The install is pretty small compared to java or dotnet a mere 9mb for windows and 20mb for macs

And if you're trying to open my ruby snippets in the zip file I attached you won't be able to. They are shortcodes for the sublime text editor I'm using which I recommend as an IDE for, well, practically everything except of course dotnet and java.

[iamthwee]

OK so here is a quick implementation of a slider in shoes styled for macosx

slider.rb

Shoes.app(title: "Slider Example",
   width: 500, height: 500, resizable: false) do

    background  "#ededed"
    rect(:width =>200, :height => 3, :top =>60, :left =>50, :fill => "#3B99FC", :curve =>2, :stroke => "#3B99FC")
    @tot = image "slider.png"

    @tot.move(50,50)

    @dropped = para

    #get the release coords
    @tot.release do
     alert(@tot.left.to_s)

    end


   @p = para
   animate do


        button, left, top = self.mouse
        @p.replace "mouse: #{button}, #{left}, #{top}"

        @x = left
        @y = top

        @cond = button

        if (check_within(left))
            if(@cond == 1 )

                @tot.move(@x.to_i-15,50)

            end
        end
    end



    #to check if mouse cursor is within the boundaries
    def check_within(pos)
       if (pos > 50 and pos < 250)
        return true
        else
            return false
        end
    end
end

<--Make sure the above image slider.png is saved in the same directory.

[iamthwee]

And an example screenshot, the handling is not perfect but illustrates the point.

[JamesCherrill]

Since you mention Mac OSX...
Your sizes and positions seem to be in pixels(?). How do you deal with the difference between "retina" displays and older ones with pixels more than twice the size?

[iamthwee]

No idea? Is there some sort of standard? Shoes works in pixels. I have a standard vga monitor attached to a mac mini, what are you using?

Here is a simple link showing how to structure your program better with classes

https://www.youtube.com/watch?v=PoZ9bPQ13Dk

Does anyone have any gui requests. I've ran out of inspiration.

[JamesCherrill]

In my mind this is a complete show-stopper question.

Ordinary monitors used to be 72 dpi, 90-110 is more common now, retina MacBook is 227 dpi. The latest 27" iMac has pixels exactly half the size of the previous model.

If a Mac GUI cannot rescale to match the (approximate) dpi then it's useless in 2011/15's hardware environment.

In the worst case maybe shoes can access the hardware's dpi info and you could replace every pixel constant with a scaled calculation? But right now it looks like a total fail.

Sorry.

[iamthwee]

Post a screenshot with my shoes slider example on your retina display, I'll be interested to see what you mean with an attachment image.

[JamesCherrill]

I don't have a retina mac here, so I can't do that right now, but what you would see is that your window, and any contents that you specified in pixels would be half-size, but any text would be roughly the right size, and thus would not fit.

This problem doesn't just affect shoes, and it's only going to get worse as Windows now provides better support for high-resolution screens, and manufacturers are making those screens.

(Java Swing uses layout managers to deal with this quite sucessfully, but you still have to worry about raster images.)

[iamthwee]

Next in our tutorial, series I will be showing you how to quickly connect to a database using sqlite. I'm going to be using two table to pull up student info and a login. I will also show you a quick front end UI.

[iamthwee]

A quick example can be shown here:

https://github.com/ashbb/shoes_tutorial_html/blob/master/mdowns/00541_Shoes_comes_with_sqlite3_ruby.mdown