生成主题

随着 GXT 4.0 主题生成器的推出，您现在可以通过在大量视觉选择中进行选择来开始生成主题。此新功能只需几个起始设置即可启动。

参考

• 主题生成器
• 外观设计

要求

Java 7

Sencha 专业服务

Sencha 专业服务还可以为您构建主题。您可以在此处了解专业服务选项。

运行 Themer

可以通过多种方式运行 themer。最简单的入门方法是从命令行开始。您可以通过运行 GXT 下载脚本中提供的预构建脚本之一来执行此操作。

themer.bat 文件旨在与 Windows 配合使用，

themer.sh 旨在与 Mac OS X 配合使用。

创建适用于 Linux 的脚本只需下载正确版本的 PhantomJS并指定可执行文件的路径即可。

还可以将 themer 直接作为 Ant 目标或作为 Maven exec:java 目标从 Java 中运行。

注意：这些脚本假定 Java 7 已设置为命令行使用，并且已指定平台特定的PhantomJS安装的位置。

运行程序选项

这些选项在 Windows 和 Mac 上均可用。

usage: ThemeBuilder [options] [config ...]
 -gen <path>                        directory to generate code to.
 -generateConfig <outputFile>       Generate sample configuration.
 -gwtXmlFilename <gwtXmlFilename>   Give ability to rename the Theme.gwt.xml file to something else. Must end with .gwt.xml.
 -h,--help                          Print this message.
 -i,--imagePath <customImagePath>   Optional path to custom images or SVG files for image generation.
 -imageFile <path>                  Captured image used for slicing images.
 -manifestFile <manifestFile>       JSON manifest file of the captured image.
 -out <jar>                         Path to jar file to generate.  Default is a jar named <theme.name>.jar in the current directory.
 -slicedDisabled <slicedDisabled>   Whether sliced version of the theme is disabled - flat themes or modern browsers.  Default is false.
 -sourcesOnly <boolean>             Sources only vs compile and jar. Default is false.
 -warDir <warDir>                   Directory to compile the css3-based theme to before images are sliced from it.

Maven 启动器选项

作为一种选择，您可以使用 Maven 来执行主题构建器。这可以通过示例原型项目很好地展示出来。

多个配置文件支持

主题构建器支持传递多个配置文件。所有配置详细信息都可以存在于一个文件中，但在某些情况下，将这些配置分离到多个文件中可能会很方便。这有助于将一个大文件分解成不同的“详细信息”组。此类组织方法的一个示例可能是 myconfig-base.theme、myconfig-tools.theme、myconfig-window.theme 等。

此功能还支持为单个应用程序维护多个主题的能力。常见的配置组件可以抽象到单独的文件中，并在主题生成之间重复使用。这有助于最大限度地减少多个主题之间的维护，同时减少复制/粘贴。

所有配置文件都按它们在命令行上出现的顺序进行处理。
通常，只要每个文件中的配置选项之间有明确的分隔，顺序就不重要。但是，如果同一配置存在于多个文件中，则最后一个配置将获胜。命令输出中没有表明存在多个配置，因此由开发人员来识别这些场景。

与单个配置文件选项一样，在运行主题生成器时必须提供完整配置。如果缺少任何部分，将显示一条错误消息，指示缺少哪些路径。在生成器继续之前，必须更正这些错误。

自定义图标

可以通过 -imagePath <path> 提供自定义图标。这些图标可以是光栅或 SVG 文件类型。

• 图标命名可以像 icon.svg、iconOver.svg 或 iconClick.svg 这样给出。默认图标在所有情况下都显示，悬停图标用于鼠标悬停，单击图标用于单击选择。

• 当使用 SVG 文件时，可以提供一个 icon.css 模板文件来覆盖 SVG 文件中的样式。

• GXT 4.x 图标覆盖必须使用与主题构建器中给出的相同图标。

使用 -imagePath 在 4.x 中覆盖图标的目录布局如下。注意：图像可以使用 .jpg 或 .png。

    icons
        icons/button
            icons/button/arrow.cssTemplate
            icons/button/arrow.svg
            icons/button/arrowBottom.svg
            icons/button/split.cssTemplate
            icons/button/split.svg
            icons/button/splitBottom.cssTemplate
            icons/button/splitBottom.svg
            icons/button/toolBarArrow.cssTemplate
            icons/button/toolBarArrow.svg
            icons/button/toolBarArrowBottom.cssTemplate
            icons/button/toolBarArrowBottom.svg
            icons/button/toolBarButtonSplit.cssTemplate
            icons/button/toolBarButtonSplit.svg
            icons/button/toolBarButtonSplitBottom.cssTemplate
            icons/button/toolBarButtonSplitBottom.svg
        icons/container
            icons/container/moreIcon.cssTemplate
            icons/container/moreIcon.svg
            icons/container/moreIconToolBar.cssTemplate
            icons/container/moreIconToolBar.svg
        icons/field
            icons/field/allLeft.svg
            icons/field/allRight.svg
            icons/field/bold.cssTemplate
            icons/field/bold.svg
            icons/field/checked.cssTemplate
            icons/field/checked.svg
            icons/field/clearTrigger.cssTemplate
            icons/field/clearTrigger.svg
            icons/field/dateTrigger.cssTemplate
            icons/field/dateTrigger.svg
            icons/field/down.svg
            icons/field/exclamation.svg
            icons/field/fontDecrease.cssTemplate
            icons/field/fontDecrease.svg
            icons/field/fontHighlight.cssTemplate
            icons/field/fontHighlight.svg
            icons/field/fontIncrease.cssTemplate
            icons/field/fontIncrease.svg
            icons/field/italic.cssTemplate
            icons/field/italic.svg
            icons/field/justifyCenter.cssTemplate
            icons/field/justifyCenter.svg
            icons/field/justifyLeft.cssTemplate
            icons/field/justifyLeft.svg
            icons/field/justifyRight.cssTemplate
            icons/field/justifyRight.svg
            icons/field/left.svg
            icons/field/link.cssTemplate
            icons/field/link.svg
            icons/field/ol.cssTemplate
            icons/field/ol.svg
            icons/field/radioSelected.cssTemplate
            icons/field/radioSelected.svg
            icons/field/radioUnselected.cssTemplate
            icons/field/radioUnselected.svg
            icons/field/right.svg
            icons/field/source.cssTemplate
            icons/field/source.svg
            icons/field/spinnerDown.cssTemplate
            icons/field/spinnerDown.svg
            icons/field/spinnerUp.cssTemplate
            icons/field/spinnerUp.svg
            icons/field/triggerArrow.cssTemplate
            icons/field/triggerArrow.svg
            icons/field/ul.cssTemplate
            icons/field/ul.svg
            icons/field/unchecked.cssTemplate
            icons/field/unchecked.svg
            icons/field/underline.cssTemplate
            icons/field/underline.svg
            icons/field/up.svg
        icons/grid
            icons/grid/checked.cssTemplate
            icons/grid/checked.svg
            icons/grid/collapse.cssTemplate
            icons/grid/collapse.svg
            icons/grid/columnHeaderBtn.cssTemplate
            icons/grid/columnHeaderBtn.svg
            icons/grid/columnsIcon.cssTemplate
            icons/grid/columnsIcon.svg
            icons/grid/expand.cssTemplate
            icons/grid/expand.svg
            icons/grid/groupBy.cssTemplate
            icons/grid/groupBy.svg
            icons/grid/sortAscendingIcon.cssTemplate
            icons/grid/sortAscendingIcon.svg
            icons/grid/sortAscHeaderIcon.cssTemplate
            icons/grid/sortAscHeaderIcon.svg
            icons/grid/sortDescendingIcon.cssTemplate
            icons/grid/sortDescendingIcon.svg
            icons/grid/sortDescHeaderIcon.cssTemplate
            icons/grid/sortDescHeaderIcon.svg
            icons/grid/unchecked.cssTemplate
            icons/grid/unchecked.svg
        icons/menu
            icons/menu/activeMenuParent.cssTemplate
            icons/menu/activeMenuParent.svg
            icons/menu/checked.cssTemplate
            icons/menu/checked.svg
            icons/menu/groupChecked.cssTemplate
            icons/menu/groupChecked.svg
            icons/menu/menuParent.cssTemplate
            icons/menu/menuParent.svg
            icons/menu/miniBottom.cssTemplate
            icons/menu/miniBottom.svg
            icons/menu/miniTop.cssTemplate
            icons/menu/miniTop.svg
            icons/menu/unchecked.cssTemplate
            icons/menu/unchecked.svg
        icons/statusproxy
            icons/statusproxy/dropAllowed.svg
            icons/statusproxy/dropNotAllowed.svg
        icons/tabs
            icons/tabs/activePlainTabClose.cssTemplate
            icons/tabs/activePlainTabClose.svg
            icons/tabs/activeTabClose.cssTemplate
            icons/tabs/activeTabClose.svg
            icons/tabs/plainTabClose.cssTemplate
            icons/tabs/plainTabClose.svg
            icons/tabs/scrollerLeft.svg
            icons/tabs/scrollerRight.svg
            icons/tabs/tabClose.cssTemplate
            icons/tabs/tabClose.svg
        icons/tips
            icons/tips/anchorBottom.cssTemplate
            icons/tips/anchorBottom.svg
            icons/tips/anchorLeft.cssTemplate
            icons/tips/anchorLeft.svg
            icons/tips/anchorRight.cssTemplate
            icons/tips/anchorRight.svg
            icons/tips/anchorTop.cssTemplate
            icons/tips/anchorTop.svg
        icons/toolbar
            icons/toolbar/first.cssTemplate
            icons/toolbar/first.svg
            icons/toolbar/last.cssTemplate
            icons/toolbar/last.svg
            icons/toolbar/next.cssTemplate
            icons/toolbar/next.svg
            icons/toolbar/prev.cssTemplate
            icons/toolbar/prev.svg
            icons/toolbar/refresh.cssTemplate
            icons/toolbar/refresh.svg
        icons/tools
            icons/tools/close.svg
            icons/tools/collapse.svg
            icons/tools/doubleDown.svg
            icons/tools/doubleLeft.svg
            icons/tools/doubleRight.svg
            icons/tools/doubleUp.svg
            icons/tools/down.svg
            icons/tools/expand.svg
            icons/tools/gear.svg
            icons/tools/left.svg
            icons/tools/maximize.svg
            icons/tools/minimize.svg
            icons/tools/minus.svg
            icons/tools/pin.svg
            icons/tools/plus.svg
            icons/tools/print.svg
            icons/tools/question.svg
            icons/tools/refresh.svg
            icons/tools/restore.svg
            icons/tools/right.svg
            icons/tools/save.svg
            icons/tools/search.svg
            icons/tools/unpin.svg
            icons/tools/up.svg
        icons/tree
            icons/tree/arrowDown.cssTemplate
            icons/tree/arrowDown.svg
            icons/tree/arrowRight.cssTemplate
            icons/tree/arrowRight.svg
            icons/tree/checked.cssTemplate
            icons/tree/checked.svg
            icons/tree/folder.cssTemplate
            icons/tree/folder.svg
            icons/tree/folderOpen.cssTemplate
            icons/tree/folderOpen.svg
            icons/tree/partial.cssTemplate
            icons/tree/partial.svg
            icons/tree/unchecked.cssTemplate
            icons/tree/unchecked.svg
        icons/widget
            icons/widget/downIcon.cssTemplate
            icons/widget/downIcon.svg
            icons/widget/leftButton.cssTemplate
            icons/widget/leftButton.svg
            icons/widget/miniBottom.svg
            icons/widget/miniLeft.svg
            icons/widget/miniRight.svg
            icons/widget/miniTop.svg
            icons/widget/rightButton.cssTemplate
            icons/widget/rightButton.svg

