как использовать код Dojo в Enyo ..? - PullRequest
0 голосов
/ 10 августа 2011

Я новый разработчик в Enyo (TouchPad).Я хотел бы разработать приложение, состоящее из нескольких диаграмм.поэтому я пытаюсь использовать библиотеки инфраструктуры 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 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();

});

Пожалуйста, помогите мне, как изменить код додзё, чтобы он мог работать в 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.

и

зависит.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.Спасибо.

С уважением, Гарри.

1 Ответ

0 голосов
/ 17 августа 2011

Не думаю, что вам нужно изменять код Dojo. В Enyo вы должны указать платформе, где она должна искать включенные файлы JS. Сделайте это, отредактировав файл depen.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>

и зависит.js:

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

    "source/charts1.js"
     );

Вам придется скопировать все, что нужно для работы Dojo (dojo, dojox, dijit), в lib и проверить пути enyo.

Я получаю ошибку Dojo при создании нового объекта Chart2D, и я не эксперт по 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');

});

} });

Объект не создается. Получил нулевой указатель: - (

...