James' Sandbox

Kendo UI Mobile with ASP.NET MVC 5 (plus KnockoutJs and Bootstrap)

noreply@blogger.com (Anonymous) — Fri, 13 Jun 2014 12:30:00 +0000

Since I did a post already on using Kendo UI with ASP.NET MVC 5 (and other technologies), I figured that I would show how to setup the Kendo UI Mobile version with ASP.NET MVC 5 mobile. It's not too bad, but there are some weird things to those of use that are not used to working with mobile-specific pages. If you have already set up your site to use Kendo UI (like in my previous post), then all we have to do is tell the MVC 5 web application that we want to use mobile pages as well.

The shortcut

PM> Install-Package jquery.mobile.mvc

Install jQuery.Mobile.MVC Nuget package in MVC from the Package Manager Console (Tools > Library Package Manger > Package Manager Console). Even though we are using Kendo UI mobile as our defacto framework, installing this package helps get the setup done faster than doing it by hand, so why not? :)

When installing the jquery.mobile.mvc nuget package in MVC, it does some of the ground work for preparing our MVC 5 web application to support mobile pages along side our full desktop-view pages.

Modify the Global.asax (in root of web application)

using System;
using System.Linq;
using System.Web.Http;
using System.Web.Mvc;
using System.Web.Optimization;
using System.Web.Routing;

namespace MyApp
{
    // Note: For instructions on enabling IIS6 or IIS7 classic mode, 
    // visit http://go.microsoft.com/?LinkId=9394801

    public class MvcApplication : System.Web.HttpApplication
    {
        protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();

            WebApiConfig.Register(GlobalConfiguration.Configuration);
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RouteConfig.RegisterRoutes(RouteTable.Routes);
            BundleConfig.RegisterBundles(BundleTable.Bundles);
            BundleMobileConfig.RegisterBundles(BundleTable.Bundles); // Just added the BundleMobleConfig
            AuthConfig.RegisterAuth();
        }
    }
}

After we installed the jquery.mobile.mvc package, it should have loaded a text file stating that we need to add another configuration registration call "BundleMobileConfig". This will allow us to load separate JavaScript and CSS files than we use in our Desktop-view MVC site. So, when you made this change, just close the global.asax as we don't need it anymore for our mobile pages.

/App_Start/BundleMobileConfig.cs (default setup)

The default bundles for the mobile configuration just have the basics: jquery.mobile, jquery.mobile css, and the custom site.mobile.css. Not much here, but it will work for a basic mobile site.

using System.Web;
using System.Web.Optimization;

namespace TestMvcApplication1 {
    public class BundleMobileConfig {
        public static void RegisterBundles(BundleCollection bundles) {
            bundles.Add(new ScriptBundle("~/bundles/jquerymobile")
                .Include("~/Scripts/jquery.mobile-{version}.js"));

            bundles.Add(new StyleBundle("~/Content/Mobile/css")
                .Include("~/Content/Site.Mobile.css"));
            
            bundles.Add(new StyleBundle("~/Content/jquerymobile/css")
                .Include("~/Content/jquery.mobile-{version}.css"));
        }
    }
}

/App_Start/BundleMobileConfig.cs (custom setup with Kendo UI, KnockoutJs, Bootstrap and CDN(s))

using System.Web;
using System.Web.Optimization;

namespace MyApp.Web {
    public class BundleMobileConfig {
        public static void RegisterBundles(BundleCollection bundles) {

            BundleTable.EnableOptimizations = true;

            // Enable CDN Support
            bundles.UseCdn = true;

            var jqueryCdnPath = "https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js";
            bundles.Add(new ScriptBundle("~/bundles/jquery", jqueryCdnPath).Include("~/Scripts/jquery-2.1.1.min.js"));

            var jqueryMobileCdnPath = "https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.4.2/jquery.mobile-1.4.2.min.js";
            bundles.Add(new ScriptBundle("~/bundles/jqueryMobile", jqueryMobileCdnPath).Include("~/Scripts/jquery.mobile-1.4.2.min.js"));

            var jqueryValidateCdnPath = "https://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js";
            bundles.Add(new ScriptBundle("~/bundles/jqueryValidate", jqueryValidateCdnPath).Include("~/Scripts/jquery.validate.min.js"));

            var bootstrapCdnPath = "https://ajax.aspnetcdn.com/ajax/bootstrap/3.1.1/bootstrap.min.js";
            bundles.Add(new ScriptBundle("~/bundles/bootstrap", bootstrapCdnPath).Include("~/Scripts/bootstrap.min.js"));

            var respondCdnPath = "https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js";
            bundles.Add(new ScriptBundle("~/bundles/respond", respondCdnPath).Include("~/Scripts/respond.js"));

            var knockoutCdnPath = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js";
            bundles.Add(new ScriptBundle("~/bundles/knockout", knockoutCdnPath).Include("~/Scripts/knockout-3.1.0.js"));

            var kendoAllCdnPath = "https://da7xgjtj801h2.cloudfront.net/2014.1.416/js/kendo.all.min.js";
            bundles.Add(new ScriptBundle("~/bundles/kendoAll", kendoAllCdnPath).Include("~/Scripts/kendo.all.min.js"));

            var kendoMvcCdnPath = "https://da7xgjtj801h2.cloudfront.net/2014.1.416/js/kendo.aspnetmvc.min.js";
            bundles.Add(new ScriptBundle("~/bundles/kendoMvc", kendoMvcCdnPath).Include("~/Scripts/kendo.aspnetmvc.min.js"));

            var kendoTimeCdnPath = "https://da7xgjtj801h2.cloudfront.net/2014.1.416/js/kendo.timezones.min.js";
            bundles.Add(new ScriptBundle("~/bundles/kendoTime", kendoTimeCdnPath).Include("~/Scripts/kendo.timezones.min.js"));

            bundles.Add(new ScriptBundle("~/bundles/mjq").Include(
                 "~/Scripts/MyApp.mobile.core.js"
                ));

            var jqueryMobileCSSCdnPath = "https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.4.2/jquery.mobile.theme-1.4.2.min.css";
            bundles.Add(new StyleBundle("~/Content/jqueryMobile", jqueryMobileCSSCdnPath).Include("~/Content/jquery.mobile-1.4.2.css"));

            var bootstrapCSSCdnPath = "https://ajax.aspnetcdn.com/ajax/bootstrap/3.1.1/css/bootstrap.min.css";
            bundles.Add(new StyleBundle("~/Content/bootstrap", bootstrapCSSCdnPath).Include("~/Content/bootstrap.min.css"));

            var bootstrapThemeCSSCdnPath = "https://ajax.aspnetcdn.com/ajax/bootstrap/3.1.1/css/bootstrap-theme.min.css";
            bundles.Add(new StyleBundle("~/Content/bootstrapTheme", bootstrapThemeCSSCdnPath).Include("~/Content/bootstrap-theme.min.css"));

            var kendoCommonCSSCdnPath = "https://da7xgjtj801h2.cloudfront.net/2014.1.416/styles/kendo.common.min.css";
            bundles.Add(new StyleBundle("~/Content/kendoCommon", kendoCommonCSSCdnPath).Include("~/Content/kendo.common.min.css"));

            var kendoCommonBootstrapCSSCdnPath = "https://da7xgjtj801h2.cloudfront.net/2014.1.416/styles/kendo.common-bootstrap.min.css";
            bundles.Add(new StyleBundle("~/Content/kendoCommonBootstrap", kendoCommonBootstrapCSSCdnPath).Include("~/Content/kendo.common-bootstrap.min.css"));

            var kendoBootstrapCSSCdnPath = "https://da7xgjtj801h2.cloudfront.net/2014.1.416/styles/kendo.bootstrap.min.css";
            bundles.Add(new StyleBundle("~/Content/kendoBootstrap", kendoBootstrapCSSCdnPath).Include("~/Content/kendo.bootstrap.min.css"));

            var kendoBootstrapMobileCSSCdnPath = "https://da7xgjtj801h2.cloudfront.net/2014.1.416/styles/kendo.bootstrap.mobile.min.css";
            bundles.Add(new StyleBundle("~/Content/kendoBootstrapMobile", kendoBootstrapMobileCSSCdnPath).Include("~/Content/kendo.bootstrap.mobile.min.css"));

            var kendoMobileCSSCdnPath = "https://da7xgjtj801h2.cloudfront.net/2014.1.416/styles/kendo.mobile.all.min.css";
            bundles.Add(new StyleBundle("~/Content/kendoMobile", kendoMobileCSSCdnPath).Include("~/Content/kendo.mobile.all.min.css"));

            bundles.Add(new StyleBundle("~/Content/mcss").Include(
                    "~/Content/Site.Mobile.css"));
        }
    }
}

Yep. With the addition of the CDNs, there's lots of stuff here. You notice that I'm also pulling in the full versions of JavaScript with the mobile versions (in some cases). The reason behind this is that the mobile versions, generally are just extensions of the bigger JavaScript library version, and are dependents, so we have to include them too. The bigger differences are with the CSS files as being mobile-specific, the styles are definitely different. It's worth noting that I wanted my Bootstrap navigation system to be used in my application setup, so that's why I have the bootstrap JavaScript and CSS files, but you don't need those if you do not want to use that navigation style.

/Views/Shared/_Layout.Mobile.cshtml (default setup)

This is the default layout setup that is created for you when you install the jquery.mobile.mvc nuget package. It already references bundles in the BundleMobileConfig that we modified earlier. Also, it references the Partial View of "_ViewSwitcher" which is a handy little partial view that allows a Mobile user to switch to the main MVC Desktop views if they wish to do so.

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8" />
        <title>@ViewBag.Title</title> 
        <meta name="viewport" content="width=device-width" />
        @Styles.Render("~/Content/Mobile/css", "~/Content/jquerymobile/css")
        @Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
        <script>
            $(document).ready(function () {
                $.mobile.ajaxEnabled = false; 
            });
        </script>
    </head> 
<body> 

    <div data-role="page" data-theme="a">
        @Html.Partial("_ViewSwitcher")

        <div data-role="header">
            <h1>@ViewBag.Title</h1>
        </div>

        <div data-role="content">
            @RenderSection("featured", false)
            @RenderBody()  
        </div>

    </div>

</body>
</html>

/Views/Shared/_Layout.Mobile.cshtml (custom setup with Kendo UI, KnockoutJs and Bootstrap)

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <title>@ViewBag.Title</title>

    @Styles.Render("~/Content/jqueryMobile")
    @Styles.Render("~/Content/kendoCommon")
    @Styles.Render("~/Content/kendoCommonBootstrap")
    @Styles.Render("~/Content/kendoBootstrap")
    @Styles.Render("~/Content/kendoBootstrapMobile")
    @Styles.Render("~/Content/kendoMobile")
    @Styles.Render("~/Content/bootstrap")
    @Styles.Render("~/Content/bootstrapTheme")
    @Styles.Render("~/Content/mcss")

    @Scripts.Render("~/bundles/jquery")
    <script>
        if (typeof jQuery == "undefined") { document.write(decodeURIComponent('%3Cscript src="/Scripts/jquery-2.1.1.min.js" %3E%3C/script%3E')) }
    </script> 
    @Scripts.Render("~/bundles/jqueryValidate")
    <script>
        if (!$.validator) { document.write(decodeURIComponent('%3Cscript src="/Scripts/jquery.validate.min.js" %3E%3C/script%3E')) }
    </script> 
    @Scripts.Render("~/bundles/knockout")
    <script>
        if (!window.ko) { document.write(decodeURIComponent('%3Cscript src="/Scripts/knockout-3.1.0.js" %3E%3C/script%3E')) }
    </script>
    @Scripts.Render("~/bundles/kendoAll")
    @Scripts.Render("~/bundles/kendoMvc")
    @Scripts.Render("~/bundles/kendoTime")
    <script>
        if (typeof kendo == "undefined") { document.write(decodeURIComponent('%3Clink rel="stylesheet" href="/Content/kendo.common.min.css" %3C/%3E')); document.write(decodeURIComponent('%3Clink rel="stylesheet" href="/Content/kendo.common-bootstrap.min.css" %3C/%3E')); document.write(decodeURIComponent('%3Clink rel="stylesheet" href="/Content/kendo.bootstrap.min.css" %3C/%3E')); document.write(decodeURIComponent('%3Clink rel="stylesheet" href="/Content/kendo.bootstrap.mobile.min.css" %3C/%3E')); document.write(decodeURIComponent('%3Clink rel="stylesheet" href="/Content/kendo.mobile.all.min.css" %3C/%3E')); document.write(decodeURIComponent('%3Cscript src="/Scripts/kendo.all.min.js" %3E%3C/script%3E')); document.write(decodeURIComponent('%3Cscript src="/Scripts/kendo.aspnetmvc.min.js" %3E%3C/script%3E')); document.write(decodeURIComponent('%3Cscript src="/Scripts/kendo.timezones.min.js" %3E%3C/script%3E')) }
    </script>
    @Scripts.Render("~/bundles/mjq")

    @RenderSection("head", false)
