AEM 터치 지원 UI의 개념 concepts-of-the-aem-touch-enabled-ui

AEM 5.6 Adobe에서 반응형 디자인 작성 환경에 사용할 수 있습니다. 터치 및 데스크톱 장치에서 모두 작동하도록 설계되었으므로 이 기능은 원래 클래식 UI와 상당히 다릅니다.

터치 지원 UI는 이제 클래식 UI보다 우선하는 AEM용 표준 UI입니다.

터치 활성화 UI는 다음과 같습니다.

터치 활성화 UI는 여러 제품에서 사용자 경험의 일관성을 제공하도록 Adobe이 디자인했습니다. 이 API는 다음을 기반으로 합니다.

터치 지원 UI의 기본 원칙은 다음과 같습니다.

터치 지원 UI 구조에 대한 자세한 내용은 문서를 참조하십시오 AEM 터치 지원 UI의 구조.

AEM 기술 스택 aem-technology-stack

AEM은 Granite 플랫폼을 기반으로 하고, Granite 플랫폼에는 Java Content Repository가 포함되어 있습니다.

Granite granite

Granite는 Adobe의 개방형 웹 스택으로, 다음을 포함한 다양한 구성 요소를 제공합니다.

Granite UI granite-ui

Granite 엔지니어링 플랫폼도 기초 UI 프레임워크를 제공합니다. 이것의 주요 목적은 다음과 같습니다.

이러한 요구 사항은 다음과 같습니다.

Granite UI:

클라이언트 측과 서버 측 client-side-vs-server-side

Granite UI의 클라이언트-서버 통신은 개체가 아닌 하이퍼텍스트로 구성되므로 클라이언트가 비즈니스 논리를 이해할 필요가 없습니다

고객측 client-side

이를 위해 작성자가 대화형 웹 앱을 빌드할 의도를 표현할 수 있도록 제공된 HTML 어휘의 확장을 사용합니다. 이는 와 비슷한 접근 방식입니다 WAI-ARIA 및 마이크로포맷.

주로 클라이언트측에서 실행되는 JS 및 CSS 코드로 해석되는 상호 작용 패턴 컬렉션(예: 비동기 양식 제출)으로 구성됩니다. 클라이언트측의 역할은 상호 작용을 위한 마크업(서버에서 제공하는 하이퍼미디어 제공)을 향상시키는 것입니다.

클라이언트측은 모든 서버 기술과 독립적입니다. 서버가 적절한 마크업을 제공하는 한 클라이언트측은 해당 역할을 수행할 수 있습니다.

현재 JS 및 CSS 코드는 Granite로 전달됩니다 clientlibs 카테고리 아래에 있는

granite.ui.foundation and granite.ui.foundation.admin

이러한 구성 요소는 컨텐츠 패키지의 일부로 전달됩니다.

granite.ui.content

서버측 server-side

이는 작성자가 다음을 수행할 수 있도록 하는 sling 구성 요소의 컬렉션으로 구성됩니다 작성 빠르게 웹 앱을 실행할 수 있습니다. 개발자는 구성 요소를 개발하고, 작성자는 구성 요소를 웹 앱으로 결합합니다. 서버측 역할은 하이퍼미디어 지원(마크업)을 클라이언트에 제공하는 것입니다.

현재 구성 요소는 Granite 리포지토리의 다음 위치에 있습니다.

/libs/granite/ui/components/foundation

컨텐츠 패키지의 일부로 전달됩니다.

granite.ui.content

클래식 UI의 차이점 differences-with-the-classic-ui

Granite UI와 ExtJS(클래식 UI에 사용됨)의 차이점도 다음과 같습니다.

Granite UI 기초 구성 요소 granite-ui-foundation-components

다음 Granite UI 기초 구성 요소 ui를 작성하는 데 필요한 기본 빌딩 블록을 제공합니다. 여기에는 다음과 같은 것들이 포함됩니다.

기초 구성 요소는 다음 위치에서 찾을 수 있습니다.

/libs/granite/ui/components/foundation

