당신은 주제를 찾고 있습니까 “웹 스퀘어 5 – MultiSelect – onrowclick | MultiSelect | 웹스퀘어5 – 사용 팁“? 다음 카테고리의 웹사이트 https://you.charoenmotorcycles.com 에서 귀하의 모든 질문에 답변해 드립니다: https://you.charoenmotorcycles.com/blog. 바로 아래에서 답을 찾을 수 있습니다. 작성자 WebSquare 이(가) 작성한 기사에는 조회수 4회 및 좋아요 없음 개의 좋아요가 있습니다.
웹 스퀘어 5 주제에 대한 동영상 보기
여기에서 이 주제에 대한 비디오를 시청하십시오. 주의 깊게 살펴보고 읽고 있는 내용에 대한 피드백을 제공하세요!
d여기에서 MultiSelect – onrowclick | MultiSelect | 웹스퀘어5 – 사용 팁 – 웹 스퀘어 5 주제에 대한 세부정보를 참조하세요
Triggered upon an item on the selection list being clicked.
Related API
onrowclick
Sample File : https://inswave.com/confluence/download/attachments/17110140/onrowclick_MultiSelect.xml?version=1\u0026modificationDate=1660611817888\u0026api=v2
For more info, visit https://wtech.inswave.kr.
웹 스퀘어 5 주제에 대한 자세한 내용은 여기를 참조하세요.
웹스퀘어
웹스퀘어,WebSquare, HTML5 UI 플랫폼, 웹표준,웹 개발툴,인스웨이브시스템즈, … 웹스퀘어5는 기업이 웹과 모바일에서 효율적으로 비즈니스를 수행할 수 있는 UI …
Source: www.websquare.co.kr
Date Published: 1/26/2022
View: 6507
[WebSquare5] 웹스퀘어 시작하기 – 개발새발!
WebContent에서 마우스 우클릭하여 ‘WebSquare Page’ 파일을 선택한다. 이 파일은 xml 파일로 생성된다. 파일이 생성되면 총 5개의 workspace (Design, …
Source: devpad.tistory.com
Date Published: 9/3/2022
View: 2780
WebSquare5(웹스퀘어5) 교육 1일차 – 네이버 블로그
파싱되어 html5돔으로 변환되어 보여진다. 웹스퀘어 생성하기. 일단 xml 생성하는 방법은 간단하다! . 페이지를 생성하면. 하단에 5개의 탭이 있다.
Source: m.blog.naver.com
Date Published: 5/8/2022
View: 2082
웹스퀘어5 V5.0- 인스웨이브시스템즈 | 지원서비스 – 호환성확인
영역: UX 솔루션(확인범위:UX/UI) -제품명: 웹스퀘어5 -버전: 웹스퀘어5 V5.0 -표준프레임워크 버전 : 3.10 -호환성확인 레벨 : 2 ※ 호환 등급은 레벨별 순위가 있는 …
Source: www.egovframe.go.kr
Date Published: 7/15/2022
View: 2158
[솔루션리뷰] 디지털 트랜스포메이션을 위한 엔터프라이즈 UI …
‘웹스퀘어5’는 쉽고 빠른 개발과 뛰어난 성능을 갖춘 엔터프라이즈 UI 플랫폼이다. 특히 웹, 모바일, 웨어러블 디바이스, 네이티브 앱 등 모든 개발 환경 …
Source: www.comworld.co.kr
Date Published: 1/4/2021
View: 6586
웹스퀘어 Web Square 란? (프론트 소스를 알아서 짜준다고?)
웹 표준을 준수한 UI프레임워크로 UI컴포넌트와 Util API, 통합 개발 도구 제공하는 솔루션이라고 한다. 쉽게 말해 프론트 화면 개발 툴이다. 프론트개발 …
Source: cheershennah.tistory.com
Date Published: 11/3/2022
View: 5287
웹스퀘어(Websquare)란? – 웰시코기 IT개발자
서버와 데이터 통신을 XML/JSON 으로 데이터 처리를 지원함. *5. 웹 개발 도구 장점 브라우저 상의 로그,페이지소스,데이터컬렉션,인스턴스을 확인 할 수 …
Source: eomstory.tistory.com
Date Published: 5/28/2021
View: 7866
주제와 관련된 이미지 웹 스퀘어 5
주제와 관련된 더 많은 사진을 참조하십시오 MultiSelect – onrowclick | MultiSelect | 웹스퀘어5 – 사용 팁. 댓글에서 더 많은 관련 이미지를 보거나 필요한 경우 더 많은 관련 기사를 볼 수 있습니다.
주제에 대한 기사 평가 웹 스퀘어 5
- Author: WebSquare
- Views: 조회수 4회
- Likes: 좋아요 없음
- Date Published: 2022. 8. 19.
- Video Url link: https://www.youtube.com/watch?v=u7Ec_e0rooE
[WebSquare5] 웹스퀘어 시작하기
프로젝트에서 WebSquare를 처음으로 사용하게 되었다. 프로젝트에서 사용하기 위해 WebSquare 공부를 시작하지만, 이 점을 항상 명심하려고 한다. UI 툴을 쓰다 보면, 화면을 찍어내는 느낌과 웹 기술에서 점점 퇴보되가는 느낌을 받는다고 한다. 따라서 회사에서 UI 툴을 쓰더라도, 회사 밖에서 의식적으로 react, vue 등의 기술을 공부하는 습관을 들이자.
지금부터 유튜브, 사용자 가이드, API를 통해 WebSquare의 기본적인 사용법을 적어보려고 한다.
웹스퀘어
인스웨이브사의 웹스퀘어는 웹표준을 따르는 UI/UX 개발툴로 현재 버전 5까지 나와있다. 함께 언급되는 툴로는 투비소프트의 Nexacro, xPlatform과 토마토시스템의 eXbuilder 등이 있다.
웹스퀘어 설치
웹스퀘어는 웹스퀘어5 Studio를 설치해서 실행하는 방법과 이클립스에 웹스퀘어5 Plugin을 설치하는 방법이 있다. 아래는 이클립스에서 웹스퀘어5 Plugin을 설치한 모습이다. 이후 Tomcat 서버를 시작하고 http://localhost:8080/ws5 로 접속하면 화면을 확인할 수 있다.
이클립스 우측 상단의 [Open Perspective]을 누르면 WebSquare Designer 모드와 WebSquare Developer 모드가 나타난다. Designer 모드는 퍼블리셔가, Developer 모드는 개발자가 사용하는 모드이다.
WebSquare 스튜디오
WebSquare 파일은 반드시 WebRoot 이하에서 생성해야 한다. 클라이언트 자원이기 때문이다. 예를 들어 Dynamic Web Project일 경우에는 WebContent 하위에 구성된다. 또한 web.xml 파일에서 websquare 엔진(.wq)을 처리할 수 있도록 servlet에 등록할 수 있다.
프로젝트 파일 생성
WebContent에서 마우스 우클릭하여 ‘WebSquare Page’ 파일을 선택한다. 이 파일은 xml 파일로 생성된다. 파일이 생성되면 총 5개의 workspace (Design, Script, DataCollection, Submission, Source) 영역으로 구분되어 보여진다.
Design 탭
컴포넌트를 선택하여 배치할 수 있다. (브라우저 실행하려면 F7를 누른다)
만약 시스템 브라우저 외에 다른 브라우저를 등록하려면, ‘Excute external program’을 클릭하여 브라우저를 등록할 수 있다. 컴포넌트는 속성(P), 이벤트(E), API로 제어된다. 컴포넌트에 id를 부여하면, 해당 id가 페이지 내에서 전역 변수로 자동으로 등록되므로, Script 탭에서 사용 가능하다.
Script 탭
JavaScript 로직을 작성한다. 파일을 생성하면 아래의 이벤트가 자동으로 등록된다.
onPageload : 페이지 로딩 후 실행 (모든 컴포넌트를 그려준 이후에 반영됨)
onPageunload : 페이지 종료 후 실행
참고로 WebSquare는 기본 namespace 기반의 코딩을 하며, 디폴트로 사용하는 객체명은 scwin이다. 페이지를 닫을 때 해당 자원을 자동으로 삭제하는 기능을 이용할 수 있다고 한다.
DataCollection 탭
data 객체를 생성하고 관리한다.
DataMap : 단건 data 관리
DataList : 다건 data 관리
LinkedDataList : 생성된 dataList에서 별도의 조건을 주어 filter된 data를 확인한다(뷰어용으로 제한적으로 사용됨)
AlliasDataMap : Page Coding에서 자식에서 부모의 dataMap 객체를 참조할 때 사용
AlliasDataList : Page Coding에서 자식에서 부모의 dataList 객체를 참조할 때 사용
Submission 탭
웹스퀘어의 통신 객체를 생성 및 관리한다. 웹스퀘어에서는
표준프레임워크 포털 eGovFrame
웹스퀘어5 V5.0- ㈜인스웨이브시스템즈 웹스퀘어5 V5.0- ㈜인스웨이브시스템즈
분야 : UX Solution 등록일자 : 2021-08-11
-영역: UX 솔루션(확인범위:UX/UI)
-제품명: 웹스퀘어5
-버전: 웹스퀘어5 V5.0
-표준프레임워크 버전 : 3.10
-호환성확인 레벨 : 2
※ 호환 등급은 레벨별 순위가 있는 것은 아니며, 소프트웨어의 특성에 따라 레벨이 부여됨
-구분: 연동 SW
-업체명 : ㈜인스웨이브시스템즈
-호환성 확인일자 : 2021.06.23
-URL : www.websquare.co.kr
*연동가이드: 게시
[솔루션리뷰] 디지털 트랜스포메이션을 위한 엔터프라이즈 UI 플랫폼 ‘웹스퀘어5 SP5(WebSquare5 SP5)’
[컴퓨터월드] 오늘날 웹 기반 시스템들은 보다 다양한 디바이스와 플랫폼을 지원해야한다는 과제에 직면해있다. 과거의 웹이 소비자가 콘텐츠를 소비하는 보조적인 경로로 활용됐다면, 기업들의 비즈니스 환경이 온라인으로 옮겨가면서 웹은 콘텐츠를 생산하고 유통시키는 핵심적인 역할을 수행하고 있다. 고객에게 제공되는 상품과 재화, 기업의 비즈니스 관리 체계나 업무 프로세스가 모두 웹 기반으로 디지털화되면서 웹 시스템들의 중요성과 영향력은 더욱 높아지고 있다.이에 따라 웹 시스템을 구축하기 위한 개발도구에도 관심이 집중되고 있다. 웹 시스템의 역할이 다양해짐에 따라 웹 개발도구는 멀티미디어나 온라인 콘텐츠‧문서들과의 연결은 물론, 다양한 외부 장치들과의 연결을 관리할 수 있는 허브 역할을 수행해야 한다. 또한 복잡한 시스템을 빠르고 효율적으로 개발하면서도 웹에 집중되는 대용량 트래픽들을 빠르고 안정적으로 처리할 수 있는 성능이 요구된다.
인스웨이브시스템즈의 ‘웹스퀘어5 서비스팩5(WebSquare5 SP5)’는 디지털 트랜스포메이션 트렌드에 적합한 HTML5 기반 엔터프라이즈 UI 플랫폼이다. 오픈 아키텍처로 다양한 오픈/상용 라이브러리와의 손쉬운 연계를 지원하고, 대다수 웹 애플리케이션 서버(WAS)와 프레임워크, OS 등을 지원해 어떠한 환경에서도 개발이 가능하다.
‘웹스퀘어5’는 쉽고 빠른 개발과 뛰어난 성능을 갖춘 엔터프라이즈 UI 플랫폼이다.
특히 웹, 모바일, 웨어러블 디바이스, 네이티브 앱 등 모든 개발 환경에 대한 요구를 통합 지원하는 다중 경험 개발 플랫폼(MXDP, MultieXperience Development Platforms)을 지향해 OSMU(One Source Multi Use)가 가능한 높은 개발 생산성을 자랑한다. 반응형 웹 컴포넌트(Responsive Web Component)는 가변적인 그리드, 이미지, 미디어쿼리 등을 기반으로 어떠한 디바이스에서도 웹 아이덴티티(Web Identity)를 동일하게 유지할 수 있다. 여기에 반응형 웹 기술만으로는 구현하기 어려운 테이블, 그리드 등의 컴포넌트에도 OSMU를 지원할 수 있도록 최적화된 적응형 웹 컴포넌트(Adaptive Web Component) 기술도 갖췄다.
모놀리식(Monolithic) UI 대체하는 마이크로 프론트엔드 아키텍처
‘웹스퀘어5’는 올해 서비스팩5로 업데이트되면서 마이크로 프론트엔드 아키텍처(Micro Frontend Architecture)를 지원할 수 있게 됐다. 이는 애플리케이션을 서비스 단위로 잘게 쪼개어 개발하는 마이크로 서비스 아키텍처(MSA, Micro Service Architecture)를 프론트엔드 레이어에 적용하는 것을 의미한다. MSA가 기존의 무겁고 복잡하며 유지보수도 어려운 모놀리식 아키텍처의 대안으로 제시된 것처럼, 마이크로 프론트엔드 역시 크고 무거운 모놀리식 UI의 대안으로 제시됐다. 전체 화면을 개별적으로 작동할 수 있는 단위로 나누어 개발한 후 통합해 제공함으로써 보다 민첩하고 현대적인 UI 개발과 관리가 가능하다.
MSA에 최적화된 마이크로 프론트엔드 아키텍처
‘웹스퀘어5’의 마이크로 프론트엔드 아키텍처는 MSA로 구성된 기업 내 다양한 업무 시스템에서 필요한 리소스를 가져와 화면을 구성하는 크로스 MSA 리소스 셰어링(Cross MSA Resource Sharing)을 지원한다. 이를 통해 복잡하게 구성된 사내 MSA에서 원하는 정보들을 찾고 간편하게 하나의 화면 안에 표시할 수 있다. 특히 서로 다른 서버의 정보로 구현한 UI들이 서로 직접적인 영향을 미치지 않도록, 별도의 MSA 메시지 브로커를 마련해 통신하도록 함으로써 UI 구성요소 간의 종속성을 최소화했다.
또한 UI 개발 프로젝트의 진행 프로세스에 맞춰서 UI 기획자와 공통 개발자, 업무 개발자의 역할에 따라 수행해야 할 태스크를 웹스퀘어5의 스튜디오를 통해서 소통하며 개발할 수 있도록 하는데 초점을 맞췄다.
그리하여 프로젝트 템플릿, 레이아웃 매니저(개발 생산성 향상을 위해 컴포넌트 단위로 화면에 배치), 페이지 템플릿, 디자인 시스템(디자인 일관성 유지를 위한 디자인 시스템) 등의 개발 도구 기능을 대폭 강화하였다.
풍부한 컴포넌트 제공해 개발 생산성 향상
‘웹스퀘어5’는 개발 생산성 향상을 위한 기능도 대거 갖췄다.
먼저 기본 제공되는 80여 종의 UI 컴포넌트들이 개발 생산성을 높인다. 점점 더 복잡해져가는 웹 UI 개발 환경에서 자주 사용되는 캘린더, 탭, 트리, MDI와 같이 다양한 UI 컴포넌트를 풍부하게 제공된다. 기본적인 그리드 컴포넌트부터 데이터 분석과 표현을 위한 피봇, 사용자가 개인화된 화면(Personalized UI)를 구현하도록 돕는 위젯 등 개발 생산성과 UX를 개선할 수 있는 컴포넌트들을 갖추고 있다.
‘웹스퀘어5’는 80여 종의 UI 컴포넌트들로 쉽고 빠른 개발을 돕는다.
또한 사용자 정의 컴포넌트(UDC, User Defined Component)는 개발자가 다양한 컴포넌트들을 직접 제작해 활용하게 도움으로써 개발 생산성과 확장성을 크게 향상시킨다. 기존에 사용하던 컴포넌트를 상속 또는 조합해 새로운 컴포넌트로 제작하는 것은 물론, 외부 라이브러리를 사용해 작성한 컴포넌트를 ‘웹스퀘어5’ 컴포넌트처럼 사용할 수 있도록 지원한다. 또한 상용 라이브러리를 이용한 차트 컴포넌트를 랩핑(wrapping)해 ‘웹스퀘어5’ 컴포넌트로 등록 및 사용하는 것도 가능하다. 이렇게 제작한 UDC들은 공통 컴포넌트로 활용할 경우 각 프로그램에 임베디드해 사용하는 방식이기 때문에, 수정 시 모든 프로그램에 일괄 반영되므로 개발 생산성이나 유지보수 효율성이 향상된다.
SPA로 트래픽 줄이면서도 성능 개선
기존 웹 개발에 사용되던 아이프레임(Iframe, HTML Inline Frame) 방식은 다른 HTML 페이지를 현재 페이지에 추가하는 방식이다. 하나의 웹페이지 안에 다른 페이지를 제한없이 삽입할 수 있어 편리하게 사용 가능하다. 하지만 복수의 탭 구조로 웹페이지를 만들면 브라우저 생성이나 리소스 로딩을 각각의 탭마다 실행해야 하기 때문에 로딩에 부하가 걸리고 많은 시간이 소요된다. 표시하는 화면의 수에 비례해 브라우저 사용 메모리가 증가하므로 메모리 누수(leak)에 의한 장애가 발생할 수도 있다.
‘웹스퀘어5’에는 기존 아이프레임과 다른 더블유프레임(Wframe)이 적용됐다. 더블유프레임은 웹페이지 전체를 하나의 페이지(Single Page)로 구현할 수 있도록 돕는다. 모델이나 뷰, 컨트롤 등을 포함하는 독립적인 업무 화면이나 단위 모듈로 기능하며, UI 개발의 기본 단위가 될 수 있는 속성‧이벤트‧메소드 등이 정의돼있다.
기존 아이프레임 방식과 더블유프레임 기반의 SPA 방식 비교
기존의 아이프레임은 브라우저 로딩으로 인한 메모리 부하가 컸지만, 더블유프레임 기반의 싱글 페이지 애플리케이션(SPA, Single Page Application)으로 대체함으로써 메모리 부하를 줄이고 전반적인 성능 향상을 기대할 수 있다. SPA는 웹페이지가 로드된 이후 갱신할 때 페이지 전체를 서버에 요청하고 반영하는 대신, 구조화된 페이지에서 변경된 항목만 갱신함으로써 메모리와 서버 트래픽의 부하를 줄인다. 브라우저 창 생성부터 공통 리소스를 로딩하는 일련의 과정을 최초 1회만 실행함으로써, 웹페이지 로딩 속도를 높이고 향상된 사용자 경험(UX)을 제공한다.
웹스퀘어5는 생산성 향상을 통해 비용을 절감하고, 신뢰할 수 있는 성능을 제공한다. 오픈소스 개발 대비 40% 가량의 공수를 절감하고, 여러 프레임워크와의 연계, 표준화된 80여개의 컴포넌트, 6400여개의 API를 통해 반복 개발의 낭비를 제거할 수 있다. 또한 OSMU 지원으로 여러 디바이스의 중복 개발을 최소화할 수 있다. 개발 생산성 향상으로 사용자 입장에서의 빠른 속도, 관리자 관점의 안정적인 운영 시스템을 통해 비용 절감과 신뢰할 수 있는 성능을 제공한다.
웹스퀘어 Web Square 란? (프론트 소스를 알아서 짜준다고?)
반응형
웹스퀘어 Web Square 란?
웹 표준을 준수한 UI프레임워크로 UI컴포넌트와 Util API, 통합 개발 도구 제공하는 솔루션이라고 한다. 쉽게 말해 프론트 화면 개발 툴이다. 프론트개발을 그켬하는 백엔드 개발자인 나에게는 신세계일 따름…
마치 대딩 때 처음 접했던 자바 스윙 업그레이드 버젼 같기도 하고..;
디자인 탭에서 화면을 미리 볼 수 있는데 PPT에서 개체 추가 해주듯이 만들고자 하는 요소들을 추가하고,
속성에서 ID 지정 등 데이터를 입력한 뒤, Source 탭에 들어가보면 방금 마우스로 끄적거린 작업들이 HTML/JS 소스로 완성되어있다. WOW ….
화면 노가다를 해야하는 수고는 확실히 덜어주기는 하지만 디자인 등이 정형화 되어있고 모든 문법이 websquare에 종속되어 있어서 자유도는 매우 떨어진다.. 장단점은 좀 더 써보아야 알겠지만 개인적인 생각은 기업을 타겟으로 만들어진 정형화된 솔루션이라는 생각이다.
js는 안그래도 못하는데 더 까먹을 것 같다 크흨..
구성 및 설정
웹 표준 준수로 설치과정에 별도의 installer 및 Active-x등이 존재하지 않음
별도 설치과정 없이 Web Resource와 함께 포함되어 구성되며, 이때 WebSquare를 구동하기 위한 Servlet,
즉 웹스퀘어 엔진을 등록하고 서버설정 디렉토리를 지정해주면 된다.
web.xml )
websquareDispatcher websquare.http.DefaultRequestDispatcher WEBSQUARE_HOME ~/~/~/websquare_home websquareDispatcher *.wq 화면 호출 방식
웹스퀘어로 개발 된 화면파일은 단독으로 브라우저에서 실행할 수 없음.
화면 파일은 웹스퀘어 javaScript 엔진을 통해 실시간 해석되어 브라우저에 표시된다.
웹스퀘어 엔진은 서버에 배포된 websqaure.html파일을 통해 호출되고 엔진 로딩이 끝나면 실행된다
즉, 모든 웹스ㅞ어 화면 파일은 websquare.html을 통해 실행된다.
일반적으로 화면 파일의 정보는 Get방식의 파라미터를 통해 웹스퀘어 엔진에 전달된다.
웹스퀘어 화면을 브라우저에서 호출해 보자.
ex)
http://domain.com/websquare/websquare.html?w2xPath=/MA/MA01M01.xml
http://domain.com :서버 도메인
/websquare/websquare.html :웹스퀘어 엔진 로딩 및 실행파일
HTML 의 DocType, Meta 등 정의
파일명 변경 가능하여 용도에 따라 파일 여러개 사용 가능
파일 확장자를 jsp로변경할 수 있다.
?w2xPath=/MA/MA01M01.xml :웹 스퀘어 화면 파일 경로.
웹 스퀘어 엔진이 xml(UI grid)파일을 해석하여 HTML과 JavaScript를 생성하고 실행.
서버 통신 플로우
반응형
키워드에 대한 정보 웹 스퀘어 5
다음은 Bing에서 웹 스퀘어 5 주제에 대한 검색 결과입니다. 필요한 경우 더 읽을 수 있습니다.
이 기사는 인터넷의 다양한 출처에서 편집되었습니다. 이 기사가 유용했기를 바랍니다. 이 기사가 유용하다고 생각되면 공유하십시오. 매우 감사합니다!
사람들이 주제에 대해 자주 검색하는 키워드 MultiSelect – onrowclick | MultiSelect | 웹스퀘어5 – 사용 팁
- 웹스퀘어
- WebSquare
- websquare
- Websquare
MultiSelect #- #onrowclick #| #MultiSelect #| #웹스퀘어5 #- #사용 #팁
YouTube에서 웹 스퀘어 5 주제의 다른 동영상 보기
주제에 대한 기사를 시청해 주셔서 감사합니다 MultiSelect – onrowclick | MultiSelect | 웹스퀘어5 – 사용 팁 | 웹 스퀘어 5, 이 기사가 유용하다고 생각되면 공유하십시오, 매우 감사합니다.