</head>
<body>
    @(Html.Kendo().MobileLayout()
       .Name("layout")
       .Platform("ios")
        .Footer("")
)

    @(Html.Kendo().MobileLayout()
       .Name("layout")
       .Platform("android")
        .Footer("")
)

    @(Html.Kendo().MobileLayout()
       .Name("layout")
       .Platform("blackberry")
        .Footer("")
)

    @( Html.Kendo().MobileLayout()
       .Name("layout")
       .Platform("wp")
        .Footer("")
)

    @(Html.Kendo().MobileView()
        .Name("layoutView")
        .Layout("layout")
        .Content(@<text>
                    <div class="navbar navbar-inverse navbar-fixed-top">
                        <div class="container">
                            <div class="navbar-header">
                                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                </button>
                                @Html.ActionLink("Application name", "Index", "Home", new { Area = "" }, new { @class = "navbar-brand" })
                            </div>
                            <div class="navbar-collapse collapse">
                                @Html.Partial("_Navigation")
                            </div>
                        </div>
                    </div>
                    <div class="mTop55">
                        @RenderBody()
                    </div>
                </text>
        )
  )
    

    <style scoped>
        #layoutView .km-view-title { visibility: inherit; }
        .km-android #layoutView .km-view-title { display: block; position: static; }
    </style>

    @Scripts.Render("~/bundles/respond")
    @Scripts.Render("~/bundles/bootstrap")
    <script>
        if (typeof $().emulateTransitionEnd != "function") { document.write(decodeURIComponent('%3Clink rel="stylesheet" href="/Content/bootstrap.min.css" %3C/%3E')); document.write(decodeURIComponent('%3Clink rel="stylesheet" href="/Content/bootstrap-theme.min.css" %3C/%3E')); document.write(decodeURIComponent('%3Cscript src="/Scripts/bootstrap.min.js" %3E%3C/script%3E')) }
    </script> 
    <script>
        var app = new kendo.mobile.Application(document.body, { layout: "mobile" }); Url = function () { }; Url.prototype = { _relativeRoot: '@Url.Content("~")', resolve: function (e) { var t = e; if (e[0] == "~") t = this._relativeRoot + e.substring(2); return t } }; $Url = new Url; jQuery(document).ready(function (e) { e("#nav-wrap").prepend('<div id="menu-icon">Menu</div>'); e("#menu-icon").on("click", function () { e("#nav").slideToggle(); e(this).toggleClass("active") }) });
    </script>
    @RenderSection("scripts", required: false)
</body>
</html>

If you remember the previous post, we did something very similar when referencing our bundles and the CDNs (contained within them). If the CDN for any given JavaScript (or CSS) fails, then we need to be aware of that and load up the local version of the JavaScript files (and CSS). The rule of thumb is that if one JavaScript fails from a specific CDN, just assume that they all fail from that CDN and load the corresponding JavaScript AND CSS files just to be on the safe side.

Inspecting the custom _Layout.mobile.cshtml

Here we have the Kendo-specific HTML Helpers that are defining our mobile layout that will run for the entire site (assuming you are hitting the site on a mobile and/or tablet device). There is one definition for each platform: IOS, Android, Blackberry, and Windows Phone (8 and up). What is cool here is that if you include all of the kendo mobile css, and use the native Kendo Mobile buttons, it will make the site appear as a native application to each platform. So, IOS will look like an IOS app, Android like an Android app, etc. The only draw back is that if you are supporting a huge site and don't have room for big, native looking buttons, then you'll probably want to take the route I did and use the bootstrap navigation.

@(Html.Kendo().MobileLayout()
    .Name("layout")
    .Platform("ios")
    .Footer("")
)

@(Html.Kendo().MobileLayout()
    .Name("layout")
    .Platform("android")
    .Footer("")
)

@(Html.Kendo().MobileLayout()
    .Name("layout")
    .Platform("blackberry")
    .Footer("")
)

@( Html.Kendo().MobileLayout()
    .Name("layout")
    .Platform("wp")
    .Footer("")
)

Inspecting the custom _Layout.mobile.cshtml - a Second Look

The other key to getting up and running with Kendo mobile is the Kendo MobileView(). Almost all examples show this HTML helper in the individual mobile view pages (which I think is ridiculous). Here, I have put this main HTML helper in the _Layout.mobile page so that I just have to render content as usual in my [viewname].mobile.cshtml pages and will help copying and converting them much faster. Other things to note here is that I am supporting the Bootstrap navigation that the main Desktop view uses and because of the responsive layout, it automatically goes into "mobile mode" to collapse the navigation.

@(Html.Kendo().MobileView()
    .Name("layoutView")
    .Layout("layout")
    .Content(@<text>
                <div class="navbar navbar-inverse navbar-fixed-top">
                    <div class="container">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            @Html.ActionLink("Application name", "Index", "Home", new { Area = "" }, new { @class = "navbar-brand" })
                        </div>
                        <div class="navbar-collapse collapse">
                            @Html.Partial("_Navigation")
                        </div>
                    </div>
                </div>
                <div class="mTop55">
                    @RenderBody()
                </div>
            </text>
    )
)

All Setup, now what?

If you have made it this far, and I'm sure some testing, start creating a .mobile.cshtml version for every view in your MVC 5 web site.

For instance:

/Views/Home/Index.cshtml
/Views/Home/Index.mobile.cshtml
/Views/Accounts/Login.cshtml
/Views/Accounts/Login.mobile.cshtml
etc...

