当前位置： 文江博客话题详情

如何在 Enyo 中使用 Dojo 代码？

发布于 2024-11-28 23:41:39 字数 7064 浏览 1 评论 0原文

我是 Enyo(TouchPad) 的新开发人员。我想开发一个包含一些图表的应用程序。所以我尝试在 Enyo 中使用 Dojo 框架库。

任何人都可以帮助我如何将道场代码包含在我的应用程序中。 我把我的代码贴出来，请看一下。

INDEX.HTML :

<!doctype html>
<html>
<head>
<title>Canvas Demo</title>
<script src="../../../../1.0/framework/enyo.js" type="text/javascript"></script>
<script src="lib/widget/Chart2D.js" type="text/javascript"> </SCRIPT>
<script src="lib/chart2D.js" type="text/javascript"> </SCRIPT>
<script src="lib/tom.js" type="text/javascript"> </SCRIPT>
</head>
<body>
<script type="text/javascript">
enyo.create({kind: "CanvasDemo"}).renderInto(document.body);
</script>
</body>
</html>

.Js 文件 ::

enyo.kind({
name: "CanvasDemo", 
kind: enyo.Control,
nodeTag: "canvas",
domAttributes: { 
    width:"300px", 
    height:"300px", 
    style: "border: 2px solid #000;"
},
// After the canvas is rendered
rendered: function() {

  // I want to place the dojo code here to display a chart in the canvas.

  }
   });

DOJO 代码 ::

dojo.require('dojox.charting.Chart2D');
dojo.require('dojox.charting.widget.Chart2D');
dojo.require('dojox.charting.themes.Tom');

/* JSON information */
var json = {
    January: [12999,14487,19803,15965,17290],
    February: [14487,12999,15965,17290,19803],
    March: [15965,17290,19803,12999,14487]
};

/* build pie chart data */
var chartData = [];
dojo.forEach(json['January'],function(item,i) {
    chartData.push({ x: i, y: json['January'][i] });
});

/* resources are ready... */
dojo.ready(function() {

    var chart2 = new dojox.charting.Chart2D('chart2').
                    setTheme(dojox.charting.themes.Tom).
                    addPlot('default', {type: 'Pie', radius: 70, fontColor: 'black'}).
                    addSeries('Visits', chartData).
                    render();
    var anim = new dojox.charting.action2d.MoveSlice(chart2, 'default');
    chart2.render();

});

请帮助我如何修改 dojo 代码，以便它可以在 enyo 中工作..

提前致谢。

问候， 哈利.

index.html :

<!doctype html>
 <html>
 <head>
<title>dojo</title>
<script src="C:\WebOs\Development\enyo\1.0\framework\enyo.js" type="text/javascript"></script>
<script type="text/javascript" src="C:\Users\pangulur\Downloads\dojo-release-1.6.1-src\dojo-release-1.6.1-src\dojo\dojo.js"></script>
 /head>
 <body>
<script type="text/javascript">
new enyo.Canon.graphs2().renderInto(document.body);
</script>
</body>
</html>

Source/Charts1.js :

 enyo.kind({
name: "enyo.Canon.graphs2",
kind: enyo.Control,
components: [
    {kind: "PageHeader", content: "bargraph"},
    //{style: "padding: 10px", content: "Note: In the browser, you can press ctrl-~ to display the app menu."},
    {kind: "Button", caption: "display graph", onclick: "displayGraph", flex: 1},
    ],
      displayGraph: function() {

 dojo.require('dojox.charting.Chart2D');
    dojo.require('dojox.charting.widget.Chart2D');
    dojo.require('dojox.charting.themes.PlotKit.green');

    /* JSON information */
    var json = {
        January: [12999,14487,19803,15965,17290],
        February: [14487,12999,15965,17290,19803],
        March: [15965,17290,19803,12999,14487]
    };

    /* build pie chart data */
    var chartData = [];
    dojo.forEach(json['January'],function(item,i) {
        chartData.push({ x: i, y: json['January'][i] });
    });

    /* resources are ready... */
    dojo.ready(function() {

        //create / swap data
        var barData = [];
        dojo.forEach(chartData,function(item) { barData.push({ x: item['y'], y: item['x'] }); });
        var chart1 = new dojox.charting.Chart2D('chart1').
                        setTheme(dojox.charting.themes.PlotKit.green).
                        addAxis('x', { fixUpper: 'major', includeZero: false, min:0, max:6 }).
                        addAxis('y', { vertical: true, fixLower: 'major', fixUpper: 'major' }).
                        addPlot('default', {type: 'Columns', gap:5 }).
                        addSeries('Visits For February', chartData, {});
        var anim4b = new dojox.charting.action2d.Tooltip(chart1, 'default');
        var anim4c = new dojox.charting.action2d.Shake(chart1,'default');
        chart1.render();
      //  var legend4 = new dojox.charting.widget.Legend({ chart: chart1 }, 'legend3');

    });



}
});

这里我不确定如何调用 enyo 中的 dojo 代码。

和

depends.js：

 enyo.depends(

"source/charts1.js",
"lib/Chart2D.js",
"lib/widget/Chart2D.js",
"lib/blue.js",
"lib/dojo.js"   
 );

现在我收到以下错误：

error: Uncaught ReferenceError: dojo is not defined, Chart2D.js:1
  [20110818-09:33:13.136736] error: Uncaught ReferenceError: dojo is not defined,    widget/Chart2D.js:1
 [20110818-09:33:13.138227] error: Uncaught ReferenceError: dojo is not defined, blue.js:1
 [20110818-09:33:13.150707] error: Uncaught TypeError: Cannot read property 'graphs2' of undefined, index.html:10

当我将其用作浏览器中具有相同代码的.HTML 文件时，它工作正常。

Chart.html：

<html>
<head>

<title>dojo</title>

<script type="text/javascript" src="C:\Users\pangulur\Downloads\dojo-release-1.6.1- src\dojo-release-1.6.1-src\dojo\dojo.js"></script>


</head>
<body>

<div id="chart1" style="width:260px;height:200px;"></div>
<script>
dojo.require('dojox.charting.Chart2D');
dojo.require('dojox.charting.widget.Chart2D');
dojo.require('dojox.charting.themes.PlotKit.green');

/* JSON information */
var json = {
    January: [12999,14487,19803,15965,17290],
    February: [14487,12999,15965,17290,19803],
    March: [15965,17290,19803,12999,14487]
};

/* build pie chart data */
var chartData = [];
dojo.forEach(json['January'],function(item,i) {
    chartData.push({ x: i, y: json['January'][i] });
});

/* resources are ready... */
dojo.ready(function() {

    //create / swap data
    var barData = [];
    dojo.forEach(chartData,function(item) { barData.push({ x: item['y'], y: item['x'] }); });
    var chart1 = new dojox.charting.Chart2D('chart1').
                    setTheme(dojox.charting.themes.PlotKit.green).
                    addAxis('x', { fixUpper: 'major', includeZero: false, min:0, max:6 }).
                    addAxis('y', { vertical: true, fixLower: 'major', fixUpper: 'major' }).
                    addPlot('default', {type: 'Columns', gap:5 }).
                    addSeries('Visits For February', chartData, {});
    var anim4b = new dojox.charting.action2d.Tooltip(chart1, 'default');
    var anim4c = new dojox.charting.action2d.Shake(chart1,'default');
    chart1.render();
    var legend4 = new dojox.charting.widget.Legend({ chart: chart1 }, 'legend3');

});
</script>


</body>
</html>

请帮助我在 Enyo 中处理这个问题。 谢谢你。

亲切的问候， 哈利.

原文

I'm a new developer in Enyo(TouchPad). I would like to develop an app consisting some charts in it. so I'm trying to use Dojo framework libraries in Enyo.

Can anyone please help me in how to include the dojo code my application.
I'm posting my code, please have a look.

INDEX.HTML :

<!doctype html>
<html>
<head>
<title>Canvas Demo</title>
<script src="../../../../1.0/framework/enyo.js" type="text/javascript"></script>
<script src="lib/widget/Chart2D.js" type="text/javascript"> </SCRIPT>
<script src="lib/chart2D.js" type="text/javascript"> </SCRIPT>
<script src="lib/tom.js" type="text/javascript"> </SCRIPT>
</head>
<body>
<script type="text/javascript">
enyo.create({kind: "CanvasDemo"}).renderInto(document.body);
</script>
</body>
</html>

