Intro to Silverlight – (Hello World)

Ang labo ba? Bakti hello world? Grabe.. silverlight tapos hello world? Eh wala kang magagawa.. silverlight nga.. hindi expression studio. Tsaka na yung usapang yun.

Sa blog na ito ay ipapakita ko muna sayo ang mga bagay na sa tingin ko ay magiging mahalaga. Yung mga pinagkaiba ng simpleng web app o website labas sa isang silverlight application.

Ang mga kakailanganin mo ay:

1. Visual Studio 2008 (Kasi sa framework 3.5 ang Silverlight gagana)

2. Silverlight Chainer – ito ay isang executable file na makikita mo sa www.silverlight.net at ito ang mag-iinstall sa iyong computer ng runtime ng silverlight at ng ibang mga tools nakakailanganin mo pa.

3. syempre kailangan mo ng internet connection. Kung nababasa mo ang blog na ito ngayon pero wala kang internet connection.. aba eh magtaka ka na! Or, baka binigyan kita ng offline na kopya.. sobrang importante ka naman.. astig ka.

Simulan na natin.

Para makasigurado kang tama ang pagkakainstall mo ng silverlight chainer.. kailangan ay makita mo ang menu na ito..

image

kapag nag-click na ng FILE – NEW – PROJECT sa Visual Studio 2008. Kapag wala ito.. balikan mo ang install at hindi ka makakasabay.

Gagawa na ako ng isang project.. at ito ang kasunod mong makikita..

image

Ang itatanong nya ay:

* Add a new ASP.Net Web Project to the solution host Silverlight – ito ang default at ito rin ang inirerekumenda ko. Bakit? Wala lang.. trip ko lang. hehe.. ang totoo nyan.. kung ang gagawin mo ay isang project o website na gagawa ng mga http calls.. reference sa webservice.. mga ganun.. ito ang piliin. kasi yung isa:

* Automatically generate a test page chorva.. HTML page lang yun. walang enta.

kaya ang pinili ko ay ang default.. at ito ang haharap sa iyo..

image

eto na, simula na ng gulo. Ito ang tunay na dahilan kung bakit isang simpleng hello world application lang muna ang sisimulan natin. Ang gusto ko muna sanang ipaliwanag ay kung ano ang mga parte ng isang silverlight web application.

Mapapansin mo sa Solution Explorer na mayroon ka agad na dalawang projects. Ang SLDemo2 at ang SLDemo2.web, na siyang Default na project. Mas kahawig ng isang regular na asp.net application ang SLDemo2.web kasi ito yung mayroong Default.aspx diba? Pero hanggang doon na lang halos ang pinagkapareho nito.

Sa isang SL application, magkakaroon ka ng mga bagong files.. Page.xaml, App.xaml at SLDemo2.xap (pronounced ZAP at nasa loob ng ClientBin folder). magkakaron ka rin ng SLDemo2Testpage.aspx (ito yung aandar bilang default page, yung Default.aspx hindi magagamit yun), SLDemo2TestPage.html. Ang mga page na ito ang magsisilbing "host" ng ating SL App (yung Page.xaml) Isa-isahin natin ito para magkaintindihan tayo ng mas maayos ok?

Tignan natin ang code ng html at nung aspx page:

image image

nasa kaliwa yung HTML at nasa kanan yung ASPX. Ang laman lang ngayon ng mga ito ay yung holder nung silverlight control natin na gagawin pa lang. At kung sinisipag kang hanapin.. makikita mong pareho silang nakaturo lang sa ating SLDemo2.xap.

So ang tanong ngayon.. alin sa dalawang page na iyan ang paglalagyan natin ng ating mga Silverlight controls? Ang sagot.. WALA!

Dun tayo sa Page.xaml maglalagay ng controls, at sa Page.xaml.cs tayo maglalagay ng code. Ayan.. eh di nagsimula ka nang malito.. sabi ko sayo Hello World muna eh.

Katulad ng kasasabi ko pa lang.. ang aspx page na ibinigay sa atin ay magsisilbi lang na HOST ng ating SL App (SilverLight App). At kung ang babaguhin natin ay yung page.. dun tayo sa aspx o sa html. Pero kung ang gagawin natin ay sa SilverLight.. dun tayo sa xaml.

Ito ang default na code ng ating Page.xaml

image

may makikita kang Grid control.. ito lang ang laman. mayroon pang iba pang mga controls (tulad ng Grid, StackPanel atbp.. na pwede nating gamitin pero sa susunod na blog na yun ok?

Ngayon maglalagay na tayo ng SL controls.. ang balak ko ay isang simpleng Hello World kaya.. Isang textbox (pang display) isang button (para me ma-click naman at hindi boring)

Ito ang kalalbasan ng code na nung habang isinusulat ko ay aliw na aliw ako 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>

 

hindi na screenshot kinuha ko para sa code para pwede mong copy and paste 😉

Tignan natin bawat linya

<TextBox x:Name="txtHello" FontSize="20"></TextBox>   <– wala lang. walang kwentang textbox at walang laman. Simple lang. Nilakihan ko lang ang font para kita agad. At pansinin paano binigyan ng pangalan.. (x:Name="") yan yung syntax ng xaml.

Button x:Name="btnShowhello" Content="Click Me!" FontSize="20" Click="btnShowhello_Click"></Button> <– dito naman ay may mga mapapansin ka na siguro bukod sa name property at sa fontsize. Mayron itong eventHandler. Kung nag copy-paste ka ng code na ito.. hindi mo makikita kung paano maglagay ang intellisense ng eventhandler nya.

Ngayon ang tanong naman.. saan ilalagay ang code behind? ganito yan.. i-rightclick mo yung event handler tapos…

image

at mapupunta ka sa Event Handler nun.. saang file? sa Page.xaml.cs

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

        private void btnShowhello_Click(object sender, RoutedEventArgs e)
        {

        }
    }
}

 

at dito ka na maglalagay ng code.

Kung matino ang pagkakagawa mo ng sample na ito.. magkakaroon ka agad ng txtHello sa intellisense. At ilagay ang code na:

 

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

 

simple lang diba? para saan yung Environment.NewLine ? Eh kung sakali lang na nakatira ka sa kweba.. ito na ang ipinalit sa CarriageReturn and LineFeed.

testing? GO!

image

HINDI YAN SIRA! four times ko lang talaga click yung button.. nakakatuwa eh..

at paano nalaman na Silverlight app ito?

image

yan ang lalabas kapag nag right-click ka sa page.

Ano ang naging epekto sa aspx page?

sa code.. wala. kasi tatakbong parang user control si silverlight.

paano if i-edit natin yung aspx page? Maglagay ng label halimbawa?

 

<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>

 

ganito ang itsura..

 

image

kasi naka set na 100% yung height nung Div.. haha!

O siya.. ganyan na muna. Intindihin muna ang kalansay ng isang silverlight application. tsaka na tayo maginstall ng expression studio.. 😉

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

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