Added an example about using RadControls in WinJS templates
This commit is contained in:
Tsvetina Ivanova
Родитель
9bf1a5e2db
Коммит
7216831a3a
|
|
@ -5,6 +5,8 @@ Project("{262852C6-CD72-467D-83FE-5EEB1973A190}") = "ChangingControlCultureDynam
|
|||
EndProject
|
||||
Project("{262852C6-CD72-467D-83FE-5EEB1973A190}") = "SettingGlobalTelerikCulture", "SettingGlobalTelerikCulture\SettingGlobalTelerikCulture.jsproj", "{5ED56D19-AF76-4371-B5AC-C33A41E8E6DD}"
|
||||
EndProject
|
||||
Project("{262852C6-CD72-467D-83FE-5EEB1973A190}") = "UsingRadControlsInWinJsTemplates", "UsingRadControlsInWinJsTemplates\UsingRadControlsInWinJsTemplates.jsproj", "{BD32891C-F929-428E-949B-F3DADB66F84B}"
|
||||
EndProject
|
||||
Global
|
||||
GlobalSection(SolutionConfigurationPlatforms) = preSolution
|
||||
Debug|Any CPU = Debug|Any CPU
|
||||
|
|
@ -65,6 +67,30 @@ Global
|
|||
{5ED56D19-AF76-4371-B5AC-C33A41E8E6DD}.Release|x86.ActiveCfg = Release|x86
|
||||
{5ED56D19-AF76-4371-B5AC-C33A41E8E6DD}.Release|x86.Build.0 = Release|x86
|
||||
{5ED56D19-AF76-4371-B5AC-C33A41E8E6DD}.Release|x86.Deploy.0 = Release|x86
|
||||
{BD32891C-F929-428E-949B-F3DADB66F84B}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
|
||||
{BD32891C-F929-428E-949B-F3DADB66F84B}.Debug|Any CPU.Build.0 = Debug|Any CPU
|
||||
{BD32891C-F929-428E-949B-F3DADB66F84B}.Debug|Any CPU.Deploy.0 = Debug|Any CPU
|
||||
{BD32891C-F929-428E-949B-F3DADB66F84B}.Debug|ARM.ActiveCfg = Debug|ARM
|
||||
{BD32891C-F929-428E-949B-F3DADB66F84B}.Debug|ARM.Build.0 = Debug|ARM
|
||||
{BD32891C-F929-428E-949B-F3DADB66F84B}.Debug|ARM.Deploy.0 = Debug|ARM
|
||||
{BD32891C-F929-428E-949B-F3DADB66F84B}.Debug|x64.ActiveCfg = Debug|x64
|
||||
{BD32891C-F929-428E-949B-F3DADB66F84B}.Debug|x64.Build.0 = Debug|x64
|
||||
{BD32891C-F929-428E-949B-F3DADB66F84B}.Debug|x64.Deploy.0 = Debug|x64
|
||||
{BD32891C-F929-428E-949B-F3DADB66F84B}.Debug|x86.ActiveCfg = Debug|x86
|
||||
{BD32891C-F929-428E-949B-F3DADB66F84B}.Debug|x86.Build.0 = Debug|x86
|
||||
{BD32891C-F929-428E-949B-F3DADB66F84B}.Debug|x86.Deploy.0 = Debug|x86
|
||||
{BD32891C-F929-428E-949B-F3DADB66F84B}.Release|Any CPU.ActiveCfg = Release|Any CPU
|
||||
{BD32891C-F929-428E-949B-F3DADB66F84B}.Release|Any CPU.Build.0 = Release|Any CPU
|
||||
{BD32891C-F929-428E-949B-F3DADB66F84B}.Release|Any CPU.Deploy.0 = Release|Any CPU
|
||||
{BD32891C-F929-428E-949B-F3DADB66F84B}.Release|ARM.ActiveCfg = Release|ARM
|
||||
{BD32891C-F929-428E-949B-F3DADB66F84B}.Release|ARM.Build.0 = Release|ARM
|
||||
{BD32891C-F929-428E-949B-F3DADB66F84B}.Release|ARM.Deploy.0 = Release|ARM
|
||||
{BD32891C-F929-428E-949B-F3DADB66F84B}.Release|x64.ActiveCfg = Release|x64
|
||||
{BD32891C-F929-428E-949B-F3DADB66F84B}.Release|x64.Build.0 = Release|x64
|
||||
{BD32891C-F929-428E-949B-F3DADB66F84B}.Release|x64.Deploy.0 = Release|x64
|
||||
{BD32891C-F929-428E-949B-F3DADB66F84B}.Release|x86.ActiveCfg = Release|x86
|
||||
{BD32891C-F929-428E-949B-F3DADB66F84B}.Release|x86.Build.0 = Release|x86
|
||||
{BD32891C-F929-428E-949B-F3DADB66F84B}.Release|x86.Deploy.0 = Release|x86
|
||||
EndGlobalSection
|
||||
GlobalSection(SolutionProperties) = preSolution
|
||||
HideSolutionNode = FALSE
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
<p>
|
||||
This example demonstrates how a databound RadControl can be added inside a declarative <strong>WinJs.Binding.Template</strong>. The template depends on a
|
||||
custom binding initializer to assign the properties of the <strong>RadChart</strong> bound inside the template body. Custom binding initializers allow you to
|
||||
implement more complex binding scenarios where assigning a single value to a property is not enough to achieve your goal.
|
||||
</p>
|
||||
<p>For more information on binding initializers in <strong>WinJS.Binding.Template</strong>, check:</p>
|
||||
<a href="http://kraigbrockschmidt.com/blog/?p=1004" target="_blank">WinJS.Binding Initializers, Part 1</a><br />
|
||||
<a href="http://kraigbrockschmidt.com/blog/?p=1007" target="_blank">WinJS.Binding Initializers, Part 2</a>
|
||||
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<Project ToolsVersion="4.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
|
||||
<ItemGroup Label="ProjectConfigurations">
|
||||
<ProjectConfiguration Include="Debug|AnyCPU">
|
||||
<Configuration>Debug</Configuration>
|
||||
<Platform>AnyCPU</Platform>
|
||||
</ProjectConfiguration>
|
||||
<ProjectConfiguration Include="Debug|ARM">
|
||||
<Configuration>Debug</Configuration>
|
||||
<Platform>ARM</Platform>
|
||||
</ProjectConfiguration>
|
||||
<ProjectConfiguration Include="Debug|x64">
|
||||
<Configuration>Debug</Configuration>
|
||||
<Platform>x64</Platform>
|
||||
</ProjectConfiguration>
|
||||
<ProjectConfiguration Include="Debug|x86">
|
||||
<Configuration>Debug</Configuration>
|
||||
<Platform>x86</Platform>
|
||||
</ProjectConfiguration>
|
||||
<ProjectConfiguration Include="Release|AnyCPU">
|
||||
<Configuration>Release</Configuration>
|
||||
<Platform>AnyCPU</Platform>
|
||||
</ProjectConfiguration>
|
||||
<ProjectConfiguration Include="Release|ARM">
|
||||
<Configuration>Release</Configuration>
|
||||
<Platform>ARM</Platform>
|
||||
</ProjectConfiguration>
|
||||
<ProjectConfiguration Include="Release|x64">
|
||||
<Configuration>Release</Configuration>
|
||||
<Platform>x64</Platform>
|
||||
</ProjectConfiguration>
|
||||
<ProjectConfiguration Include="Release|x86">
|
||||
<Configuration>Release</Configuration>
|
||||
<Platform>x86</Platform>
|
||||
</ProjectConfiguration>
|
||||
</ItemGroup>
|
||||
<PropertyGroup Label="Globals">
|
||||
<ProjectGuid>bd32891c-f929-428e-949b-f3dadb66f84b</ProjectGuid>
|
||||
</PropertyGroup>
|
||||
<PropertyGroup Condition="'$(VisualStudioVersion)' == '' or '$(VisualStudioVersion)' < '11.0'">
|
||||
<VisualStudioVersion>11.0</VisualStudioVersion>
|
||||
</PropertyGroup>
|
||||
<Import Project="$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props" Condition="Exists('$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props')" />
|
||||
<Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\$(WMSJSProjectDirectory)\Microsoft.VisualStudio.$(WMSJSProject).Default.props" />
|
||||
<Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\$(WMSJSProjectDirectory)\Microsoft.VisualStudio.$(WMSJSProject).props" />
|
||||
<PropertyGroup>
|
||||
<TargetPlatformIdentifier>Windows</TargetPlatformIdentifier>
|
||||
<TargetPlatformVersion>8.0</TargetPlatformVersion>
|
||||
<DefaultLanguage>en-US</DefaultLanguage>
|
||||
<PackageCertificateKeyFile>UsingRadControlsInWinJsTemplates_TemporaryKey.pfx</PackageCertificateKeyFile>
|
||||
</PropertyGroup>
|
||||
<ItemGroup>
|
||||
<AppxManifest Include="package.appxmanifest">
|
||||
<SubType>Designer</SubType>
|
||||
</AppxManifest>
|
||||
<Content Include="default.html" />
|
||||
<Content Include="images\logo.png" />
|
||||
<Content Include="images\smalllogo.png" />
|
||||
<Content Include="images\splashscreen.png" />
|
||||
<Content Include="images\storelogo.png" />
|
||||
<Content Include="js\data.json" />
|
||||
<Content Include="js\default.js" />
|
||||
<Content Include="css\default.css" />
|
||||
<Content Include="ReadMe.html" />
|
||||
<None Include="UsingRadControlsInWinJsTemplates_TemporaryKey.pfx" />
|
||||
</ItemGroup>
|
||||
<ItemGroup>
|
||||
<SDKReference Include="Microsoft.WinJS.1.0, Version=1.0" />
|
||||
<SDKReference Include="Telerik.UI, Version=2013.2.716" />
|
||||
</ItemGroup>
|
||||
<Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\$(WMSJSProjectDirectory)\Microsoft.VisualStudio.$(WMSJSProject).targets" />
|
||||
<!-- To modify your build process, add your task inside one of the targets below then uncomment
|
||||
that target and the DisableFastUpToDateCheck PropertyGroup.
|
||||
Other similar extension points exist, see Microsoft.Common.targets.
|
||||
<Target Name="BeforeBuild">
|
||||
</Target>
|
||||
<Target Name="AfterBuild">
|
||||
</Target>
|
||||
<PropertyGroup>
|
||||
<DisableFastUpToDateCheck>true</DisableFastUpToDateCheck>
|
||||
</PropertyGroup>
|
||||
-->
|
||||
</Project>
|
||||
Двоичные данные
CommonFeatures/UsingRadControlsInWinJsTemplates/UsingRadControlsInWinJsTemplates_TemporaryKey.pfx
Normal file
Двоичные данные
CommonFeatures/UsingRadControlsInWinJsTemplates/UsingRadControlsInWinJsTemplates_TemporaryKey.pfx
Normal file
Двоичный файл не отображается.
|
|
@ -0,0 +1,22 @@
|
|||
.mainContent {
|
||||
margin: 120px 0 0 120px;
|
||||
}
|
||||
|
||||
.mainContent > h1 {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.info {
|
||||
color: #feef7a;
|
||||
margin-left: 120px;
|
||||
}
|
||||
|
||||
.item {
|
||||
background-color: #f3e9fc;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.item > h4,
|
||||
.item > span {
|
||||
color: black;
|
||||
}
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>UsingRadControlsInWinJsTemplates</title>
|
||||
|
||||
<!-- WinJS references -->
|
||||
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
|
||||
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
|
||||
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
|
||||
|
||||
<!-- Telerik references -->
|
||||
<link href="///Telerik.UI/css/common.css" rel="stylesheet" />
|
||||
<link href="///Telerik.UI/css/dark.css" rel="stylesheet" />
|
||||
<script src="///Telerik.UI/js/jquery.js"></script>
|
||||
<script src="///Telerik.UI/js/ui.js"></script>
|
||||
|
||||
<!-- UsingRadControlsInWinJsTemplates references -->
|
||||
<link href="/css/default.css" rel="stylesheet" />
|
||||
<script src="/js/default.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<section class="mainContent">
|
||||
<h1>Using RadControls in WinJS.Binding.Template</h1>
|
||||
<div id="template" data-win-control="WinJS.Binding.Template">
|
||||
<div class="item">
|
||||
<h4 data-win-bind="innerText: Name"></h4>
|
||||
<span data-win-bind="innerText: City"></span>
|
||||
<div id="salesChart" data-win-control="Telerik.UI.RadChart"
|
||||
data-win-bind="winControl.dataSource.data: Stats CustomInitializers.chartBindingInitializer"
|
||||
data-win-options="{
|
||||
series:[
|
||||
{
|
||||
type: 'line',
|
||||
name: 'Customers',
|
||||
field: 'Customers'
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
name: 'Sales',
|
||||
field: 'Sales'
|
||||
}
|
||||
],
|
||||
chartArea: {
|
||||
background: '#f3e9fc'
|
||||
},
|
||||
categoryAxis: {
|
||||
field: 'Month'
|
||||
},
|
||||
valueAxis: {
|
||||
min: 0,
|
||||
max: 30
|
||||
},
|
||||
tooltip: {
|
||||
visible: true,
|
||||
template: '#=category#: #=value#'
|
||||
},
|
||||
theme: 'light'
|
||||
}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="listView" style="height: 450px" data-win-control="WinJS.UI.ListView" data-win-options="{
|
||||
itemTemplate: select('#template'),
|
||||
selectionMode: 'none'
|
||||
}">
|
||||
</div>
|
||||
</section>
|
||||
<footer class="info" data-win-control="WinJS.UI.HtmlControl" data-win-options="{
|
||||
uri: 'readme.html'
|
||||
}">
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 801 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 329 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.1 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 429 B |
|
|
@ -0,0 +1,64 @@
|
|||
{
|
||||
"data":[
|
||||
{
|
||||
"Name":"Nancy Davolio",
|
||||
"City":"Seattle",
|
||||
"Stats": [
|
||||
{"Month": "Jan", "Sales": 5, "Customers": 5},
|
||||
{"Month": "Feb", "Sales": 12, "Customers": 7},
|
||||
{"Month": "Mar", "Sales": 9, "Customers": 7},
|
||||
{"Month": "Apr", "Sales": 21, "Customers": 16},
|
||||
{"Month": "May", "Sales": 23, "Customers": 17}
|
||||
],
|
||||
"Bonus": 5000
|
||||
},
|
||||
{
|
||||
"Name":"Andrew Fuller",
|
||||
"City":"San Francisco",
|
||||
"Stats": [
|
||||
{"Month": "Jan", "Sales": 10, "Customers": 7},
|
||||
{"Month": "Feb", "Sales": 12, "Customers": 9},
|
||||
{"Month": "Mar", "Sales": 15, "Customers": 8},
|
||||
{"Month": "Apr", "Sales": 19, "Customers": 12},
|
||||
{"Month": "May", "Sales": 21, "Customers": 13}
|
||||
],
|
||||
"Bonus": 4500
|
||||
},
|
||||
{
|
||||
"Name":"Janet Levering",
|
||||
"City":"Seattle",
|
||||
"Stats": [
|
||||
{"Month": "Jan", "Sales": 14, "Customers": 9},
|
||||
{"Month": "Feb", "Sales": 15, "Customers": 12},
|
||||
{"Month": "Mar", "Sales": 14, "Customers": 12},
|
||||
{"Month": "Apr", "Sales": 21, "Customers": 16},
|
||||
{"Month": "May", "Sales": 18, "Customers": 15}
|
||||
],
|
||||
"Bonus": 4000
|
||||
},
|
||||
{
|
||||
"Name":"Margaret Peacock",
|
||||
"City":"San Francisco",
|
||||
"Stats": [
|
||||
{"Month": "Jan", "Sales": 18, "Customers": 12},
|
||||
{"Month": "Feb", "Sales": 24, "Customers": 16},
|
||||
{"Month": "Mar", "Sales": 21, "Customers": 16},
|
||||
{"Month": "Apr", "Sales": 25, "Customers": 18},
|
||||
{"Month": "May", "Sales": 26, "Customers": 20}
|
||||
],
|
||||
"Bonus": 6500
|
||||
},
|
||||
{
|
||||
"Name":"Michael Suyama",
|
||||
"City":"Seattle",
|
||||
"Stats": [
|
||||
{"Month": "Jan", "Sales": 16, "Customers": 10},
|
||||
{"Month": "Feb", "Sales": 13, "Customers": 10},
|
||||
{"Month": "Mar", "Sales": 17, "Customers": 13},
|
||||
{"Month": "Apr", "Sales": 19, "Customers": 15},
|
||||
{"Month": "May", "Sales": 23, "Customers": 19}
|
||||
],
|
||||
"Bonus": 5500
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
// For an introduction to the Blank template, see the following documentation:
|
||||
// http://go.microsoft.com/fwlink/?LinkId=232509
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
WinJS.Binding.optimizeBindingReferences = true;
|
||||
|
||||
var app = WinJS.Application;
|
||||
var activation = Windows.ApplicationModel.Activation;
|
||||
var listView,
|
||||
listDataSource;
|
||||
|
||||
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().then(function () {
|
||||
WinJS.xhr({
|
||||
url: "/js/data.json"
|
||||
}).then(function (result) {
|
||||
var data = JSON.parse(result.responseText).data;
|
||||
listDataSource = new WinJS.Binding.List(data);
|
||||
|
||||
listView = document.querySelector("#listView").winControl;
|
||||
listView.itemDataSource = listDataSource.dataSource;
|
||||
});
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
app.oncheckpoint = function (args) {
|
||||
// TODO: This application is about to be suspended. Save any state
|
||||
// that needs to persist across suspensions here. You might use the
|
||||
// WinJS.Application.sessionState object, which is automatically
|
||||
// saved and restored across suspension. If you need to complete an
|
||||
// asynchronous operation before your application is suspended, call
|
||||
// args.setPromise().
|
||||
};
|
||||
|
||||
app.start();
|
||||
|
||||
WinJS.Namespace.define("CustomInitializers", {
|
||||
chartBindingInitializer: WinJS.Binding.initializer(function (source, sourceProperty, target, targetProperty) {
|
||||
//target is the chart element
|
||||
var chart = target.winControl;
|
||||
//source holds the current data item, sourceProperty is the property name we specified in data-win-bind
|
||||
chart.dataSource.data = source.Stats;
|
||||
chart.height = 150;
|
||||
chart.width = 250;
|
||||
chart.refresh();
|
||||
})
|
||||
});
|
||||
})();
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<Package xmlns="http://schemas.microsoft.com/appx/2010/manifest">
|
||||
|
||||
<Identity
|
||||
Name="bd32891c-f929-428e-949b-f3dadb66f84b"
|
||||
Version="1.0.0.0"
|
||||
Publisher="CN=tsivanova" />
|
||||
|
||||
<Properties>
|
||||
<DisplayName>UsingRadControlsInWinJsTemplates</DisplayName>
|
||||
<PublisherDisplayName>tsivanova</PublisherDisplayName>
|
||||
<Logo>images\storelogo.png</Logo>
|
||||
</Properties>
|
||||
|
||||
<Prerequisites>
|
||||
<OSMinVersion>6.2.1</OSMinVersion>
|
||||
<OSMaxVersionTested>6.2.1</OSMaxVersionTested>
|
||||
</Prerequisites>
|
||||
|
||||
<Resources>
|
||||
<Resource Language="x-generate" />
|
||||
</Resources>
|
||||
|
||||
<Applications>
|
||||
<Application
|
||||
Id="App"
|
||||
StartPage="default.html">
|
||||
|
||||
<VisualElements
|
||||
DisplayName="UsingRadControlsInWinJsTemplates"
|
||||
Logo="images\logo.png"
|
||||
SmallLogo="images\smalllogo.png"
|
||||
Description="UsingRadControlsInWinJsTemplates"
|
||||
ForegroundText="light"
|
||||
BackgroundColor="#464646">
|
||||
|
||||
<DefaultTile ShowName="allLogos" />
|
||||
<SplashScreen Image="images\splashscreen.png" />
|
||||
|
||||
</VisualElements>
|
||||
</Application>
|
||||
</Applications>
|
||||
|
||||
<Capabilities>
|
||||
<Capability Name="internetClient" />
|
||||
</Capabilities>
|
||||
|
||||
</Package>
|
||||
Загрузка…
Ссылка в новой задаче