C++ Qt 96 – Simple Application – XML Editor

everybody this is Brian and welcome to the 96th cute tutorial Wow we’re closing in on that 100 mark today we’re going to do something a little different by finishing up XML we’re going to make a GUI application I was over inundated with email from people saying look buddy we want those real world examples we really like those so we’re going to say XML editor I had literally 300 emails saying Brian please make an XML editor tie everything all together so here we go make this a cute dialogue and I have to apologize to those of you out there that have been messaging me and I still haven’t gotten your messages I’ve got a backlog of about two and a half months worth of messages it’s it’s getting kind of ridiculous I’m actually getting more messages than I have time to keep up with I may need to like ask somebody to go through them for me or something so we’re going to slap a tree view on here because we are going to use the Model View framework and a push button and we’re going to give you just a basic scenario here the scenario is very simple your boss comes in and says hey I love the work you’ve been doing with this XML thing but you know what I really don’t understand XML I want something simple and easy to use so make me a GUI we’re going under that premise that’s my story and I’m sticking to it so this is going to be a very simple dialogue here we’re just going to have a treeview with a button so save save this and run this give this a good build give you an idea of what our window is going to look like here so very simple the dialog will automatically load the file which will cover that here in a minute this is going to be somewhat of a longer tutorial so my cats unfortunately hate longer tutorials and beg for my attention so you may see me pause the video a few times anyway so then when we click the Save button it’ll overwrite the XML file so without further ado let’s just dive right on into the code here all right now first thing we want to do here in dialog H is we want to actually add some includes and for the sake of time I’m just going to copy and paste from my notes here I don’t like doing a lot of copy and pasting because I feel it kind of cheats the purpose but for something like that you really just don’t need to sit here and watch me do that all right XML remember to add XML into your project file or you’re going to get all sorts of funky weird errors like that was underlined you see it no I like to after I do something like that give it a good bill just to make sure everything’s working and while it’s building I can tell you my woes I have this chipmunk living under my back deck I have this deck in my back yard it’s nothing fancy but man it seems like every something every summer something’s living under there all right so what we want to do next is we want to add some things for example we want to add a cue standard item model and I’m not going to get too in-depth into the Model View architecture because we’ve already covered that so if you’re kind of wondering how to work with the Model View framework I would suggest you watch my previous videos on it a little shameless advertising there I’ve also been getting some some very good feedback and like I said my time has been just insane right now so I’ve been having a real hard time getting to your guys’s messages but I love the feedback that I’ve been actually able to get to and please don’t get discouraged if I’m still trying to get to yours I know it’s it’s frustrating when you send somebody message and they don’t get back to you forever unfortunately I’m turning into that guy so we’re just going to add a couple variables here our model our file name a read function and a write function so let’s just go ahead and factor a definition I love those functions all right and let’s go ahead and go into our dialogue here and let’s go go to slot clicked that way we know when they click the button to save the document now as you’ve guessed we’ve got some things we need to do here this is our very bare-bones what we need to do when the dialog loads first thing we need to do is read the file so we got to do a little bit of setup first here go away kitty daddy’s recording I swear this cat I love her to death but she leaves me alone I’m invisible to her until I start recording and then she’s just all over me I think it’s you guys I think she just likes to say hi okay let’s see here kitty you’re not helping I have to pet

