UI 구축

유용성과 구조화된 인터페이스를 디자인하기 위해 AppMaster Web Designer는 광범위한 원자 UI 구성 요소를 제공합니다. 이러한 구성 요소는 귀하의 목적과 목적에 맞게 다양한 방법으로 결합 및 그룹화될 수 있습니다.

AppMaster는 다음과 같은 UI 구성 요소를 제공합니다.

• 컨테이너: 다른 구성요소를 논리적으로 구조화하고 그룹화하기 위한 기본 요소입니다.
• 모달 및 서랍: 현재 화면을 떠나지 않고도 추가 정보나 작업을 표시하기 위한 대화형 구성 요소입니다.
• 동적 값 출력 구성 요소: 데이터를 동적으로 표시하기 위한 목록 , 그리드 및 테이블이 포함됩니다.
• 기본 UI 요소: 버튼 , 텍스트 , 아이콘 등 기본 인터페이스 상호 작용에 필수적입니다.
• 탐색 구성요소: 수직 및 수평 메뉴 , 탭 및 유사한 탐색 도구를 포함합니다.
• 양식 요소: 사용자 상호 작용 및 데이터 수집을 위한 다양한 입력 및 컨트롤입니다.

구성 요소 라이브러리를 정기적으로 업데이트하면 웹 애플리케이션을 보다 효율적으로 개발할 수 있는 능력이 향상됩니다.

AppMaster 드래그 앤 드롭 웹 사이트 빌더의 가능성을 보여주기 위해 간단한 계산기 애플리케이션용 UI를 구성해 보겠습니다. 이 앱은 입력 값을 기반으로 다양한 수학 연산의 결과를 표시합니다.

플렉스 컨테이너

Flex Container를 사용하면 컨테이너 내의 모든 하위 요소에 대한 정렬 및 스택 관리를 쉽게 관리할 수 있습니다.

Flex 컨테이너는 웹 페이지의 구조를 구축하는 기본 구성 요소입니다. AppMaster 웹 앱 디자이너의 Flex 컨테이너를 사용하면 사용자가 하위 요소(위젯 또는 컨테이너)를 유연하게 정렬할 수 있습니다. 수평 및 수직 정렬을 모두 지원하므로 개발자는 다양한 화면 크기에 적응하는 복잡한 레이아웃을 만들 수 있습니다.

컨테이너 추가

두 개의 기본 컨테이너를 사용합니다. 하나는 데이터 입력용이고 다른 하나는 하나의 공통 컨테이너에 래핑된 계산 결과를 표시하는 데 사용됩니다.

먼저 Flex 컨테이너를 캔버스에 추가하여 다른 모든 요소를 ​​수용합니다.

모양 패널 에서 다음과 같은 다양한 설정을 탐색할 수 있습니다.

• 요소 ID: 비즈니스 프로세스에서 컨테이너를 참조하기 위한 고유 식별자입니다.
• 공통 그룹: 가시성 및 커서 스타일과 같은 구성 요소의 기본 상태를 정의하는 설정입니다.
• Flex 하위 그룹: 요소가 flex-parent 구성 요소 내에서 작동하는 방식을 결정합니다.
• 레이아웃: 컨테이너 내에서 하위 항목을 정렬하기 위한 설정입니다.
• 크기: 요소의 크기를 지정합니다.
• 간격 : 요소 내부 및 주변의 공간을 조정합니다.
• 배경: 배경 색상 및 레이어에 대한 옵션입니다.
• 모서리 반경, 테두리, 그림자: 요소 가장자리, 테두리 및 그림자 효과에 대한 사용자 정의입니다.
• 도구 설명: 마우스 오버 또는 포커스 작업에 대한 도구 설명을 추가합니다.

기본 컨테이너를 맞춤설정하세요. 예를 들어 방향을 수평으로 설정하고 간격 , 패딩 , 모서리 반경 및 테두리를 조정해 보겠습니다.

다음으로, 값을 입력할 양식의 기본 컨테이너 내부에 또 다른 Flex 컨테이너 를 추가합니다. 상위 컨테이너의 사용 가능한 공간을 채우려면 전체 너비로 설정하세요.