It may seem like a daunting task to go through the site and create .mobile pages, but if you start out with the Desktop view as a copy and just make consistent changes (like change the way the pages are titled to like an <H3> tag opposed to <H1> or <H2>, you should be looking good. Just get one or two pages with content going first and looking the way you want, then use the same structure with the rest of the .mobile pages.

Cheers!

Tidy up your ASP.NET MVC 5 web.config

noreply@blogger.com (Anonymous) — Thu, 12 Jun 2014 12:30:00 +0000

If you're like me and my applications, you typically have a ton of AppSettings muddying up your web.config file in your MVC web application. You probably have a few Connection Strings, but the bulk of the craziness is the AppSettings block. There is a way to separate out the sections from your web.config to make things a bit more tidy for the web.config. We'll create some files also in the root of the MVC web application to buddy up next to the web.config file.

Create an AppSettings.config file

<?xml version="1.0" encoding="utf-8" ?>
<appSettings>
  <add key="webpages:Version" value="3.0.0.0" />
  <add key="webpages:Enabled" value="false" />
  <add key="ClientValidationEnabled" value="true" />
  <add key="UnobtrusiveJavaScriptEnabled" value="true" />
  
  <!-- Custom settings below this line-->
  <add key="EnableCustomErrors" value="true"/>
  <add key="EnableOptimization" value="false"/>
  
  <!-- Map Settings -->
  <add key="AddressMap" value="/mapurl"/>
  
  <!-- Mail Server Settings-->
  <add key="DefaultEmail" value="notify@someoneelse.com" />
  <add key="SMTPServer" value="smtp.mail.com" />
  <add key="SMTPPort" value="25"/>
  <add key="SMTPAuthUser" value="bing@google.com"/>
  <add key="SMTPAuthPassword" value="yahoo"/>
  <add key="UseSSL" value="true"/>
  <add key="UseSMTPAuth" value="true"/>
  
  <!-- 3rd Party Application Keys and Defaults-->
  <add key="reCAPTCHA::PublicKey" value="want" />
  <add key="reCAPTCHA::PrivateKey" value="something" />
  <add key="RouteDebugger:Enabled" value="false" />
</appSettings>

Basically, this is your <appSettings> block of xml data from the web.config. The only addition here is the <xml> tag at the top of the file.

Create a ConnectionStrings.config file

<?xml version="1.0" encoding="utf-8" ?>
<connectionStrings>
  <add name="DefaultConnection" connectionString="Data Source=.\SQLEXPRESS;Initial Catalog=MyApp;Integrated Security=True" providerName="System.Data.SqlClient" />
</connectionStrings>

Just like our <appSettings> block we moved, here we have moved our <connectionStrings> block of xml to our newly created file.

Update your web.config file

<appSettings configSource="AppSettings.config" />
<connectionStrings configSource="ConnectionStrings.config" />

That is putting a bow-tie on the configuration settings. Now, that they are separated into different files, you do not have to mess with the web.config every time you need to change the <appSettings> or <connectionStrings> blocks. This also works well when you have different developers with slightly different database connections or settings, depending on what version of a project they are working on, etc. So, you can have the Config files be prevented from being checked in (except for like the Tech Lead, obviously).

Cheers!

Kendo UI 2014 with MVC 5, Bootstrap, KnockoutJs and Pines Notify (and using CDN)

noreply@blogger.com (Anonymous) — Wed, 11 Jun 2014 14:19:00 +0000

Using Kendo in MVC 5 isn't necessarily a challenge, but if you are unfamiliar with setting up a Telerik product in MVC, things can seem strange and cause frustration in trying to get it to work right. So, never fear, James is here. :) I've been using Telerik products for years, in ASP.NET Forms and for the past few years, MVC. I'll walk you through the setup and show you how to pull it off using the CDN option for MVC. Let's get started.

First, go and create a new ASP.NET MVC 5 Web Application (Internet version is fine)

Done? You should now have a basic MVC 5 site together that you can run (if you want to hit CTRL + F5, or F5, you can test this). It works? Great, then lets move on.

Edit AppStart/BundleConfig.cs

using System;
using System.Configuration;
using System.Web;
using System.Web.Optimization;

namespace MyApp.Web
{
    public class BundleConfig
    {
        // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
        public static void RegisterBundles(BundleCollection bundles)
        {
            BundleTable.EnableOptimizations = true;

            #region JavaScript Bundles

            // Enable CDN Support
            bundles.UseCdn = true;

            var jqueryCdnPath = "https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js";
            bundles.Add(new ScriptBundle("~/bundles/jquery", jqueryCdnPath).Include("~/Scripts/jquery-2.1.1.min.js"));

            var jqueryValidateCdnPath = "https://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js";
            bundles.Add(new ScriptBundle("~/bundles/jqueryValidate", jqueryValidateCdnPath).Include("~/Scripts/jquery.validate.min.js"));

            var bootstrapCdnPath = "https://ajax.aspnetcdn.com/ajax/bootstrap/3.1.1/bootstrap.min.js";
            bundles.Add(new ScriptBundle("~/bundles/bootstrap", bootstrapCdnPath).Include("~/Scripts/bootstrap.min.js"));

            var respondCdnPath = "https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js";
            bundles.Add(new ScriptBundle("~/bundles/respond", respondCdnPath).Include("~/Scripts/respond.js"));
            
            var knockoutCdnPath = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js";
            bundles.Add(new ScriptBundle("~/bundles/knockout", knockoutCdnPath).Include("~/Scripts/knockout-3.1.0.js"));

            var kendoAllCdnPath = "https://da7xgjtj801h2.cloudfront.net/2014.1.416/js/kendo.all.min.js";
            bundles.Add(new ScriptBundle("~/bundles/kendoAll", kendoAllCdnPath).Include("~/Scripts/kendo.all.min.js"));

            var kendoMvcCdnPath = "https://da7xgjtj801h2.cloudfront.net/2014.1.416/js/kendo.aspnetmvc.min.js";
            bundles.Add(new ScriptBundle("~/bundles/kendoMvc", kendoMvcCdnPath).Include("~/Scripts/kendo.aspnetmvc.min.js"));

            var kendoTimeCdnPath = "https://da7xgjtj801h2.cloudfront.net/2014.1.416/js/kendo.timezones.min.js";
            bundles.Add(new ScriptBundle("~/bundles/kendoTime", kendoTimeCdnPath).Include("~/Scripts/kendo.timezones.min.js"));

            var pinesNotifyCdnPath = "https://cdnjs.cloudflare.com/ajax/libs/pnotify/2.0.0/pnotify.all.min.js";
            bundles.Add(new ScriptBundle("~/bundles/pNotify", pinesNotifyCdnPath).Include("~/Scripts/pnotify.all.min.js"));

            bundles.Add(new ScriptBundle("~/bundles/myapp").Include(
                        "~/Scripts/T4MvcJs/T4MvcJs.js",
                        "~/Scripts/bootstrap-switch.min.js",
                        "~/Scripts/MyApp.core.js"
                        ));

            #endregion

            #region CSS Bundles

            var bootstrapCSSCdnPath = "https://ajax.aspnetcdn.com/ajax/bootstrap/3.1.1/css/bootstrap.min.css";
            bundles.Add(new StyleBundle("~/Content/bootstrap", bootstrapCSSCdnPath).Include("~/Content/bootstrap.min.css"));

            var bootstrapThemeCSSCdnPath = "https://ajax.aspnetcdn.com/ajax/bootstrap/3.1.1/css/bootstrap-theme.min.css";
            bundles.Add(new StyleBundle("~/Content/bootstrapTheme", bootstrapThemeCSSCdnPath).Include("~/Content/bootstrap-theme.min.css"));

            var kendoCommonCSSCdnPath = "https://da7xgjtj801h2.cloudfront.net/2014.1.416/styles/kendo.common.min.css";
            bundles.Add(new StyleBundle("~/Content/kendoCommon", kendoCommonCSSCdnPath).Include("~/Content/kendo.common.min.css"));

            var kendoCommonBootstrapCSSCdnPath = "https://da7xgjtj801h2.cloudfront.net/2014.1.416/styles/kendo.common-bootstrap.min.css";
            bundles.Add(new StyleBundle("~/Content/kendoCommonBootstrap", kendoCommonBootstrapCSSCdnPath).Include("~/Content/kendo.common-bootstrap.min.css"));

            var kendoBootstrapCSSCdnPath = "https://da7xgjtj801h2.cloudfront.net/2014.1.416/styles/kendo.bootstrap.min.css";
            bundles.Add(new StyleBundle("~/Content/kendoBootstrap", kendoBootstrapCSSCdnPath).Include("~/Content/kendo.bootstrap.min.css"));

            var pinesNotifyCSSCdnPath = "https://cdnjs.cloudflare.com/ajax/libs/pnotify/2.0.0/pnotify.all.min.css";
            bundles.Add(new StyleBundle("~/Content/pNotify", pinesNotifyCSSCdnPath).Include("~/Content/pnotify.all.min.css"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap-switch.min.css",
                      "~/Content/bootstrap-glyphicons.css",
                      "~/Content/site.css"));

            #endregion

            bundles.IgnoreList.Clear();
        }
    }
}

Holy Cow! Look at all those JavaScript and CSS files! Yes, there are a lot, but if you want to take advantage of the open source CDN hosting, this is what it looks like. I have CDN's listed above for jQuery, jQuery Validate, Bootstrap, RespondJs, KnockoutJs, and Kendo. My custom JavaScript files are still being bundled and hosted locally (for now). So, this takes care of our Bundle Config. If you do not use files like Knockout, Bootstrap, Respond, etc., just get rid of them as you don't need them.

JavaScript / CSS files (/Scripts folder and /Content folder)

You see all those local paths that are listed with the CDN declarations? (i.e. .Include("~/Scripts/pnotify.all.min.js")) That is defining the local path in your MVC 5 application to the JavaScript or CSS file. This is very important to have when switching from bundles.UseCdn = true to bundles.UseCdn = false. These are the files it's going to try to produce when the CDN isn't being "turned on". This is not a fallback though, when the CDN is turned on and MVC 5 cannot download the file. That has to be handled manually (unfortunately).

/Views/Shared/_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>    
    @Styles.Render("~/Content/kendoCommon")
    @Styles.Render("~/Content/kendoCommonBootstrap")
    @Styles.Render("~/Content/kendoBootstrap")
    @Styles.Render("~/Content/bootstrap")
    @Styles.Render("~/Content/bootstrapTheme")
    @Styles.Render("~/Content/pNotify")
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/jquery")
    <script>
        if (typeof jQuery == "undefined") { document.write(decodeURIComponent('%3Cscript src="/Scripts/jquery-2.1.1.min.js" %3E%3C/script%3E')) }
    </script> 
    @Scripts.Render("~/bundles/jqueryValidate")
    <script>
        if (!$.validator) { document.write(decodeURIComponent('%3Cscript src="/Scripts/jquery.validate.min.js" %3E%3C/script%3E')) }
    </script> 
    @Scripts.Render("~/bundles/knockout")
    <script>
        if (!window.ko) { document.write(decodeURIComponent('%3Cscript src="/Scripts/knockout-3.1.0.js" %3E%3C/script%3E')) }
    </script>
    @Scripts.Render("~/bundles/kendoAll")
    @Scripts.Render("~/bundles/kendoMvc")
    @Scripts.Render("~/bundles/kendoTime")
    <script>
        if (typeof kendo == "undefined") { document.write(decodeURIComponent('%3Clink rel="stylesheet" href="/Content/kendo.common.min.css" %3C/%3E')); document.write(decodeURIComponent('%3Clink rel="stylesheet" href="/Content/kendo.common-bootstrap.min.css" %3C/%3E')); document.write(decodeURIComponent('%3Clink rel="stylesheet" href="/Content/kendo.bootstrap.min.css" %3C/%3E')); document.write(decodeURIComponent('%3Clink rel="stylesheet" href="/Content/kendo.bootstrap.mobile.min.css" %3C/%3E')); document.write(decodeURIComponent('%3Clink rel="stylesheet" href="/Content/kendo.mobile.all.min.css" %3C/%3E')); document.write(decodeURIComponent('%3Cscript src="/Scripts/kendo.all.min.js" %3E%3C/script%3E')); document.write(decodeURIComponent('%3Cscript src="/Scripts/kendo.aspnetmvc.min.js" %3E%3C/script%3E')); document.write(decodeURIComponent('%3Cscript src="/Scripts/kendo.timezones.min.js" %3E%3C/script%3E')) }
    </script>
    
    @RenderSection("head", false)
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { Area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                @Html.Partial("_Navigation")
            </div>
        </div>
    </div>
    <div id="headerSub"></div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - MyApp</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/bootstrap")
    <script>
        if (typeof $().emulateTransitionEnd != "function") { document.write(decodeURIComponent('%3Clink rel="stylesheet" href="/Content/bootstrap.min.css" %3C/%3E')); document.write(decodeURIComponent('%3Clink rel="stylesheet" href="/Content/bootstrap-theme.min.css" %3C/%3E')); document.write(decodeURIComponent('%3Cscript src="/Scripts/bootstrap.min.js" %3E%3C/script%3E')) }
    </script> 
    @Scripts.Render("~/bundles/respond")
    @Scripts.Render("~/bundles/pNotify")
    @Scripts.Render("~/bundles/myapp")
    @RenderSection("scripts", required: false)
</body>
</html>

Really? Is all that necessary? Yes. Yes, it's all necessary (and minified for your convenience). Kendo UI likes to have it's JavaScript files in the <Head> part of the document, and of course it relies on jQuery, so jQuery needs to go there as well. The CSS bundles, as usual are also contained in the <Head>. Knockout was questionable to put there, but I did it anyways since it's so small. Bootstrap, Respond, Pines Notify and my custom JavaScript files are at the bottom, just before the closing </Body> tag.

You'll notice that there are many <script> blocks that follow the declarations of CDN bundles. The reason for this is our "fallback" when the CDN fails to load one of the referenced JavaScript and/or CSS files. It happens and if you don't want your web application to take a nose-dive, you'll want to do this (to Hell with the YSlow purists!). You'll make up points with CDN versus HTML requests and <script> blocks. Just make sure that you minify any <script> block you use to test for and load a local JavaScript/CSS file.

Also, I group some of them together where they are coming from the same CDN host. No reason to test for every single JavaScript file. If one fails to load from a specific CDN, assume all are going to fail and load the CSS and JavaScripts that are supposed to come from that CDN host.

/Views/web.config (same as if in an MVC Area, you need to update those too)

<system.web.webPages.razor>
    <host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=5.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
    <pages pageBaseType="System.Web.Mvc.WebViewPage">
      <namespaces>
        <add namespace="System.Web.Mvc" />
        <add namespace="System.Web.Mvc.Ajax" />
        <add namespace="System.Web.Mvc.Html" />
        <add namespace="System.Web.Optimization"/>
        <add namespace="System.Web.Routing" />
        <add namespace="MyApp.Web" />
        <add namespace="Kendo.Mvc.UI" />
      </namespaces>
    </pages>
  </system.web.webPages.razor>

In all the /View/web.config 's, you have to add the namespace(s) for your custom application and the Kendo.Mvc.UI if you want to see your @Html.Kendo() helpers. If you miss this step or don't do it, you'll be a little frustrated. :)

That's basically it for getting Kendo UI up and running. I touched on the main points. I didn't go into the detail of referencing Kendo.Mvc DLL or adding the Kendo JavaScript and CSS files, along with the other 3rd party files like Bootstrap, RespondJs, KnockoutJs and Pines Notify. The focus for this post was getting Kendo running with the other JavaScript files in MVC 5 with CDN support.

Cheers!

Central KnockoutJs JavaScript Debugger Function

noreply@blogger.com (Anonymous) — Tue, 10 Jun 2014 12:30:00 +0000

If you use KnockoutJs, and need a way to watch the KnockoutJs observables change to see their real-time values, it can be kind of a pain. Luckily, KnockoutJs does provide a way to generate all the observables out to a formatted string.

HTML page

<html>
    <head>
        <title>Test Page - MyApp</title>
        <script src="MyApp.core.js" type="text/javascript"></script>
        <script src="MyApp.accounts.js" type="text/javascript"></script>
    </head>
    <body>
        <span data-bind="text: FirstName"></span><br />
        <span data-bind="text: LastName"></span><br /><br />
        <button data-bind="click: buttonClick">Click Me!</button>

        <script type="text/javascript" language="javascript">
            var ViewModel = function () {
                var self = this;

                // Some observables (can be dynamically generated with server-side code to Raw HTML
                self.FirstName = ko.observable();
                self.LastName = ko.observable();
                self.People = ko.observableArray();
            };
            $(function () {
                MyApp.core.DebugKO();
                MyApp.accounts.InitializeEditPage(ViewModel);
            });
        </script>
    </body>
</html>

The HTML/Code above is similar to my previous post about KnockoutJs, with just two additions. First, I'm including another JavaScript library called "MyApp.core.js". Secondly, I'm calling a namespaced function "MyApp.core.DebugKO()". The function, which I only use for debugging KnockoutJs live (Firebug's DOM in FireFox can also see our "live" KnockougJs elements). There's nothing magical here other than we have a core function for creating the KnockoutJs elments that can be called anywhere we reference our core JavaScript library.

Core JavaScript Library

if (typeof MyApp === 'undefined') {
    MyApp = {};
}

MyApp.core = {};

// Central way to allow quick debugging for KnockoutJs
MyApp.core.DebugKO = function (target, viewModel) {
    target = target != undefined && target != null ? target : "body";
    viewModel = viewModel != undefined && viewModel != null ? viewModel : "$root";
    $(target).append("<pre style='border: 1px red dashed; padding: 10px; margin: 10px;' data-bind='text: ko.toJSON(" + viewModel+ ", null, 2)'></pre><div class='clear'></div>");
};

The DebugKO function above defaults to creating a <pre> element before the closing <body> tag of a page when it's called. It will list out all the KnockoutJs observables that have been bound to the page. The parameters that are optional are the target, which allows you to put the generated observable list somewhere else in the HTML, and secondly, the viewModel which allows you to target a specific view model on the page (generally used when you have multiple KnockoutJs view models on one page).

Cheers!

Use KnockoutJs and separate JavaScript files outside of a web page

noreply@blogger.com (Anonymous) — Mon, 09 Jun 2014 13:00:00 +0000

If you have used KnockoutJs before, or are just getting into it, you may have noticed that the majority of examples, if not all, show how to use KnockoutJs within the HTML web page (<script> block). This may work for the simple examples, but in the real world with large web applications, we tend to have a vast number of JavaScript libraries, full of namespaced functions (i.e. MyApp.accounts.DoSomething();)

So, what's the plan then?

The plan is to have the following: HTML page with a <script> block, and then have a JavaScript library that contains functions that need to access the KnockoutJs view model that has been bound.

HTML page

<html>
    <head>
        <title>Test Page - MyApp</title>
        <script src="MyApp.accounts.js" type="text/javascript"></script>
    </head>
    <body>
        <span data-bind="text: FirstName"></span><br />
        <span data-bind="text: LastName"></span><br /><br />
        <button data-bind="click: buttonClick">Click Me!</button>

        <script type="text/javascript" language="javascript">
            var ViewModel = function () {
                var self = this;

                // Some observables (can be dynamically generated with server-side code to Raw HTML
                self.FirstName = ko.observable();
                self.LastName = ko.observable();
                self.People = ko.observableArray();
            };
            $(function () {
                MyApp.accounts.InitializeEditPage(ViewModel);
            });
        </script>
    </body>
</html>

Here we have a simple HTML page which could also be a rendered PHP, Java or ASP.NET MVC page that constructs part of the view model for KnockoutJs. We also are referencing a custom JavaScript library of MyApp.accounts.js. What we don't have here is the actual binding of KnockoutJs. So, we are not going to bind it in the HTML page, but pass the generated view model to a JavaScript library function called "MyApp.accounts.InitializeEditPage(ViewModel)".

JavaScript library

if (typeof MyApp === 'undefined') {
    MyApp = {};
}

MyApp.accounts = {};

// Declare global variable to use to hold the knockout view model
var ko_AccountViewModel = "";

// Initilize KnockoutJs
MyApp.accounts.InitilizeEditPage = function (KnockoutViewModel) {
    // Create new instance of the passed in View Model
    ko_AccountViewModel = new KnockoutViewModel();
    var self = ko_AccountViewModel;

    // Define the click event for the button
    self.buttonClick = function () {
        MyApp.accounts.DoSomething();
    };

    // Bind KnockoutJs
    ko.applyBindings(self);
};

// Typical JavaScript library function
MyApp.accounts.DoSomething = function () {
    var self = ko_AccountViewModel;

    // Update the KnockoutJs Variables
    self.FirstName("Bob");
    self.LastName("Smith");
};

What's going on here is we first are establishing our namespace of MyApp, then MyApp.accounts. Next, we define our global variable in JavaScript to hold our Knockout view model that will be bound (this is important, otherwise the view model will not be available to other JavaScript functions). Finally, we define our Initialize JavaScript function and a random JavaScript function that uses the Knockout view model that was passed from the HTML page into the JavaScript library and then bound.

So, what's the point to all this?

The point my friends is that keeping your HTML page with as little in-page JavaScript, whether it's straight HTML, PHP, ASP.NET MVC or Java, is definitely a good thing. One of the blockers has been when using MVVM's like Knockout is how to access KnockoutJs from a JavaScript library. What this setup above demonstrates is how to do that. Is this a perfect solution? No, as with all coding, there's always potential refactoring that can take place, I just don't know what that looks like at the time of this post. :)

Cheers!

Replace text in a JavaScript string with text from a JavaScript Array

noreply@blogger.com (Anonymous) — Fri, 06 Jun 2014 13:00:00 +0000

Have you ever needed to replace multiple text "parts" of a JavaScript string by using an array of values? Well, as weird as a scenario it may seem, I have had to do that for a particular scenario in a project.

The manual way

<script>
   var myString = "abcdefghijklmnopqrstuvwxyz";
   myString.replace("c", "");
   myString.replace("m", "");
   // ... etc.
</script>

That gets old really quickly if you have a lot of string manipulation that you need to do!

The better way

<script>
   var myString = "abcdefghijklmnopqrstuvwxyz";
   var items = ["c", "m", "x", "f"];    
   
   for (var i = 0; i < items.length; i++) {
      myString = myString.replace(items[i].toLowerCase(), "");
   }
</script>

Returns: abdeghijklnopqrstuvwyz

As you can see we are just using a simple JavaScript for loop to loop through our JavaScript array and do some string manipulation on the fly.

Here is a link to a working example on JSFiddle. One thing to note is that in the example, the 3rd example in the JSFiddle code only replaces the first instance of the text it runs into in the string. If you have more than one occurrence of the text you are looking for, then you need to use the JavaScript global option (i.e. /g ). Here is a blog post about that.

Cheers!

Prevent Username (login) from being saved by the Internet Browser

noreply@blogger.com (Anonymous) — Thu, 05 Jun 2014 14:04:00 +0000

If you have tried to prevent the browser from caching the "username" field, which in turn caches the adjoining "password", then you have searched the Internet and StackOverflow trying to find an answer. Well, unfortunately, the default answer is to have an HTML 5 attribute of 'autocomplete = "off"'. While this is not wrong markup, most browsers will not honor it and not cache the "username" field.

Hack, but a solution

So, in my quest to pull this off, I tried everything from randomizing the name of the "username" box with a session Id to appending it with a TimeStamp -- the browsers kept "remembering" what was once typed in. Then it dawned on me that it will not capture a Password input field, if there is no adjoining "username"-type field to go with it. So, the hack is to make the input field for the "username" an input type of "password". Let me show you:

Traditional Markup (HTML)

<div>
    <form>
        <fieldset>
            <ul>
                <li>
                    <input type="text" id="username" autocomplete="off" />
                </li>
                <li>
                    <input type="password" id="password" autocomplete="off" />
                </li>
            </ul>
            <input type="submit" value="submit" />
        </fieldset>
    </form>
</div>

This is our typical setup, username and password. Nothing fancy here, but the browsers will sure save these fields if you like it or not!

Hacked Markup (HTML)

<div>
    <form>
        <fieldset>
            <ul>
                <li>
                    <input type="password" id="username" autocomplete="off" />
                </li>
                <li>
                    <input type="password" id="password" autocomplete="off" />
                </li>
            </ul>
            <input type="submit" value="submit" />
        </fieldset>
    </form>
</div>
<script src="jquery.show-password.min.js"></script>
<script>
    $(function () {
        $('#username').showPassword();
    });
</script>

Using the jQuery plugin by the Github user "cloudfour" (check it out here: https://github.com/cloudfour/hideShowPassword), I am using the plugin to prevent the "username" field from showing the asterisks (since it is a password field. The best part here is that because it is a password field, the browser ignores it as trying to cache it because it would be a security risk.

Although, FireFox, Chrome and Internet Explorer either have built-in utilities or add-ons that can remember your password for you, only if you "opt-in" and say "Yes, Save my Password" when prompted.

Replace characters in JavaScript string: Fast and Global

noreply@blogger.com (Anonymous) — Mon, 19 May 2014 14:58:00 +0000

One thing in JavaScript that you need to do every now and then is replace a character (or more) from a string in the code.

Simple Replace

var myText = "Hello World.";
myText.replace('.', '!');

Result:  Hello World!

Here we are just doing a simple replace of one character. Easy right? Now, let's look at what happens when we have more than one of the same character in which we are replacing:

Multiple Replace

var myText = "Hello to the World.";
myText.replace(' ', '');

Result:  Helloto the World.

Uh oh, it looks like JavaScript only replaced the first instance of the character in which we were searching. Don't fret, there's a parameter for that. Enter the "global" option in JavaScript or "/g". Let's try the same example as above, but this time add the global option.

Multiple Replace (with global option)

var myText = "Hello to the World.";
myText.replace(/ /g, '');

Result:  HellototheWorld.

As you can see, the global option (i.e. "/g") tells JavaScript that we need to inspect the entire string for this replacement, not just the first character. Keep in mind that this is using Regex (more on regex) and certain characters can actually cause a Regex error if you get fancy.

You can find a working code set of the above examples here.

Cheers!

Kendo UI Scheduler Custom Event Editor Not Showing "DisplayFor" Fields in ASP.NET MVC

noreply@blogger.com (Anonymous) — Fri, 16 May 2014 19:41:00 +0000

Upon adding a water-downed version of my Scheduler in another area that shows the "Read Only" version of some of the model (data) fields, I noticed that nothing was displaying. I know from the "Read" event, that the data definitely was making it to the Scheduler Widget, but wasn't being shown when you open one of the existing events. Then I thought about it, and WWTD (What Would Telerik Do). Well, Telerik silently has embedded their MVVM into the Kendo UI Scheduler widget. So, I bet, if I do a little data-bind(ing), it will work.

Not so fast. If you remember my main post example on the Kendo UI Scheduler, you'll know that if you want something to show up in the custom Event Editor Template, you'll have to add it to the model (Schema in the web version). So, we have to do two things: Add our extra "display for" fields to our Scheduler model, and then add some MVVM magic to the Event Editor Template.

Model (Schema) Addition:

.Model(m =>
            {
                m.Id(f => f.Id);
                m.Field(f => f.Start);
                m.Field(f => f.End);
                m.Field(f => f.IsAllDay);
                m.Field(f => f.Title).DefaultValue("No Title");
                m.Field(f => f.RecurrenceRule);
                m.Field(f => f.Description);
                m.RecurrenceId(f => f.Recurrence);
                // New Fields
                m.Field(f => f.CustomerName);
                m.Field(f => f.BusinessName);
                m.Field(f => f.PaymentName);
            })

Notice here we just are adding three new fields from our ASP.NET MVC Model (and to our Scheduler Model): CustomerName, BusinessName, and PaymentName.
Note: This example has been abbreviated. If you need the full Scheduler setup, see my main post example.

Model (Schema) Addition:

<div class="k-edit-label">
        @Html.Label("CustomerId", "Customer")
</div>
<div data-container-for="CustomerId" class="k-edit-field">
        <div class="mTop6" data-bind="text: CustomerName"></div>
</div>

In the custom Event Editor Template, we create a DOM element (here a DIV), and then use the HTML 5 "data-bind" with the "text" binding and the matching Model property (here "CustomerName") that we defined in our Model (Schema in Kendo Web) from the parent view.
Note: This example has been abbreviated. If you need the full Scheduler setup, see my main post example.

Cheers!

Kendo UI Scheduler with ASP.NET MVC and Peta Poco Complete Example

noreply@blogger.com (Anonymous) — Fri, 09 May 2014 20:23:00 +0000

The Kendo UI Scheduler is a very powerful scheduling widget from Telerik that makes our lives easier (assuming you need this functionality). As great as the tool is, some of us that have used Telerik products for years are left scratching our heads when it comes to the ASP.NET MVC documentation of the Kendo UI library, especially with the Scheduler widget.

From much trial and error, an ever-expanding Stack Overflow collaboration "question", and some documentation from Telerik, I have put together a "getting started" guide to get you running with a Kendo UI Scheduler in ASP.NET MVC. Below, I've broken up the code into several parts: the database table structure, custom attribute date checker, the view models, the handlers, the controllers, the view and the editor template. Telerik has their "example", but this example is more flushed out for a real world project (my opinion of course).

Additional Notes
Also, just as a reminder, my ORM is Peta-Poco, and some of the logic in the handlers is related to Peta-Poco and will be different for your application. I do not go into the building of the Domain Project layer with Peta-Poco and this article assumes that you already have an ORM in place. I also use AutoMapper to do some of my automatic stitching, although in this particular example it is scarce. I also am using Structure Map (for MVC) within this project in which you'll see a reference to it in the Controller code. Lastly, I also have a custom class "ResponseError" which you'll see in a few places in the handler. This is just a custom interface used to wrap my result object view model with any errors that may occur so no matter what view model is to be passed back, it's always wrapped in an IResponseError object.

Documentation and Examples
I figured it to be prudent to provide links to the documentation and example provided by Telerik so you don't have to hunt for it.

Database Structure

The database table structure is pretty straight-forward and you can add any columns you would like to it (and change "Id" to like "EventId", etc). Our view model will pull all of these columns.

Custom Attribute (from Telerik)

using System;
using System.Linq;
using System.ComponentModel.DataAnnotations;

namespace MyProject.Common.Attributes
{
        public class DateGreaterThanAttribute : ValidationAttribute
        {
            private const string DEFAULT_ERROR_MSG_TEMPLATE = "{0} should be after {1}";

            public DateGreaterThanAttribute()
            {
                if (String.IsNullOrEmpty(ErrorMessage))
                {
                    ErrorMessage = DEFAULT_ERROR_MSG_TEMPLATE;
                }
            }

            protected override ValidationResult IsValid(object value, ValidationContext validationContext)
            {
                DateTime? date = value != null ? (DateTime?)value : null;
                var otherValue = validationContext.ObjectType.GetProperty(OtherField).GetValue(validationContext.ObjectInstance);
                DateTime? otherDate = otherValue != null ? (DateTime?)otherValue : null;

                TimeSpan diff = date.Value.Subtract(otherDate.Value);

                if (date.HasValue && otherDate.HasValue && diff.TotalMinutes >= 0)
                {
                    return new ValidationResult(String.Format(ErrorMessage, validationContext.DisplayName, OtherField));
                }

                return ValidationResult.Success;

            }

            public string OtherField { get; set; }
        }
}

This attribute is supplied by an example project that Telerik has built for ASP.NET MVC and wasn't homegrown by me.

Base View Model

using Kendo.Mvc.UI;
using System;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using MyProject.Common.Attributes;

namespace MyProject.Application.ViewModels.Calendars
{
    public class BaseCalendarViewModel : ISchedulerEvent
    {
        // Mandatory Fields
        public string Title { get; set; }
        public string Description { get; set; }
        public string Recurrence { get; set; }
        public string StartTimezone { get; set; }
        public string EndTimezone { get; set; }

        private DateTime start;

        public DateTime Start
        {
            get
            {
                return start;
            }
            set
            {
                start = value.ToUniversalTime();
            }
        }

        private DateTime end;

        [Required]
        [DateGreaterThan(OtherField = "Start")]

        public DateTime End
        {
            get
            {
                return end;
            }
            set
            {
                end = value.ToUniversalTime();
            }
        }

        public string RecurrenceRule { get; set; }
        public int? RecurrenceID { get; set; }
        public string RecurrenceException { get; set; }
        public bool IsAllDay { get; set; }
    }
}

We are building the view model as a "base" class so that we can have multiple variations of using the Scheduler widget within our application. The main takeaway here is that this class must inherit from the ISchedulerEvent (part of the Kendo.MVC.UI Namespace)

Custom View Model

using System;
using System.Linq;

namespace MyProject.Application.ViewModels.Calendars
{
    public class CustomCalendarViewModel : BaseCalendarViewModel
    {        
        public int id { get; set; }
    }
}

Here we are creating our custom "one-off" view model that goes with our database table. This model should only contain the fields that are not part of the "base" class we created earlier. Here, we are inheriting from our custom "base" class that we created earlier.

Handlers
For our handlers, we essentially have our normal CRUD (Create, Read, Update and Delete) methods. In the Telerik example, they are using one handler as a service for all, but because my ORM is Peta Poco and I like to do things differently, my handlers are separated. Either way you decide to go, as long as you have CRUD methods to link to, you should be ok.

Read (handler)

using Kendo.Mvc.UI;
using System;
using System.Linq;
using System.Web.Mvc;
using MyProject.Application.ViewModels.Calendars;
using MyProject.Domain.PetaPoco;
using MyProject.Domain.PetaPoco.Model;

namespace MyProject.Application.Handlers.Calendars
{
    public class GetMyEventTableCalendar
    {
        private readonly IMyEventTableRepository _myEventTableRepository;

        public GetMyEventTableCalendar(IMyEventTableRepository myEventTableRepository)
        {
            this._myEventTableRepository = myEventTableRepository;
        }

        public virtual IQueryable<CustomCalendarViewModel> GetAll()
        {
            var sql = QueryBuilder.Select("*")
                .From("MyEventTable");

            var apps = _myEventTableRepository.Query<CustomCalendarViewModel>(sql);
            return apps.ToList().Select(app => new CustomCalendarViewModel
            {
                Id = app.Id,
                Title = app.Title,
                Start = DateTime.SpecifyKind(app.Start, DateTimeKind.Utc),
                End = DateTime.SpecifyKind(app.End, DateTimeKind.Utc),
                StartTimezone = app.StartTimezone,
                EndTimezone = app.EndTimezone,
                Description = app.Description,
                IsAllDay = app.IsAllDay,                
                RecurrenceRule = app.RecurrenceRule,
                RecurrenceException = app.RecurrenceException,
                RecurrenceID = app.RecurrenceID
            }).AsQueryable();
        }
    }
}

The read is pretty easy to tell what's going on. One extra thing I'm doing here (like the Telerik example) is hand-stitching a list together so that I can transform the DateTime coming from the database (it's saved in the database as UTC, so I need to convert it back).

Create / Update / Delete (handler)

using System;
using System.Linq;
using MyProject.Domain.PetaPoco.Model;
using MyProject.Application.ViewModels.Calendars;
using AutoMapper;

namespace MyProject.Application.Handlers.Calendars
{
    public class SaveMyEventTableCalendar
    {
        private readonly IMyEventTableRepository myEventTableRepository;

        public SaveMyEventTableCalendar(IMyEventTableRepository myEventTableRepository)
        {
            this.myEventTableRepository = myEventTableRepository;
        }

        public IResponse<CalendarMyEventTableViewModel> Execute(CalendarMyEventTableViewModel app)
        {
            try
            {
                var domainModel = new MyEventTable();
                var returnModel = new CalendarMyEventTableViewModel();

                if ((app.Id != null) && (app.Id > 0))
                {
                    //is edit, so we will update.
                    domainModel = myEventTableRepository.Get<MyEventTable>(app.Id);
                }
                else
                {
                    //is new
                }
                
                var mEventyTableId = myEventTableRepository.Save(Mapper.Map(app, domainModel));
                if (Id != null)
                    domainModel.MyEventTableId = Convert.ToInt32(myEventTableId);
                var response = new Response<CalendarMyEventTableViewModel>();
                response.Result = Mapper.Map(domainModel, new CalendarMyEventTableViewModel());

                return response;
            }
            catch (Exception ex)
            {
                var errors = new ResponseErrors();
                errors.Add(String.Empty, ex.Message);
                return new Response<CalendarMyEventTableViewModel>(errors);
            }
        }
    }
}

The Create, Update and Delete methods in the Controller will call the same SaveMyTableCalendarEvent handler. This makes things nice and neat so that regardless of the event status (new or existing), the same Save handler gets executed. The Delete method from the Controller, in my application, just passes back an Active = false and then saves the event for historical purposes, but you can easily create another handler specifically for deleting purposes.

Controller (my controller is AjaxController.cs

using Kendo.Mvc.UI;
using Kendo.Mvc.Extensions;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
using MyProject.Application;
using MyProject.Web.Controllers;
using MyProject.Web.Models;
using MyProject.Application.Handlers.Calendars;
using MyProject.Application.ViewModels.Calendars;

namespace MyProject.Web.Controllers
{
    public partial class AjaxController
    {
        public virtual JsonResult Read([DataSourceRequest] DataSourceRequest request)
        {
            var data = Using<GetMyEventTableCalendar>().GetAll().ToList();
            return Json(data.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
        }

        public virtual JsonResult Destroy([DataSourceRequest] DataSourceRequest request, CalendarMyEventTableViewModel app)
        {
            if (ModelState.IsValid)
            {
                var model = Using<SaveMyEventTableCalendar>().Execute(app);
                if (model.HasErrors)
                {
                    foreach (var error in model.Errors)
                    {
                        AddError(error.Field, error.Error);
                    }
                }
                return Json(new[] { model.Result }.ToDataSourceResult(request, ModelState));
            }

            return Json(new[] { app }.ToDataSourceResult(request, ModelState));
        }

        public virtual JsonResult Create([DataSourceRequest] DataSourceRequest request, CalendarMyEventTableViewModel app)
        {
            if (ModelState.IsValid)
            {
                var model = Using<SaveMyEventTableCalendar>().Execute(app);
                if (model.HasErrors)
                {
                    foreach (var error in model.Errors)
                    {
                        AddError(error.Field, error.Error);
                    }
                }
                return Json(new[] { model.Result }.ToDataSourceResult(request, ModelState));
            }

            return Json(new[] { app }.ToDataSourceResult(request, ModelState));
        }

        public virtual JsonResult Update([DataSourceRequest] DataSourceRequest request, CalendarMyEventTableViewModel app)
        {
            if (ModelState.IsValid)
            {
                var model = Using<SaveMyEventTableCalendar>().Execute(app);
                if (model.HasErrors)
                {
                    foreach (var error in model.Errors)
                    {
                        AddError(error.Field, error.Error);
                    }
                }
                return Json(new[] { model.Result }.ToDataSourceResult(request, ModelState));
            }

            return Json(new[] { app }.ToDataSourceResult(request, ModelState));
        }

        protected override void Dispose(bool disposing)
        {
            base.Dispose(disposing);
        }
    }
}

These methods (very similar to those from the Telerik example) are pretty simple where they just call the handlers we have defined already. The call I'm doing is a "Using" statement, which is a custom interface to ObjectFactory for StructureMap (for MVC obviously).

View

@model MyProject.Application.ViewModels.Calendars.CalendarMyEventTableViewModel
@using MyProject.Application.ViewModels.Calendars
@{
    ViewBag.Title = "Calendar"
}
<div class="row mBottom15">
    <div class="col-md-12">
        <h2>@ViewBag.Title</h2>        
    </div>
</div>

<style>
    .k-window { width: 600px !important; }
    .k-edit-field { width: inherit; }
</style>
@(Html.Kendo().Scheduler<CalendarMyEventTableViewModel>()
    .Name("scheduler")
    .Date(DateTime.Today)
    .Views(views =>
        {
            views.DayView();
            views.WeekView();
            views.MonthView(month => month.Selected(true));
        })
    .Timezone("Etc/UTC")
    .DataSource(d => d
            .Model(m =>
            {
                m.Id(f => f.Id);
                m.Field(f => f.Start);
                m.Field(f => f.End);
                m.Field(f => f.IsAllDay);
                m.Field(f => f.Title).DefaultValue("No Title");
                m.Field(f => f.RecurrenceRule);
                m.Field(f => f.Description);
                m.RecurrenceId(f => f.Recurrence);
            })
            .Events(e => e.Error("error_handler"))
            .Read("Read", "Ajax", new { })
            .Create("Create", "Ajax", new { })
            .Destroy("Destroy", "Ajax", new { })
            .Update("Update", "Ajax", new { })
    )
    .Editable(edit =>
    {
        edit.TemplateName("MyEditorTemplate");
    })
)

@section Scripts {
<script type="text/javascript">
    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);

            var scheduler = $("#scheduler").data("kendoScheduler");
            scheduler.one("dataBinding", function (e) {
                //prevent saving if server error is thrown
                e.preventDefault();
            })
        }
    }
</script>
}

The view is just a standard page with the Kendo UI Scheduler Widget. Two key things within the widget: (1) The Schema (which is the DataSource > Model in MVC version), the fields you define here must match what is shown in the Custom Editor; (2) The custom event editor is called out by Editable > edit.TemplateName (and then just supply the name of the Editor Template). Location of the editor template, in my opinion if it is unique to that view page, is to just create a sub folder called "EditorTemplate" within the folder where your view resides so that MVC Razor engine can locate it at run-time.

Editor Template

@model MyProject.Application.ViewModels.Calendars.CalendarMyEventTableViewModel
@using MyProject.Common.Attributes
@{
    //required in order to render validation attributes
    ViewContext.FormContext = new FormContext();
}

@functions{
    public Dictionary<string, object> generateDatePickerAttributes(
           string elementId,
           string fieldName,
           string dataBindAttribute,
           Dictionary<string, object> additionalAttributes = null)
    {

        Dictionary<string, object> datePickerAttributes = additionalAttributes != null ? new Dictionary<string, object>(additionalAttributes) : new Dictionary<string, object>();

        datePickerAttributes["id"] = elementId;
        datePickerAttributes["name"] = fieldName;
        datePickerAttributes["data-bind"] = dataBindAttribute;
        datePickerAttributes["required"] = "required";
        datePickerAttributes["style"] = "z-index: inherit;";

        return datePickerAttributes;
    }
}

<div id="scheduler-pop" class="w800">
    @Html.HiddenFor(m => m.Id)
    <div data-container-for="Id" class="k-edit-field hide">
        @Html.TextBoxFor(m => m.Id)
    </div>    

    <div class="k-edit-label">
        @(Html.LabelFor(model => model.Title))
    </div>
    <div data-container-for="title" class="k-edit-field">
        @(Html.TextBoxFor(model => model.Title, new { @class = "k-textbox", data_bind = "value:title" }))
    </div>

    <div class="k-edit-label">
        @(Html.LabelFor(model => model.Start))
    </div>
    <div data-container-for="start" class="k-edit-field">

        @(Html.Kendo().DateTimePickerFor(model => model.Start)
        .HtmlAttributes(generateDatePickerAttributes("startDateTime", "start", "value:start,invisible:isAllDay")))

        @(Html.Kendo().DatePickerFor(model => model.Start)
        .HtmlAttributes(generateDatePickerAttributes("startDate", "start", "value:start,visible:isAllDay")))

        <span data-bind="text: startTimezone"></span>
        <span data-bind="invisible: isAllDay"><br />Pick custom operation opening day and time.</span>
        <span data-for="start" class="k-invalid-msg"></span>
    </div>

    <div class="k-edit-label">
        @(Html.LabelFor(model => model.End))
    </div>
    <div data-container-for="end" class="k-edit-field">

        @(Html.Kendo().DateTimePickerFor(model => model.End)
        .HtmlAttributes(generateDatePickerAttributes(
            "endDateTime",
            "end",
            "value:end,invisible:isAllDay",
            new Dictionary<string, object>() { { "data-dateCompare-msg", "End date should be greater than or equal to the start date" } })))

        @(Html.Kendo().DatePickerFor(model => model.End)
        .HtmlAttributes(generateDatePickerAttributes(
            "endDate",
            "end",
            "value:end,visible:isAllDay",
            new Dictionary<string, object>() { { "data-dateCompare-msg", "End date should be greater than or equal to the start date" } })))

        <span data-bind="text: endTimezone"></span>
        <span data-bind="invisible: isAllDay"><br />Pick custom operation closing day and time.</span>
        <span data-for="end" class="k-invalid-msg"></span>
    </div>

    <div class="k-edit-label">
        <label for="IsAllDay">@Resources.Calendar.IsClosedAllDay</label>
    </div>
    <div data-container-for="IsAllDay" class="k-edit-field">
        <input type="checkbox" data-bind="checked: isAllDay" id="IsAllDay" name="IsAllDay" class="bootstrap-checkbox" />
    </div>

    @*<div class="endTimezoneRow">
        <div class="k-edit-label"></div>
        <div class="k-edit-field">
            <label class="k-check">
                <input checked="checked" class="k-timezone-toggle" type="checkbox" value="true" />
                Use separate start and end time zones
            </label>
        </div>
    </div>*@
    @*<script>
        $(".k-timezone-toggle").on("click", function () {
            var isVisible = $(this).is(":checked");
            var container = $(this).closest(".k-popup-edit-form");

            var endTimezoneRow = container.find("label[for='EndTimezone']").parent().add(container.find("div[data-container-for='endTimezone']"));
            endTimezoneRow.toggle(isVisible);

            if (!isVisible) {
                var uid = container.attr("data-uid");
                var scheduler = $("\#scheduler").data("kendoScheduler");
                var model = scheduler.dataSource.getByUid(uid);
                model.set("endTimezone", null);
            }
        });

        var endTimezone = '${data.endTimezone}';

        if (!endTimezone || endTimezone == "null") {
            $(".k-timezone-toggle").trigger('click');
        }
    </script>*@

    @*<div class="k-edit-label">
        @(Html.LabelFor(model => model.StartTimezone))
    </div>
    <div data-container-for="startTimezone" class="k-edit-field">
        @(Html.Kendo().TimezoneEditorFor(model => model.StartTimezone)
        .HtmlAttributes(new { data_bind = "value:startTimezone" }))
    </div>

    <div class="k-edit-label">
        @(Html.LabelFor(model => model.EndTimezone))
    </div>
    <div data-container-for="endTimezone" class="k-edit-field">
        @(Html.Kendo().TimezoneEditorFor(model => model.EndTimezone)
        .HtmlAttributes(new { data_bind = "value:endTimezone" }))
    </div>*@

    <div class="k-edit-label">
        @(Html.LabelFor(model => model.RecurrenceRule))
    </div>
    <div data-container-for="recurrenceRule" class="k-edit-field">
        @(Html.Kendo().RecurrenceEditorFor(model => model.RecurrenceRule)
        .HtmlAttributes(new { data_bind = "value:recurrenceRule" }))
    </div>

    <div class="k-edit-label">
        @(Html.LabelFor(model => model.Description))
    </div>
    <div data-container-for="description" class="k-edit-field">
        @(Html.TextAreaFor(model => model.Description, new { @class = "k-textbox", data_bind = "value:description" }))
    </div>
</div>

@{
    ViewContext.FormContext = null;
}

The editor template above contains all the columns specified in our schema (datasource > model in asp.net mvc, but "schema" in the JavaScript version of Kendo Scheduler) and all the columns match our custom view model and columns from the base view model. If you are to have custom drop-down-lists or other controls that need to get data, plan on getting that via AJAX binding via JavaScript and not from the server. It is just easier and more flexible for rebinding, cascading, etc.

The Kendo UI Scheduler also has the home-brewed MVVM built into the Event Template, so keep

The main point to all this is to layout the parts necessary to be successful in creating a Kendo UI Scheduler widget in an ASP.NET MVC project. I hope that this sheds some light on the subject and helps at least one other person out (other than being a reference for me later ;) )

Cheers!

Change Form Action on Form Submit with jQuery

noreply@blogger.com (Anonymous) — Thu, 08 May 2014 15:08:00 +0000

I recently had a situation that called for me to be able to toggle the form action on the fly depending on what was clicked. The reason behind this is that I needed to stream a file back from some data, and you cannot stream a file via AJAX calls. Your only option is to do a full-page form post.

Form:


<form action="/Home/PostMyForm" method="post" id="MyForm">
  <input type="hidden" id="someId" name="someId" value="SomeValue" />
  <input type="submit" id="SubmitForm" value="Submit Form" />
  <button id="GetFile">Get File</button>
</form>

and the JavaScript

<script type="text/javascript">
  $(function() {
    $("#GetFile").click(function (e) {
      e.preventDefault();

      // Perform any other logic for normal form submission

      $("#MyForm").prop("action", "/Home/GetMyFile");
      $("#MyForm").submit();
    });
  });
</script>

As you can see, it's really just changing a property on the DOM element (form) within a custom click event. It is a simple code to write, but doing this versus some complex routine in a server-side language is usually not considered because it's in JavaScript. It works and will work every time (unless there is a breaking JavaScript error before this is run of course).
Cheers!

Using Kendo 2013.1 with MVC 4

noreply@blogger.com (Anonymous) — Mon, 15 Apr 2013 19:34:00 +0000

If you have an ASP.NET MVC 4 project and have just upgraded to Kendo's 2013.1 release, the first thing you'll probably notice is that you are getting a JS error for the ".live()" function. Well, this is in part because as of jQuery 1.9.0 (Kendo 2013.1 uses 1.9.1), .live() and other functions built into the jquery-unobtrusive-ajax.js have been removed.

The fix?

Comment out this line referencing Kendo's version of jQuery:

Add a reference to any version of jQuery from 1.7.2 to 1.8.3 (highest you can go at the time of this post)

<script src="~/Scripts/jquery-1.8.3.min.js"></script>
Enjoy!

Note: I haven't experienced any Kendo issues yet by doing this, but they may exist. I figured I'd rather have 98% of the site work now rather than degrade Kendo back to a 2012 version. :)

2nd Note: It is implied that you have the version of jquery that you are referencing either in your project or referencing a CDN. Obviously, you can't reference something that doesn't exist! LOL

Using Built-In Styles in Adobe Fireworks

noreply@blogger.com (Anonymous) — Sat, 19 May 2012 04:00:00 +0000

Did you know that Adobe Fireworks has built-in styling that you can use? Say what? Just like the built-in gradients and textures, there's also built-in styling that can help rapid develop any images you are doing, perhaps for a quick mockup design or wire frame-type of image.

First things First

To make things simple, just start a new image and throw some shapes and text out onto the canvas.

Applying Styles

Go ahead and select one of your shapes. Then in the panels section, click on Styles to open the Styles Window Flyout. There will be a drop-down menu that says "Current Document". Go ahead and click on that to expose the built-in styles of Adobe Fireworks. In my example below, I'm choosing Old Paper Styles.

Next, you can select one of the thumbnail displayed in the type of style you chose to see the effect on your shape that you had selected.

Next, go ahead and select another shape and we'll apply a different style to it. In my example below, I selected the rectangle and applied a diagonal style to it, applied a 50% transparency and changed the canvas from white to transparent (so you could see the effect).

Lastly, let's apply a style to that boring text. Select the text and then choose one of the Text Style groups in the Style drop-down. In my example below, I'm using the blue-white style under the Text Creative Styles group. You can see the desired effect below.

The Conclusion

The Styles from Adobe Fireworks are very handy, especially if you are just trying to brainstorm about different look and feels for shapes and text to make your image. We've all been there, just staring at a blank canvas, not knowing where to start. This at least makes it a tad easier. :)

Cheers!

If you found this article helpful, please spare a couple dollars for starving bloggers. :)