the cat sorry guys so file name equal and I’m just going to copy and paste my file name here actually let me pause it this cats getting on my nerves alright sorry about that I can promise you over this tutorial you’re going to hear me say sorry about that for pausing this video at least a dozen times alright now if you’re wondering where I’m getting this XML file from if you’re just tuning in it’s the XML file that we’ve been working with through these tutorials and some of you have given me flak about using Internet Explorer and you know what Internet Explorer is awesome now actually I use a couple different browsers I just use internet explorer for these tutorials because it’s well to be bluntly honest it’s just the closest icon to my mouse so but to get this XML file it will be included with the source code on my website or you can just use it from the previous tutorials that we’ve talked about alright now we’ve got to create our model here and I’m going to say new cue standard item model and when we do this we’ve got to give it some constructors here and if you’re wondering what this voodoo magic that I’m typing in here I implore you to click cue standard item model and press f1 and then read up on the Constructors like I said I’m not going to go over it in this tutorial because we’re really focused on the how to make an XML editor and yes we did cover this I believe in our previous tutorials on the item view if not somebody correct me and I will promptly say sorry all right now we’ve got our read file function which basically we’re just going to read the files contents and then we are going just just say UI tree view set model if you know the model framework this is pretty simple stuff for you here but quick review before we get too in-depth we’re just setting the file name and this is the pre generated XML file that we’ve been working with we’re making a new cue standard item model we’re setting the constructors and then we’re calling read file which we’re going to populate that model and then we’re saying the tree view set model we’re setting the data model so now we get to the fun part or I should say lack thereof sometimes reading and writing files aren’t very fun but you know we’ll try to spice it up maybe throw in like a random clown or something Q I can’t type q standard item is what we’re looking for here as soon as my cat let’s go up my sleeve kitty you know I’m actually becoming known on the internet as the guy with the cats it’s actually kind of funny I’m becoming the cat lady um the Dukedom keep standard item let me get rid of that real quick there we go give us a little more screen real estate here now we are making our route element here and the reason why we’re doing this is because if you remember from our tutorial on XML you need a root element well thing is we’re making an XML editor we don’t want them to be able to edit the root element the only thing we want are in our hypothetical situation of the boss wants something is we want him to be able to edit the name and that’s it we don’t want them to edit the ID or the book so we’ve got to kind of protect some of these things and some of you have also commented on my bookmarks blackjack and rift yes I play rift I’m trying cleric and I’ve actually started playing blackjack at the local casino I’m not very good at it though I’ve lost money don’t worry in any of your donations have gone towards the casino and to be brutally honest I haven’t spent very much money at all because I suck at blackjack but anyways enough of that and we’re going to append row when our route here actually I should jump back up here take constructor we’re saying zero rows one column sorry I probably should have covered that so now you understand why we’re doing the append room but I seriously I encourage you to go watch the modelview video that I’ve done or read up on it now we’re going to make our queue Dom document and now we’re going to load the XML file queue file will call this file filename and then we’re going to just say if file open and here’s the fun part qio device remembering some of stuff remember you can press control space to

bring up the intellisense so we get queue i/o device at tab colon colon and then you just do read-only this is one of those tutorials admittedly I kind of wish that I would copy and paste a little bit but I’ve tried that in different things for different tutorials that I have not published on YouTube and people just didn’t like it because it just seemed like it just jumped right over the topic you didn’t really understand what you’re doing or why we type it out it kind of forces you to learn by doing now we’re going to set the contents of the file or I’m sorry set the contents of the document from the file so we’re basically just going to give it a reference to the file and we’re going to let it read it in if you have no idea what I’m doing here with the set content or cue down document please once again after a reiterate go watch the previous tutorials because this is building upon what we’ve already learned I know some people don’t like that they like to just jump right in the middle but I’m sorry this is kind of an advanced tutorial now we’re going to get the XML route and we do that by getting the cue Dom element and we’ll call this XML route and we’ll do this document first child element that way we don’t have to convert it we just get the element now we want to read at the books this is where the codes going to get kind of kind of monkey here so we want Q Dom notes list and call this books and we want elements by name from our XML elements and let’s just say book and so this isn’t so much some voodoo magic here if we flip into our XML file you see there’s our route books and what we’re doing is we’re saying get element by name and we’re saying book so every element that starts in book we’re going to get so we’re going to get this element remember elements can contain elements in this case we’ve got books that contain chapters right now we’re just getting a list of book elements go back into our code here Oh hold on kitty needs attention go away kitty I don’t know what it is this cat is just tormenting me lately and so now we just want to go through the nodes list here Wow my fingers are really really sore I’ve been doing a lot of housework I think I said that in a previous tutorial and ripping wood siding off your house is not fun and my hands are like really really sore right now I’ve been done for a while but Wow now we want to get the book sorry and what we’re doing here is we’re getting a specific index and what we’re saying is we want the book element at and we’ll say two element and in previous tutorials we’ve kind of broken this into a couple lines of code but we’re just going to squish it down in one line of code we got a lot of code to write today and then we want a cue standard item and the reason why we want this is because we want to actually add this into our model so we’re going to say book item equal new I can’t type today queue standard item now we’ve created a new queue standard item which we’re going to insert in our model so now we need to pull the data out of the XML file and put them into the item and we do that by saying book attribute and we want to get let’s flip back in our XML file here what attribute do we want to get here we want to get a name because that’s what we want our boss to be able to edit here and so fairly large line of code there and it it’s worth noting that we are creating a new pointer here some people will try to omit that and then wonder why they get errors later so take special note to that that this what we are doing now that we’ve got our item here we want to read the chapters of the book pretty similar what we’re going to do little judicious copy and paste here we want to get a cue domnode list and we’ll

