DEV Hướng dẫn viết WebWorks App cơ bản HelloWorld từ A tới Z

Thảo luận trong 'DEV - Khu Vực Dành Cho Lập Trình Viên' bắt đầu bởi ndthuytrang, 10/9/12.

  1. Sau đây là bài hướng dẫn chi tiết tạo ứng dụng WebWorks cơ bản nhất cho PlayBook trên Window

    Bạn phải cài các công cụ sau:

    Java: Java SE 6 JDK 32-bit.
    Adobe SDK: Adobe® AIR® SDK 2.7. - Mirror
    SDK: BlackBerry WebWorks SDK for Tablet OS (Windows). - Mirror
    PlayBook 2.0 Simulator: Windows® (exe) hoặc Ripple Emulator.
    Text Editor: Notepad, Notepad++ hoặc chương trình biên soạn HTML như Dreamweaver...

    Cấu trúc của WebWorks Application HelloWorld của chúng ta gồm:
    1. Offline HTML Source(html, css, javscript, images, audio...)
    2. File config.xml
    • Tất cả những gì của 2 phần trên sẽ được zip lại thành 1 file zip và sử dụng SDK để package thành file .bar (file ứng dụng của PlayBook)
    • File .bar không cần Sign Key nếu test trên PlayBook Simulator và bắt buộc phải Sign Key nếu muốn chạy trên thiết bị thật.
    Trong bài hướng dẫn này, Keeper tạo folder C:\HelloWorldvà chứa những files cần thiết của ứng dụng vào đây.

    Đầu tiên chúng ta cần tạo file config.xml để khai báo, đăng kí các thông tin của ứng dụng WebWorks.

    config.xml của chúng ta sẽ có nội dung như sau:

    Mã:
    <?xml version="1.0" encoding="UTF-8"?>
    <widget xmlns="http://www.w3.org/ns/widgets" xmlns:rim="http://www.blackberry.com/ns/widgets" version="1.0.0.0" rim:header="RIM-Widget:rim/widget">
    <name>Hello World</name>
    <description>Hello World WebWorks Application Demo</description>
    <author href="http://dev-group.dauden.vn" rim:copyright="2012" email="haitt@viethop.net">BB Dev Group VN</author>
    <rim:orientation mode="landscape" />
    <rim:category name="all" />
    <icon src="appicon.png"/>
    <feature id="blackberry.app.event" required="true" version="1.0.0.0" />
    <content src="index.html" />
    </widget>
    Nội dung trên có những lưu ý sau:

    Mã:
    <rim:orientation mode="landscape" />
    Set view mode cho ứng dụng là landscape. Có 2 view mode Landscape/Portrait dùng để force ứng dụng giữ nguyên view mode trong lúc user xoay PlayBook. Nếu không có tag này thì ứng dụng sẽ theo mặc định và xoay nếu xoay PlayBook

    Mã:
    <icon src="appicon.png"/>
    Set icon cho ứng dụng. Ở đây bạn cần chuẩn bị file hình appicon.png để làm icon cho ứng dụng.(Tên không bắt buộc phải là appicon.png, tuy nhiên nên đặt tên file đơn giản nhất có thể để tránh bị complain khi SDK package ứng dụng)

    Mã:
    <feature id="blackberry.app.event" required="true" version="1.0.0.0" />
    Khai báo API mà ứng dụng sẽ sử dụng, lưu ý nếu test trên máy tính bạn sẽ không có những API này và code của bạn sẽ lỗi. Tùy vào những API ứng dụng sử dụng mà bạn cần phải khai báo đầy đủ, ví dụ access file, camera trước/sau, GPS...

    Mã:
    <content src="index.html" />
    Nội dung ứng dụng. Không bắt buộc phải là index.html. Có thể là bất kỳ file nào bạn muốn, và đây là file được load đầu tiên khi chạy ứng dụng.

    Soạn nội dung ứng dụng:

    Dùng Text Editor hay HTML Editor ưa thích của bạn để tạo file có tên index.html, lưu cùng folder C:\HelloWorld với file config.xml và có nội dung sau:
    Mã:
    <!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Hello World</title>
        <link rel="stylesheet" type="text/css" href="style.css" media="all" />
        <script type="text/javascript">
     
        var settingBarIsShown = false; // Mặc định Setting Bar của chúng ta ẩn ngay từ đầu
     
        function init(){
            if((typeof blackberry == "undefined") || (typeof blackberry.app == "undefined")){
                alert("Not Supported");    // Thông báo nếu ứng dụng không chạy trên PlayBook hoặc không được phép sử dụng
                                            // (Cần khai báo bằng thẻ tag <feature></feature> trong file config.xml ở trên.
            }else{
                // WebWorks API Reference guide:
                // http://www.blackberry.com/developers/docs/webworks/api/playbook/
             
                blackberry.app.event.onSwipeDown(toggleSettingBar);    // Trigger khi có thao tác vuốt từ cạnh trên xuống, toggleSettingBar
                                                                        // sẽ take care event này.
            }
        }
        function toggleSettingBar(){ // Gọi function này khi xuất hiện event thao tác vuốt từ cạnh trên xuống của PlayBook.
            if(settingBarIsShown){ // if it's shown then we hide it
                document.getElementById("settingBar").className = "hideSettingBar";
            }else{ // if not, show it
                document.getElementById("settingBar").className = "showSettingBar";
            }
            settingBarIsShown = !settingBarIsShown;
        }
     
        </script>
        <style type="text/css">
            #settingBar{
                position: fixed;
                top: -102px;
                left: 0px;
                width: 100%;
                height: 100px;
                background-color: #333;
                border-bottom: solid 2px #444;
                color: #999;
            }
            .showSettingBar{
                -webkit-transition: all 0.6s ease-in-out;
                -webkit-transform: translate(0, 100px);
                -moz-transition: all 0.6s ease-in-out; /* For FireFox. Doesn't need this on PlayBook since PlayBook is WebKit */
                -moz-transform: translate(0, 100px); /* For FireFox. Doesn't need this on PlayBook since PlayBook is WebKit */
            }
            .hideSettingBar{
                -webkit-transition: all 0.6s ease-in-out;
                -webkit-transform: translate(0, -100px);
                -moz-transition: all 0.6s ease-in-out;  /* For FireFox. Doesn't need this on PlayBook since PlayBook is WebKit */
                -moz-transform: translate(0, -100px); /* For FireFox. Doesn't need this on PlayBook since PlayBook is WebKit */
            }
        </style>
    </head>
    <body onLoad="init();">
        <div id="settingBar">
            <button class="" onClick="toggleSettingBar();">Hide</button>
        </div>
        <h3>Hello World</h3>
     
        <!-- Hoặc có thể dùng button sau để test sow/hide setting bar trên trình duyệt trên máy tính -->
     
        <hr />
        <button class="" onClick="toggleSettingBar();">Settings</button>
    </body>
    </html>
    Save lại trong folder C:\HelloWorld. Như vây trogn folder này hiện có: index.html, config.xml, appicon.png

    Lưu ý tên các file trong gói ứng dụng không nên có kí tự đặc biệt, khoảng cách... Tốt nhất hãy đặt tên thật đơn giản và không dấu.

    Sử dụng chương trình Zip nào đó để zip folder HelloWorld này lại thành HelloWorld.zip. Trong file HelloWorld.zip sẽ chỉ có config.xml, index.html, appicon.png

    Hướng dẫn Package ứng dụng:

    Sau khi download và install bộ SDK cho PlayBook. Bạn sẽ thấy folder của SDK thông thường là ở đây: (Keeper sử dụng Windows 7)

    Mã:
    C:\Program Files (x86)\Research In Motion\BlackBerry WebWorks SDK for TabletOS 2.2.0.5
    Hướng dẫn của Keeper khác với các hướng dẫn trên Internet và có vẻ hơi phức tạp nhưng sẽ rất dễ chịu cho bạn trong lúc phát triển ứng dụng sau này:

    Bạn copy toàn bộ folder "BlackBerry WebWorks SDK for TabletOS 2.2.0.5" sang nơi nào tiện cho bạn, ví dụ C:, D: ... và đổi tên folder ngắn gọn lại. Trong bài hướng dẫn này Keeper copy và đổi tên thành C:\SDK

    Trong folder HelloWorld bạn cần tạo thêm:

    File package.bat (không zip file này vào HelloWorld.zip) có nội dung sau:

    Mã:
    C:\SDK\bbwp\bbwp HelloWorld.zip
    pause
    Và file install.bat (không zip file này vào HelloWorld.zip) có nội dung sau:

    Mã:
    java -Xmx512M -jar C:\SDK\bbwp\blackberry-tablet-sdk\lib\BarDeploy.jar -installApp -launchApp -password 123456 -device 169.254.0.1 -package bin\HelloWorld.bar
    pause
    Lưu ý:
    • 123456 là password bạn đặt khi bật chế độ Development Mode trên PlayBook thật hoặc PlayBook Simulator.
    • 169.254.0.1 là IP Address của PlayBook thật hoặc PlayBook Simulator. Click lên biểu tượng Development Mode trên status trên PlayBook sẽ show bạn IP này. Default thường là 169.254.0.1
    Khi chạy package.bat, SDK sẽ package file HelloWorld.zip thành HelloWorld.bar và chứa trong folder "bin" ngay trong folder HelloWorld. Trong hướng dẫn này sẽ là: C:\HelloWorld\bin\HelloWorld.bar

    Tuy nhiên đây chỉ là package thông thường, chưa Sign Key, do đó bạn chỉ có thể test HelloWorld.bar này trên Simulator. Hoặc trên máy thật phải setup Debug Token (Không cover trong hướng dẫn này)

    Sau đó chạy install.bat để deploy helloWorld.bar lên Simulator(hoặc PlayBook thật nếu ứng dụng đã Sign Key hoặc có set up Debug Token trên PlayBook thật).

    Bạn cũng có thể dùng DDPB Installer để install/deploy file .bar lên PlayBook. (Tham khảo thêm tại http://ddpb.dauden.vn)

    Done.

    Hướng dẫn đăng kí Sign Key:

    Điền vào form sau và ghi nhớ số PIN bạn đặt vì khi nhận được file certificate từ RIM, phải dùng file certificate này để đăng kí key và nó sẽ yêu cầu số PIN bạn đặt trong lúc đăng kí. Do đó nên chọn số dễ nhớ và ít nhất là 6 kí tự.(Chi tiết bên dưới)

    https://www.blackberry.com/SignedKeys/

    Phần Select key, bạn chọn BlackBerry Tablet OS and Smartphone signing key.

    Thường thì sau vài tiếng sẽ nhận được email từ RIM với file certificate đính kèm. Nếu chọn như trên, bạn sẽ nhận được 2 bộ certificate khác nhau, 1 để đăng kí sign key cho ứng dụng trên PlayBook và 1 để đăng kí sign key cho ứng dụng trên Smartphone.

    Với bộ file certificate cho Tablet OS(PlayBook) sẽ có 2 file đính kèm trong 2 email riêng biệt. Bạn download 2 file về đặt trong 1 folder nào đó để chuẩn bị tiến hành đăng ký Signing Key. 2 File đính kèm sẽ có dạng: client-PBDT-xxxxxxxxxx.csjclient-RDK-xxxxxxxxxx.csj

    Tiến hành register key từ file certificate:

    Bước 1:

    Bạn có thể chạy trực tiếp command sau ở DOS console hoặc tạo file .bat với nội dung:

    Mã:
    C:\SDK\bbwp\blackberry-tablet-sdk\bin\blackberry-keytool -genkeypair -keystore sigtool.p12 -storepass xxxxxx -dname "cn=Tên Công ty" -alias author
    Trong đó xxxxxx là p12 password bạn tự đặt cho key của mình, vì mỗi lần sign key bạn đều phải cung cấp password này. Hãy đặt cho dễ nhớ.

    Sau khi chạy command trên nó sẽ tạo ra file sigtool.p12. Copy file này vào folder C:\SDK\bbwp\bin


    Bước 2:

    Tương tự, chạy trực tiếp command sau ở DOS console hoặc tạo file .bat với nội dung:

    Mã:
    C:\SDK\bbwp\blackberry-tablet-sdk\bin\blackberry-signer -csksetup -cskpass xxxxxx
    Trong đó xxxxxx là csk password bạn tự đặt cho key của mình, vì mỗi lần sign key bạn đều phải cung cấp password này. Hãy đặt giống như p12 password trên cho dễ nhớ.

    Sau khi chạy thì nó sẽ tạo ra file barsigner.csk thường sẽ thấy trong folder C:\Document and Settings\<name>\Local Settings\Application Data\Research In Motion.

    Bước 3:

    Cuối cùng, tương tự chạy trực tiếp command sau ở DOS console hoặc tạo file .bat.

    Lưu ý: copy 2 file client-PBDT-xxxxxxxxxx.csjclient-RDK-xxxxxxxxxx.csj đến cùng folder mà bạn đang ở DOS Console hoặc nơi chứ file .bat để chạy command:

    Mã:
    C:\SDK\bbwp\blackberry-tablet-sdk\bin\blackberry-signer -register -csjpin pppppp -cskpass xxxxxx client-PBDT-xxxxxxxxxx.csj client-RDK-xxxxxxxxxx.csj
    Trong đó:
    • pppppp chính là PIN bạn tự đặt khi điền form đăng kí.
    • xxxxxx chính là password bạn set ở bước 2.
    Như vậy nếu không có lỗi xảy ra thì bạn đã đăng ký xong Signing Key cho Tablet OS Application. Bạn có thể sign key cho file bar của mình và cài lên PlayBook thật.

    Quay lại phần package ứng dụng bên trên, chỉ là package thông thường, chưa sign key. Nếu bạn muốn vừa package và sign key luôn cho file .bar của mình thì bạn edit file package.bat như sau:

    File package.bat (không zip file này vào HelloWorld.zip) có nội dung sau:
    Mã:
    C:\SDK\bbwp\bbwp HelloWorld.zip -gcsk xxxxxx -gp12 xxxxxx -buildId 1
    pause
    Trong đó:
    • xxxxxx chính là csk password và p12 password của key của bạn. Nên set 2 password này giống nhau cho tiện.
    • -buildId 1: Số 1 là bản build của ứng dụng. Bất cứ lần nào có Sign Key thì bắt buộc build version phải thay đổi và khác các số build đã từng Sign. Ví dụ bạn package và sign lần đầu, bạn để số 1. Lần thứ 2 bạn package và Sign, bắt buộc con số này phải khác 1. Chẳng hạn bạn build 10 lần, dùng build number là 1, 2, 3, 4, ..., 10. Lần thứ 11 bắt buộc phải là con số khác với 1, 2, 3, ... 10. Có thể là 11 hoặc 1100, hoặc 110000 hay whatever, miễn khác những bản build đã từng Sign Key. Nếu không, khi Package và Sign sẽ báo lỗi package đã được sign từ trước. Lưu ý chỉ khi có Sign Key mới cần Build number, package thông thường thì không cần.
    Done.

    PS: Có thiếu sót hay sai sót các bạn góp ý để Keeper sửa ngay nhé.
     
    ndthuytrang

    ndthuytrang
    Expand Collapse

    Well-Known Member

    Tham gia ngày:
    5/7/11
    Bài viết:
    4,525
    Đã được thích:
    7,276
    #1 ndthuytrang, 10/9/12
    Last edited: 10/9/12
    cuongdc and BonConMat like this.
  2. wavealpha

    wavealpha
    Expand Collapse

    Member

    Tham gia ngày:
    16/7/11
    Bài viết:
    91
    Đã được thích:
    54
    Điểm lưu ý khá là quan trọng mà ko thấy Keeper nói đến trong Signing Keys là:

    The CSJ files that you used to install your code signing keys can only be used once. They are disabled after a successful installation, which makes it important to back up your code signing keys after they have been installed. Code signing keys can be restored to the original computer that they were installed to or restored to another computer. You can also use this information to transfer your code signing keys to multiple computers and sign from any of them.

    Tạm dịch:

    File CSJ mà bạn sử dụng để làm Signing Keys có thể chỉ sử dụng được 1 lần. Các file này sẽ không còn tác dụng (disable) ngay sau khi lần cài đặt thành công đầu tiên, vì vậy bạn cần back up lại code sign key này.
    Code sign keys này sẽ có tác dụng khi mà bạn cài chúng lại trên máy tính khác

    Back up:3 files author.p12, barsign.csk và bargsign.db
    • Windows XP: %HOMEPATH%\Local Settings\Application Data\Research In Motion
    • Windows Vista and Windows 7: %HOMEPATH%\AppData\Local\Research In Motion
    • Mac OS: ~/Library/Research In Motion
    • UNIX or Linux: ~/.rim
     
    #2 wavealpha, 26/9/12
    Last edited: 27/9/12
    target46k2 and BonConMat like this.
  3. BonConMat

    BonConMat
    Expand Collapse

    Super Moderator

    Tham gia ngày:
    9/4/11
    Bài viết:
    2,019
    Đã được thích:
    2,368
    Thanks For Share....:D
     
  4. vocongdanh

    vocongdanh
    Expand Collapse

    New Member

    Tham gia ngày:
    26/4/11
    Bài viết:
    3
    Đã được thích:
    0
    Mình làm tới đoạn chạy file package.bat thì bị lỗi

    Mã:
    P:\Blackberry\Hello>C:\SDK\bbwp\bbwp HelloWorld.zip
    [INFO]                  Parsing command line options
    [INFO]                  Parsing bbwp.properties
    [INFO]                  Validating WebWorks archive
    [INFO]                  Parsing config.xml
    [INFO]                  Populating application source
    [INFO]                  Compiling WebWorks application
    Error loading: C:\Program Files\Research In Motion\BlackBerry WebWorks SDK for T
    abletOS 2.2.0.5\jre\bin\client\jvm.dll
    [INFO]                  Packaging the bar file
    java.io.FileNotFoundException: C:\Users\xxx\AppData\Local\Temp\widgetGen.356
    0866511351356788650.tmp\HelloWorld.swf (The system cannot find the file specifie
    d)
            at java.io.FileInputStream.open(Native Method)
            at java.io.FileInputStream.<init>(Unknown Source)
            at net.rim.tumbler.file.FileManager.copyFile(FileManager.java:481)
            at net.rim.tumbler.airpackager.AirPackager.run(AirPackager.java:232)
            at net.rim.tumbler.WidgetPackager.go(WidgetPackager.java:152)
            at net.rim.tumbler.WidgetPackager.main(WidgetPackager.java:77)
    [ERROR]                Air Packager exception occurred
     
    P:\Blackberry\Hello>pause
    Press any key to continue . . .
     
    #4 vocongdanh, 27/10/12
    Last edited: 27/10/12
  5. wavealpha

    wavealpha
    Expand Collapse

    Member

    Tham gia ngày:
    16/7/11
    Bài viết:
    91
    Đã được thích:
    54
    Mình làm theo hướng dẫn Helloworld của chủ toppic thì chạy OK.
    Còn về của bạn là chạy file .swf (file flash) mình chưa làm qua, ko có kinh nghiệm.

    [INFO] Packaging the bar file
    java.io.FileNotFoundException: C:\Users\xxx\AppData\Local\Temp\widgetGen.356
    0866511351356788650.tmp\HelloWorld.swf (The system cannot find the file specifie
    d)
     
    #5 wavealpha, 29/10/12
    Last edited: 29/10/12

Chia sẻ trang này

PING