webix 프레임 워크로 양식 작성

이 기사는 Simon Codrington과 Mallory van Achterberg가 검토 한 동료입니다. Sitepoint 콘텐츠를 최선을 다해 Sitepoint의 동료 리뷰어 덕분에! 웹 디자이너로서, 상당히 정기적으로 웹 양식을 만들어야 할 가능성이 있습니다. 이것은 종종 감사가없는 과제이며 두통으로 가득 차 있습니다 (특히 다단계 양식을 만드는 것과 같이 더 복잡한 일을하는 경우). 이러한 경우 UI 프레임 워크를 사용하여 통증을 완화하고 개발 과정을 가속화하는 것이 좋습니다. 이 기사에서는 webix 프레임 워크를 사용하여 최소한의 번거 로움으로 다양한 형태의 양식을 만들 수있는 다양한 팁과 요령을 간략하게 설명합니다. 키 테이크 아웃

단순성 및 속도 : Webix JavaScript UI 라이브러리를 활용하여 양식 생성 프로세스를 크게 단순화하여 다중 단계 및 멀티 탭 형태와 같은 복잡한 형태의 빠른 개발 및 통합을 가능하게합니다. 양식 생성의 다목적 성 : Webix는 간단한 양식, 여러 선택 옵션이있는 양식 및 형태 내에서 트리 위젯과 같은 혁신적인 위젯을 포함하여 다양한 형태의 요소 및 구성을 제공합니다.

사용자 정의 및 유연성 : 프레임 워크는 사용자 정의 스킨 생성 및 드래그 앤 드롭 UI 제작을위한 비주얼 디자이너 도구 사용을 포함하여 광범위한 사용자 정의 옵션을 지원합니다. <:> 고급 기능 : webix는 멀티 콤보 선택 및 제안과 같은 고급 기능을 제공하여 사용자 인터페이스 및 양식 경험을 향상시킵니다. 통합 및 호환성 : 프레임 워크는 프로젝트에 다양한 포함 방법과 호환되며 주요 브라우저 및 장치를 지원하며 다른 JavaScript 프레임 워크와 함께 사용할 수 있으므로 다양한 개발 환경에 적응할 수 있습니다. .

webix 란 무엇입니까?

webix는 모바일 및 데스크탑 웹 앱의 생성을 용이하게하는 HTML5 구성 요소의 JavaScript UI 라이브러리입니다. Excel과 같은 응용 프로그램을 개발하는 데 사용할 수있는 간단한 버튼에서 스프레드 시트 위젯에 이르기까지 다양한 구성 요소를 제공합니다. UI 구성 요소 컬렉션 외에도 이벤트 처리 메커니즘, 오프라인 모드 지원 및 다양한 개발 도구가 있습니다. 스킨 빌더를 사용하여 자신만의 스킨을 만들고, Drag-and-Drop UI 생성을 위해 Visual Designer를 사용하고 온라인 소스 코드 놀이터의 코드를 사용하여 플레이 할 수 있습니다. 이 프로젝트에는 또한 철저한 문서가 있습니다.

나는 이미이 프레임 워크 사용의 주요 기능과 기본 사항을 설명하는 입문 기사를 이미 작성 했으므로 관심이 있으시면 미리 살펴보십시오.webix 포함 프로젝트에 필요한 JavaScript 및 CSS 파일을 포함시킬 수있는 다양한 방법이 있습니다. 라이브러리 패키지를 다운로드하면 Codebase 폴더 내에 이러한 파일을 찾을 수 있습니다. 다음과 같이 포함시킬 수 있습니다

또는 cdn : 를 사용할 수 있습니다

당신은 또한 nuget : 를 사용할 수 있습니다

Microsoft Visual Studio를 사용하는 경우 패키지 관리자 콘솔에서이를 실행하십시오.

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="./codebase/webix.css"</span>></span>
</span><span><span><span><script</span> src<span>="./codebase/webix.js"</span>></span><span><span></script</span>></span>
</span>

또는 Bower를 시도하십시오 :

