2009-05-04 6 views
1

현재 일부 사무실의 기존 시스템을 대체 할 웹 응용 프로그램을 만들고 있습니다. (FoxPro에있는 것처럼 아주 오래되었습니다.)빠른 웹 UI 개발

내 현재 작업은 마우스를 사용하지 않으려 고하는 것처럼 매우 데스크톱과 같은 빠른 UI를 개발하여 데이터를 상당히 빠르게 캡처 할 수 있으며 수행합니다. 거의 보지 않고도. 하나 개의 필드와 데이터를 하나의 목록에서 Enter 키를 눌러 그들이 현재의 충전 완료되면 다음 필드로 점프, 이동하려면 화살표 키를 사용하여

그들을 선택하기 마련 :

그들은 같은 것들을 기대 등, (다시 이동하려면 화살표 키를 사용)

나는 그것을 완수 할 수있는 기간이 매우 짧기 때문에이 프로젝트에 도움을 요청했지만, 이후이는, 매우 쉽게 자바 스크립트로 끝낼 수

어떤 라이브러리, 컨트롤 또는 유사한 도구를 사용하면이 작업을 신속하게 수행 할 수 있습니까?

+0

더 구체적/간결하게 질문을 트리밍 해보십시오. –

답변

1

필요한 브라우저 지원에 대해 언급하지 않았습니다. 이 웹 응용 프로그램은 꽤 많은 키보드 이벤트를 잡아서 처리해야하는 것처럼 들립니다.

다른 브라우저는 이벤트를 다르게 처리합니다. 그래서, 당신은 그것을 명심해야 할 것입니다.

예, 자체 Key 처리 JavaScript를 롤오버하는 것은 비교적 간단하지만 JQuery, Prototype 또는 Dojo와 같은 무료 공개 프레임 워크를 사용하는 것이 좋습니다. (SO 커뮤니티는 JQuery를위한 특별한 소프트 코너를 갖고있는 것처럼 보이지만, 이것에 대해 나를 믿어 라!) 나는 그들 모두를 확인하고 자신 만의 것을 결정할 것이다.

필요한 응용 프로그램 기능을 제공하는 미리 제작 된 상업용 또는 기타 사용자 지정 컨트롤을 살펴볼 수도 있습니다. 예를 들어, 스프레드 시트 종류의 데이터 입력 인터페이스가 필요한 경우 많은 컨트롤을 웹에서 사용할 수 있습니다.

+0

파이어 폭스와 IE, 어쩌면 파이어 폭스를 방정식에서 벗어날 수도있다. (나는 그것을 좋아하지 않지만이 소프트웨어를 사용하는 사람들은 그것을 이해하지 못할 것이다.) 나는 jQuery를 사용할 것이고, 나는 그 프레임 워크도 좋아한다. –

4

JQuery를 사용하십시오 ... 그리고 크로스 브라우저 DOM 처리를 잊어 버리십시오. JQuery는 VS.Net에서 큰 지원을합니다.

0

나는 Dojo를 권장한다 - JQuery (Google의 조회수 : dojo 13 million, jquery 13.4)만큼 대중적이지는 않다는 것을 깨달았다. 그러나 그것은 더 잘 설계되고 설계되었다.

+0

이유는 무엇입니까? – eyelidlessness

+0

알렉스는 "더 잘 설계되고 설계 되었기 때문에"라고 말했습니다! : P – Cerebrus

+0

왜 ?? 조금 빨라질 수도 있지만 (slickspeed로 벤치마킹) IE8에서는 실제로 작동하지 않습니다. slickspeed (1.1.1)에서 사용하는 버전은 IE8에서만 오류가 발생합니다. 현재 버전은 여전히 ​​IE8에 몇 가지 버그가 있습니다. JQuery가 정상적으로 작동합니다. – SvenFinke

0

많은 이전 FoxPro 응용 프로그램은 사용자 생산성을 위해 최적화되었습니다. 필자는 오랫동안 소프트웨어 도구 평가 매개 변수로 사용 된 "사용자 생산성"을 본 적이 없다고 생각합니다. 특히 브라우저 기반 응용 프로그램에는 적합하지 않습니다.

먼저 측정 할 방법이 필요합니다. 분당 키 입력 및 분당 처리되는 양식은이를 수행하는 꽤 일반적인 방법이었습니다. 그러나 그것에 AJAX를 던지면 속도가 느려질 것입니다. 자바 스크립트는 지금은 고속 실행 언어가 아닙니다. 심지어 크롬.

최상의 베팅은 아마 플렉스와 실버 라이트입니다.

+0

측정과 달리 사용자가 앱을 느리게하지 않아야한다고 생각해야합니다. 그게 전부 야. 마우스를 많이 사용하면 앱을 사용하고 싶지 않을 것입니다. –

+0

쥐에 대해서는 마찬가지입니다. 그래서 내가 한 일을 썼다. Silverlight와 Flex 모두 우수한 키 스트로크 처리 기능을 제공하며 브라우저보다 훨씬 우수하고 일관성이 있으며 자바 스크립트보다 훨씬 빠르게 실행됩니다. – dkretz

0

탭 및 시프트 탭을 사용하여 돌아가는 방법을 가르칩니다. Enter는 "다음"이 아닌 "입력"정보입니다. 양식의 탭 색인을 실제로 인식하면 사용자에게 잘 전달되어야합니다.

DOS 및 텍스트 기반의 모든 끔찍한 규칙을 따르는 시스템을 jury-rigging하는 대신 현재에 가져 오는 인터페이스를 제공합니다. 시스템을 웹 기반 웹 시스템으로 변환합니다.

+0

IE6에서 웹 사이트를 테스트하지 않고 현재 브라우저를 업데이트하라는 메시지를 표시하지 않는 것과 같습니다. 사용자가 이전 버전에 익숙해 졌기 때문에 행동을 변경하도록 사용자에게 알릴 수는 없습니다. –

3

는 "Enter 키를 눌러에 다음 필드"여기 코드, 당신이 몇 분을 절약하려면 다음의 ExtJS (http://extjs.com/)에 대해 잘 알고

$.fn.focusNextInputField = function() { 
    return this.each(function() { 
     var fields = $(this).parents('form:eq(0),body').find('button,input,textarea,select'); 
     var index = fields.index(this); 
     if (index > -1 && (index + 1) < fields.length) { 
      this.blur(); 
      fields.eq(index + 1).focus(); 
     } 
     return false; 
    }); 
}; 


$("button,input,textarea,select").keydown(function(event) { 
    switch (event.keyCode) { 
     case 13: $(this).focusNextInputField(); 
      break; 
    } 
}); 
1

있습니까 (당신은 JQuery와 상점이 필요)?

저는 이것이 실제 웹 응용 프로그램 프레임 워크라고 생각합니다. JQuery는 (아주 좋은) 많은 기능을 가진 '라이브러리'와 더 비슷합니다.