Friday, February 10, 2012

J2ME වැඩසටහන් සඳහා අතුරුමුහුණත් සැකසීම (LWUIT part1)

අපි අද සිට ඉගෙනගන්න යන්නේ J2ME වැඩසටහන් ලිවීමේදී අතුරුමුහුණත් හදන්නෙ කොහොමද කියල. මේ සඳහා ක්‍රම ගණනාවක් තිබුනත් සුදුසුම ක්‍රම 2 ක් විශේශයි. අපි දැන් බලමු ඒ මොනවාද කියල.
  1. LCDUI (Limited Capability Device User Interface) :  මෙය මූලික සහ ප්‍රධානම අතුරු මුහුනත් සැකසීමේ ක්‍රමයයි. සීමාසහිත පහසුකම් තමයි මෙමගින් ලබාගන්න පුලුවන්
  2. LWUIT (Light Weight User Interface Toolkit) : මෙමගින් අපිට පුලුවන් වඩා දියුණු user interface සැකසීමට. Layouts සහ අනෙකුත් බොහොමයක් අපිට හුරු පුරුදු widgets සඳහා මෙහි සහය දක්වනවා. මූලික OOP සංකල්ප ගැන, event handling ගැන අවබෝධයක් තිබේනම්. මෙය සමග වැඩකරන එක බොහොම පහසුයි. එමෙන්ම MIDP 2.0 මත ක්‍රියාත්මක වන device  independent ක්‍රමයක්.
අපි ඉදිරි ලිපි පෙලින් මේ LWUIT ගැන අවබෝධයක් ලබාගැනීමට උත්සාහ කරමු.
  
මේ සම්බන්ද මුල්ම පාඩමෙන් පෙන්වාදුන් නිසා මේ ලිපිය කියවන අය sun wireless toolkit එක බාගත කරගෙන , ස්ථාපනය කරගෙන ඇති කියල සිතනවා.
අපි දැන් පියවරින් පියවර බලමු කොහොමද අතුරුමුහුණත් සැකසීමට LWUIT යොදාගන්නෙ කියල. Official LWUIT tutorial එක බොහොම ප්‍රයෝජනවත් මෙම ලින්ක් එකෙන් ඒ PDF එක භාගත කරගන්න පුලුවන්.

පියවර 1 : අලුත් project එකක් ආරම්භ කිරීම.
File -> New Project -> MIDP Application යන්න තෝරා next ලබාදෙන්න. ඉන්පසු ලැබෙන වින්ඩෝ එකේ ප්‍රොජෙක්ට් එකේ නම ලබාදෙන්න.
"create Hello midlet" untick කරන්න. (screenshot එක බලන්න)
දැන් next ක්ලික් කරන්න. ඉන්පසු ලැබෙන වින්ඩෝවේ ඇති "finish" යන බට්න් එක ක්ලික් කරන්න.

දැන් ඔබට පෙනෙනවා ඇති project panel එකේ අපි ආරම්භ කල ප්‍රොජෙක්ට් එක පෙන්වන ආකාරය.
එහි default package එක යටතේ කිසිඳු midlet එකක් දැකිය නොහැකියි. 

පියවර 2 : LWUIT library එක ප්‍රොජෙක්ට් එකට ඇතුලත් කර ගැනීම.
LWUIT library එක MIDP specification එකට අදාල එකක් නොවේ. එය වෙනම library එකක්. එම නිසා එය අපගේ ප්‍රොජෙක්ට් එකට අන්තර්ගත කරගැනීම කල යුතුයි.
මේ සඳහා අපේ ප්‍රොජෙක්ට් එක යටතේ පවතින  "resources" මත right click කර "add library" තෝරාගබ්න්න. ඉන්පසු ලැබෙන ලිස්ට් එකෙන් LWUIT තෝරාගෙන "add library" ක්ලික් කරන්න.

පියවර 3 : වැඩසටහන්කරණය සිදුකිරීම
දැන් අපිට පුලුවන් අලුත් midlet එකක් හදාගෙන වැඩසටහන ආරම්භ කිරීමට. ඒ සදහා default package එක මත right click කර new->midlet තෝරාගන්න.
midlet එකට නමක් දෙන්න.
ඉන්පසු අලුතින් ඇතුලත් කල midlet එකට අදාලව පහත ආකාරයෙන් කේතයක් ස්වංක්‍රීයව ලැබිය යුතුය.
import javax.microedition.midlet.*;

/**
 * @author Kanishka
 */
public class FirstMidlet extends MIDlet {
    public void startApp() {
    }

    public void pauseApp() {
    }

    public void destroyApp(boolean unconditional) {
    }
}
දැන් අපි බලමු සරල වැඩසටහනක් ලියන අන්දම.
 
