[BB] Hello world BlackBerry App

เพิ่งซื้อ BlackBerry Bold 9900 มา เลยขอบูชา Hello world ซะหน่อย
สิ่งที่ต้องการในการพัฒนาแอ็บของ BB คือ

  1. Java SDK 6 ตั้งแต่ Update 16 ขึ้นไป
  2. Eclipse 3.6 Helios หรือ 3.7 Indigo (แต่ผมลองแล้ว Indigo update plug-in ไม่ผ่าน ต้อง Helios)
  3. BlackBerry Java Plug-in


Step เตรียมตัว

  1. สมัครสมาชิกที่ http://us.blackberry.com/developers/
  2. Login เข้าไป จะพบเมนูด้านซ้ายว่า BlackBerry 7 คลิกเข้าไป จะมีปุ่มดาวโหลดตรงกลางหน้าจอ ก็คลิกเข้าไปอีกที จะเป็นวิธีการลง BlackBerry Java Plug-in ให้ Eclipse
    ย้ำอีกทีว่า ผมแนะนำให้ใช้ Helios นะ ถ้าหากติดตั้งไม่ผ่าน ให้ดาวโหลด plug-in มาเองที่หน้าตอน login ครั้งแรก ที่เมนูด้านขวา จะมี Top Download อยู่ อันแรก ดูว่าถ้าเป็น plug-in ของ windows ให้ดาวโหลดแล้วตอนติดตั้ง ให้ชี้ไปที่ path ของ eclipse มันจะไปอัพเดทให้

มาเริ่ม Hello world กันเถอะ

  1. เปิด Eclipse ที่ผ่านการลง BlackBerry Java Plug-in ขึ้นมา
  2. เลือกเมนู File -> New -> BlackBerry Project
  3. ผมตั้งชื่อโปรเจคว่า helloworld สังเกตว่าที่ช่อง JRE จะเป็น BlackBerry JRE 6.0.0
    0 - new project

    (เป็นเวอร์ชันที่แถมมากับ Java Plug-in update ล่าสุด ณ วันที่เขียนบทความ หากต้องการเขียนเวอร์ชันอื่นให้ไปดู Step Update จะมีให้เลือกเวอร์ชัน)
    1 - software update

  4. จากนั้นก็กดปุ่ม Next ไปสองที จะพบหน้าจอนี้ ให้เลือก Hello BlackBerry แล้วกด Finish (หรือจะกด Next ต่อก็ได้ เพื่อปรับค่าชื่อโปรแกรมหรือ package ซึ่งผมว่ายังไม่จำเป็น)
    2 - template

  5. เมื่อกลับมาที่หน้า Eclipse จะมีหน้าต่าง Getting Started เอาไว้เปิดดูขำๆ หรือปิดไปก็ได้ และไฟล์ config ซึ่งก็ปิดไปได้เหมือนกัน
  6. คลิกขวาที่ชื่อโปรเจคในหน้าต่าง Package Explorer จากนั้นเลือก Run As -> BlackBerry Simulator ก็จะปรากฏหน้าจอ Emulator ของ BlackBerry และ Dialog แจ้งอะไรซักอย่าง ก็กด ok ไป
  7. เมื่อ Emulator โหลดเสร็จ ให้คลิกที่คำว่า All ตรงกลาง จะโผล่รายการโปรแกรมทั้งหมดใน Emulator จากนั้นให้เลื่อนลงมาด้านล่าง หาโปรแกรมที่ชื่อ helloworld จัดการคลิกทันที
    3 - all menu and hello world

  8. กรอก Name แล้วกดปุ่ม Say Hello to ก็จะได้ Dialog ขึ้นมาดังรูป เย้ๆๆ เสร็จแล้ว Hello World
    4 - hello kiat

เดี๋ยวก่อน นี่มัน Hello world ที่เขาเขียนขึ้นมานิ ไม่ได้เขียนเองนิหว่า