call this chapters and we want to do loops because we got our book item now we want to go in here look pause this real quick sorry about that once again my my cats my little carpet sharks as I call them circling for attention oops for int h equal 0 i did have a good question the other day one that made me think a little bit i like questions that make me think somebody asks the new standard c++ if you didn’t know there’s a new standard out called c++ 11 or i think it’s 2 or something like that i remember anyways c++ is a very very slow evolving language there’s been very few changes to it since its inception what we’re using now is actually c++ 86 i think it is because the new draft was in 1986 well C++ 11 just came out or i think it’s to correct me if i’m wrong i think it’s a binary joke thing that i honestly don’t understand and there’s a lot of new features and people were like why are we going to be using this feature so the answer to that is soon not right now but soon the reason that white now is simple um it’s not currently compatible with the compilers we’re using I’m sure some of the compilers out there like I’ve heard the Microsoft compiler is actually really up to speed on that but like most things Microsoft they put their a little spin on it so and it really just grinds my gears is a good expression a good child-friendly expression all right so now we’re making a chapter item and you’re probably wondering why we’re making the book item in a chapter 9 because we’re going to add both of these into you guessed it our model and we’re getting our apt tribute name because once again the pull up our XML file T chapter has an attribute called name and that’s what we want our boss to really be able to mess around with now that we’ve got those what we want to do is we want to actually add that in so let’s just scroll over here and we’re going to say whoops book item and we want to append row and we want to append the chapter item what we’re effectively doing here whoops wrong key I went to hit ctrl s to save it what we’re effectively doing here is building a tree model we’ve got our book item which we’re going to add to our model and we’re appending the chapter item in here now what we need to do is break out of this little loop here and say root Upendra and then we want the e-book item whew that was a lot of typing so let’s actually give it a good compile and run and see what happens here we want to make sure this actually builds and runs at this point and we don’t have any real major issues and if we do I’ll pause the video and figure out what the issues are mm-hmm tick tock tock maybe I should pause the video ads building now there goes all right so here is our da our application and you can see you can expand it out now and you get my book bla bla bla bla now we have a bug here hmm can anybody figure out what the bug is books my book my book it should be books my book my chapter let’s flip into the XML file here and see what’s going on yeah see it should be my chapter so let’s actually kill that kill that and let’s figure out what’s going on here mmm let me pause the video yes went a little too fast you can see this right here on line 53 chapter equal books at no we don’t want that we want chapter equal chapter zap that way we’re getting it from the right collection here let’s build and run this again and I’ll bet you a dollar because now my gambling man with blackjack that it’ll actually work and there we go there’s our chapters here now if you wondering why we did the modelview framework is because it gets built-in editing right into it the only thing we need to do now at this point is take that modify document that’s in memory click the Save button which will write it out to disk pretty simple pretty neat so let’s jump down here and you could argue we don’t even need the right file function because we could just do it right in this on push button clicked it’s personal preference I personally like building things out I call it plumbing code because let’s say you’ve got like 16 things that you need to call this same function here then I would just have one function

