Darn I really wish I could join this contest. It has been extended too!

How to Add Silverlight to your Website

April 22nd, 2009 · No Comments · Events, Featured Article, Technical Resources

The following recordings were done by Mr Edu Lorenzo when he gave his workshop at Bitstop Inc 3rd Floor learning center.

Silverlight 2.0 Driven Web App Demo Part 1

Silverlight 2.0 Driven Web App Demo Part 2

Silverlight 2.0 Driven Web App Demo Part 3

Silverlight 2.0 Driven Web App Demo Part 4

Silverlight 2.0 Driven Web App Demo Part 5

Silverlight 2.0 Driven Web App Demo Part 6

Silverlight 2.0 Driven Web App Demo Part 1

Runtime:
http://go.microsoft.com/fwlink/?linkid=143433

Silverlight 3 Tools for Visual Studio 2008 SP1:
http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=11dc7151-dbd6-4e39-878f-5081863cbb5d

SDK:
http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=d09b6ecf-9a45-4d99-b752-2a330a937bc4!

Documentation:
http://msdn.microsoft.com/en-us/library/cc838158(vs.96).aspx.

Blend 3 Preview:
http://www.microsoft.com/expression/blendpreview

hey, this is my blog.. so I can voice out here.. I guess.

I have just reached a point in my life where I am now concerned with my fellow developers and everyone for that matter in the IT career, whether they be developers or IT pros..

It has become more and more obvious to me, the reality of passivity. And I find it strange, that there are a lot of people out there.. who really are.. on a passive state or just a waiting state.

Take for example the forums where I am a regular member of, msforums.ph. There are a lot of questions there that are asked, but have been asked before, and have already been answered completely in the same forums. It’s not that I don’t like helping out but the thing is, the forum has this searchbox where you can search for the answers you need.

Then there are times when someone asks a questions, then another guy answers with a link. As a moderator, I feel I need to check the link too and see if the correct answer is there. Lo and behold.. the answer really is there; of course. But then, the thread starter, asks yet another question, whose answer is also in the link given! It’s really disconcerting.

Then there are companies with IT departments populated by what they call their brightest minds. I give them a demo on how to use a certain technology.. then.. a few days later, they email me with a question that was included in the demo.

And the worst, you teach someone how to peel one side of a banana, then they ask you how to peel the whole banana..

This attitude of passivity.. what can I account it to? School? Training? Culture? tell me.. please..

ASP.Net MVC

MVC (Model – View – Controller) is ASP.Net’s new paradigm in web application development.

This guide will show you how to create a simple MVC application using Visual Studio 2008 and ASP.Net MVC RC1.

Tools:

Visual Studio 2008 with SP1 and ASP.Net MVC RC1 installed. MVC supports a full Test Driven Development pattern but for this to function, you will need Visual Studio Professional and above. I am using the standard edition so this feature is not available.

Included in this kit is the Northwind.MDF database, which we will use for this exercise.

First, you create a new ASP.Net MVC application with Visual Studio as shown:

It is your choice of what language you want to use, but for this guide I shall be using C#.

The next step is to add a database file (Northwind.mdf) to our App_Data folder. You can do this by either right-clicking on the App_Data folder and choosing “Add - Existing Item” or by simply dragging and dropping the MDF file from Windows Explorer to the App_Data folder.

After adding the file, you should have something like this:

Now we are going to do the following:

1. Add an Entity Framework object to serve as our object mapper.

2. Create a Controller and a View for our Products table.

Adding an Entity Framework object.

To add an EF object to our project, we right-click on the Models folder and choose Add – New Item then choose the ADO.Net Entity Data Model object under the Data item types.

We click add and proceed with the wizard. When visual studio asks what the model should contain, we choose to create from a Database.

Then the wizard will ask you from which database will it generate the Data Model. Here we choose the MDF file that we added earlier.

Take note of the name that will be saved in the Web.Config file. After clicking Next, the wizard will ask you which objects in the database you wish to add to the Data Model. Let’s choose all the tables.

When you click Finish, the wizard will then generate the data models that we will be using for our application.

Now that we have our Data Model, let’s add a controller to our project by Right-Clicking the Controllers folder and choosing “Add Controller”

