• DaveDev

    Attention all Windows Phone Developers – Phone Tools, Mango bits, and AppHub have all been updated!

    • 1 Comments

    The Windows Phone Team has recently pushed out three important updates that you should take advantage of.

    Developer Tools Beta 2 Refresh (Release Candidate)

    The first of the new updates is for the Windows Phone Developer Tools.  Cliff Simpkins from the Phone Team has a break down of some of the new features on his official blog post here.  His top 5 are as follows:

      • Application platform APIs are now locked; you can feel confident to start getting ready for submitting your apps next month.
      • Emulator now has a nifty screenshot capability built in, allowing you quickly snap quality images of your app without the need of separate tools or cropping time. The images are great for use in app submission process or to share on your blog or with folks such as my team (hint hint).
      • The profiler has been greatly improved and provides memory profiling.
      • As of this drop, you can install NuGet into the free version of the WPSDK tools. I find NuGet to be one of my favorite productivity boosters and I’m happy to see the extension supported in the free tools.
      • The drop includes an initial peek at the Marketplace Test Kit; with the RC release, you’ll be able to use the included version of this toolkit to test your XAP file against the same certification testing tools that we use when ingesting apps for the Marketplace. For this refresh, it’s there but not fully functional; but more on this in a future blog post.

    You will also notice a new RC (Release Candidate) in the control panel tools listing.

    WPTools

    Be sure to read the full official blog post here.

    Mango Bits

    There has also been a refresh of the Mango Bits that you can flash your phone with.  There are some new features inside this update, like native Twitter integration, you can take advantage of as well.  Head on over to the WinSuperSite for a breakdown on what is new inside this RC.

    The update is being pushed out to eligible devices as we speak.  You can also check for it manually by following these important steps:

    • Make a copy of the backup you took when you updated to the Mango Beta 2 pre-release and put it in a safe place, if it isn’t in one already
      Note: Make sure that you copy this backup and put it somewhere else; uninstalling Zune will auto-delete any backups previously taken
    • Return to Connect.Microsoft.com (we’re using the same program you were invited to join last month) and download the freshly posted files, which includes a new Zune client and a new UpdateWP executable
    • Head to the Control Panel and uninstall the Beta 2 software (Zune client and UpdateWP) and tools (WPSDK) that you installed last month
    • Install the new software and tools that you just downloaded from Connect
    • Fire up the new Zune client beta (4.8.2134.0) to check for the new update
                                                  Update

             

    • Zune will then update your phone from 7661 to 7712

                                                           MangoBits

     

    AppHub Changes

    The Marketplace has been hard at work at updating the reporting features of AppHub as well as launching marketplaces in several new countries.  Some of these exciting features include:

    • Geographic expansion: publish to 19 new consumer markets, submit from 7 new developer markets and coming soon, expansion of markets for in-app advertising!
    • New private distribution options: developers can now privately distribute their apps using beta and targeted distribution options.
    • Enhanced application management: we’ve made a lot of additional improvements to how you manage and publish your application in the App Hub itself, in response to your feedback.

    I have seen an uptick in downloads for my own DoodlePad apps when the new markets when online.  You can see the spike in downloads in the chart below:

    Downloads

    It is important to point out however that you need to go into AppHub and select these new countries in order to be published to them.  By default your application will not be available in the new marketplaces unless you specifically tell it to be.  This includes apps that  previously selected “Worldwide Distribution” you will need to go back in and select worldwide again.

    Be sure to check out the official blog post here for all the details.

    Happy Coding!

    -Dave

  • DaveDev

    Connecting to WCF RIA Services in a Windows 8 Metro Style App using Upshot.js and Knockout.js

    • 2 Comments

    Overview

    After messing around with KnockoutJS inside of Metro Style Apps I decided to dive a little deeper and see what Single Page Applications (particularly Upshot.js) could offer.  I’ve gotten asked by more than a few developers how best to connect to their existing WCF RIA Services inside of Metro Style Apps.  The approach I took here is one possible solution to help get your started.

    UpshotOverview

     

    For those not familiar with Upshot it is a JavaScript Library that allows you to connect to WCF RIA Services.  It is by the same great wizards who wrote ASP.NET MVC4 Single Page Applications. and included already in Single Page App templates! 

    I also came across two really great posts you should check out that helped me get my head around things:

    Upshot.js & Knockout.js: The HTML5 Client for WCF RIA Services

    Building Single Page Apps with ASP.NET MVC4 - Part 1 - Basic Desktop Application

    If you just want to grab the MVC4 and Windows 8 Metro Style App source code you can download them here:

    DownloadExample

     

    Setting up the MVC 4 Environment

    In order to get the MVC4 Single Page Application Templates I downloaded and installed Visual Studio 2011 Beta Ultimate (currently freely available here).  I am running everything local: MVC4 Website is using IIS Express and the data is stored in SQL Server 2008 R2 Express( the one that comes with the Web Platform Installer).  The code that I used was based of a great sample Bart Jolling wrote on his blog here

    The example is a simple Deliverytracker SIngle Page Application that looks like this:

    SPA-MVC4 

    To  keep things simple I am running everything local with integrated security on IIS Express and SQL Server Express.
     
    Also take note of our DomainModel as we will need to manually set up MetaData for this later.
    public class Customer
    {
        public int CustomerId { get; set; }
        public string Name { get; set; }
        public string Address { get; set; }
    }
     
    public class Delivery
    {
        public int DeliveryId { get; set; }
        public virtual int CustomerId { get; set; }
        public virtual Customer Customer { get; set; }
     
        public string Description { get; set; }
        public bool IsDelivered { get; set; }
    }

     

    Setting up the Metro Style App to use Upshot.js

    I then created a new JavaScript based Metro Style App like usual and selected the Tools – > Library Package Manager – > Manage NuGet Packages for Solution menu and searched for UpShot.

    GrabUpshot

    This will bring down all the required scripts you need for using Upshot.js in your application.

    InstalledScripts

    Because the package installer assumes we are inside of an MVC application it will write everything into a new /scripts folder.  For simplicity sake I removed the /scripts folder and copied all of the JavaScript files into our existing /js folder.

     

    Declaration and Initialization

    We now reference these new JavaScript Libraries like usual inside of our default.html.

    <script type="text/javascript" src="js/jquery-1.6.4.js"></script>
    <script type="text/javascript" src="js/knockout.debug.js"></script>
    <script type="text/javascript" src="js/knockout.js"></script>
    <script type="text/javascript" src="js/DeliveriesViewModel.js"></script>
    <script type="text/javascript" src="js/upshot.js"></script>
    <script type="text/javascript" src="js/upshot.compat.knockout.js"></script>
    <script type="text/javascript" src="js/upshot.knockout.extensions.js"></script>
    <script type="text/javascript" src="js/arrayUtils.js"></script>

    There are two additional scripts here arrayUtils.js and DeliveriesViewModel.js that I copied over from the MVC4 Single Page Application DeliveryTracker example  mentioned previously.  arrayUtils is a helper function we can leave as is and DeliveriesViewModel will be how we wire up to our service. 

    The next step was to take the code from our MVC4 app’s Home View located in /Views/Home/Index.cshtml and move it into our Metro Style App.

    <section>
    <div>
        <h3>Deliveries</h3>
     
        <button data-bind="click: saveAll">Save All</button>
        <button data-bind="click: revertAll">Revert All</button>
     
        <label>
            <input data-bind="checked: excludeDelivered" type="checkbox" />
             Exclude delivered items</label>
     
        <ol data-bind="foreach: deliveries">
            <li data-bind="css: { delivered: IsDelivered, 
                                            updated: IsUpdated}">
                <strong data-bind="text: Description"></strong>
                is for <em data-bind="text: Customer().Name"></em>
                <label><input data-bind="checked: IsDelivered"
                      type="checkbox"/>Delivered</label>
            </li>
        </ol>
     
        <h3>Customers</h3>
        <ul data-bind="foreach: deliveriesForCustomer">
            <li>
                <div>Name: <strong data-bind="text: key.Name"></strong>
                </div>
                <ul data-bind="foreach: values">
                    <li data-bind="text: Description, 
                        css: { delivered: IsDelivered,
                                 updated: IsUpdated}">                
                    </li>
                </ul>
            </li>    
        </ul>
    </div>
    </section>

     

    All of this gets done inside our default.html:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>UpshotWin8</title>
     
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
        <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
     1:  
     2:     <script src="//Microsoft.WinJS.0.6/js/ui.js">
     1: </script>
     2:  
     3:     <script type="text/javascript" src="js/jquery-1.6.4.js">
     1: </script>
     2:     <script type="text/javascript" src="js/knockout.debug.js">
     1: </script>
     2:     <script type="text/javascript" src="js/knockout.js">
     1: </script>
     2:     <script type="text/javascript" src="js/DeliveriesViewModel.js">
     1: </script>
     2:     <script type="text/javascript" src="js/upshot.js">
     1: </script>
     2:     <script type="text/javascript" src="js/upshot.compat.knockout.js">
     1: </script>
     2:     <script type="text/javascript" src="js/upshot.knockout.extensions.js">
     1: </script>
     2:     <script type="text/javascript" src="js/arrayUtils.js">
     1: </script>
     2:  
     3:  
     4:     <!-- UpshotWin8 references -->
     5:     <link href="/css/default.css" rel="stylesheet">
     6:     <script src="/js/default.js">
    </script>
     
     
    </head>
    <body>
     
    <div >
        <h3>Deliveries</h3>
     
        <button data-bind="click: saveAll">Save All</button>
        <button data-bind="click: revertAll">Revert All</button>
     
        <label>
            <input data-bind="checked: excludeDelivered" type="checkbox" />
             Exclude delivered items</label>
     
        <ol data-bind="foreach: deliveries">
            <li data-bind="css: { delivered: IsDelivered, 
                                            updated: IsUpdated}">
                <strong data-bind="text: Description"></strong>
                is for <em data-bind="text: Customer().Name"></em>
                <label><input data-bind="checked: IsDelivered"
                      type="checkbox"/>Delivered</label>
            </li>
        </ol>
     
        <h3>Customers</h3>
        <ul data-bind="foreach: deliveriesForCustomer">
            <li>
                <div>Name: <strong data-bind="text: key.Name"></strong>
                </div>
                <ul data-bind="foreach: values">
                    <li data-bind="text: Description, 
                        css: { delivered: IsDelivered,
                                 updated: IsUpdated}">                
                    </li>
                </ul>
            </li>    
        </ul>
    </div>
     
    </body>
    </html>

     

    Once we have our view code wired up we now need to call out to the service and databind everything.  Just like my previous KnockoutJS examples I wire up everything after the DomContentLoaded Event has fired using a custom function called initialize.

    document.addEventListener("DOMContentLoaded", initialize);


    Initialize will then tell our app about the fields returned by our Domain Service.  In order to do this we need to call the upshot.metadata function and map values manually based on their original DomainModel source types.  The basic formatting used here is Classname#Namespace.  Once you get your head around that it’s pretty easy to map everything (although laborious).  I also set the key to be based of DeliveryID.  

    After our mapping are set we’ll tell KnockoutJS to bind everything using the provided DeliveriesViewModel function.

    function initialize() {
          
     
        upshot.metadata({
            "Delivery:#DeliveryTracker.Models": {
                "key": ["DeliveryId"],
                "fields": {
                    "DeliveryId": { "type": "Int32:#System" },
                    "CustomerId": { "type": "Int32:#System" },
                    "Customer": { "type": "Customer#DeliveryTrack.Models" },
                    "Description": { "type": "String:#System" },
                    "isDelivered": { "type": "Int32:#System" }
                }
            }
        });
     
        ko.applyBindings( new DeliveriesViewModel( ));
     
    }

     

    The last step now is to edit our DeliveriesViewModel.js file with the location of our Domain Service.  This will be different for everyone but on my local machine the service runs at http://localhost:61907//api/DataService.

    function DeliveriesViewModel() {
        // Private
     
        var dataSourceOptions = {
            providerParameters: {
                url: "http://localhost:61907//api/DataService",
                operationName: "GetDeliveriesForToday"
            },
            entityType: "Delivery:#DeliveryTracker.Models",
            bufferChanges: true,
            mapping: Delivery
        };
     
        // Public Properties
        this.dataSource = new upshot.RemoteDataSource(dataSourceOptions).refresh();
        this.localDataSource = upshot.LocalDataSource({ source: this.dataSource,
            autoRefresh: true
        });
     
        this.deliveries = this.localDataSource.getEntities();
        this.deliveriesForCustomer = this.deliveries.groupBy("Customer");
        this.excludeDelivered = ko.observable(false);
     
        // Operations
        this.saveAll = function () { this.dataSource.commitChanges() }
        this.revertAll = function () { this.dataSource.revertChanges() }
     
        // Delegates
        this.excludeDelivered.subscribe(function (shouldExcludeDelivered) {
            var filterRule = shouldExcludeDelivered
                ? { property: "IsDelivered", operation: "==", value: false }
                : null;
            this.localDataSource.setFilter(filterRule);
            this.localDataSource.refresh();
        });
    }
     
    function Customer (data) {
     
        this.CustomerId = ko.observable(data.CustomerId);
        this.Name = ko.observable(data.Name);
        this.Address = ko.observable(data.Address);
        upshot.addEntityProperties(this, "Customer:#DeliveryTracker.Models");
    }
     
    function Delivery (data) {
      
     
        this.DeliveryId = ko.observable(data.DeliveryId);
        this.CustomerId = ko.observable(data.CustomerId);
        this.Customer = ko.observable(data.Customer);
        this.Description = ko.observable(data.Description);
        this.IsDelivered = ko.observable(data.IsDelivered);
        upshot.addEntityProperties(this, "Delivery:#DeliveryTracker.Models");
    }

     

    Other than the service location I did not need to modify the function in any way from the original MVC4 DeliveryTracker example.

    We now have the Metro Style App binding to the same Domain Service and being fully interactive. 

    RunningMetroApp

     

     

    Conclusion

    Obviously we would need to style the application to make it feel like a native Metro Style App but the hard plumbing work has been done.  We were able to keep a majority of the MVC4 code, from both the views and the model, to get us started with our Windows 8 Metro Style App! 

     

    If you are currently working on a Windows 8 app I would love to hear about it.  You may also want to check out my previous Windows 8 Metro Style Development Tips:

  • DaveDev

    Migrating a Windows 8 Metro Style App from Consumer Preview to Release Preview

    • 1 Comments

    I’ve been working on a Windows 8 Metro Style App written, using JavaScript, I call Space Cadet.

    SpaceCadet

    All of the code samples I have previously posted were built on the Consumer Preview (CP) bits so I thought I would attempt at converting the app  to the just announced Release Preview (RP).

    win8releasepreview

    I had to do a couple of things to get my app up and running on RP from the CP bits.  I will break it down into the following five categories.


    1 - Project Templates

    I found the easiest way to save time was to start a new project and then copy/paste over my old files in.  This ensured I didn’t miss any of the new project/solution settings..


    2 – WinJS References

    The WinJS library file has been updated from version 0.6 to 1.0.RC.  I went into my  default.html file and referenced the updated libraries.

    CP:

    <!-- WinJS references -->
       <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
       <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
       <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>

    RP:

    <link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>


    3 – New Variable References

    After the creation of the app reference to WinJS.Application there is a new activation variable referencing Windows.ApplicationModel.Activation as well as a call to WinJS strictProcessing.  I made sure to include these in my default.js as well.  The strictProcessing call will opt your app in to improved error handling.

    CP:

    var app = WinJS.Application;

    RP:

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    WinJS.strictProcessing();

     

    4 – Application Activation

    The way that the app.onactivated event is called has been changed.  The checks for termination and resuming have now been created for you.  I made sure to include the update checks.

    CP:

    app.onactivated = function (eventObject) {
         if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
     
             //TODO: Load State
     
             WinJS.UI.processAll();
         }
     };

    RP:

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll());
        }
    };

     

    5 – Handling ViewState (Snapped, Filled, Fullscreen)

    The Event Handler for ViewState has been greatly simplified.  Instead of worrying about viewstatechanged on the current ApplicationView we simply add a resize Event Handler to the window object.

    Getting the current ViewState inside our Event Handler has been updated too.  Instead of looking at the eventArgs we now grab the value of Windows.UI.ViewManagement.ApplicationView.

    CP:

    Windows.UI.ViewManagement.ApplicationView.getForCurrentView().addEventListener("viewstatechanged", onViewStateChanged);
     
        function onViewStateChanged(eventArgs) {
            var viewStates = Windows.UI.ViewManagement.ApplicationViewState, msg;
            var newViewState = eventArgs.viewState;
            if (newViewState === viewStates.snapped) {
                showMenu('snapped');
            } else if (newViewState === viewStates.filled) {
                showMenu('filled');
            } else if (newViewState === viewStates.fullScreenLandscape) {
                showMenu('landscape');
            } else if (newViewState === viewStates.fullScreenPortrait) {
                //Currently not supported
            }
            
        }

    RP:

    window.addEventListener("resize", onViewStateChanged);
       
     function onViewStateChanged(eventArgs) {
            var viewStates = Windows.UI.ViewManagement.ApplicationViewState, msg;
            var newViewState = Windows.UI.ViewManagement.ApplicationView.value;
            if (newViewState === viewStates.snapped) {
                showMenu('snapped');
            } else if (newViewState === viewStates.filled) {
                showMenu('filled');
            } else if (newViewState === viewStates.fullScreenLandscape) {
                showMenu('landscape');
            } else if (newViewState === viewStates.fullScreenPortrait) {
                //Currently not supported
            }
            
        }

     

    Conclusion

    Pretty easy update with only five things to think about.  Hopefully this post will help aid you in converting over your own CP apps to RP!   I’ll be doing additional testing over the next few days and will post anything I find here as well as any official update guidance that gets released.

    If you are currently working on a Windows 8 app and want to get into the Windows Store I would love to hear about it!  You may also want to check out my previous Windows 8 Metro Style Development Tips:

  • DaveDev

    How do I send Email with WordPress hosted on Azure Websites?

    • 0 Comments

     

    Via DaveDev.net

     

    Overview

    Recently I moved my old MSDN Blog to the new DaveDev.net url running hosted WordPress on Azure WebSites.  Setting up the new blog couldn’t have been more simple (hint – Click New – Compute – WebSites – Gallery – WordPress in the Azure Dashboard) and only took about five minutes.

    The stuff that actually took the longest was customizing WordPress itself (themes, plugins, etc) , pointing the new Azure Website to a cname (davedev.azurewebsites.net to davedev.net) and then making sure I was backing up the MySQL Database.  One of the areas that was not obvious to me however was how to send Emails.

    Usually, if you sign up for WordPress from an online hoster or WordPress.com you will have an SMTP server set up for you which enables the  wp_mail() function to automatically send Email on  your behalf.  This is not the case when you are running WordPress on Azure but the good news is there is a free solution via the Azure Marketplace. 

    The intent of this post is to walk you through the steps to get started with Email (it’s a free service too) on your WordPress Azure Website instance.

    Contact Form

    WordPress offers a crazy amount of customizations so the first step you need to do is to decide how you want to enable people to contact me on my Blog.  After sifting through a bunch of contact form plugins I decided on one that would allow me to add a new tab and a clean contact form.

    Here is what the Contact Tab looks like now on my Blog in a typical desktop browser:

    ContactTab

    Clicking on Contact will take the blog visitor to a clean contact form where they can enter their name, email I can each them at and then their message.

    ContactForm

    Once they click send they will get a response message if their Email has been sent correctly back to me.

    ContactSent

    If you have tried adding a similar contact plugin to your Azure Websites hosted WordPress instance this is where you will first encounter problems.  Any call to send wp_mail() will result in an error as the Azure instance doesn’t know what SMTP server to use.  I will cover that in a bit but first let’s walk through what the generated Email will look like.

     

    ContactEmailReceived

    You can easily apply filters now to the incoming Blog Emails and when you hit Reply to the Email it will be sent to the Email address the Blog visitor filled out in your Contact Form.

    Setting things up

    So how did I go about creating the Contact Form and enable Emails?  The first step was to install the plugin I wanted to use for Blog Feedback Emails.  I chose Contact Form 7 and then activated the Form as seen below.

    PluginContactForm7

    The Contact Form will add a new menu option in your WordPress Dashboard called Contact.  Opening it up will show a new form called “Contact form 1” with some code in it.

    ContactForm7

    I copied the code from the Contact Form 1 and pasted it into a new Page for my Blog called “Contact”.

    ContactFormCode

    This is the Contact page you now see listed in my Blog’s Tab Menu.  Now that I have a Contact Form Up and running the next step was to sign up for an SMTP Service that would send Emails on my behalf.

    Setting Up SendGrid as a SMTP Service

    In order for our Contact Page to send Emails we will need a SMTP Service.  Luckily for us SendGrid offers just that and is part of the Azure Store.

    sendgrid2

    Simply open up the Azure Dashboard, click New, select Store and then choose SendGrid from the App Services Add-ons list.

    sendgridnew

    There is a completely free tier that will enable you to get (or blast out) up to 25,000 emails a month.  That is more than enough for the purposes of a Feedback page on our Blog.

    sendgridnew2

    Like all products in the Azure Store billing is integrated with your Azure monthly Bill as is single sign on.  I get complete status for the Sendgrid Service right from my Azure Dashboard and clicking on the SendGrid Name will take me to the SendGrid portal using my Azure credentials.

    sendgrid

    The only additional step needed is to verify your email address (which will be your Microsoft ID assigned to your Azure account).  Once that is done be sure to copy over your SendGrid username and password right from the AppBar by clicking Connection Info.

    You will also receive an Email from the Azure Store confirming your purchase of the SendGrid service using the free tier.

    SendgridFree

     

    Setting Up WordPress to use a custom SMTP Service

    Now that we have a Contact Form set up, and the SendGrid SMTP Service enabled we need to update our WordPress Blog so that any calls to the wp_mail() function will be routed to our new SMTP Service.

    There are a bunch of free WordPress plugins that will allow you to do this I chose to go with WP-Mail-SMTP.

    MailSMTP

    This plugin will add a new Email option in the Settings menu for your WordPress Dashboard.  This is where you can set up your From and Name for the Email.  Make sure you select SMTP for Wordpress emails, and then enter your SendGird information as seen below.  Make sure you use the smtp.sendgrid.net SMTP Host name and specify a port.  I used 587 based on the SendGrid recommendations.

    EmailSettings

     

    Conclusion

    That’s it!  You can now send a Test message to yourself using the same settings page or go back to your Contact Form and send one from there.  The only remaining recommendation I would have is to turn off new comment notifications inside your WordPress Dashboard.  This is enabled by default but since my WordPress Azure Website instance could not send emails before I wasn’t getting spammed.  Once the SMTP Host was set up I started to get notified every time a spam comment came in and oh my there are a lot of those with WordPress. 

    -Dave

Page 5 of 68 (272 items) «34567»