간단한 양식 생성 이제 라이브러리가 제자리에 있으면 webix 양식 위젯이 어떻게 작동하는지 봅시다.

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="http://cdn.webix.com/edge/webix.css"</span>></span>
</span><span><span><span><script</span> src<span>="http://cdn.webix.com/edge/webix.js"</span>></span><span><span></script</span>></span>
</span>

우리는 webix 객체의 UI 메소드를 호출하고 출력을 구성하기 위해 다양한 매개 변수를 전달하여 시작합니다.

view 속성은 생성 된 요소의 종류를 지시합니다 (여기서는 양식을 만들고 있지만 메뉴 나 차트 일 수도 있습니다). id 속성은 ID를 양식에 할당하여 나중에 참조 할 수 있습니다. 컨테이너 속성은 양식을 렌더링 해야하는 HTML 요소의 ID를 지정합니다. 너비 속성은 폼 요소의 너비를 설정하는 데 사용됩니다. Webix는 여기에서 픽셀을 측정 단위로 사용하려고한다고 가정하므로 적절한 숫자 만 설정하면됩니다. 요소 속성은 양식에 포함 할 다양한 구성 요소입니다. 텍스트 필드, 라디오 버튼, 확인란, 버튼 등 양식 내에 적절한 구성 요소를 사용할 수 있습니다.

간단한 로그인 양식을 작성하겠습니다. 두 개의 텍스트 필드 (사용자 이름과 암호 용), 하나는 확인란 및 제출 버튼이 필요합니다. .

nuget <span>install Webix
</span>

우리는 양식 요소에 대한 이름 속성을 지정하고 설정 유형 : 암호 필드의 "비밀번호"를 입력하여 입력 할 때 마스킹 할 수 있습니다. 요소의 레이블 속성을 설정하면 해당 요소의 레이블을 정의하고 요소의 클릭 속성을 사용하여 양식이 제출 될 때 호출 될 이벤트 핸들러를 정의 할 수 있습니다. 데이터에서 모든 것이 정상인지 확인할 수있는 것이 좋지만 클라이언트 측 유효성 검사가 서버 측 유효성 검사 만 보충해야한다는 것을 잊지 마십시오.

. 이 데모를 실행하기 전에이 이벤트 핸들러를 정의해야합니다. 여기에 webix 메시지 상자를 사용하여 입력 한 내용에 대한 사용자 피드백을 제공합니다.

이 코드는 webix getValues ​​메소드를 사용하여 myform의 ID와 함께 양식에서 삽입 된 데이터를 도출 한 다음 json.stringify ()를 사용하여 JSON 문자열로 변환합니다. 글쎄, 모든 것이 준비되었고 결과를 확인할 수 있습니다 :

install-package Webix

데이터를 삽입하고 제출 버튼을 누른 후 메시지가 표시됩니다.

bower install webix

여기 데모는 다음과 같습니다 Codepen에서 sitepoint (@sitepoint)의 펜 nnbgwm을 참조하십시오 모든 것이 잘 작동하는 것 같습니다. 이제 더 흥미로운 것을 추가합시다.

다중 선택 및 제안 다른 양식 컨트롤을 사용하면 여러 항목을 선택하거나 제안을 사용할 수 있습니다. 나에 관해서는, 그들 중 가장 흥미로운 것은 멀티 콤보입니다. 이것은 간단하지만 직관적 인 인터페이스를 통해 입력 필드에 대한 여러 값을 선택할 수있는 컨트롤입니다. 참고 : 최근 Webix 릴리스 (2016 년 4 월 26 일)는 멀티 콤보 제어가 어떻게 작동하는지에 대한 변화를 보았습니다. 이제 webix pro 버전으로 만 사용할 수 있습니다 (유료 제품)

개발자가 이력서를 생성하는 데 도움이되는 페이지를 만들고 싶다고 상상해보십시오. 다음 필드를 포함 할 수 있습니다

사용자가 둘 이상의 프로그래밍 언어를 알기를 기대하기 때문에 그러한 언어 목록을 작성하고 멀티 콤보 구성 요소를 사용하여 제시 할 수 있습니다. 다음은 다음과 같은 모습의 예입니다

