삼성 TV Tizen 웹 앱에 적합한 UI를 만드는 방법은 무엇인가요?

Tizen 개발자 사이트에 대한 정보가 너무 많아서 모바일 및 웨어러블 용으로 많이 쓰이기 때문에 삼성 Tizen TV 웹 앱을위한 좋은 반응 형 UI를 만드는 방법을 찾기가 어렵습니다. 현재 내 index.html을 간단히 다음과 같습니다 당신이 볼 수 있듯이삼성 TV Tizen 웹 앱에 적합한 UI를 만드는 방법은 무엇인가요?

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> 
    <meta name="description" content="Tizen TV basic template generated by Samsung TV Web IDE"/> 

    <title>Tizen TV Web IDE - Tizen TV - Tizen TV basic Application</title> 

    <link rel="stylesheet" type="text/css" href="css/style.css"/> 
    <script src="jquery-3.2.1.js"></script> 
    <script src="js/main.js"></script> 
</head> 

<body> 
    <h1>Enter Web Server Url</h1> 
    <div> 
    <form id="webServerUrl" name="webServerUrl"> 
     <!-- <p>IP Address</p><br> --> 
     <input type="text" id="serverUrl" name="serverUrl" placeholder="Enter Web Server IP Address" class="inputBox"> 

     <button class="submitButton">Submit</button><br><br><br> 
     <button class="showGlobalUrlValue">Show Web Server Url</button> 
    </form><br><br><br> 
    </div> 

    <h1>Log In</h1> 
    <div> 
    <form id="signIn" name="signIn"> 
     <!-- <p class="regularText">Username</p> --> 
     <input type="text" id="username" name="username" placeholder="Enter Username" class="inputBox"> <br><br> 

     <!-- <p class="regularText">Password</p> --> 
     <input type="password" id="password" name="password" placeholder="Enter Password" class="inputBox"> <br><br> 

     <button class="submitUserAndPass">Submit</button> 
    </form> 
    </div> 

    <button class="doActivationButton">Perform Activation</button> 

</body> 
</html>

, 이것은 내가 지금 웹 응용 프로그램 개발을 배우고 있기 때문에, 아주 기본적인 것입니다. 마우스를 TV에 연결했지만 리모컨으로는 할 수 없다면 앱을 잘 사용할 수 있습니다. 강조 표시가없고 키 바인딩을 수행하지 않았기 때문에 요소를 탐색하는지 확인할 수 없습니다.

누군가가 개발 가이드의 관련 섹션으로 나를 안내 할 수 있는지 또는 누구 에게든지 좋은 Tizen TV 앱의 코드 예제가 있는지 궁금합니다. 고맙습니다.

편집 : 나는 거기 TAU라는 UI 프레임 워크입니다 만 제공되는 글 머리 기호 목록에서 https://developer.tizen.org/development/guides/web-application/user-interface/tizen-advanced-ui

그러나이 사이트에 첫 번째 단락에서 언급 한대로, 만 사용할 모바일 및 착용 할 수있는 응용 프로그램입니다 참조를

TAU는 착용 할 수있는, 모바일 및 TV 장치 TV 애플리케이션에

그래서 작동 하는가 여부에 최적화되어 언급하고?

출처

2017-12-21 Jvalant Dave

을 처리

을 burakk가 말했듯이, 카프는 마우스 입력에서 탐색을 구현하는 좋은 라이브러리입니다 jQuery를 사용하면 더 좋습니다. Tizen Studio는 실제로 jQuery + Caph 라이브러리가있는 프로젝트를 만듭니다.

그것은 사용하기 쉽습니다 :

1.Link

<!-- include the CAPH Package for jquery --> 
<script src="lib/caph/3.1.0/caph-jquery.min.js" type="text/javascript"></script>

2.Create 모든 HTML 요소를 (I 2를 가리 키도록 이동 말했듯이 템플릿을 선택한 경우) 프로젝트에 라이브러리 그들에게 속성 "포커스"를 추가 : 당신이 볼 수있는

<div focusable>

3.And

이 컨트롤러를 쓴 카프 요소가 많은 국가가 여기 :

$(document).ready(function(){ 

    $.caph.focus.activate(function(nearestFocusableFinderProvider, controllerProvider) { 

     controllerProvider.onFocused(function(event, originalEvent) { 
      $(event.currentTarget).css({ 
       border: '3px solid red' 
       }); 
      }); 

     controllerProvider.onBlurred(function(event, originalEvent) { 
      $(event.currentTarget).css({ 
       border : '3px solid transparent' 
      }); 
     }); 
    }); 
});

이

이 코드는 초점 요소 (onFocused)에 빨간색 테두리를 추가 할 때, 그리고 투명으로 설정됩니다 : 당신이 시작하려면 http://developer.samsung.com/onlinedocs/tv/caphdocs/main.html?type=jquery&doc=tutorial&p1=7

는하지만, 당신의 간단하고 메인 컨트롤러는해야처럼 보인다 요소 (onBlurred)에 포커스를 둡니다.

CAPH에 대해 알아야 할 많은 것들이 있지만,이 짧은 소개가 마우스 대신 키 화살표를 사용하여 탐색하길 바랍니다.

도 여기에 자세한 내용이 있습니다 : http://developer.samsung.com/tv/develop/legacy-platform-library/API00007/index

출처

2017-12-30 21:48:06 Lotan

Caph를 살펴 봤습니까?

http://developer.samsung.com/tv/develop/extension-libraries/caph-30

카프

는 TV 용 웹 UI 프레임 워크이다. Caph를 사용하여 고성능 웹 앱을 개발할 수 있습니다. 그것은 TV 용으로 설계된 많은 UI 구성 요소를 가지고 있는데이 TAU 기능에 대해 알고 있지만하지 않는 탐색, 초점 등

출처

2017-12-23 20:52:24 burakk

이 링크는 질문에 대답 할 수 있지만, 여기에 해답의 본질적인 부분을 포함하고 참조 할 수 있도록 링크를 제공하는 것이 낫다는. 링크 된 페이지가 변경되면 링크 전용 답변이 유효하지 않게 될 수 있습니다. - [From Review] (리뷰/저품절 게시물/18340305) – bcsb1001

삼성 TV Tizen 웹 앱에 적합한 UI를 만드는 방법은 무엇인가요?

답변

관련 문제