[Qt C++] QTableView Model-View simple application P1

In my current job one of my collegues have a lot of troubles when borrowing equipments, sometimes he forgets when he borrowed the equipment or to whom, so i was thinking if there is some way that i can help him to manage the way he borrow the equipments to the other collegues.

So, because right know i'm working a lot with Qt i think i can use it to give him a fast, easy to use and reliable solution to his problem.....


.....by the way, for this project im using Qt 5.10 with MSVC2017 for 64bit... 


I'm going to divide this project in several part so it doesn't get too long to read... so here is PART 1


First im going to create a new Qt Application project and ill name it "BorrowingManager" (thats too obvious...), pretty much is just Next and Next.....if you want some details about the setup of the project feel free to comment and ill guide you....


img1

create 2

create 3



Then you will have something like this....

img4



This is basicaly the plan for this first part....First i'm going to put some widgets to create the interface, the main widget is going to be the QTableView so i can show a list of the devices that my friend has borrowed, then ill add some buttons to Add, Delete, Modify and all that usuall stuff. 


by double clicking the mainwindow.ui on left panel list i can enter into the design window.

img5



Then search from the Table View Widget, drag and drop it into the mainwindow.....i'm going to use the TableView because the plan is to work this main widget as a Model/View using a database file, that will contain id, device, quantity, name, description, borrowdate, state (something like borrowed and returned), return date, and some description of the devices when is returned.

Basically we have a database file (for this project I'm going to use SQLite), the Model communicates with this database, sending and getting its stored data, then it provides some "addressing" so that the View can show us what is stored and we can manipulate the data with ease.

img6
                               Image Courtesy of Qt Documentation page....

...if you want to got deep into the Model/View Programing  you can visit this link Qt Model/View

I'm going to add some labels and Line Edits that will work as a search bar, also I'm going to add a Combo Box so I can add the program the function to filter the columns where we want to search.

It is VERY IMPORTANT that you give some name to the Widgets you are adding, that way it will be easy to search for them when we are programing the logic of the program.



img7



As you can see if I drop the widgets just like that... it looks to ugly for me,  so ill make use of the Layouts Qt provides, so I'm going to arrange that search bar, labels and the combo box horizontally, to do that I just need to select them all, then right clic and then  hit "Layout Horizontally". Also so the table view can get into the party too, ill select the main window, right clic and then "Layout in a Grid", so you will have something like this.....

img8

img16


I told you I was going to add some buttons for adding and modifying the data on the table view, but I think it will be more interesting to add some panel with this options that hides and shows whenever I need it, to have this function ill add a "Frame" on the right side of the table view and add to it some Line Edits for the fields I'm planning to add to the database.

NOTE: it is easy to place those components if you break you previous layout by selecting the mainwindow then right clic and then Layout-> Break Layout.

img9



for the description fields I use "Plain Text Edit", for the quantity I'm going to use a "Spin Box" and for the date "Date/Time Edit" then I Layout all that frame as a Grid, remember that you can Layout Some group of widgets before grouping them all in some layout (as you can see the buttons and the spin box with the line edit).

also remember to rename all the widgets so you can find them easily when you start to code the logic behind all that fancy widgets.

img10


so in the case you haven't see it yet....there is a panel on the right that holds the properties of every widget, ill recommend that you play with every property of every widget so that you can get and idea of what properties can be modified and have some ideas for future projects, for this project in particular I'm going to add some Placeholders to the Line Edits and the Plain Texts, also I'm going to set the Spin Box to reach to 999 and the DateTime widgets to popup the calendar to select the date, also some tool tips for the buttons.

img11

img12

img13

img14

img15



So right know we will have some basic GUI for our program......we haven't put a single line of code yet (although.... all that fancy stuff we have created have some XML background code that Qt Creator kindly has made for us). If you run your program you can see you GUI on action but empty inside 😢😢😢,  don't worry...that will change soon.

img17



I'm using this tutorial also with a basic Git tutorial on this blog, so feel free to check it out if u like to learn some Git Basic commands and functions too, if not, you can clone all this code from this repo on GitHub.....

    https://github.com/danalex07/borrowingmanager


ill hope you have learn something so far..... ill post part 2 very soon....



SHARE

Daniel Sanin

    Blogger Comment
    Facebook Comment

0 comments :

Post a Comment