Optimize Image File Sizes in Adobe Fireworks

noreply@blogger.com (Anonymous) — Fri, 18 May 2012 04:09:00 +0000

One thing that usually (not always) I'm pretty particular about is maximizing the performance of my web applications by making sure that the images we're using, regardless if they are GIF, PNG or JPG, are all looking great and are the smallest file size that they can be (best of both worlds).

Set up your Image in Adobe Fireworks

Just create an image or open one that you may already have handy.

Working with the Image

The first thing you want to do us just under the image name, click on the "2 Up" tab to show what the image will look like in your Export mode from what you select under the Optimize category in the windows sections.

Next, click on the Optimize section to force the flyout window to open. If you set your Image Type to PNG 32, you'll notice in the bottom of the Image Window (bottom left of the image below) the file size if you export this image in a PNG 32 format. In this case, it's 33.4K in size.

Next, change the Image Type to PNG 8 (bit), and see if the image still looks OK. If the image is fine, then check the file size now. In my example below, the image is still acceptable, and the file size just dropped to 14.2K! We just saved 19.4K off of one image! That may not seem like much in this age of broadband Internet, but multiply that by 10's of thousands of users, let alone millions and that unnecessary addage of the file size sure becomes a big deal then.

Just to be fair, PNG 8 (bit) may not be the smallest size versus quality image we can achieve. So, let's look at GIF next to see if there are any file size savings. Switch the Image Type to GIF. As you can see in the image below, the file size jumped to a whopping 29.3K! Oops, that was the wrong direction to go. So, in this case, GIF is not the export of choice.

