Silverlight Hello World – Cebuano!!!

Wala ba’y klaro? Nganong hello world man? Grabe ah.. silverlight nya hello world? Wala ka’y mahimo.. silverlight lagi.. dili expression studio. Unya nlng nang storyaa oi.

Sa kani nga blog, ipakita usa nako ninyo ang mga butang, nga sa tan-aw nako nga mahimong importante. Katong mga kalahian sa simple web app o website gawas sa usa ka silverlight application.

Ang mga kinahanglanon kay:

1. Visual Studio 2008 ( Kay sa framework 3.5 ang Silverlight mo gana)

2. Siverlight Chainer – kani kay usa ka executable file nga makita sa www.silverlight.net ug kani ang mo – install sa inyong computer nga runtime sa silverlight ug uban pang mga tools nga imong kinahanglanon.

3. alangan kinahanglanon gyud nimo ang internet connection. Kung nabasa nimo ang blog karon pero wala kay internet connection.. syempre, mahibong jud ka! Or, gihatagan tika ug offline nga kopya.. importante na sad kay ka noh..

Ug sa dihang sugdan ni nato.

Para maka sigurado ka nga sakto imong pag install sa silverlight chainer.. kinahanglan makita ni nimo nga menu..

image

Kung ng click na ang FILE – NEW – PROJECT sa Visual Studio 2008. Kung wala ni.. imong balikon ug install para maka subay ka namo..

Mag himo na ko ug bag-ong project. Ug sunod mao ni ang makita..

image

Ang iyang pangutan-on kay:

* Add a new ASP.Net Web Project to the solution host Silverlight – kani ang default ug kani sad ang akong gi rikomendar. Ngano? Wala lang. trip lang nako.. hehe.. ang tinuod ana.. kung ang imong bahaton kay usa ka project o website nga mo himo ug mga http calls.. reference sa webservice.. mga ing-ana.. kani ang pilion.. kay ang usa:

* Automatically generate a test page chorva.. HTML page lang na. walay bili.

Mao na nga ang akong gi pili ky ang default.. ug mao ni ang mo atubang nimo..

image

Mao na ni.. sugod na ang gubot.. Kani ang tinuod nga rason kung ngano usa ka simple nga hello world application usa ang atong sugdan.. Ang gusto unta nako nga e explain kay kung unsa to ang mga parti sa usa ka silverlight web application.

Imong makit-an sa Solution Explorer nga naa dayo’y duha ka project. Ang SLDemo2 ug ang SLDemo2.web, nga mao ang default nga project. Mas pariha ang usa ka regular nga asp.net application ang SLDemo2.web kay kani ang naay Default.aspx diba? Pero hangtod ra ngadto ang pag ka pariho nila.

Sa usa ka SL application, naa kay mga bag-o nga files.. Page.xaml, App.xaml ug SlDemo2.xap (pronounced ZAP ug naa sa suds a ClientBin nga folder). Naa sad kay SLDemo2Testpage.aspx (mao ni ang mo andar as default page, ang Default.aspx dili to magamit), SLDemo2Testpage.html. Ang kaning mga page, mao ni ang mo silbi nga “host” sa atong SL App (katong Page.xaml). Ato ning usa-usahon para mas mag kasinabot ta ug tarong ok?

Atong tan-awon ang code sa html ug ang aspx page:

image image

Naa sa wala ang HTML ug naa sa tuo ang ASPX. Ang sud ana karon ky ang holder sa silverlight control nato nga ato pa buhaton. Ug kung kugihan ka mangita.. makit-an nimo nga pariho sila nga ng point sa SLDemo2.xap.

So, unsa may pangutana karon.. Asa ana sa duha ka page ang atong sudlan sa atong mga Silverlight controls? Ang tubag.. WALA!

Adto ta sa Page.xaml mag butang ug controls, ug sa Page.xaml.cs ta mag butang ug code.. Tuana.. nag sugod na ka ug ka libog.. Ingon bitaw ko nga hello world usa ta..

Pariho sa katong akong gi sulti ganina.. ang aspx nga gihatag sa ato ky mag silbi lang nga HOST sa atong SL App (Silverlight Application). Ug kung ang atong usbon kay ang page, adto ta sa aspx o html. Pero kung ang atong buhaton kay sa Silverlight.. adto ta sa xaml.

