Hello, in this video I will show you how you can create multi skins in your if application and the user can select in skins he would like and the whole if look and feel will be changed. I created the simulative application was entity the documents and the mbu and department UI view object. So let us now need to create a skins. So to create skin you should create here XML file is yours search for XML document and you name this file two, three need that dash kids this file during the dishes skins will have your old skins in, you will define in your application. So we just will right This is skin so now you define one skin. This is called my skin, maybe you can call it one family and my skin one and we can call my skin one to CSS and this skin will sit in our Alta v one variable.

So, here in the config you will find current family skin family which is altar and if you want so if once you want to override or write your own skins, your skin should extend the same version which you have. And you can write any you can override any feature from your CSS file. So here I defined one skin. This skin will extend out of v one and skin family core my my skin one and the stage sheet name will should be my skin one To CSS. In the indicative application, I will create three skins so I will copy this to be three skins. So your if application now has three skins skin one, we can call this a scan tool and this came through so we should now create three CSS file skin one to CSS skin two to CSS is considered CSS we have to get it this skin foils and write your custom look and feel color as you want.

So now I will go to the application And I will create my skin one my skin to my skin three is our content. I get it you from gallery, and they will search for CSS. I will find CSS file, please. Okay. So for a site file, if I call it my skin one my skin One, two CSS and this should be in the same folder because we didn't write here there should be any folder in the folder so I will put it in the main. It's a public HTML like this.

So I will create another one CSS file my skin too and it will be in the public HTML and more Skin three and it should be Interpublic HTML publishing. This is my three skins. So we should write some skins here, which will change the look and feel of ADF application. Okay, so now in the skin one, I add some, some subtle change the column and the table some unchanged the background of the document color, same in the skin to add some skin selectors and a skin care as well. So now I fill my CSS file with some styling application. The second step actually we should change this dreaded conflict to read which is can I want We have no three skin.

So here let us know commence this version and here I should try it maybe my skin one or two or three so this is should be dynamic at runtime the user will change it so this actually should read the value from back been so let us first generate a bitch we can create here for example pitch template for this because the skins and pool should be is a bitch template so I will kill it quickly bitch template when facing me in this pitch template I need to have lists drop down lists was my skin So hear me at Ben group do it and do it. He can get horizontal in each chalet make it right and I need to add a drop down list. Choice okay the label will be skin. One as the value would be my skin, one skin two my skin too Skin three, my skin three, my skin one my skin to my skin three should be the value, which we should pause to the XML file, the value, the name of my skin, as this is just a label which I wish you as a user will see Nick is the label will be skins and finished.

This is just a drop down list. The user will be able to select one of the skins as all look and feel should be changed. So let us create value change listener because we need once the user select the value, we need to change the CSS file. So I will create here a bean call it muy bien Molly Being okay. Kim value change listener. Okay, so here I create just a three misfit one to get value from session one to put value into session.

And here to refresh the page, I just need what I need actually wants the user select the skin, I need to store the skin family toe session scope, then I need to refresh the page. So this is a good witch how to refresh your page. And this is a good help to both value decision as well as how to get value from the session. So first thing I need to get, I need to get that skin so I couldn't is think skin name equal string to value of value change event don't get in new value. So I will get the selected value after that I need to put this value in decision school so I will say what in session and we can call it skin, the session variable name skin and I will add skin name in the session after that or you need to refresh bitch This is all I need you to get the selected value What is the session refresh the page.

So we should write a function here to get the selected skin so called public string, get current skin and this scan will get the value from the session scope. So object scan equal get from session and the key is skin to sim key which we use here to boil the value. And we say if skin equal equal none, if there is no value in decision scope, it means this is just user was just interested to know the default value it means the default value, we will return. Return maybe skin one Molly skin, my skin one should be there. Actually this function should return the name of the skin family which we defined in this way. We defined here My family is my skin one my skin to my skin three so we have to return the name of the family, my skin one my skin, to my skin see, so it would appear in the my skin one in case there is no discloses in case there is no any value in decision returned my default to this, but if there is a value in the session, so we return skin to string we will return the value from the session This is how you can write the code to save the selected skin, refresh the page and it gives the current skin.

So, this get comes skin, we should map it in the threaded config here. So, instead of hard written skinny here, I need to write it from the backbeat from the read it from the back bean so we can write it here like this. My bean dope and right kolinsky muy bien dot current skin so it will connect to your pain and go to the current skin and we'll get the work what is skin family So let us now create a simple beach new beach. Okay, skin and this page will point to my template we should add here I mean faces I didn't think so we add a face it means so it is here yes. Okay but we should edit in the second visit here as official reference. me Okay, so now we can add here our pitch we can add Ben splitter we can add department a new movie one as a form one as a table the faces when the collection and the lettuce track department view here has a four crew navigation okay and in the second one second Facebook ads entity in between entity table okay we can just increase with So let us now try to run this page and see okay so as you can see here, it load the default one default is skin as you can see the table row and the selected row become here white and this is how the table looks like and the height of the header and the background color so this is for the Ferris skin.

So if you select here skin to country okay because we didn't set an auto submit through. So you have to go here and select two inches our skin and you So, as I told you before, if you have value change listener, you should sit it out submit it through so that it would submit the value. So little sit submit through. Let's refresh this again. Okay, so this is select scan to. Now you will find the whole skins change the color of the water change it selected.

Rows The table is change, background colors change, you can write your own CSS as you want the Select skin three. You will find skins free as well like this. So now we are able to have multiple skins in our ADF application. If you want to store the value here, in the skin, you can just easily write the value of this To be a skin in every essential end session scope, because we store the value the session scope, so, I will add session scope.is key, our key which is skin, this is a variable name in the session scope, which was to the variable name which we store there is a skin name and we can say if the skin equal equal none, we can put in the skin we can put here my skin one if it value is not. So now this is a variable called skin in the session scope will have always my current skin So, in the value of the value change listener here, I see the value to be session scoped So any value will be in the inside the skin variable, it will set our list of value.

So let us have a look now and of course each user can save if you have a database table user you can store what is the user skin he wants and you can lose this kingdom decision scope wants as a user log into the application so that any user logged into the application, you will find a his own skin. Okay so as you can see now skin one is a bit here in the list, drop down list so that you will know which is skin you are in. Okay. And this is my current skin if you want to change it, you would change it to skin too. And it will refresh the whole page and you will find skin to still existing here like this. This is how you can add multiple skin in your ADF application and how the user can select it and how we can display your own look and feel in your ADF application.

Next video I will go to another things so see you next video.