Как и в предыдущей статье, вы найдете видео и исходный код для загрузки в конце статьи.
Эта статья является второй частью этого: Windows 8 HTML5 Metro Style App: Как создать маленькую программу для чтения RSS за 30 минут (часть 1/2)
В этой статье мы увидим:
— Шаг 1: использование симулятора
— Шаг 2: отображение подробностей статей
— Шаг 3: завершение разработки подробного представления с помощью Blend
— Шаг 4: видео и исходный код для загрузки
Примечание. Эта статья была обновлена 06.04.2012 для внесения изменений в пользовательский интерфейс и в код между Windows 8 Consumer Preview и Release Preview. В общем, если вам нужно перенести ваше приложение в RP, вы должны прочитать этот документ: документ о взломе изменений . Новая версия RP повлияла на эту 2-ю статью 0 (кроме нового пользовательского интерфейса Visual Studio & Blend 5).
Шаг 1: с помощью симулятора
Важно знать, как ваше приложение работает с сенсорными устройствами и с различными разрешениями будущих планшетов и ПК с Windows 8.
Мы предоставляем крутой инструмент, который может помочь вам сделать ваши первые тесты: симулятор.
Например, если вы открываете проект, как это было в конце предыдущей статьи, мы можем смоделировать некоторые сенсорные взаимодействия, запустив симулятор с помощью этой кнопки:
Симулятор будет запущен. Это более или менее симулирует сеанс RDP на себя. Вот результат, который вы должны иметь:
Теперь вы можете нажать на эту иконку:
Это будет имитировать прикосновение. Попробуйте сдвинуть виртуальный палец на виртуальном дисплее. Затем вы увидите, что некоторые эффекты инерции и подпрыгивания уже реализованы для вас. Таким же образом, если вы дотронетесь до элемента и сдвинете его вниз, вы выберете его. Это то же самое, что щелкнуть по нему правой кнопкой мыши. Здесь вы видите преимущества использования собственных элементов управления WinJS, которые реализуют всю эту логику для вас.
Еще одна полезная кнопка — та, которая обрабатывает различные разрешения:
Попробуйте, например, смоделировать 23-дюймовый монитор с разрешением 1920×1080. Теперь вы должны увидеть этот вид макета:
Возможно, вы заметили, что мы переключаемся с 2 строк элементов на 3 строки в 1080p и с 5 видимых столбцов на 7. Элемент управления ListView также обрабатывает различные форм-факторы.
Поэтому, даже если WinJS не является обязательным в проектах HTML5 Metro, не стоит недооценивать все преимущества, которые он может принести вам бесплатно!
Шаг 2: отображение деталей статей
Чтобы отобразить содержание статей, нам нужен еще один фрагмент HTML. Перейдите на страницу « default.html » и вставьте эту:
<div id="articlecontent"></div>
Мы вставим содержание статьи по коду. Откройте « default.js ». Прямо над экземпляром Binding.List вставьте этот код:
var articlelistElement = document.getElementById("articlelist");
articlelistElement.addEventListener("iteminvoked", itemInvoked);
backbutton.addEventListener("click", backButtonClick);
Мы нацелены на наш элемент « articlelist » из DOM, который теперь должен быть элементом управления WinJS ListView благодаря выполнению функции processAll. Затем этот объект теперь выставляет событие с именем « iteminvoked ». Он поднимается, когда вы нажимаете / касаетесь одного из элементов списка. Кроме того, мы подписываемся на событие «click» кнопки «back», чтобы иметь возможность просто вернуться к экрану приветствия.
Теперь нам нужно создать связанные обработчики событий. Они здесь:
function backButtonClick(e) {
articlecontent.style.display = "none";
articlelist.style.display = "";
}
function itemInvoked(e) {
var currentArticle = articlesList.getAt(e.detail.itemIndex);
WinJS.Utilities.setInnerHTMLUnsafe(articlecontent, currentArticle.content);
articlelist.style.display = "none";
articlecontent.style.display = "";
}
Концепция действительно проста здесь. Когда пользователь щелкнет по одному из элементов, мы получим в коллекции соответствующий объект с его индексом ( e.detail.itemIndex ). Мы внедряем содержимое HTML в свойство innerHTML узла div, только что вставленного на главную страницу, через функцию setInnerHTMLUnsage () . Но почему мы должны использовать эту специальную функцию для этого?
Несколько быстрых заметок о контексте безопасности Metro Style Apps
Контекст безопасности приложения HTML5 Metro отличается от классической веб-страницы. В нашем случае попытка доступа непосредственно к свойству innerHTML защищена / проверена.
Например, если вы попытаетесь вставить какой-то HTML-файл, загруженный из «общедоступной сети», по умолчанию будет создано исключение безопасности, чтобы защитить вас. Я уверен, что вы не хотите, чтобы какой-нибудь скрипт вводил управление вашим приложением. Поэтому по умолчанию мы это предотвращаем.
Но если вы действительно знаете, что делаете, у вас есть возможность «обойти» эту автоматическую проверку, вызвав функцию setInnerHTMLUnsafe () .
Кроме того, вставка <iframe> в ваше приложение связана с контекстом безопасности, например, немного по-другому. Если вы заинтересованы в деталях, вот несколько статей для чтения:
— Особенности и различия HTML, CSS и JavaScript
— Особенности и ограничения в зависимости от контекста
— Повышение безопасности HTML: подробности для toStaticHTML
Хорошо, давайте вернемся к нашей основной теме.
То, как мы отображаем содержание статьи, действительно просто. Мы скрываем список наших элементов, переключая его « display » на « none » и отображаем div « articlecontent ». При нажатии кнопки « назад » мы делаем прямо противоположное.
Хорошо, нажмите F5, и у вас должно получиться что-то подобное после нажатия на один из пунктов:
Вы заметите, что макет далеко не крутой, но мы собираемся поработать над этим через несколько минут с Blend.
А пока я хотел бы сосредоточиться на чем-то действительно раздражающем в текущей версии. Навигация внутри статьи и обратно на экран приветствия работает нормально. Но пользовательский опыт не является оптимальным. Деталь статьи прибывает без какого-либо перехода.
Затем мы подошли к важному пункту приложений в стиле Metro: « Fast & Fluid ». Вам нужно предложить производительность своим пользователям и сказать им, что ваше приложение действительно живое. Чтобы сделать это, просто добавив несколько небольших переходов, анимация может полностью изменить восприятие. Технически вы можете реализовать их двумя способами.
Вы можете реализовать их, используя чистые переходы / анимации CSS3, чтобы отобразить интересующий вас контент. Теперь вам нужно найти подходящую анимацию. Если вы хотите узнать, как работают эти новые функции CSS3, мы сделали несколько вступительных статей: Дэвид Катухе и я здесь:
— Введение в переходы CSS3
— Введение в анимацию CSS3
Или вы можете использовать библиотеку WinJS, которая предоставляет готовые анимации, чтобы следовать рекомендациям Metro. Под капотом вы найдете использование CSS Transform и переходов. Но для нас, разработчиков, у нас просто есть простая строка JavaScript для вызова.
Например, в обработчике itemInvoked () вставьте эту строку кода в конец функции:
WinJS.UI.Animation.enterPage(articlecontent);
And please insert this one at the end of the second event handler:
WinJS.UI.Animation.enterPage(articlelist);
Pressing F5, you should now have some subtle transitions while you’re navigating inside the application. Trust us, they will really make the difference in the user experience!
Step 3: finishing the design of the detail view with Blend
Switch back to Blend. It will ask you again to reload all the changes you’ve done inside Visual Studio.
Question of the day: how will you be able to design the detail view as we need to simulate a navigation action via an item selection?
Well, you already had the answer in the previous article. Blend 5 is live running your HTML5 Metro application. But you’re maybe lacking an additional detail. You can switch into an “interactive” mode by clicking on this button:
It should be named “Turn on Interactive Mode”. Once done, you should be able to interact with your application, navigate to the article content you’d like to review and switch back to the design surface by clicking on the same button. It my case, I’ve decided to use this article as a base:
In the style section, under the appropriate Media Query, add a new rule targeting “#articlecontent” and select it immediately.
In the “Sizing“ section, fix the width & height to 100%.
In the “Layout” part, put a left padding of 120px to align the content with the title.
This raises a new problem. The layout our “articlecontent” div doesn’t fit anymore in the width of our screen.
To fix that, modify the “width” property and click to select a “custom expression”:
We’re going to use the CSS Calc() operator. Enter the following expression “calc(100%-120px)”.
We’re better following the Metro guidelines this way. We’ve got an ultimate task to do it in an even better way: allowing the user to slide horizontally the content and make it more readable.
Let’s start by readability. There is a very useful CSS3 feature for that easy to put in place: CSS3 Multicolumns.
Jump into the “Multicolumn” section of the “CSS Properties” panel. Modify the layout to create 480px columns width with gaps of 80px between them.
It starts to look fine, isn’t it?
To conclude, we need to implement horizontal sliding. Go into the “Search Properties” textbox and type “over”. Blend will then filter all the properties containing the “over” keyword.
Set the “overflow-x” property to “auto” and “overflow-y” to “hidden”.
You can switch back to Visual Studio, accept the changes and press F5 to play with the final result.
Special additional bonus level for warriors
Well, as I feel you still want to play with Blend, let’s add another feature. What is the most important thing for us while we’re reading a technical article? The source code of course!
Once you know that, don’t hesitate to put some emphasis on the code in a way or in another to catch the eye of the developers.
In the Channel9 case, they had the excellent idea to insert the code parts into <pre> tags. It will simplify our life to style this part.
Add a new CSS rule “#articlecontent pre”.
Switch into the interactive mode and navigate into an article where some source code is visible enough.
Select the last rule you’ve just added and go into the “Background” section of the CSSS properties. Click to set a color:
You will then be able to use this wonderful color editor to make your choice:
But if you’re a poor developer like myself, you will probably have a natural tendency to choose the worst color ever. So, click on the color picked icon and choose the nearest Blend grey. It’s obviously a good grey.
To definitely conclude, on the <pre>, set the “overflow-x” property to auto and the “overflow-y” to “hidden”.
Pressing F5 will bring you this kind of experience:
Step 4: video and source code to download
Well, I hope you’re now convinced I wasn’t lying. If you were focused enough, you should have spent 30 minutes to build this little application.
Note: this video is still the one made with the Consumer Preview. I’ll update it to the Release Preview as soon as possible.
Here is the video to watch following these steps:
And here is the source code to download: Simple Channel9 Reader Article2
Thanks for reading! To conclude, I’d like to warn you on a specific point. These 2 tutorials have received nice feedbacks from some of you on the web. As there were made to explain via in a simple way the very bases of WinJS and of a Metro style application, I’m pretty glad about that.
Still, it lacks a lot of features to make it a great Windows 8 application:
— a nice Splash Screen and a dynamic tile
— some visual feedbacks to the user to tell him we’re loading the data during the launch phase
— a snap view
— a better Windows 8 integration to do search via the Search Charm and optionally the share one
— the use of the navigation framework to display the articles rather than hiding/displaying our 2 divs
— adding an offline mode support to be able to use the application without network access and to avoid reloading the same data each time
I will soon write articles dedicated to that to continue this series on my blog. In the meantime, if you’d like to go further and implement some of these concepts, here are some good articles to read:
— An excellent series done by David Catuhe: How to cook a complete Windows 8 application with HTML5, CSS3 and JavaScript in a week. You will discover how to support the snapped view, the search contract, the navigation framework and a lot of other cool Windows 8 features.
— Create your first Metro style app using JavaScript covering the same topic and complementary to these 2 articles.
At last, if you’d like to test these 2 tutorials on a WordPress blog, don’t forget to read this complementary post: Windows 8 HTML5 Metro Style App: RSS reader in 30min — building your WordPress version