분류 전체보기
-
웹스퀘어 엑셀 다운로드 및 업로드 참고 코드1. 엑셀 다운로드1.1 사용 목적현재 화면에 표시된 그리드 데이터를 그대로 엑셀 파일로 다운로드합니다. 데이터를 파일로 저장하여 분석하거나 다른 시스템과 공유할 수 있습니다. 1.2 사용 방법gridView.advancedExcelDownload([]);위 코드는 그리드뷰 데이터를 엑셀 파일로 다운로드합니다. advancedExcelDownload() 함수는 기본적으로 그리드에 표시된 데이터와 포맷을 그대로 엑셀에 반영합니다. 1.3 주요 특징포맷 유지: 그리드뷰에서 적용된 필터, 정렬, 스타일 등이 엑셀 파일에 반영됩니다.손쉬운 사용: 별도의 설정 없이 호출만으로 엑셀 다운로드 가능. 2. 엑셀 업로드2.1 사용 목적엑셀 파일로부..
[WebSquare] 웹스퀘어 엑셀 다운로드 및 업로드 참고 코드웹스퀘어 엑셀 다운로드 및 업로드 참고 코드1. 엑셀 다운로드1.1 사용 목적현재 화면에 표시된 그리드 데이터를 그대로 엑셀 파일로 다운로드합니다. 데이터를 파일로 저장하여 분석하거나 다른 시스템과 공유할 수 있습니다. 1.2 사용 방법gridView.advancedExcelDownload([]);위 코드는 그리드뷰 데이터를 엑셀 파일로 다운로드합니다. advancedExcelDownload() 함수는 기본적으로 그리드에 표시된 데이터와 포맷을 그대로 엑셀에 반영합니다. 1.3 주요 특징포맷 유지: 그리드뷰에서 적용된 필터, 정렬, 스타일 등이 엑셀 파일에 반영됩니다.손쉬운 사용: 별도의 설정 없이 호출만으로 엑셀 다운로드 가능. 2. 엑셀 업로드2.1 사용 목적엑셀 파일로부..
2024.12.30 -
웹스퀘어 디버깅 debugging 방법1. 웹에서 디버깅 활성화WebSquare5에서는 브라우저 상에서 디버깅을 수행할 수 있도록 편리한 기능을 제공합니다. 2. 디버깅 활성화 방법Ctrl + 마우스 우클릭:브라우저에서 WebSquare5 화면 상에서 Ctrl 키를 누른 상태로 마우스 오른쪽 버튼을 클릭합니다.디버깅 관련 메뉴가 나타납니다.디버깅 메뉴 선택:나타난 메뉴에서 dataCollection 보기, submission 보기, 로그 보기 등 디버깅 옵션을 선택할 수 있습니다. 3. 주요 디버깅 옵션dataCollection 보기: 현재 화면에 바인딩된 DataCollection의 상태와 데이터를 확인할 수 있습니다.submission 보기: 서버와의 통신 과정에서 Submiss..
[WebSquare] 웹스퀘어 디버깅 debugging 방법웹스퀘어 디버깅 debugging 방법1. 웹에서 디버깅 활성화WebSquare5에서는 브라우저 상에서 디버깅을 수행할 수 있도록 편리한 기능을 제공합니다. 2. 디버깅 활성화 방법Ctrl + 마우스 우클릭:브라우저에서 WebSquare5 화면 상에서 Ctrl 키를 누른 상태로 마우스 오른쪽 버튼을 클릭합니다.디버깅 관련 메뉴가 나타납니다.디버깅 메뉴 선택:나타난 메뉴에서 dataCollection 보기, submission 보기, 로그 보기 등 디버깅 옵션을 선택할 수 있습니다. 3. 주요 디버깅 옵션dataCollection 보기: 현재 화면에 바인딩된 DataCollection의 상태와 데이터를 확인할 수 있습니다.submission 보기: 서버와의 통신 과정에서 Submiss..
2024.12.29 -
웹스퀘어 개발 시 자주 쓰이는 유틸 함수($p.~) 정리1. 데이터 관련 유틸 함수1.1 $p.getComponent()설명: 특정 컴포넌트를 ID로 가져옵니다.var textbox = $p.getComponent("textboxId");textbox.setValue("Hello, World!"); 1.2 $p.executeSubmission()설명: 특정 Submission을 실행하여 서버와 데이터를 송수신합니다.$p.executeSubmission("submissionId"); 1.3 $p.getDataCollection()설명: 특정 DataCollection을 가져옵니다.var dc = $p.getDataCollection("dataCollectionId");console.log(dc..
[WebSquare] 웹스퀘어 개발 시 자주 쓰이는 유틸 함수($p.~) 정리웹스퀘어 개발 시 자주 쓰이는 유틸 함수($p.~) 정리1. 데이터 관련 유틸 함수1.1 $p.getComponent()설명: 특정 컴포넌트를 ID로 가져옵니다.var textbox = $p.getComponent("textboxId");textbox.setValue("Hello, World!"); 1.2 $p.executeSubmission()설명: 특정 Submission을 실행하여 서버와 데이터를 송수신합니다.$p.executeSubmission("submissionId"); 1.3 $p.getDataCollection()설명: 특정 DataCollection을 가져옵니다.var dc = $p.getDataCollection("dataCollectionId");console.log(dc..
2024.12.29 -
WebSquare5 DesignSystemDesignSystem의 주요 기능1. 템플릿 관리기능: 화면 설계 시 반복적으로 사용되는 구조나 레이아웃을 미리 정의해 두고 재사용할 수 있습니다.사용 예시: 로그인 화면, 대시보드 레이아웃, 테이블 구조 등을 템플릿으로 저장하여 재활용. 2. 스타일 및 테마 관리기능: 프로젝트 전체에서 공통으로 사용되는 색상, 글꼴, 버튼 스타일 등을 정의합니다. 변경 사항이 발생하면 스타일만 수정하여 모든 화면에 자동 반영됩니다.예시:Primary Color: #007BFF (기본 버튼 색상)Secondary Color: #6C757D (보조 버튼 색상) 3. 컴포넌트의 재사용성기능: 기본 컴포넌트(InputBox, GridView 등)에 DesignSy..
[WebSquare] 웹스퀘어 DesignSystem 란?WebSquare5 DesignSystemDesignSystem의 주요 기능1. 템플릿 관리기능: 화면 설계 시 반복적으로 사용되는 구조나 레이아웃을 미리 정의해 두고 재사용할 수 있습니다.사용 예시: 로그인 화면, 대시보드 레이아웃, 테이블 구조 등을 템플릿으로 저장하여 재활용. 2. 스타일 및 테마 관리기능: 프로젝트 전체에서 공통으로 사용되는 색상, 글꼴, 버튼 스타일 등을 정의합니다. 변경 사항이 발생하면 스타일만 수정하여 모든 화면에 자동 반영됩니다.예시:Primary Color: #007BFF (기본 버튼 색상)Secondary Color: #6C757D (보조 버튼 색상) 3. 컴포넌트의 재사용성기능: 기본 컴포넌트(InputBox, GridView 등)에 DesignSy..
2024.12.29 -
웹스퀘어 버튼 오른쪽으로 배치하는 방법, 루틴1. 그룹으로 감싸기방법:버튼 컴포넌트를 선택합니다.마우스 우클릭 > 그룹으로 감싸기를 선택하거나, Ctrl + G를 눌러 그룹으로 감쌉니다.설명:그룹으로 감싸는 것은 버튼을 별도의 컨테이너 안에 넣어 배치 및 스타일링을 용이하게 만듭니다. 2. float: right 적용방법:그룹 또는 버튼의 스타일 속성에서 float: right를 적용합니다.WebSquare 툴바에서 float 메뉴를 열어 float: right를 선택할 수도 있습니다.주의사항:float: right를 사용하면 버튼이 오른쪽으로 배치되지만, 그룹 외부로 벗어날 수 있습니다.이를 방지하려면 추가적인 스타일 설정이 필요합니다. 3. 그룹 스타일 설정방법:버튼을 감싸는 그..
[WebSquare] 웹스퀘어 버튼 오른쪽으로 배치하는 방법, 루틴웹스퀘어 버튼 오른쪽으로 배치하는 방법, 루틴1. 그룹으로 감싸기방법:버튼 컴포넌트를 선택합니다.마우스 우클릭 > 그룹으로 감싸기를 선택하거나, Ctrl + G를 눌러 그룹으로 감쌉니다.설명:그룹으로 감싸는 것은 버튼을 별도의 컨테이너 안에 넣어 배치 및 스타일링을 용이하게 만듭니다. 2. float: right 적용방법:그룹 또는 버튼의 스타일 속성에서 float: right를 적용합니다.WebSquare 툴바에서 float 메뉴를 열어 float: right를 선택할 수도 있습니다.주의사항:float: right를 사용하면 버튼이 오른쪽으로 배치되지만, 그룹 외부로 벗어날 수 있습니다.이를 방지하려면 추가적인 스타일 설정이 필요합니다. 3. 그룹 스타일 설정방법:버튼을 감싸는 그..
2024.12.29 -
WebSquare5 툴바 설정 방법1. 툴바 설정을 활성화하는 방법WebSquare5에서 스타일 툴바(Style Toolbar)를 활성화하여 글꼴, 색상, 정렬 등 스타일 관련 옵션을 빠르게 사용할 수 있습니다. 2. 설정 단계상단 메뉴에서 Window 선택: WebSquare Studio 상단의 Window 탭 클릭.Preference 선택: 드롭다운 메뉴에서 Preference를 선택.WebSquare 카테고리로 이동: Preference 창이 열리면, WebSquare 카테고리를 찾습니다.Show style toolbar menu 활성화: WebSquare 옵션에서 Show style toolbar menu 체크박스를 활성화.적용 및 확인: 변경 사항을 저장(Save)하거나 적용(Apply)..
[WebSquare] 웹스퀘어 툴바 Toolbar 활성화 방법WebSquare5 툴바 설정 방법1. 툴바 설정을 활성화하는 방법WebSquare5에서 스타일 툴바(Style Toolbar)를 활성화하여 글꼴, 색상, 정렬 등 스타일 관련 옵션을 빠르게 사용할 수 있습니다. 2. 설정 단계상단 메뉴에서 Window 선택: WebSquare Studio 상단의 Window 탭 클릭.Preference 선택: 드롭다운 메뉴에서 Preference를 선택.WebSquare 카테고리로 이동: Preference 창이 열리면, WebSquare 카테고리를 찾습니다.Show style toolbar menu 활성화: WebSquare 옵션에서 Show style toolbar menu 체크박스를 활성화.적용 및 확인: 변경 사항을 저장(Save)하거나 적용(Apply)..
2024.12.29