Question

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

有人试过这样做吗？

提前谢谢。

Answer 1

如果您没有找到插件，可以使用oracle-jet gantt，使用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”字段。 require.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代码。此代码是cookbook网站上的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?，但它没有完全奏效。

Answer 2

为什么不带插件？要么自己编写，要么查看apex.world以获取gantt插件

如何在Oracle Apex 5.1中集成甘特图Oracle Jet Chart？

2 个答案: