使用前端向导修改蓝图功能

blueprint.ts文件中的Options界面会自动生成开启的蓝图选择向导。 CodeCatalyst 前端向导支持Options使用 JSDOC 风格的注释和标签对蓝图进行修改和功能。你可以使用 JSDOC 风格的注释和标签来执行任务。例如，您可以选择选项上方显示的文本，启用输入验证等功能，或者使选项可折叠。该向导的工作原理是解释从Options接口的 TypeScript 类型生成的抽象语法树 (AST)。该向导会自动将自己配置为所描述的最佳类型。并非所有类型都受支持。其他支持的类型包括区域选择器和环境选择器。

以下是使用带有蓝图的 JSDOC 注释和标签的Options向导示例：


export interface Options {
  /**
   * What do you want to call your new blueprint?
   * @validationRegex /^[a-zA-Z0-9_]+$/
   * @validationMessage Must contain only upper and lowercase letters, numbers and underscores
   */
  blueprintName: string;

  /**
   * Add a description for your new blueprint.
   */
   description?: string;

   /**
    * Tags for your Blueprint:
    * @collapsed true
    */
  tags?: string[];
}

默认情况下，Options界面每个选项的显示名称都显示camelCase在中。JSDOC 样式注释中的纯文本显示为向导中选项上方的文本。

支持的标签

前端向导Options中的自定义蓝图支持以下 JSDOC 标签。

@inlinePolicy。 /路径/to/policy/file.json

需要-成为类型的选项Role。
用法-允许您传达角色所需的内联策略。该policy.json路径应位于源代码下。当您需要角色的自定义策略时，请使用此标签。
依赖关系-blueprint-cli 0.1.12 及以上
示例-@inlinePolicy ./deployment-policy.json


environment: EnvironmentDefinition{
    awsAccountConnection: AccountConnection{
      /**
       * @inlinePolicy ./path/to/deployment-policy.json
       */
      cdkRole: Role[];
    };
   };

@trustPolicy。 /路径/to/policy/file.json

需要-成为类型的选项Role。
用法-允许您传达角色所需的信任策略。该policy.json路径应位于源代码下。当您需要角色的自定义策略时，请使用此标签。
依赖关系-blueprint-cli 0.1.12 及以上
示例-@trustPolicy ./trust-policy.json


environment: EnvironmentDefinition{
    awsAccountConnection: AccountConnection{
      /**
       * @trustPolicy ./path/to/trust-policy.json
       */
      cdkRole: Role[];
    };
   };

@validationRegex 正则表达式

需要-选项为字符串。
用法-使用给定的正则表达式对选项执行输入验证并显示。@validationMessage
示例-@validationRegex /^[a-zA-Z0-9_]+$/
建议-搭配使用@validationMessage。默认情况下，验证消息为空。

@validationMessage 字符串

需要-@validationRegex 或其他错误才能查看使用情况。
用法-@validation* 失败时显示验证消息。
示例-@validationMessage Must contain only upper and lowercase letters, numbers, and underscores。
建议-搭配使用@validationMessage。默认情况下，验证消息为空。

@collapsed 布尔值（可选）

需要-不适用
用法-允许子选项可折叠的布尔值。如果存在折叠的注释，则其默认值为 true。将该值设置为可@collapsed false创建最初处于打开状态的可折叠部分。
示例-@collapsed true

@displayName 字符串

需要-不适用
用法-更改选项的显示名称。允许使用除 camelCase 以外的格式作为显示名称。
示例-@displayName Blueprint Name

@displayName 字符串

需要-不适用
用法-更改选项的显示名称。允许使用除 c amelCase 以外的格式作为显示名称。
示例-@displayName Blueprint Name

@defaultEntropy 数字

需要-选项为字符串。
用法-将指定长度的随机字母数字字符串附加到选项中。
示例-@defaultEntropy 5

@placeholder 字符串（可选）

需要-不适用
用法-更改默认文本字段占位符。
示例-@placeholder type project name here

@textArea 数字（可选）

需要-不适用
用法-将字符串输入转换为文本区域组件，用于较大的文本部分。添加数字定义行数。默认值为五行。
示例-@textArea 10

@hidden 布尔值（可选）

需要-不适用
用法-除非验证检查失败，否则不向用户隐藏文件。默认值为 true。
示例-@hidden

@button 布尔值（可选）

需要-不适用
用法-注释必须位于布尔属性上。添加一个按钮，选择后该按钮将合成为 true。不是切换。

示例-buttonExample: boolean;


/**
  * @button
  */
buttonExample: boolean;

@showName 布尔值（可选）

需要-不适用
用法-只能用于账户连接类型。显示隐藏的名称输入。默认值为 default_environment。

示例-@showName true


/**
  * @showName true
  */
accountConnection: AccountConnection<{
    ...
}>;

@ showEnvironmentType 布尔值（可选）