import com.sun.lwuit.Display;
import com.sun.lwuit.Form;
import com.sun.lwuit.Image;
import com.sun.lwuit.Label;
import com.sun.lwuit.layouts.BorderLayout;
import java.io.IOException;
import javax.microedition.midlet.*;

/**
 * @author Kanishka
 */
public class FirstMidlet extends MIDlet {
    public void startApp() {
        Display.init(this);
        Form f = new Form("My LWUIT Demo");
        f.setLayout(new BorderLayout());

        Image img;
        try {
            img = Image.createImage("/img/img.png");

            Label centerLabel = new Label("Center Label");
            centerLabel.setIcon(img);
            f.addComponent(BorderLayout.CENTER, centerLabel);
            f.addComponent(BorderLayout.NORTH, new Label("North Label"));
            f.show();
        } catch (IOException ex) {
            ex.printStackTrace();
        }
    }

    public void pauseApp() {
    }

    public void destroyApp(boolean unconditional) {
    }
}
පැහැදිලි කිරීම .
Line 14 : Display.init(this);
මෙහිදී අප සිදුකරනුලේ lwuit framework එක initialize කිරීමයි. 
Line 15 : Form f = new Form("My LWUIT Demo");
මෙහිදී අපි විසින් UI එකට අදාල form object එක සකසාගැනීම සිදුකරනවා. ඉදිරියේදී UI එකට අදාල widgets ඇතුලත් කරනු ලබන්නේ මේ form object එක යටතේයි.
Line 16 : f.setLayout(new BorderLayout()); 
layout එක set කිරීම මෙහිදී සිදුකෙරෙනවා. එය form object එකට අදාලවයි සිදුකරන්නේ. අපි ඉදිරි පාඩම්වලදී බලමු layout පිලිබඳව.
Line 22 : Label centerLabel = new Label("Center Label");
ලේබල් object එක සකසාගැනීම මෙහිදී සිදුකෙරේ.
Line 24: f.addComponent(BorderLayout.CENTER, centerLabel);
අප create කරගත් Label object එක form එකට ඇතුලත් කරගැනීම මෙහිදී සිදුකෙරේ. අප form එකට ලබාදී ඇත්තේ Border layout එක නිසා ලේබල් එක ස්ථානගතවිය යුත්තේ කවර ආකාරයෙන්ද යන්නත් මෙහිදී සඳහන් කර තිබෙනවා BorderLayout.CENTER 
Line 26 : f.show();
මෙමගින් සිදුකරන්නේ form object එක ජංගම දුරකතන තිරයේ දර්ශනය වීමට සැලැස්වීමයි.

අපි දැන් මෙහි  output එක විමසා බලමු.
ඉදිරි පාඩම් වලදී අනෙකුත් widgets පිලිබදව සොයාබලමු.

9 comments:

  1. patta patta me lipi peliya eka digatama yanawa nam tama watinne ..idala hitala dana kota itin ...

    ReplyDelete
  2. hena kalekin post 1k awe :( ilaga post 1 ikmanata dannoooooo.........

    ReplyDelete
  3. අම්මෝ කාලෙකින් බලාගෙන හිටිය මේ ලිපි වැටෙනකන්. ඇප් හදන්න මූලික අඩිතාලම ඔයාගෙන තමා දාගන්න වෙන්නෙ. දිගටම ලියන්න. Tnanks

    ReplyDelete
  4. @All
    සමාවෙන්න ප්‍රමාදයට සහ අපහසුතාවයක් වුනානම්.
    හැකි ඉක්මනින් ඉදිරි ලිපිත් පලකරන්නම්. අධ්‍යාපන කටයුතු නිසා කාල වේලාව පිලිබඳ ගැටලු තිබුනා ඒකයි ප්‍රමාදවුනේ.

    ReplyDelete
  5. පස්ටම පස්ටයි,,, :)))
    lwuit එකෙන් කිසිම ගේමක් නැතුව අපේ ඇප් එකට සිංහල උනත් දාන්න පුලුවන්, බොහොම ස්තුතියි lwuit එක හදුන්වලා දුන්නට

    ReplyDelete
  6. I enjoy reading write-up. Hope i can discover a lot more articles like this one. Thanks for posting.

    ReplyDelete
  7. patta post tika ubanam supiri buwek... ubata pin machan meme weteda godak...ikmanta update karanda yaluwa meka welawak lebuna gamanma....

    ReplyDelete
  8. ane meka ikmanata update karanana api balan ionnwa....
    godak pin me dakwa dala thiyena padam walata ....

    ReplyDelete
  9. marama watina lipi tikak , mekata puluwa puluwan welawata aluth post danawa nam godak watinawa.....

    ReplyDelete