Building Blocks를 사용한 스마트폰 어플리케이션 UI

개요

Firefox OS의 어플리케이션 제작은 웹 페이지 기술을 사용하여 수행됩니다.따라서 설계는 HTML+CSS에서 수행됩니다.스크랩에서 스마트폰 애플리케이션과 같은 UI를 구현하기가 쉽지 않기 때문에 대부분의 경우 일부 프로그램 라이브러리로 UI를 구축한다.
Firefox OS용 UI 라이브러리에는 Building Blocks가 있습니다.이번에는 그 도서관을 대강 소개하겠습니다.
Building Blocks는 라이브러리 자체가 응용 프로그램의 소스 코드로 제공됩니다.소스 코드를 다운로드하여 Firefox OS 에뮬레이터에 로드하면 다음 목록이 표시됩니다.

목록의 항목을 클릭하면 다양한 UI 구성 요소가 표시됩니다.캡처 몇 개를 게재하다.
목록 보기

다양한 버튼

동작 메뉴

화면 변환도 CSS의 transsition을 사용한 "비슷한"동작입니다.

소스 코드

소스 코드를 간단하게 봅시다.
먼저 시작 시 표시되는 목록 화면은 디렉토리 바로 아래index.html입니다.각 구성 요소의 목록은 다음과 같습니다. li 탭에 적혀 있습니다.
index.html

        <li>
          <a id="btn-lists" href="#">
            <p>Lists</p>
          </a>
        </li>
        <li>
          <a id="btn-progress" href="#">
            <p>Progress and activity</p>
          </a>
        </li>

목록을 눌렀을 때 표시되는 구성 요소의 화면을 아래로 section 탭을 쓰십시오.예를 들어 목록과 진도는 300줄 근처에 있는데 다음과 같다.
index.html

 <section id="lists" data-position="right">
     <section role="region">
      <header class="fixed">
        <a id="btn-lists-back" href="#"><span class="icon icon-back">back</span></a>
        <h1>Lists</h1>
      </header>
    </section>
    <iframe src="style_unstable/lists/index.html" class="scrollable header"></iframe>
  </section>

  <section id="progress" data-position="right">
     <section role="region">
      <header class="fixed">
        <a id="btn-progress-back" href="#"><span class="icon icon-back">back</span></a>
        <h1>Progress and activity</h1>
      </header>
    </section>
    <iframe src="style_unstable/progress_activity/index.html" class="scrollable header"></iframe>
  </section>

각 화면의 머리는 직접 쓴 것이고 머리 아래 화면의 요소는 iframe로 다른} 파일을 읽어서 표시합니다.물론 index.html에 모두 쓸 수도 있지만, 각 화면을 HTML 파일로 처리하는 디자인인 것 같다.예를 들어, 목록 화면은 HTML 파일style_unstable/lists/index.html과 같습니다.
머리글 버튼 등을 누르면 CSS 애니메이션을 사용하여 화면을 마이그레이션합니다.버튼의 터치 헤드에 대한 움직임 트리거의 설정은 다음과 같다.
index.html

    //lists
    document.querySelector('#btn-lists').addEventListener ('click', function () {
      document.querySelector('#lists').className = 'current';
    });
    document.querySelector('#btn-lists-back').addEventListener ('click', function () {
      document.querySelector('#lists').className = 'right';
    });

여기#btn-lists는 화면을 한눈에 볼 수 있는lists 항목을 가리키고#btn-lists-back는 목록 구성 요소 화면의 머리 복귀 단추를 가리킨다.이 버튼을 누르면 학급 이름current, right이 전환되고 화면이 표시되거나 숨겨집니다.버튼이 눌렸을 때 부르는 애니메이션입니다. inde.html 위쪽에 style 라벨로 쓰여 있습니다.
index.html

    [data-position="right"].current {
      animation: rightToCurrent 0.4s forwards;
      -webkit-animation: rightToCurrent 0.4s forwards;
    }
    [data-position="right"].right {
      animation: currentToRight 0.4s forwards;
      -webkit-animation: currentToRight 0.4s forwards;
    }

화면 간 전환은 0.4초로 진행됐다.여기를 4s로 설정하면 화면 이동이 느려집니다.
애니메이션 자체의 코드는 transition.css에 기재되어 있다.예를 들어, 화면을 표시하는 애니메이션 코드는 다음과 같습니다.
transition.css

/* Go deeper */
@keyframes rightToCurrent {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(0); }
}
@-webkit-keyframes rightToCurrent {
  0%   { -webkit-transform: translateX(100%); }
  100% { -webkit-transform: translateX(0); }
}

제가 곧 프로그램 라이브러리를 소개했지만 Building Blocks를 사용하는 것만 파악하면 Firefox OS의 UI를 구축할 수 있습니다.