Hello, in this video I will talk about if you are components and I will try to cover as much as I can or just components. So let's now try to see what is the ADF components available here. So just we can create a simple page we can call it maybe I components okay can use our pitch template to open the component palette we can go for Windows window components okay so this is the component as you can see, here there are five category of the component This is ADF faces components, zero general controls, tickets installation, Data View menus and toolbar and layout. There are more than 200 components I will not be able to cover all components. But I will try to cover as much as I can for using any other component if you don't know how to use it just Google it and you will find a lot of example using the components.

First initially let us talk about the layout component how you can design your page layout. There are some components for page layout, I will try to cover the most important components we are using to design our page layout. For example here we have our beach template and this is zone body as we as I described last video in this body now, let us run the beach and see what exactly is a design we want to implement. Okay, so this is our pitch Okay, as you can see this white space is our pitch. Now if you want to design the layout of the page, like if you want to create to split this page part in the left and one in the right, maybe in the left you will add some links and enjoy Right will be his body. So, in that case you to split your page horizontally or split it vertically up and down like this to do that, there is a layout component called banded splitter.

So, let's see where it is bending splitter as you can see this is a layout component you can go for a bending splitter this okay so, you can just drag it here somebody as you can see Ben splitter will give you to face it one you can open the structure to see it more clearly. So, in the main splitter you will find it is split in two parts. First one by default will be the left second will be the Right okay to decide the width of the first one, you will find here in the Bertie splitter position 200 it means this 200 pixel will we go here. So, the first spot will be in this area and the second part will be the rest in ETF component it will start with F e f if component. So, any component with f you will be able to see its Bertie's some fixit properties for common for any ADF component and there are some specific vertices for each component is a common Bertie for all component if component you will find it you will find the render Okay, you will find appearances tired behavior, advanced and customization This is you will find all this stuff for any day of course Wanna disable will be for any Deaf component, a Bosch or triggers will be for any component.

We will talk about all of this during this course. Okay, so let's now we are independent splitters, we go to the perverted how to open the properties, right click go to properties, you will find the word soup and splitter you can decide what is the blitter position you want to do. For example, I needed more white so I needed 400 Okay, by default, the orientation will be horizontal means it will split horizontal if you want to split vertical. So you have to change this to a vertical but now as I said we need to split it to part first of all I need to add some links and just like second board PB a table. So, this is now first one we will add some links just To just for us, for example, just a tip or we can add something to a table for example like department as a table in the first one, this is one of EDF component i will talk later about it.

And in the second one second part, I will add, as in Billy as a detail table. So, let's now run the beach and see how this would work. As you can see, this is department and this is a detail of employee. Once you select the department you can see the Employee Benefits splitter by default, you will have collapsible section if you want to split the screen was that with this collapsible section okay so you can there is a barbarity here in the pendant splitter okay. You make it disabled through any change in the big level No need to restart running it again just refresh you will find here that collapsible is gone now you split your page if you want as I said increase this No I don't want it I need it more widely. So you can go here again and see instead of 400 and you get 600 so you will find here this become more white.

Like like this. Okay, so this back again and emitted collapsible as you can see here you can collapse the left side but if in case you want to collapse the other side, in this case you can select here position from end motions from end is make it true okay is that case this 600 will count from here and it will collapse this area. Now, you will collapse the inventory department. So, this is the first component for design your layout in case if you want to split your page, horizontally or vertically you can use this bundle splitter I will give you Nick is another example for the binary splitter, but in the next video so see you next time