อยากจะบอกว่า นี่เป็นโค้ดตัวอย่างที่อยากจะให้ดู ให้เข้าไปดูที่โฟลเดอร์ src -> mypackage จะเห็นว่ามีสองคลาส ซึ่งสองคลาสนี้จะได้มาทุกครั้งที่ New Project ไม่ว่าจะเป็น Template ธรรมดาหรือว่า Hello แค่ว่าถ้าเป็น Hello จะมีโค้ดไว้ให้ดู

เจาะตับ helloworld

  1. HelloBlackBerry.java เปิดคลาสขึ้นมา มันคือเมนคลาสที่ใช้รันโปรเจค ซึ่งเวลา New Project ที่ไม่ใช่ Hello BlackBerry ก็ต้องมีเหมือนกัน และโค้ดข้างในก็เหมือนกันด้วย คือจะมีไว้ New คลาสที่สอง ที่เป็น UI ขึ้นมาทำงาน
    package mypackage;
    
    import net.rim.device.api.ui.UiApplication;
    
    /**
     * This class extends the UiApplication class, providing a graphical user interface.
     */
    public class HelloBlackBerry extends UiApplication {
        /**
         * Entry point for application
         * 
         * @param args
         *            Command line arguments (not used)
         */
        public static void main( String[] args ) {
            // Create a new instance of the application and make the currently
            // running thread the application's event dispatch thread.
            HelloBlackBerry theApp = new HelloBlackBerry();
            theApp.enterEventDispatcher();
        }
    
        /**
         * Creates a new HelloBlackBerry object
         */
        public HelloBlackBerry() {
            // Push a screen onto the UI stack for rendering.
            pushScreen( new HelloBlackBerryScreen() );
        }
    }
    
    
  2. HelloBlackBerryScreen.java เป็นคลาส UI ที่มี BasicEditField ที่มี label ในตัวเอง กับปุ่ม ButtonField ที่มีการ set listener ว่าเมื่อกดปุ่ม ให้ไปสร้าง Dialog เพื่อ Hello ค่าที่กรอก
    package mypackage;
    
    import net.rim.device.api.ui.FieldChangeListener;
    import net.rim.device.api.ui.MenuItem;
    import net.rim.device.api.ui.container.MainScreen;
    import net.rim.device.api.ui.Field;
    import net.rim.device.api.ui.component.BasicEditField;
    import net.rim.device.api.ui.component.ButtonField;
    import net.rim.device.api.ui.component.Dialog;
    import net.rim.device.api.ui.component.Menu;
    import net.rim.device.api.util.StringProvider;
    
    public class HelloBlackBerryScreen extends MainScreen {
        private BasicEditField basicEditField;
    
        public HelloBlackBerryScreen() {
            super( MainScreen.VERTICAL_SCROLL | MainScreen.VERTICAL_SCROLLBAR );
            setTitle( "HelloBlackBerry" );
    
            basicEditField = new BasicEditField( "Enter Name:", "", 100, BasicEditField.EDITABLE );
            add( basicEditField );
    
            ButtonField buttonField_1 = new ButtonField( "Say Hello to", ButtonField.CONSUME_CLICK | ButtonField.FIELD_RIGHT );
            add( buttonField_1 );
            buttonField_1.setChangeListener( new FieldChangeListener() {
                public void fieldChanged( Field arg0, int arg1 ) {
                    sayHello();
                }
            } );
        }
    
        protected void makeMenu( Menu menu, int instance ) {
        	super.makeMenu(menu, instance);
            MenuItem mntmSayHello = new NewMenuItem();
            menu.add( mntmSayHello );
        }
    
        private class NewMenuItem extends MenuItem {
            public NewMenuItem() {
                super( new StringProvider( "Say Hello" ), 0, 0 );
            }
    
            public void run() {
                sayHello();
            }
        }
    
        private void sayHello() {
            Dialog.inform( "Hello " + basicEditField.getText() );
        }
    }
    
    