Next, lets try JPG as the export. Change the Image Type to JPG and set the Quality to 72 (web standard -- only things destined for printing need to go higher). Look at the file size now for the export -- it's 12 K! What? Smaller than the PNG 8 (bit) image? Yup, that's right. In this particular case the JPG wins in the smallest file size export of the image from Adobe Fireworks.

The Conclusion

The examples above worked out the way they did, JPG being the smallest versus best looking of the bunch, based on the image used. Depending on if you are using a photo, hand drawing, or a lot of text, your export flavor of PNG, GIF or JPG will vary. So, this walkthrough takes care of the images individually, next post on this topic will be around using Sprites where you can to save on HTML Requests. :)

Cheers!

If you found this article helpful, please spare a couple dollars for starving bloggers. :)

Check if UserName exists via jQuery, AJAX and ASP.NET MVC

noreply@blogger.com (Anonymous) — Thu, 17 May 2012 04:11:00 +0000

Here is a little nugget of code that I use on our gaming site SocialCow.com. If you are comfortable already with jQuery, then this will be a no-brainer. You can take the same ".post" jQuery method and switch out the MVC call for like a web service or call like an ASP.NET / Web Method. It doesn't matter as the guts of what it's doing is in JavaScript / jQuery. :)

HTML

The HTML here is pretty simple (if you didn't notice I like to have it that way for the people reading my blogs ;) ). Essentially, you need just a input box and somewhere to put the status text. I ended up just using a simple Div layer.

<input type="text" name="UserName" id="UserName" />
<div id="divStatus"></div>

JavaScript / jQuery

The JavaScript isn't too bad either here. Basically, we're looking for the keyup on the UserName field and we only care when they enter in more than 3 characters, otherwise it ignores the AJAX call (and saves a call to the service / database too).

<script type="text/javascript">
    $("#UserName").keyup(function () {
        var name = $("#UserName").val(); //Value entered in the text box
        var status = $("#divStatus"); //DIV object to display the status message
        var user = $.trim(name);
        if (user.length > 3) {
            status.html("Checking....") //While our Thread works, we will show some message to indicate the progress
            //jQuery AJAX Post request
            $.post("/Account/CheckName", { username: name },
                        function (data) {
                            if (data == true) {
                                status.html("<font color=green>'<b>" + name + "</b>' is available!</font>");
                            } else {
                                status.html("<font color=red>'<b>" + name + "</b>' is not available!</font>");
                            }
                        });
        } else {
            status.html("Need more characters...");
        }
    });
</script>

This code above is a nice little gem to have. I've had it for a few years now, and thought that I'd pull it from the James vault of code to share.

Cheers!

If you found this article helpful, please spare a couple dollars for starving bloggers. :)

