Creating Silverlight Project in Pure Eclipse

Open the ESL Perspective

  1. By default, you stand in the Java Perspective. To switch to the ESL perspective click on at the top right of Eclipse IDE.
  2. Then click Other...
  3. Finally choose Silverlight perspective, Then click ok.
  4. Uncheck "Build Automatically" option, go to Project menu and uncheck it.
  5. The Silverlight preference page provides configuration to external tools like Expression Blend or Visual Studio application as well as Chiron (Silverlight tool) and MSBuild executables. Go to Window->Preference.
  6. Then click on the Microsoft Silverlight->Paths tab:

Creating a new Project

  1. In the navigator Area right click and choose New->Silverlight Project.
  2. Named the project SilverlightApplication and click Finish.

Adding a Button to the Grid

  1. Open the file Page.xaml, an XAML editor, a Silverlight viewer and a Palette appears.
    In the XAML editor, add a button by typing bu and hold down CTRL+SPACE(if this is invalid, ALT+? instead). Be careful not to type the opening bracket first.
  2. Click on Button option (warning: the auto-indent is buggy, your new button tag won't go to a new line), you can hold down CTRL+A select all code first, then CTRL+I to arrange the code.
  3. In the Button tag, insert a space then hold down CTRL+SPACE, add a Content, a Width, a Height attributes and named the button "MyButton".
  4. Save (CTRL+S) your xaml, the silverlight viewer should be updated now.

Adding an event handler to the Button

  1. To add behavior to the button you can add a "Click" eventhandler to it. We can do this in by typing the event name "Cl" and using IntelliSense (CTRL+Space Bar).
  2. Choose the Click event. Then a wizard is diplayed to assist in the delegate method development.
  3. We can then either type a new event handler method name to use, or optionally use the default naming convention:
  4. Click OK, ESL will then automatically create a stub event handler implementation in our code-behind class file. We can use this event handler to update the Button's content with a new message when it is clicked.

    C# Code:

    private void onClick(object sender, RoutedEventArgs arg1) {
        MyButton.Content = "Pushed";
    }
    

Building and running the application

After making the change above, now let's build run the application right away to get a instant Microsoft Silverlight touch.

  1. Go to project menu and select Project->Build Project (if the option is not enabled, gain focus on your project by selecting it in the Navigator Area). The output of the build process should be visible in the Console on the bottom side of Eclipse IDE.
  2. Then click the Run option at the top of Eclipse IDE, select Run Configurations...
  3. Create a new launch Configuration by clicking the icon, name it SilverlightApplication and select the SilverlightApplicationTestPage.html from the SilverlightApplication.Web project as the Start Page.
  4. Click Apply and Run, a browser window opens and displays a button.
  5. Note: Silverlight Applications can be used with any web-server (including Apache on Linux) and hosted with static HTML files or any server-side generated page (include PHP, Java, Python, Ruby, etc).

  6. Push the button, and now its content is updated with a "Pushed" message.

Now, you have created your first Silverlight Application under Eclipse.