Добавление сортируемой таблицы данных YUI в веб-проект NetBeans

Это упражнение демонстрирует, как добавить сортируемую таблицу данных YUI на веб-страницу. Как Yahoo! Состояния демо-страницы пользовательского интерфейса,

«[Экземпляр] DataTable [основан] на разметке, которая уже существует на странице. Благодаря постепенному расширению разметки за счет функциональности более высокого порядка пользователи, у которых не включен JavaScript, по-прежнему могут просматривать содержимое страницы и испытывать основные функции».

Поскольку это упражнение демонстрирует прогрессивно улучшенную разметку, вы начинаете с добавления образца HTML-таблицы, содержащей данные, и просматриваете ее в браузере. Затем вы добавляете ссылки на размещенные в Yahoo! Ресурсы YUI (т. Е. На оболочку YUI и JavaScript, необходимый для функции сортировки DataTable). Наконец, вместо того, чтобы ссылаться на размещенные ресурсы Yahoo !, вы загружаете и регистрируете версию библиотеки YUI версии 2.6.0 и ссылаетесь на нее прямо из файла своего проекта.

Вы можете выполнить это упражнение, выполнив следующие действия:

Добавьте пример кода демо в файл проекта.

Добавьте в файл ссылки на зависимости YUI.

Ссылка на локальную копию библиотеки YUI вместо размещенных ресурсов.

Просмотр файла в браузере.

Добавить пример кода в файл проекта

Откройте образец проекта ( Java Web или PHP ) в IDE. Если вы используете проект на основе Java, выберите «Файл»> «Открыть проект» (Ctrl-Shift-O; ⌘-Shift-O на Mac) и используйте мастер «Открыть проект». Если вы используете проект на основе PHP, воспользуйтесь мастером создания нового проекта (Ctrl-Shift-N; ⌘-Shift-N на Mac) и выберите «Приложение PHP с существующими источниками», а затем настройте проект на основе ваших локальных настроек. Если вам нужна помощь, обратитесь к разделу «Настройка проекта PHP» .

В окне «Проекты» (Ctrl-1; ⌘-1 на Mac) дважды щелкните yahooUIDemo.htmlфайл, чтобы открыть его в редакторе.

Откройте демонстрационную страницу DataTable и прокрутите вниз до заголовка «Пример кода для этого примера».

Скопируйте весь код из раздела Разметка, затем вернитесь в IDE и вставьте код yahooUIDemo.htmlвместо TODO: Add template content hereоператора.
Подсказка. Выберите опцию «Просмотр таблицы» в верхней границе примера кода, чтобы избежать копирования номеров строк.

Щелкните правой кнопкой мыши внутри редактора и выберите «Просмотр». Файл откроется в браузере, и вы увидите, как отображается базовая таблица HTML.

Вернитесь на демонстрационную страницу DataTable и скопируйте весь код из раздела JavaScript.

Вернитесь в IDE и вставьте код JavaScript yahooUIDemo.htmlвместо // TODO: Add JavaScript sample code hereкомментария.
Совет: Вы можете переформатировать код, щелкнув правой кнопкой мыши в редакторе и выбрав Формат.

Добавить ссылки на зависимости YUI

Прокрутите до нижней части демонстрационной страницы DataTable , где вы видите Конфигурацию для этого примера.

Нажмите на ссылку на YUI Dependency Configurator. Эта ссылка:
http://developer.yahoo.com/yui/articles/hosting/?datatable&MIN#configure,

которая открывает конфигуратор с настройками, предварительно настроенными для DataTable. YUI Dependency Configurator позволяет вам указать настройки для любой комбинации Yahoo! Ресурсы пользовательского интерфейса.

В YUI Configurator отмените выбор параметра «Объединить файлы».
Объединение файлов в один ресурс JavaScript обычно выгодно, поскольку оно снижает накладные расходы на связь до одного HTTP-запроса, что повышает производительность. Однако здесь имеет смысл отключить эту опцию, чтобы было понятно, на какие файлы должна ссылаться ваша демонстрационная страница. Обратите внимание, что переключение этого параметра влияет на способ отображения ссылок на файлы JavaScript и CSS на вкладке «Скрипт загрузки YUI Configurator» и «Прямо CSS» (нажмите, чтобы увеличить).

Скопируйте весь код, указанный на вкладке «Загрузка сценария и CSS непосредственно», и вставьте его yahooUIDemo.htmlвместо комментария.

Добавьте classобъявление к <body>тегам страницы, чтобы применить таблицу стилей демонстрации ко всем элементам на странице (в данном случае, только к DataTable).

<body class="yui-skin-sam">

Совет: чтобы узнать больше о Yahoo! Скины пользовательского интерфейса, см. Понимание скинов YUI .

