Ruby + Shoes = Nice little GUI

    The article was originally published for a personal blog, but I think those who begin to learn Ruby, or just want to write a GUI for the application will find it useful.

    There will be no entry. The topic today is Shoes . Such a small kit to create a GUI for Ruby applications. The first time I heard about him was when I was trying to figure out how to make something graphic on a ruby. The answer came right away, and in two (or even three options):

    • Qt
    • wxWidgets
    • Tk
    • Shoes


    I looked at the first item, then the second. I learned that many of the popular C ++ GUI applications that live today have a Qt basis under them :) In general, I learned a lot of useful and generally positive ones. I hardly looked at the shoes (I like to call them that), but in vain.

    Literally a month later I accidentally decided to try it, and you know, using Shoes to create a GUI in ruby ​​is much easier than using non-native Qt, etc.

    Actually, I think this will be the first article from a small cycle. In it, I will slowly but surely describe the creation of unpretentious applications, any details, etc. I think it will be interesting. We will start with nothing trivial, so go ahead!

    FTP file downloader to server





    A la design


    What do we need for our project? In general, I decided to write something simple; from the program we need the following:

    • Ability to connect to the server
    • Sending a file at a given path


    All this is done quickly and easily, so getting down to business, but for a start a small introduction.

    About Shoes



    Download "this": shoooes.net/downloads . Once downloaded, create shortcuts for “shoes.exe” and “shoes.exe –-package” on the desktop.

    Articles / manuals can be viewed here: help.shoooes.net . But even in shoes.exe itself, you can open an offline manual. Comfortable enough and detailed.

    I advise you to read everything from there, as necessary, and do not forget about what is on the site. In my opinion, there is more information there.

    Writing a GUI



    What we will write is regular Ruby code wrapped in Shoes.app do ... end block. Self inside of which, this is our Shoes :: App. We can call the necessary methods, use var and other joys of life. I don’t really understand how to separate the code and inherit from this class, so more complex sentences passed under the $ shoes = self brief inside the block of shoes.

    Among the many positive qualities everyone will like - cross-platform. The same ruby ​​code will work in different OSs, but it will look a bit different: help.shoooes.net/Introducing.html

    But back to our task. You and I would like to write a file downloader to an FTP server. To connect to the server, we will use Net :: FTP (well, from the standard set), and for the GUI, you yourself know_what.

    Getting started



    Shoes.app(:title => 'FTP File Uploader', :width => 500, :height => 400, :resizable => false) do
    require 'net/ftp'
    background gradient rgb(255, 255, 255), rgb(150, 150, 150), :angle => 45

    stack :margin => 20 do

    end
    end


    We create our application by setting some parameters::


    title - name
    : width - width
    : height - height
    : resizable - resize :-)


    Then we connect in the future what we need for the future to work with FTP.
    After that, we make a beautiful background with a gradient at an angle (almost like in human language say: “set background to gradient rbg rbg with angle”, well, or something like that).

    Next comes the block. In it we can set the indent from everything around (: margin). In addition, the elements inside the stack will be located under each other, unlike flow.

    Add items



    Shoes.app(:title => 'FTP File Uploader', :width => 500, :height => 400, :resizable => false) do

    require 'net/ftp'

    background gradient rgb(255, 255, 255), rgb(150, 150, 150), :angle => 45

    stack :margin => 20 do
    caption 'FTP File Uploader'

    flow :margin => 3 do
    inscription 'FTP-server: '
    @server = edit_line :width => 200
    end

    flow :margin => 3 do
    inscription 'FTP-path: '
    @path = edit_line :width => 200
    end

    flow :margin => 3 do
    inscription 'Username: '
    @username = edit_line :width => 200, :text => 'anonymous'
    end

    flow :margin => 3 do
    inscription 'Password: '
    @password = edit_line :width => 200, :secret => true
    end

    para

    flow :margin => 3 do
    inscription 'Filename: '
    @filename = edit_line :width => 200
    para ' '
    button 'Browse...' do
    @filename.text = ask_open_file
    end
    end

    flow :margin => 3 do
    @status = para ''
    end

    end
    end


    After we wrote the base, it's time to add a few elements, and indeed at least something more or less lively to add to the application. To do this, we use flow, inscription (text with a size of 10px), para (also text, only larger), edit_line, button - elements of the graphical interface.

    As already written, flow is the same stack block, only the elements in it will go one after another.

    EditLine - input field.

    Inscription and para are text blocks.

    Button - a commonplace button.

    Now about something more. "@server = edit_line: width => 200" - because within the entire Shoes.app block, self is our application, then we can work with it via @, thus putting elements, data, anything and working with them inside any of our constructions.

    Another point, we don’t call buttons, because we describe their action immediately. If you add a block to the button method, it will be executed when the button is pressed - conveniently, agree. Thus, when you click “Browse ...”, a dialog box (ask_open_file) will open and the name of the selected file will be written to our edit_line.

    A little distracted. After all, we need to look at the fruits of our creativity. To do this, run Shoes.exe and select "Open an App". Select our .rb file and voila la :)

    Final stage



    Screenshot of what happened: http://jleft.ru/wp-content/uploads/2009/05/screen11.gif
    Sources in a separate file: http://www.sendspace.com/file/ba7lkl If you didn’t add something / incorrect - write, correct, s. :) UPD . Moved to Ruby Blog

    Shoes.app(:title => 'FTP File Uploader', :width => 500, :height => 400, :resizable => false) do

    require 'net/ftp'

    background gradient rgb(255, 255, 255), rgb(150, 150, 150), :angle => 45

    stack :margin => 20 do
    caption 'FTP File Uploader'

    flow :margin => 3 do
    inscription 'FTP-server: '
    @server = edit_line :width => 200
    end

    flow :margin => 3 do
    inscription 'FTP-path: '
    @path = edit_line :width => 200
    end

    flow :margin => 3 do
    inscription 'Username: '
    @username = edit_line :width => 200, :text => 'anonymous'
    end

    flow :margin => 3 do
    inscription 'Password: '
    @password = edit_line :width => 200, :secret => true
    end

    para

    flow :margin => 3 do
    inscription 'Filename: '
    @filename = edit_line :width => 200
    para ' '
    button 'Browse...' do
    @filename.text = ask_open_file
    end
    end

    flow :margin => 3 do
    button 'Upload' do
    @status.text = ''
    begin
    Net::FTP.open(@server.text) do |ftp|
    ftp.login(@username.text, @password.text)
    ftp.chdir(@path.text)
    ftp.putbinaryfile(@filename.text)
    end
    @status.text = 'File transfered'
    rescue Exception => e
    alert "Error: #{e}"
    end
    end
    end

    flow :margin => 3 do
    @status = para ''
    end

    end
    end





    Also popular now: