2011-08-10 28 views
0

我是Enyo(TouchPad)的新開發人員。我想開發一個包含一些圖表的應用程序。所以我試圖在Enyo中使用Dojo框架庫。如何在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工作..

在此先感謝。

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> 

來源/ 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。

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這一工作。 感謝你。

親切的問候, 哈利。

回答

0

我不認爲你必須修改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" 
    ); 

你必須複製一切道場需要工作(道場,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'); 

}); 

} });

該對象沒有被實例化。有空指針:-(

+0

嗨, 感謝您的迴應。我以前沒有這樣做,現在我嘗試了這個,但仍然沒有得到dojo執行,我在下面重新發布我的代碼請看看。 謝謝。 – harry