이 라이브러리에는 각 Coral 요소에 대한 Granite UI 구성 요소가 포함되어 있습니다. 구성 요소는 저장소에 구성이 있는 컨텐츠 제어 구성 요소입니다. 이렇게 하면 HTML 마크업을 직접 작성하지 않고도 Granite UI 애플리케이션을 작성할 수 있습니다.

용도:

구현:

이 기초 구성 요소 라이브러리는 다른 라이브러리에서 사용하거나 확장할 수 있습니다.

ExtJS 및 해당 Granite UI 구성 요소 extjs-and-corresponding-granite-ui-components

Granite UI를 사용하도록 ExtJS 코드를 업그레이드할 때, 다음 목록은 동일한 Granite UI 리소스 유형을 사용하는 ExtJS xtype 및 노드 유형에 대한 편리한 개요를 제공합니다.

Granite UI 관리 구성 요소 granite-ui-administration-components

다음 Granite UI 관리 구성 요소 모든 관리 애플리케이션에서 구현할 수 있는 일반적인 빌딩 블록을 제공하기 위해 기초 구성 요소를 기반으로 구축합니다. 여기에는 다음과 같은 것들이 포함됩니다.

용도:

구현:

Coral UI coral-ui

CUI(Coral UI)는 여러 제품에서 사용자 경험의 일관성을 제공하도록 설계된 터치 지원 UI에 대한 Adobe의 시각적 스타일 구현입니다. Coral UI는 작성 환경에서 사용되는 시각적 스타일을 적용하는 데 필요한 모든 것을 제공합니다.

Coral UI는 웹 응용 프로그램을 개발하기 위한 기본 구성 요소의 컬렉션입니다.

처음부터 모듈식으로 설계되었으므로 각 모듈은 기본 역할에 따라 고유한 계층을 형성합니다. 레이어는 서로 지원하도록 설계되었지만 필요한 경우 독립적으로 사용할 수도 있습니다. 따라서 HTML 가능 환경에서 Coral의 사용자 경험을 구현할 수 있습니다.

Coral UI에서는 특정 개발 모델 및/또는 플랫폼을 사용해야 하는 것이 아닙니다. Coral의 기본 목표는 이 마크업을 내보내는 데 사용되는 실제 방법과는 무관하게 통합 및 깨끗한 HTML5 마크업을 제공하는 것입니다. 몇 가지 예를 들면 클라이언트 또는 서버측 렌더링, 템플릿, JSP, PHP 또는 Adobe Flash RIA 응용 프로그램에 사용할 수 있습니다.

HTML 요소 - 마크업 레이어 html-elements-the-markup-layer

HTML 요소는 모든 기본 UI 요소(탐색 막대, 단추, 메뉴, 레일 등)에 대한 일반적인 모양과 느낌을 제공합니다.

가장 기본적인 수준에서 HTML 요소는 전용 클래스 이름을 사용하는 HTML 태그입니다. 보다 복잡한 요소는 서로 중첩된(특정 방식으로) 여러 태그로 구성될 수 있습니다.

CSS는 실제 모양과 느낌을 제공하는 데 사용됩니다. 모양 및 느낌(예: 브랜딩의 경우) 실제 스타일 값을 쉽게 사용자 지정할 수 있도록 는 LESS 런타임 중 사전 프로세서.

용도:

구현:

예를 들어 다음과 같은 마크업이 있습니다.

<button class="btn btn-large btn-primary" type="button">Large button</button>
<button class="btn btn-large" type="button">Large button</button>

이 다음과 같이 표시됩니다.

모양과 느낌은 전용 클래스 이름으로 요소에 연결된 LESS에서 정의됩니다(간결성을 위해 다음 추출이 단축됨).

.btn {
    font-size: @baseFontSize;
    line-height: @baseLineHeight;
    .buttonBackground(@btnBackground,
                                @btnBackgroundHighlight,
                                @grayDark, 0 1px 1px rgba(255,255,255,.75));

실제 값은 LESS 변수 파일에 정의됩니다. (간결성을 위해 다음 추출이 단축되었습니다.)

@btnBackgroundHighlight: darken(@white, 10%);
@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%);
@baseFontSize: 17px;
@baseFontFamily: @sansFontFamily;

요소 플러그인 element-plugins