친숙한 속성 외에도 버튼 속성과 제안 속성을 사용하고 있습니다. 버튼 속성은 선택을 확인하기 위해 버튼을 생성하는 반면 제안 속성은 멀티 콤보에 표시 할 항목의 소스를 정의합니다. 이 예에서는 데이터 속성을 사용하여 배열의 이름과 템플릿 속성을 지정하여 표시 할 값을 지정합니다. 파일로의 경로를 설정하는 것도 가능할 것입니다 (예 : "Path/to/File/Data.js")는 위와 같이 T를 수행하는 것이 큰 소스에서 다른 데이터 배열을 추출하려는 경우 더 나은 옵션입니다. . 작동 방식을 확인해 봅시다. 텍스트 필드를 클릭하면 드롭 다운 목록이 나타납니다.

당신은 그것을 스크롤하고 원하는 항목을 선택하거나 제안을 좁히기 위해 입력을 시작할 수 있습니다.

이 특정 예제 양식은 선택한 항목과 일치하는 신분증을 반환합니다.

이 예제의 데모는 다음과 같습니다 멀티 콤보의 대안으로 GridSuggest를 확인하고 Dataview 제안 구성 요소를 확인할 수 있습니다.

트리 위젯을 양식 요소로 사용합니다 webix는 텍스트 필드, 버튼 및 확인란과 같은 기존 양식 요소로 제한하지 않습니다. 좋아하는 위젯을 양식 내에 배치 할 수 있습니다. 예를 들어 트리 위젯을 살펴 보겠습니다. 처음에는 양식 제어로 설계되지 않았기 때문에이 요소에 사용할 수있는 setValue 및 getValue 메소드가 없습니다. 그러나이 구성 요소에 대한 값을 반환하거나 설정할 수 있으려면 이러한 방법이 필요합니다. 그래서 우리는 무엇을 할 수 있습니까? 운 좋게도 우리를 도울 수있는 protoui 방법이 있습니다. 그것은 기존의 견해를 기반으로 새로운 견해를 만들어 낼 수 있습니다.

시도해 봅시다 :

위 코드에서는 FormTree라는 새로운보기를 작성합니다. 그런 다음 ID 값을 설정하고 얻을 수있는 두 가지 새로운 방법을 정의하고 있습니다. 마지막으로, 우리는이 새로운 견해의 기초로 트리 위젯을 사용하고 있습니다.

이제 몇 가지 데이터를 만들어 봅시다 :

평소와 같이 새 요소를 양식에 추가 할 수 있습니다.

우리는 여기에 몇 가지 새로운 속성을 소개합니다. 템플릿 속성은 트리 노드에 확인란을 추가하고 Threestate 속성은 3 상태 확인란을 가능하게합니다. 다음은 다음과 같은 확인란입니다

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="./codebase/webix.css"</span>></span>
</span><span><span><span><script</span> src<span>="./codebase/webix.js"</span>></span><span><span></script</span>></span>
</span>

사용자가 상위 노드를 확인/선택 취소하면 부모 노드와 모든 자식 노드 (각 둥지 레벨)가 확인/확인되지 않은 채로 확인됩니다. 사용자가 자식 노드를 확인/선택 취소하면 개별 자식 노드 만 확인/선택 해제됩니다.

3- 상태 확인란을 사용하는 경우 하나의 작은 문제에주의를 기울여야합니다. 확인란을 선택하면 webix는 트리를 다시 렌즈합니다. 키보드를 사용하여 양식을 채우기로 결정한 경우, space >를 푸시하여 확인란의 선택 (Chrome과 같은 WebKit 기반 브라우저의 경우)을 전환 할 수 있습니다. 초점이 상실 될 수 있습니다. 'll 양식의 시작 부분에서 탭을 시작했습니다.

행복하게도 이에 대한 해결 방법이 있습니다. ON 속성을 사용하여 새 핸들러를 트리에 부착 할 수 있습니다. 특정 트리 항목을 선택할 때 해고되는 OniTemCheck 이벤트와 함께 사용합니다. 몇 가지 추가 방법을 사용하여 초점을 안전하게 유지할 수 있습니다.

