Windows mobile apps හදමු - Part 5 ( Layouts )

Grid layout

මේ ලිපියෙන් කතා කරමු XAML Layouts ගැන.layout එක කියන්නේ interface එකේ components පිහිටන ආකෘතිය..මේ ලිපියෙන් කතා කෙරෙන්නේ grid layout එක ගැන

අලුත් app එකක් open කරගන්න.සාමාන්යෙන් interface එකක් layout එක විදියට default තියෙන්නෙත් grid layout එකක්.ඒ කියන්නේ කොටු දැලක විදියේ ආකෘතියක්.mainpage.xaml එක open කලාම ඉහලින්ම import ටිකත් ඊට පහලින් grid layout ටැග් දෙකත් දකින්න ලැබේවි.ටැග් දෙක ඇතුලට පහල තියෙන code එක දාගන්න

<Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Rectangle Height="200" Fill="Red" Grid.Row="0"/>
        <Rectangle Grid.Row="1" Fill="Green"/>

මෙතැනදී මුලින්ම grid එකේ row එකක් කොහොම වෙන්න ඕනෙද කියල කියල තියෙනවා

<Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

ඊට පස්සේ හැදෙන්න ඕනේ row දෙකක rectangle දෙකක් define කරලා තියෙනවා..

<Rectangle Height="200" Fill="Red" Grid.Row="0"/>
        <Rectangle Grid.Row="1" Fill="Green"/>

පලවෙනි rectangle එකේ row එක 0 විදියටත්,දෙවැනි row එක 1 විදයටත් define කරලා තියෙනවා

පලවෙනි rectangle එකේ උස 200ක් විදියටත් ,colour එක red විදියටත් දීල තියෙනවා

දෙවැනි rectangle එකට  උසක් දීල නැහැ ,colour එක green විදියට දීල තියෙනවා.මෙතැනදී මුලින් 200ක් උස rectangle එක හැදුනට පස්සේ තියෙන සම්පුර්න උසම අරගෙන තියෙනවා දෙවනි rectangle එකට.එහෙම වුනේ මේ grid layout එකට define කරලා තියෙන්නේ row දෙකයි.ඒ නිසා සම්පුර්ණ grid එක row දෙකකට බෙදිලා තියෙනවා..

දැන් <Rectangle Height="200" Grid.Row="1" Fill="Green"/> විදියට වෙනස් කරලා දෙවැනි  rectangle එකට 200ක උසක් දෙන්න...

මෙතැනිදී දෙවැනි rectangle එක 200ක උසට හැදිලා row එකේ මැදට align වෙලා තියෙනවා...අපි define කරන row ගානට අනුව layout එක හැදෙනවා.මේ දෙවැනි rectangle එක අපිට ඕනේ විදියට align කරගන්න පුළුවන්.

<Rectangle Height="200" Grid.Row="1" Fill="Green" VerticalAlignment="Top"/>

<Rectangle Height="200" Grid.Row="1" Fill="Green" VerticalAlignment="Bottom"/>

ඊලග ලිපියෙන් grid layout එක ගැන තව දුරටත් කතා කරමු...

Read More

Windows mobile apps හදමු - Part 4

කලින් ලිපියෙන් කතා කලේ interface එකට අදාළ XAML file එක ගැනනේ.අද cs file එක එහෙම නැත්තන් code එකට අදාල file එක ගැන කතා කරමු.
මේ තියෙන්නේ C# class එකක්.මේකේ ඉහලම තියෙන්නේ class එකට import කරගත්තු sources.

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

ඊට පහලින් namespace project_1 කියල තියෙන්නේ package එක.ඊට පහලින් class එක තියෙනවා..class එක ඇතුලේ තමා අනිත් සේරම දේවල් තියෙන්නේ.class එක තියෙන package එක සහ class එකට අවශ්‍ය imports තමා අර උඩින් තියෙන්නේ

class එක ඇතුලේ

public MainPage()
        {
            this.InitializeComponent();

            this.NavigationCacheMode = NavigationCacheMode.Required;
        }

