动态更改WinRT javascript应用程序的外观

时间:2013-11-15 16:11:46

标签: user-interface windows-runtime microsoft-metro mobile-application hybrid-mobile-app

您知道在创建网络应用时,可以从浏览器点击F12,然后即可编辑样式表,删除dom元素等内容。

这使得在开发UI时快速转向。实时节省!

否则,需要进行大量的编译,部署和点击才能进入您想要测试的区域。如果您正在测试的区域位于工作流程的最后,那么痛苦就更多了。当你想要做的只是改变字体大小以使其看起来“更好”时,我发现这样做会令人沮丧地耗费时间。

是否有类似于WinRT环境中的工具?这只是移动应用程序开发的本质还是有些东西(无论平台如何)允许您动态编辑UI?

1 个答案:

答案 0 :(得分:1)

是的,您有几种选择。

首先,Blend for Visual Studio - 随Visual Studio Express for Windows一起安装 - 是一个很棒的样式工具。它与VS共享相同的项目结构,因此您可以同时运行两者。实际上,在VS中,右键单击解决方案资源管理器中的项目,选择“在混合中打开”,然后在那里。

Blend实际上加载了应用程序并执行了JS代码,因此所有动态创建的元素也都存在。它还具有交互模式,可让您进入正在运行的应用程序,根据需要导航和设置状态,然后退出该模式并处理样式。有关详情,我的书中有一个视频(first edition | second edition preview),其中显示了Blend的基础知识 - 您可以专门查看here并查看视频2-2和5来自第二版的3)。第2章也在文中给出了一些介绍。

其他两个选项在Visual Studio本身。

首先,当它运行的应用程序有一个命令Debug>刷新Windows应用程序(F4),重新加载HTML和CSS,而无需重新启动应用程序。我使用它来重新加载更改,正是您提到的原因。该命令位于暂停/停止/重启按钮右侧的工具栏上。

其次,正在运行的应用程序将在调试器中具有DOM Explorer窗格。如果您没有看到它,请使用Debug> Windows> DOM Explorer命令打开它。在该窗格中,您可以导航DOM树(就像在Blend的Live DOM窗格中一样)并找到您关注的元素,或者您可以使用DOM Explorer中最左侧的按钮直接在应用程序中选择元素。

在DOM浏览器的右侧,您可以选择样式,跟踪,计算,布局和事件。您可以直接在“样式”窗格中进行更改,并立即应用它们。事实上,我一直都在试用这些东西。

我的书中还有2分钟的视频,请参阅here。有些文档在http://msdn.microsoft.com/en-us/windows/apps/hh696632上。