Creating Web Components
Welcome to Creating Web Components for Servoy University, this is Scott Butler. So, what is a Web Component? It’s a reusable component consisting of a user interface and logic. For those of you coming from older versions of Servoy, this is a similar concept to a beam, except a Web Component is now NG Client compatible. So, let’s just jump straight in and show you how to create a new one. We’ll start with a little sample solution I have here, and we’re going to expand out the main solution node here, and then we’re going to take a look at Web Packages. We’re going to right-click, and we’re going to create a component package project. And we’ll give it a name. That’s important to keep in mind that there’s lots of restrictions on the name, so it basically needs to be lowercase letters and or numbers. So, we’ll just give mine a test name here, we’ll call it great buttons, and we want to choose what solution it relates to. So, these packages are sort of managed outside of the solution level, but they are, however, related to your solution. So, you can have a Web Component that relates to various different solutions. By default, it checks the solution that you’re in, so we’ll leave that default, and we’ll hit finish. So, you can see it’s created a new node under Web Packages for my new package name here, and so we’re going to right-click on that, and we’re going to create the actual component now. So, we’ve created the package, which is sort of like the container, and then we’re going to create the component, which is the individual component. So, if you think about great buttons as my package of all of my different buttons that I’m going to create, and then every time I create a new button, I create a new component inside of that package. And I’ll just give it a name here, we’ll call it test. So, when we do that, notice that we get a new node under great buttons under our package name, and we have three new files created. Let’s double-click and take a look at these. So, the first one, it represents the user interface. So, this is the HTML code for how your component will render. Next, you have the JavaScript. So, this is the logic that goes along with your component. Now, keep in mind that this executes client-side. So, we’re creating interactive components for the client. So, this is not server-side logic at this point. Next, we’ll take a look at the spec file. The spec file is what tells the servoy designer how to interact with your components, and we’ll cover these each in a little bit more detail. But let’s first just start by taking a look at what servoy has created for us out of the box here. So, we’re going to open up our forms, and I’ve got a little sample form created here, and I’m going to switch to the new HTML5 form editor, since I know I’m working in the ng client. And you’re going to notice that my great buttons package I created now shows up just like the servoy default components, and there is my test component that I’ve created. And I can take and just drag that onto my form, and notice it just renders hello world. And I can click up here. I can see that there’s a property called your name that has a value. So, I’m going to call it servoy u, and click out, and notice that the component updated in real time, and is displaying hello, plus whatever I typed into the component value. So, let’s see how this works. Let’s start by looking at the specification file. So, as you can see, this is pretty basic, which just has a display name. So, these sorts of things you really don’t want to modify too much, unless you’re updating your version. You have our reference libraries, so you have the ability to reference third-party JavaScript libraries, if you’re a component depends on those, so you can reference them here. And then we have model. The model basically represents the selected data providers, if you will. The inputs for what your component is going to use for rendering. So, in this example, it says we have one called your name, and it’s a string, and it has a default value of world. So, if we jump back over here to our component, we can remember that when we clicked on it, we have a property here called your name. So, that’s why this shows up. So, the properties panel on the right here, the available properties are going to be determined by what’s in your model on the spec file. And you can do a lot more with that. You’re going to want to become familiar with the servoy wiki, and referencing some of the specifics of each of these. So, under the servoy documentation, under client, specifics, and G-client web components, we can take a look at the specifications for each of these different types of files. We’ve talked a little bit about some of these already. Let’s jump into the model. So, let’s take a look at the details of the properties. So, we’re going to expand out the spec file, and we’re going to click on property types. So, we’re going to get a list here of all the different types of properties that you can specify on these. So, you have things like Booleans, Borders, and all sorts of different things. So, you can be as basic as just a static string input, or you can specify things like dates, or even data providers. So, this is going to be a popular one. If you want to actually allow a form variable, global variable, or a column, to be passed in, you can just specify that it’s a data provider. So, let’s actually go ahead and try that one. So, we’ll come back over here, and instead of doing type string, we’re going to do type data provider. Now, when we come back over to our form, we click on a component. You can see currently it says unresolved. So, let’s create a new form variable. I’ll call it display-val. And we’ll come back to our form here, but we’re going to choose that as the data provider, so I can now choose my form variable as the input. And I’m going to place that form variable on the form. And I’ll just place some right up there. And let’s save that. And let’s take a look at this in the debug client. So, we’ll type value in there, and we’ll click out and notice that it updates in real time. So, you’re looking at the data-biting automatically built in for you, to the Serve-Boy web components. If we come back to the property types, you can see there is a vast amount of options available, so we’ll be working on trying to create additional videos for you of some of these more advanced examples. Let’s go back to the spec file documentation, and look at what else we have. So, we also have handlers, and we have API. So, these are functions that you can specify to have your code executed at certain points, and you can bind your method on your forms to these specific handlers. So, back over in our specification file, we’re going to add some handlers. So, we’ll edit our file, create handlers, and we’ll call this my handle. So, that’s the name that is going to be referenced to where we’re looking at the property area, and we’re just going to define that that’s a function, and we’re going to put that in quotes. All right. So, now we’re going to come over to our code here, and we’re going to click on our component, and we can see there’s a new event called my handle, so I can double click on that, and I can specify a form event, so we’ll make a new one, and I’ll just do something like occasion. So, output, my handle. So, in our spec file here, we’ve defined this new handler, and on our user interface, we’ve assigned a function to it, but we haven’t yet actually defined when it should fire. So, let’s go to our test.html file. So, we can see here we have a basic div, that’s just displaying the word hello, a static text, plus whatever in the model, your name property. So, again, jumping back over here to test.spec, so you have the model, we can see you have your name. So, in the ng-bind, you can specify model. Whatever property you created in your models, so that you can render the actual value in your user interface. There are lots of other pre-made things available to you, besides just ng-bind. If we come back to the servoile wiki, we can see there’s a section provided directive filter services and model values, so we can scroll for these and see we have things like SVY Enter, SVY Click. So, let’s go ahead and copy one of these, SVY Click, and let in our call to that new function that we’ve made. So, I’m going to do this by just adding a new button in here, and we’ll paste it in there. And we’ll do our basic button interface here, and let’s go back to our spec file, and let’s copy the name of our handler, so it was called my handle. And we’re a place that in there and the handle. All right. Now, we’ll save that. We’ll come back to our screen here, and we’ll click on that. We’ll make sure everything’s still tied up correctly, so it’s pointing to the form variable display value, and it’s going to handle it called my handle. So, the one last thing we need to do to get that to work is to add this ability into our test.js file. So, you’ll notice currently the only scope we have is the model scope. And since now we’re using handlers, we need to add that to our scopes. Back in our servoy wiki, we can see some other examples here, where they have both the model, API, handlers, and a servoy API for some special situations. So, in this example, all we need is actually the handlers. So, we’re going to come back here, and we’re going to add that. All right. So, now we’ve specified that our handlers are going to be bound to servoy’s built in S-V-Y handlers, and that our spec will define handlers, that we’re linking my handle to a function, and that our test.html, we have a button, and on click we’re going to make a call into our handler. And I just noticed the typo there. So, let’s take that out. So, handlers dot my handle. There we go. So, let’s give that a test now. All right. So, I’m going to click on my button, and you can see some console output happening down below here in the background. So, I’m clicking on my button, and it’s firing my method to do some output to the console. Okay. So, at this point, we have some of the basics done here. We’ve got a component that you can assign your own data provider to string, and we did an actual data provider as well, and we have some handlers built in. So, you can fire off some actions when certain events happen. So, that covers just the very basics of getting started with web components. It’s pretty much limitless what you can do. Anything that you can get working in a browser, you can make a component for. And you’re going to find yourself going back to the wiki quite often, as you get used to the new syntax that you have to use. It’ll also help if you begin to familiarize yourself with some of the built-in angular directives. So, serve wiki provides their own options like the N, the SBY-option you saw me use for the model, and then Angular provides their own, like, NG-visible, to determine whether or not your component should be visible on the screen or not. We’re going to work on creating additional videos in the future to allow you to create more advanced web components and some more cookbook-style videos. Thank you.