Noodl 2.0β기능 프레젠테이션을 만들어 보았습니다(실장편 3: 내비게이션과 구성 요소화)

개요
Noodl 버전0β이것은 사용판으로 제작된 기능 시연이다.
Noodl이 뭘 할 수 있는지 파악해.
목적은 각 기능을 어떻게 실현하는지 참고하는 것이다.
이번 설명은 페이지를 구성하는 요소와 구성 요소화입니다.
카탈로그
기능 소개
1. Noodl 2.0β기능 프레젠테이션을 해봤어요.
실장편
1. 시각적 상호작용
2. 비주얼 인터랙티브2
3. 탐색 및 구성 요소화 ← 기사
4. 단일 페이지 어플리케이션
샘플 프레젠테이션 데이터 활용
・GiitHub의 [장비] https://macole.github.io/Noodl2_LibDemo/index.html
・GiitHub의 샘플 데이터 및 구축 절차

Github ~/Noodl2libDemo 이하의 PC를 Clone하십시오.

프로젝트 >Import exsisting 프로젝트에서 Noodl2로 Noodl2 시작libDemo를 선택하십시오.

Library Add Material UI Kit에서 시작하십시오.

주의 사항
• 이번 시위는 Ver2입니다.0β판으로 제작 중입니다.Ver1.3 움직이지 않는다.
1. 카드 및 구성 요소
Material UI Kit를 사용하는 MuiCard, 카드 콘텐츠를 설치하는 방법은 다음과 같습니다.

이 카드는 텍스트와 이미지 표시 외에 오른쪽 아래에 있는 아이콘을 클릭하여 내용을 표시하는 기능도 갖추고 있다.
1-1. 사용할 노드
노트
설명
MuiCard
카드 구성 요소
MuiCardHeader
카드의 제목과 부제목
MuiCardMedia
카드의 Div 요소, 이미지, 비디오
MuiCardContent
카드 안에 있는 글
MuiTypography
문자 디자인
Text
텍스트를 나타내는 노드
MuiCardActions
카드 내 UI 제어
Group
그룹 노드에 사용되는 노드
MuiIconButton
아이콘 유형 버튼
MuiCollapse
컨텐츠 표시/숨기기 노드
ComponentInput
어셈블리에 입력할 노드입니다.ComponentOutput 출력의 노드로 준비됨
1-2. 노드 구성 및 연결
그림 카드의 노드 설정

카드에는 머리글, 컨텐트 및 UI 제어 섹션이 포함될 수 있습니다.
각각의 내용 부분, 단추 부분,Collaspe 부분에서 사용하는 노드의 기능과 설정을 통해 그림을 알 수 있기를 바랍니다.
또한 다음 컨텐트의 표시/숨기기를 전환하기 위해 MuiCollaspe의 하위 요소에 MuiCardContents가 구성되어 있습니다.
노드가 연결된 점은 MuiIconButon 표시를 통해 Collaspe 섹션 전환을 나타냅니다.
MuiIconButton의 Click에서 States의 Open/Close를 전환하고 Open이면 MuiColleaspe의 in을 진짜로 하여 Colleaspe 부분을 표시합니다.
상세한 기능으로 States는 rotation(회전)의Port를 가지고 내용의 표시/숨김에 맞추어 아이콘을 90도 회전한다.
1-3. 카드 구성화(재활용)
또한 "+Component">12MuiCard(임의의 이름)로 구성 요소를 만들고, 노드를 구성하여 Component로 등록하여 재활용할 수 있는 부품을 제작합니다.
그림 구성 요소화 방법

외부에서 그림 구성 요소의 내용 변경:ComponentInput

ComponentInput을 통해 외부에서 구성 요소의 내용을 변경할 수 있으며, '+ Port' 에서 입력할 포트를 여러 개 설정할 수 있습니다.따라서 구성 요소가 더욱 통용될 수 있다.
이번에는 카드 안의 텍스트 (text) 와 그림 (Src) 을 외부에서 입력할 수 있도록 사용합니다.
2. 탭: 태그
Material UI Tab을 사용하여 태그를 구성합니다.탭에 표시되는 항목입니다.

2-1. 사용할 노드
노트
설명
Group
그룹 노드에 사용되는 노드
Text
텍스트를 나타내는 노드
MuiTabs
레이블 요약을 나타내는 노드
MuiTab
라벨을 나타내는 노드
2-2. 노드 구성 및 연결

