Динамическое изменение внешнего вида приложения javascript WinRT

Question

Вы знаете, когда вы создаете веб-приложение, вы можете нажать F12 из своего браузера и сможете редактировать такие вещи, как таблица стилей, удалять элементы dom и т. Д. На лету.

Это обеспечивает быстрый поворот при разработке пользовательского интерфейса. Заставка в реальном времени!

В противном случае существует много компиляции, развертывания и щелчка, чтобы перейти в область, которую вы хотели протестировать. И если область, которую вы тестируете, находится в конце рабочего процесса, боль намного больше. Я считаю, что делать это очень сложно, когда все, что вы хотите сделать, это просто изменить размер шрифта, чтобы он выглядел «лучше».

Есть ли какой-нибудь инструмент, похожий на тот, что в среде WinRT? Является ли это просто природой разработки мобильных приложений или что-то там (независимо от платформы), которое позволяет вам редактировать пользовательский интерфейс на лету?

Answer 1

Да, у вас есть несколько вариантов.

Во-первых, Blend для Visual Studio - который установлен с Visual Studio Express для Windows - отличный инструмент для стилизации. Он разделяет одну и ту же структуру проекта с VS, поэтому вы можете одновременно работать одновременно. В VS фактически щелкните правой кнопкой мыши проект в обозревателе решений, выберите «Открыть в Blend», и вы там.

Blend фактически загружает приложение и выполняет JS-код, поэтому все динамически созданные элементы также находятся на своем месте. Он также имеет интерактивный режим, который позволяет перейти в запущенное приложение, перемещаться и устанавливать состояние по своему усмотрению, затем выйти из этого режима и работать с стилем. Более того, у меня есть видео в моей книге (first edition | second edition preview), в котором показаны основы Blend - вы можете специально пойти here и посмотреть видео 2-2 и 5-3 со второго выпуска). В главе 2 также содержится небольшое введение в текст.

Остальные два варианта находятся в самой Visual Studio.

Во-первых, при запуске приложения есть команда Debug> Refresh Windows Apps (F4), которая перезагрузит HTML и CSS без перезапуска приложения. Я использую это, чтобы перезагрузить изменения именно по причинам, которые вы упомянули. Эта же команда находится на панели инструментов справа от кнопок паузы/остановки/перезапуска.

Во-вторых, запущенное приложение будет иметь панель DOM Explorer в отладчике. Если вы его не видите, используйте команду Debug> Windows> DOM Explorer, чтобы открыть его. В этой области вы можете перемещаться по дереву DOM (например, в панели Live DOM Blend) и находить нужные элементы, или вы можете использовать самую левую кнопку в DOM Explorer, чтобы перейти к элементу и элементу непосредственно в приложении.

С правой стороны DOM-проводника у вас есть вкладки для стилей, трассировки, вычислений, макетов и событий. Вы можете вносить изменения непосредственно в панель «Стили», и они применяются немедленно. Я все время использую это, чтобы попробовать что-то.

У меня есть 2-минутное видео в моей книге для этого, см. Также here. Некоторые документы находятся на http://msdn.microsoft.com/en-us/windows/apps/hh696632.