2D 인터페이스 업데이트

3D-Guided Service Instructions 200의 2D 캔버스는 새 팝업 및 카트의 요구 사항에 맞게 업데이트해야 합니다. 카트의 모든 항목을 나열하기 위한 레이블 및 반복기와 함께 주문하고 카트를 정리하는 기능의 버튼이 추가됩니다.

2. playButton을 클릭합니다. 세부 정보 창에서 제거를 선택하여 해당 버튼을 캔버스에서 제거합니다. 이제 playButton 함수가 팝업에 의해 트리거됩니다.

3. 왼쪽 패널을 클릭한 다음 세부 정보 창에서 제거를 클릭합니다.

4. 하단 패널의 gridLayout-1 중 row-1에서 열 추가를 클릭하여 하단 행에 열을 추가합니다. 원래 위치에서 resetButton 위젯을 드래그하여 새 열에 드롭합니다. 새 열의 속성에서 맞춤 드롭다운을 끝으로 설정하여 레이아웃이 아래 이미지와 같게 보이도록 합니다.

6. 이제 이전 경험에서 레이아웃의 일부가 제거되었으므로 새로운 2D 위젯이 경험에 추가됩니다.

a. 눈금 레이아웃 위젯을 가운데 패널로 드래그합니다. 그런 다음 눈금 레이아웃 위젯을 사용하여 가운데 패널을 동일한 너비의 열로 분할합니다.

b. 눈금 레이아웃 위젯에서 새로 생성된 열인 column-4를 클릭합니다. 눈금 작업에서 열 추가를 두 번 클릭합니다. 그러면 눈금 레이아웃이 세 개의 동일한 열로 분할됩니다.

c. 다른 눈금 레이아웃 위젯을 오른쪽 열 column-6으로 드래그합니다. 눈금 레이아웃 속성에서 행 추가를 세 번 클릭하여 gridLayout-3에 네 개의 행이 포함되도록 합니다.

d. 레이블 위젯을 새 눈금 레이아웃 위젯의 상단 행으로 드래그합니다. 이 레이블의 Studio ID를 labelCart로 변경합니다. column-7 또는 레이블이 방금 배치된 열의 이름을 클릭하고 맞춤 속성을 가운데로 변경하여 행 가운데에 레이블을 배치합니다. 카트가 채워지면 이 레이블에 카트에 있는 항목의 총금액이 표시됩니다.

e. 데이터 창을 엽니다. cartLabel이라는 새로운 응용 프로그램 매개 변수를 추가합니다. cartLabel 응용 프로그램 매개 변수 옆의 바인딩 화살표를 labelCart 위젯의 텍스트 속성으로 드래그합니다. 이 바인딩을 사용하면 Home.js의 코드를 사용하여 이 버튼의 텍스트를 변경할 수 있습니다.

f. 두 번째 행을 세 개의 열로 나눕니다. 각 열에 레이블 위젯을 배치합니다.

▪ 첫 번째 열에서 레이블의 텍스트 속성을 Part Number로 변경합니다. 열의 맞춤 속성을 시작으로 변경합니다.

▪ 가운데 레이블의 경우 텍스트 속성을 Quantity로 변경합니다. 열의 맞춤 속성을 가운데로 변경합니다.

▪ 세 번째 열에서 레이블의 텍스트 속성을 Price로 변경합니다. 열의 맞춤 속성을 끝으로 변경합니다.

g. 세 번째 행에 반복기 위젯을 추가합니다. 반복기 위젯을 사용하면 데이터를 필요한 만큼 원하는 형식으로 표시할 수 있습니다. 이는 주문 시스템을 통해 카트에 추가된 부품에 대한 정보를 기록하는 데 사용되며 이 정보는 부품이 추가될수록 증가합니다. 이 위젯의 Studio ID를 cartrepeater로 변경합니다.

h. 데이터 창을 엽니다. cart라는 새로운 응용 프로그램 매개 변수를 만듭니다. 새로운 cart 응용 프로그램 매개 변수 옆에 있는 바인딩 화살표를 cartRepeater의 데이터 속성으로 드래그합니다. 그러면 부품 선택에 따라 카트에 추가된 데이터가 반복기에 연결됩니다.

i. 눈금 레이아웃 위젯을 cartRepeater로 드래그합니다. 눈금 레이아웃에 대해 생성된 새로운 열을 클릭한 다음 열 추가를 두 번 클릭하면 반복기가 세 개의 열로 분할됩니다.

j. 레이블 위젯을 새로 생성된 각 열로 드래그합니다. 위 행의 레이블과 유사하게 열의 맞춤을 각각 시작, 가운데 및 끝으로 설정합니다. 이러한 레이블은 프로젝트의 후반부에 편집됩니다.

k. 네 번째 행(방금 추가한 레이블 아래)을 클릭하고 열 추가를 선택하여 다른 열을 추가합니다.

l. 왼쪽 열에 버튼 위젯을 추가합니다. 텍스트 속성을 Order로 변경하고 Studio ID를 orderbutton으로 변경합니다. 클릭 이벤트에 대한 JS 상자를 열고 orderCart()를 입력합니다. 이 버튼은 3D-Guided Service Instructions 303에서 카트의 콘텐츠를 주문하기 위한 ThingWorx 서비스에 바인딩됩니다.

m. 같은 행의 오른쪽 열에 다른 버튼 위젯을 추가합니다. 이번에는 텍스트 속성을 Clear로, Studio ID를 clearButton으로 변경하고 클릭 이벤트의 JS 상자에 clearCart()를 입력합니다. 이 버튼은 카트에 나열된 모든 항목을 지우는 데 사용됩니다. 이 열의 맞춤 속성을 끝으로 변경합니다.

n. 미리 보기를 클릭합니다. 경험이 아래 이미지와 같으면 2D 레이아웃이 올바르게 생성된 것입니다.