.Js file ::

enyo.kind({
name: "CanvasDemo", 
kind: enyo.Control,
nodeTag: "canvas",
domAttributes: { 
    width:"300px", 
    height:"300px", 
    style: "border: 2px solid #000;"
},
// After the canvas is rendered
rendered: function() {

  // I want to place the dojo code here to display a chart in the canvas.

  }
   });

DOJO CODE ::

dojo.require('dojox.charting.Chart2D');
dojo.require('dojox.charting.widget.Chart2D');
dojo.require('dojox.charting.themes.Tom');

/* JSON information */
var json = {
    January: [12999,14487,19803,15965,17290],
    February: [14487,12999,15965,17290,19803],
    March: [15965,17290,19803,12999,14487]
};

/* build pie chart data */
var chartData = [];
dojo.forEach(json['January'],function(item,i) {
    chartData.push({ x: i, y: json['January'][i] });
});

/* resources are ready... */
dojo.ready(function() {

    var chart2 = new dojox.charting.Chart2D('chart2').
                    setTheme(dojox.charting.themes.Tom).
                    addPlot('default', {type: 'Pie', radius: 70, fontColor: 'black'}).
                    addSeries('Visits', chartData).
                    render();
    var anim = new dojox.charting.action2d.MoveSlice(chart2, 'default');
    chart2.render();

});

Please help me in how to modify the dojo code ,so that it can work in the enyo..

Thanks in Advance.

Regards,
Harry.

index.html :

<!doctype html>
 <html>
 <head>
<title>dojo</title>
<script src="C:\WebOs\Development\enyo\1.0\framework\enyo.js" type="text/javascript"></script>
<script type="text/javascript" src="C:\Users\pangulur\Downloads\dojo-release-1.6.1-src\dojo-release-1.6.1-src\dojo\dojo.js"></script>
 /head>
 <body>
<script type="text/javascript">
new enyo.Canon.graphs2().renderInto(document.body);
</script>
</body>
</html>

Source/Charts1.js :

 enyo.kind({
name: "enyo.Canon.graphs2",
kind: enyo.Control,
components: [
    {kind: "PageHeader", content: "bargraph"},
    //{style: "padding: 10px", content: "Note: In the browser, you can press ctrl-~ to display the app menu."},
    {kind: "Button", caption: "display graph", onclick: "displayGraph", flex: 1},
    ],
      displayGraph: function() {

 dojo.require('dojox.charting.Chart2D');
    dojo.require('dojox.charting.widget.Chart2D');
    dojo.require('dojox.charting.themes.PlotKit.green');

    /* JSON information */
    var json = {
        January: [12999,14487,19803,15965,17290],
        February: [14487,12999,15965,17290,19803],
        March: [15965,17290,19803,12999,14487]
    };

    /* build pie chart data */
    var chartData = [];
    dojo.forEach(json['January'],function(item,i) {
        chartData.push({ x: i, y: json['January'][i] });
    });

    /* resources are ready... */
    dojo.ready(function() {

        //create / swap data
        var barData = [];
        dojo.forEach(chartData,function(item) { barData.push({ x: item['y'], y: item['x'] }); });
        var chart1 = new dojox.charting.Chart2D('chart1').
                        setTheme(dojox.charting.themes.PlotKit.green).
                        addAxis('x', { fixUpper: 'major', includeZero: false, min:0, max:6 }).
                        addAxis('y', { vertical: true, fixLower: 'major', fixUpper: 'major' }).
                        addPlot('default', {type: 'Columns', gap:5 }).
                        addSeries('Visits For February', chartData, {});
        var anim4b = new dojox.charting.action2d.Tooltip(chart1, 'default');
        var anim4c = new dojox.charting.action2d.Shake(chart1,'default');
        chart1.render();
      //  var legend4 = new dojox.charting.widget.Legend({ chart: chart1 }, 'legend3');

    });



}
});

Here I'm not sure about how to call the dojo code in enyo.

and

depends.js :

 enyo.depends(

"source/charts1.js",
"lib/Chart2D.js",
"lib/widget/Chart2D.js",
"lib/blue.js",
"lib/dojo.js"   
 );

Now I'm getting the following errors :

