|
|
| (48 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| Developing Ruby QT Applications using QT Designer and Ruby on Ubuntu
| | = Published Articles = |
|
| |
|
| <br>
| | ;[[Development/Tutorials/Developing Qt4 Applications using Qt Designer and Ruby on Kubuntu|Developing Qt4 Applications using Qt Designer and Ruby on Kubuntu]] |
| | :''Tutorial that shows how to design a simple User Interface in Qt Designer and then use the resulting widget in a Qt Ruby application we build from scratch.'' |
|
| |
|
| These instructions are tested with Ubuntu Jaunty Jackalope 9.04 . We will create a simple application to display a list of items (pieces of text) and move them up and down. Ground breaking in the extreme!<br>
| | = <br> Draft Articles = |
|
| |
|
| <br>
| |
|
| |
|
| == Install the appropriate packages ==
| |
|
| |
|
| From a command line terminal run<br>
| | ;[[Development/Tutorials/Quickstart Guide to the Wikitext syntax used in KDE Techbase|Quickstart Guide to the Wikitext syntax used in KDE Techbase]] |
| | ;<br> |
|
| |
|
| *sudo aptitude install libkorundum4-ruby1.8<br>
| | ;[[Development/Tutorials/Deploying Qt Ruby Applications as a Debian packages for Kubuntu|Deploying Qt Ruby Applications as a Debian packages for Kubuntu]] |
| *sudo aptitude qt4-designer<br>
| |
| *sudo aptitude libqt4-ruby1.8-dev<br>
| |
| *sudo aptitude install libqt4-ruby1.8-examples<br>
| |
| *sudo aptitude install qt4-doc qt4-doc-html qt4-demos<br>
| |
| *sudo aptitude install qt-creator (you may not need this)<br>
| |
|
| |
|
| <br>
| | Q. What is the difference between writing a Qt application and KDE application? |
| | | A. Qt targets multiple platforms and it's widgets provide only functionality that is available on all target platforms. KDE widgets are specialised for the KDE desktop, thus KDE takes a Qt widget and enhances it for the KDE environment. For example, a QDropdownBox might not provide auto-completion because only some target Qt platforms support it - whereas the KDE version will include this functionality in a KDialog (TODO: Get a specific correct example). Additionally KDE contains components for networking, displaying and file system abstraction which would not be available in Qt. If your program needs to run on on platforms other than KDE then you will need to use Qt widgets - if it's KDE you're focused on then go with a KDE application and KDE widgets. |
| = Create a simple Form with QT4 Designer<br> =
| |
| | |
| *Create a folder on disk for your project, for example, my_first_project
| |
| *Start up QT4 Designer<br>
| |
| | |
| #Select QT 4 Designer from the Applications->Programming menu or...<br>
| |
| #From a command line terminal run: designer-qt4<br>
| |
| | |
| *The default form is a Dialog with Buttons Right. Stick with that and click Create<br>
| |
| *Drag a List View from the Item Widgets (Item-Based) selection of widgets on the left onto the form. Be careful NOT to choose the List View from the Item Widgets (Model-Based)<br>
| |
| *Right-click the List View that is now dragged on the form<br>
| |
| | |
| #Select Edit Items<br>
| |
| #Click the green plus icon on the left to add an item<br>
| |
| #Enter the text: First line<br>
| |
| #Click the green plus icon on the left to add an item
| |
| #Enter the text: Second line
| |
| #Click OK to finish editing items
| |
| | |
| *In the Property Editor on the right, scroll down to the section QAbstractItemView<br>
| |
| *Keep scrolling down a little more to the Property DragDropMode and change it's value to internal. This will let us move items up and down in the list easily<br>
| |
| *Save what we've done by selecting Save As in the File Menu
| |
| | |
| #Navigate to the folder you created earlier, my_first_project<br>
| |
| #Choose the filename dashboard.ui for your file and click save
| |
| #This file contains and XML representation of the form you just created<br>
| |
| | |
| *If you want to take a quick look at your form select Preview from the Form menu<br>
| |
| *But we're done with GUI stuff now! Let's get hacking...
| |
| | |
| <br>
| |
| | |
| = Creating the basic application structure<br> =
| |
| | |
| *Now that we've got a user interface, we need to run a command (rbuic4) that creates a Ruby class that we can use based on the interface<br>
| |
| *From the command line terminal<br>
| |
| | |
| #Navigate to the my_first_project folder you created earlier using the cd command<br>
| |
| #Run the command 'rbuic4 dashboard.ui -x -o dashboard_ui.rb'
| |
| #The '-o dashboard_ui.rb' bit of the command says dump the resulting ruby code into a file called dashboard_ui.rb
| |
| #The '-x' bit of the command says to create a little stub (like a main function in C/C++ or public static void main in Java) that kicks off the application. Otherwise your application would have no entry point.<br>
| |
| #We need to rerun this command every time we change the form using QT4 Designer. Usually we won't add the '-x' flag<br>
| |
| #For instant gratification run the command 'ruby dashboard_ui.rb'
| |
| #Woaa!!! You should see your beautiful form before you very eyes. But when the excitement dies down, be aware that if you were to add any code to your dashboard_ui.rb file it would get blown away every time we run rbuic4 on this file to pick up the latest changes we made to the UI using QT4 Designer. But it needn't be this way...<br>
| |
| | |
| <br>
| |
| | |
| = Separating generated code from our 'real' code<br> =
| |
| | |
| In QT4, this is achieved by subclassing the dashboard_ui.rb file. Using a text editor create a new file in your my_first_project folder called dashboard.rb. The comments should explain what's going on
| |
| | |
| <code>
| |
| # We pull in the file containg the class containing the generated code
| |
| require 'dashboard_ui'
| |
| | |
| # We inherit from the class containing the generated code.
| |
| class Dashboard < Ui::Dialog
| |
| | |
| # We are then free to put our own code into this class without fear
| |
| # of it being overwritten. Here we add a setup_ui function which
| |
| # can be used to customise how the form looks on startup
| |
| | |
| def setup_ui(dialog)
| |
| super
| |
| # We'll be putting some code here real soon...
| |
| end
| |
| end
| |
| </code>
| |
| | |
| We now need to make see how we can control the look of the form using code
| |
| | |
| *Create a new file in the my_first_project folder called main.rb
| |
| *Move the following code from the dashboard_ui.rb file to main.rb<br>
| |
| | |
| <code>if $0 == __FILE__
| |
| a = Qt::Application.new(ARGV)
| |
| u = Ui_Dialog.new
| |
| w = Qt::Dialog.new
| |
| u.setupUi(w)
| |
| w.show
| |
| a.exec
| |
| end</code>
| |
| | |
| *Because we have our own main file now there is no need for the opening 'if $0 == __FILE__' line, so delete that line and it's enclosing 'end' statement to give us
| |
| | |
| <code>a = Qt::Application.new(ARGV)
| |
| u = Ui_Dialog.new
| |
| w = Qt::Dialog.new
| |
| u.setupUi(w)
| |
| w.show
| |
| a.exec</code>
| |
| | |
| <br>
| |
| | |
| <br>
| |