Visual Studio will then generate a controller for you.

I ticked the checkbox so that my controller will have methods for Create, Update, and Details scenarios.

Let’s look at the created controller.

Here we see the Index method which will display the data. I am going to add a few lines of code so this method will give data to the view.

Here you see that when I start to type the name of our data model, the IDE does not recognize it yet. So I copy it from the Web.Config file and:

It appears to be that there is something wrong. I have copied the name of the model from Web.Config, but the IDE still cannot recognize it! But take note of the encircled tooltip. When you see this, hit Ctrl + . (dot) then hit enter, and the appropriate Using statement will be added by the IDE.

Then, to create a View for this method, we simply right-click beside the code and choose to create a view for this method.

We now follow a few short steps to create the view. Along the way, we customize our view to fit our needs.

First we need to create a strongly typed view for this controller

Then we choose the data class and then we choose a form in which the data shall be presented by the View. I chose List as the way to display our content.

After clicking Add, a new View shall be added for you in your Views folder

Lets run the application and see what it looks like.

hi guys! To all that attended WebRampup today, I send my heartfelt thanks. Here is a step by step guide to create a dynamic data site. Here you will see where the demo went wrong, please add a comment to this blog if you find the reason (I found where I went wrong a few minutes after the demo hahaha!)

Dynamic Data

Dynamic Data is a quick and easy way to build DataDriven websites using scaffolding. Pages can be customized into templates and modification of the pages will happen only on one place.

This also works with the several ORM models already existing like LinQ to SQL and the Entity Framework. For this exercise we will use the Entity Framework.

Tools

Visual Studio 2008 with SP1

Northwind.MDF

Let’s get started.

We will now create a simple data driven Dynamic Data website. To do this, you simply click File-New WebSite from Visual Studio and since we are going to use the Entity Framework, we choose a DynamicData Entities Web Site.

This is going to be a data driven website so we will need a database. Add the NorthWind.mdf file in the App_Data folder by either clicking Add Existing item or dragging and dropping the file to the App_Data folder from Windows Explorer.

You should have something like this:

Next we add and EntityFramework Data model.

We follow the wizard and select the MDF file we added earlier..

Then it will ask you which objects from the database you want to be added. We choose the tables by ticking the checkbox that corresponds to the tables.

Now we have a datamodel that we can use for our website.

Next we will “introduce” this data model to the website by modifying a pre-commented out line in our Global.Asax file from this:

To this:

What we have done here is registered the datamodel with the registercontext method and set the ScaffoldAllTables property to true. Run the application and you should have something like this:

As you can see, we already have a running data driven website with all the tables in the database. All these entries can already be clicked (I know you tried). And if you didn’t try, I suggest you run the website again and see the cool features that you have already created like

The ability to drill in to a table and display the data with Filters!

The ability to go to the categories table from the Products table view

So in its primary form, you already have a robust data driven application created by..

1. Creating a DynamicData website

2. Creating a data model

3. Registering your data model to your view.

Three steps.

I would like you to amaze yourself now by running the website again. Clicking on the Edit link on any of the products and try to Edit the data displayed.

You should now notice that there are also already embedded validation for your data entry screen!

Here I try to enter the letter “e” into the Units In Stock textbox and it is validated as a wrong entry. This is based on the datatype that the data model was able to read from the databse.

But I know that creating a fully functional, validating, drill deep into data, kick-ass data driven website is not enough for you.

The look and feel of the site of course is too standard. So the question arises

“How do I edit the site?”

This actually comes real easy because everything has been done in templates. So we just find the template for what we need to edit and go ahead and edit it.

What I do is I go to the templates folder and edit the template that I want.

From this:

<%@ Control Language="C#" CodeFile="Text.ascx.cs" Inherits="TextField" %>

<asp:Literal runat="server" ID="Literal1" Text="<%# FieldValueString %>" />

To this:

<%@ Control Language="C#" CodeFile="Text.ascx.cs" Inherits="TextField" %>

Hello <asp:Literal runat="server" ID="Literal1" Text="<%# FieldValueString %>" /> World

And you guessed it right, now when I run the application, all textboxes will have the text “Hello” and “World” added at its left and right side.

