You are here:   Blog
Register   |  Login

 

Sep 8

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

image

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

image

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

image

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.

image

Grab the repeat control from the Loops section.

image

Add a and/or control from the Logic section.

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

Create The LightSwitch HTML Application

image

Next, we create a LightSwitch HTML Client application.

image

We add a Screen.

image

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

image

We then select the created method.

image

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

image

We run the application.

image

The code performs exactly like it did before.

 

Integrate The Code Into LightSwitch

image

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.

image

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.

image

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.

image

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

 

image

When we run the application it is now properly integrated.

Adding Data

image

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.

image

We create a table called Winning.

image

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

image

We then drag and drop it on the screen designer.

image

We adjust the layout.

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

image

 

image

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)

4 comment(s) so far...


Gravatar

Re: Using a Visual JavaScript Code Editor With Visual Studio LightSwitch

Have you tried Blockly in IE11 Preview for Windows 7 or IE11 in Windows 8.1 Preview? Do I really really need to install Firefox?

By Lloyd Derbsyhire on   9/8/2013 4:21 PM
Gravatar

Re: Using a Visual JavaScript Code Editor With Visual Studio LightSwitch

@Lloyd Derbsyhire - I could not get it to work properly in IE 10. I didn't try any other versions.

By Michael Washington on   9/8/2013 4:21 PM
Gravatar

Re: Using a Visual JavaScript Code Editor With Visual Studio LightSwitch

Great example! (and fun too). But I doubt that putting together JavaScript logic this way is really either a time saver or enables people without JavaScript skills to accomplish implementing a business logic. But besides that I really enjoyed reading your post.

By Peter Monadjemi on   9/9/2013 4:07 AM
Gravatar

Re: Using a Visual JavaScript Code Editor With Visual Studio LightSwitch

@Peter Monadjemi - I think it is a learning tool for those beginning JavaScript. Mostly it shows how LightSwitch HTML Client is just a integrated JavaScript framework.

By Michael Washington on   9/9/2013 1:29 PM

Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code
CAPTCHA image
Enter the code shown above in the box below
Add Comment   Cancel 
Microsoft Visual Studio is a registered trademark of Microsoft Corporation / LightSwitch is a registered trademark of Microsoft Corporation