WEBVTT 00:00.090 --> 00:02.070 Hello everyone and welcome back. 00:02.070 --> 00:07.650 As we all know one of the most common tasks when creating a graphical interface for our Web site is 00:07.650 --> 00:10.150 that is tied to the HDMI elements. 00:10.200 --> 00:15.630 Uses RSS and we also know that oftentimes this kind of an element can vary dynamically. 00:15.630 --> 00:18.990 For example when the mouse over is a certain area of the page. 00:19.110 --> 00:24.950 In this lesson we're going to learn how to use the V in the directive to dynamically style the HDMI 00:24.990 --> 00:26.850 elements of our web pages. 00:26.850 --> 00:28.270 Let's get started. 00:28.710 --> 00:29.030 OK. 00:29.060 --> 00:30.990 So here we are in business to your code. 00:30.990 --> 00:35.610 And as you can see I've already written most of the boilerplate code for this lesson. 00:35.610 --> 00:43.740 We've got the DB where our application is mounted a link to view GSA domain dot the GSA file which are 00:43.760 --> 00:47.750 yet free compiled creating the viewing instance we're going to use. 00:47.820 --> 00:53.700 And as you might have noticed I've also included a link to bootstrap city and considering that in this 00:53.700 --> 00:55.920 lesson we're talking about style. 00:55.920 --> 01:00.550 We can start by creating another div inside the one we've I.D. Apple. 01:00.810 --> 01:04.680 And considering that we're using Bootstrap we can add a class. 01:05.100 --> 01:14.130 So row justified content center and a bit of margin top as well. 01:14.400 --> 01:23.570 Instead of these we can create another diva with class circle that we can now define here in the head 01:23.570 --> 01:24.220 tag. 01:24.480 --> 01:34.810 So style and your circle we can add some with two hundred and fifty pixel. 01:34.840 --> 01:35.510 Same thing 01:39.310 --> 01:49.450 height and then of course we need to add some borders or border values 50 percent if we now open up 01:49.450 --> 01:53.520 the page in a browser which I've already done. 01:53.560 --> 01:55.830 So I'm going to refresh the page. 01:55.960 --> 02:01.420 We see that of course even though the code is yet nothing is shown because of course when you define 02:01.480 --> 02:08.680 a background color for our circle this is a perfect opportunity for us to start using future yes to 02:08.680 --> 02:10.210 give style to our elements. 02:10.210 --> 02:17.440 And specifically we're going to use the V bind the view directive to bind a set of values to the style 02:17.500 --> 02:18.410 attribute. 02:18.430 --> 02:22.640 So we're in the same div we've Class C call. 02:22.780 --> 02:27.790 We can define v bind color and style into style. 02:27.790 --> 02:34.870 We pass an object where we can define all the different properties using camel case notation and their 02:34.870 --> 02:36.190 respective values. 02:36.190 --> 02:43.840 So for example the ground and then camel case color and if you've never heard about communiques that's 02:43.840 --> 02:44.860 just what it is. 02:44.890 --> 02:51.490 If a property or in general a name is composed by more than one word all the words after the first one 02:51.580 --> 02:54.100 ever the first letter capitalized. 02:54.160 --> 03:04.630 So as background color we can set green it and we can also add some borders or border five pixels solid 03:05.680 --> 03:06.610 orange. 03:06.610 --> 03:09.610 We need to close the object of course. 03:09.610 --> 03:15.430 And if we now go back to the browser and we refresh the page Yeah we can see what a beautiful circle 03:15.910 --> 03:21.520 as you can see this is really powerful and an even better way to do so is to move this style object 03:21.820 --> 03:25.990 inside the detail object within our view is this. 03:26.170 --> 03:38.680 So data India style object we can pass that object maybe as a bit of indentation just to make it look 03:38.680 --> 03:46.570 better like so we can now just pass the name of the style object you are in for now go back to the browser 03:46.660 --> 03:50.430 and refresh the page see article is still here. 03:50.440 --> 03:50.950 Perfect. 03:51.310 --> 03:55.030 Let's now define another CSF class square. 03:55.210 --> 04:04.010 So Square and I'm just going to copy all this ISIS code except for the real use of course. 04:04.580 --> 04:10.760 Let's now see how we can use view yes to dynamically change the class of our diva from cynical to square 04:10.940 --> 04:12.360 and vice versa. 04:12.500 --> 04:14.120 Just by pressing a button. 04:14.120 --> 04:17.320 So I'm going to write a bit more of H to email code. 04:17.330 --> 04:24.860 I'm going to just copy it to leaves like so and notice how I'm staying inside the DB we've I.D. APD 04:24.920 --> 04:26.660 is very important. 04:26.780 --> 04:29.850 And so yeah at this time I can just add a button. 04:30.050 --> 04:34.850 So thanks so mutton. 04:35.350 --> 04:41.670 And considering that we're using Bootstrap I can add the classic battle button success. 04:41.740 --> 04:48.700 India changed shape as you might have guessed based on what we've learned in the previous lessons. 04:48.700 --> 04:55.030 The best way to achieve our goal in this case is to use a method and we combined that method to their 04:55.030 --> 05:01.990 own clique Dom event using their V on active or simply the at symbol. 05:02.140 --> 05:09.700 So either we can just call this method change in shape and of course we now need to define the method 05:09.700 --> 05:10.420 itself. 05:10.420 --> 05:16.400 So your methods change shape. 05:16.640 --> 05:22.760 And even though we've just defined these fantastic change shave method we still need to figure out a 05:22.760 --> 05:25.800 way to actually change the shape of our leaf. 05:25.970 --> 05:28.040 Well doing so is actually pretty easy. 05:28.040 --> 05:31.580 We can define a boolean flag and use a shape or the other. 05:31.730 --> 05:38.150 According to the value assigned to the flag so we are in the data object I'm going to define a flag 05:38.480 --> 05:41.660 variable which I'm going to initialize as true. 05:41.890 --> 05:46.910 And so every time the change shape method is called the Value flag will change. 05:47.510 --> 05:54.410 So these dot flag equals not these dot flag. 05:54.530 --> 05:57.770 We can now go back to our age the email file we can use. 05:57.890 --> 05:58.670 V bind. 05:58.670 --> 06:05.630 Once again this time on the class attribute idea we can simply specify that we want to f the circle 06:05.630 --> 06:13.550 class when flag is true and the square class instead of flag is false. 06:13.670 --> 06:14.670 Pretty symbol. 06:14.810 --> 06:16.550 So let's now go back to the browser. 06:16.640 --> 06:18.510 Let's refresh our page. 06:18.530 --> 06:21.600 Yet we have our changed shape button and you replace it. 06:21.620 --> 06:28.610 Now you'll see that active changes shape and we can now just press it as you see to change the shape 06:28.760 --> 06:30.740 of our div awesome. 06:30.740 --> 06:34.590 If you want to you can now take a second to appreciate our powerful view. 06:34.650 --> 06:35.120 Yes. 06:35.120 --> 06:41.350 Release as you see we've created a very powerful and interactive effect for our web page. 06:41.390 --> 06:49.270 Just by writing very few lines of code you can start to realize and understand our powerful view. 06:49.310 --> 06:49.780 Yes. 06:49.790 --> 06:50.690 Release. 06:50.690 --> 06:52.700 And that we can make our life much easier. 06:52.760 --> 06:56.660 Even when developing complex applications as we'll see later on. 06:56.720 --> 06:57.220 Okay. 06:57.260 --> 07:00.690 That was it for this lecture about class and state binding in Georgia. 07:00.710 --> 07:01.310 Yes. 07:01.340 --> 07:02.330 See you in the next one. 07:02.330 --> 07:05.390 What are we going to talk about the listed ending with v4.