 So you could say check all the winners that do not include a race. I claim that you should always do this. Test. Test. Are you guys ready to set up everything? Yeah. I think so. What? Yeah. Okay. It's time, I believe, yes? Yep. Hi. Hello. We'll start a new presentation and we continue a little bit in the same area of technology. Jeffrey Carter will explain how to use Ada for web, sorry, user interface, but built also around web technology. Okay, Jeffrey. All right. Hello. I'm Jeffrey Carter. A few years ago, David Button, pardon? A few years ago, David Button created a thing called Ginoga, which uses aspects of HTML5 to use the browser as a GUI, and also allows you to develop web applications. It's all in Ada. And unlike other presentations you've seen so far today, I don't have a presentation. I just have programs and code. I should probably have already done that, shouldn't I? Hold on a second. Where'd that go? There it is. Can we switch to a larger font? A what? A larger font in your terminal. In my terminal? Oh, well, at least in your editor then. You can't read that? What's the matter? No. Is that the one? I see. In GPS? No, it doesn't. I'm trying the edit menu. Text size, yes. Now you have text size in the edit menu. Do I have it in the edit menu? Oh, okay. Oh, there it is. Increase, and it says control plus. Okay, well, I guess I was using the wrong plus. Pick enough? One more. One more? More? We're good? Okay. I'll probably do something similar here with this, if I can remember. How that is done. Zoom, yes. Maybe that'll help. Okay, so I started playing with Kanoga and put some programs which ended up being incorporated in a set of demos that come with Kanoga. And I mentioned to Dirk that I had done this and he thought it would be good for me to show you how it works. I'm not really familiar with the underlying implementation. This is just how to use it. The first thing I'll show you is how to use it to use your browser as a GUI. What is referred to in Kanoga is the Singleton application. So, this is possibly the simplest program ever. It looks like this, and it basically lets you put in some numbers and it will suit them right on the way to pick a number in that range. Okay, where did the GPS go? There it is. So the organization of a typical Kanoga application is for me under an empty package spec. You want a package because Kanoga uses named access to sub-program types and therefore you have to have sub-programs that are declared in a library level package to pass the accessibility rules. So that's that. Your actual program looks sort of like this because what you're going to do is put everything in your UI package, which is here. You have to declare some things from the Kanoga GUI hierarchy of packages. Everything has a window. You usually need a view to put things in. And certain things like these number types and the text type where the result comes out are part of what is called forms. We'll talk about that a little more later. We've got two things for entering numbers. That's the min and max. The two labels that go on those to say minimum and maximum. The button to generate the result, a place to show the result and the quit button. And I got this form because these things are part of the form thing. And in the elaboration of the package, you create your GUI. It's very similar to other GUI frameworks. You create things. This right here will open your default browser. This puts a title on it. This shows you something to display when you end. So your browser tab or window stays there and it just has this message displayed. This initializes a singleton application in your window. Then you can create your things, your views. I've set the width of the view short so that it doesn't put everything on the far right side because of this thing which is the form which I create inside that view. And this is the text alignment which lies. It's not actually text alignment, it's everything alignment. And I set the alignment of everything in this form to be on the right. And I create the entry and I have a placeholder which is what it displays initially enter an integer. And I create the label for it and it says minimum value. Similarly for the entry for the maximum value, the result, the generate button. I connect the generate button on using its access. This is where you register a callback. This is called on submit handler because it's for the form. And this is a submit button for the form. That's part of the form handling that we'll get into later. Finally the quit button and it's on click handler and you click on it, it will call on quit because I registered on quit with it here and then you give up this thread of control to the message loop. It's really not necessarily an ADA because it can have its own task. In fact, inside Gnoga, as I understand it, every time you do an action and it gets sent to your program from the browser, Gnoga creates a task to handle that event. So this is the thing. The on quit simply ends the application which causes this to return and then the fun part is this on generate. I get the two values. I don't have to do any validation on those because there are number types and so will contain an integer. In fact, this value returns an integer. I've done a little bit here to swap the values. If you put them in the wrong order, it'll swap them for you. And then I redisplay them in case I swap them and instantiate the discrete random random number generator for a subtype with that range generate a value and stick it in the result. That's the whole thing. Now the thing with a form is that this forms are not really needed with Gnoga. You can handle a button click, go and access the values of the fields but they do allow certain automated tests. If I submit it and it doesn't have a number in it, I get this message. If I submit it and I haven't put anything in it, I get a message. Things like that. And that's the second message saying that it needs a value is because I've said it's required. The first message saying enter an integer is because it's a number type. That's about it. Let's see, there's this fun thing when you create stuff is that things are put one after another horizontally. And you use this new line. This is one way to get down and put things underneath. So I got my view here which is 500 wide. Inside the view I've got the form input and the stuff inside the form is right justified. So this is 500 wide here and this shows the right edge of that view is here. Clear? Amazing. Okay. Now we'll go over to something a little more complicated which is this guy here. Let me see if I can do this. So this is a web application. I realized when I started playing with this that you have this one thing that runs and it has this mode called a multi-connect program as opposed to the singleton which I just created which we just discussed in the random integers. This one you can hook up to it from multiple places. So if I can find my pointer again there it is. I opened a different browser. Did I spell that right? I did. So now I got both browsers connected up to the same program. And if this program were running on a computer that you could access over the internet you could just put in the URL for it with the appropriate port number and connect to it over the internet. No change to the program. We look at the log here and I connected from Firefox. We got this connection connected from Chromium. I got this one. Now what this does you put in an email address and I use an email address simply as a unique identifier and this is actually pretty simple. It just has to look like an email address. It doesn't have to actually be an address. So it then brings me up and if I have a friend that I want to talk to then I can add that guy in. Now he's not online because he doesn't have an asterisk so we can't talk to him yet. If I go back in here it's discovered that A at B.C. was already online and already added me as a friend and so it's put him in as one of my friends. Let me see something here. You may not be able to hear this but just in case. So if I go in here I can say and you'll see back here that the program sent that information to this other person that I'm friends with and displayed it on his screen. Okay. There's actually a ding sound that it plays when you get a message but we're not getting any sound out of this right now. So that is that and how it works. We're supposed to work. If we go in to somewhere is it under source under demo. Then we have this giant text and because this is a multiple connect we need to have a connection data type and all those fields that in the singleton were just in the package or in this record. So we've got here two basic screens the one where you enter the email address and connect and the one where you are chatting and so we've got fields for both of those. And Gnoga deals with these application data through pointers. Later when we get an event we get one of these pointers with it or we can get one of these pointers from it and well I'm not a real fan of visible access types Gnoga somehow keeps track of them and gets rid of them when they're no longer being used which is a good thing. So that's the root package and the program package is very familiar. I have a question here. Yes? Why does the program exist? Why does this file exist? Why does the procedure exist? Because it's the main program procedure for this application. So when you call this crazy elaboration this elaborates the UI package which runs the program. Is it possible for you to add some code in here that would inform something? Probably. I don't know when it would run because the elaboration of this gives up the set of control which is the environment task to Gnoga. And so anything you put in here would run when that returned which is when the program ends and this kind of program never ends. If we go back here you'll see that when you start it up it says press control C to close the server. That's the only way you end this program. Okay. Unlike the random integer which is such a simple program that I put all the logic in the UI package this is somewhat more complex. I have a DP package which keeps track of who's connected and who their friends are. So I got this set which due to my use of long lines is scrolled way off the screen for unbounded string and what I've got is user data that consists of contact and one of the pointers to the app data. So once I find a user and I get his user data I have a pointer to his window data which I can then use to update his window and then I got add a user with this app data to the DB check if a user exists remove a user from the DB send message from user from to all of his contacts make friend one of users friends and make friend no longer one of users friends. Pretty straightforward. We won't go into the internals of this package you can find it online and look at it yourself if you have that much interest. So then the fun part is the UI now there's two versions here one has allows it to run securely and one doesn't used to be only needed one but they made some changes to Gnoga and it's another different. So we'll just look at this one and the elaboration part of this looks a little bit different because it simply sets up this and it connects here the on connect handler this is not related to the connect button this is when somebody puts the URL for this thing in their browser it causes this connect event and this on connect procedure will be called and it gives up the threat of control to Gnoga So the important part of this is the on connect which sets up the main window with this new app info pointer has this data and creates email screen holds the connection which means that the connection will remain continued until the server deletes it or the browser is closed and make sure that this here should do nothing I don't remember why it's in here oh well okay and create email screen sets up the window and it's very similar to the elaboration part of the singleton app random integers that we looked at creating buttons and things but instead of doing it what that did to global variables this does it to variables in the app record because it'll be called for different users different connections when the user clicks connect having entered his email then we create his chat screen and add him to the db and the chat screen has got a lot more to it than the screen the email screen but it's basically the same thing now I used what is called a dock because at the time I wrote this this was the only thing that let you put things on different parts of the screen so I got the chat which is a view is connected to the left side of the dock and the friends which is another view or maybe a form is connected to the right side of the dock since then there's been added a thing called a grid which will divide your window up into pieces and then you can put things in individual pieces gives you greater control over the layout and how it existed I probably would have used it at that time and so then the fun thing is when you've typed in a message and you press send it gets the message that you typed and then calls the db.send which looks at all your friends and sends them that message and then it calls its own show message procedure to display it to yourself the person who typed it in and you'll notice that ding is false when you press send you don't hear the ding but if we can find show here we go so this adds your message to the end of the existing message in that chat screen separated by a line feed character and preceded by the email address of the person who sent it and scrolls to make sure that it's on the screen and then if ding is true it's got a little multimedia thing in there to play audio and it plays it but we aren't hearing that unfortunately and you can see the send and the db ok because genoga creates tasks I've put all the real operations in here because especially with multiple people connected and working at the same time calls might come in at the same time to this database and they need to be sequentialized so it iterates over the contact set and passes each contact to this thing which then calls the show in the ui so that's an example of using this app data pointer that we stored in the db to call back to the ui and if I lucky we might be able this isn't always running this is the genoga.com website this is not running over the web this is not always available and the other thing of course is that the certificate on this site is expired this is secure but you have to make an exception for the certificate the only reason that we're using the certificate is to encrypt the data that we're sending between the browser and the site and so an expired certificate should serve for that purpose as well as as one that hasn't expired so this is actually running over the web if you are interested in messing with it that way right I guess we have a few minutes left is that correct is that clear 15 minutes left oh my god yes well I'm not claiming to be a great ui designer I just threw these things together quickly to try out and to demonstrate that this kind of stuff could be done if you get a decent ui designer I'm sure it will look a lot better it looks like like an IBM green screen from the sixties could be yes but you can add the attached file sheets I don't know anything about using CSS with Gnoga technically you can put stuff in html and connect your application to it oh there's a new problem with you pardon I did it quite often I think there are they have their ideas automatically generated by Gnoga you can set them yourself to whatever you want so by knowing their ideas if you are interested actually Gnoga is a communication protocol the low level stuff is JavaScript it's called web sockets web sockets and html for the rendering and you have low level access also to the html part so if you don't have predefined stuff if you want to build your own widgets then you may access the html level whatever you want to be html level it was vector perfect support it's also possible to change the way things look through the Gnoga interface you can change colors, type faces stuff like that I had one where I wanted the output to be in a mono spaced font so I was able to do that I think I remember there was a minesweeper game with Gnoga that is pretty graphical before you could show the pasta pasta pasta is graphical do you remember where that one is pasta.curama.com yeah I'm not using it every day how is that curama.ty r-a-m-a.com curama okay let's see what we get did you get it wrong no no I got no script and it's blocking it so there it is this one might look better than mine that one, one nice feature this one is actually also untuxed it works with swipe as well as ordinary drag and drop so it works with a touch screen so that's another example of what you can do how many users do you have I don't know I would say I've done some testing with the back end and we found a box in a patch bench it counts probably when you're running more than a million requests per second of course when you put real application code behind you'll slow a bit down to that but the raw framework you go beyond a million requests per second so it's okay yeah you probably run out of memory in the database before you get anywhere close to a million users but still the thing is with Gnoga I don't think it's perfect for users that have a bad connection to the internet because when the connection is severed for me the default behaviors of the screen is cleaned out you see nothing so to use Gnoga your users should have a very good internet access and I don't think it's optimum for the internet although it's been used for that but I think it's optimum for in-house applications for companies because then you know that all your users they really have a good long no problem right well if there are no more questions I guess we'll take a break disconnect draw a seek years ago David Rotten wanted to come over it's on a Saturday and he's rather orthodox yes I worked with him he always disappeared on a Friday afternoon okay so it's the first time I'm going to go down here grab this there's nobody you mentioned the grid versus the dock but I think in the end you should be able to put all your elements where you want them to be so although this kind of automatic position you can yeah I believe there's but sometimes you're not happy with the decision I've only used the the automatic positioning but there are things if you get into a lower level that lets you be more specific do you happen to allow to let me take the types that exist? I don't know what do you mean is the types that exist the same principle sometimes or normally to automatically but you're also able to specify exactly where each element should go right I haven't well you've gone from well because all the data that is sent to the browser to the JavaScript yes the data comes in maybe as an array of characters all eval that's data so you've been looking at the internals yeah you know there's no authentication did it really come from you know did it come from server or not yeah and although I mean the communication can be encrypted but is it enough well I'm not trying to do anything secure although I did write a password generator program but if you ran that over the web you would want to be sure you know the master password at least that is being supplied to the program would be encrypted okay okay what is that doing over there okay okay yeah yeah yeah it is an hour it is a 20 20 I'm sorry, I'm sorry. I'm sorry, I'm sorry. I'm sorry. The presentation is... It's a real great... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... Thank you very much. Thank you very much.