사용자 지정 적응형 양식 테마 만들기 creating-custom-adaptive-form-themes

/apps 노드 아래에 cq:ClientLibraryFolder 유형의 노드를 만듭니다.

예를 들어 다음 노드를 만듭니다.

/apps/myAfThemes/forestTheme

다중 값 문자열 속성 categories을(를) 노드에 추가하고 값을 적절하게 설정합니다.

예를 들어 속성을 af.theme.forest(으)로 설정합니다.

less 및 css 폴더 두 개와 css.txt 파일을 1단계에서 만든 노드에 추가합니다.

• less 폴더: .css 스타일을 관리하는 데 사용되는 less 변수와 less mixins을(를) 정의하는 less 변수 파일을 포함합니다.

  이 폴더는 less개의 변수 파일, less개의 mixin 파일, mixin을 사용하여 스타일을 정의하는 less개의 파일 및 변수로 구성됩니다. 그런 다음 이 less 파일을 모두 style.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 파일: 변수를 인수로 사용하는 함수를 정의할 수 있습니다. 이러한 함수의 출력은 결과 스타일입니다. CSS 스타일이 반복되지 않도록 다양한 스타일 내에서 이러한 mixin을 사용하십시오.

적응형 양식은에 정의된 즉시 사용 가능한 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를 재정의합니다.

jcr:content가 이전 단계에서 만든 사용자 지정 페이지(예: myAfCustomizations/myAfPages/forestPage))를 가리키는 사용자 지정 템플릿(예: /apps/myAfCustomizations/myAfTemplates/forestTemplate)을 만듭니다.

이전 단계에서 만든 템플릿을 사용하여 적응형 양식을 만듭니다. 적응형 양식의 모양과 느낌은 이 문서의 적응형 양식 테마 섹션을 만들기 위해 에서 만든 테마로 정의됩니다.