error: Uncaught ReferenceError: dojo is not defined, Chart2D.js:1
  [20110818-09:33:13.136736] error: Uncaught ReferenceError: dojo is not defined,    widget/Chart2D.js:1
 [20110818-09:33:13.138227] error: Uncaught ReferenceError: dojo is not defined, blue.js:1
 [20110818-09:33:13.150707] error: Uncaught TypeError: Cannot read property 'graphs2' of undefined, index.html:10

It is working fine when I use it as a .HTML file with the same code in browser.

Chart.html :

<html>
<head>

<title>dojo</title>

<script type="text/javascript" src="C:\Users\pangulur\Downloads\dojo-release-1.6.1- src\dojo-release-1.6.1-src\dojo\dojo.js"></script>


</head>
<body>

<div id="chart1" style="width:260px;height:200px;"></div>
<script>
dojo.require('dojox.charting.Chart2D');
dojo.require('dojox.charting.widget.Chart2D');
dojo.require('dojox.charting.themes.PlotKit.green');

/* JSON information */
var json = {
    January: [12999,14487,19803,15965,17290],
    February: [14487,12999,15965,17290,19803],
    March: [15965,17290,19803,12999,14487]
};

/* build pie chart data */
var chartData = [];
dojo.forEach(json['January'],function(item,i) {
    chartData.push({ x: i, y: json['January'][i] });
});

/* resources are ready... */
dojo.ready(function() {

    //create / swap data
    var barData = [];
    dojo.forEach(chartData,function(item) { barData.push({ x: item['y'], y: item['x'] }); });
    var chart1 = new dojox.charting.Chart2D('chart1').
                    setTheme(dojox.charting.themes.PlotKit.green).
                    addAxis('x', { fixUpper: 'major', includeZero: false, min:0, max:6 }).
                    addAxis('y', { vertical: true, fixLower: 'major', fixUpper: 'major' }).
                    addPlot('default', {type: 'Columns', gap:5 }).
                    addSeries('Visits For February', chartData, {});
    var anim4b = new dojox.charting.action2d.Tooltip(chart1, 'default');
    var anim4c = new dojox.charting.action2d.Shake(chart1,'default');
    chart1.render();
    var legend4 = new dojox.charting.widget.Legend({ chart: chart1 }, 'legend3');

});
</script>


</body>
</html>

Please help me in working with this in Enyo.
Thanking You.

Kind Regards,
Harry.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

君勿笑 2024-12-05 23:41:39

我认为您不必修改 Dojo 代码。在 Enyo 中，您必须告诉框架必须在哪里查找包含的 JS 文件。您可以编辑depends.js 文件来执行此操作。

index.html:

 <!doctype html>
 <html>
 <head>
 <title>Canvas Demo</title>
 <script src="../../../../1.0/framework/enyo.js" type="text/javascript"></script>
 </head> 
 <body>
 <script type="text/javascript">
  new enyo.Canon.graphs2().renderInto(document.body);
 </script>
 </body>
 </html>

和depends.js:

 enyo.depends(
    "lib/dojo/dojo.js" ,

    "source/charts1.js"
     );

您必须将Dojo 工作所需的所有内容（dojo、dojox、dijit）复制到lib 中，并检查enyo 路径。

我在创建新的 Chart2D 对象时遇到 Dojo 错误，并且我不是修复此问题的 Dojo 专家。它在行中：

  var chart1 = new dojox.charting.Chart2D("simplechart");

我修改了你的代码：