called 16 times rather than 16 versions of the function that’s just how I do it but you know with cute you have actions so you could have done an action called on write file clicked or whatever just doing real simple keeping it simple for illustrative purposes now we’re going to write the XML file and what we’re going to do write the file file and they have funny right the XML file what we’re going to do here is we’re going to basically just recreate this document from scratch and overwrite the existing it’s a lot easier than loading it moving it around trying to figure out what’s what and editing it in place we’ve got already got it edited in memory so we’ll say cue Dom document and well I’m writing some comments here keep up on that feedback I know I’m horrible about getting to it but I do kind of scan through Mike at route none and not Mike make a red note unfortunately I can’t multitask to save my life but what I’m looking for is ideas for the 100th video the problem I have is well time unfortunately I love to help people but I get a lot of people that want help and I’ve been getting a lot of people saying hey I’m a student I’m in school my test is due tomorrow can you help me and unfortunately I don’t even get to that until about three weeks after their test so I hope you did good on that test create element now what we’re going to do here is create our route element the reason why you don’t let your boss modify that route element is because well it’ll throw your whole document off and then you won’t have anything to grab on to all right so now we’ve got our route element we need to do a document and see what else has been going on oh yeah I’ve got a blackberry actually it’s kind of funny people have been sending me virus is trying to infect me they see me using like Windows with IE and Outlook so they send me links to things that would infect my my computer and it’s actually kind of funny because I read my email on a totally separate device that is I don’t want say immune to viruses but if it got a virus I would just literally you know reload the thing in five minutes so cue standard item so if you’re one of those people has been trying to infect me I implore you keep trying it’s good learning experience but you are horrendously wasting your time because I don’t read email on this computer I just won’t do it because well I don’t like it infected alright and I also jumped between Windows and Linux um I’m actually been in Linux a lot lately which is another question sorry I’ve been kind of goofing around today but another question is somebody had was why don’t you record these in Linux cute is cross-platform well I don’t own a Mac and I think they’re a bit pricey and I do have Linux I love Linux but I cannot find a good video editor for Linux I just like try just about everything out there and each one has some sort of horrible bug where it either won’t record the videos choppy something’s wrong the last one I tried I just I couldn’t get the sound to work to save my life we’re in Windows so I hate to say it it just works all right now quick review of what we’re doing then I’ll get back on my phone conversation here is we’re just going to write the XML document we’ve already got the document memory so we’re going to just rebuild a new document we’re going to say cue dumb XML root there’s our root element or pending the root and then we’re going to get the model item at 0 0 or the root model the root of that tree view and then we’re just going to go right on down and say ok for each item in the root we are going to grab each item here q standard item but anyways I’ve got a blackberry and there if you have been watching the news they’ve been a blackberry blackout all of Europe’s is lost blackberry functionality for like three days and it hit North America today and I’m in North America so it’s like my phone is just worse than normal I’ve been wanting to get a new phone for a while my contract with my phone carrier is up soon and I’m thinking I’m going to be getting a new phone really leaning towards Android so you might see some some new Android tutorials and I actually did a little bit of research and you can put cute on Android somebody made a full port of it writing cute creator it was actually really really cool so you can find that out on YouTube if you’re looking for it so cue dumb element which what we’re doing here is we’re just getting the

