Hello, in this video I will show you how you can create a declarative component. But before we start creating the component, let's see what actually the thing is, which is a user should sit for any component. Let us pick one of the existing component for example, Bennett collection, this collection one of the existing components. So what is the user can set? Okay, how would the user can use this component there is some visit the user can put some components inside some specific base is a face ID and this component will display it somewhere in the component for example, z give us the physical toolbar. So once you add in a component inside this top bar, it will appear in this area.

Z give us another status bar. For example, if you add any component inside status bar, it will display ads ran towards the bottom of their component. So this is one of the singers, which once you define the component, you can give the user an option to add any other component and you can decide which part of your component it will display the user components. So, this is one thing, other thing. For example, if you select the table, you will find you can set the value set with some, this is called attribute. So, the second thing that your component can provide is a user that can tell the user send me some information some attribute and you can use this attribute in your component.

The cert sync is a method in your component you can give an option the user has a listener like a disclosure listener consolation listener, selection listen on itself. So, you can give the user option to add the missiles in new component. So, once you Define the component, your component should have or maybe have three things first thing, you can add a face it in your component to give the user an option to add his own component and you can control where exactly this component will display the rule appear. Second thing you can tell the user to send some attribute or some information and you will use this information in your component or can you give a user an option to write a miss in our component, which we will create in this course will be a custom delete component. This delete component wants the user use this component, this button will give him an option or an ability that so use the confirmation message will be displayed and the user can see yes, you need to delete the row or not.

So actually what we need we need to send someone permission for something he is this is our This is a DVD put on So we can tell the user sent us the tickets of this portal, because maybe his user can has its own resource bundle or his own language. So we can throw it at tickets as I fix it. For this component, we should give the user an ability to send us tickets, and a icon as well, the user should send us an icon, which you want to display in the bottom. What else we can, let's say user sent to us we can send to us so binding itself which, which is the operation name is a big definition. If you go to here's the pointing, you will find this pattern is pointing to delete. So I bration ID, which exists in the beach definition.

Sometimes user has read 132 whatever name so the user should send us the binding immigration name. Okay, once the Bobo is a beer there are fighting for the pub or the message message body itself. Are you sure you want all this message, so users should send it to us. So let us now create, delete button, and delete. The user sent us the tickets, offices, buttons, icons, which you want the operation ID name of the delete button, and we will create our model. So let's let's now create a declarative component.

So to create your own or your custom component, you should create a new normal ATF application. So I will create a pf application and I can call it my custom delete component nickers nickers. This is a normal PDF application. So now, I need to create a declarative component. So in web content, I will right click knew from gallery in the ages if and the faces you will find here if declarative component. So, you can search here for ATF declarative component or you can go to the web tier a GS if face it you will find here it if declarative component and the brace okay here is the declarative component name I can call it my custom delete bottom okay and in edtech library This is will be what is the component name which will appear in the component palette.

So, once the user use your once you are using your component What is the name which you want to see in the component palette so, we can see My delete button okay. And we can right here as well my delete and the brace okay. As I told you, there are three things you can define in your component. If you want to add some visit to let's say user add some other component somewhere attribute or missile. In our case we need just some attribute. For example, I need attribute which would be the bottom tickets we can see the book tickets and it would be string and we can give a default value the default value will be delete, otherwise the user if you want to change it, he can change it.

Then we can give is the binding Operation ID. So we can say operation ID by default it will be deleted as well. Then we need to set the icon. So, you can see bottom icon and it is not required as there is no default value. And then we can send dessert bar title, bar title, the user should show should send us our is aborted, which he would like we can see the default value, delete confirmation as a title loser Bob. The last thing we can see the message itself delete message We can give a default value which is are you sure you want to delete the record for example, this is an example okay.

So all this attribute which we need while developing our delete components in I will press OK. Okay, so this is my custom delete component here you will start designing your component how it looks like. Here you will find your attributes in sequential find all attributes which you defined. If you want to add any more attributes, you can select this component and add an attribute or if you want to add any face it or add anything if you want, you can edit it from here after you creating your declarative component. So let's now go to the component And to start inserting our component so are you start adding vendor group do it because I have two component ones button one is pop up. So you open in group two group both of them, then I will add one button and I need to add a bop and we can add Okay, let's start with the Bob.