enyo.kind({
name: "enyo.Canon.graphs2",
kind: enyo.Control,
components: [
{kind: "PageHeader", content: "bargraph"},
//{style: "padding: 10px", content: "Note: In the browser, you can press ctrl-~ to display the app menu."},
{kind: "Button", caption: "display graph", onclick: "displayGraph", flex: 1},
],
  displayGraph: function() {

dojo.require('dojox.charting.Chart2D');
dojo.require('dojox.charting.widget.Chart2D');
dojo.require('dojox.charting.themes.PlotKit.green');

/* JSON information */
var json = {
    January: [12999,14487,19803,15965,17290],
    February: [14487,12999,15965,17290,19803],
    March: [15965,17290,19803,12999,14487]
};

/* build pie chart data */
var chartData = [];
dojo.forEach(json['January'],function(item,i) {
    chartData.push({ x: i, y: json['January'][i] });
});

/* resources are ready... */
dojo.ready(function() {

    //create / swap data
    var barData = [];
    dojo.forEach(chartData,function(item) { barData.push({ x: item['y'], y: item['x'] }); });
    var chart1 = new dojox.charting.Chart2D("simplechart");  // HERE IS THE PROBLEM
    chart1.setTheme(dojox.charting.themes.PlotKit.green);
                    chart1.addAxis('x', { fixUpper: 'major', includeZero: false, min:0, max:6 });
                    chart1.addAxis('y', { vertical: true, fixLower: 'major', fixUpper: 'major' });
                    chart1.addPlot('default', {type: 'Columns', gap:5 });
                    chart1.addSeries('Visits For February', chartData, {});
    var anim4b = new dojox.charting.action2d.Tooltip(chart1, 'default');
    var anim4c = new dojox.charting.action2d.Shake(chart1,'default');
    chart1.render();
  //  var legend4 = new dojox.charting.widget.Legend({ chart: chart1 }, 'legend3');

});

}
});

该对象不会被实例化。得到空指针:-(

I don't think you have to modify the Dojo code. In Enyo, you have to tell the framework where it has to look for included JS files. Yo do so editing the depends.js file.

The index.html:

 <!doctype html>
 <html>
 <head>
 <title>Canvas Demo</title>
 <script src="../../../../1.0/framework/enyo.js" type="text/javascript"></script>
 </head> 
 <body>
 <script type="text/javascript">
  new enyo.Canon.graphs2().renderInto(document.body);
 </script>
 </body>
 </html>

and depends.js:

 enyo.depends(
    "lib/dojo/dojo.js" ,

    "source/charts1.js"
     );

You'll have to copy everything Dojo needs to work (dojo, dojox, dijit) into lib, and check enyo paths.

I get a Dojo error when creating the new Chart2D object, and I'm not a Dojo expert to fix this. It's in the line:

  var chart1 = new dojox.charting.Chart2D("simplechart");

I've modified your code:

enyo.kind({
name: "enyo.Canon.graphs2",
kind: enyo.Control,
components: [
{kind: "PageHeader", content: "bargraph"},
//{style: "padding: 10px", content: "Note: In the browser, you can press ctrl-~ to display the app menu."},
{kind: "Button", caption: "display graph", onclick: "displayGraph", flex: 1},
],
  displayGraph: function() {

dojo.require('dojox.charting.Chart2D');
dojo.require('dojox.charting.widget.Chart2D');
dojo.require('dojox.charting.themes.PlotKit.green');

/* JSON information */
var json = {
    January: [12999,14487,19803,15965,17290],
    February: [14487,12999,15965,17290,19803],
    March: [15965,17290,19803,12999,14487]
};

/* build pie chart data */
var chartData = [];
dojo.forEach(json['January'],function(item,i) {
    chartData.push({ x: i, y: json['January'][i] });
});

/* resources are ready... */
dojo.ready(function() {

    //create / swap data
    var barData = [];
    dojo.forEach(chartData,function(item) { barData.push({ x: item['y'], y: item['x'] }); });
    var chart1 = new dojox.charting.Chart2D("simplechart");  // HERE IS THE PROBLEM
    chart1.setTheme(dojox.charting.themes.PlotKit.green);
                    chart1.addAxis('x', { fixUpper: 'major', includeZero: false, min:0, max:6 });
                    chart1.addAxis('y', { vertical: true, fixLower: 'major', fixUpper: 'major' });
                    chart1.addPlot('default', {type: 'Columns', gap:5 });
                    chart1.addSeries('Visits For February', chartData, {});
    var anim4b = new dojox.charting.action2d.Tooltip(chart1, 'default');
    var anim4c = new dojox.charting.action2d.Shake(chart1,'default');
    chart1.render();
  //  var legend4 = new dojox.charting.widget.Legend({ chart: chart1 }, 'legend3');

});

}
});

The object doesn't get instantiated. Got null pointer :-(

回复 原文
~没有更多了~

关于作者

我爱人

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

胡图图

文章 0 评论 0

zt006

文章 0 评论 0

z祗昰~

文章 0 评论 0

冰葑

文章 0 评论 0

野の

文章 0 评论 0

天空

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文