Главная » Статьи » Visual Studio 2012 » Создание с помощью JavaScript

Часть 4(1). Макеты и представления

Суть разработки пользовательского интерфейса для приложения Магазина Windows — организация содержимого, его представление пользователям и обеспечение их командами, позволяющими выполнять действия с содержимым. Проектирование пользовательского интерфейса включает организацию страниц приложения, навигации между ними, а также разработку структуры содержимого и команд на каждой странице.

В этом учебнике мы разберем основы создания пользовательского интерфейса на языке HTML с применением спецификации каскадных таблиц стилей (CSS). Чтобы познакомиться с этими основами, вы создадите простое приложение для просмотра фотографий, которое позволяет пользователю выбрать изображение из своей библиотеки изображений и затем показывает это изображение вместе с информацией о файле изображения. В этом учебнике мы создадим приложение с нуля.

Совет  

Если вы хотите пропустить учебник и перейти прямо к коду, см. раздел Начало работы с JavaScript: полный код для серии учебников.

Перед началом работы...

Шаг 1. Создание нового приложения навигации в Visual Studio

Создадим новое приложение с именем PhotoAppSample, использующее шаблон Navigation App. Инструкции

  1. Запустите Microsoft Visual Studio Express 2012 для Windows 8.
  2. В меню File (Файл) выберите команду New Project (Создать проект).

    Откроется диалоговое окно New Project (Новый проект).

  3. На левой панели последовательно разверните узлы Installed (Установлено), Templates (Шаблоны), JavaScript и выберите шаблон Windows Store (Магазин Windows). На центральной панели диалогового окна отображается список шаблонов проектов для JavaScript.

  4. На центральной панели выберите шаблон Navigation App.
  5. В текстовое поле Name (Имя) введите "PhotoAppSample".
  6. Снимите флажок Создать каталог для решения.

    Окно New Project (Новый проект)

  7. Чтобы создать проект, нажмите кнопку .

    Microsoft Visual Studio создает проект и отображает его в Solution Explorer (Обозреватель решений).

    Обозреватель решений для проекта PhotoAppSample

  8. Запустите приложение.

    Приложение PhotoAppSample

Шаг 2. Добавление элементов управления и содержимого

  1. Дважды щелкните файл home.html в Solution Explorer (Обозреватель решений), чтобы открыть его.
  2. Переключитесь на таблицу светлых стилей. Поменяйте ссылку на таблицу темных стилей
     <!-- WinJS references -->
     <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    
    
    

    на следующую:

     <!-- WinJS references -->
     <link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet" />
    
    
    
  3. Измените заголовок страницы на "Образец фотоприложения".
    <body>
     <!-- The content that will be loaded and displayed. -->
     <div class="fragment homepage">
     <header aria-label="Header content" role="banner">
     <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
     <h1 class="titlearea win-type-ellipsis">
     <span class="pagetitle">Photo app sample</span>
     </h1>
     </header>
     <section aria-label="Main content" role="main">
     <p>Content goes here.</p>
     </section>
     </div>
    </body>
    
    
  4. Замените содержимое основного раздела элементами для выбора и вывода изображения и сведений об изображении. Создайте следующие элементы:
    • элемент div для размещения всего содержимого;
    • элемент button для выбора фотографии;
    • элемент div для вывода названия изображения;
    • элемент div, который будет содержать изображение и сведения о нем (этот контейнер позднее поможет нам при форматировании);
    • элемент img для вывода изображения;
    • еще один элемент div, который будет содержать сведения об изображении (этот контейнер позднее тоже поможет нам при форматировании);
    • три метки для идентификации сведений об изображении;
    • три элемента div для вывода сведений об изображении.

    Вот обновленная разметка:

    <body>
     <!-- The content that will be loaded and displayed. -->
     <div class="fragment homepage">
     <header aria-label="Header content" role="banner">
     <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
     <h1 class="titlearea win-type-ellipsis">
     <span class="pagetitle">Photo app sample</span>
     </h1>
     </header>
     <section aria-label="Main content" role="main">
     <div id="contentGrid">
     <button id="getPhotoButton">Get photo</button>
     <div id="imageName" class="pageSubheader">Image name</div>
    
     <div id="imageGrid">
     <img id="displayImage" src="#" />
     <div id="imageInfoContainer">
     <label for="fileName">File name:</label>
     <div id="fileName">File name</div>
     <label for="path">Path:</label>
     <div id="path">Path</div>
     <label for="dateCreated">Date created:</label>
     <div id="dateCreated">Date created</div>
     </div>
     </div>
     </div>
     </section>
     </div>
    </body>
    
    
  5. Запустите приложение.

    Приложение PhotoAppSample

    Пока оно выглядит неважно. В следующих шагах вы разместите элементы в макете сетки.

