Sep 8

Written by: Michael Washington
9/8/2013 7:56 AM 

Blocky is a visual JavaScript programming editor. You can learn all about it at the following link: http://code.google.com/p/blockly/.

The documentation is here: http://code.google.com/p/blockly/w/list.

Note: I have found this program only works well in the  Firefox web browser. The code created will work in any web browser.

We will use the website to create JavaScript visually that we will then consume in LightSwitch. For our example we will create a simple number guessing game.

Create The JavaScript Visually

To start, go the the following link to open a new code session:

http://blockly-demo.appspot.com/static/apps/code/index.html

Create variables by clicking on the Variables section and dragging a set control to the workspace.

Create the variables in the image above and set their values using the item control.

Set the NumberToGuess variable by using the random integer from control that is located in the Math section.

Grab the repeat control from the Loops section.

Add a and/or control from the Logic section.

Add a condition that will break out of the loop if the GameOver variable is set to true.

Add a condition that will break out of the loop if the NumberOfGuesses variable equals 3.

Inside the loop, set the CurrentGuess variable to the result of the prompt to Guess A Number between 1 and 5.

Use the if control from the Logic section to create the game logic according to the image above.

The last step of the loop needs to increase the NumberOfGuesses by one

Use the if control from the Logic section to determine what message to show at the end of the game.

Clicking the run button will run the game.

You can play the game at this link:

http://blockly-demo.appspot.com/static/apps/code/index.html#asehhn

Click the JavaScript button to get the JavaScript code that you will use in the LightSwitch application.

Create The LightSwitch HTML Application

Next, we create a LightSwitch HTML Client application.

We add a Screen.

We call the screen Main and we do not select Screen Data for now.

We then select the created method.

We paste in the JavaScript as it is with no changes.

We run the application.

The code performs exactly like it did before.

 

Integrate The Code Into LightSwitch

We now want to properly integrate the JavaScript code into the LightSwitch application.

The first step is to create Data Items for all our variables  to add them to the screen’s View Model.

After creating LightSwitch data items for the variables, we remove the variable declarations from the JavaScript code and we change the code to access the variables using “screen.”

The program still runs as normal.

Now we can easily bind the variables to screen controls by dragging them and dropping them on the screen designer.

Also, create a variable called DisplayResponse and drag it on the screen designer.

We can create a button by selecting New Button from the Add control selector.

We right-click on the method to write the JavaScript code we want to run when the button is clicked.

We alter our existing code a bit to use it for the method:

 

myapp.Main.makeAGuess_execute = function (screen) {
    if (screen.CurrentGuess == screen.NumberToGuess) {
        screen.HasWonGame = true;
        screen.DisplayResponse = 'You have guessed correctly';
        screen.GameOver = true;
    } else if (screen.CurrentGuess > screen.NumberToGuess) {
        screen.DisplayResponse = 'You have guessed too high';
    } else if (screen.CurrentGuess < screen.NumberToGuess) {
        screen.DisplayResponse = 'You have guessed too low';
    }
    screen.NumberOfGuesses = screen.NumberOfGuesses + 1;
    if (screen.GameOver == true || screen.NumberOfGuesses == 3) {
        if (screen.HasWonGame == true) {
            screen.DisplayResponse = 'You Won!';
        } else {
            screen.DisplayResponse = 'You Lost!';
        }
        screen.GameOver = false;
        screen.NumberOfGuesses = 0;
        screen.NumberToGuess = math_random_int(1, 5);
        screen.HasWonGame = false;
    }
};

 

We also remove the code we had in the created method except the code to set the initial values for the variables:

 

myapp.Main.created = function (screen) {
    screen.GameOver = false;
    screen.NumberOfGuesses = 0;
    screen.NumberToGuess = math_random_int(1, 5);
    screen.HasWonGame = false;
};

 

When we run the application it is now properly integrated.

Adding Data

The primary reason you would want to use LightSwitch for your HTML applications is that it will easily handle data and security.

We right-click on the Server node in the Solution Explorer and select Add Table.

We create a table called Winning.

We add the Winning table to the screen View Model (LightSwitch automatically pluralized the name of the entity to Winnings).

We then drag and drop it on the screen designer.

We adjust the layout.

We alter the code that handles winning, to prompt the user for their name and to save the record:

 

When we run the application it will now show the winners.

Links

Top 10 things to know about the LightSwitch HTML Client

How To Perform Angular.Js Functionality Using Visual Studio LightSwitch HTML Client

Dynamically Creating Records In The LightSwitch HTML Client

 

Download Code

The LightSwitch project is available at http://lightswitchhelpwebsite.com/Downloads.aspx

(you must have Visual Studio 2012 (or higher) installed to run the code)