මේ තියෙන්නේ instructor එක.ඒ කියන්නේ මේ class එක රුන් වෙද්දීම් වෙන්න ඕනේ දේවල් ලියන්නේ මේක ඇතුලේ.මෙහෙම කියමුකෝ.මේ app එක open වෙද්දී අපිට textblock එකේ hello කියල වැටෙන්න හදාගන්න ඕනේ නම් අදාළ code එක ලියන්න ඕනේ මේකේ

public MainPage()
        {
            this.InitializeComponent();

            this.NavigationCacheMode = NavigationCacheMode.Required;

                      tb1.Text = "Hello";

        }

ඊට පහලින් තමා component වලට අදාළ code තියෙන්නේ

private void but1_Click(object sender, RoutedEventArgs e)
        {
            String a=Text1.Text;
            tb1.Text = a;
        }

මේ code ඒකේ ලියල තියෙන්නේ button එක click කරද්දී මොකද්ද වෙන්න ඕනේ කියලා.මේ ටික තමයි විශේෂයෙන් කියන්න තියෙන්නේ.ඊළග ලිපියෙන් බලමු app එකේ layout හදාගන්න විදිය ගැන....

Read More

Windows mobile apps හදමු - Part 3

මේ ලිපියෙන් අපි component  ගැන ටිකක් කතා කරමු.app එකේ interface design එක හදාගන්න විදිය මම කියල දුන්නනේ.Solution explorer එකේ MainPage.xaml file එකේනේ interface design එක තියෙන්නේ.ඒක double click කරලා open කරලා ගත්තම design preview එකයි code එකයි දෙකම පෙන්නවා.වම් පැත්තේ තියෙන toolbox එකේ තමා components තියෙන්නේ.ඒවා select කරලා interface එකේ අදාළ තැන ඕනේ size එකට ඇඳ ගන්න ඕනේ

දැන් properties window එකෙන්(දකුණු කෙලවරේ පහල) ඒ component එකට අදාල properties වෙනස් කරගන්න පුළුවන්.

අංක 1 - name - මෙතන වැදගත්ම propertie එකක් තමා name එක.මෙතන දෙන name එකෙන් තමා code එකේදී component ඒක හදුනා ගන්නේ.දැන් බලමු interface එකයි code එකයි එකට අරගෙන

මෙතන <page> කියන ටැග් එකෙන් තමා මේ page එක පටන් අරන් තියෙන්නේ.</page> ටැග් එකෙන් තමා page එක ඉවර වෙන්නේ.මේ දෙක අතර තමයි අනිත් සේරම ලියන්න ඕනේ.HTML , XML දන්නා අයට නම් ටැග් කියන්නේ අමුතු දෙයක් නෙවේනේ.XAML කියන්නෙත් XMLම තමයි.Mark up language එකක්.

<Grid> </Grid>ටැග් වලින් කියල තියෙන්නේ screen එකේ layout එක කොහොම වෙන්න ඕනෙද කියල.මේකෙදි පාවිච්චි කරලා තියෙන්නේ Grid layout එකක්.ඒ දෙකට ඉහලින් තියෙන code වලින් කරලා තියෙන්නේ මේ file එකට අවශ්‍ය sources import කරගන්න එක.

layout එක ඇතුලෙ තමා අනිත් සේරම component තියෙන්නේ.අපිට ඕනේ නම් design එකේදී අදින්නේ නැතුව code එකේදී අතින් ලියල උනත් component දාගන්න පුළුවන්.

<Button x:Name="but1"
                HorizontalAlignment="Center" 
                 Height="60" Margin="0,400,0,0" 
                 Content="OK"
                 VerticalAlignment="Top" Width="100" 
        />

මේ code එක දාල බලන්න.button එකක් design වේවි මේ code එකට අදාලව

මුලින්ම බලමු textbox එකේ code ඒක ගැන

<TextBox x:Name="Text1"
                 HorizontalAlignment="Left"
                 Height="45" Margin="48,325,0,0"
                 TextWrapping="Wrap" Text=""
                 VerticalAlignment="Top" Width="300"

                 />