Now what if we want to change a bigger part, say.. we want to show the details of a product not on a separate page but on the same page as the Products table?

We do this by changing the routing. By default, the Edit link will route the data to another page. What we need to do is to route it on the same page. To accomplish this, we edit the routing configuration in the Global.Asax file.

If you scroll to the middle of the Global.Asax file, you will see this:

// The following statements support combined-page mode, where the List, Detail, Insert, and

// Update tasks are performed by using the same page. To enable this mode, uncomment the

// following routes and comment out the route definition in the separate-page mode section above.

//routes.Add(new DynamicDataRoute("{table}/ListDetails.aspx") {

// Action = PageAction.List,

// ViewName = "ListDetails",

// Model = model

//});

//routes.Add(new DynamicDataRoute("{table}/ListDetails.aspx") {

// Action = PageAction.Details,

// ViewName = "ListDetails",

// Model = model

//});

Read on to the comments and see that this part handles or supports combined-page modes and to enable it, we just follow the instructions by editing it to look like this:

// The following statements support combined-page mode, where the List, Detail, Insert, and

// Update tasks are performed by using the same page. To enable this mode, uncomment the

// following routes and comment out the route definition in the separate-page mode section above.

routes.Add(new DynamicDataRoute("{table}/ListDetails.aspx")

{

Action = PageAction.List,

ViewName = "ListDetails",

Model = model

});

I also commented out the separate-page mode of routing.

// The following statement supports separate-page mode, where the List, Detail, Insert, and

// Update tasks are performed by using separate pages. To enable this mode, uncomment the following

// route definition, and comment out the route definitions in the combined-page mode section that follows.

//routes.Add(new DynamicDataRoute("{table}/{action}.aspx") {

// Constraints = new RouteValueDictionary(new { action = "List|Details|Edit|Insert" }),

// Model = model

//});

Then we run the application again and we have this..

Notice how the details view changes when we click a different product or any other object in the database. Customers, Persons etc are now all displayed in the combined page mode.

Now what if you want to change the routing just for the Products table? To do this, we must again enable the separate-page for the entire site and specify the single-page mode for the products table only.

You will also need to move the routing for the Products table above the Separate-Page routing so it will take effect before the separate-page routing.

Your Global.Asax should look like this:

model.RegisterContext(typeof(NORTHWNDModel.NORTHWNDEntities), new ContextConfiguration() { ScaffoldAllTables = true });

routes.Add(new DynamicDataRoute("Products/ListDetails.aspx")

{

Action = PageAction.List,

ViewName = "ListDetails",

Model = model,

Table = "Products"

});

// The following statement supports separate-page mode, where the List, Detail, Insert, and

// Update tasks are performed by using separate pages. To enable this mode, uncomment the following

// route definition, and comment out the route definitions in the combined-page mode section that follows.

routes.Add(new DynamicDataRoute("{table}/{action}.aspx")

{

Constraints = new RouteValueDictionary(new { action = "List|Details|Edit|Insert" }),

Model = model

});

Run the application and see the changes.

What we have seen and learned here is that with DynamicData, it is both fast and easy to create a data driven website with more than just the basic CRUD (Create Read Update Delete) operations but also with filters and sorting.

We have also learned how highly customizable the resulting site is because it comes as templates.

Microsoft is set to launch a HIUGE programming competition. Details and registration is here:

http://msdnphilippines.net/themes/zero/registration/registration.aspx

Kung sakaling sa kweba ka nakatira at palaging offline, siguro hindi mo pa naririnig ang tungkol sa PLinQ o Parallel LinQ.

Ano ang PLinQ? ito ang isang bagong version ng LinQ na ginawa para magamit ng husto ang mga bagong Multi-Processor machines. 

Tignan mo ang code na ito:

var testlist = Enumerable.Range(1, 10000);

var q = from p in testlist.AsParallel()
        where p < 5000
        select p;

foreach (var x in q)
{
    Console.WriteLine(x);
}

Kaunti lang naman naiba, yung .AsParallel() lang.. pero, alangan namang yun lang talaga ang pinagkaiba diba? diba? diba?

