Tag Archives: Tiles

lsWireCore Project Updated v1.0.6


Updated to lsWires.js v1.0.6

Added Database Project to pre-seed the tiles
Just need to edit the tiles in the browser to add the icons

Added lsWiresExtras folder with the security tile icons
Highly recommend Syncfusions Metro Studio for additional icons.

Updated the CopySolution.ps1 script

Fixed Visual Studio from changing IIS ports on rebuilds

This should be the project that you use our CopySolution on

We’ve moved the repo to https://bitbucket.org/interbay/lsWireCore

Don’t hesitate to holler if something breaks!

Well it broke… Arrrgggg!!  Hopefully easy work around… just do a full rebuild after you download. 
(thanks Michael Washington)


Tagged , , ,

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:


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 , , ,

MetroUI Template for ASP.NET MVC


So… odd as it sounds, there are very few Modern UI (Metro) packages out there for web applications.  I have found one to be full featured from metro-webdesign.info called Metro UI Template.  The guy has done a fantastic job and I highly recommend donating and getting the full version.

Metro UI Template was written for a PHP, I’m a .NET guy.  So we had a problem.  So what does a good dev do?  Solve the problem.

Create some server wrappers for the client side JavaScript and move forward with the project.  And so that’s what we’ve done.

Lets be clear, this is not fully fleshed out and was used to prove some concepts.  Hopefully others will jump in and help with these wrappers and flesh them out even more.  Read the code!

Also note that what I’m posting is based on their “lite” version, so you can try it before you upgrade to his full product.  But this means it does not have all the available tile types, but enough for you to get a really good feel of creating a tile based web app.  Off we go!

  1. Download Metro UI Template, http://metro-webdesign.info/#!/download
  2. Download/view my wrapper at https://github.com/dwm9100b
  3. Right click on the downloaded files, go to properties, and unblock
  4. Extract the zips
  5. Create a new ASP.NET MVC application, Razor Engine
    • Name the project:  MyMetroApp
  6. Create new folder in the root of your project
    • Name the folder: MetroUI
  7. Drop (add) the following folders from the extracted V4_lite folder into the MetroUI folder
    • css
    • img
    • js
    • plugins
    • themes
  8. Add the following folder from MetroUITemplate.MvcWrapper-master folder into the root of your project
    • MetroUIMvc
  9. If you did not name your project “MyMetroApp”, you need to change the namespace in the following files
    • Enums
      • TileSize.cs
      • TileType.cs
    • MetroColumn.cs
    • MetroRow.cs
    • MetroScreen.cs
    • MetroTile.cs
  10. Build your solution to see if we missed anything so far
  11. Replace the following in your project from the MetroUITemplate.MvcWrapper-master folder
    • Views/Home/Index.cshtml
    • Views/Shared/_Layout.cshtml
    • Controllers/HomeController.cs
  12. Buid your solution, F5 to run your app

Mobile (responsive) design is not available in the lite version, Upgrade to the full version and you will get some really nice tile repositioning based on device, all the way down to mobile phones.

For the record, I have no association with metro-webdesign.  I found their product to be superior and created a solution for my needs and wanted to share with others how to integrate his project with ASP.NET MVC.

Tagged , , ,