如何在 Oracle Apex 5.1 中集成 Gantt Oracle Jet Chart？

Question

有谁知道如何将 Oracle Jet 甘特图集成到 Oracle Apex 5.1 版中？我所做的研究表明如何将 Jet 组件集成到 5.0 版中（但据我了解，5.0 版和 5.1 版之间发生了很多变化，特别是关于 Oracle JET 库）或如何集成几个不同的 Oracle Jet 组件到 Apex 5.1，但用于集成这些组件的代码似乎非常特定于要集成的组件。我尝试将 Oracle Jet Cookbook 中的 javascript 代码和 HTML 代码复制并粘贴到 Apex 页面设计器中的相应部分，但是当我运行页。具体来说，我想知道如何使用甘特图的 Oracle Jet 说明书代码在我的 Apex 应用程序的页面上创建甘特图？

有人试过吗？

提前致谢。

Answer 1

为什么不使用插件呢？自己编写或查看 apex.world 的甘特图插件

Answer 2

如果您没有找到插件，您可以使用 oracle-jet 甘特图，方法是使用 CDN 直接引用您顶点页面上的文件。

1 - 首先将 main.js 文件上传到应用程序的共享组件。他必须遵守这些准则 https://docs.oracle.com/middleware/jet400/jet/developer/GUID-219A636B-0D0B-4A78-975B-0528497A82DD.htm#JETDG-GUID-219A636B-0D0B-4A78-975B-0528497A82DD

你的 main.js 看起来像这样：

/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

function _getCDNPath(paths) {
    var cdnPath = "";
    var ojPath = "";
    var thirdpartyPath = "";
    var keys = Object.keys(paths);
    var newPaths = {};
    function _isoj(key) {
        return (key.indexOf('oj') === 0 && key !== 'ojdnd');
    }
    keys.forEach(function(key) {
        newPaths[key] = cdnPath + (_isoj(key) ? ojPath : thirdpartyPath) + paths[key];
    });
    return newPaths;
}

require.config({
    paths: _getCDNPath({
        'knockout': 'https://static.oracle.com/cdn/jet/v4.0.0/3rdparty/knockout/knockout-3.4.0',
        'jquery': 'https://static.oracle.com/cdn/jet/v4.0.0/3rdparty/jquery/jquery-3.1.1.min',
        'jqueryui-amd': 'https://static.oracle.com/cdn/jet/v4.0.0/3rdparty/jquery/jqueryui-amd-1.12.0.min',
        'ojs': 'https://static.oracle.com/cdn/jet/v4.0.0/default/js/min',
        'ojL10n': 'https://static.oracle.com/cdn/jet/v4.0.0/default/js/ojL10n',
        'ojtranslations': 'https://static.oracle.com/cdn/jet/v4.0.0/default/js/resources',
        'text': 'https://static.oracle.com/cdn/jet/v4.0.0/3rdparty/require/text',
        'promise': 'https://static.oracle.com/cdn/jet/v4.0.0/3rdparty/es6-promise/es6-promise.min',
        'hammerjs': 'https://static.oracle.com/cdn/jet/v4.0.0/3rdparty/hammer/hammer-2.0.8.min',
        'signals': 'https://static.oracle.com/cdn/jet/v4.0.0/3rdparty/js-signals/signals.min',
        'ojdnd': 'https://static.oracle.com/cdn/jet/v4.0.0/3rdparty/dnd-polyfill/dnd-polyfill-1.0.0.min',
        'css': 'https://static.oracle.com/cdn/jet/v4.0.0/3rdparty/require-css/css.min',
        'customElements': 'https://static.oracle.com/cdn/jet/v4.0.0/3rdparty/webcomponents/custom-elements.min',
        'proj4js': 'https://static.oracle.com/cdn/jet/v4.0.0/3rdparty/proj4js/dist/proj4'
    })
})

requirejs.config({
    baseUrl: '',
    // Path mappings for the logical module names
    paths: {
    },
    // Shim configurations for modules that do not expose AMD
    shim: {
        'jquery': {
            exports: ['jQuery', '$']
        },
        'maps': {
            deps: ['jquery', 'i18n'],
        }
    },
    // This section configures the i18n plugin. It is merging the Oracle JET built-in translation
    // resources with a custom translation file.
    // Any resource file added, must be placed under a directory named "nls". You can use a path mapping or you can define
    // a path that is relative to the location of this main.js file.
    config: {
        ojL10n: {
            merge: {
                //'ojtranslations/nls/ojtranslations': 'resources/nls/menu'
            }
        }
    }
});

2 - 现在您需要在页面上加载此文件 (main.js) 和 require.js。为此使用 "File URLs" 字段。 require.js: https://static.oracle.com/cdn/jet/v4.0.0/3rdparty/require/require.js

3 - 在您页面的 header 中，您需要包含此代码：

<link rel="stylesheet" id="css" href="https://static.oracle.com/cdn/jet/v4.0.0/default/css/alta/oj-alta-min.css">
<script>
        if (!document.createElement) {
          document.createElement = document.constructor.prototype.createElement;
          document.createElementNS = document.constructor.prototype.createElementNS;
          document.importNode = document.constructor.prototype.importNode;
        }

        // The "oj_whenReady" global variable enables a strategy that the busy context whenReady,
        // will implicitly add a busy state, until the application calls applicationBoostrapComplete
        // on the busy state context.
        window["oj_whenReady"] = true;
</script>

4 - 创建一个区域来放置 oracle-jet 图表的 html

5 - 最后，创建一个动态操作以有效地创建您的甘特图。动态动作事件是页面加载。它应该运行一个 javascript 代码。此代码是食谱网站上的文件 demo.js。

例如。 https://apex.oracle.com/pls/apex/f?p=145794:23

登录：https://apex.oracle.com/pls/apex/f?p=4550

workspace: stackquestions
user: test
pwd: test
app: 145794
page: 23

完成这项工作后，您的问题将是如何根据某些过滤器获取数据和更新甘特图。我建议创建一个 restful 服务来从您的表中获取这些数据。为此，您将需要一些 javascript 处理以使您的数据遵循 oracle-jet 期望的格式。您可以在 ganttData.json 文件中看到预期的格式。

祝你好运。

我注意到使 oracle-jet 工作所需的 css 文件干扰了页面的 css。我尝试使用这个想法 Limit scope of external css to only a specific element? 但它并没有完全奏效。

如何在 Oracle Apex 5.1 中集成 Gantt Oracle Jet Chart？

How to integrate Gantt Oracle Jet Chart in Oracle Apex 5.1?

oracle

oracle-apex

gantt-chart

oracle-apex-5.1

oracle-jet