Adding Custom Link to Telerik RadScheduler Header Navigation

noreply@blogger.com (Anonymous) — Wed, 16 May 2012 04:00:00 +0000

Do you have a need to add a custom link or action to your Telerik RadScheduler? I had a need, even though rarely used, to add a "Refresh" link to slap the calendar around when someone might be viewing the calendar, but appointments may be added via the booking process by a custom and/or another user in the system (talking about my project @TimeGears, btw). I know what you're thinking: "James, isn't that what AJAX is for?" -- yes, I know, but sometimes things hang for whatever reason, and some of our business users like having a manual button there as if it's an "Easy button" from Staples to make appointments appear.

The Code

The code is pretty simple (as most of my posts strive to be), and the idea is this is to be intermixed with the other JavaScript code you have for your Telerik RadScheduler.

<script type="text/javascript">
    function loadRefreshButton() {
        $('.rsHeader UL LI .rsLast').removeClass('rsLast');
        $('.rsHeader UL').append('REFRESH')
                    .click(function () {
                        location.reload(true);
                    });
    }
</script>

The JavaScript function is straight forward. It is just called in the $(function(){ }); command after the DOM is loaded and adds the Link Action "Refresh". In my case, my Telerik RadCalendar is being loading in a Modal IFrame. It is very complex and I didn't want it to mingle with the main page code nor want it to be pushed down by the site's navigation header.

