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

Question

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

有没有人尝试过这样做？

提前谢谢你。

Answer 1

如果您没有找到插件，您可以使用 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。为此，请使用“文件 URL”字段。 需要.js：https://static.oracle.com/cdn/jet/v4.0.0/3rdparty/require/require.js

3 - 在您的页面标题中，您需要包含以下代码：

<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

---

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

祝你好运。

---

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

Answer 2

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