Mao ni ang default nga code sa atong Page.xaml

image

Naa kay makit-an nga grid control.. mao ra na ang sulod. Naa pay laing mga controls (pariho sa Grid, StackPanel ug uban pa.. nga pwde natong magamit pero sa sunod na lang nga blog ok?

Karon mag butang na ta ug SL controls.. ang akong plano ky usa ka simple nga Hello World mao nga usa ka textbox (para display) usa ka buttong ( para naa sad ta’y ma click para dili boring) .

Mao ni ang mo gawas nga code sa taas nako nga gi suwat nga lingaw kaayo sa intellisense..

<UserControl x:Class="SLDemo2.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        <StackPanel Orientation="Vertical">
            <TextBox x:Name="txtHello" FontSize="20"></TextBox>
            <Button x:Name="btnShowhello" Content="Click Me!" FontSize="20" Click="btnShowhello_Click"></Button>
        </StackPanel>
    </Grid>
</UserControl>

Dili na screenshot ako gikuha para maka copy and paste mo! 😉

Ato tan-awon ang kada linya.

<TextBox x:Name="txtHello" FontSize="20"></TextBox> ß wala lang. walay kwenta nga textbox ug walay sulod. Simple lang. ako lang gi pa dak-an ang font para makita dayon. Ug bantayi kung gi unsa pag hatag ug pangalan.. (x:Name=””) mao na ang sytax sa xaml.

Button x:Name="btnShowhello" Content="Click Me!" FontSize="20" Click="btnShowhello_Click"></Button> <– diri sad kay naa kay makit-an ka nga sigurado nga gawas sa name property ug sa font size. Naa sad niy event handler. Kung nag copy-paste ka sa code.. dili nimo makita gi unsa pag butang ug intellisense sa eventhandler niya.

Karon, ang pangutana na sad.. asa ibutang ang code behind? E right click nimo ang event handler dayon..

image

Ug maka adto ka sa Event handler.. asa nga file? Sa Page.xaml.cs

namespace SLDemo2
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
        }

        private void btnShowhello_Click(object sender, RoutedEventArgs e)
        {

        }
    }
}

Ug diri na ka mag butang ug code.

Kung maayo nimo pagkabuhat ang kani nga sample.. naa dayon ka’y txtHello nga intellisense. Ug ibutang ang code nga:

private void btnShowhello_Click(object sender, RoutedEventArgs e)
      {
          txtHello.Text += "Hello world" + Environment.NewLine;
      }

simple ra diba? Para asa na ang Environment.NewLine? Pananglitan, kung nag puyo ko sa langob.. mao ni ang gi ilis sa Carriage Return ug LineFeed.

testing? GO!

image

DILI NA GUBA! Four times jud na nako gi click ang button.. nalingaw man gud ko.. Ug gi unsa pag ka hibaw kung Silverlight App ni?

image

Mao na ang mo gawas kung mo right click ka sa page..

Unsay nahimong epekto sa aspx page?

Sa code.. wala.. kay mo dagan nga murag user control si silverlight..

Unsaon if ato i-edit nato ang aspx page? Pananglitang mag butang ta ug label?

<html xmlns="http://www.w3.org/1999/xhtml" style="height:100%;">
<head runat="server">
    <title>SLDemo2</title>
</head>
<body style="height:100%;margin:0;">
    <form id="form1" runat="server" style="height:100%;">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div  style="height:100%;">
            <asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/SLDemo2.xap"
                MinimumVersion="2.0.31005.0" Width="49%" Height="100%" />
             <asp:Label ID="Label1" runat="server" Text="This is my first SL Page yepey!"></asp:Label>      
        </div>
    </form>
</body>
</html>

Mao ni ang nawong.

image

kay naka set ang 100% ang div.. haha!

O sige.. Mao usa na.. Sabta lang sa ang unod sa Silverlight application.. unya na lang ta mag install ug expression Studio 😉

 

Ug karon gusto ko magpasalamat sa akong amiga sa Cebu nga ni tabang ug translate ani. SALAMAT!

Advertisements
This entry was posted in Uncategorized. Bookmark the permalink.

2 Responses to Silverlight Hello World – Cebuano!!!

  1. makita says:

    I believe silverlight is born dead, but thats just me 🙂

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