Bob thickest should get from the attribute so users should send it to us. So I will add the expression builder here. Go to expression builder and I go to GCB option and I will find here scope, attributes, attributes and you will find all attributes which you have here. So I will say bottom bottom text so as a bottom ticket that's reviewed will Sit settings, seven icons I will go for exhibition builder and I will select school but tribute the school variables attributes and I will go for what an icon okay this is what we need from the bottom set after that this bottom should displays a bob so I will insert here if he says show Bob behavior and I will select my papa and it would be action so just pop up now we'll open this bottom we'll open this boat okay zebub itself is a title which is editing software Look so the title title, we'll get it from separation builder, and we can add Pite.

And the details and size of the look here. Just I would put thickest, which displays a confirmation message and this value will get from expression builder and we'll select Delete message. So, all attributes which is a user should send it to us we use it now except the operation ID which we should invoke the Delete operation in the binding and after that, we should invoke the commit operation as well. So here is the insert a look safe lettuce. So they should see it should display to bottom yes or no or cancel. So here's the the default type Okay cancel, which is fine, but we can just change the key to be here to be yes.

And if you want the user to send the ticket in support them you can add another attribute and says attribute here, but this is known as a fixed value call Yes. Okay. So now let us go for the dialogue listener and write our code in the dialogue listener hear it and carry it back been inside my declarative component. My declarative been my declarative being, you don't beat so this is my declarative component been and the missile will be deleted. Do this Okay, so let's just go back again to dialogue and the chick. If dialogue listener here it is pointing to our created dialogue listener.

Okay. So here is a dialogue listener wants to be the user bris, okay, bottom or yes button, it will call the Delete dialogue listener in the back pain function. So in this function, what I need to do, I need to go to the binding. And I will execute operation binding, whatever the user sent to me because I, I carried attribute called Operation ID. Here, I created a bit called Operation ID. So the user should send this operation ID to me, and I have to receive this operation ID Sit back pain after that I will execute the operation.

So, to go to those are binding. So we have here point the container binding in the context. One more thing here is a declarative component because we didn't create a normal GCF with a bag beans are binding. So, by default the library of the binding will not include it in your ViewController project. So you will not be able to find binding container you will not be able to find it even if the binding contiguous, it is imported from different place. We don't use this Java to library or a Java to real libraries should go for EDF library.

So because of this project currently has no GS normal GC beach with a back big definition. The Library of the beach definition is not included here. So you have to import it manually. So first I will go to the View Controller library and the Plus pass at library and the library which has this binding It is it if model runtime if not the runtime you will not be able to find it here. So, you have manually to add this ATF modern runtime and the breeze okay. So, now you will back me now should be able to find some binding tickets that remove this from the import and we should be able to import as you can see now, you will be able to import in ADF binding and binding context correct by Nikolay from Oracle Oracle ADF model okay.

So, now we will connect to the bindings a big definition after that I need to invoke the operation which the user will send it to me okay. So, from here I need to get attribute from this component so how to get attribute Which is a user sent to me and the bag been there is a way you can do it by writing Ui X declarative component and let us import Ui X declarative component Okay. Here you can receive or get the attribute which is the user will send it to you in the back beam, but you have to say two things first z components a component actually should be if you select your component your declarative component you will find here component war which is scomp who should be here like this. So, if you change the component or to any other name you have to update it here, but by default is calm and this is will be this is the first thing thing well second thing is to get attribute and you should since get attribute name so which attribute you want to receive over Issue ID This is operation ID, which I need to receive what we need to do we need to define the getting value object.

So, this is the getting value, let us import the faces multicast separation, language Kentucky's separation factory from Java separation language did value so this is the get a value object function. So, now we will receive the parameters in this value. So, after I received the operation it is a binding So, I will invoke operation binding, Corporation binding all this boilerplate binding okay it is Oracle binding or be equal the bind thing dot get operation binding and we will send the operation which we will receive from the US after that we will execute it. Okay, so now we receive the operation ID and the fromberg beam, we receive it after that I get the binding and I execute this operation. So he will see in the meeting is a delete operation like this, which is a big definition. But after I executed it, I have to execute so commit to operation to save the change in the database.

So, I will defined here operation again after I execute the operation which is interesting to me. After that I would create another video binding code omit. So, this commit operation should be should be exist in the page definition and I will execute the commit operation. So, this is the code which will be executed in the tie look listener is a bob listener wants to use a brace okay yes I need to delete I confirm I want to delete this row. So, I will go to the bind the container after that I will get the operation ID the attribute which the user will send to me I will receive it here then I will go to operation binding and undo will execute operation which user will send to me that I will execute the commit operation. This is how we can create your declarative component.

I think our component now is ready to be used. So, what we how we will use this component in EDF and our if this what I will show your negativity also see your negativity