cancel
Showing results for 
Search instead for 
Did you mean: 

How to correctly use the component-concept with multiple components

Former Member
0 Kudos

Hi,

i am working on a multicomponent-application.

This means i have 3 eclipse-projects, in each one component.

How can i link these 3 projects to work (also in the local test).

Component 1:

WebContent

     app_one

          Component.js


jQuery.sap.declare("app_one.Component");

ap.ui.core.Component.extend("app_one.Component", {

  metadata : {

  library: "app_one",

  name : "Corelib",

  version : "1.0",

  includes : [],

  dependencies : {

  libs : [ "sap.m" ]

  },

  },

});

Component 2:

WebContent

     app_two

          Component.js


jQuery.sap.declare("app_two.Component");

ap.ui.core.Component.extend("app_two.Component", {

  metadata : {

  library: "app_two",

  name : "Entitieslib",

  version : "1.0",

  includes : [],

  dependencies : {

  libs : [ "sap.m" ],

components : ["app_one"]

  },

  },

});

Component 3:

WebContent

     app_launcher

          Component.js


jQuery.sap.declare("app_launcher.Component");

sap.ui.core.UIComponent.extend("app_launcher.Component", {

  metadata : {

  name : "Launcher",

  version : "1.0",

  includes : [],

  dependencies : {

  libs : [ "sap.m" ],

components : ["app_two"]

  },

  },

});

I think this must be working in any way!

Accepted Solutions (1)

Accepted Solutions (1)

Former Member
0 Kudos

So, the only way to solve this seems to be an implicit enhancement of the UI5-Handler in SICF.

If i give a special prefix , like sap did it with "resources/" it gives you the source from an additional ui5-application.

best regards

Answers (2)

Answers (2)

0 Kudos

Hi Michael,

I don't really understand your problem. All your components have unique names, the components are in different folders. Now you just have to map the name to the folder like this:

jQuery.sap.registerModulePath("app_one", "app_one");

jQuery.sap.registerModulePath("app_two", "app_two");

jQuery.sap.registerModulePath("app_launcher", "app_launcher");

(Or the short form in this case: sap.ui.localResources("app_one") [...])

After that you can just say

new sap.ui.core.ComponentContainer({ name : "app_one" });

HTH,

Jens

Former Member
0 Kudos

Hi Jens,

they are not just in different folders, they are different projects.

When you start app_launcher (local for example) it does not compilte/copy the files into the jetty-server(built-in).

And if you go further, i don't know how the runtime on the server will resolve this when i "deploy" the apps onto the server.

best regards,

Michael

Former Member
0 Kudos

Perhaps it is possible to put an application into a table that it can be accesed by an application referential like:

"resources/app_one/Component.js"

the standard works the same

"resources/sap/ui/core/library-preload.json/sap/ui/core/library.js"

this would be awesome,

because this would be the only way to reuse the Components.

if there are any questions, we can phone, if you want to.

0 Kudos

If your components are in different projects on the same server that is not a problem, as long as they can be accesses using a URL:

For example if you publish them inside your eclipse on a tomcat-server:

http://localhost/app_one

http://localhost/app_two

http://localhost/app_launcher

Then you can reference app_two in the app_launcher project like this:

jQuery.sap.registerModulePath("app_two", "/app_two");

Mind the leading slash in the second argument.

Former Member
0 Kudos

Hi Jens, what if you use external aliases?

or if you have a configured firewall for one application?

or if you have configured a technical user only for this app?

my way is to bypass the sources by using


<script src="resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-resourceroots='{

  "app_one" : "./depending_app/app_one/"

  }'/>

therefor i have written an implicit enhancement.

perhaps the SAP can put this into the standard?

0 Kudos

I don't understand this reply. Whyt do you mean by "put an application into a table"? That sentence makes no sense to me.

You don't need to have your stuff under "resources", that's what registerModulePath is for.

The only thing that is really important is that everything inside the component adheres to the components naming convention.

So if your component is named "ABC.Component" and you have a custom control in there in the folder "controls/Something.js", it has to be named "ABC.controls.Something". Only then you do not need to fiddle with registerModulePath more than one time.

If you now register the path of your component correctly, it should all work:

jQuery.sap.registerModulePath("ABC", "/path/to/my/component");

0 Kudos

Hi Roger,

I'm sorry, UI5 is a client side UI framework, I don't even know what you mean by "external alias", "technical user", or how you want to configure a firewall for just one appllication on a server with many. UI5 is strictly client side - that's why it works on any web server without back-end (take a look at the openUI5-Project, which is the core of SAPUI5).

I still do not see a need for an "enhancement", whatever you mean by that, you just have to correctly set the path.

Former Member
0 Kudos

Hi Jens,

i debugged the UI5-HTTP-Handler and found out, that "resources/" is put into the MIME-Repository, so it doesn't work for me.

but as described in my other posts i have written an implicit enhancement which runs before the handler.


ENHANCEMENT ZUI5_HANDLER.    "active version

