Иногда трудно понять, какой элемент управления использовать, когда вы думаете о том, чтобы перенести ваш фид данных в ваше приложение Windows 8. Вы знаете, что хотите внести их как плитки той или иной формы. Может быть, вы хотите сделать классические квадратные плитки, такие как eBay.
Надеюсь, однако, вы хотите добавить немного яркости и индивидуальности вашей. Вы можете сделать что-то вроде приложения Cookbook. Их первичная точка данных, очевидно, является рецептом, и мне кажется, что дизайнеры этого приложения поместили их в маленькие поляроиды с тенями и всем остальным.
Вы можете скопировать музыкальное приложение, которое использует изображения героев — больше, чем средние изображения, которые передают чувство особенности или значимости. <Disclaimer> Пожалуйста, не обращайте внимания на то, что Джастин Бибер, кажется, находится в моем разделе, где я сейчас играю . Уверяю вас, это не так </ disclaimer>
Вы могли даже получить trés chic и модель Cocktail Flow с их новой красивой плиткой. Они вряд ли похожи на плитки, но они все еще передают этот важный дизайн Windows 8.
Неизбежно, вам придется выбирать, какой элемент управления лежит в основе представления данных, и в конечном итоге вам придется реализовать его.
В этом посте я хотел бы немного изучить, какой элемент управления выбрать, когда и почему. Как обычно, я буду исходить из перспективы HTML / JS, поэтому, если вам интересно, какие у вас есть варианты в XAML, Bing — ваш друг.
Первое, на что я хочу обратить внимание, это то, что не все списки данных созданы равными. Если вы работаете с разделом вашего концентратора, вы работаете с очень ограниченным набором данных. С другой стороны, если ваш пользователь решил увидеть что-то вроде вашего списка всех рецептов, то в этом списке может быть 10 или 100 элементов. Два сценария являются кандидатами для совершенно разных решений.
Для первого, раздела hub, я бы использовал сетку, подобную той, что вы видите на скриншоте приложения Music выше. Вы знаете, что у вас есть ровно четыре ячейки для изображений (для альбомов в данном случае), и вы можете определить, какие четыре альбома вы хотите показать, и какие из них заслуживают огромной рекомендуемой ячейки слева. Преимущество использования сетки заключается в том, что вы имеете полный контроль над ее макетом. Вам не нужно придерживаться симметричных списков квадратов. Вы можете получить фанк с макетом, и вы можете изменить его тоже. Вы можете создать один макет для элементов одного элемента, а другой — для трех. Это все зависит от вас (с разрешения вашего друга-дизайнера, конечно). Недостатком использования сетки является то, что вы не можете привязать ее к перечисляемому списку данных. Это не большая проблема, однако,потому что, опять же, вы работаете только с несколькими предметами. Кроме того, в сетках нет встроенного UX-ням. Например, они не обрабатывают автоматически выделение, поэтому, если вы хотите, чтобы пользователь мог выбирать несколько объектов в вашей сетке, вам придется вычислить как это сделать.
Для последнего списка рецептов, который вы видите на скриншоте приложения Cookbook выше, я бы использовал ListView. В ListView встроен UX-ням. Он автоматически обрабатывает вызовы, выбор и многое другое. Оно течет, оно сковывает, оно группирует и оборачивает. Это действительно здорово, для чего это сделано.
В других сценариях, если вы согласны отказаться от ням, которые предоставляет ListView, вы можете выбрать FlexBox. Флексбоксы дают вам больше контроля, чем ListView, над тем, как его члены расположены, и ничего сложного не отображается для каждого элемента флексбокса. Если вы просто внедрите кучу div в ваш flexbox, то это все, что он будет содержать.
Чтобы избежать просто концептуальной публикации в блоге разработчиков, позвольте мне создать быструю настраиваемую сетку, а затем заполнить ее некоторым содержанием.
Во-первых, дизайн. Позвольте мне вынуть перо цифрового преобразователя и составить быстрый макет сетки с помощью CorelDRAW (woot!)…
Это концепция. Теперь для реализации. Я только собираюсь расположить семь пунктов в первом разделе.
Сначала HTML …
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>fancygrid</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<link href="fancygrid.css" rel="stylesheet" />
<script src="fancygrid.js"></script>
</head>
<body>
<div class="fancygrid fragment">
<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">Fancy Grid</span>
</h1>
</header>
<section aria-label="Main content" role="main">
<div id="grid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</section>
</div>
</body>
</html>
Единственная вещь в этом HTML, которая не является шаблонной, — это div, называемый grid, и семь div внутри. Есть один для каждой плитки в нашем макете. А теперь перейдем к CSS, который не намного дольше …
.fancygrid section[role=main] > * {
margin-left: 120px;
}
.fancygrid #grid {
height:540px;
display: -ms-grid;
-ms-grid-columns: 240px 300px 240px;
-ms-grid-rows: 184px 184px 184px;
}
.fancygrid #grid > div {
border: 1px solid white;
margin: 5px;
}
.fancygrid #grid > div:nth-of-type(1) {
-ms-grid-row: 1;
-ms-grid-column: 1;
}
.fancygrid #grid > div:nth-of-type(2) {
-ms-grid-row: 2;
-ms-grid-column: 1;
}
.fancygrid #grid > div:nth-of-type(3) {
-ms-grid-row: 3;
-ms-grid-column: 1;
}
.fancygrid #grid > div:nth-of-type(4) {
-ms-grid-row: 1;
-ms-grid-column: 2;
-ms-grid-row-span: 3;
}
.fancygrid #grid > div:nth-of-type(5) {
-ms-grid-row: 1;
-ms-grid-column: 3;
}
.fancygrid #grid > div:nth-of-type(6) {
-ms-grid-row: 2;
-ms-grid-column: 3;
}
.fancygrid #grid > div:nth-of-type(7) {
-ms-grid-row: 3;
-ms-grid-column: 3;
}
Отлично. Нет JavaScript. Так, как это должно быть. Это просто вопрос макета, поэтому это совместная работа между HTML (наша структура) и CSS (наш макет и стиль). HTML в этом случае очень прост. Это просто div с семью div внутри. Наш CSS похож на того парня из вашей химической лаборатории в старшей школе, который делал всю работу для всей вашей лабораторной группы, пока вы играли в Nintendo. Бездельник.
So let me explain. The first style rule that refers to the main section is just something I do make sure everything in that main section takes on the 120px left margin that characterizes Windows 8 apps. The next rule applies to the grid. You may know by now, but the .fancygrid that preceeds #grid is just there to namespace this rule to this page. The next rule applies to all seven of the child div’s of the #grid div. The child combinator (the >) in this case is likely important. If you end up putting content inside of these cells and that content contains any div elements at all, this rule would apply to them if you used a space (the descendent combinator) instead of that greater than sign. So for all seven cells we want to draw a white border and give 5px of space. Why 5px? Because the Windows 8 design principles call for 10px between items and so that would be 5px around each item. Then I’m using the :nth-of-type() pseudo-class to refer to each div according to its position and add the correct -ms-grid properties to put it where it belongs. Notice how the 4th div has a span of 3.
And here’s the result…
Now, if you’re like me, you see this done once and it looks fine and dandy, but your mind races to imagine the value of something like this in a library primed for reuse. It would be super easy to dynamically add div’s and a couple of CSS properties each according to the template selection chosen by the developer. I believe I’ll get started on that now. Or perhaps soon. By all means, please beat me to it.
Hope this has been helpful. Now get to work!