The Result

As expected, the JavaScript and jQuery code add a "Refresh" link to the UL list of links atop of the Telerik RadScheduler.

Cheers!

If you found this article helpful, please spare a couple dollars for starving bloggers. :)

Why UX People Rule with an Iron Fist!

noreply@blogger.com (Anonymous) — Tue, 15 May 2012 04:00:00 +0000

I've been called several names on several projects, mostly good, but people that know me know that I usually will be overbearing and stop just short of micro-managing the interface and user experience of the project. Well, first, that's what I'm good for (that was a "duh" moment). Secondly, us in the UX arena usually are the first line of defense for a project. So, you should be thanking me for being such an @$$hole. :)

Why UX People Take Heat

Great UX People have been molded into their personalities from experience. Sure, there are great designers and developers out there, and some that are good at the gambit of them, but most fall into strict design-only in UI, or middle-tier with "almost-good enough" skills at the UI. The UX guy gets the job of marrying the UI and the functionality kingdom of the middle-tier. See the UI guy is happy once the client has signed off on the design (and is usually out the door at that moment), the middle-tier guy usually will hide behind the project manager if something is functionally "off", and well the UX guy gets the job of taking the heat for all of it because it doesn't matter if something is wrong with the design, or a web service blows up the beautiful feed you have in a dynamic JavaScript section on the front page.

Crazy?

If you are a UX person, you already know the answer to this question: Do you have to be crazy or a little psychotic to be a great UX developer? My answer and my answer is: Yes

UX Helpline

So, you want to help out a UX developer? If you are the UI designer, talk to the UX developer before your meetings with the client just to make sure your design is remotely even possible. :) If you are the middle-tier developer, talk to the UX developer just to make sure that most of your theories of how the front-end works are crap and you need their help. :)

Can I be a UX Developer?

Yes, but like any martial art, you need to earn and prove yourself along the way. For instance, I'm not nearly the best when it comes to practicing and learning new UX techniques. Everyone is constantly learning, and even things you do 10,000 times, you could learn a new technique on the 10,001 time. I would recommend getting very comfortable in JavaScript, a back-bone client-side language. From there, you can branch off into jQuery, jQuery UI, MooTools, YUI Tools, etc. Also, you need to know CSS and design along with JavaScript as if it was your twin. You need to be able to whiteboard your ideas on-the-fly and design in your head on how things will work in a web application.

The writings above are my opinion, of course, and I don't really dislike my team at all. I'm just the narcissistic UX guy.

Cheers!

If you found this article helpful, please spare a couple dollars for starving bloggers. :)

Change Associated Content Type for SharePoint 2010 Page Layout

noreply@blogger.com (Anonymous) — Mon, 14 May 2012 13:03:00 +0000

I have found out over time that my "usual problems" that I run into are very common occurrences, but problems like this one are those that usually happen pretty rarely, and we all forget how to deal with them. :) So, this is a reference for everyone (and myself) of how to quickly update this via the Internet Browser as I know there are many articles how to do that via programming, but what if you can't deploy a WSP but have SharePoint Designer access? ;)

The Issue

The issue usually arises when you have a Page Layout (custom one usually) and it's currently associated to a Content Type like "Welcome Page". What happens if you want to associate it to another Content Type, like a custom one? Well, you have to re-associate it with the other one. Luckily, it's not that bad and you don't need custom programming to pull it off. One thing to note though, changing Content Types means changing fields that the Page Layout uses, so you may loose some functionality if your Page Layout is dependent on certain fields.

The Solution

First, assuming you have Site Administrator or Owner access, go to Site Settings > Master pages and page layouts.

Next, find your Page Layout in the list, hover over it and use the alternate menu to select Edit Properties.

Lastly, scroll down a bit to the middle of it, and you can see the area where you can change the Associated Content Type for that Page Layout. :)

Hopefully that was short enough and to the point.

Cheers!

If you found this article helpful, please spare a couple dollars for starving bloggers. :)

Masking Layers with Transparency Gradient in Adobe Fireworks

noreply@blogger.com (Anonymous) — Mon, 14 May 2012 01:38:00 +0000

Have you ever wanted to create a custom shape in Fireworks and don't want to take the time to use the pen tool and make every curve and point (and be frustrated when it's not "perfect")? Well, here is a shortcut way (with practice) to get into making that custom stuff even faster. :)

Also to fan the flames, I'm going to show how to make a fade from transparency to a solid gradient within the mask.

Create the Images

Create two images to start. Feel free to make them anything you want. Note: if you want to use these shapes later, you may want to make a copy of those shapes.

Ghost that Image!

Select the image on the top, make sure you have a type of gradient selected (I have linear selected), and then click the color square. In the marker on the left side of the gradient, ABOVE the color selection, click that marker and set the opacity to 0.

Mask that B!

Alright kids, we're almost home. In order to make the mask, we have to select the images that we want to be part of the mask. Now, the masking process basically will take the shape of the image that is on top. So, in my example, it will allow anything within the gradient oval to show up.

Once you have them selected, go to Modify > Mask > Group as Mask.

And wah-la! You should how have a custom shape like below. :)

James' Thoughts

So, as you can see, it's not a pain to get some custom flair going on in Fireworks. You just need a short and sweet example with no frills. :) Just another example why I use Fireworks for Web Development imaging.

Cheers!

If you found this article helpful, please spare a couple dollars for starving bloggers. :)

Windows Metro Style JavaScript / jQuery Library

noreply@blogger.com (Anonymous) — Sat, 12 May 2012 04:00:00 +0000

I haven't had a chance to do more than play with this JavaScript library that Drew Greenwell has created that is for a Windows Metro-style JavaScript library, but it is pretty amazing what it does. I'm sure it wasn't just a "sit down for an hour and it's done" type of project. If you have seen the dashboard on an XBOX 360, Windows 8 Preview, or a Windows Phone 7.5, then you have seen the "Metro" interface.

You will either love it or hate it. I personally love it. I have a Windows Phone that is running the Mango version, and it's great. I used to have an HTC D2, and I have an iPod Touch, so I know I didn't want an iPhone because I didn't like the interface of the Apple OS.

Screens

Code Example (borrowed from this page)

<div id="tiles" class="blue">
    
    <div class="live-tile" data-stops="100%" data-speed="750" data-delay="3000">
        <span class="tile-title">slide tile (figure 2a)</span>
        <div>
            <img src="/images/sample/1tw.gif" alt="1" /></div>
        <div>
            <img src="/images/sample/2t.gif" alt="2" /></div>
    </div>
    
    <div class="red live-tile" data-mode="flip" data-delay="4000">
        <div>
            <img src="/images/sample/3tw.gif" alt="3" />
            <a class="tile-title">flip tile front (figure 2b)</a>
        </div>
        <div>
            <img src="/images/sample/4tw.gif" alt="4" />
            <a class="tile-title">flip tile back (figure 2b)</a>
        </div>
    </div>
    
    <div class="mango list-tile">
        <span class="tile-title">flip list (figure 2c)</span>
        <ul class="flip-list fourTiles" data-mode="flip-list" data-delay="3000">
            <li>
                <div>
                    <img src="/images/sample/1t.gif" alt="1" /></div>
                <div>
                    <img src="/images/sample/1tw.gif" alt="1" /></div>
            </li>
            <li>
                <div>
                    <img src="/images/sample/2t.gif" alt="2" /></div>
                <div>
                    <img src="/images/sample/2tw.gif" alt="2" /></div>
            </li>
            <li>
                <div>
                    <img src="/images/sample/3t.gif" alt="3" /></div>
                <div>
                    <img src="/images/sample/3tw.gif" alt="3" /></div>
            </li>
            <li data-direction="horizontal">
                <div>
                    <img src="/images/sample/4t.gif" alt="4" /></div>
                <div>
                    <img src="/images/sample/4tw.gif" alt="4" /></div>
            </li>
       </ul>
    </div>
    
    <div class="green live-tile exclude">
        <span class="tile-title">static tile (figure 2d)</span>
        <p>
            Static tiles can take advantage of theming too!</p>
    </div>
</div>
 

<script type="text/javascript">    
    // apply regular slide universally unless .exclude class is applied
    // NOTE: The default options for each liveTile are being pulled from the 'data-' attributes
    $(".live-tile, .flip-list").not(".exclude").liveTile();
</script>

James' Thoughts

Drew has done a very thorough job of bring the Windows Metro style to a JavaScript library. For my project @TimeGears, I have started a Metro-style interface with my dashboard for the back-end, however didn't yet create any of the cool animations as what Drew has put together. So, show Drew some love and go check out MetroJS.

Cheers!

If you found this article helpful, please spare a couple dollars for starving bloggers. :)

Tighten up your Loose JavaScript

noreply@blogger.com (Anonymous) — Fri, 11 May 2012 04:00:00 +0000

Being a .NET developer as well as a UX developer has me trying techniques between languages like C# .NET and JavaScript. Most of us know (and if you don't, you do now) that JavaScript is a loosely typed language. In other words, variables are declared without a specific type.

Loosely Typed JavaScript Example

var x = 50;
var y = "50";
 
x == y;  // Returns True

Structured Global Variables