เอา helloworld ลงเครื่องจริง
มีเครื่องจริงกับมืออยู่แล้ว จะไม่ลองเอาลงเครื่องก็ยังไงๆ อยู่ จัดซะหน่อยแล้วกัน

  1. ไปขอ BlackBerry Code Signing Keys จากหน้าเว็บ http://us.blackberry.com/developers/javaappdev/codekeys.jsp แล้วเลื่อนลงมาจนเจอลิงค์ Register for code signing keys ก็กดเข้าไปเลย จะเจอแบบฟอร์ม กรอกๆ ให้ครบ หลักๆ ที่ไม่ควรลืมคือช่อง Select a key ให้เลือกเป็น Smartphone หรือถ้าจะทำ tablet ก็เลือก Smartphone and tablet จากนั้นก็รอทาง RIM ส่ง Signing Key มาให้ ซึ่งเราจะได้รับแจ้งทาง email ว่าให้รอประมาณ 2 ชม.
    5 - request signing keys

  2. ดาวโหลดไฟล์ .csi ซึ่งเป็นของ smartphone มาไว้ กลับมาที่ Eclipse แล้วคลิกขวาที่ชื่อโปรเจคแล้วเลือก BlackBerry -> Install new signature keys แล้ว browse ไปหาไฟล์ .csi ที่ได้มา ก็จะปรากฏ dialog ดังรูป

    6 - create new pair

    กดปุ่ม Yes ก็จะปรากฏช่องให้กรอกพาสเวิร์ด ก็กรอกพาสที่สมัคร Dev ลงไปแล้วรอจนกว่าจะทำการ generate เสร็จ ซึ่งนานพอสมควร
    7 - password

    เมื่อผ่านขั้นตอนนี้ ก็จะมี dialog ให้กรอก PIN ที่ทำการลงทะเบียนในแบบฟอร์มก่อนหน้านี้ ก็เป็นอันจบการ Generate Key

  3. กลับมาที่ Eclipse คลิกขวาที่ชื่อโปรเจคเลือก BlackBerry -> Sign with Signature Tool… (สังเกตุว่า มันมาแทนเมนู Install เมื่อขั้นตอนที่แล้ว) จะขึ้น dialog ให้กรอก password ผมกรอก password ที่สมัคร dev ลงไป ก็จะทำอะไรของมันไม่รู้ซักพักหนึ่ง พอกระบวนการนี้เสร็จ มันจะมีเมล์แจ้งว่าเรา sign เรียบร้อย (แสดงว่าต้องต่ออินเตอร์เนตตอน sign)
  4. คลิกขวาที่ชื่อโปรเจคเลือก BlackBerry -> Package Project(s) จากนั้นในโฟลเดอร์ deliverables จะพบไฟล์โฟลเดอร์ Standard และ Web และมีไฟล์ .jad อยู่โฟลเดอร์ข้างในอีกชั้น
  5. เสียบ BB กับเครื่องคอม แล้วเปิดโปรแกรม BlackBerry Desktop Software ขึ้นมา จากนั้นเลือกเมนู Import files… แล้วชี้ไปที่โฟลเดอร์ Standard แล้วเลือกไฟล์ helloworld.alx ก็จะมีไฟล์ helloworld ปรากฏบนรายการโปรแกรม คลิกเครื่องหมายบวกด้านหลัง (แต่ถ้าขึ้นว่า Undo Install ก็ไม่ต้องกดนะ) แล้วกด Apply
    9 - import project

  6. ดูที่เครื่องจริงใน ทำเหมือนรันใน emulator ทุกอย่าง ก็จะได้ดังรูป
    10 - all program

    และสุดท้าย
    11 - run

ขอบคุณข้อมูลจากเว็บนี้

ในความคิดเห็นส่วนตัวของผม เมื่อเทียบกับ Hello world ของ Android กรณีที่ต้องรับค่า แล้วมาแสดงผลนะ ไม่ใช่ Hello แบบที่แสดงแค่ label ผมว่าของ BlackBerry โค้ดดูง่ายกว่ามากเลย ตอนนี้ผมกำลังจะลองพัฒนาแอ็พของ BlackBerry ตัวเดียวกับที่ผมกำลังทำบน Android เพื่อเปรียบเทียบว่าความยากง่ายในการพัฒนาต่างกันมากน้อยแค่ไหน แล้วพบกันใหม่ตอนหน้าครับ

2 thoughts on “[BB] Hello world BlackBerry App

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s