Dynamic node & UI generation (WDJ 7.3)

Hello Juney Qiu,

Thanks alot.

I will show you the First Demo of Dynamic UI and Nodes.In that we will create the UI such as Tabs,Textviews,InputField and buttons.

Step A : Create Node and Attribute in component Controller’s init()  Method.

Here Node CTX_VN_Details is created with  two attributes CTX_VA_FNAME and CTX_VA_LNAME

Code:

IWDNodeInfo nodeInfo=null;

nodeInfo  = wdContext.getNodeInfo().addChild("CTX_VN_Details",  null,true, CMICardinality.ONE_TO_MANY,CMICardinality.ONE,true,null);

nodeInfo.addAttribute("CTX_VA_FNAME","ddic:com.sap.dictionary.string");

nodeInfo.addAttribute("CTX_VA_LNAME","ddic:com.sap.dictionary.string");

Step B: Now we Will Map Component’s Node with View’s(Write below code in

wdDoModifyView() method of View )

IWDNodeInfo
ccnodeinfo=wdThis.wdGetDynamicCompController().wdGetAPI().getContext().getRootNode().getChildNode("CTX_VN_Details",IWDNode.LEAD_SELECTION).getNodeInfo();

IWDNodeInfo
nodeInfo=wdThis.wdGetAPI().getContext().getRootNodeInfo().addMappedChild("CTX_VN_Details",null, true,false, true,null,false,true);

nodeInfo.setMapping(ccnodeinfo, true);
nodeInfo.addAttributesFromDataNode();

Step C : Create Dynamic User Interface.Here We have created the dynamic Tab UI.

Code :

IWDTransparentContainer trn=  (IWDTransparentContainer)
view.getElement("trctabs"); // This is for using already created transparent container of your view.

IWDTabStrip ts =(IWDTabStrip)view.createElement(IWDTabStrip.class,"tbs_1");//For creating TabStrip.

IWDTab tab1 = (IWDTab) view.createElement(IWDTab.class,"Tab1");//Creating Tabs

IWDCaption header1 = (IWDCaption) view.createElement(IWDCaption.class,"tbh_1");//Giving header to tab

header1.setText("Tab1");//setting Tab’s Text

tab1.setHeader(header1);

ts.addTab(tab1);//adding tab into TabStrip

trn.addChild(ts);//adding TabStrip to Transparent Container

OutPut:

Step D:Now We Will Create UI Elements in above created Tab.

To create Tab Content We will create a container in that we will add UI elements As Follows

Code:

IWDTransparentContainer tabcontent=view.createElement(IWDTransparentContainer.class);

tabcontent.createLayout(IWDMatrixLayout.class);//setting Matrix Layout of
container

IWDTextView txvName=(IWDTextView)view.createElement(IWDTextView.class,"txv_Name");

txvName.setText("Enter First Name"); 

tabcontent.addChild(txvName);//Creating TextView adding it to container

IWDTextView txv_blanktextview=view.createElement(IWDTextView.class,"txv_blank1");

txv_blanktextview.setVisible(WDVisibility.BLANK);

txv_blanktextview.setText("TextView");

tabcontent.addChild(txv_blanktextview);//creating Blank Textview  for Space between Textview and InputField

IWDInputField inpFname=view.createElement(IWDInputField.class,"FName");

inpFname.bindValue(nodeInfo.getAttribute("CTX_VA_FNAME"));

tabcontent.addChild(inpFname);//creating Input Field for First Name

IWDTextView txvLastName=(IWDTextView)view.createElement(IWDTextView.class,"txv_LastName");Creating another TextView for Last Name

txvLastName.setText("Enter Last Name");          

txvLastName.createLayoutData(IWDMatrixHeadData.class);

tabcontent.addChild(txvLastName);                      

IWDTextView txv_blanktextview2=view.createElement(IWDTextView.class,"txv_blank2");

txv_blanktextview2.setVisible(WDVisibility.BLANK);

txv_blanktextview2.setText("TextView");                                          

tabcontent.addChild(txv_blanktextview2);//Creating blank TextView for space Between Last Textview and its input field

IWDInputField inpLname=view.createElement(IWDInputField.class,"LName");

inpLname.bindValue(nodeInfo.getAttribute("CTX_VA_LNAME"));//binding inputfield with attribute

tabcontent.addChild(inpLname);

  tab1.setContent(tabcontent);//setting content in a tab

Output:

Step F:Create a Button Dynamically

To Create a button dynamically first you need to create a  Action at
design time As creating Action Event handler at Runtime is not possible.We will
create Action then will associate it with the dynamic button.

Click On Add(+) then give a name to Action.

Then Next and Finish.

Now Will Write Code for Dynamic Button:

IWDAction btnAction=wdThis.wdCreateAction(IPrivateDynamicCompView.WDActionEventHandler.SUBMIT,"Submit");//Referring to design time Action which we had created

IWDButton btn_submit=view.createElement(IWDButton.class,"btn_Submit");

btn_submit.setText("Submit");

btn_submit.setOnAction(btnAction);//linking button to a action

btn_submit.createLayoutData(IWDMatrixHeadData.class);

tabcontent.addChild(btn_submit);

Output:

Now OnSubmitAction() Will Write a code which we want to execute on click of Submit Button.

Here I am retrieving the values of Attributes CTX_VA_FNAME and CTX_VA_LNAME and Printing it.

public void onActionSubmit(com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent
wdEvent )

  {

    //@@begin onActionSubmit(ServerEvent)

String Fname="",LName="";

IWDNode node=wdThis.wdGetAPI().getContext().getRootNode().getChildNode("CTX_VN_Details",0);

Fname=node.getCurrentElement().getAttributeValue("CTX_VA_FNAME").toString();

LName= node.getCurrentElement().getAttributeValue("CTX_VA_LNAME").toString();

wdComponentAPI.getMessageManager().reportSuccess("Hello" + Fname +" "+ LName);

//@@end

}

Output:

In Next Demo we will check how to create dynamic Tables and their bindings.