මේකෙදි ඔයාලට පෙනේවි එකම ටැග් ඒක ඇතුලේ code ටික දාල තියෙන බව.start ටැග් එකකුයි end ටැග් එකකුයි දෙකක් පාවිච්චි නොකර.එත් දෙකක් පාවිච්චි කරලත් දාන්න පුළුවන්.මෙන්න මෙහෙම

<TextBox x:Name="Text1"
                 HorizontalAlignment="Left"
                 Height="45" Margin="48,325,0,0"
                 TextWrapping="Wrap" Text=""
                 VerticalAlignment="Top" Width="300"
>

< /TextBox>

start ටැග් එකේදී තමයි මේ component එකට අදාල properties දෙන්න ඕනේ..

 x:Name="Text1" - component එකේ නම
HorizontalAlignment="Left" - තිරස් අතට align වෙන්න ඕනේ කොතෙන්ටද කියන එක
Height="45" - component එකේ උස
Margin="48,325,0,0" - component margin වල අගයන්
TextWrapping="Wrap"
Text="" - component ඒක මත පෙන්නන්න ඕනේ value එක
VerticalAlignment="Top"  - සිරස් අතට align වෙන්න ඕනේ කොතෙන්ටද කියන එක
Width="300" - component එකේ දිග

මම මේ ගත්තේ textbox එකක properties..දැන් බලමු button එකේ

x:Name="but1" - component එකේ නම
HorizontalAlignment="Center" - තිරස් අතට align වෙන්න ඕනේ කොතෙන්ටද කියන එක
Height="60" - component එකේ උස
Margin="0,400,0,0"  - component margin වල අගයන්
Content="OK" - component ඒක මත පෙන්නන්න ඕනේ value එක
VerticalAlignment="Top"  - සිරස් අතට align වෙන්න ඕනේ කොතෙන්ටද කියන එක
Width="100"  - component එකේ දිග

මේ දෙකේ component ඒක මත පෙන්නන්න ඕනේ value එක තියෙන්නේ textbox එකේ text කියන property එක විදිහට.button එකේ content කියල property එකක් විදිහට.අනිත් සේරම සමානයි..සමානයි කියන්නේ ඒවා හැම component එකටම පොදු properties අර වෙනස් උනේ component එකෙන් component එකට ආවේනික උන properties..ඊලග ලිපියෙන් xaml.cs file එක ගැන කතා කරමු

Read More

ඔයාගේ java prgramme එකට MySQL database එකක් connect කරගන්න...

JDBC Technology කියන්නේ java වල තියෙන API එකක්. මේක Java SE වල වගේම Java EE වලත් තියෙනවා.මේ API එක පාවිච්චි කරන්නේ Database  connection හදාගැනීමටයි.අද මම කියල දෙන්නේ මේ API එකේ JDBC driver classes පාවිච්චි කරලා MySQL database එකකට connection එකක් හදාගන්න class එකක් ලියාගැනීම ,  සහ ජාවා programme එකක් සමග ඒ class එක වැඩකරවීම ගැනයි

මේ වැඩේට අපිට mysql-connector jar file එක ඕනේ වෙනවා..ඒක මෙතනින් ගන්න

JDBC class එක මෙතනින් ගන්න

මුලින්ම class එක හදාගමු.නිල් පාටින් code එකත් අනිත් පාට වලින් ඒ ඒ line එකෙන් වෙන දේත් දාල තියෙන්නේ

public class JDBC {

    String driver = "com.mysql.jdbc.Driver";  

//connector jar file එකේ Driver classes එක තියෙන path එක driver කියල string එකක් හදල එකට assign කරගන්නවා

    String url = "jdbc:mysql://localhost:3307/test"; 

//database එකට අදාළ path එක url කියල string එකක් හදල එකට assign කරගන්නවා

localhost කියන්නේ  sql server එක දුවන host එක.3307 කියන්නේ port එක.test කියල තියෙන්නේ database එකේ නම

