윈도우 화면을 제하고 아이콘을 제외한 기능 구현 영상을 따로 올렸음.

미구현기능

OPEN TABLE -> 그리드상에서 데이처 추가/수정/삭제

해당 구현만 완료 된다면 큰 기능들은 얼추 마무리 될거 같다...

도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!

EXTJS 와 추가적으로 Spring framework 4 의 웹소켓 기능을 이용하여 FTP 테스트 영상을 만들어봤다

ㅎㅎ 빨리하고 싶은 마음은 가득하지만, 너무 아웃풋이 안나온다는.. ㅋㅋ

구현 기능

1. SFTP 접속 로그정보 기록

2,. 원격, 로컬 파일 탐색기 구현

3. 원격 -> 로컬 파일 다운로드

4. 로컬 -> 원격 파일 업로드

5. 새로고침 및 종료시 자동 sftp 세션종료 설정

    (GKSQL FOR ExtJS와 다른게 Connection을 계속 물수있어서 단일 커넥션이 아니다.)

추가 보안사항

1. 마우스 우클릭의 업/다운로드 기능

2. 폴더별 업/다운로드

[HD 화질로 보셔야 잘보이실겁니다~]

도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!

해당동영상은 PC 버전에 최적화 되어있습니다. 모바일로 보시기에는 잘 안보이실듯...

ExtJS 공부해볼까~ 해서 시작한 개인 프로젝트 GkSQL for ExtJS!!

타이틀이 마음에 안들지만... 그냥 제목이 생각나지 않아서 지음!

약 한달동안 걸려서 제작하였으나 아직도 버그 및 일부 기능들이 구현 하지 못하였다.

미구현 기능 (데이터 베이스 생성 , 뷰/함수/이벤트/프로시저..등 테이블관련 기능을 제외한 

나머지 기능)

로그인 기록 정보는 크롬브라우저의 web sql을 이용하여 CRUD 기능을 구현하였고

중간에 에디터는 codemirror 이라는 에디터를 이용하였다

해당 두가지의 아이템적용에 도움을 주신분은 나보다 먼저 해당 주제로 제작하고 계셨던  한국센차유저그룹의 Juwon Jeong 님의 블로그를 통해서 해결방법을 얻을수 있었다. 

그외의 기능들은 SQLYog를 토대로 기능을 구현하였다.

ExtJS 를 처음 접해본것은 ExtJS 3 버전일때 샘플용으로 본 것이었는데 그때는 JSON 기반이 무엇이고 어떻게 화면이 나오고 document문서는 어떻게 보는지 이해가 가지 않았는데...

4점대 버전이 나오면 서 다시 시작을 해보니 초반보다는 수월하게 진행을 할 수 있었다.

제일 맨처음 만든 것은 내가 봐도 너무 단순하고 초라했었다.

지금은 조금 나아지긴 하였으나;;; 

처음에는 extjs는 유료인대다 무거운걸로 인해서 부정적인 시선을 가지고 있었다.

jquery가 좀더 직관적이고 문법도 쉬워서 jquery를 추구하였으나 extjs는 웹쪽으로 erp? 프로그램같은것을 제작한다고 한다면 훌륭한 툴이 될수 있을거 같다.

extjs 라이센스정책이 영문인대다가 ;;; 어려운 내용들이 많아서 대략적으로는 무료로 사용자들에게 해당 프로그램을 배포하겠다? 한다면 모든 소스 공개!! Git hub인가 거기에 extjs 샘플 자료들이 많은거 같더라..

그리고 프로젝트단위 또는 솔루션 개발을 사용한다 하더라면 60-70만원정도 투자하는게... 나쁘지는 않은거 같다!

이제 원하는기능이 대략적으로 50-60%정도? 나온거 같다.. 

개발환경은 

Spring 3.x + JdbcTemplate

를 이용하였다.

커넥션을 계속무는거때문에.. mybatis를 이용하고 싶었으나... ㅠㅠ 

도무지 멀티커넥션을 못잡아서 지가 알아서 close해주는 jdbctemplate를 이용하였다... 

mysql에서 processlist를 해보면 싱글톤이라 그런지 한번 명령어 치고 커넥션을 닫아준다.. 

항상그렇듯 배움의 즐거움이 있는거 같다 ^____________________^ㅋㅋㅋ

* 참고로 설치 개떡으로 한 DB에는 사용할수가 없다....

   어느 특정 DB 서버로 테스트 한 결과 커넥션이 처음에 접속시 오래 걸리는 서버가 있었는데 싱글톤 방식이라 그 특정 DB에서는 테스트가 불가능했다... ㅠㅠ

도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!

jQuery의 핵심중 하나라고 생각하는 셀.렉.터!!!

셀렉터란 무엇인가 예를 들어서 id로 특정 값을 찾는거는 쉽죠..

class로 같은 명의 버튼이 여러개고 또 같은명의 class를 가진 text 태그가 여러개일경우!

특정이벤트 발생시 특정 태그를 찾아가는 서비스~ 라고 생각하시면 되실려나.. 저도 머리는 아는데 설명을 잘 못하겠습니다...

셀렉터 이벤트들도 많고...