Содержимое между вашими <html>тегами должно теперь выглядеть следующим образом:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="css/demo.css" type="text/css" media="screen">

        <!-- Individual YUI CSS files -->
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/datatable/assets/skins/sam/datatable.css">
        <!-- Individual YUI JS files -->
        <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
        <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script>
        <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/datasource/datasource-min.js"></script>
        <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/datatable/datatable-min.js"></script>

        <script>
            YAHOO.util.Event.addListener(window, "load", function() {
                YAHOO.example.EnhanceFromMarkup = new function() {
                    var myColumnDefs = [
                        {key:"due",label:"Due Date",formatter:YAHOO.widget.DataTable.formatDate,sortable:true},
                        {key:"account",label:"Account Number", sortable:true},
                        {key:"quantity",label:"Quantity",formatter:YAHOO.widget.DataTable.formatNumber,sortable:true},
                        {key:"amount",label:"Amount Due",formatter:YAHOO.widget.DataTable.formatCurrency,sortable:true}
                    ];

                    this.parseNumberFromCurrency = function(sString) {
                        // Remove dollar sign and make it a float
                        return parseFloat(sString.substring(1));
                    };

                    this.myDataSource = new YAHOO.util.DataSource(YAHOO.util.Dom.get("accounts"));
                    this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE;
                    this.myDataSource.responseSchema = {
                        fields: [{key:"due", parser:"date"},
                            {key:"account"},
                            {key:"quantity", parser:"number"},
                            {key:"amount", parser:this.parseNumberFromCurrency} // point to a custom parser
                        ]
                    };

                    this.myDataTable = new YAHOO.widget.DataTable("markup", myColumnDefs, this.myDataSource,
                    {caption:"Example: Progressively Enhanced Table from Markup",
                        sortedBy:{key:"due",dir:"desc"}}
                );
                };
            });
        </script>

        <title>YahooUI Demo</title>
    </head>
    <body class="yui-skin-sam">
        <h1>YahooUI Demo</h1>

        <div id="markup">
            <table id="accounts">
                <thead>
                    <tr>
                        <th>Due Date</th>
                        <th>Account Number</th>
                        <th>Quantity</th>
                        <th>Amount Due</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1/23/1999</td>
                        <td>29e8548592d8c82</td>
                        <td>12</td>
                        <td>$150.00</td>
                    </tr>
                    <tr>
                        <td>5/19/1999</td>
                        <td>83849</td>
                        <td>8</td>
                        <td>$60.00</td>
                    </tr>
                    <tr>
                        <td>8/9/1999</td>
                        <td>11348</td>
                        <td>1</td>
                        <td>$34.99</td>
                    </tr>
                    <tr>
                        <td>1/23/2000</td>
                        <td>29e8548592d8c82</td>
                        <td>10</td>
                        <td>$1.00</td>
                    </tr>
                    <tr>
                        <td>4/28/2000</td>
                        <td>37892857482836437378273</td>
                        <td>123</td>
                        <td>$33.32</td>
                    </tr>
                    <tr>
                        <td>1/23/2001</td>
                        <td>83849</td>
                        <td>5</td>
                        <td>$15.00</td>
                    </tr>
                    <tr>
                        <td>9/30/2001</td>
                        <td>224747</td>
                        <td>14</td>
                        <td>$56.78</td>
                    </tr>
                </tbody>
            </table>
        </div>

    </body>
</html>

Чтобы просмотреть файл в браузере, щелкните правой кнопкой мыши либо в редакторе, либо на узле файла в окне «Проекты» и выберите «Просмотр». В среде IDE открывается браузер по умолчанию, и yahooUIDemo.htmlотображается страница.
Примечание. Поскольку вы ссылаетесь на размещенные YUI-ресурсы Yahoo !, вы должны быть подключены к Интернету для правильного просмотра страницы.

Ссылка на локальную копию библиотеки YUI

Как вы, вероятно, заметили в предыдущих шагах, Конфигуратор зависимостей YUI предоставляет код, который позволяет вам ссылаться на размещенные ресурсы Yahoo! YUI онлайн. В развернутом приложении это может быть предпочтительнее, но если вы разрабатываете с библиотекой YUI, вы можете предпочесть, чтобы оно было включено в ваш проект (т. Е. Для целей отладки или тестирования, или просто потому, что у вас нет постоянного доступа в Интернет все время при работе).

Чтобы добавить версию 2.6.0 библиотеки YUI в ваш проект (который необходим для DataTable), вы загружаете ее, регистрируете в IDE, добавляете в свой проект и, наконец, ссылаетесь на нее из файла проекта.

Примечание. Среда IDE NetBeans 7.0 Milestone 1 включает в себя версию 2.6.0 библиотеки YUI. Если вы используете эту версию IDE, вам не нужно загружать и регистрировать библиотеку, и вы можете перейти к шагу 7 ниже.

Посетите домашнюю страницу YUI и загрузите копию библиотеки YUI 2.6.0 на свой компьютер.
Совет: Вы можете извлечь почтовый файл и удалить все ресурсы для исключения assetsи buildпапок, а затем сжать папку в почтовом файл , чтобы достичь меньшего размера библиотеки. Эти две папки являются единственными необходимыми ресурсами для виджетов YUI. С другой стороны, загружаемый почтовый индекс включает в себя множество полезных ресурсов, таких как документация и примеры.

