Windows 8.1 Updated Reources and Tools

With Windows 8.1 also come lots of updates to the tools and templates that you can use to create Windows Store apps. These updates can help cut down the work in your development and test cycles.

 

Get the updated tools described below at our Windows 8.1 page.

 

New or updated in Windows 8.1

• General updates
• Diagnostics
• JavaScript editor
• C++ development
• HTML design tools
• XAML design tools
• Windows App Certification Kit 3.0

General updates

Area	Description of update
Support for updating your Windows Store apps to Windows 8.1.	Migrate your Windows 8 app to Windows 8.1. This may first require updating your app code for Windows 8.1.
Windows Store app templates	We’ve updated all templates for Windows 8.1, and we’ve added a new Hub template too.
Azure Mobile Services and push notification wizards	The Services Manager makes it easy to connect your app to Azure Mobile Services or Microsoft Advertising. The push notification wizard makes it easy to set up a Azure Mobile Service to send push notifications to your app.
App bundle support	Now you can combine resource packages (like multiple scales, languages, or Microsoft Direct3D feature levels) into a single .appxbundle file for submission to the Windows Store. For your customers, this means that your app is only deployed with the resources they need for their device and locale.
App validation on a remote device	The Create App Package Wizard in Microsoft Visual Studio 2013 now makes it easy to validate your app using Windows App Certification Kit 3.0 on a remote device (such as Windows RT PCs).
Create coded UI tests using XAML	Write automated functional tests for testing Windows Store apps using XAML and the cross-hair tool. Note  Touch interactions are now supported for controls.
New Visual Studio theme/ and Visual Design	We’ve added a third theme, Blue, to the existing Light and Dark themes. The Blue theme offers a mid-range color scheme reminiscent of Microsoft Visual Studio 2010. Also, based on user feedback, we’ve enhanced all themes with additional color and clarity in icons, revised icons, more contrast across the development environment , and clearer segmentation of regions within the environment.

 

Diagnostics

Area	Description of update
Mixed-language debugging	For Windows Store apps that use JavaScript and C++, the debugger now lets you set breakpoints in either language and provides a call stack with both JavaScript and C++ functions.
Managed app debugging	The debugger now displays return values. You can use Edit and Continue in 64-bit managed apps. Exceptions that come from Windows Store apps preserve information about the error, even across language boundaries.
Asynchronous debugging improvements	The call-stack window now includes the creation stack if you stop in an asynchronous method.
Native “Just My Code”	For native code, the call stack simplifies debugging by displaying only the code that you’ve created.
DOM Explorer	The Cascading Style Sheets (CSS) editor supports improved editing, Microsoft IntelliSense, inline style support, shorthand, specificity, and notification of invalid properties. The Computed and Styles panes have been enhanced. The DOM Explorer supports search, editing as HTML, IntelliSense, and undo stacks.
JavaScript Console	The console now supports object preview and visualization, new APIs, multiline function support, IntelliSense, evaluation of elements as objects or HTML, and legacy document modes.
JavaScript Memory Profiler	Dominators view shows memory allocation retained by each object. The profiler notifies you of potential memory leaks caused by detached or disconnected DOM nodes.
JavaScript UI Responsiveness	The Details pane includes hyperlinks to event source locations, plus a chart showing the percentage of time that each child event contributed to the selected event’s overall duration. You can now expand instances of Layout and Style calculation events to display the HTML elements that were affected by the operation.
XAML UI Responsiveness	For C#/VB/C++ XAML-based Windows Store apps, the XAML UI Responsiveness tool allows you to diagnose performance issues related to app startup and page navigation, panning and scrolling, and input responsiveness in general.

 

JavaScript editor