<.> 이것은 작동해야합니다. 그러나 다른 문제는 다음과 같습니다. WebKit은 탭하는 동안 확인란을 표시하지 않습니다. 이에 대응하기 위해 일부 CSS 코드를 사용하여 집중 확인란에 개요 또는 상자 그림자를 추가 할 수 있습니다. 예는 다음과 같습니다.

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="http://cdn.webix.com/edge/webix.css"</span>></span>
</span><span><span><span><script</span> src<span>="http://cdn.webix.com/edge/webix.js"</span>></span><span><span></script</span>></span>
</span>

이 모든 것을 제자리에두면

제출

버튼을 클릭하여 수제 방법이 작동하는지 확인할 수 있습니다.

nuget <span>install Webix
</span>

그렇습니다. ID가 성공적으로 제출되었습니다 여기 에서이 양식을 확인할 수 있습니다 Codepen에서 sitepoint (@sitepoint)의 펜 Anjyjr를 참조하십시오 멀티 탭 및 다중 단계 양식 사용자로부터 많은 양의 데이터를 수집 할 계획이라면 양식을 작은 부품으로 분리 할 수 ​​있습니다. 두 가지 가능성을 살펴 보겠습니다. 다중 탭 로 구성된 양식과 데이터를 단계별로 삽입 할 수있는 양식입니다. tabview 구성 요소

tabview 구성 요소는 탭으로 분리 된 요소 모음을 생성하여 사용자가 그 사이를 전환 할 수 있습니다. 단일 요소를 tabview 컨텐츠로 사용하거나 원하는 요소를 포함하는 행과 열의 조합을 정의 할 수 있습니다. 예는 다음과 같습니다.

이 접근법의 주요 아이디어는 양식을 구획화하는 것입니다 (따라서 사용자가 더 잘 관리 할 수있게 함). 그러나 전체 양식과 관련된 구성 요소 (예 : 제출 버튼 또는 "ICCEPT"확인란)는 TabView 구성 요소 외부에 배치해야한다는 것을 기억해야합니다. 예를 들면 : 탭 형식을 만드는 데 필요한 전부입니다. 아래 결과를 확인할 수 있습니다 이 접근법에 추가 된 장점은 이러한 부품이 하나로 작동하도록 추가 코드를 추가 할 필요가 없다는 것입니다. TabView 구성 요소를 양식에 넣고 모든 필드에 이름 속성을 추가하면 삽입 된 모든 값을 얻을 수 있습니다. 제출 버튼을 클릭하면 다음을 확인합니다

조금 지저분 해 보이지만 우리의 데이터입니다.

키보드 접근성

의도가 많은 수의 탭을 사용하려는 경우 탭

키를 사용하여 간격을 전환하려면 탭 표시 줄 내에서 버튼을 사용할 수 있습니다. 이 방법을 사용하면 탭 내비게이션 순서에 탭을 추가 할 수 있습니다. 헤더 속성을 변경하기 만하면됩니다.

이 버튼을 기본적으로 보이게하려면 일부 CSS 코드를 추가해야합니다.

다음 데모에서는 데이트 피커도 사용합니다. 사용자가 키보드를 통해 (현재) 상호 작용할 수는 없지만 사용자가

return

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="./codebase/webix.css"</span>></span>
</span><span><span><span><script</span> src<span>="./codebase/webix.js"</span>></span><span><span></script</span>></span>
</span>

에 닿을 때 나타나야합니다. 유용한 시각적 원조를 제공합니다.

. 이를 달성하는 한 가지 방법은 핫키 속성을 사용하는 것입니다. 그러나 여기에 당신이 깨달아야 할 것이 있습니다. 이 속성은 키를 단일 페이지 요소에 바인딩하려면 아무런 문제없이 작동합니다. 그러나 우리 양식에는 두 개의 데이트 피커가 있습니다. 따라서 AddHotkey 메소드를 사용하여 모든 DatePickers와 함께 작동하는 새 핸들러를 만들어야합니다.

당신은 다음 데모 에서이 모든 것이 함께 작동하는 것을 볼 수 있습니다 :

