Thank you for joining me for this video, working with forms and form objects. For Servoy University, I'm Bob Cusick. In today's lesson, we're going to take a look at forms and all of the objects that you can place on forms. So to begin with, I've created a brand new empty solution called SU forms, and as you can see from the solution explorer, there are no forms yet in the solution. So much like we did in the working with solutions video, I'm going to start off by making a new form. I'm going to come here right click on forms and say create new form. Now here mine is pre-filled out because this was the last form that I created. One of the first things that you want to do when you create a new form is you want to have a naming convention in mind. And the reason that you want to have a naming convention in mind is because all of your forms need to have a unique form name. One of the connections that I use is to put FRM in front of it for a form, or if I have a table, TBL, or if I have a list LST. And that's sort of my organizational way to let myself know what the purpose of that form actually is. So the next step is to choose the table that I want this form to be based on. So if I click the ellipse here, I can see that I have a list of all of my name database connections. I scroll to the top here. You can see at the very top there's an option that says none. Starting in Servoyfive, you don't have to base a form on a table. It can be based on nothing. Why would you want to ever do this? Well you may want to create a form in your solution that only has form variables on it. Maybe you're going to make a dialogue or something. So you don't need to access any underlying data on any table. The other thing that I'd like to point out is because you have access to all of your name database connections, your solution can contain forms from multiple different databases, from multiple different database vendors that are physically resigning on multiple servers or even in the cloud. One more tip that I'd like to pass on to you here is that there's a filter box at the top of this particular dialogue and you'll see it appear in a number of other places as well. It's really handy if you have lots of different database connections and those databases contain lots of tables. It can save you a lot of scrolling time. So for example, if I wanted to filter all of the tables from all of my connections that begin with the letter C, I simply type the letter C and it will show me here that I have all of these tables that begin with the letter C. It'll save you tons of scrolling and aggravation. So I'm going to base this form on the customers table that's in the example data. Now I don't have any views in my examples here, but if you had views in your back end database, those would show up as well as the physical tables. All right, so we've chosen our table and the next option is this extends. This extends has to do with form inheritance and we're going to get into form inheritance in another video. So for right now, just leave it at none. The next thing you can choose is a style and again, we'll talk about styles in a future video right now. Leave it at default, template at none and the solution is SU forms. This will come in handy when we talk about modules so you can create new forms in other solutions that are linked to your main solution as a module. But for right now, just keep it set to the current solution, which is SU forms. Now I could just click the finish button here and it would give me an empty blank form. But I'm going to click the next button and as a voice show me all of the columns now that are in that table that I've chosen in my customers table of the example data connection. So I can choose a place of single field just by clicking on it or I can hold down my shift key and grab a whole range of fields or I can hold down my control key and select different fields that are not contiguous. Also most as I scroll down here that I can also place calculations, global fields and aggregate fields. I currently don't have any of those to find so it won't do us any good to take a look but just know that you can place those fields on your physical form as well. Down below the field list are options and the default option is to place these fields on the form with labels. You can also choose to fill out the text property and or the name property. You can also choose to place them horizontally across the page rather than vertically down the form and finding the last option is places labels. This is really great if you want to have a read only form and so it will automatically place labels rather than editable fields. Now that I've chosen the fields that I want to place on the form I'm going to come down and click finish. Spencer Voice generated the form for me, put the labels on it and put field objects all aligned to the grid. On the right hand side there's lots of different properties at the form level which we'll talk about in just a minute. But first I'd like to take a look at the solution explorer. As we expand the node for our FRM underscore customers form you'll see a number of different objects. I'm going to go through them quickly here because we covered most of them in the working with solutions video. So the controller object is on every single form. As are variables elements selected record and relations. This is common to every single form that you create in servoy. The controller object of a form does just that. It controls the data access. So if you look down here at the bottom there are all kinds of things that you can do to a form via its controller including delete records and duplicate records. You can get the maximum length of columns, get the data provider names, you can get data sources, part heights, all of these kinds of things about this physical form. So the thing that you need to remember is when you want to deal with anything to do with the actual data like add a record, delete a record or you want to find out about objects on the form the controller is what you want to look at. Next up we have form variables. So we are variables are just what they say. They are in memory variables that you can create that live only within the scope of this form. So to create one click the create variable button and give it a name. Again your naming conventions can come in handy here. So I use F bar and then the name of the variable that I want to create. So I'll call one called temp. And then you can choose the data type text integer number date time or media and you can also choose the default value. The default value can be a quoted literal in the case of a text it can be the current date. So there's lots of things that you can do with the default value. Most of the time though you'll want it empty or null. To create the variable just click OK. Once you click OK then you'll see a code editor come up. It's called FRM underscore customers dot JS for JavaScript. So this form has its own JavaScript file that will contain all of the form variables as well as all the code that you want to put in that specific to this form. We'll get more into creating variables and the code blocks when we take a look at the JavaScript in a future video. Next on the tree we have elements and the elements on a form are any elements that have the name property filled out. As you can see there are no named elements on this form we chose not to automatically fill out the name property but I'm going to go ahead over here to the city field and click on it and notice how the properties over here on the right hand side changed. It says that we are editing the field called city and it's giving us the data type and in the length just for our reference. So if I come down over here to the name property again think naming conventions I call field objects FLD underscore and I usually name them the same as the column in the database but that's up to you. So once I've given this object a name there's a little asterisk right here that means that this form has been changed but not yet saved. So I'm going to come over here and click the save button or control S. And now when I come down to my elements if I expand the node you'll see that there's the object FLD city. So why do you have to give objects on your form a name? You do this so you can programmatically access those objects during runtime and if you're not going to programmatically access them at runtime then there's no need to give them a name. If I then come down to field city and click on it then there are all of the properties and functions that I can access programmatically at runtime. The next node is called selected record and this is going to come in handy when you're programmatically trying to access the data that's within the field. So one important concept to realize is that the field does not equal the data. The field is an object itself and that object has properties. The data that's within that field object comes from a column. So down here at the bottom you can see a list of all the columns that are in that table. And the tool tip text will tell you the data type the length and whether or not the field can be null when you create a new record. There's another very important concept when it comes to thinking about data and the way that that's a voice manages the data and the objects that the voice creates in memory when it accesses the database. Whenever you access data from the database, what will create an in memory object called a found set. And this found set has a lot of properties about it. For example, it has a SQL query that is a voice to get the data set. has any parameters. So if you did a find or it's through a relationship, then it will have those SQL parameters as well. And it will have other things like record counts. It will have the current value of the data in each of the columns. And you can programmatically use this found set rather than referring to the physical objects on a form. Another important thing to know is how Sirvoy actually fetches the data from the database. Sirvoy will go ahead and grab the first 200 primary keys and put them into the found set object. It will also go ahead and grab the first 10 rows worth of data. And then if you need more data, it will intelligently go and fetch that data as needed. When the form first loads, Sirvoy goes and grabs the first 200 primary keys. It will also grab the first 10 full records of data so that it can populate it right away. And then as you page through those 200 records, if you come to the end of the 200 primary keys that is fetched, it will fetch the next 200 primary keys and so on and so on. This is to ensure that the performance stays high both in the smart client and in the web client as well. Now the last note here is the relations node. Sirvoy will only show you those relations where this table is the source table or on the left hand side so that you can reuse those and place related fields or tab panels or whatever else you want onto the form. All right, now we're going to go ahead and place different kinds of objects onto our form and take a look at their properties. To place objects on a form, you're going to use the toolbar here at the top. So this is to place labels. You can also place fields manually. So let's go ahead and do that. Now I can place the columns that are in the actual table that this form is based on, but I can also place calculation fields, form variables, globals and aggregates. And if you remember, we did create a form variable, so let's put that on there. And it looks and behaves just like a quote unquote normal database column. The thing that you need to remember is that again, these are field objects that contain data. And these field objects, these actual rectangles are objects themselves that have their own properties. So this form variable can act and look just like a data value coming from a table. The next thing that you can place is a button. We'll have our little button over here. You can also place Java beans. Java beans are pre compiled Java programs that do usually one or two things really well. There are all kinds of different beans. And most of them have some kind of a graphical user interface element to them, like the J button or the DB tree table view or the DB tree view. Now not all of these Java beans will work in the web like they do in the smart. Some of them won't render at all. But there are some of them that will work just fine because there boys modified them to work in the web client. The two notable ones that you'll use the most in terms of beans is the DB tree table view and the DB tree view beans. Those will work fine in both the web client and the smart client. But just for a simple example, I'm going to choose this I clock here and we'll put it out on our form so you can see what a bean looks like. So here I have the bean. I can resize it just like any other element. And there's a lot of different properties there on the right hand side. We'll talk more about those in just a second. You can also place image media and they can be background image media. There's also a split pane and a split pane allows you to have resizable regions within your form. And then there's also a tab panel. So a tab panel can be with and without physical tabs and they can contain other forms. You can also place basic shapes like circles, rectangles, rounded rectangles, etc. One thing to note again, if you're using the web client rather than using those shapes, the best thing to do is to actually use a label rather than this drawn square. These drawn objects don't translate to the web at all. So you can either use your own custom media or for boxes use a label. All right, now what we're going to do is I'm going to click on each of the different object types and we're going to take a look at their properties and discuss them in detail. So the first is the label. And notice here on the right hand side is says label slash button at the top. That's because labels and buttons share all of their properties. At the very top we have events. So an on action event. When you're talking about a label or a button, this is a click event. So if they click on it, you can choose to trigger a method. So I can double click this here and I can choose four methods or global methods and I can create a new four method or create a new global method. And that's the same for all of the events. There's on action which is a click on double click and on right click. As close as up now since we've talked about the events. Now the properties, there are anchors and if I expand the anchors, you see that there's top right bottom and left depending on which anchors you choose top and left are the defaults. So the distance between the object and the top of the form and the object in the left of the form will remain constant regardless of how wide the window is dragged. If you want this label or this field to grow wider as you resize the window, then you would choose to anchor it to the right side as well. So the space between this object and the right side of the form would always remain constant and therefore you would have the effect of stretching the element. The same thing goes for the bottom. If you wanted to have the element both grow taller and grow wider, you would anchor it on all four sides. Next is the background color. So if you double click you can see that you have the color chooser here. You have a standard palettes and you can also define custom colors. Next on the label we have the border type. So the border type can be empty. It can be etched so it appears to be raised. You have bevel just align a title, a mat and a special mat. So they all have different properties and rather than going through each and every one of them, let's go through the ones that you're going to use the most. So on the line type you can see you can pick the color and the thickness. And the most complicated one of the things that have the most options is down here called the special mat. When you have a special mat you can specify the top left, bottom and right size of the line around the label. Also the top left, bottom and right colors. You can choose to have a rounding radius on it and a dash pattern. So there are a number of different things that you can specify. One thing to note about styling objects manually this way is that if you do all of your objects this way and you manually specify all the properties on all the objects, your solution load time is going to increase. It can increase sometimes as much as 10%. Now a way to have stylized objects without manually hard coding all the properties is to use styles and again we'll cover styles in another video. Next is the data provider of the label. That simply means that the text for the label can come from a field. In this case it's set to none because it's hard coded text. Play tags allows you to put placeholders into the field. So let me show you how that works. Let's make this custom righty smaller. So I can double click in this field and there are special placeholders which are 2% signs. So I can type percent percent city and click out. And now what will happen is if I click this display tags box we'll save our form here. Let's open it up in the smart client. What you'll see here is the label so the hard coded text and a value that comes from a field. So as I change this and the city changes this label changes as well. And here you can see our clock Java being taking away. So that's what display tags does. It allows you to embed one or more fields into your label. The next property is the font type and again the best way to specify the font type is to use a style. Now the foreground color or the text color horizontal alignment which is what you'd expect it to be left center or right again you can set this via your style. You can have an image media on both a button and or a label. And there's also this other special property called label 4. So if I have this label for the city field and I have given this a name which I have FLD city I can say that it's a label 4 FLD city. So now what will happen is if I take this FLD city field object and I hide it the label will automatically hide. Likewise if I disable the field then the label will disable itself too. It saves you a step so that you don't have to programmatically do the label and the field object itself. There's the x and y location of where that is so you can programmatically change that. You can also manually change it so if I change this click you'll see that the city label jumped over 10 pixels to the left. There's also a margin property of the label so you can have a top left, bottom and right offset in pixels. Right now there's no left offset but let's make something ridiculous and put in 10 pixel offset and as you can see the city label now has a nice offset from the left hand margin. There are media options. If you do have a media on here you can choose to crop, reduce and large or reduce or enlarge the image based on the size of the object. We saw what the name property does. There's a printable flag and there's also how the print sliding behavior will happen. If you're designing a form that is a printed report you may want the object to move horizontally, row, shrink, all of those kinds of things based on the objects around it and whether they have data in them or not. That's what print sliding does. You have a rollover cursor and there's only one option which is default which is the pointer or the hand icon. This is handy if you have a label that also functions like a button. You can change the cursor to a hand that works both in the smart and the web. You also have rollover image media. If you have a button or a label and you want the image to switch out when the user mouse is over it, that's what the rollover image media is. You can also use rotation. So here you can choose to rotate at 90 degrees, 180 degrees. So let's see what that looks like. So this has been rotated 90 degrees. Well, I have to change the size of the object. So here it's been rotated 90 degrees. Again one thing that you should note that this rotation does not work in the web plan. This is a smart client only feature. These next two options show click and show focus. If you have a method attached to one of the events, so our on action which is the click, will click or right click, you can control what the behavior or how the field actually looks. So the show click means it will look like it's depressed and show focus will mean that the focus ring will remain on the object after the click. You can turn those on or off. We have the size. Of course that is width and the height. You can change those by changing them numerically or you can drag them. And you have a style class. We'll get into that more in the styles video, but you can have different classes of objects so you can have different types of labels, different types of fields that have different formatting on them. If a tab sequence, which we'll talk about in just a minute. And this is the actual text. So I showed you that you can double click in the label and change it. Likewise you can double click here and change it as well. There's also tool tip text. If you want to have a tool tip on this particular object, you can type it in here directly or you can also include fields in there and you can include I 18N or internationalization strings as well. And again we'll talk about I 18N in its own separate video. Finally you can set an object to be transparent or not. And you have a vertical alignment. So the vertical alignment is top center or bottom. So those are all of the properties that labels and buttons share. Let's talk a little bit about fields. When the field is selected, it will tell you what field it is, what the data type is, and what the length is. Now here are the events. You have an on action. And the on action depends on how the field is formatted. Now when you have a single line text field like this address field, the on action is actually the return key. So that way you can do cool things like a Google search. So you could have a physical field or you could have a form variable that when the user hits the return key or the entry key that the method will trigger. You also have an on data change. So if the user changes the data while they're in the field and then leaves it, the on data change is fired. On focus gained. So when they click into the field, you can trigger a method on focus lost as the focus is leading that element and then on right click as well. A lot of the properties for the fields are the same as they are for labels or buttons. So you still have the anchors, the background color, the border types are the same. And here you have the data provider. This is where I was saying earlier that the physical field object can be different than the data that's in it. So I can reassign this. I may want to put the fax number here. Even though the label says address, I can still change what column the data is coming from or make it a calculation or global. The display tags works the same way, but this is really interesting because if your field data contains that percent field name percent percent, it will actually render live as you change records. So that's pretty cool. One of the big differences between fields and labels is the display type. The default is a text field, which is a single line field. So it doesn't have any scroll bars on it. Next is a text area that does have scroll bars and will accept return characters. You have an RTF area, an HTML area where the user can stylize their text with bold italic colors. But the data that gets stored in the database is raw RTF or raw HTML. There's also what's known as a type of head display type. This type of head display type means that as they start typing letters that, so boy will automatically take a look at the data that's stored in the field and will try to bring up suggested matches based on the characters that they've entered. You can also optionally attach a value list to this field. And as they type, it will be constrained rather than to the data that's in the table. It'll be constrained to the data that's in the value list. Next is a combo box, also known as a pop up menu. You have radio buttons, check boxes, a calendar. So what the calendar will do is it will put a little icon at the right hand side of the field that will let the user choose from a picker to choose the date. This field can be an image media type which gives it other kinds of options like the right click to load a new image in or to get the image out. A password field that simply masks the data that's entered with bullets rather than showing the plain text. Right, so that's the display type. You can also choose to make a field edible or not edible by default. If it's not edible, it shows in the developer view as grayed out. You can also programmatically control this at runtime. Again, we have the font type color. And then there's a format option as well. This comes in handy when you're going to be using special formatting for social security numbers or you want it to be all caps or text only or special phone number formatting. You can also change this property at runtime. So if you have US phone numbers that you want formatted one way and international phone numbers that you want formatted a different way, you can do that also programmatically at runtime. This is also where you can set date formats and currencies and whatever you want in terms of formatting the data for display. Horizontal alignment is the same location. Margin is the same. Again, it has a name property as we saw with the city field, whether it's printable, print sliding is the same. Hobars only apply when you have a display type that is set to text area, RTF area or HTML area. So your options for your horizontal and vertical scroll bars are never always and when needed. You also have the option to select all the contents of the field when they first click into it. The size is the same, the style class is the same, tab sequence is the same, the title text, tool tip, transparency are all the same as the label and button and then down here you have a value list. So you can attach a value list to a field and you can format that field as a pop up menu or radio buttons or check boxes or you can use the value list in conjunction with the type ahead display type. Now let's talk about sort of the odd person out which is this Java being. You'll see that this Java being has a lot of different properties like the dial color and the font and the tick color and the background color and all kinds of things. Now, I mentioned before that different beings have different properties and it's up to the person that wrote the being to expose these properties. So let's place a different being on here so you can get an idea of what I'm talking about. If I place something like this DB tree view being on here, we'll notice that the properties for this particular being are very different than the properties for this being. There's a couple of more objects that we haven't talked about. One of those is portals and then the split pane and the tab panel. To show you how those work, I need to take a couple of minutes and create a couple more forms. And with that, we'll wrap up part one.