One of the things that I figured out over time from dealing with JSON style data from doing many web services calls from AJAX is to use the JSON structure to build my equivalent of a "constant" list of variables in JavaScript. Since JavaScript is loosely typed, there really are no such things as constants, but we can get it closer to that concept with strong-naming variables in a global JS file to help prevent fat-fingering values throughout the web application. I currently do this with our latest web application @TimeGears.

var site = {
    calendar: {
        current: {
            day: {
                value: new Date().currentDay(),
                name: new Date().currentDayName()
            },
            month: {
                value: new Date().currentMonth(),
                name: new Date().currentMonthName()
            },
            year: new Date().currentYear()
        },
        today: new Date().currentDate(),
        tomorrow: new Date().tomorrowDate(),
        weight: {
            min: 'min',
            mid: 'mid',
            max: 'max'
        }
    },
    global: {
        ajax: {
            text: {
                holder: 'Please Wait...

'
            }
        },
        session: {
            proxypage: '/handler.ashx',
            value: 30000    // 30 seconds
        }
    }
};

Example Use 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
    <script src="js/test.js" type="text/javascript"></script>
    <script type="text/javascript">
 
   $(function () {
        $('#VarList').append('<li>Current Day: ' + site.calendar.current.day.value + '</li>')
            .append('<li>Current Day Name: ' + site.calendar.current.day.name + '</li>')
            .append('<li>Current Month: ' + site.calendar.current.month.value + '</li>')
            .append('<li>Current Month Name: ' + site.calendar.current.month.name + '</li>')
            .append('<li>Current Year: ' + site.calendar.current.year + '</li>')
            .append('<li>Today: ' + site.calendar.today + '</li>')
            .append('<li>Tomorrow: ' + site.calendar.tomorrow + '</li>')
            .append('<li>Weight Min: ' + site.calendar.weight.min + '</li>')
            .append('<li>Weight Mid: ' + site.calendar.weight.mid + '</li>')
            .append('<li>Weight Max: ' + site.calendar.weight.max + '</li>')
            .append('<li>Global AJAX Holder Text: ' + site.global.ajax.text.holder + '</li>')
            .append('<li>Global Session Proxy: ' + site.global.session.proxypage + '</li>')
            .append('<li>Global Session TimeOut ' + site.global.session.value + '</li>');
    });
        
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ul id="VarList">
        </ul>
    </div>
    </form>
</body>
</html>

The Result

As you can see from the results below that this use of a global JS file can come in handy much like the

use of classes in .NET for centralization name-spacing, etc.

Current Day: 7
Current Day Name: Monday
Current Month: 4
Current Month Name: May
Current Year: 2012
Today: 5/7/2012
Tomorrow: 5/8/2012
Weight Min: min
Weight Mid: mid
Weight Max: max
Global AJAX Holder Text:
Please Wait...
Global Session Proxy: /handler.ashx
Global Session TimeOut: 30000

Cheers!

If you found this article helpful, please spare a couple dollars for starving bloggers. :)

Designing and Developing for SharePoint 2013 (#15)

noreply@blogger.com (Anonymous) — Thu, 10 May 2012 04:00:00 +0000

SharePoint 2013 branding, even though it's been updated, will still more than likely consist of Master Pages, Page Layouts and the usual fixings we've come to love (or hate) in SharePoint. Just check out these screen shots that were leaked already:

Design:

The main takeaway is that Master Pages, Page Layouts, etc., will still be around regardless of what new "Look and Feel" Redmond comes up with for SharePoint 2013. Below are some images found on the Internet that seem to be circulating. According to some, they were idea mockups of what SharePoint 2013 "could" look like and are not actual screen shots. As a designer myself, I can totally see doing that and others taking it to promote as the real deal.

Awesome "Metro" interface (if it's really going to look like this -- possibly a fake):

Updated "Mango"-style landing page of a new Team Site (if it's really going to look like this -- possibly a fake) (much better than a previous versions of the Team Site, especially WSS 3.0!!)

Development:

The development for SharePoint 2013 looks promising (assuming they're going to be supporting it with Visual Studio 2012). Visual Studio 2012 has more designers and templates than were included in Visual Studio 2010.

Here's some of the new stuff for VS 2012 (beta):

Create Lists and Content Types by Using New Designers
Create Site Columns
Create Silverlight Web Parts
Publish SharePoint Solutions to Remote SharePoint Servers
Test SharePoint Performance by Using Profiling Tools
Create Sandboxed Visual Web Parts
Improved Support for Sandboxed Solutions.
Support for JavaScript Debugging and IntelliSense for JavaScript
Streamlined SharePoint Project Templates

If you would like to read more, go to the source (MSDN Article).

My take on it is that I think it's a great step forward in SharePoint development with Visual Studio. I can assume that most, if not all of the same, will be available for SharePoint 2013 development..

Cheers!

If you found this article helpful, please spare a couple dollars for starving bloggers. :)

Extending JavaScript Prototype for Date Functions: Part Deux

noreply@blogger.com (Anonymous) — Wed, 09 May 2012 04:00:00 +0000

In my first post, Extending JavaScript Prototype for Date Functions, I introduced adding to the Date type in JavaScript to make life easier for developing in JavaScript for the given project. In this post, I'm giving away some more goodies for everyone around the Date object in JavaScript. Like before, you can drop these nuggets in your primary JS file for your project. Don't forget to ultimately Minify your $#1+. :)

Prototype Methods

Save the following code off in a JS file. For my example, I saved the file as "test.js" in the ".js" folder, so from the point where my HTML file lives the path will be "js/test.js" as you can see in the Example section's code

Date.prototype.addDays = function (days) {
    this.setDate(this.getDate() + days);
};
Date.prototype.subtractDays = function (days) {
    this.setDate(this.getDate() - days);
};
Date.prototype.addMonths = function (months) {
    this.setMonth(this.getMonth() + months);
};
Date.prototype.currentDate = function () {
    var month = this.getMonth() + 1;
    return month + "/" + this.getDate() + "/" + this.getFullYear();
};
Date.prototype.tomorrowDate = function () {
    var month = this.getMonth() + 1;
    var day = this.getDate() + 1;
    return month + "/" + day + "/" + this.getFullYear();
};
Date.prototype.currentYear = function () {
    return this.getFullYear();
};
Date.prototype.currentMonth = function () {
    return this.getMonth();
};
Date.prototype.MonthName = ["January", "February", "March", "April", "May", "June", "July", 
    "August", "September", "October", "Novemmber", "December"];
Date.prototype.currentMonthName = function () {
    return this.MonthName[this.getMonth()];
};
Date.prototype.currentDay = function () {
    return this.getDate();
};
Date.prototype.DayName = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", 
"Saturday"];
Date.prototype.currentDayName = function () {
    return this.DayName[this.getDay()];
};

Example Use

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
    <script src="js/test.js" type="text/javascript">script>
    <script type="text/javascript">
 
        $(function () {
            var theDate = new Date();
            $('#VarList').append('.<Current Date (formatted): ' + theDate.currentDate() + '.</li>')
                .append('.<li>Tomorrow Date (formatted): ' + theDate.tomorrowDate() + '.</li>')
                .append('.<li>Current Year: ' + theDate.currentYear() + '.</li>')
                .append('.<li>Current Month: ' + theDate.currentMonth() + '.</li>')
                .append('.<li>Current Month Name: ' + theDate.currentMonthName() + '.</li>')
                .append('.<li>Current Day: ' + theDate.currentDay() + '.</li>')
                .append('.<li>Current Day Name: ' + theDate.currentDayName() + '.</li>');
        });
        
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ul id="VarList">
            
        </ul>
    </div>
    </form>
</body>
</html>

The Result (run on 5/7/2012):

Current Date (formatted): 5/7/2012
Tomorrow Date (formatted): 5/8/2012
Current Year: 2012
Current Month: 4
Current Month Name: May
Current Day: 7
Current Day Name: Monday

Not much to it once you get the hang of it. Like .NET, these type of little additions go a long way to make your UX code more consistent as you have a central place to call JavaScript functions (almost called them methods ;) ).

Cheers!

If you found this article helpful, please spare a couple dollars for starving bloggers. :)

SharePoint 2013 (#15) Branding - First Look (and look back)

noreply@blogger.com (Anonymous) — Tue, 08 May 2012 04:00:00 +0000

In my curiosity the other day, I decided to look to see what I could find on the Internet for SharePoint 15 (2013). I was really wanting to see the Look and Feel of it more than anything. Seems like every version that comes out tries to 1 up (or destroy) the previous version (none more so than MOSS 2007 to SP 2010). I'd like to take this opportunity to do a brief look back at the previous versions of SharePoint branding.

So, here we go. From SharePoint 2001 to 2013. Buckle up.

SharePoint 2001

An oldie but goodie. This gem (sorry only image I could find on the web since I've upgraded since then) was a trendsetter. While this was great for internal collaboration (which was still pretty new concept at the time), it wasn't very pretty. Also, forget about making it public facing. We could thank this version of SharePoint for driving needs for public-facing web applications that are similar in nature like DotNetNuke.

SharePoint 2003

Ok, we're getting better. We're still light years away from what is expected for a public facing site in terms of branding. I know, it's a collaboration site, and doesn't necessarily need to be on the up and up in branding style. Well, I agree to disagree. If users have a not-so-good experience with the application and it looks bad too, they're going to trash it.

SharePoint 2007 (#12)

Master page? WTF is that. :) The introduction of the Master Page concept was awesome in SharePoint 2007. Finally, the designers of SharePoint had something to work with that wasn't a complete hack of the SharePoint system (not saying we still didn't have to hack the hell out of SharePoint to get it to play nice).

SharePoint 2010 (#14)

Hard to believe at the time of this posting, SharePoint 2010 is 2 years old. When the new branding came out, it was a much needed improvement over 2007, however there were still the things of old we had to work around plus a new Ribbon bar we had to deal with in designing for SharePoint 2010.

SharePoint 2013 (#15)

I found this from this guy's web post about it. Like any good car prototype that gets the masses of people to drool over it, if this ends up being what we have to start with I'll be doing kart wheels down the hallway. Seeing where SharePoint 2001 started and where SharePoint 2013 potentially will be, it's quite amazing to see the product development.

Now, the real question is: is the SharePoint Navigation control still generating nested tables on the front end and UL's on the back end? If you haven't experienced this fun time, you should. :)

Update: 5/8/2012 - Apparently the following images are fakes from some time ago according to some Twitter friends. Nonetheless, they are good for talking around the water cooler. :)

I'm not surprised that Microsoft is going the route with the branding that we have seen with the XBOX, Windows Phone (Mango +) and Windows 8. The "Metro" style is one they are betting big on and I'm a fan. I know some don't care for it, but I love when typography is integrated into the design experience of any application as it just seems to be richer than some fancy graphics.

Cheers!

If you found this article helpful, please spare a couple dollars for starving bloggers. :)

Slicing and Exporting Images from Adobe Fireworks

noreply@blogger.com (Anonymous) — Mon, 07 May 2012 04:00:00 +0000

I've been using Adobe (formally Macromedia) Fireworks for a long time now. So, recently when I was working with a colleague of mine and forcing him to use Fireworks since it's more efficient in Web Development (my opinion of course), I didn't realize how second nature Fireworks commands were to me. So, I figured I would break this down for folks since it's not as "second nature" to non-Fireworks users as I was assuming (my bad =)). This will also be helpful for Adobe Photoshop users wondering WTF Fireworks is doing in their Adobe Master Collection. LOL

First Things First: Create some "things"

Open up Adobe Fireworks and create a new PNG image. The size doesn't really matter for this tutorial. In the image below, I created three rectangle shapes.

Prepare for Export

Select all the shapes that you want to Export into individual images. Then click Edit > Insert > Rectangle Slice.

When Prompted for Individual or Multiple, choose Multiple.

New Layers

The rectangle slices have created new layers that match the size of the object(s) you had selected previously. You can adjust the size of your new web slices just like any other shape in Fireworks.

Got Slice?

One of the easiest ways to export a newly created slice is to Right-Click the web slice of your choosing, then click Export Selected Slice.

Then give it a filename.

The Result

If you open up the file you just exported (aka Created), you'll see it's exactly what was showing in the web slice you created. Once you get the hang of this, designing and slicing full web layouts to buttons to photos will be super fast.

Cheers!

If you found this article helpful, please spare a couple dollars for starving bloggers. :)