Hi Hi

'HTML GUI기초'에 해당되는 글 1건

  1. Python sl4a - HTML로 GUI의 기초

Python sl4a - HTML로 GUI의 기초

 

사용자에게 보이는 UI는 HTML과 JavaScript로 만들고, 실질적인 작업은 UI 뒤편에서 파이썬이 담당한다는 것이다. 

CSS는 HTML 필드들과 글꼴을 겉모습과 이관성 면에서 좀 더 깔끔하게 만드는 역할을 한다.

파이썬은 또한, 사용자 상호 작용 없는 단순 정보 표시용 HTML 파일을 구축하는 데에도 쓰인다.


HTML과 단순 정보 표시

응용 프로그램을 만들다보면 일정 분량의 정보를 사용자에게 표시하는 수단이 필요해지곤 한다. 표시해야할 정보가 항목들의 목록일 수도 있고 연속된 텍스트일 수도 있는데, 둘 다 HTML로 쉽고 편하게 표시할 수 있다.

기본적인 HTML 파일 표시 수단은 API 함수 webViewShow 이다. 표시할 HTML 파일은 프로그램에서 직접 생성할 수도 있고 개발자가 미리 텍스트 편집기로 만들어 둘 수도 있다.


우선 첫 번째 방식, 즉 프로그램(스크립트)에서 HTML 파일을 직접 생성하는 방식부터 살펴보자.  

배터리 상태를 조회해서 사용자가 배터리에 관해 알고 싶어 할만한 모든 정보를 담은 하나의 간단한 HTML 파일을 생성한다. 그런다음에는 그 파일을 webViewShow를 이용해서 화면에 표시한다.


import time 

import android


#파이썬의 서식 문자열 구문을 이용하는 간단한 HTML 템플릿


template = '''<html><body>

<h1>Battery Status</h1>

<ul>

<li><strong>Status:%(Status)s</li>

<li><strong>Temperature:%(temperature)s </li>

<li><strong>Level: %(level)s </li>

<li><strong>Plugged In: %(plugged)s </li>


</ul>

</body></html>'''


if _name_ == '_main_':

    droid = android.Android()

    # 배터리 상태가 조회될 때 까지 기다린다.

    droid.batteryStartMonitoring()

    result = None

    while result is None:

        result = droid.readBatteryData().result

        time.sleep(0.5)

    #조회된 상태 값들을 채운 HTML 코드를 파일에 저장한다.

    f=open('/sdcard/sl4a/scripts/battstats.html','w')

    f.write(template % result)

    f.close()

    

    #HTML 파일을 화면에 표시한다.

    droid.webViewShow('file:///sdcard/sl4a/scripts/battstats.html')


scripts 디렉터리에 battstats.html 이라는 이름의 파일을 만든다. 같은 이름의 파일이 있으면 덮어 쓰므로, 배터리 정보 HTML 파일을 계속 보전하고 싶다면 파일이름에 현재 시간을 추가해서매범 공유한 파일 이름을 만들면 된다.


HTML과 JavaScript

단순 정보 표시의 단계는 HTML 페이지에 약간의 상호작용 능력을 추가하는 것이다. 여기서 JavaScript가 등장한다. 핵심은, SL4A의 '사건(event)' 메커니즘을 이용해서 HTML 페이지의 JavaScript 코드와 파이썬의 정보를 주고 받는다는 것이다. JavaScript 쪽에서는 var droid= new Android() 같은 코드로 Android 객체를 생성해야 한다. 일단 Android 객체를 만들었다면, JavaScript에서도 파이썬에서 했던 것처럼 SL4A 퍼사드들의 API 함수를 호출할 수 있다.

JavaScript 코드로 주소록의 연락처 목록을 얻어서 동적으로 웹 페이지를 생성하는 코드이다. 연락처들이 아니더라도, API 호출을 통해서 얻을 수 있는 정보라면 어떤 것이든 이 코드와 접근 방식을 적용할 수 있다. 

<html>

    <head>

    </head>

    <body>

        <h1>Contacts</h1>

        <ul id="contacts"></ul>

        <script type="text/javascript">

            var droid = new Android();

            var contacts = droid.contactsGet(['display_name']);

            var container = document.getElementById('contacts');

            for (var i=0;i<=contacts.result.length;i++){

                var data = contacts.result[i];

                contact = '<li>'

                contact = contact + data.display_name;

                contact = contact + '</li>';

                container.innerHTML = container.innerHTML + contact;

            }

        </script>     

    </body>

</html>


javaScipt 코드는 ['display_name']을 인수로 contactsGet 함수를 호출해서 얻은 연락처 표시용 이름들을 동적으로 웹 페이지에 추가한다. 이 HTML 파일을 실제로 화면에 띄우는 파이썬 코드는 다음과 같다.

import android


droid = android.Android()

droid.webViewShow('file:///sdcard/sl4a/scripts/contacts.html')


이 코드는 단지 정보를 표시만 할 뿐이다. 사용자가 그 정보를 가지고 다른 일을 하게 만들려면 어떻게 해야 할까 ? HTML 파일의 JavaScript 코드를 조금 수정해서, 목록을 표 형태로 만들고 상호 작용을 위한 하이퍼링크도 추가해 보자.

<html>

    <head>

    </head>

    <body>

        <h1>Contacts</h1>

<table id="contacts"></table>

        <script type="text/javascript">

            var droid = new Android();

function call(number){

droid.phoneDialNumber(number);

}

            var contacts = droid.contactsGet(['display_name','primary_phone']);

            var container = document.getElementById('contacts');

            for (var i=0;i<=contacts.result.length;i++){

                var data = contacts.result[i];

                contact = '<tr>'

                contact += '<th>' + data.display_name + '</th>';

                contact += '<td><a href="#" onclick="call('+data.primary_phone+'); return false;">' + data.primary_phone + '</a></td>';

                contact += '</tr>';

                container.innerHTML = container.innerHTML + contact;


            }


        </script>     

    </body>

</html>


JavaScript 코드에서 변한 부분은 두 군데 이다. 우선 링크를 눌렀을 때 전화 통화 대화 상자를 뛰우는 JavaScript 함수가 추가 되었다.

또한 연락처들을 단순한 목록 대신 <tr>과 <td>태그를 이용해서 표 형태로 만든다. 또한, 앞의 함수를 호출하는 링크(<a>)도 추가 한다.