    Connection getConnection() throws Exception { 

// getConnection() කියල method එකක් හදනවා.Connection එකක් return කරන.( return value එක Connection දාල තියෙන්නේ මුලම )

        Class.forName(driver); 

//class කියන class එකේ forname කියන method එකට අර උඩින් හැදුව driver string එක ඒ කියන්නේ Driver class එක තියෙන path එක pass කරනවා.මේ  forname,class කියන ඒවා connector jar file එක ඇතුලේ දැනටමත් හදල තියෙන දේවල්

        Connection con = DriverManager.getConnection(url, "root", "123");

DriverManager කියන class එකේ getConnection කියන method එකට  අර උඩින් හැදුව url string එක,username එක හා password එක දීල තයෙනවා.මේ ටික දුන්නම මේ method එකෙන් Connection එකක් return වෙනවා.ඒක con කියල reference එකකින් අල්ලලා තියෙනවා.

        return con;      //අර අල්ලගත්තු Connection එක  return කරනවා

    }

    public void putData(String sql) {

//putdata කියල public ඒ කියන්නේ ඕනේ තැනක ඉදන් access කරන්න පුළුවන් method එකක් හදා ගන්නවා string parameter එකක් එක්ක.මේකෙන් වැඩගන්න නම්  string එකක් pass කරන්න ඕනේ.එතෙන්ට pass කරන්නේ query එක 

        try {     //try catch එකක් දාගන්නවා

            Statement state = getConnection().createStatement();

//state කියලා statement එකක් හදලා එකෙන් getConnection කියන method එකේ  createStatement කියන method එක පාවිච්චි කරලා හදපු statement object එක අල්ලගන්නවා

            state.executeUpdate(sql);

//ඒ statement object එකේ executeUpdate කියන method එකට sql කියන string එක pass කරලා තියෙනවා.මේ executeUpdate method එකෙන් තමා query එක execute කරන්නේ

        } catch (Exception ex) {

        }

    }

    public ResultSet getData(String sql) throws Exception {

//getdata කියල public ඒ කියන්නේ ඕනේ තැනක ඉදන් access කරන්න පුළුවන් method එකක් හදා ගන්නවා string parameter එකක් එක්ක.මේකෙන් වැඩගන්න නම්  string එකක් pass කරන්න ඕනේ.එතෙන්ට pass කරන්නේ query එක .මේකේ return value එකක් දාල තියෙනවා.resultset එකක්.මේ method ඒක run කරාම query එකට අදාළ results return වෙනවා

        Statement state = getConnection().createStatement();

//state කියලා statement එකක් හදලා එකෙන් getConnection කියන method එකේ  createStatement කියන method එක පාවිච්චි කරලා හදපු statement object එක අල්ලගන්නවා

        ResultSet rset = state.executeQuery(sql);

//ඒ statement object එකේ executeUpdate කියන method එකට sql කියන string එක pass කරලා තියෙනවා.මේ executeUpdate method එකෙන් තමා query එක execute කරන්නේ.මේකෙන් එන results rset කියල හදපු reference එකකින් අල්ලගන්නවා

        return rset;         //rset එකේ value return කරනවා

    }

}

මේ විදිහේ class එකක් හදල database ඒක මෙහෙයවන්න සිංහලෙන් කියනවනම් manipulate කරගන්න ලියපු class එකේ ප්‍රධාන පියවර ටික එන්නේ මෙහෙමයි

මුලින්ම JDBC driver classes අපි ලියන class එකට load කරගෙන සහ ඒවා අපිට අවශ්‍ය database එකට  register කරන් තියෙනවා

String driver = "com.mysql.jdbc.Driver";String url = "jdbc:mysql://localhost:3307/test";

ඊළගට connection object එකක් හදල database server එකට ඇති connection එක අල්ලන් තියෙනවා

Connection getConnection() throws Exception {
        Class.forName(driver);
        Connection con = DriverManager.getConnection(url, "root", "123");
        return con;
    }

ඊළගට Statement objects හදාගෙන තියෙනවා

Statement state = getConnection().createStatement();

ඊළගටStatement objects පාවිච්චි කරලා  database එක manipulate කිරලා තියෙනවා.ඒ කියන්නේ add,delete,update queries run කරලා තියෙනවා

state.executeUpdate(sql);

මේ class එක පාවිච්චි කරලා java programme එකක් ලියන විදිය ගැන පොඩි video එකක් හැදුවා.ඒක පහලින් බලන්න.

Youtube

Dropbox (37MB)

Read More

