개발자 포럼

개발자 'Tiqs & Tricks 플랫폼에서 약간 벗어난 작업을 수행하는 방법을 학습하여 프로젝트를 최대한 활용하려는 Vantiq 개발자를 위해 설계되었습니다. 우리는 매달 이 중 적어도 하나를 게시할 것입니다.

Vantiq 플랫폼에서 다양한 애플리케이션 개발 목표를 달성하는 방법을 강조하는 지속적인 시리즈 중 첫 번째에 오신 것을 환영합니다. 새로운 'Tiqs는 적어도 한 달에 한 번 나올 것입니다.

개발자 'Tiqs & Tricks

동적 클라이언트 콘텐츠를 만드는 방법

Vantiq의 클라이언트 빌더를 사용하여 애플리케이션용 대시보드를 만드는 것이 위젯을 캔버스로 끌어서 데이터 소스에 연결하는 것과 매우 유사하다는 점을 이미 알고 계실 것입니다. 런타임 결과는 데이터가 들어올 때 변경되는 정보를 표시하는 정적 위젯의 대시보드가 ​​됩니다.

하지만 그러한 디스플레이가 그렇게 예측 가능해야 합니까? 클라이언트 애플리케이션이 런타임 조건에 따라 표시되는 위젯을 변경할 수 있습니까? 예를 들어, 아마도 우리는 다음과 같은 것을 원할 것입니다:

짧은 대답은 다음과 같습니다. 물론입니다! 이 기사에서는 개발자가 실행 중인 애플리케이션에 위젯을 표시할 수 있는 네 가지 방법을 보여 드리겠습니다. 그들은:

• isVisible
• addChild()
• 복제()
• 새로운 ()

각각의 경우에 사용자가 "예"를 클릭하면 새로운 IntegerInput 위젯이 나타납니다.

방법 1: isVisible: 이미 VerticalLayout 내부로 드래그된 InputInteger로 시작합니다. 런타임 시 페이지의 onStart 코드에서 위젯을 보이지 않게 만듭니다. 위젯이 있는 컨테이너에는 눈에 띄는 "빈 공간"이 있지만 필드 높이를 XNUMX으로 설정하면 어느 정도 완화될 수 있습니다.

var visInt = client.getWidget(“VisInt”);
visInt.isVisible = 거짓;
visInt.heightPolicy = Widget.SizePolicy_Explicit;
visInt.h = 0;

예 버튼 OnClick 코드의 경우 위젯의 높이(방금 "NaturalSize"로 설정함)와 표시 여부를 설정하여 표시되도록 합니다.

var VisInt = client.getWidget(“VisInt”);
VisInt.heightPolicy = Widget.SizePolicy_NaturalSize;
VisInt.isVisible = true;

결과:

방법 2 : 아이 추가(): 이는 InputInteger 위젯이 이미 존재하거나 표시되는 또 다른 경우입니다. 이번에 버튼을 클릭하면 코드는 이를 VerticalLayout 위젯의 또 다른 하위 항목으로 추가하여 이전 위치에서 InputInteger를 이동합니다.

var is1 = client.getWidget(“ageInputter”);
is1.parent.removeChild(is1);
client.getWidget('VL2').addChild(is1, 2);

VerticalLayout('VL2')이 이를 하위로 추가할 수 있으려면 먼저 InputInteger를 현재 상위에서 제거해야 합니다. 또한 addChild 메소드에서 위젯 다음의 두 번째 매개변수는 수직 레이아웃의 배치 순서입니다. "2"은 맨 위에 놓입니다. "-0"은 기본값인 맨 아래에 놓습니다.

방법 3: 복제(): 복제는 클라이언트에 이미 존재하는 위젯을 기반으로 새로운 위젯을 생성합니다. 위젯을 복제한 후 VerticalLayout에 복제본을 배치하려면 onClick 버튼 코드의 정확히 두 줄이 필요합니다.

var is2 = client.clone(is1);
client.getWidget('VL2').addChild(is2, -1);

위젯이 "상위" 레이아웃에서 제거되고 동일한 코드 블록에서 새 레이아웃이나 페이지의 상위로 다시 지정되지 않으면 더 이상 존재하지 않는다는 점에 유의하세요. 이는 상위 컨테이너가 설정되지 않은 새로 복제되거나 생성된 위젯의 경우에도 마찬가지입니다.

아래에서는 addChild()를 사용하여 캔버스의 다른 위치에 있는 기존 InputInteger가 Yes 버튼 아래로 이동되고(메소드 #2) 해당 복제본(메소드 #3)이 생성되어 VerticalLayout의 하단에 추가되는 것을 볼 수 있습니다.

방법 4: 새로운 (): 마지막으로 프로그래밍 방식으로 위젯을 처음부터 생성해야 하는 경우 예 버튼을 클릭하면 됩니다.

var ager = new InputInteger();
ager.name = '에이저';
ager.label = '당신의 나이는 몇 살입니까?';
client.getWidget('VL3').addChild(ager, 2);

여기서는 새 InputInteger를 선언하고 나중에 참조할 수 있도록 이름을 지정하고 다른 예제와 동일한 레이블을 추가하고 VerticalLayout의 하위 항목으로 만들어 표시되도록 했습니다.

결론 : 이는 Vantiq 클라이언트의 위젯이 런타임 조건에 따라 모양과 동작을 변경할 수 있는 방법에 대한 간략한 설명이었습니다. 일부 이별 지점:

• 코드에서 위젯에 대한 더 많은 속성을 변경할 수 있습니다. 최종 목록을 보려면 관심 있는 위젯과 해당 상속 체인에 대한 클라이언트 빌더 참조 가이드를 참조하세요.
• 상위 컨테이너 없이 남겨진 위젯은 코드 블록이 완료되면 더 이상 존재하지 않게 됩니다.
• 레이아웃은 위젯에 매우 유용한 컨테이너이지만 위젯이 페이지 자체의 상위 항목인 경우 페이지의 정확한 배치를 위한 x 및 y 속성이 있습니다.