. Codepen에서 sitepoint (@SitePoint)의 펜 ZWJJMJ를 참조하십시오 대안으로, 당신은이 과제에 아코디언을 사용할 수 있습니다.

. multiview component

멀티 뷰 구성 요소를 사용하면 다른 요소를 볼 수있는 일련의 요소를 만들 수 있습니다. 탭을 사용하여 멀티 뷰 영역 사이를 전환 할 수 있지만 멀티 스텝 양식을 작성하는 데 관심이 있으므로 버튼을 추가하여 다양한 단계를 통해 사용자를 안내해 드리겠습니다.

. 우선,

next

및 back 버튼을 만들려면 두 가지 함수를 만들어야합니다.

다음 함수는 webix의 getParentView 메소드를 사용하여 버튼을 클릭 한 셀에 대한 참조를 얻습니다 (즉, 현재 표시중인 셀). 그런 다음 Multiview 구성 요소 (FormContent)의 ID 값을 사용하여 다음에 오는 셀을 계산합니다. 다음 셀이 있으면 쇼 메소드를 사용하여보기로 전환됩니다. 백 기능은 백 메서드 스위치를 사용하여 멀티 뷰를 이전의 활성보기 로 사용합니다. multiview 요소는 이전에 tabview 요소를 정의한 것과 동일한 방식으로 정의 할 수 있습니다. 그러나 이번에는 모든 셀의 맨 아래에 추가 행을 배치해야합니다. 이 행에는 제어 버튼이 포함됩니다. 표시 할 버튼이 하나만 있으면 (첫 번째 셀에서와 같이) 빈 객체를 포함합니다. 이것이 어떻게 생겼는지 보자 이제 우리가 한 일을 살펴 보겠습니다 우리가 다음

버튼을 클릭 한 후에는 양식의 다음 부분이 나타납니다.

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="./codebase/webix.css"</span>></span>
</span><span><span><span><script</span> src<span>="./codebase/webix.js"</span>></span><span><span></script</span>></span>
</span>

그리고 모든 것이 예상대로 작동하는지 확인해 봅시다 :

그렇습니다! 마지막 데모는 다음과 같습니다 Codepen에서 sitepoint (@sitepoint)의 펜 Anjldo를 참조하십시오

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="http://cdn.webix.com/edge/webix.css"</span>></span>
</span><span><span><span><script</span> src<span>="http://cdn.webix.com/edge/webix.js"</span>></span><span><span></script</span>></span>
</span>

결론 이 튜토리얼에서 나는 webix가 복잡하면서도 세련되고 접근하기 쉬운 양식을 생산하는 데 얼마나 쉬운지를 보여주었습니다. 이 프레임 워크는 강력한 위젯을 손가락 끝에 배치하고 상자 밖에서 양식 구성 요소로 사용되지 않더라도 Protoui 메소드를 사용하여 동작을 재정의하는 것은 매우 간단합니다.

. 프로젝트에서 webix를 사용하고 있습니까? 이 튜토리얼이 당신이 그것을 가져 오도록 영감을 주었습니까? 아래 의견에 알려주십시오.

webix 프레임 워크에 대한 자주 묻는 질문 (FAQ) webix 프레임 워크는 무엇이며 어떻게 작동합니까?

webix는 개발자가 풍부하고 고성능 웹 애플리케이션을 만들 수있는 강력한 JavaScript UI 라이브러리입니다. 데이터 테이블, 차트, 양식 등을 포함하여 100 가지가 넘는 완전히 사용자 정의 가능한 위젯을 제공합니다. Webix는 개발자가 JavaScript를 사용하여 UI 구성 요소를 만들 수 있도록하여 모든 웹 응용 프로그램에 쉽게 통합 할 수 있습니다. 이 프레임 워크는 간단하고 직관적 인 API와 함께 사용하기 쉽도록 설계되었으며 광범위한 브라우저와 장치도 지원합니다.

webix를 시작할 수있는 방법