Windows 运行程序

在 Windows 上，您可以运行

    > themebuilder/bin/themer.bat

这里有一个使用“快速启动”主题配置的示例。

    > .\themebuilder\bin\themer.bat .\themebuilder\examples\quick-start\quick-start.theme

Mac 运行程序

在 OS X 上，您可以运行

    $ ./themebuilder/bin/themer.sh

这里有一个使用“快速启动”主题配置的示例。

    $ ./themebuilder/bin/themer.sh ./themebuilder/examples/quick-start/quick-start.theme

控制台输出

Themer 运行程序控制台输出看起来像这样。

示例输出

    template generation started
    template generation complete
    image generation started
    generating tool icons

    Saving sliced image to /private/var/folders/x8/9wz7qtw96t7grkdyjw1l61p40000gn/T/temp7830532799076699840.1/com/example/client/sliced/window/window-r.png
    Slicing complete - generated 225 images
    slice complete
    packaging started
    packaging complete

    The quickstart theme has finished generating.
    Copy the jar (/Path/To/Jar/quickstart.jar) into your project and copy the following line into your gwt.xml file:

    <inherits name="com.example.Theme" />

自定义 Neptune 或 Triton 主题

您可以通过自定义 neptune.theme 或 triton.theme 配置文件来分叉 Neptune 主题。