http://api.jquery.com/category/selectors/

필요한 셀렉터들은 여기에 다 모여있습니다 ㅎㅎㅎ

기본적으로 parent() / find() / next() / prev() 태그들을 설명드릴수 있겠는대요

parent() = 현재태그를 감싸고 있는 부모를 찾는다

예제)

<div>

  <input type="button" id="btn" />

  <input type="button" id="btn2" />

</div>

$("#btn").parent() <-  이렇게 줄경우는  btn 아이디를 감싸고 있는 div 태그놈을 찾는것입니다.

find(id or class or input ...)  = 현재태그 안에 속하는 자식을 찾는다

예제)

<div id="prnt">

<input type="text" id="aaa" />

</div>

$("#prnt").find("#aaa") = prnt 아이디를 가진 div 태그가 감싸고 있는 자식들중 id값이 aaa인놈을 찾는다.

next() = 현재태그 다음 태그를 찾는다.

<input type="text" id="a" />

<input type="text" id="b" />

$("#a").next() = a 아이디를 가진 input 태그의 형제태그들중 a태그 바로 다음에 있는 태그를 찾는다.

그 태그는 ? id가 b를 가진 text 태그이군요

prev() = 현재태그 직전 태그를 찾는다.

이건 next반대로

<input type="text" id="a" />

<input type="text" id="b" />

$("#b").prev() = b 아이디를 가진 input 태그의 형제태그들 중 b 태그 바로 전에 있는 태그를 찾는다.

그 태그는 ? id가 a를 가진 text 태그이군요

기존에 했던 풀소스가 아니여서 이해가 안가시나요?

그럼 샘플자료를 보시죠

무조건 예제는 버튼 클릭이벤트를 시작으로!!

길이 길어지면 저역시 피곤해하는 타입이라 일괄처리로 예제를 만들었습니다!

소스랑 화면은 다음과 같고요

실행 결과네요 ?

동작은 일괄처리 버튼 클릭해서 각각의 parent / find / next / prev를 이용하여 console에 값들을 뽑았습니다 ㅎㅎㅎ

첫번째 콘솔값 설명

id btn이란 버튼을 시작으로 부모태그의 클래스값을 찍어봤습니다!

두번째 콘솔값 설명

id prnt 라는 div 태그를 시작해서 안에 들어있는 태그들중에 id가 aaa라는 태그의 value를 찍어봤습니다!

세번째 콘솔값 설명

id가 a인놈의 다음 태그의 value를 찍어봤습니다

마지막 콘솔값 설명

id가 b인놈의 이전 태그의 value를 찍어봤습니다.

한꺼번에 뿌려져서 헷갈리다 하시는분은! console.log가 총 4개있는데 하나씩만 적어서 출력해보세요

그럼 이해를 하실듯.... ????

끝 

도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!

프로젝트 진행중이라 많이 올려봐야 한두개네요;;

빨리빨리 글을 등록하고 싶지만... 바쁘다는 핑계로... ㅈㅅ;;

오늘 이벤트의 예제순서는~ 

1. 버튼을 클릭

2. 두번째 태그에 포커스 주기

3. 포커스가 주어진 상태에서 키보드의 이벤트 코드를 크롬(콘솔)에 찍어 볼것이다.

이번에도 소스 + 결과 화면부터 보고 가시죠..

이해 못하신다? 그럼 무한 반복~ 제가 해드릴수있는거는 답은 못드리지만 길은 드릴려고 하는 것입니다!

자 그럼 소스를 설명하자면~

위 -> 아래 -> onload 였죠?

html 소스를 화면에 뿌려줍니다.

onload로 가면~

id가 button인 놈에게 클릭이벤트를 줬네요? 주면 뭐가 반응 하게 되있나... 보자...

id가 txt2인놈에게 forcus() <---??? 모지? 포커스... 정확히 뭐하는 놈인지 모르니 패스~

그다음은

id가 txt2인 놈에게 keypress 이벤트 줬네요? 암튼 이벤트 동작하면 실행되는놈은

console.log e.which 아 어려워~~

샘플이나 실행해봐야 겄다

캡처에는 나오지 않지만 버튼 클릭해서 두번째 텍스트 태그에 깜빡깜빡 가게 되어있는 상태입니다.

그리고 깜빡이는 태그상태에서 123456을 입력하니까

크롬 console에 코드번호 : 숫자값

이렇게 나왔습니다.

소스랑 대입하면 아하~ 이해 가실듯...

button click 이벤트내에 기술되어있는 소스는

버튼 클릭하면 txt2 아이디 태그에 포커스를 주는 거고..

keypress 태그는

키보드 이벤트를 받는 거였군요!!!

이해 가셨나요? 이해 못하셨다면 연습연습!!

이벤트는 대략 적으로 여기에서 마무리 하고요 나머지 이벤트들이 많긴할텐데 다른 동작들이랑 연동하면서 사용할 예정입니다~

다른 이벤트들이 필요하신 분들이 계시다면

전에 알려드린

http://api.jquery.com/category/events/ 

jquery 이벤트 문서를 보시면서 공부하시길~

끝.

도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!