on 04-22-2016 4:49 PM
Hello Experts,
I am trying to develop a view which can be reused by other projects. For this, I have created an xml fragment and a javascript file which contains the event handlers for the UI controls in the fragment .
If I have to use this xml fragment (along with the event handlers) in other projects, what should i do? What is the best approach of reusing xml views/controllers. It is of great help if anyone can explain this in details with some code snippet
Thanks
Faddy
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Jun,
I think that link talks more about javascript views (though the information provided there are useful). Also, I am developing something which doesnot use FLP. So, can you please explain it from a stand alone xml fragment perspective?
Also just for clearing out my queries, I am pasting the response from reference thread here. I have mentioned my queries in bold:
at the calling side (Question:
1. Does the following code is used to add the controller of the view (which is being reused) to the caller? 2. As I use xml fragments, I have added the fragment to the view assembly using <core:Fragment fragmentName="com.test.view.MyViewFragment" type="XML" />. So where should I write the following code?)
var oComp = sap.ui.getCore().createComponent( {
name : "com.abc.***",(Question:
1. Suppose caller component name is "com.target.Caller" and the called component name space is "com.source.Reuse". With this assumption, what value should I mention for "name" here?
2. Will it cause any issue as the name spaces are different?)
id : "Comp3",
url : "/appurlforthecomponent", (Question: How can I determine url to the component? Should that be the url to com.target.Caller or com.source.Reuse?)
componentData : {
"targetViewName" : "saywhichviewyouwant" (Question: I hope I should mention com.test.view.MyViewFragment here. How can I do that? As i refer the fragment in the view itself, is this necessary?)
}
});
var oCompCont = new sap.ui.core.ComponentContainer("CompCont3", {
component : oComp
});
at the providing side (Question: Can you quote this with an example code?)
in createcontent function of your component, you can check componentData to see which view is requested. you will return the view requested.
Thanks,
Faddy
that is nothing to do with view type and flp.
1. Suppose caller component name is "com.target.Caller" and the called component name space is "com.source.Reuse". With this assumption, what value should I mention for "name" here?
com.source.Reuse
2. Will it cause any issue as the name spaces are different?) NO ISSUE
id : "Comp3",
url : "/appurlforthecomponent", (Question: How can I determine url to the component? Should that be the url to com.target.Caller or com.source.Reuse?)
url of the reuse
componentData : {
"targetViewName" : "saywhichviewyouwant" (Question: I hope I should mention com.test.view.MyViewFragment here. How can I do that? As i refer the fragment in the view itself, is this necessary?)
}
}); RUN YOUR REUSED APP, YOU WILL GET THE URL
targetViewName is just an input parameter(you defined, you can name it to anything), which just tell what you want, but didn't determine it should be a page or a view, you can return what ever you want in the reused component.
Hi Jun,
I am still not very clear on the concept of re-usability. As I am novice in UI5 domain, it gives me tough time to understand the details which you have mentioned.
Just to state my aim very clear, I am trying to develop a view and it's event handlers reusable. For example:
MyFrag.fragment.xml
<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
<Input id = "MyInput" liveChange="onInputChanged")
</core:FragmentDefinition>
To test this fragment, I have created a view (Say App.view.xml) which embeds the fragment and the controller (App.controller.js) which defines onInputChange event handler.
App.view.xml
<mvc:View controllerName="com.test.controller.App" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:core="sap.ui.core">
<App>
<pages>
<Page title="{i18n>title}">
<content>
<core:Fragment fragmentName="com.test.view.MyFrag" type="XML" />
</content>
</Page>
</pages>
</App>
</mvc:View>
App.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/m/MessageToast"
], function(Controller, MessageToast) {
"use strict";
return Controller.extend("com.test.controller.App", {
onInit : function(){ }
});
onInputChanged : function(oEvent){
MessageToast m = new MessageToast();
m.show("Test");
}
});
Now, I have another project with View MyView.view.xml (full name of the view is com.real.view.MyView. My reusable fragment't event handler resource root is com.test.view.*) where I want to reuse MyFrag.fragment.xml and onInputChanged event handler (similar to App.view.xml and App.controller.js mentioned above. However, instead of copy pasting the event handler code to MyView.controller.js, I want to put it in .js file and reuse it).
So my question would be: How can I make the event handler generic and reusable? Can you show it with an end to end example (as I am not an expert, I am not understanding where to write what, so asking for the complete code)? If you can share the project source code completely, that would clear all my questions.
Also, is there any way to create a library of MyFrag.fragment.xml and it's event handlers and provide it to developer so that they can make use of it like other javascript files (instead of copying view fragment and corresponding javascript files explicitly)? If yes, how can I do that?
Thanks,
Faddy
Hi Jun,
I have revisited the explanation once again and tried to do some homework myself. At the end, I was able to load the view from one project to other as per the approach you have mentioned. However, I am still having an issue.
My Caller index.html looks as follows
<html>
...
<script>
var oComp = sap.ui.getCore().createComponent( {
name : "com.test",
id : "MyComp",
url : "/ReuseLib",
componentData : {
"targetViewName" : "Test"
}
});
sap.ui.getCore().attachInit(function() {
new sap.m.Shell({
app: new sap.ui.core.ComponentContainer({
height : "100%",
name : "Call_Reuse2",
component : oComp
})
}).placeAt("content");
});
</script>
...
</html>
In /ReuseLib UI5 app, I have a lading page view (named App.view.xml) and a second View (named Test.view.xml). I am trying to load Test.view.xml using
componentData : {
"targetViewName" : "Test"
}
However, the default view (App.view.xml from the calling side) is the result which I am always getting. Event if I exclude the code:
componentData : {
"targetViewName" : "Test"
}
it still gives App.view.xml output.
I am using web ide for these developments where default view (in calling side) is mentioned in manifest.json. Also, I did not write anything in specific within Component.json of calling side.
Can you please tell me why it always loads the default view of calling component (App.view.xml) though I tried to load another view (Test.view.xml)? Also, why
componentData : {
"targetViewName" : "Test"
}
does not have any effect in my case?
Regards,
Faddy
Hello Jun,
Should I write createContent() method in Component.js of the reusable project? I have two views in reusable project: App.view.xml and Test.view.xml. Default view is loaded from manifest.json. How can I write createContent() method here so that App.view.xml or Test.view.xml will be loaded based on componentData at caller side?
As I am novice in this area, it would be really great if you can provide the code snippet
Regards,
Faddy
Message was edited by: Faddy Learner
User | Count |
---|---|
87 | |
10 | |
10 | |
9 | |
7 | |
6 | |
6 | |
5 | |
4 | |
3 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.