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

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

Windows mobile apps හදමු - Part 1

මේ කාලේ හැමෝම අතර ජනප්‍රිය මාතෘකාවක්නේ mobile apps developing කියන්නේ.ගොඩක් කට්ටිය කියල දෙනවනේ android developing ගැන.මම කියල දෙන්න යන්නේ windows mobile apps developing ගැන.windows mobile apps develop කරන්නේ C# වලින්.ඒ නිසා මුලින්ම කියන්න ඕනේ මේකට C# දැනුම ටිකක් ඕනේ.ඒ නැතත් java හරි වෙනත් programming language එකක් ගැන දන්නා කෙනෙක්ට උනත් කරගන්න අමාරු නැහැ.

windows mobile apps develop කරන්න නම් windows mobile sdk එක ඕනේ.sdk කියන්නේ මොකද්ද කියලනම් දන්නව ඇතිනේ.sdk එකෙන් කරන්නේ windows mobile apps develop කරන්න සහ run කරන්න ඕනේ background එක හදල දෙන ඒක.මේකට   visual studio 2013 දාගන්න  ඕනේ.pro එකක්ම ඕනේ නැහැ.free දෙන express for windows version එක තිබ්බම හොදටම ඇති.මුලින්ම ඒක install කරන ඉන්න.ඊළගට account එකක් හදල ඒක register කරගන්න

දැන් ඒකෙ file - new ගිහාම එන popup window එකේ  visual C# -store apps යටතේ windows phone apps කියන category එකෙන් blank app තෝරලා පහල  name කියන තැනට නමක් දීලා ok කරන්න.

දැන් ඒ app ඒක run කරලා බලන්න.මේ විදියට

run කරද්දී hyper-v ගැන error එකක් එයි,,,එහෙම එන්නේ නැතුව run වෙනවනම් පහල කියන දේවල් කරන්න ඕනේ නැහැ.run වෙන්නේ නැති කට්ටිය ඒ error message එකේම තියෙන turn on hyper v කියන තැන click කරන්න

ඊට පස්සේ එන window එකේ hyper v ඉස්සරහට tick එක දාල ok කරන්න,එතකොට hyper v enable වෙලා restart වෙන්න අහාවි.restart දෙන්න

ඒත් වැඩ කලේ නැත්තන් bios settings වල virtualization technology එක enable කරලා ආයේ  hyper v enable කරන්න..

hyper v enable කරන්න Control Panel -- Programs -- Turn windows features on or off වලිනුත් පුළුවන්.hyper v enable කලාට පස්සේ ඔයාගේ com එකෙත් emulator එක run වේවි.මේක තනිකරම windows phone එකක clone එකක්.මේකේ තමයි අපි ඉස්සරහට ලියන app සේරම run කරන්නේ.දැන් windows mobile apps develop කරන්න සහ run කරන්න ඕනේ background එක හදල ඉවරයි..ඊලග ලිපියෙන් developing පටාන් ගමු....

Read More