Ang return ng isang LinQ query ay isang IEnumerable na collection, pero ang return ng PLinQ ay iba.. IParallelEnumerable<> ang ibinabalik ng PLinQ pero sa tingin ko in the future, magiging ParallelQuery<> ang type na isosoli ng PLinQ, basta.. :D

I write this blog to congratulate the following companies:

Havoc Digital

Level-Up

Mediatrade

These are companies whose development teams are both open source and open minded. They have been invited and I have been given the honor of presenting to them Microsoft’s Silverlight and WPF technologies. They have received it very warmly and shall be posting pictures.. and testimonials in my next blogs.

Just came back from a “demo” engagement. I have just finished my first installment on a 5 part series on Silverlight, WPF and Visual Studio. And who is my audience?

Eleven developers/designers who have been using Adobe, Macromedia and Action Script professionally. I’ll ask permission from them first if I can post their names and company names and maybe some pics next week.. but based on their facial “expression” and how they received the talk, I think I made a good impression.

Grabe.. pati Microsoft apektado na ng recession sa US..

http://finance.yahoo.com/news/Microsoft-resorts-to-first-apf-14133123.html

Nakakatakot na talaga.

Modal Popup naman!

Eto malupit sobrang dali!

magopen ka ng Expression Blend tapos create na new Silverlight2 App..

Copy and paste mo na lang to.. tinatamad ako magtype eh hahaha!

<Grid x:Name="LayoutRoot" Background="White">
        <Button x:Name="showPopup"  Click="showPopup_Click" Height="100" Width="100" Content="Show Popup"/>
        <Popup x:Name="myPopup" IsOpen="False" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="178,72,0,0" >
            <Canvas  Height="200" Width="300" Background="Azure">
                <Button x:Name="closePopup" Click="closePopup_Click" Height="50" Width="100" Content="Close Popup" Canvas.Top="133" Canvas.Left="94"/>
                <TextBox x:Name = "txtPasok" Height="25" Width="145" Canvas.Left="81" Canvas.Top="56" Text="TextBox" TextWrapping="Wrap"/>
            </Canvas>
        </Popup>
        <Canvas x:Name="myCanvas" Visibility="Collapsed" Background="Black"  Opacity=".4"></Canvas>
        <TextBlock x:Name="txtOutput" Height="26" Margin="249,132,224,0" VerticalAlignment="Top" Text="TextBlock" TextWrapping="Wrap"/>

    </Grid>

tapos ang code behind ay

public Page()
       {
           InitializeComponent();
       }

       private void closePopup_Click(object sender, RoutedEventArgs e)
       {
           txtOutput.Text = txtPasok.Text;
           myPopup.IsOpen = false;
           myCanvas.Visibility = Visibility.Collapsed;
       }

       private void showPopup_Click(object sender, RoutedEventArgs e)
       {
           myPopup.IsOpen = true;
           myCanvas.Visibility = Visibility.Visible;
       }

try mo.. astig yan.

Medyo matagal na rin ako naglalaro ng silverlight, pero nalilimutan ko magblog. SORRY! haha! Eto bago, gawa tayo ng button na may RollOver at click events. Babaguhin lang natin itsura gamit ang VisualStatemanager ng Blend2.

Mga Sangkap:

1. Expression Blend 2 SP1

2. Visual Studio 2008 SP1

3. Computer, Mouse, OS, etc..

una, gumawa ng bagong Silveright2 Application gamit ang ExpresionBlend2. Ang ibibigay kong pangalan ay buttonProject. Ikaw, bahala ka na sa buhay mo kung ano gusto mong pangalan..

Eto matindi.. magdodrowing lang ako ng rectangle at kukulayan ko ng asul.. eto ang kalalabasan na xaml.

<Grid x:Name="LayoutRoot" Background="White">
        <Rectangle Margin="216,206,220,221" Fill="#FF0D1951" Stroke="#FF000000"/>
    </Grid>

Tapos.. habang nakaselect ang rectangle, click lang ang Tools tapos MakeButton

may lalabas na dialog, tatanungin ka kung anong gusto mong ipangalan sa style ng button mo. Bigyan mo ng pangalan kung balak mong gamitin ulit ang style na yun. Kasi, kung ano man itsura ng rectangle mo ngayon, isasave nya yung xaml nyan sa styles (parang CSS) tapos pwede mong gamitin ulit sa ibang control na gagawin mong button. MyStyle ang ibibigay kong pangalan..