Mac

1. 下载 GXT 4.0 zip 文件。
2. 解压 GXT 4.0 zip 文件。
3. 将 gxt-theme-neptune.jar 重命名为 gxt-theme.neptune.zip。
4. 解压 gxt-theme-neptune.zip 内容。
5. 使用文本编辑器打开并修改 ./gxt-theme-neptune/neptune.theme。
   • 将 name 属性更改为类似 name = "custom_neptune" 的内容。
   • 将 basePackage 更改为类似 tld.domain.theme.custom_neptune 的内容。
   • 修改主题中的属性以生成所需的主题。
6. 使用 ../themebuilder/bin/themer.sh ./neptune.theme 生成主题。
7. 将生成一个名为 custom_neptune.jar 的 jar。注意：将 jar 复制到项目库文件夹，该文件夹可以命名为 gxt-project/lib。
8. 在 gxt_project/lib/custom_neptune.jar 上“右键单击”并选择“添加到构建路径”。
9. 然后将主题添加到 gxt_project 模块 <inherits name="tld.domain.theme.custom_neptune.Theme" /> 注意：务必禁用 gxt_project 模块配置中的任何其他主题。
10. 运行应用程序并验证是否已加载主题。
11. 返回步骤 5 以进行更多主题修改。

Windows

1. 下载 GXT 4.0 zip 文件。
2. 解压 GXT 4.0 zip 文件。
3. 将 gxt-theme-neptune.jar 重命名为 gxt-theme.neptune.zip。
4. 解压 gxt-theme-neptune.zip 内容。
5. 使用文本编辑器打开并修改 .\gxt-theme-neptune\neptune.theme。
   • 将 name 属性更改为类似 name = "custom_neptune" 的内容。
   • 将 basePackage 更改为类似 tld.domain.theme.custom_neptune 的内容。
   • 修改主题中的属性以生成所需的主题。
6. 使用 ..\themebuilder\bin\themer.bat .\neptune.theme 生成主题。
7. 将生成一个名为 custom_neptune.jar 的 jar。注意：将 jar 复制到项目库文件夹，该文件夹可以命名为 gxt-project/lib。
8. 在 gxt_project\lib\custom_neptune.jar 上右键单击并选择“添加到构建路径”。
9. 然后将主题添加到 gxt_project 模块 <inherits name="tld.domain.theme.custom_neptune.Theme" /> 注意：务必禁用 gxt_project 模块配置中的任何其他主题。
10. 运行应用程序并验证是否已加载主题。
11. 返回步骤 5 以进行更多主题修改。