to. Webix를 시작하면 먼저 공식 webix 웹 사이트에서 라이브러리를 다운로드해야합니다. 일단 라이브러리가 있으면 HTML 파일에 스크립트 태그를 추가하여 프로젝트에 포함시킬 수 있습니다. 여기에서 webix API를 사용하여 UI 구성 요소를 만들 수 있습니다. 공식 webix 문서는 시작하는 데 도움이되는 풍부한 정보와 예제를 제공합니다.

webix의 주요 기능 중 일부는 무엇입니까?

webix는이를 만드는 다양한 기능을 제공합니다. 웹 개발을위한 강력한 도구. 주요 기능 중 일부에는 100 개가 넘는 UI 위젯, 간단하고 직관적 인 API, 광범위한 브라우저 및 장치를 지원하며 복잡한 UI 레이아웃을 만들 수 있습니다. 또한 webix는 데이터 바인딩, 이벤트 처리 및 Ajax 지원과 같은 여러 고급 기능을 제공합니다.

webix는 다른 JavaScript UI 라이브러리와 어떻게 비교됩니까?

webix는 여러 가지 방법으로 다른 JavaScript UI 라이브러리. 첫째, 대부분의 다른 라이브러리보다 훨씬 더 많은 UI 위젯을 제공하여 개발자가보다 복잡하고 기능이 풍부한 응용 프로그램을 만들 수 있습니다. 둘째, webix는 사용하기 쉽도록 설계되었으며 간단하고 직관적 인 API가있어 시작하기 쉽습니다. 마지막으로, webix는 빠른 렌더링 시간과 효율적인 메모리 사용으로 탁월한 성능을 제공합니다.

다른 JavaScript 프레임 워크와 함께 webix를 사용할 수 있습니까?

예, webix는 다른 JavaScript 프레임 워크와 함께 사용할 수 있습니다. Angular, React 및 vue.js. 이를 통해 개발자는 응용 프로그램에서 여러 프레임 워크의 강점을 활용할 수 있습니다. 예를 들어, 강력한 데이터 바인딩 기능에 Angular를 사용할 수 있으며, UI 위젯의 풍부한 선택에 webix를 사용하는 동안 Webix는 모바일 개발에 적합합니까?

예, Webix는 완전히 반응이 있습니다. 휴대 전화 및 태블릿을 포함한 광범위한 장치를 지원합니다. 따라서 모바일 친화적 인 웹 애플리케이션을 만들고자하는 개발자에게는 훌륭한 선택이됩니다.

내 webix 응용 프로그램의 모양을 사용자 정의 할 수 있습니까?

webix는 응용 프로그램의 모양을 사용자 정의하는 여러 가지 방법을 제공합니다. CSS를 사용하여 UI 구성 요소를 스타일링하거나 Webix에서 제공하는 미리 만들어진 많은 스킨 중 하나를 사용할 수 있습니다. 또한 webix를 사용하면 스킨 빌더 도구를 사용하여 고유 한 사용자 정의 스킨을 만들 수 있습니다.

webix에서 사용할 수있는 지원은 무엇입니까?

webix는 개발자를위한 다양한 지원 옵션을 제공합니다. 공식 webix 웹 사이트는 풍부한 문서와 예제뿐만 아니라 질문을하고 커뮤니티의 도움을받을 수있는 포럼을 제공합니다. 또한 Webix는 Webix Development Team에 직접 액세스 할 수있는 프리미엄 지원 패키지를 제공합니다.

Webix는 무료로 사용할 수 있습니까?

Webix는 라이브러리의 무료 및 유료 버전을 모두 제공합니다. 무료 버전에는 제한된 위젯 및 기능이 포함되어 있으며 유료 버전은 프리미엄 지원뿐만 아니라 전체 범위의 위젯 및 기능에 대한 액세스를 제공합니다.

webix에 대해 더 자세히 알아 보는 방법 . webix에 대해 더 많이 배우는 가장 좋은 방법은 공식 webix 웹 사이트를 방문하여 문서, 예제, 튜토리얼 등을 포함한 풍부한 정보와 리소스를 찾을 수 있습니다. Github의 webix 커뮤니티에 가입하여 추가 리소스를 찾고 다른 webix 개발자와 연결할 수 있습니다.

위 내용은 webix 프레임 워크로 양식 작성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!