Tag Archives: Visual Studio 2013

lsWires.js Updated – 1.0.6

Good day folks,

lsWires.js has been updated, 1.0.6
lsWires.js now embeds its dependencies
lsWires.js repository has moved:  http://bitbucket.org/interbay/lswires
lsWires.js 1.0.6 will most likely break things
lsWires.js documentation will be updated shortly
lsWires.js samples will be converted and moved over to Bitbucket

We’ve also added a new database project that will pre-seed the tiles for managing security.
Have added a folder lsWiresExtras that includes a few icons for the tiles
Updated the CopySolution script, but the better solution to copy is the lsWireCore project due to a naming issue.

We’ve done some pretty significant changes under the covers and we appreciate the patience.  One of the big ones is incorporating “signals” for hooking into the jQuery Mobile Page events.  We’re also providing a much simpler, yet more powerful, tile based menu system.  I think you’ll appreciate its simplicity.  For example:

lsWires-1.0.6-Tiles

We’ll also be posting a new “real application” video that will showcase what you can do with the new 1.0.6.  Which is what the image above is from.  I think you’ll be pleased with what you see and how you can bring excitement to your LOB apps!

Stay tuned!

Tagged , , ,

LightSwitch Tutorial – Create a Multi-Select Pick List

We’ll show you how you can easily create a pick list that allows selecting multiple items, work those items, show what’s selected when you go back into the pick list.  It’ll quickly become part of all your projects!

In this tutorial we show how to take our core project, and change the pick list for adding/removing permissions from Security Roles.  Allowing the Admin to remove/add permissions in one swoop vs. having to keep popping up a pick list for each.

So check it out at our tutorial site:  LightSwitch.CodeWriting.Tips

Here are the screen shots of what you’ll get, open the picker.

RunningPicker1

Select some items, click the save button.

RunningPicker2

Now open the picker back up, notice it preselects.  Go ahead and remove a couple and add others.

RunningPicker3

 

Tagged , ,

LightSwitch – Single Production Database, Multiple Applications?

Yes you can!

We’ll show you how you can actually use the same production database for multiple LightSwitch applications.  We’ll also show you how you can share common tables. And we’re not talking by OData endpoints here.

Great for situations where you are limited to the number of databases, not to mention simplifying maintenance.

Check it out on our tutorial site… lightswitch.codewriting.tips  – with videos!

Tagged , ,

LightSwitch HTML Client – The lsWire Core Project

Our new lsWire Core project will be the basis for all of our tutorials going forward.

Its based on the lsWires framework and is our first tutorial being hosted on our new site, http://lightswitch.codewriting.tips

This is also our first tutorial that we’re providing a “Starter Kit” so that you can not only quickly get going, but that you can create as many new solutions from this core project as needed.

This little item alone will, hopefully, dramatically change the landscape of the LightSwitch ecosystem. By allowing developers to provide their own starter kits from their own amazing solutions.  Especially since Visual Studio has not provided a means for creating templates from LightSwitch Applications.

Click here for a direct link to the tutorial.

Tagged , ,

How To Create An Expanded LightSwitch 2013 Project!

This process requires the March 2014 Update

I’m happy to report that the March 2014 Update brought back SCAFFOLDING!! Yay!

How to add Web API and MVC to a LightSwitch 2013 project

Visual Studio LightSwitch is a great product. But it’s not the end all and most professional development projects require a mix of technologies to be considered successful. By following these steps, you’ll end up with a LightSwitch project that has the HTML Client, Silverlight Client, MVC, Web API and Web Forms with the naming conventions of your choosing. Giving you a solution without restrictions!

First time thru the tutorial it may still take you 15 minutes. So give it a try and see what you think… Oh… btw you can clone/download the updated sample project from github… you’ll need this, but really only for the WebApiConfig.cs.

  1. Start Visual Studio 2013
  2. Create a new project: File, New Project…
  3. Select LightSwitch HTML Application
  4. Name the project: myTest
  5. Name the solution: myTest
  6. Create new table
  7. Name it TestItem, 1 property, Name
  8. Add your browse/add/edit screens for the TestItems table
  9. Double click on the properties file for the myTest project
  10. Enable forms authentication, and allow Security Admin for debug
  11. Save the solution, do a full build, run the app
  12. Add some test data into the table
  13. Back into Visual Studio
  14. Right click on your server project
  15. From the Add Scaffold window, click on MVC 5 Dependencies
  16. Press the Add button
  17. On the Add MVC Dependencies popup
  18. Select the Full Dependencies option, press the Add button
  19. Close the web.config that gets automatically loaded
  20. In the App_Start folder, open RouteConfig.cs
  21. Add the following line under the other IgnoreRoutes
    routes.IgnoreRoute("{*allsvc}", new { allsvc = @".*\.svc(/.*)?" });
    
  22. Right click on the App_Start folder, add a new Class file
  23. Name it WebApiConfig.cs
  24. Replace the contents with the contents from the WebApiConfig.cs file from our zip file
  25. Add two folders under the Controllers folder
    1. api
    2. mvc
  26. Right click on the api folder, select add, select New Scaffold Item
  27. Select Web Api 2 Controller with Read/Write actions
  28. Name it TestController
  29. Follow the instructions of the readme.txt file that automatically opens in the editor
  30. Make sure the GlobalConfiguration.Configure gets added to the beginning of Application_Start
  31. In the Controllers folder again, right click on the mvc folder, select add, select New Scaffold Item
  32. Select MVC 5 Controller with read/write actions
  33. Name it HomeController
  34. In the HomeController.cs file that gets automatically loaded
  35. Right click on the ActionResult Index()
  36. Select add view
  37. In the Add View dialog, leave all defaults, just click on add
  38. Go edit your default.aspx page in the root of the solution
  39. Comment out the first line… add some test text to the body
  40. Do a full save, then rebuild, run your app

