Ana içeriğe geç

Widget

Bu widget, özel olarak oluşturulmuş widget'lar için bir kapsayıcı görevi görür ve belirli arayüz gereksinimlerine uyarlanmış gelişmiş form tasarımlarına olanak tanır. Tüm özelleştirmeler JavaScript kullanılarak uygulanır.

XML Alanları

  • XPath isteğe bağlı olarak özel widget komut dizisinin veri bağlamını belirler. Komut dizisi bunu açıkça yapmak için form API'sini kullanmadığı sürece bir değeri kalıcı olarak kaydetmez.
  • InitializeScript/Content widget başlatıldığında çalıştırılan JavaScript'i içerir. $Container bu komut dizisine sağlanan widget'ın barındırıcı öğesidir.
  • Hints kullanıcıya yol gösterir ve Rules widget'ı denetleyen form kurallarını içerir.

Özel Widget kodu form sayfasında çalışır. Komut dizisini küçük tutun, güvenilmeyen kod yüklemekten kaçının ve form API'leri üzerinden yazılan tüm verileri doğrulayın; XML tanımı, yapılandırılmış kurallarının ötesinde otomatik giriş veya doğrulama davranışı sağlamaz.

JavaScript Özelleştirmesi

Başlatma komut dizisine aktarılan $Container değişkeni, widget'ın kapsayıcı öğesine başvuran bir jQuery nesnesini temsil eder. Bu, jQuery ve JavaScript kullanarak widget'ın oluşturulması ve davranışı üzerinde tam denetim sağlar.

Örnekler

Örnek: Temel Kullanım

1
2
3
4
5
6
7
8
9
<Widget XPath="">
    <InitializeScript>
        <Content><![CDATA[
$Container.html('Hello!');
]]></Content>
    </InitializeScript>
    <Hints><![CDATA[]]></Hints>
    <Rules />
</Widget>

Bu örnekte, widget kapsayıcısına "Hello!" metnini eklemek için InitializeScript kullanılır. Daha karmaşık widget'lar, etkileşimli kullanıcı arayüzü öğeleri oluşturmak ve bunları veri modeline bağlamak için JavaScript kullanır. Özelliğin XPath isteğe bağlı olduğunu ve gerektiğinde widget'ı veri modelindeki belirli bir konuma bağlamak için kullanıldığını unutmayın.

Örnek: Özel eklenti

Highcharts Gantt grafik eklentisini yükleme ve bir Gantt grafiği oluşturma.

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<Widget XPath="">
    <InitializeScript>
        <Content><![CDATA[

function loadJs(url) {
    return new Promise((resolve) => {
        var script = document.createElement('script');
        document.head.appendChild(script);
        script.onload = function () {
            resolve();
        };
        script.src = url;
    });
}

await loadJs('https://code.highcharts.com/gantt/highcharts-gantt.js');

Highcharts.ganttChart($Container[0], {

    title: {
        text: 'Highcharts Gantt Chart'
    },

    subtitle: {
        text: 'With custom symbols in data labels'
    },

    xAxis: {
        minPadding: 0.05,
        maxPadding: 0.05
    },

    yAxis: {
        categories: ['Prototyping', 'Development', 'Testing']
    },

    tooltip: {
        outside: true
    },

    accessibility: {
        point: {
            valueDescriptionFormat: '{point.yCategory}, assigned to ' +
                '{point.assignee} from {point.x:%Y-%m-%d} to ' +
                '{point.x2:%Y-%m-%d}.'
        }
    },

    lang: {
        accessibility: {
            axis: {
                xAxisDescriptionPlural: 'The chart has a two-part X axis ' +
                    'showing time in both week numbers and days.'
            }
        }
    },

    series: [{
        name: 'Project 1',
        data: [{
            start: Date.UTC(2018, 11, 1),
            end: Date.UTC(2018, 11, 2),
            y: 0,
            assignee: 'bre1470'
        }, {
            start: Date.UTC(2018, 11, 2),
            end: Date.UTC(2018, 11, 5),
            y: 1,
            assignee: 'oysteinmoseng',
            fontSymbol: 'exclamation',
            accessibility: {
                description: 'Exclamation symbol.'
            }
        }, {
            start: Date.UTC(2018, 11, 8),
            end: Date.UTC(2018, 11, 9),
            y: 2,
            assignee: 'TorsteinHonsi'
        }, {
            start: Date.UTC(2018, 11, 9),
            end: Date.UTC(2018, 11, 19),
            y: 1,
            assignee: 'bre1470'
        }, {
            start: Date.UTC(2018, 11, 10),
            end: Date.UTC(2018, 11, 23),
            y: 2,
            assignee: 'TorsteinHonsi',
            fontSymbol: 'smile-o',
            accessibility: {
                description: 'Smiling face symbol.'
            }
        }],
        dataLabels: [{
            enabled: true,
            format: '<div style="width: 20px; height: 20px; overflow: ' +
                'hidden; border-radius: 50%; margin-left: -25px">' +
                '<img src="https://github.com/{point.assignee}.png" ' +
                'style="width: 30px; margin-left: -5px; margin-top: -2px">' +
                '</div>',
            useHTML: true,
            align: 'left'
        }, {
            enabled: true,
            format: '<i class="fa fa-{point.fontSymbol}" style="font-size: ' +
                '1.5em"></i>',
            useHTML: true,
            align: 'right'
        }]
    }]
});


]]></Content>
    </InitializeScript>
    <Hints><![CDATA[]]></Hints>
    <Rules />
</Widget>