Шаг 3. Определение сетки для основного содержимого

Раньше для разметки страниц широко использовались таблицы HTML. Теперь спецификация CSS предоставляет макет сетки и макет гибкой рамки (Flexbox). Эти макеты обеспечивают больше возможностей и большую гибкость по сравнению с традиционными таблицами HTML.

В этом учебнике мы используем макет сетки. Макет сетки позволяет выравнивать элементы по столбцам и строкам.

Чтобы создать макет сетки, необходимо создать элемент-контейнер (такой как div) и задать для его свойства "display" значение "-ms-grid".

<div style="border: 1px solid gray; width: 800px; display: -ms-grid">
 <p style="margin: 2px; border: 1px solid gray;">Child element 1</p>
 <p style="margin: 2px; border: 1px solid gray;">Child element 2</p>
 <p style="margin: 2px; border: 1px solid gray;">Child element 3</p>
 <p style="margin: 2px; border: 1px solid gray;">Child element 4</p>
 <p style="margin: 2px; border: 1px solid gray;">Child element 5</p>
</div>

Далее в макете сетки нужно задать ряды (столбцы и строки). При помощи свойств -ms-grid-columns и -ms-grid-rows указываются количество и размер столбцов и строк. Размер столбцов и строк (совместно называемых рядами) можно установить, используя любые из следующих параметров.

  • Стандартные единицы длины, такие как пиксели
  • Процент от ширины объекта (для столбцов) или от высоты объекта (для строк)
  • Ключевое слово auto, указывающее, что ширина столбца или высота строки определяются в зависимости от элементов, содержащихся внутри них
  • Ключевое слово min-content, указывающее, что в качестве ширины или высоты используется минимальная ширина или высота любых дочерних элементов
  • Ключевое слово max-content, указывающее, что в качестве ширины или высоты используется максимальная ширина или высота любых дочерних элементов
  • Ключевое слово minmax(a, b), указывающее, что ширина или высота лежат в диапазоне от a до b, насколько позволяет свободное пространство
  • Долевые единицы (fr), указывающие, что свободное пространство должно распределяться между столбцами или строками в соответствии с их долевыми значениями.

В этом примере для настройки размера столбцов и строк в сетке используются пиксели, ключевое слово auto и долевые единицы.

<div style="border: 1px solid gray; width: 800px; display: -ms-grid
 -ms-grid-columns: auto 100px 1fr 2fr; 
 -ms-grid-rows: 50px auto">
 <p style="margin: 2px; border: 1px solid gray;">Child element 1</p>
 <p style="margin: 2px; border: 1px solid gray;">Child element 2</p>
 <p style="margin: 2px; border: 1px solid gray;">Child element 3</p>
 <p style="margin: 2px; border: 1px solid gray;">Child element 4</p>
 <p style="margin: 2px; border: 1px solid gray;">Child element 5</p>
</div>

Сетка содержит четыре столбца, каждый из которых описан ниже.

  • Столбец 1 (ключевое слово auto): размер столбца соответствует его содержимому.
  • Столбец 2 ("100px"): ширина столбца равна 100 пикселей.
  • Столбец 3 ("1fr"): столбец занимает одну долевую единицу оставшегося пространства.
  • Столбец 4 ("2fr"): столбец занимает две долевые единицы оставшегося пространства.

Поскольку в этой сетке всего три долевые единицы, столбцу 3 отводится 1 долевая единица, деленная на 3 долевые единицы, — то есть, 1/3 — оставшегося пространства. Столбцу 4 отводится 2/3 оставшегося пространства.

Аналогичным образом сетка содержит две строки, каждая из которых описана ниже.

  • Строка 1 ("50px"): высота строки равна 50 пикселей.
  • Строка 2 (ключевое слово auto): размер строки соответствует ее содержимому.

Чтобы разместить дочерние элементы в сетке, при помощи свойств -ms-grid-column и -ms-grid-row задайте столбец и строку для каждого элемента.

<div style="border: 1px solid gray; width: 800px; display: -ms-grid; 
 -ms-grid-columns: auto 100px 1fr 2fr; 
 -ms-grid-rows: 50px auto">
 <p style="margin: 2px; border: 1px solid gray; 
 -ms-grid-column: 1; 
 -ms-grid-row: 1">Child element 1</p>
 <p style="margin: 2px; border: 1px solid gray; 
 -ms-grid-column: 2; 
 -ms-grid-row: 1">Child element 2</p>
 <p style="margin: 2px; border: 1px solid gray; 
 -ms-grid-column: 3; 
 -ms-grid-row: 1">Child element 3</p>
 <p style="margin: 2px; border: 1px solid gray; 
 -ms-grid-column: 4; 
 -ms-grid-row: 1">Child element 4</p>
 <p style="margin: 2px; border: 1px solid gray; 
 -ms-grid-column: 1; 
 -ms-grid-row: 2">Child element 5</p>
