Вы находитесь на странице справочной информации о версии:

You can use AEM Forms workspace components in your own web application. The following sample implementation uses components from an AEM Forms workspace dev package installed on a CRX™ instance to create a web application. Customize the solution below to suit your specific needs. The sample implementation reuses UserInfo, FilterList, and TaskList components inside a web portal.

  1. Log into CRXDE Lite environment at http://[server]:[port]/lc/crx/de/. Ensure that you have an AEM Forms workpace dev package installed.

  2. Create a path /apps/sampleApplication/wscomponents.

  3. Copy css, images, js/libs, js/runtime, and js/registry.js

    • from /libs/ws
    • to /apps/sampleApplication/wscomponents.
  4. Create a demomain.js file inside /apps/sampleApplication/wscomponents/js folder. Copy code from /libs/ws/js/main.js into demomain.js.

  5. In demomain.js, remove the code to initialize Router and add the following code:

    require(['initializer','runtime/util/usersession'], 
        function(initializer, UserSession) { 
            UserSession.initialize( 
                function() { 
                    // Render all the global components
                    initializer.initGlobal();  
                }); 
        });
  6. Create a node under /content by name sampleApplication and type nt:unstructured. In the properties of this node add sling:resourceType of type String and value sampleApplication. In the Access Control List of this node add an entry for PERM_WORKSPACE_USER allowing jcr:read privileges. Also, in the Access Control List of /apps/sampleApplication add an entry for PERM_WORKSPACE_USER allowing jcr:read privileges.

  7. In /apps/sampleApplication/wscomponents/js/registry.js update paths from /lc/libs/ws/ to /lc/apps/sampleApplication/wscomponents/ for template values.

  8. In your portal home page JSP file at /apps/sampleApplication/GET.jsp, add the following code to include the required components inside the portal.

    <script data-main="/lc/apps/sampleApplication/wscomponents/js/demomain" src="/lc/apps/sampleApplication/wscomponents/js/libs/require/require.js"></script>
    <div class="UserInfoView gcomponent" data-name="userinfo"></div> 
    <div class="filterListView gcomponent" data-name="filterlist"></div> 
    <div class="taskListView gcomponent" data-name="tasklist"></div> 
    

    Also include the CSS files required for the AEM Forms workspace components.

    Примечание.

    Each component is added to the component tag (having class gcomponent) while rendering. Ensure that your home page contains these tags. See the html.jsp file of AEM Forms workspace to know more about these base control tags.

  9. To customize the components, you may extend the existing views for the required component as follows:

    define([ 
        ‘jquery’, 
        ‘underscore’, 
        ‘backbone’, 
        ‘runtime/views/userinfo'],
        function($, _, Backbone, UserInfo){ 
            var demoUserInfo = UserInfo.extend({ 
                //override the functions to customize the functionality 
                render: function() { 
                    UserInfo.prototype.render.call(this); // call the render function of the super class 
                    … 
                    //other tasks 
                    … 
                } 
            }); 
            return demoUserInfo; 
    });
  10. Modify the portal CSS to configure the layout, positioning, and style of the required components on your portal. For instance you would like to keep background color as black for this portal to view userInfo component well. You can do this by changing background color in /apps/sampleApplication/wscomponents/css/style.css as follows:

    body {
        font-family: "Myriad pro", Arial;
        background: #000;    //This was origianlly #CCC    
        position: relative;
        margin: 0 auto;
    }

Эта работа лицензируется в соответствии с лицензией Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported  На посты, размещаемые в Twitter™ и Facebook, условия Creative Commons не распространяются.

Правовые уведомления   |   Политика конфиденциальности в сети Интернет