从“Valo"改变主题为“驯鹿"在新的 Vaadin 7.3 应用程序中 [英] Change from "Valo" theme to "Reindeer" in new Vaadin 7.3 app

问题描述

在使用 Vaadin Plugin for NetBeans 创建的新 Vaadin 7.3 应用程序中，默认主题是新的 Valo 主题.Valo 看起来很时髦，而且是对未来非常重要的技术.不利的一面是，Valo 的默认大小巨大.在我学会如何缩小 Valo 小部件的大小之前，我需要将我的应用程序切换回具有专业外观的业务应用程序 驯鹿主题.

In new Vaadin 7.3 apps created with the Vaadin Plugin for NetBeans, the default theme is the new Valo theme. Valo is hip-looking, and very important technology for the future. On the downside, Valo is huge in its default sizing. Until I learn how to downsize the Valo widgets, I need to switch my app back to the professional-looking business-app-oriented Reindeer theme.

如何更改我的代码和项目设置以在整个应用中使用 Reindeer 主题?

How to change my code and project settings to use Reindeer theme throughout my app?

推荐答案

您需要编辑项目的 CSS，保存并进行清理和构建.

You need to edit your project's CSS, save, and do a clean-and-build.

在 NetBeans 项目面板中，导航到 Web Pages > VAADIN > themes > mytheme > mytheme.scss.在该文件中:

In the NetBeans Projects panel, navigate to Web Pages > VAADIN > themes > mytheme > mytheme.scss. In that file:

• 注释掉 @import "../valo/valo.scss"; 并替换为 @import "../reindeer/reindeer.scss";
• 注释掉 @include valo; 并替换为 @include reindeer;

• Comment out the line @import "../valo/valo.scss"; and replace with @import "../reindeer/reindeer.scss";
• Comment out the line @include valo; and replace with @include reindeer;

因此，在自动配置的 Vaadin 7 应用程序中，mytheme.scss 文件从此更改:

So in an automatically configured Vaadin 7 app, the mytheme.scss file changes from this:

@import "../valo/valo.scss";

@mixin mytheme {
  @include valo;

  // Insert your own theme rules here
}

...至此:

@import "../reindeer/reindeer.scss";  /*@import "../valo/valo.scss";*/

@mixin mytheme {
  @include reindeer;  /*  @include valo;*/

  // Insert your own theme rules here
}

保存 CSS

保存对mytheme.scss"文件的更改.

Save CSS

Save the changes to the "mytheme.scss" file.

NetBeans 可能会提供在保存时打开用于编译 Sass 文件的功能.拒绝报价.您的 Vaadin 项目已经配置为将 Sass 重建为 CSS，作为清理和构建的一部分.

NetBeans may offer to turn on a feature for compiling Sass files on Save. Decline the offer. Your Vaadin project is already configured to rebuild the Sass into CSS as part of a clean-and-build.

然后单击 NetBeans 工具栏上的清理并构建"按钮(锤子和扫帚图标).

Then click the "Clean and Build" button on NetBeans toolbar (the hammer and broom icon).

请耐心等待，因为这可能需要几分钟时间.观察输出窗格以查看构建何时完成.

Be patient as this may take a few minutes. Watch the Output pane to see when the build has completed.

这就是您更改项目所需的全部内容.您的新主题应该有效，除了接下来描述的警告.

That is all you need to change your project. Your new theme should be in effect, except for the caveat described next.

一些网络浏览器在缓存方面过于激进(看着你，Safari！).所以 Valo 的 CSS 等可能仍然卡住"在你的网络浏览器中.因此，当您运行您的项目时，如果您仍然看到 Valo 外观，请不要绝望.

Some web browsers are overly aggressive in their caching (looking at you, Safari!). So Valo’s CSS and such may still be "stuck" in your web browser. So when your run your project do not despair if you still see the Valo look.

点击网络浏览器的重新加载按钮，强制浏览器转储其缓存，从服务器加载新信息，并以其他主题的外观重新启动您的应用.在过去，某些浏览器(Firefox?)要求您在单击重新加载按钮时按住 Shift 键，但这可能不再需要了.如果 Valo 外观仍然存在，请使用搜索引擎了解如何清除特定 Web 浏览器的缓存.或者尝试使用其他网络浏览器来验证您的驯鹿主题设置.

Click the web browser’s reload button to force the browser to dump its cache, load fresh info from the server, and restart your app with the other theme's look. In the old days some browsers (Firefox?) required you to hold down the Shift key while clicking that reload button, but that may no longer be necessary. If the Valo look persists, use a search engine to learn how to clear your particular web browser’s cache. Or try another web browser to verify your Reindeer theme settings.

这篇关于从“Valo"改变主题为“驯鹿"在新的 Vaadin 7.3 应用程序中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！