결과를 표시하기 위한 별도의 블록을 생성하려면 이 컨테이너를 복제하세요( CTRL/⌘+D 사용). 너비 속성을 30%로 설정합니다.

UI 요소 추가

애플리케이션 구축을 계속하려면 이제 필요한 UI 요소를 추가해야 합니다.

양식 추가

우리의 비즈니스 프로세스에서는 사용자가 두 개의 숫자(모두 Float 유형)를 입력해야 합니다. 이를 가능하게 하려면 두 개의 부동 입력과 버튼을 추가하여 계산 프로세스를 시작하십시오.

왼쪽 Flex 컨테이너 방향을 수직 으로 전환하고 중첩된 요소 사이에 약간의 공간이 있도록 간격을 추가합니다. 이 Flex 컨테이너 내부에 첫 번째 값에 대한 입력 부동 소수점을 추가합니다. 이 값은 'X'로 표시됩니다.

• 입력 부동 요소를 왼쪽 컨테이너로 끌어서 놓습니다.
• 모양 패널 에서 레이블 및 자리 표시자를 추가하여 필드를 개인화하십시오.
• 애플리케이션 디자인에 맞게 필드의 모양을 미세 조정합니다.

캔버스에서 추가된 필드를 선택하고 CTRL/⌘+D 를 사용하여 복제합니다. 두 번째 값 'Y'를 나타내도록 중복된 필드의 레이블 및 자리 표시자를 수정합니다.

이제 추가된 필드 아래에 Button 요소를 끌어서 놓습니다. 모양 패널 에서 버튼을 조정하여 전체 너비를 확장합니다. 이는 Flex Child 그룹의 Align 속성을 Stretch 로 설정하여 달성할 수 있습니다.

버튼에 대한 레이블을 입력하고 선택적으로 아이콘을 추가하여 시각적 매력을 강화합니다.

이러한 요소를 추가한 후에는 명확하고 쉽게 식별할 수 있도록 이름을 바꾸는 것이 좋습니다. 이를 통해 비즈니스 프로세스에서 보다 쉽게 ​​참조할 수 있어 이해도가 향상되고 개발 프로세스 속도가 빨라집니다.

결과 블록 추가

상위 컨테이너의 오른쪽에는 비즈니스 프로세스를 실행한 후 결과를 표시할 공간을 구성하겠습니다. 먼저 이 컨테이너의 방향 속성을 수직 으로 설정하고 작은 간격을 추가하여 요소의 간격을 깔끔하게 유지합니다. 너비 를 30%로 변경합니다.

이 오른쪽 컨테이너 내에 새로운 수평 Flex 컨테이너를 삽입하고 그 안에 작업을 나타내는 아이콘 요소, 같음 기호가 있는 텍스트 블록 , 작업 결과가 표시될 텍스트 블록을 추가합니다. 이 컨테이너를 4번 복제하여 정의된 수학 연산에 대해 각각 업데이트합니다.

모양 패널을 사용하여 원하는 대로 각 요소를 사용자 정의하세요.

힌트 블록 추가

인터페이스의 유용성을 향상시키기 위해 결과를 얻을 때까지 표시되는 자리 표시자를 만듭니다. 이를 위해 올바른 컨테이너의 너비(30%)를 미러링하는 추가 Flex 컨테이너를 추가하고 설명 힌트가 포함된 텍스트 블록을 내부에 배치합니다.

결과가 포함된 컨테이너의 주요 기능은 초기 가시성 상태입니다. 기본적으로 Visible 스위치를 꺼짐으로 설정하여 처음에는 보이지 않게 만듭니다.

요소 숨기기

우리는 비즈니스 프로세스가 실행되고 결과가 나온 후에만 이 컨테이너를 표시하고 데이터를 업데이트할 것입니다. 비즈니스 프로세스를 생성하고 표시할 결과를 작성하는 동안 쉽게 식별할 수 있도록 텍스트 블록 이름을 할당하는 것이 중요합니다.

🎉 잘했어요! 우리는 애플리케이션을 위한 완벽한 UI를 만들었으며 요소에 상호작용성을 추가할 준비가 되었습니다.