사용자 정의 CSS 자습서
사전 요구 사항
시작하기 전에 다음 단계를 수행합니다.
• ThingWorx 8.4를 사용하고 있는지 확인합니다.
• 다음 샘플 파일을 ThingWorx Platform으로 가져옵니다.
◦ Mashups_CustomCssTutorialMashup
◦ Things_SampleCssFileRepo
ThingWorx 저장소에 사용자 정의 CSS 파일 업로드
1. Composer의 왼쪽 탐색 창에서 관리를 클릭합니다.
2. 저장소에서 SampleCSSFileRepo 저장소를 선택합니다. 저장소의 모든 파일과 폴더가 나열됩니다.
3. SampleCSSFileRepo 폴더에 대한 작업에서 줄임표(...)를 클릭한 다음 업로드를 선택합니다. 대화 상자가 열립니다.
4. 시스템에서 tutorial-buttons.css를 선택한 다음 업로드를 클릭합니다.
CSS 파일이 SampleCSSFileRepo 사물 저장소에 업로드됩니다.
매쉬업에 사용자 정의 CSS 클래스 추가
1. Mashup Builder에서 Mashups_CustomCssTutorialMashup 매쉬업을 연 다음 매쉬업 보기를 클릭합니다. 매쉬업은 CSS 규칙이 적용되는 필드 집합의 버튼 집합으로 구성됩니다.
2. 탐색기 패널에서 매쉬업을 선택합니다.
3. 속성 패널에서 myMashupClass를 CustomClass 필드에 추가합니다.
4. 사용자 정의 CSS 탭을 클릭하고 다음 CSS 코드를 입력합니다.
.myMashupClass .widget-fieldset .widget-button {
box-shadow: 5px 5px 5px #888888;
}
box-shadow: 5px 5px 5px #888888;
}
5. 저장을 클릭한 다음 매쉬업을 봅니다. 필드 집합 위젯의 버튼에 대해 끌기 음영이 표시됩니다.
매쉬업에 사용자 정의 CSS 추가
1. Mashup Builder의 패널에서 탐색기를 열고 button-3을 선택합니다.
2. 속성 패널에서 myButtonClass를 CustomClass 필드에 추가합니다.
3. CSS 규칙 블록을 추가하려면 사용자 정의 CSS 탭을 클릭하고 다음 CSS 코드를 입력합니다.
.myButtonClass .widget-button .widget-button-text {
text-transform: uppercase;
}
text-transform: uppercase;
}
4. 저장을 클릭한 다음 매쉬업을 봅니다. 두 번째 버튼에 계속 끌기 음영이 있지만, 텍스트가 대문자로 표시됩니다.
위젯 CustomClass 속성 바인딩
1. Mashup Builder에서 탐색기 패널을 열고 eventsrouter-6을 선택합니다.
2. eventsrouter-6의 출력을 button-4의 CustomClass로 바인딩합니다.
3. 사용자 정의 CSS 탭을 클릭하고 다음 CSS 코드를 입력합니다.
.myButtonClass .widget-button .widget-button-text {
text-transform: uppercase;
}
.myBoundButtonClass1 .widget-button,
.myBoundButtonClass1 .widget-button .button-element {
border-radius: 15px 0 15px 0;
}
.myBoundButtonClass2 .widget-button,
.myBoundButtonClass2 .widget-button .button-element {
border-radius: 0 15px 0 15px;
}
text-transform: uppercase;
}
.myBoundButtonClass1 .widget-button,
.myBoundButtonClass1 .widget-button .button-element {
border-radius: 15px 0 15px 0;
}
.myBoundButtonClass2 .widget-button,
.myBoundButtonClass2 .widget-button .button-element {
border-radius: 0 15px 0 15px;
}
4. 저장을 클릭한 다음 매쉬업을 봅니다.
5. 첫 번째 적용 버튼을 클릭하여 myBoundButtonClass1을 필드 집합 위젯 내의 세 번째 버튼에 추가한 다음 두 번째 적용 버튼을 클릭합니다. 버튼 테두리 반지름은 적용되는 CSS 클래스에 따라 변경됩니다.
사용자 정의 CSS 파일 가져오기
다음 절차에서는 ThingWorx 저장소에서 CSS 파일을 가져오는 방법을 설명합니다. CSS 파일은 필드 집합 위젯 내의 버튼 위젯에 애니메이션 및 불투명도 변경 사항을 적용합니다.
@keyframes buttonSlideIn {
0% { left: 100px; opacity: 0 }
100% { left: 0; opacity: 1 }
}
.widget-fieldset .widget-button {
animation: buttonSlideIn 2s;
opacity: 0.5;
}
.widget-fieldset .widget-button:hover {
opacity: 1;
0% { left: 100px; opacity: 0 }
100% { left: 0; opacity: 1 }
}
.widget-fieldset .widget-button {
animation: buttonSlideIn 2s;
opacity: 0.5;
}
.widget-fieldset .widget-button:hover {
opacity: 1;
1. Composer에서 사용자 정의 CSS 탭을 클릭하고 다음 CSS 코드를 입력합니다.
@import url("/Thingworx/FileRepositories/SampleCssFileRepo/tutorial-buttons.css");
2. 저장을 클릭한 다음 매쉬업을 봅니다. 버튼이 오른쪽부터 안으로 움직이고 페이드 인하는 애니메이션이 됩니다. 애니메이션이 완료되면(2초) 버튼을 롤오버할 때까지 해당 버튼이 50% 불투명으로 됩니다.