많은 HTML 요소에서는 팝업 메뉴 열기 및 닫기와 같은 일부 종류의 동적 동작이 표시되어야 합니다. JavaScript를 사용하여 DOM을 조작하여 이러한 작업을 수행하는 요소 플러그인의 역할입니다.

플러그인은 다음 중 하나입니다.

다음 중 한 방법으로 매개 변수로 플러그인 동작을 사용자 지정할 수 있습니다.

개발자는 모든 플러그인에 대해 가장 적합한 접근 방식을 선택할 수 있지만 경험상 다음과 같은 규칙을 사용합니다.

양식 유효성 검사를 구현하는 데에도 동일한 개념이 사용됩니다. 유효성을 검사하려는 요소의 경우 필수 입력 양식을 사용자 지정으로 지정해야 합니다 data-* 속성을 사용합니다. 그런 다음 이 속성을 유효성 검사 플러그인의 옵션으로 사용합니다.

용도:

구현:

예제 마크업 추출(data-ast로 지정된 옵션 참고) 속성):

<ul data-column-width="220" data-layout="card" class="cards">
  <li class="item">
    <div class="thumbnail">
      <img href="/a.html" src="/a.thumb.319.319..png">
      <div class="caption">
        <h4>Toolbar</h4>
          <p><small>toolbar</small><br></p>
      </div>
    </div>
  </li>
  <li class="item">
    <div class="thumbnail">
      <img href="/a.html" src="/a.thumb.319.319..png">
      <div class="caption">
        <h4>Toolbar</h4>
        <p><small>toolbar</small><br></p>
      </div>
    </div>
  </li>

jQuery 플러그인에 대한 호출:

$(‘.cards’).cardlayout ();

다음과 같이 표시됩니다.

다음 cardLayout 플러그인이 폐쇄된 부분을 펼칩니다. UL 각 높이를 기반으로 하며 상위의 너비를 고려한 요소

HTML 요소 위젯 html-elements-widgets

위젯은 하나 이상의 기본 요소를 Javascript 플러그인과 결합하여 "높은 수준" UI 요소를 형성합니다. 이렇게 하면 단일 요소가 전달할 수 있는 것보다 더 복잡한 동작과 더 복잡한 모양과 느낌을 구현할 수 있습니다. 태그 선택기 또는 레일 위젯이 좋은 예입니다.

위젯은 트리거와 사용자 지정 이벤트를 모두 수신하여 페이지의 다른 위젯과 협력할 수 있습니다. 일부 위젯은 실제로 Coral HTML 요소를 사용하는 기본 jQuery 위젯입니다.

용도:

구현:

마크업 예는 다음과 같습니다.

<input type="text" name="tags" placeholder="Tags" class="tagManager"/>

jQuery 플러그인에 대한 호출(옵션 포함):

$(".tagManager").tagsManager({
        prefilled: ["Pisa", "Rome"] })

플러그인은 HTML 마크업을 내보냅니다(이 마크업에서는 내부적으로 다른 플러그인을 사용할 수 있는 기본 요소를 사용합니다.).

<span>Pisa</span>
<a title="Removing tag" tagidtoremove="0"
   id="myRemover_0" class="myTagRemover" href="#">x</a></span>

<span id="myTag_1" class="myTag"><span>Rome</span>
<a title="Removing tag" tagidtoremove="1"
   id="myRemover_1" class="myTagRemover" href="#">x</a></span>

<input type="text" data-original-title="" class="input-medium tagManager"
       placeholder="Tags" name="tags" data-provide="typeahead" data-items="6"
       autocomplete="off">

다음과 같이 표시됩니다.

유틸리티 라이브러리 utility-library

이 라이브러리는 다음과 같은 javascript 도우미 플러그인 및/또는 함수의 컬렉션입니다.

여기에는 XSS 처리 및 이벤트 버스가 포함됩니다.

HTML 요소 플러그인 및 위젯은 유틸리티 라이브러리에서 제공하는 기능에 의존할 수 있지만 유틸리티 라이브러리는 요소 또는 위젯 자체에 대한 하드 종속성을 가질 수 없습니다.

용도:

구현: