建立自訂最適化表單主題 creating-custom-adaptive-form-themes

建立型別節點 cq:ClientLibraryFolder 在 /apps節點。

例如，建立下列節點：

/apps/myAfThemes/forestTheme

新增多值字串屬性 categories 並適當地設定其值。

例如，將屬性設為： af.theme.forest.

新增兩個資料夾， less 和 css，和檔案 css.txt 至步驟1中建立的節點：

• less 資料夾：包含 less 變數檔案，您可在其中定義 less 變數和 less mixins 用來管理.css樣式的物件。

  此資料夾包含 less 變數檔案， less mixin檔案， less 使用mixin和變數定義樣式的檔案。 以及所有這些 less 然後檔案會以styles.less匯入。

• css資料夾：包含.css檔案，您可以在其中定義主題中使用的靜態樣式。

較少的變數檔案：這些是您定義或覆寫用於定義CSS樣式的變數的檔案。

調適型表單提供下列定義的現成可用變數 .less 檔案：

• /apps/clientlibs/fd/af/guidetheme/common/less/globalvariables.less
• /apps/clientlibs/fd/af/guidetheme/common/less/layoutvariables.less

調適型表單也提供中定義的協力廠商變數：

/apps/clientlibs/fd/af/third-party/less/variables.less

您可以使用 less 最適化表單隨附的變數，您可以覆寫這些變數，或建立新的變數 less 變數。

覆寫變數的範例：

@button-background-color: rgb(19, 102, 44);
@button-border-color: rgb(19, 102, 44);
@button-border-size: 0px;
@button-padding: 10px 15px;
@button-font-color: #ffffff;

覆寫 less變數：

1. 匯入預設最適化表單變數：

   /apps/clientlibs/fd/af/guidetheme/common/less/globalvariables.less/apps/clientlibs/fd/af/guidetheme/common/less/layoutvariables.less

2. 然後匯入包含被覆寫變數的較少檔案。

新變數定義範例：

@button-focus-bg-color: rgb(40, 208, 90);
@button-hover-bg-color: rgb(30, 156, 67);

較少的mixin檔案： 您可以定義接受變數作為引數的函式。 這些函式的輸出是產生的樣式。 請在不同的樣式中使用這些Mixin，以避免重複CSS樣式。

調適型表單提供中定義的現成Mixin：

• /apps/clientlibs/fd/af/guidetheme/common/less/adaptiveforms-mixins.less

調適型表單也提供中定義的協力廠商Mixin：

• /apps/clientlibs/fd/af/third-party/less/mixins.less

範例mixin定義：

.rounded-corners (@radius) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}

.border(@color, @type, @size) {
   border: @color @size @type;
}

Styles.less檔案： 使用此檔案來包含所有 less 您必須在使用者端資料庫中使用的檔案（變數、mixin、樣式）。

在下列範例中 styles.less 檔案中，匯入陳述式可以任意順序放置。

匯入下列專案的陳述式 .less 檔案是強制性的：

• globalvariables.less
• layoutvariables.less
• components.less
• layouts.less

@import "../../../clientlibs/fd/af/guidetheme/common/less/globalvariables.less";
@import "../../../clientlibs/fd/af/guidetheme/common/less/layoutvariables.less";
@import "forestTheme-variables";
@import "../../../clientlibs/fd/af/guidetheme/common/less/components.less";
@import "../../../clientlibs/fd/af/guidetheme/common/less/layouts.less";

/* custom styles */

.guidetoolbar {
  input[type="button"], button, .button {
    .rounded-corners (@button-radius);
    &:hover {
      background-color: @button-hover-bg-color;
    }
    &:focus {
      background-color: @button-focus-bg-color;
    }
  }
}

form {
    background-image: url(../images/forest.png);
 background-repeat: no-repeat;
 background-size: 100%;
}

此 css.txt 包含要為資料庫下載的.css檔案路徑。

例如：

#base=/apps/clientlibs/fd/af/third-party/css
bootstrap.css

#base=less
styles.less

#base=/apps/clientlibs/fd/xfaforms/xfalib/css
datepicker.css
listboxwidget.css
scribble.css
dialog.css

包含中建立的主題 建立最適化表單主題 區段，建立以下型別的自訂頁面 cq:Component.

例如 /apps/myAfCustomizations/myAfPages/forestPage

1. 新增 sling:resourceSuperType 屬性並將其值設為 fd/af/components/page/base.

   

2. 若要在頁面中使用主題，您必須將覆寫檔案library.jsp新增至節點。

   接著，您可以匯入在「建立最適化表單主題」一節中建立的主題。

   下列範常式式碼片段會匯入 af.theme.forest 主題。

   code language-jsp
   <%@include file="/libs/fd/af/components/guidesglobal.jsp"%> <cq:includeClientLib categories="af.theme.forest"/>

3. 可選：在自訂頁面中，視需要覆寫header.jsp、footer.jsp和body.jsp。

建立自訂範本(例如： /apps/myAfCustomizations/myAfTemplates/forestTemplate)的jcr：content指向在上一步建立的自訂頁面(例如： myAfCustomizations/myAfPages/forestPage).

使用上一步建立的範本建立最適化表單。 最適化表單的外觀是由本文中「建立最適化表單主題」一節中所建立的主題所定義。