快速入门示例

GXT 4.0 下载 zip 中有四个示例，位于 themebuilder/examples 目录中。每个文件夹都包含其自己的 readme.txt 文件。

Skeleton Config 主题

skeleton-config/ - 正如名称所示，这只是基本框架，仅包含主题构建所需的属性。它提供了所有选项，让你在构建主题时决定要更改的内容。

生成 Skeleton Config 主题

1. 打开并向 skeleton-config.theme 文件中的属性添加所有值。
   • Windows：.\themebuilder\examples\skeleton-config\skeleton-config.theme
   • Mac：./themebuilder/examples/skeleton-config/skeleton-config.theme
2. 生成主题。
   • Windows：.\themebuilder\bin\themer.bat .\themebuilder\examples\skeleton-config\skeleton-config.theme
   • Mac：./themebuilder/bin/themer.sh ./themebuilder/examples/skeleton-config/skeleton-config.theme
3. 在运行 themer 命令的同一目录中找到生成的主题 jar。

快速入门主题

quick-start/ - 此示例预先填充了所有必需的属性。这些属性中的大多数都构建为以文件顶部定义的值为关键值。这让你只需进行很少的更改，即可非常快速地粗略启动理想的主题。然后，你可以深入挖掘以进行更多更改，并确切获得项目所需的内容。

生成 Quickstart Config 主题

1. （可选）修改 quick-start.theme 值。
   • Windows：.\themebuilder\examples\quick-start\quick-start.theme
   • Mac：./themebuilder/examples/quick-start/quick-start.theme
2. 生成主题。
   • Windows：.\themebuilder\bin\themer.bat .\themebuilder\examples\quick-start\quick-start.theme
   • Mac：./themebuilder/bin/themer.sh ./themebuilder/examples/quick-start/quick-start.theme
3. 在运行 themer 命令的同一目录中找到生成的主题 quickstart.jar。

Maven Jar 主题

maven-jar/ - 这是一个从“quick-start”主题继承的示例 Maven 项目。运行 mvn install 会从配置中读取并构建主题所需的所有 jar 文件，并将其安装在本地存储库中。这基于用于生成“Neptune 主题”的 pom.xml。

生成 Maven Jar 主题

1. （可选）修改名为 themeDetails.theme 的 maven-jar 目录中的主题。
2. 切换到 maven-jar 目录。
   • Windows：cd .\themebuilder\examples\maven-jar
   • Mac：cd ./themebuilder/examples/maven-jar
3. 通过运行 mvn install 生成主题。
4. 在名为 sample-theme-1.0.0-SNAPSHOT.jar 的目标目录中找到生成的主题。

Maven 源

maven-source/ - 这是一个 Maven 项目，可让你生成一组源文件到 src/ 目录，然后你可以在其中直接修改它们。要重置回初始设置或使用新版本的 GXT 进行更新，只需重新运行 mvn install -Pgenerate 命令即可更新源并重新应用所需的更改。这可让你对生成的主题进行版本控制，并对其进行自己的更改。

生成 Maven 源主题

1. 可选：修改名为 themeDetails.theme 的 maven-source 目录中的主题。
2. 更改为 maven-source。
   • Windows：cd .\themebuilder\examples\maven-source
   • Mac：cd ./themebuilder/examples/maven-source
3. 通过运行 mvn install -Pgenerate 生成主题源。
4. 修改 src/main/java 中的任何源以满足你的特定需求
5. 通过运行 mvn install 生成主题 jar。
6. 在名为 sample-theme-1.0.0-SNAPSHOT.jar 的目标目录中找到生成的主题。
7. 如果稍后运行 mvn install -Pgenerate，它将还原源到其原始状态。

使用主题