*

   data: lv_my_path TYPE string,

         lv_my_path_in_app TYPE string,

         lv_path_one TYPE string.

   DATA lv_my_content                TYPE xstring.

   DATA lv_my_content_as_string      TYPE string.

         lv_my_path = server->request->get_header_field( if_http_header_fields_sap=>path_info_expanded ).

         IF lv_my_path CP '*depending_app/*'. "checking if an other application is triggered

*          MESSAGE '*app/*  was triggered' TYPE 'X'.

         DATA: lt_path_complete TYPE STANDARD TABLE OF string,

               lv_index_appl TYPE i.

         SPLIT lv_my_path AT '/' INTO TABLE lt_path_complete.

         READ TABLE lt_path_complete TRANSPORTING NO FIELDS WITH KEY table_line = 'app'.

         lv_index_appl = sy-tabix + 1.

         READ TABLE lt_path_complete INTO gv_application INDEX lv_index_appl.

*         change the Application

         TRY .

             go_ui5_rep_rt_api = /ui5/cl_ui5_rep_rt=>/ui5/if_ui5_rep_rt~get_api( iv_name = gv_application ).

           DELETE lt_path_complete from 1 to lv_index_appl.

*          lv_my_path_in_app = |{ gv_application }|.

         loop at lt_path_complete into lv_path_one.

           lv_my_path_in_app = |{ lv_my_path_in_app }/{ lv_path_one }|.

           ENDLOOP.

           SHIFT lv_my_path_in_app BY 1 PLACES LEFT.

           REPLACE '-dbg' in lv_my_path_in_app WITH ''.

              CALL METHOD find_file_in_ui5_rep

       EXPORTING

         iv_path                   = lv_my_path_in_app

         iv_resource_root          = 'WebContent'

         iv_language_requested     = 'DE'

*       iv_code_page              = lv_accept_charset

       IMPORTING

         ev_file_content           = lv_my_content

         ev_file_content_as_string = lv_my_content_as_string

*        ev_last_modified          = lv_last_modified

*        ev_mime_type              = lv_mime_type

*        ev_not_found              = lv_not_found

*        ev_etag                   = lv_etag

         .

              IF

                 lv_my_content_as_string IS NOT INITIAL.

       me->parse_meta_tags( EXPORTING iv_path_in_app = lv_my_path_in_app

                                      iv_file_content = lv_my_content_as_string

*                           IMPORTING ev_is_no_cache_requested = lv_is_no_cache_requested

*                                     ev_is_ie_edge_requested = lv_is_ie_edge_requested

                          ).

       server->response->set_cdata( lv_my_content_as_string ).

*      IF lv_is_no_cache_requested = abap_true.

*        lv_cb_no_support_here = abap_true.

*      ENDIF.

     ENDIF.

           CATCH /ui5/cx_ui5_rep_rt.

             RETURN.

         ENDTRY.

         return.

         endif.

ENDENHANCEMENT.

so it checks if there is "depending_app/" in the called URL and return the source of the following APP.

this works really fine.

Former Member
0 Kudos

I use it on an NetWeaver 7.31 with UI-AddOn...

0 Kudos

Hi Michael,

sorry, I don't know any ABAP.

But I still do not get why this any better than just serving the component under a different URL.

regards,

Jens

Former Member
0 Kudos

The same reason why SAP did it with "resources/*" 

perhaps i will open an OSS-Request,

best regards,

bye

0 Kudos

UI5 has the possibility of using components/controls/... from whatever URL to avoid exactly that. We don't want people to have to rely on some proprietary back-end.

On a server that serves static resources, you can always add your files to the "resources" folder to achieve the same effect.

Former Member
0 Kudos

do i understand you right that i can use:

components/controls/..


<script src="resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-resourceroots='{ 

"app_one" : "./components/controls/app_one/" 

  }'/> 

??

0 Kudos

The resource-roots are basically the same as the registerModulePath.

See here: openui5/jquery.sap.global.js line 1969 · SAP/openui5 · GitHub

Former Member
0 Kudos

my main-question is if it calls http://<myserver>/customer/app_two/components/controls/app_one 

or if it has to call

http://<myserver>/customer/app_one

from

http://<myserver>/customer/app_two

because this is not what i want to have.

0 Kudos

You can decide for yourself where you want to put the files on your sever. You just have to change the paths in the index.html of your application to reflect that decision.

You can put all components into one project, make a project for every component or something in between - that is completely up to you as the developer.

The idea behind this is that every component has a unique namespace and is somewhere on the server - you just configure this paths on the client-side using resourceroots/registerModulePath.

Former Member
0 Kudos

Does anyone has an idea?

Former Member
0 Kudos

Perhaps this site will help you understand my question:

https://help.sap.com/saphelp_uiaddon10/helpdata/en/01/87ea5e2eff4166b0453b9dcc8fc64f/content.htm

there it says:

  • components: Full path to the components that should be loaded by SAPUI5 core to be used in your component

but i don't know how to include this in my buildpath.