</div>

JJ841108.js_tut_4_grid(ru-ru,WIN.10).png

Теперь, когда вы знаете основы использования макета сетки, применим его в нашем приложении.

JJ841108.wedge(ru-ru,WIN.10).gifОпределение сетки для основного содержимого

  1. Дважды щелкните файл home.css в Solution Explorer (Обозреватель решений), чтобы открыть его. Первый стиль в файле .homepage section[role=main] определяет поле для основного раздела. Удалим параметр поля и пока оставим стиль пустым.
    .homepage section[role=main] {
     
    }
    
    
  2. Настроим главный контейнер сетки. home.html содержит элемент div с именем contentGrid. Это будет сетка верхнего уровня.

    Откройте файл home.css и создайте стиль для contentGrid сразу после стиля для .homepage section[role=main]. Задайте для его свойства "display" значение -ms-grid и выделите для него один столбец и три строки. Задайте высоту первой строки равной 50 пикселей, второй строки — 70 пикселей, а третьей строки — auto. Установите верхнее поле равным 20 пикселям, а левое и правое поля — 120 пикселям.

    #contentGrid {
     display: -ms-grid; 
     -ms-grid-rows: 50px 70px auto; 
     margin: 20px 120px 0px 120px;
    }
    
    
  3. Наша сетка содержит три элемента: getPhotoButton, imageName и imageContainer. Определите стили для них так, чтобы разместить эти элементы в первой, второй и третьей строках сетки содержимого.

    Обновляя стиль элемента getPhotoButton, установите его высоту в 20 пикселей.

    #getPhotoButton {
     -ms-grid-row: 1;
     width: 120px;
     height: 20px;
    }
    
    #imageName {
     -ms-grid-row: 2;
    }
    
    #imageGrid {
     -ms-grid-row: 3; 
    }
    
    
  4. Определите стиль для класса pageSubheader.
    .pageSubheader {
     font-family: 'Segoe UI Light';
     font-size: 20px;
     vertical-align: bottom;
     margin: 0px 0px 40px 0px;
    }
    
    
  5. Запустите приложение.

    Приложение PhotoAppSample после добавления сетки для основного содержимого.

Мы определили сетку для основного содержимого Теперь содержимое распределено между тремя строками. Если бы вы могли видеть контуры строк, они бы выглядели примерно так.

Приложение PhotoAppSample с контурами строк сетки содержимого

Шаг 4. Определение макета для остальной части страницы

Теперь, когда мы создали сетку для основного содержимого, закончим определение макета для остальной части приложения.

JJ841108.wedge(ru-ru,WIN.10).gifОпределение макета для остальной части страницы

  1. Определите сетку для изображения и сведений об изображении. Откройте home.css и обновите стиль, созданный для imageGrid на последнем шаге. Настройте imageGrid как сетку из двух столбцов. Задайте для ширины каждого столбца значение auto.
    #imageGrid {
     -ms-grid-row: 3; 
     display: -ms-grid;
     -ms-grid-columns: auto auto;
    }
    
    
  2. После стиля для imageGrid создайте стиль для элемента displayImage. Разместите его в первом столбце imageGrid, задайте для его параметра width значение "375 пикселей" и такое же для параметра max-height — "375 пикселей", настройте черную границу и цвет фона "gray" (серый).
    #displayImage {
     -ms-grid-column: 1;
     width: 375px;
     max-height: 375px; 
     border: 1px solid black;
     background-color: gray; 
    
    }
    
    
  3. Создайте стиль для элемента imageInfoContainer. Разместите его во втором столбце imageGrid и задайте левое поле равным 20 пикселям.
    #imageInfoContainer {
     -ms-grid-column: 2;
     margin-left: 20px; 
    }
    
    
  4. Создайте стиль для элементов div, расположенных внутри элемента imageInfoContainer. Задайте для них левое поле в 20 пикселей, нижнее поле в 40 пикселей, ширину 400 пикселей и установите для параметра word-wrap значение "break-word".

    #imageInfoContainer > div {
     margin-left: 20px;
     margin-bottom: 40px;
     width: 400px; 
     word-wrap: break-word;
    }
    
    
  5. Запустите приложение.

    Приложение PhotoAppSample с дополнительным макетом




Источник: http://msdn.microsoft.com/ru-ru/library/windows/apps/
Категория: Создание с помощью JavaScript | Добавил: expert1 (19.04.2013)
Просмотров: 1323 | Теги: Web, metro-приложения, Windows | Рейтинг: 0.0/0
Всего комментариев: 0