Windows mobile apps හදමු - Part 2

අද කියල දෙන්නම් windows mobile app එකක් ලියන විදිය..කලින් ලිපිය බැලුවේ නැති අය මෙතනින් ඒ ලිපිය බලල එන්න

New project එකක් open කරගන්න..දකුණු පැත්තේ solution explorer window එකෙන් MainPage.xaml එක double click කරලා open කරගන්න.එතකොට app එකේ design view එක open වේවි..

windows mobile app එකක Design එක හදන්නේ xaml file එකක් විදියට..දැන් වම් කෙලවරේ තියෙන Toolbox මෙනු එක ගන්න..ඒකෙන් textbox එකක්,textblock එකක් සහ button එකක් අරන් දාගන්න..දාල ලස්සනට design එක හදාගන්න.මම කරන්න යන්නේ textbox එකේ මොකක් හරි ලියල button එක එබුවම ඒ text එක textblock එකේ පෙන්නන්න..මේක ගොඩක් පොඩි දෙයක්..

Textblock එක උඩ click කරලා properties window එකට ගිහින් (දකුණු කෙලවරේ පහල) මෙන්න මේ settings වෙනස් කරගන්න.

Name - Textblock1 (code කරද්දී මේ Textblock එක හදුනාගන්නේ මෙතනට දෙන නමින්)
Text යටතේ size එක 30ක් වගේ දෙන්න.alignment center කරගන්න

අනිත් component දෙකත් Textbox1 , Button1 විදියටත් ඒවගේ text size සහ alignment එකත් හදාගන්න

Button එකේ double click කරලා එකේ text එක ok කියලත් අනිත් දෙකේ text මකලත් දාන්න

දැන් button එක උඩ එකපාරක් click කරලා ආයේ double click කරන්න.එතකොට code කරන්න ඕනේ file එක ඒ කියන්නේ MainPage.xaml.cs file එක open වේවි.එහෙම නැත්තන් solution explorer එකේ MainPage.xaml එක expand කරගන්න(ඉස්සරහ තියෙනේ ඊහිසේ click කරලා).ඒ යටතේ MainPage.xaml.cs file එක ඇති.ඒක open කරගන්න


දැන් පහල විදියට code කරන්න

 private void Button1_Click(object sender, RoutedEventArgs e)
        {
              මෙන්න මෙතන code කරන්න ගන්න
        }


            String a = Textbox1.Text;
            Textblock1.Text = a;

පොඩි දෙයක් කරලා තියෙන්නේ..අලුතින් String එකක් හදාගෙන තියෙනවා a කියල.

ඒකට textbox එකෙන් එන value එක පාස් කරලා තියෙනවා

ඊට පස්සේ textblock එකට ඒ value එක සෙට් කරලා තියෙනවා.       

String a = Textbox1.Text;
Textblock1.Text = a;

දැන් app එක run කරලා බලමු.වැඩද කියලා...

මෙන්න මගේ emulator එකේ screenshot එක.තවත් අලුත් දෙයක් එක්ක ඊලග ලිපියෙන් හම්බෙමු...

Read More

SQLite පාවිච්චි කරනව නම් මෙන්න නියම IDE එකක්

Android සහ Windows mobile apps develop කරන අය අතර ගොඩක් ප්‍රසිද්ධයිනෙ මේ SQLite.මම කලින් දවසක කියල දුන්නනේ java app එකක් එක්කත් SQLite database එකක් පාවිච්චි කරන හැටි.SQLite වල තියෙන වාසිය database ඒක තනි file එකක් විදියට තියෙන ඒක.ඒ නිසා වෙනත් කෙනෙක්ගේ computer එකකදි උනත් SQL install කරන්නේ නැතුව මේ database ඒක වැඩ කරවන්න පුළුවන්..
       SQLite site එකෙන් දෙන්නේ command line shell එකක්නේ.ඒත් මට හම්බුනා මේකට හොද IDE එකක්.සමහර ඇය firefox වල තියෙන SQLite manager addon එකෙන්නේ වැඩ කරන්නේ.ඒත් මේක ඊට වඩා ලේසියි.ඒ වගේම install කරන්න දේකුත් නැහැ.මේක portable app එකක්.ඔන්න screen shot එකකුත් දැම්මා