В IDE выберите «Инструменты»> «Библиотеки», чтобы открыть диспетчер библиотек. На левой панели прокрутите вниз до конца списка, чтобы просмотреть библиотеки JavaScript, включенные в вашу установку IDE.

Нажмите «Новая библиотека» и в диалоговом окне, отображающем тип YahooUI_2.6.0для имени библиотеки, выберите «Библиотеки JavaScript» в раскрывающемся меню «Тип библиотеки».

Нажмите кнопку ОК, чтобы закрыть диалоговое окно. Обратите внимание, что узел для новой библиотеки теперь отображается в разделе Библиотеки JavaScript на левой панели диспетчера библиотек.

В диспетчере библиотек нажмите кнопку «Добавить архив» и в появившемся диалоговом окне найдите и выберите yui_2.6.0.zipфайл на своем компьютере. Путь к zip-файлу отображается в текстовой области Library Scriptpath.
Примечание. Если вы планируете повторно использовать этот инструментарий в нескольких проектах, вам следует рассмотреть возможность размещения zip-файла в более постоянном месте на вашем компьютере. Когда вы регистрируете библиотеку JavaScript в IDE, вы указываете IDE на ресурс, хранящийся на вашем компьютере. После регистрации IDE не копирует zip-файл во второе место, поэтому, если вы позже удалите zip-файл, вы больше не сможете использовать библиотеку JavaScript в IDE.

Нажмите OK, чтобы выйти из диспетчера библиотек. Загруженный инструментарий теперь зарегистрирован как библиотека JavaScript в IDE.

В окне «Проекты» (Ctrl-1; ⌘-1 на Mac) щелкните правой кнопкой мыши узел своего проекта и выберите «Свойства». Откроется окно «Свойства проекта».

Выберите категорию библиотек JavaScript, затем нажмите кнопку «Добавить». В открывшемся диалоговом окне отображаются все библиотеки JavaScript, зарегистрированные в IDE (за исключением тех, которые вы, возможно, уже добавили в свой проект).

Выберите YahooUI_2.6.0и обратите внимание, что физический путь к месту в вашем проекте, куда будет извлечена библиотека, отображается в диалоговом окне.

Примечание. По умолчанию среда IDE извлекает библиотеки JavaScript в web/resourcesпапку в вашем проекте. Вы можете изменить путь, нажав кнопку с многоточием ( ) в диалоговом окне выше, а затем перейти к новому пути.

Нажмите ОК. Когда вы это сделаете, библиотека будет извлечена в указанное место в вашем проекте.

Нажмите кнопку ОК, чтобы закрыть окно свойств проекта. Обратите внимание, что в окне «Проекты» узел YahooUI_2.6.0 теперь отображается в разделе «Веб-страницы»> «Ресурсы».

Библиотека YUI добавлена в ваш проект.

В yahooUIDemo.html, проверьте ссылки, которые вы ранее добавили с помощью YUI Dependency Configurator. Обратите внимание, что URI являются абсолютными и ссылаются на размещенные Yahoo! YUI ресурсы:

<!-- Individual YUI CSS files -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/datatable/assets/skins/sam/datatable.css">
<!-- Individual YUI JS files -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/datatable/datatable-min.js"></script>

Измените URI для ссылки на библиотеку YUI, которую вы только что добавили в свой проект:

<!-- Individual YUI CSS files -->
<link rel="stylesheet" type="text/css" href="resources/YahooUI_2.6.0/yui/build/datatable/assets/skins/sam/datatable.css">
<!-- Individual YUI JS files -->
<script type="text/javascript" src="resources/YahooUI_2.6.0/yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="resources/YahooUI_2.6.0/yui/build/element/element-beta-min.js"></script>
<script type="text/javascript" src="resources/YahooUI_2.6.0/yui/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="resources/YahooUI_2.6.0/yui/build/datatable/datatable-min.js"></script>

Просмотр файла в браузере.

Чтобы просмотреть файл в браузере, щелкните правой кнопкой мыши либо в редакторе, либо на узле файла в окне «Проекты» и выберите «Просмотр». В среде IDE открывается браузер по умолчанию, и yahooUIDemo.htmlотображается страница. Вы можете нажать на заголовки столбцов, чтобы отсортировать перечисленные данные.

Примеры других наборов инструментов, таких как Dojo, jQuery и Script.aculo.us, см. В разделе « Применение наборов инструментов
JavaScript для веб-проектов» .

Добавление сортируемой таблицы данных YUI в веб-проект NetBeans

Добавить пример кода в файл проекта

Добавить ссылки на зависимости YUI

Ссылка на локальную копию библиотеки YUI

Просмотр файла в браузере.

Категории

Последние статьи

Рефакторинг Hudson God Class

Альтернативы синтаксиса Java лямбда

Morphia и MongoDB: развивающиеся структуры документов

OpenShift Express: развертывание приложения Java EE (с поддержкой AS7)

Интеграция jqGrid, REST, AJAX и Spring MVC