Ngayon mapapansin mong yung button ay may nakasulat nang “button” diba? Lagyan mo na rin nga pala ng pangalan yung button para pwede natin lagyan ng code.

Eto ang lalabas na xaml nya..

<Grid x:Name="LayoutRoot" Background="White">
        <Button x:Name="btnDemo" Margin="216,206,220,221" Style="{StaticResource myStyle}" Content="Click me baby!"/>
    </Grid>

Pinalitan ko rin yung text nya.. wag ka na kumontra.

Ngayon, ang gusto ko, kapag natapat ang mouse sa button na ito, ay lalaki sya ng kaunti at magiiba ang kulay nya.. sa MouseOver. Tapos pag click sa kanya, magiiba ang kanyang kulay.

ang gagawin ay..

1. Siguraduhing naka select ang button.. i-click ang button, tapos sa BreadCrumb bar, click mo yung button, tapos Edit natin ang template nya..

lalabas sa kaliwa yung states… may mouseover!!! Yehey!

Click mo yung parang Arrow na may Plus sign tapos irerecord natin ang magiging itsura nung button kapag mag mouseover..

Lalakihan natin kaya sa properties nya, babaguhin natin yung ScaleTransform Property at gagawin nating 1.3 ibig sabihin, we will increase the size by 30%

tapos… sa Pressed na state naman.. palitan natin ang fill color..

Yun!!! tapos stop mo na recording then RUN!!!! (wag kang tatakbo!) F5 ibig kong sabihin..

Okay ba resulta?

Ngayon, diba kanina sabi ko pwedeng gamitin yung style na nilagay mo dyan? ganito yan.. maglagay ka ng button ulit.. bahala ka kung san mo ilalagay

I tried placing the control within the server tag and hardcoding the entire path for good measure..

and this is what I got..

just keeps getting better :)

I have been tinkering with Silverlight for some time now and I have noticed that it would serve a great deal as the UI. And then, I thought, what if, I change modify MVC application to use Silverlight pages as the view. hmmm.. worth a try? I mean it makes sense right?

So off I went, created your out of the box Northwind MVC app. It works okay. Edited it a bit to show the contents of the Products table on start. Then (this is where I think I went wrong) I took the Xap file from a small two-button silverlight application I made and dropped it in the MVC project. Dragged and dropped the xap on the page, added a scriptmanager and ran it.

No errors, no bugs, but.. no result..

Am tinkering with this right now.. will update shortly

It is January and.. like most people, I look back at the past year, see where I was, see what I wanted to do and see if I was able to do them. Of all the things I have done, there are two that stands out for me..

Early last year, I was invited by Microsoft to attend a speakership training with PeopleIgnite and I must say I really learned a lot from that. And in that training, one of the activities was to draw something that would represent us, and what we are doing after a year. It’s a kind of “this is me one year from now” thing. I drew myself, in a “Dark Sith” cape conducting a speakership training session. I told them “one year from now, I see myself as the one delivering these trainings.”  You see, the training was to teach us how to present technical topics better. And I envisioned two things; 1. that I would develop enough skills to be qualified to actually deliver such a training and 2. that by next year, I would be handing off the evangelism efforts to a new breed of evangelists.

Right now, I believe (I hope folks at peopleignite will agree) that I have developed the skills and experience to be able to teach how to present technical topics.

The second thing that I have set for myself as a personal goal last year, was that I would become a Microsoft MVP.

These two things, I have achieved.. by  weird combination of effort, good luck, bad luck, and a host of other things. Hard work of course, dedication, effort etc. i could blog a thousand words to attempt to describe the journey that was last year but for me, it all boils down to.. motivation.

And what motivated me? No, it is not fame.. nor is it fortune. It is not money either. It is my deep desire to give my wife and three kids.. a better life.

I just got the news! Microsoft has awarded me the distinction of being a Microsoft MVP and this is a real honor for me!

All my thanks to Microsoft and to all who help and have been instrumental in my becoming an MVP!