IDEඒක මෙතනින් ගන්න

Read More

විවිද හැඩවලින් jframes හදන හැටි....

ජාවා වලින් programming කරන අයට වැදගත් වෙන දෙයක් අද ගෙනාවා..කව්රුත් දන්නවනේ jframes ගැන,සාමාන්යෙන් කොටු හැඩයක්නේ තියෙන්නේ.ඒත් මේ tutorial එක විවිද හැඩවල jframes හදා ගන්න විදිය ගැන....

source code එක මෙතනින් ගන්න
video එක මෙතනින් ගන්න (16MB)

Read More

word document එකක තියෙන images ඔක්කොම එක සමාන පළලකට Resize කරමු

word document එකක තියෙන images ඔක්කොම එක සමාන පළලකට Resize කරන්න පහසුකමක් word වලින් දීලා නැහැ.මම අද කියල දෙන්නේ macros හා Visual Basic පාවිච්චි කරලා මේක ලේසියෙන්ම කරගන්නා විදියයි.

මුලින්ම word වල view ටැබ් එකට යන්න.ඊට පස්සේ ඒකෙ macros කියන menu එකෙන් view macros තෝරන්න.

ඒ එන window එකේ Macro name එක විදියට NewMacros දීලා අලුත් macro එකක් create  කරගන්න

ඒත් එක්කම visual basic editor එක open වේවි.එකේ තියෙන code එක මකල පහල තියෙන code එක ඒකට paste කරලා save කරලා macro එක close කරන්න

Sub resizeImages()
UserForm1.Show
End Sub

ඊට පස්සේ form වල right click කරලා insert වල userform කියන එක තෝරන්න.දැන් අපි පොඩි interface එකක් design කරන්න යන්නේ

Userform එකට text box එකක් ,labels දෙකක්, spin button එකක් සහ command buttons දෙකක් add කරගන්න.layout එක පහල විදියට හදාගන්න

ඊට පස්සේ එක එක component එක උඩ click කරලා properties menu එකේ caption කියන තැනින් මේවාගේ text edit කරන්න.පහල විදියට

spin control එකේ properties වල Max: 150 (ඒ කියන්නේ 15cm ), Min: 20 , Value: 50විදියට වෙනස් කරගන්න.

දැන් text box එකේ properties වල Value: 5 , Locked : True විදියට වෙනස් කරගන්න.

දැන් code කරන්න පටන් ගන්න යන්නේ.හැම component එක උඩම double click කලාම code coding window එක open වෙනවා.එකේ Sub සහ End Sub code line දෙක මැද code කරන්න.code කරලා save කරලා exit කරන්න

Spin Control code:
TextBox1.Value = SpinButton1.Value / 10

Exit button code:
Unload me

Resize Images button code:
Dim insertedPicture As InlineShape
Dim insertedShape As Shape
Dim imgMult As Single
imgMult = TextBox1.Value * 28.34

For Each insertedPicture In ActiveDocument.InlineShapes
insertedPicture.Select
insertedPictureHeight = insertedPictureHeight * imgMult / insertedPicture.Width
insertedPicture.Width = imgMult
Next

For Each insertedShape In ActiveDocument.Shapes
insertedShape.Select
insertedShape.Height = insertedShape.Height * imgMult / insertedShape.Width
insertedShape.Width = imgMult

Next

Unload Me

දැන් වැඩේ ගොඩ.visual basic editor එකේ ඔක්කොම close කරලා word doc එකට යන්න.imagesම ටික ඔක්කොම add කරගන්න.add කරලා ඔක්කොම select කරගන්න.දැන් view ටැබ් එකට යන්න.ඊට පස්සේ ඒකෙ macros කියන menu එකෙන් view macros තෝරන්න.

දැන් අපි හැදුව resize images macro එක run කරන්න

දැන් අපි හැදුව form එක පෙන්නනවා.දැන් resize වෙන්න ඕනේ පළල cm වලින් තෝරන්න.ඊට පස්සේ
resize කරන්න.එල නේද?මෙන්න result

Read More