Languages

Menu
Sites
Language
gear s2 popupscroll 과 pagescroll 문의

안녕하세요.

타이젠으로 gear s2앱을 개발중에 있습니다.

현재 Tizen SDK Version : 2.3.1_RC23 사용 중이며, 2.3.1에서 샘플예제(UIComponents)를 참고하면서 개발하고 있습니다. 

gear s2에서는 버클이라는 것으로 스크롤 기능 이용할 수 있는 데, 샘플예제에서는 리스트에 대한 스크롤이 circle-helper 나 스크립트에 잘 구현 되어있습니다.

그런데 팝업이나 페이지에 대한 스크롤 기능에 관한 것을 샘플예제나 api에서 못 본 것 같고... tizen 2.3.1 release notes에 Changed Features 부분에서  

tau.defaults.enablePageScroll and tau.defaults.enablePopupScroll 를 사용하라고 해서 tau.js에서 enablePopupScroll을 찾아가지고 해보는데 어떻게

해야될 지 잘 모르겠습니다. 어떻게 해야할까요? 그리고 한가지 더 궁금한데 리스트를 사용하면 리스트 부분을 로드할때마다 상단(맨처음 리스트부분)으로

이동 하는 방법이 있나요?  계속 마지막에 두었던 부분을 불러와서...이것도 어떻게 해야될까요? 알려주시면 감사하겠습니다.

Edited by: myeong jin Tak on 14 Sep, 2015
List

Responses

8 Replies
daniel kim

안녕하세요....

Gear S2의 bezel을 이용한 scroll을 말씀하시는 것 같습니다.

기본 template으로 생성한 wearable 어플에서 pop-up, page에 대한 bezel scroll이 안먹히면 UIComponents sample에 들어있는 js/circle-helper.js를 그대로 갖고 와서 현재의 circle-helper.js에 그대로 overwrite해보시기 바랍니다. 다른 설정없이 bezel을 돌리면 scroll이 되는 것 같습니다.

myeong jin Tak

답변 감사드립니다.

그런데 샘플예제를 실행해봐도 리스트는 다 스크롤이 되고  팝업이나 페이지쪽에 bezel을 이용한 스크롤은 적용이 안되있는데...답변해주신대로 해봐도 팝업이나, 페이지는 적용이 안되네요. 샘플예제(UIComponents sample)의 circle-helper의 소스인데 리스트만 적용되게 되있어 보이는데... 이 circle-helper의 소스를 overwirte하는게 맞는거죠? 아니면 다른건가요? 

    if (tau.support.shape.circle) {
		document.addEventListener("pagebeforeshow", function (e) {
			page = e.target;
			elScroller = page.querySelector(".ui-scroller");
			if (elScroller) {
				list = elScroller.querySelectorAll(".ui-listview");
				if (list) {
					len = list.length;
					for (i = 0; i < len; i++) {
						listHelper[i] = tau.helper.SnapListStyle.create(list[i]);
					}
					len = listHelper.length;
					if (len) {
						for (i = 0; i < len; i++) {
							snapList[i] = listHelper[i].getSnapList();
						}
					}
				}
				elScroller.setAttribute("tizen-circular-scrollbar", "");
			}
		});

 

daniel kim 
if (tau.support.shape.circle) {
     document.addEventListener("pagebeforeshow", function (e) {
   page = e.target;
   elScroller = page.querySelector(".ui-scroller");
   if (elScroller) {
    list = elScroller.querySelectorAll(".ui-listview");
    if (list) {
     if (page.id !== "pageMarqueeList" && page.id !== "pageTestVirtualList" && page.id !== "pageAnimation") {
      len = list.length;
      for (i = 0; i < len; i++) {
       listHelper[i] = tau.helper.SnapListStyle.create(list[i]);
      }
      len = listHelper.length;
      if (len) {
       for (i = 0; i < len; i++) {
        snapList[i] = listHelper[i].getSnapList();
       }
      }
     }
     elScroller.setAttribute("tizen-circular-scrollbar", "");
    }
   }
  });

 

안녕하세요..

Posting해주신 코드로도 저는 정상동작하는 데, Gear Early Access Program을 통해 배포된 SDK를 사용하시는 것 같습니다.

아래 링크를 통해 Tizen SDK 2.3.1을 받으시면 될 것 같습니다. 정식 배포가 된듯 합니다.

    https://developer.tizen.org/development/tools/download?langswitch=en

circle-helper.js도 약간 다른 듯하지만 올려주신 코드를 사용해도 bezel로 scroll이 되니 정식 버전으로 해보시는 건 어떨까 합니다.

위에 posting한 것은, 제가 보고 있는 UIComponent sample의 circle-helper.js입니다.

 

 

 

 

 

myeong jin Tak

답변 감사드립니다. 

정식버전으로 새로 다운받아서 설치해서 UIComponents 프로젝트 생성해서 에뮬로 실행시켰는데 역시나 같네요...리스트들은 다 정상작동하네요...포스팅해주신 circle-helper.js도 다 같은데...예를 들어 UIComponents 실행해서 보면 맨 상단에 Header가 나오는데 클릭해서 Header 들어가면 Header페이지가 나오자나요. 스크롤이 안되는데 혹시 되시나요? 베젤을 아무리 돌려도 안되네요. 어떻게 해야할까요?  page나 popup에 스크롤이 다 안되는거 같아요.

daniel kim

안녕하세요...

다시 해보니 list에 대해서만 scroll이 되는 거였네요 :(  말씀하신 대로 page안에서는 안되는 것이 맞습니다.

enablePageScroll에 대해서는 아래 설명만 있고 다른  부연설명은 없는 것 같습니다.

            Only the content becomes scrollable when enablePageScroll is set "false". But if you set it to "true", the page(which may include header, content and footer) becomes scrollable.

 

myeong jin Tak

네 감사합니다.

저도 여기저기 찾아봤었는데 Only the content... 이 문구는 본적이 없었는데 어디서 볼 수 있나요?..popupScroll 또한 마찬가지겠죠?

myeong jin Tak

네 감사합니다.

저도 여기저기 찾아봤었는데 Only the content... 이 문구는 본적이 없었는데 어디서 볼 수 있나요?..popupScroll 또한 마찬가지겠죠?

daniel kim

안녕하세요.

enablePageScroll에 대한 설명은 SDK의 Help page의 아래 위치에 나와있습니다. enablePopupScroll도 마찬가지일 것으로 생각됩니다.

         API References -> Web Application -> Tizen Web UI Framework Reference -> Wearable Web -> Application Page Layout