MuiTabs를 부모로, MuiTabs를 자식으로 하여 탭 기능을 수행할 수 있습니다.
그런 다음 MuiTabs:TabIndex를 통해 선택한 Tab을 검색하고 컨텐트 표시를 전환할 수 있습니다.TabIndex 값이 Text에 표시됩니다.
3. 내비게이션
Material Button Navigation에 화면 아래에 표시되는 탐색 버튼을 설치합니다.
여기에는 Noodl을 시작할 때 선택할 수 있는 ReactStarter의 템플릿이 사용됩니다.

3-1. 사용할 노드
노트
설명
Group
그룹 노드에 사용되는 노드
Text
텍스트를 나타내는 노드
MuiButtonNavigation
버튼 컬렉션을 나타내는 노드
MuiButtonNavigationAction
단추의 노드를 표시합니다
MuiIcon
아이콘 노드
3-2. 노드 구성 및 연결

무이버튼 나비게이션을 부모로, 무이버튼 나비게이션 액티콘을 아이의 내비게이션 제작 파트로 활용한다.생각은 탭과 같다.MuiButon Navigation:TabIndex에서 사용할 수 있는 버튼을 선택했습니다.
4. Header
이것은 화면 상단에 표시할 페이지의 제목 부분입니다.
이 또한 ReactStarterno 템플릿을 기반으로 합니다.

4-1. 사용할 노드
노트
설명
MuiAppBar
응용 프로그램 막대
MuiToolbar
도구막대로 결합
MuiIconButton
아이콘 유형 버튼
MuiTypography
문자 디자인
Text
텍스트를 나타내는 노드
03_Drawer
사용자 정의 메뉴 구성 요소
ComponentInput
어셈블리 가져오기 노드
4-2. 노드 구성 및 연결

MuiIconButon의 Click에서 직접 만든 03Drawer 구성 요소를 열기 위해 Open을 연결했습니다.
5. Drawer
Drawer는 화면 측면에서 빠르게 나타나는 메뉴 표현에 사용됩니다.

5-1. 사용할 노드
노트
설명
MuiDrawer
가로로 이동할 메뉴
Text
텍스트를 나타내는 노드
MuiDivider
메뉴 섹션에 구분선을 삽입하는 노드
MuiList
List용 노드
15_ItemList
자체 제작 Item 디스플레이용 구성 요소
Switch
상태 저장 노드
ComponentInput
어셈블리 가져오기 노드
5-2. 노드 구성 및 연결

MuiDrawer를 부모 요소로, 컨텐츠를 하위 요소로 설정합니다.
외부에서 ComponentInput을 통해 신호를 받고 Switch에서 On/Off를 통해 전환하며 MuiDrear:Open을 통해 표시/숨깁니다.
또한 하위 요소의 아이콘 부분은 15입니다.ItemList로 구성 중입니다.이렇게 최대한 조립화하면 응용 프로그램의 구조를 이해하기 쉽다.
6. Badge
MuiBadge를 사용하여 "Click Me"라고 적힌 버튼의 오른쪽 상단에 볼륨을 표시합니다.

6-1. 사용할 노드
노트
설명
MuiBadge
배치 기능의 노드
MuiButton
누름단추
Counter
카운터
Switch
상태 저장 노드
6-2. 노드 구성 및 연결

구조는 간단하지만, 무이배지를 부모의 일괄 처리 대상으로 삼으려는 무이버톤을 하위 요소로 삼을 뿐이다.
숫자 표시 제어는 Counter, 표시/숨기기는 Switch를 사용합니다.
총결산
이번에는 실장편으로 페이지를 구성하는 요소와 구성화를 해설했다.
Noodl은 UI/UX를 직관적으로 제작할 수 있을 뿐만 아니라 어셈블리화를 통해 사용할 수 있다.
커뮤니티도 활성화1돼 IoT 관련 홍보 도구로서 가능성이 있다고 생각한다.

시각적 상호작용

비주얼 인터랙티브2

탐색 및 구성

단일 페이지 어플리케이션

참고 문헌

Noodl 공식

Noodl 문서

Noodl의 Component에 대한 노트

Noodl의 Component Inputs/Outputs에 대한 노트

슬랙과 커뮤니티기술 서적에 전시하다 등에 따르면 즐거워 보이는 일.  ↩