book out of our model here and then we are going to make a new element here so we’ll call this XML book equal acumen create element I’m kind of leaning away from the iPhone because I’ve heard really bad things about it my girlfriend has an iPhone and as cool as it is I just I don’t feel like learning how to develop for it I already want to use the skill set that I have and well Android is Linux under the hood so it’s actually really cool and I’ve seen I can’t name names but some folks that I work with they’ve rooted their androids and they put hacker tools on there so you can run like necess and Metasploit and nmap or write off your your phone so you have a mobile hacking station it’s actually really really cool it’s totally impressed with that granted it’s low because they’re well they’re phones but it’s just the fact that you can do that is just insane and it’s a testament to where we are technologically and what we’re doing now sorry I’m babbling I like to talk while I code what we’re doing now is was reading the elements in here so we’ve got our name and we’re adding the book text because there’s our book our cue standard item from the model so let’s review really quick we are not too deep in the code yet we’re getting the root element from the model then we’re saying get each element out of the model and I’m sure there’s a more elegant way of doing this but this is how we’re doing it for this tutorial to keep it simple and then we’re just rebuilding that document creating the element here and we’re adding the attributes and then we’re going to say XML route appendchild and we’re going to just append the xml book to remember i think that was called necessitous and the lighthouse project of how you get cute on android and the little brief demo I watched on YouTube it was just insane oh my gosh it looks so cool and if you can’t tell by my excitement in my voice I’m actually kind of kicked up the to get an Android and try it and yes if I did obviously we’d be making tutorials for it alright now H that’s the book we want the row count from the book and what if you haven’t guessed already what we’re doing here is we’re getting the chapters out of the book number this is the exact opposite of what we were doing we’re reading out of the the model and the reason why we’re reading out of the model is because the models in memory and the model is what’s changed and this is probably the most uh nelligan tway of doing it I’m sure there are better ways of doing it but I really want to show by doing I’m sure I’m going to get some hate mail from some of you semi pros out there that are admittedly better at this than I am but I think it would be good for people to learn how to do this because admittedly it took me a while the first time then I’m very spoiled from.net I’m really miss the dataset class and dotnet where you can just you know load a dataset and then save it right to an XML file and I’m sure there’s stuff out there and cute that does that alright so now what we’re doing is we’re creating aq standard item chapter and getting the book child at the position H because we’re iterating over the rows and then we’re you guessed it we’re just going to create a XML element here so queue Dom element I’m going to have to pause and type my cat here she’s giving me the evil eye give me one second come on kitty you can wait one minute can’t you cats shaking her head no all right can’t let go of my shirt sleeve so we’re creating a chapter and I’m going to have to pause this I apologize all right we’re back kitties happy daddy’s happy we’re just going to paste these in here and we’re going to modify this here and we’ll say chapter and what we’re doing is pretty much something with book we’re just setting the chapter text the ID make sure that’s the H not the I so we’ve got our chapter we’re setting the attributes then we’re

pending this to the book element now once we’ve got all that done we need to jump out of these loops here and you guess it save to disk now if you have a fairly large document you would want to kind of buffer this out and save it in chunks but for this example we’ve got a very small document and we don’t need to do that so let’s go file filename and we’re going to do file open Q I’ll do voice yeah q io device write only and we want to do this in text mode so we’re going to just very simply add a comment here saying if we cannot do this then we want to cutie bug out and say hey there was a problem and admittedly in these tutorials for the sake of speed I haven’t been doing as much error checking as I probably should and I’ve gotten a couple nasty grants from people saying eh add some error checking show some debugging show how to do this stuff alright so now we’re going to create our stream if you have no idea how to do this well once again I implore you to watch our previous tutorials I would love to cover all of this stuff all in one shot but it would do two things it would make this video about four hours long and it would bore people to death who have been religiously watching the videos so so here we go to string so what we’re going to do here is just take the document convert it to a string dump it into this text stream and then close the file and then we just want to do a cutie bug finish that way we know it was actually written out to disk save our work here and let’s run this oh we got a boo-boo base a brand nun partner and Dom hmm okay let me pause this and figure what’s going on dear I was trying to do the wrong version there there we go now let’s run this see I’ve gotten some really cool ideas from people about what the 100th video should be and I want to do something special alright now you know the boss can do that and we’ll do book 1 say lol and we’ll say cats dogs mice and another animal fish why not so as you see we can edit this and even though we’ve edited this root thing that will not be saved let me click the Save button you see how it says finished grab our document and let’s just f5 to refresh you notice how books stayed the same but the elements have changed we now have book 1 lol cats dogs mice so we’ve written this out to disk so now the boss closes the program reruns it and notice how books is back because we don’t want the boss to overwrite that and we’ve got our changes right here so that in a nutshell is how to make a basic XML editor now unfortunately making a full-blown XML editor that could modify and edit any XML document on the planet would take a long long time so this is the best I could do on short notice and I’m apologize if this tutorial is extremely long so thank you for watching I hope you found this tutorial a tional entertaining and if you liked this tutorial Oh hold on sorry kitty was getting sick poor cat if you liked this tutorial go onto my website wowt.com these don’t feel obligated to give a donation I have been getting donations and my website is 100% funded off

donations I appreciate your donations but don’t feel obligated please had a couple people saying is it necessary no it is not I do this because I want to do it other than that I’m really looking for feedback on the 100th video I’ve got a couple really really good ideas from people and I’m really looking forward to doing it so as always this is Brian thank you for watching and I promise and I apologize at the same time I will get to your messages if you sent me one I’ve got a backlog of about a month and a half two months and it’s overwhelming but I’m really trying to plow through so thanks for watching hi