需要-不适用
用法-只能用于账户连接类型。显示隐藏的环境类型下拉菜单。所有连接默认为production。选项为 “非生产” 或 “生产”。

示例-@showEnvironmentType true


/**
  * @showEnvironmentType true
  */
accountConnection: AccountConnection<{
    ...
}>;

@forceDefault 布尔值（可选）

需要-不适用
用法-使用蓝图作者提供的默认值，而不是用户之前使用的值。

示例-forceDeafultExample: any;


/**
  * @forceDefault
  */
forceDeafultExample: any;

@requires 蓝图名称

需要-为界面Options添加注释
用法-警告用户将指定blueprintName内容作为当前蓝图的要求添加到项目中。

示例-@requires '@amazon-codecatalyst/blueprints.blueprint-builder'


/*
 * @requires '@amazon-codecatalyst/blueprints.blueprint-builder'
 */
export interface Options extends ParentOptions {
...

支持的 TypeScript 类型

前端向导Options中的自定义蓝图支持以下 TypeScript 类型。

数字

需要-成为类型的选项number。
用法-生成数字输入字段。
示例-age: number


{
  age: number
  ...
}

String

需要-成为类型的选项string。
用法-生成字符串输入字段。
示例-name: string


{
  age: string
  ...
}

字符串列表

需要-成为类型的选项boolean。
用法-生成一个复选框。
示例-isProduction: boolean


{
  isProduction: boolean
  ...
}

电台

需要-选项是三个或更少字符串的并集。
用法-生成选定的电台。

注意
当有四个或更多项目时，此类型将以下拉列表的形式呈现。
示例-color: 'red' | 'blue' | 'green'


{
  color: 'red' | 'blue' | 'green'
  ...
}

需要-选项是四个或更多字符串的并集。
用法-生成下拉列表。
示例-runtimes: 'nodejs' | 'python' | 'java' | 'dotnetcore' | 'ruby'


{
  runtimes: 'nodejs' | 'python' | 'java' | 'dotnetcore' | 'ruby'
  ...
}

可扩展部分

需要-成为对象的选项。
用法-生成可扩展部分。对象中的选项将嵌套在向导的可扩展部分中。
示例-


{
     expandableSectionTitle: {
         nestedString: string;
         nestedNumber: number;
     }
}

元组

需要-选择为类型Tuple。
用法-生成键值付费输入。
示例-tuple: Tuple[string, string]>


{
    tuple: Tuple[string, string]>;
    ...
}

元组列表

需要-选项是类型的数组Tuple。
用法-生成元组列表输入。
示例-tupleList: Tuple[string, string]>[]


{
  tupleList: Tuple[string, string]>[];
  ...
}

Selector

需要-选择为类型Selector。
用法-生成应用于项目的源存储库或蓝图的下拉列表。
示例-sourceRepo: Selector<SourceRepository>


{
    sourceRepo: Selector<SourceRepository>;
    sourceRepoOrAdd: Selector<SourceRepository | string>;
    blueprintInstantiation: Selector<BlueprintInstantiation>;
  ...
}

多选

需要-选择为类型Selector。
用法-生成多选输入。
示例-multiselect: MultiSelect['A' | 'B' | 'C' | 'D' | 'E']>


{
  multiselect: MultiSelect['A' | 'B' | 'C' | 'D' | 'E']>;
  ...
}

在合成过程中与用户沟通

作为蓝图作者，您可以与用户进行反馈，而不仅仅是验证消息。例如，空间成员可能会查看生成不清楚的蓝图的选项组合。自定义蓝图支持通过调用合成向用户传达错误消息的功能。基础蓝图实现了一个需要明确错误消息的throwSynthesisError(...)函数。您可以使用以下方法调用消息：


//blueprint.ts
this.throwSynthesisError({
   name: BlueprintSynthesisErrorTypes.BlueprintSynthesisError,
   message: 'hello from the blueprint! This is a custom error communicated to the user.'
})

Javascript 在您的浏览器中被禁用或不可用。

要使用 Amazon Web Services 文档，必须启用 Javascript。请参阅浏览器的帮助页面以了解相关说明。

文档惯例

开发自定义蓝图以满足项目要求

向蓝图添加环境组件

使用前端向导修改蓝图功能

主题

支持的标签

@inlinePolicy。 /路径/to/policy/file.json

@trustPolicy。 /路径/to/policy/file.json

@validationRegex 正则表达式

@validationMessage 字符串

@collapsed 布尔值（可选）

@displayName 字符串

@displayName 字符串

@defaultEntropy 数字

@placeholder 字符串（可选）

@textArea 数字（可选）

@hidden 布尔值（可选）

@button 布尔值（可选）

@showName 布尔值（可选）

@ showEnvironmentType 布尔值（可选）

@forceDefault 布尔值（可选）

@requires 蓝图名称

支持的 TypeScript 类型

数字

String

字符串列表

电台

注意

下拉菜单

可扩展部分

元组

元组列表

Selector

多选

在合成过程中与用户沟通