Area	Description of update
Completion of enclosing character pairs	The editor automatically inserts the closing character when you type a left brace (“{“), parenthesis (“(“), bracket (“[“), single quotation mark (“`”), or (“””). A smart auto-format and indent of your source is also made as it auto-completes.
Editor navigation bar	This new UI feature helps you identify and move through the important elements in your source code. New for JavaScript developers, the navigation bar will highlight important functions and objects in your source.
Deprecation notes in IntelliSense.	If a Windows API element has been deprecated in Windows 8.1, IntelliSense tooltips identify it as “[deprecated]”.
Go To Definition for namespaces	You can right-click a namespace you use in your code (such as WinJS.UI) and then click Go To Definition to be taken to the line where that namespace is defined.
Identifier highlighting	Select an identifier (for example, a variable, parameter, or function name) in your source and any uses of that identifier will be highlighted in your source code.

 

C++ development

Area	Description of update
Windows Store app development for Windows 8.1	Boxed types in value structs You can now define value types by using fields that can be null—for example, IBox<int>^ as opposed to int. This means that the fields can either have a value, or be equal to nullptr. Richer exception information C++/CX supports the new Windows error model that enables the capture and propagation of rich exception information across the Application Binary Interface (ABI); this includes call stacks and custom message strings. Object::ToString is now virtual You can now override ToString() in user-defined Windows Runtime ref types.
C++11 standard compliance	Compiler support for ISO C++11 language features Default template arguments for function templates Delegating constructors Explicit conversion operators Initializer lists and uniform initialization Raw string literals Variadic templates Updated Standard Template Library (STL) to use the latest C++11 features Improvements to C99 libraries C99 functionality added to Complex math functions in new header, <complex.h> Integer type support in new header, ; includes format string support for “hh” Support for variable-argument scanf forms in . C99 variants of vscanf, strtoll, vwscanf/wcstoll, and isblank/iswblank are implemented. New conversion support for long long and long double in <stdlib.h>
C++ REST SDK	Modern C++ implementation of Representational State Transfer (REST) services. For more info see C++ REST SDK (codename “Casablanca”).
C++ Azure Mobile Services SDK	The shortest path to a connected C++ app with a Azure backend.
C++ AMP	SxS CPU/GPU debugging (for WARP accelerator), enhanced texture support (mipmaps and new sampling modes), and improved diagnostics and exceptions.
IDE productivity features	Improved code formatting. Brace completion. Auto-generation of event handler code in C++/CX and C++/CLI. Context-based member list filtering. Parameter help scrolling. Toggle header/code file. Resizable C++ project-properties window. Faster builds. Numerous optimizations and multi-core utilization make builds faster, especially for large projects. Incremental builds for C++ apps that have references to C++ WinMD are also much faster.
App performance	Pass vector type arguments by using the __vectorcall calling convention to use vector registers. Reduction or elimination of CPU/GPU data transfer in C++ AMP. Auto-vectorization improvements. C++/CX optimizations in allocations and casting. Performance tuning of C++ AMP runtime libraries. New: PGO for Windows Store app development.
Build-time performance enhancements	Compiler throughput improvements for highly parallel builds.

 

 

HTML design tools

Area	Description of update
CSS animation	The timeline editor helps you create CSS animations.
JavaScript behaviors	Add JavaScript event listeners to any element without writing code. Choose from a list of supplied event handlers or create your own.
Custom font embedding	Create a branded experience by using custom fonts for HTML text.
Data binding	Set the data binding for any template.
Rules and guides	Create custom guides.
Border radius	Easy-to-use handles on each element help you create rounded corners and ellipses.
Searching and setting CSS properties	The search box lets you set CSS property values directly and quickly.
Finding elements with CSS syntax	The live DOM search now supports CSS syntax. For example, you can automatically select all elements with class “myclass” by searching for “.myclass”.

 

XAML design tools

Area	Description of update
XAML editor improvements	The XAML editor in Visual Studio 2013 includes IntelliSense for data bindings and resources, smart commenting, and Go To Definition.
Rulers and guides	Create custom guides.
Better style editing support	Edit styles and templates in the context of the document where they’re used, even if they’re actually defined in another, shared location.
Sample data support	The data panel enhances sample data support in XAML projects for the Windows Store. This includes the ability to create sample data from JSON content. For an example of how to set this up, see the updated Windows Store app project templates for XAML.
View state authoring	The device panel in Blend for Microsoft Visual Studio 2013 and Visual Studio 2013 supports updated view states properties and requirements to support variable minimum widths.

 

Windows App Certification Kit 3.0

Use the latest version of the Windows App Certification Kit to test the readiness of Windows Store apps for Windows 8 and Windows 8.1 before on-boarding, and for the Windows 7, Windows 8, and Windows 8.1 Windows Desktop App Certification.

We’ve also updated the Windows App Certification Kit to give you a smooth experience. For example, you can now run tests in parallel to save time, and you have more flexibility in selecting the tests you run.

New validation tests

As with previous releases of Windows, we’ve revised the kit content to include more validation, helping to make sure that Windows apps running on the latest update are well behaved. Here’s a high-level breakdown of the new tests.

Test	Description
Direct3D additional check	Validates apps for compliance with Direct3D requirements, and ensures that apps using C++ and XAML are calling a new Trim method upon their suspend callback.
Supported directory structure	Ensures that apps don’t create a structure on disk that results in files longer than MAX_PATH (260 characters).
File extensions and protocols	Limits the number of file extensions and protocols that an app can register.
Platform appropriate files	Checks for packages that contain cross-architecture binaries.
Banned file check	Checks apps for use of outdated or prerelease components known to have security vulnerabilities.
JavaScript background tasks	Verifies that apps that use JavaScript have the proper close statement in the background task, so the app doesn’t consume battery power unnecessarily.
Framework dependency rules	Ensures that apps are taking the right framework dependencies for Windows 8 and Windows 8.1.

 

Test reports

We’ve made a number of changes to the test report generated by the Windows App Certification Kit. These reports include new information, are easier to read, and provide more links to resources that can help you resolve issues. Significant additions and updates include:

• Expanded error-message details.
• Actionable info for supported and deprecated APIs.
• Details about the configuration of the current test device.
• A language toggle (if the report is localized).

For more information on how to use this kit, see Using the Windows App Certification Kit.

What is Kendo UI

Kendo UI is an HTML5, jQuery-based framework for building modern web apps. The framework features lots of UI widgets, a rich data vizualization framework, an auto-adaptive Mobile framework, and all of the tools needed for HTML5 app development, such as Data Binding, Templating, Drag-and-Drop API, and more.

 

Kendo UI comes in different bundles:

• Kendo UI Web – HTML5 widgets for desktop browsing experience.
• Kendo UI DataViz – HTML5 data vizualization widgets.
• Kendo UI Mobile – HTML5 framework for building hybrid mobile applications.
• Kendo UI Complete – includes Kendo UI Web, Kendo UI DataViz and Kendo UI Mobile.
• Telerik UI for ASP.NET MVC – Kendo UI Complete plus ASP.NET MVC wrappers for Kendo UI Web, DataViz and Mobile.
• Telerik UI for JSP – Kendo UI Complete plus JSP wrappers for Kendo UI Web and Kendo UI DataViz.
• Telerik UI for PHP – Kendo UI Complete plus PHP wrappers for Kendo UI Web and Kendo UI DataViz.

Installing and Getting Started with Kendo UI

You can download all Kendo UI bundles from the download page.

The distribution zip file contains the following:

• /examples – quick start demos.
• /js – minified JavaScript files.
• /src – complete source code. Not available in the trial distribution.
• /styles – minified CSS files and theme images.
• /wrappers – server-side wrappers. Available in Telerik UI for ASP.NET MVC, JSP or PHP.
• changelog.html – Kendo UI release notes.

Using Kendo UI

To use Kendo UI in your HTML page you need to include the required JavaScript and CSS files.

Kendo UI Web

1. Download Kendo UI Web and extract the distribution zip file to a convenient location.
2. Copy the /js and /styles directories of the Kendo UI Web distribution to your web application root directory.
3. Include the Kendo UI Web JavaScript and CSS files in the head tag of your HTML page. Make sure the common CSS file is registered before the theme CSS file. Also make sure only one combined script file is registered. For more information, please refer to the Javascript Dependencies page.

   <!-- Common Kendo UI Web CSS -->
   <link href="styles/kendo.common.min.css" rel="stylesheet" />
   <!-- Default Kendo UI Web theme CSS -->
   <link href="styles/kendo.default.min.css" rel="stylesheet" />
   <!-- jQuery JavaScript -->
   <script src="js/jquery.min.js"></script>
   <!-- Kendo UI Web combined JavaScript -->
   <script src="js/kendo.web.min.js"></script>
   

4. Initialize a Kendo UI Web Widget (the KendoDatePicker in this example):

   <!-- HTML element from which the Kendo DatePicker would be initialized -->
   <input id="datepicker" />
   <script>
   $(function() {
       // Initialize the Kendo DatePicker by calling the kendoDatePicker jQuery plugin
       $("#datepicker").kendoDatePicker();
   });
   </script>
   

Here is the complete example:

<!--doctype html>
<html>
    <head>
        <title>Kendo UI Web</title>
        <link href="styles/kendo.common.min.css" rel="stylesheet" />
        <link href="styles/kendo.default.min.css" rel="stylesheet" />
        <script src="js/jquery.min.js"></script>
        <script src="js/kendo.web.min.js"></script>
    </head>
    <body>
        <input id="datepicker" />
        <script>
            $(function() {
                $("#datepicker").kendoDatePicker();
            });
        </script>
    </body>
</html>

Kendo UI DataViz

1. Download Kendo UI DataViz and extract the distribution zip file to a convenient location.
2. Copy the /js and /styles directories of the Kendo UI DataViz distribution to your web application root directory.
3. Include the Kendo UI DataViz JavaScript and CSS files in the head tag of your HTML page:

   <!-- Kendo UI DataViz CSS -->
   <link href="styles/kendo.dataviz.min.css" rel="stylesheet" />
   <!-- jQuery JavaScript -->
   <script src="js/jquery.min.js"></script>
   <!-- Kendo UI DataViz combined JavaScript -->
   <script src="js/kendo.dataviz.min.js"></script>
   

4. Initialize a Kendo UIDataViz Widget (the Kendo Radial Gauge in this example):

   <!-- HTML element from which the Kendo Radial Gauge would be initialized -->
   <div id="gauge"></div>
   <script>
   $(function() {
       $("#gauge").kendoRadialGauge();
   });
   </script>
   

Here is the complete example:

<!--doctype html>
<html>
    <head>
        <title>Kendo UI DataViz</title>
        <link href="styles/kendo.dataviz.min.css" rel="stylesheet" />
        <script src="js/jquery.min.js"></script>
        <script src="js/kendo.dataviz.min.js"></script>
    </head>
    <body>
        <div id="gauge"></div>
        <script>
        $(function() {
            $("#gauge").kendoRadialGauge();
        });
        </script>
    </body>
</html>

Kendo UI Mobile

1. Download Kendo UI Mobile and extract the distribution zip file to a convenient location.
2. Copy the /js and /styles directories of the Kendo UI Mobile distribution to your web application root directory.
3. Include the Kendo UI Mobile JavaScript and CSS files in the head tag of your HTML page:

   <!-- Kendo UI Mobile CSS -->
   <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
   <!-- jQuery JavaScript -->
   <script src="js/jquery.min.js"></script>
   <!-- Kendo UI Mobile combined JavaScript -->
   <script src="js/kendo.mobile.min.js"></script>
   

4. Initialize a Kendo Mobile Application

   <!-- Kendo Mobile View -->
   <div data-role="view" data-title="View" id="index">
       <!--Kendo Mobile Header -->
       <header data-role="header">
           <!--Kendo Mobile NavBar widget -->
           <div data-role="navbar">
               <span data-role="view-title"></span>
           </div>
       </header>
       <!--Kendo Mobile ListView widget -->
       <ul data-role="listview">
         <li>Item 1</li>
         <li>Item 2</li>
       </ul>
       <!--Kendo Mobile Footer -->
       <footer data-role="footer">
           <!-- Kendo Mobile TabStrip widget -->
           <div data-role="tabstrip">
               <a data-icon="home" href="#index">Home</a>
               <a data-icon="settings" href="#settings">Settings</a>
           </div>
       </footer>
   </div>
   <script>
   // Initialize a new Kendo Mobile Application
   var app = new kendo.mobile.Application();
   </script>
   

Here is the complete example:

<!--doctype html>
<html>
    <head>
        <title>Kendo UI Mobile</title>
        <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
        <script src="js/jquery.min.js"></script>
        <script src="js/kendo.mobile.min.js"></script>
    </head>
    <body>
        <div data-role="view" data-title="View" id="index">
            <header data-role="header">
                <div data-role="navbar">
                    <span data-role="view-title"></span>
                </div>
            </header>
            <ul data-role="listview">
              <li>Item 1</li>
              <li>Item 2</li>
            </ul>
            <footer data-role="footer">
                <div data-role="tabstrip">
                    <a data-icon="home" href="#index">Home</a>
                    <a data-icon="settings" href="#settings">Settings</a>
                </div>
            </footer>
        </div>
        <script>
        var app = new kendo.mobile.Application();
        </script>
    </body>
</html>

Server-side wrappers

Kendo UI provides server-side wrappers for ASP.NET, PHP and JSP. Those are classes (ASP.NET and PHP) or XML tags (JSP) which allow configuring the Kendo UI widgets with server-side code.

You can find more info about the server-side wrappers here:

• Get Started with Telerik UI for ASP.NET MVC
• Get Started with Telerik UI for JSP
• Get Started with Telerik UI for PHP

Next Steps

Kendo UI videos

You can watch the videos in the Kendo UI YouTube channel.

Kendo UI Dojo

A lot of interactive tutorials are available in the Kendo UI Dojo.

Further reading

1. Kendo UI Widgets
2. Data Attribute Initialization
3. Requirements

Examples

1. Online demos
2. Code library projects
3. Examples availableongithub
   • ASP.NET MVC examples
   • ASP.NET MVC Kendo UI Music Store
   • ASP.NET WebForms examples
   • JSP examples
   • Kendo Mobile Sushi
   • PHP examples
   • Ruby on Rails examples

Help Us Improve Kendo UI Documentation, Samples, Tutorials and Demos

The Kendo UI team would LOVE your help to improve our documentation. We encourage you to contribute in the way that you choose:

Submit a New Issue at GitHub

Open a new issue on the topic if it does not exist already.When creating an issue, please provide a descriptive title, be as specific as possible and link to the document in question. If you can provide a link to the closest anchor to the issue, that is even better.

Update the Documentation at GitHub

This is the most direct method. Follow the contribution instructions. The basic steps are that you fork our documentation and submit a pull request. That way you can contribute to exactly where you found the error and our technical writing team just needs to approve your change request. Please use only standard Markdown and follow the directions at the link. If you find an issue in the docs, or even feel like creating new content, we are happy to have your contributions!

Forums

You can also go to the Kendo UI Forums and leave feedback. This method will take a bit longer to reach our documentation team, but if you like the accountability of forums and you want a fast reply from our amazing support team, leaving feedback in the Kendo UI forums guarantees that your suggestion has a support number and that we’ll follow up on it.Thank you for contributing to the Kendo UI community!