화면 편집하고 다시 열기
생성된 LAB010 화면을 활용해 문구 하나만 바꿉니다. 첫 편집에서는 컨트롤 ID나 거래 구성을 유지해 화면 편집과 데이터 오류를 분리하세요.
1. View Designer 열기
- 왼쪽 개발에서 유형을
view로 좁힙니다. LAB010을 엽니다. 예시 경로는wwwroot/idelab/view/HDS/LAB/LAB010.html입니다.- 디자인에서 제목이나 안내 문구 요소를 선택하고 속성에서 문구를 변경합니다.
- 저장한 뒤 소스보기 에서 변경한 문구가 HTML에 반영되었는지 찾습니다.
예제 파일이 없다면 새 개발 파일 > view를 사용하되, 기존 파일과 같은 이름으로 만들지 마세요. 템플릿은 전체 화면의 시작점, 디자인 블록은 화면 일부를 추가할 때 사용합니다.
2. 세 편집 영역 구분하기
| 영역 | 여기에서 바꾸는 것 |
|---|---|
| 디자인·속성 | 배치, 컨트롤 ID, 데이터 필드, 옵션, 추가 스타일 클래스 |
| 스크립트 | $LAB010 객체의 이벤트·메서드·거래 구성 |
| 소스보기 | 실제 HTML 원문 |
id는 화면 요소를 찾는 이름이고 syn-datafield는 거래 데이터와 연결할 이름입니다. 이름을 바꾸는 실습은 다음 단계에서 계약과 함께 진행합니다. 옵션 전체 명세는 UI 컨트롤 참조를 이용하세요.
3. 저장 왕복 확인
- 저장 후 탭을 닫고 같은 화면을 다시 엽니다.
- 바꾼 문구와 요소 계층이 유지되는지 확인합니다.
- 해당 항목이나 탭의 웹 브라우저로 열기로 실제 실행 화면을 확인합니다.
캔버스의 그리드·컨트롤 모양은 디자인용 표시일 수 있습니다. 캔버스가 보이는 것만으로 데이터 조회 성공을 판단하지 않습니다. 브라우저 실행에는 서버 연동과 해당 리소스가 필요합니다.
소스 편집기와 View Designer에서 같은 파일을 동시에 수정했다면 먼저 어느 편집본을 보존할지 정하세요. 미저장 내용을 덮어쓰지 말고 저장·다시 열기로 상태를 맞춥니다.
직접 확인
문구를 원래대로 되돌리고 다시 저장하세요. diff에서 의도한 HTML·JS 변경만 남는지 확인하면 완료입니다. 저장 마커와 pageMappings의 정확한 위치는 파일과 저장 규칙을 참고하세요.