Your LightSwitch html app will run first with your custom URL path
http://localhost:{port}/App

Moving on, let’s test access to the ApplicationData.svc file
http://localhost:{port}/ApplicationData.svc

So far so good eh? How about our MVC?
http://localhost:{port}/Home

Yay! Looking good… now our default.aspx file in the root…
http://localhost:{port}/default.aspx

Yep that works too… final test… the Web.Api side…
http://localhost:{port}/api/Test

You can now go in and clean up the project, delete the test screen, test table, etc.
Save the solution again.

This would be the point when you would add your project into source control.

One of the great features out of this is we can use Visual Studio LightSwitch to do all of our data management without having to go down into the Entity Framework.

Happy coding!

Tagged , , ,

Add ASP.NET MVC to LightSwitch 2013

I’ve worked with Microsoft LightSwitch since its early beta days.  Its exciting to see all the new changes coming with the new Visual Studio LightSwitch 2013.  One of the interesting areas is being able to use LightSwitch for your backend and mobile development and other technologies in the Microsoft stack for the desktop.

In this first post I’ll show you how we have been successful in adding the MVC framework to a LightSwitch project.  You’ll be able use the RAD tools of LightSwitch to develop your database, business logic and mobile screens.  And then use the full power of ASP.NET MVC to do your full web based desktop application, including the new rage of SPA’s.

We’ve been successful in using this process for a large application using LightSwitch, ASP.NET MVC/API, Bootstrap and Kendo UI.  An amazing combination and one that I’ll continue to blog about in upcoming posts.

Enough of the chatter… Lets get to it…

Visual Studio 2013 Preview and about 10 minutes is required.

  1. In Visual Studio 2013 (VS), select File, New Project…
  2. Under installed templates, select LightSwitch
  3. Select one of the LightSwitch HTML Application templates (C# or VB)
  4. Name your project and solution, press Ok
  5. VS will create your project and land you on the “Start with data” page
  6. Click on “Create new table”
  7. Name the table “AppUser” (for example sake)
  8. Add a couple of properties, Property1, Name, string
  9. Property2, Email, email address
  10. At the bottom of the screen, click on HTMLClient
  11. Then at the top of the screen, click on Add: Screen
  12. Select the “Browse Data Screen”, Screen Data as AppUser, click Ok
  13. Leave the generated screen with defaults for this example
  14. Save all files, build the solution
  15. You should get a successful build

Now we move over to the solution explorer side.  The following will be done in the “server” project:

  1. Right click on the server project, Select Add… Scaffold…
  2. In the popup dialog, select “MVC 5 Dependencies”, click Add
  3. In the second popup, select “Full dependencies”, click Add
  4. VS will add and configure “most” of the required items for the MVC framework
  5. Right click on References, select Add Reference…
  6. In the popup dialog, select System.Web, click Ok
  7. Right click on the server project, select Add… New Folder… name it “Controllers”
  8. Right click on the Controllers folder,  select Add… Scaffold…
  9. Select “MVC 5 Controller – Empty”, click Add
  10. Name the controller “HomeController”, click Add
  11. Right click on the Views folder, select Add… New Folder… name it “Home”
  12. Right click on the Home folder under Views, select Add… Scaffold…
  13. Select the “MVC 5 View – Empty without model”, click Add
  14. Give the view the name of “Index”, leave the rest as defaults, click Add
  15. In the resulting Index.cshtml (vbhtml) file, edit to show the traditional “Hello World!”
  16. Save all files
  17. Build the solution, should be successful
  18. Run the app (F5)…

The HTMLClient will run first, this can be changed as needed.  You’ll get a LightSwitch HTMLClient browse screen that doesn’t show any records, since we don’t have any data.  This validates that the LightSwitch side of the app is functioning correctly.

Copy the URL, open up a new browser or tab, paste in the URL.  Replace the HTMLClient part of the URL with Home.  You should get the Hello World page being server up by the MVC framework.

So in less than 10 minutes you’ve successfully turned a LightSwitch 2013 project into a platform that has some amazing possibilities.  Hopefully the development community will start to take this tool seriously!

Stay tuned for upcoming posts of our integration with Web API, Bootstrap and Kendo UI.

Enjoy.

Tagged , ,