生成主题后，只需复制 jar 并将其添加到库的类路径中。然后将其添加到 GWT 模块。

inherits 中使用的主题包命名派生自主题配置中的 basePackage 属性。

1. 生成主题。
2. 在项目的根目录中创建一个 MyGxtProject40/lib 库文件夹。（可以更改 lib 名称。）
3. 将生成的主题 quickstart.jar 复制到 MyGxtProject40/lib 文件夹。
4. 通过向 MyGxtProject40.gwt.xml 配置添加 <inherits name="com.example.Theme" /> 来添加主题。

MyGxtProject40.gwt.xml 中的示例代码段。

    <!-- <inherits name='com.sencha.gxt.theme.blue.Blue'/> -->
    <!-- <inherits name='com.sencha.gxt.theme.gray.Gray' /> -->
    <!-- <inherits name="com.sencha.gxt.theme.neptune.Theme" /> -->
    <inherits name="com.example.Theme" />

使用生成的主题的 MyGxtProject40.gwt.xml 配置示例。

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE module PUBLIC "-//Google Inc.//DTD GWT 2.7.0//EN"
        "http://gwtproject.org/doctype/2.7.0/gwt-module.dtd">

      <!-- Inherit the core Web Toolkit stuff. -->
      <inherits name='com.google.gwt.user.User' />

      <!-- Other module inherits -->
      <inherits name='com.sencha.gxt.ui.GXT' />
      <inherits name='com.sencha.gxt.chart.Chart' />

      <!-- GXT Stylesheet -->
      <stylesheet src="reset.css" />

      <!-- <inherits name='com.sencha.gxt.theme.blue.Blue'/> -->
      <!-- <inherits name='com.sencha.gxt.theme.gray.Gray' /> -->
      <!-- <inherits name="com.sencha.gxt.theme.neptune.Theme" /> -->
      <inherits name="com.example.Theme" />

      <!-- Specify the app entry point class. -->
      <entry-point class='com.sencha.gxt.test.client.MyGxtProject40EntryPoint' />

      <!-- Specify the paths for translatable code -->
      <source path='client' />
      <source path='shared' />

      <!-- <set-configuration-property name="CssResource.style" value="pretty" /> -->
    </module>

将 3.x 升级到 4.x

已向 4.0 添加了新属性。从旧主题配置文件升级时，输出将列出缺少的属性。

运行主题生成器并查找缺少属性的示例

    $ ./themebuilder/bin/themer.sh ./themebuilder/examples/quick-start/quick-start.theme
    Exception in thread "main" com.sencha.gxt.themebuilder.ConfigHandler$ConfigError: Configuration Errors: 
    Missing property: theme.details.field.radio
    Missing property: theme.details.field.radio.boxLabel
    Missing property: theme.details.field.radio.boxLabel.size
    Missing property: theme.details.field.radio.boxLabel.family
    Missing property: theme.details.field.radio.boxLabel.color
    ... 

错误

缺少 Theme.gwt.xml

如果应用程序尝试访问尚未生成的主题，则会发生此错误。运行主题生成器以生成缺少的主题，并确保主题 jar 在类路径中可用。

Super Dev Mode starting up
   workDir: /var/folders/x8/9wz7qtw96t7grkdyjw1l61p40000gn/T/gwt-codeserver-1988045627584289815.tmp
Loading modules
   com.example.project.MyThemeSandbox
   Loading inherited module 'com.example.project.MyThemeSandbox'
      Loading inherited module 'com.example.project.MyThemeSandbox'
         Loading inherited module 'com.example.project.Theme'
      Loading inherited module 'com.example.project.Theme'
            [ERROR] Unable to find 'com/example/project/Theme.gwt.xml' on your classpath; could be a typo, or maybe you forgot to include a classpath entry for source?
         [ERROR] Unable to find 'com/example/project/Theme.gwt.xml' on your classpath; could be a typo, or maybe you forgot to include a classpath entry for source?
[ERROR] shell failed in doStartup method