Quantcast
Channel: Telerik Blogs
Viewing all 4135 articles
Browse latest View live

Telerik Kendo UI Q3 2015 Available Now

$
0
0
Read on to learn ​about the third major release of Kendo UI for 2015.

New technologies have always been ​a disrupting factor for industries and companies of any size, from boutique shops to SMBs and ​large enterprises. Often, they ​emerge to redefine the big players on the market. In such a dynamic and ever-changing environment, it is important to be a strong proponent of modernization and adoption of modern standards​​ and  flexible enough to embrace the new. At same time, you must be able to ​retain your position and strengths ​regardless of your size, the complexity of your ​internal infrastructure and processes, and market dependencies.

The same applies for the software product development, with Kendo UI ​being a concrete example.

Officially born in November 2011, Kendo UI was created with ​a single important objective:

To give web developers everything they need to build modern applications for any form factor or target device with HTML, JavaScript and CSS.

After almost four years of growth and evolution, it has come a long way and turned into the premium JavaScript UI framework for ​creating modern web experiences, as well as the de facto standard for web development.

And even though the product matured a lot and ​has continued to live up to its promise, we don't ​intend to let it rest on its laurels. On the contrary, with ​its Q3'15 release, we take on new ​technology ​standards and trends (Web Components, Angular 2, Spreadsheet-like experiences), making Kendo UI advance and excel even further going in 2016 and beyond.

Support for Web Components and Angular 2.0 (Preview)

There are two new ​waves on the ​World Wide Web, which progressively gain more popularity and followers: the new major version of Angular (2.0) and the Web Components specification. While both are still in early Beta or Preview stage, we believe that they will gradually be adopted by web developers, defining new trends and standards for developing web components going forward.

With Q3 Kendo UI ships early Preview support for the new Angular 2 version and an experimental implementation of the Web Components specification. Remaining true to our slogan to ​provide the best-of-breed tooling for modern development with HTML and JavaScript, our product embraces these emerging technologies and leads the way toward modern and better performing responsive web apps. 

  KendokaheartAngular  ANDWebComponents

In this Beta version Kendo UI widgets can be instantiated as custom elements (in accordance with the Web Components standard), and this can be coupled with the Angular 2.0 data binding available in the up-to-date version of this major update of the Angular framework.

Angular2_WebComponents

See Demos

Spreadsheet (Beta)

Q3 also marks the launch of a public Beta of our new Spreadsheet widget, as we identified there's a common need for it in various web app scenarios, with no suitable solution available on the market to-date. The goal of this enterprise-grade widget is to fulfill this need in the best possible and optimal way, when ​used in web context.

The Spreadsheet brings Excel or Google sheet-like experiences to your web applications, without writing a single line of code. ​You can integrate spreadsheet-like behaviors and UI interfaces, ​with which your users are familiar, right into your apps, accessible online.


The public Beta preview of the Kendo UI Spreadsheet supports the following features:

  •  Formulas
  • Filtering
  • Sorting
  • Data load/save from JSON via API methods
  • Client Export to Excel
  • Formatting
  • Keyboard Navigation & Selection
  • Editing
  • Visual Styling
  • Scrolling and Frozen panes
  • DataSource Data Binding (applicable for grid-like ‘edit all rows’ scenarios)
  •  Data Entry validation/error handling
Spreadsheet

See Demos

For the official release, we have plans for mobile support, as well as other features and improvements which I'll refrain from disclosing for now.

Special ​thanks to all people who expressed interest in joining our early adopter program for the Spreadsheet (by ​sending email to SpreadsheetFeedback@telerik.com). Now is your chance to get your hands on the Beta Preview, and share your feedback about it using our forums and support system, or ​suggest additional functionality you would like added in future versions by making submissions on our feedback portal.

App Templates and Visual Studio Integration

In this release, we are introducing scaffolding capabilities for Kendo UI Grid, Chart and Scheduler widgets within Visual Studio, inside of ASP.NET MVC projects. You’ll be able to connect these UI components, when placed inside MVC views, with your model and the respective controller logic via point-and-click designer inside Visual Studio.

This saves you writing the data plumbing code manually, and having it generated automatically ​increases your productivity.

Furthermore, we are shipping two app templates (navigation + grid and menu) as part of the product distribution, which saves time and jump-starts your development by providing predefined ​templates for common app scenarios. You can find these app templates in the /apptemplates folder of the Kendo UI distribution.

You can expect additional templates as well as Visual Studio integration for these (making them Project Templates within Visual Studio), with the upcoming Kendo UI releases.

Navigation
AppTemplate_Navigation

Grid and Menu (Responsive)
AppTemplate_GridAndMenu

DataViz Features and Nova Theme

This installment brings the long-anticipated chart scrolling and pan/zoom feature right into your hands. The functionality is supported on desktop and mobile devices (via SHIFT + mouse region selection, or pinch gesture), giving you a convenient way to interact with the Chart and navigate or focus on specific graph areas for which you need more details.

Chart-Zoom-Cursor

Chart_Zoom

In addition, the Gantt widget ​has been enriched with features ​such as task templates (for defining custom layout/content for tasks) and column resizing, and its UI is now responsive to various screen sizes, automatically adapting views and content to the target screen or device.

Gantt_TaskTemplates

The Nova theme introduced in the Q2 release for our mobile widgets is now extended to support our Web and DataViz widgets, as well. This brings unified styling and slick look-and-feel across all UI components, following the trends for modern UX and interaction.

Nova_Web

Bootstrap Theme Converter

In Q3, we are providing the option to import styles from any Bootstrap theme (standard or custom) and generate the corresponding css definitions for Kendo UI widgets derived from the imported theme. In this way, you can blend the styling between Bootstrap and Kendo UI widgets used within the same page or app, providing perfectly synced visual UI appearance to your users.

See more info in the docs

Server Wrappers

As with each Kendo UI release, all new features are included in the server-side wrappers for ASP.NET MVC, Java (JSP) and PHP to assist developers who feel more at home with server-side rather than client-side development. This means that everything listed above is directly available in Telerik UI for ASP.NET MVC, UI for JSP and UI for PHP products.

ASP.NET MVC Wrappers

Scheduler Scaffolding

This time the Scheduler joins the Grid and Chart widgets to provide auto-generated code for connecting controllers and views which host it, and feed it with data from the underlying model definitions.

MVC Scheduler Scaffolding

Private NuGet Server and Feed

With Q3​ comes the availability of a private NuGet server/feed for our UI for ASP.NET MVC product. You can access it via https://nuget.telerik.com/nuget by referencing this ​URL as a new package source inside of a Visual Studio project. Note that access to the server is granted after providing your Telerik account credentials.

NuGet_Server

​So, you can reference, download and extract UI for ASP.NET MVC via its NuGet package directly from Visual Studio, without having to visit www.telerik.com and download it from your Telerik account. Version upgrades are supported as well.  

Note that NuGet feed for Kendo UI Professional is also available for people who prefer to use this package manager within Visual Studio as opposed to Bower, or other popular package managers for JavaScript libraries.

Integration with Telerik Document Processing Library

The ASP.NET MVC server wrapper of the new Spreadsheet component depicted above features inherent integration with the Excel processing engine (RadSpreadProcessing) of the Telerik Document Processing Library (.NET-based library). In this way, you'll be able to specify an Excel file, import its content in the Spreadsheet, view and modify its data, then export it back without any extra coding.

Furthermore, the DPL library ​is shipped as part of the UI for ASP.NET MVC distribution; hence, you’ll be able to ​put into practice its document processing capabilities right within your MVC projects.

ASP.NET vNext Support

To-date we support the latest Beta7 version of ASP.NET vNext with our Telerik UI for ASP.NET MVC Beta, enabling cross-platform web development on Windows, Mac and Linux. Moreover, we are the first software vendor to provide support for the new major version of the Microsoft .NET framework (see this blog for details).

Going forward, we are working in-line with MS and plan to announce official support for the RC and RTM versions of .NET 5 shortly after they come out in the end of 2015 and early 2016, respectively.

What Else?

We've only highlighted major features and functionality available in this year’s ​Q3 release of Kendo UI​ in this post. For a detailed list of everything new, I recommend you review the official release log and explore the online demos and documentation, available at your disposal.

​Final important detail for this release is that we are stopping support for IE7 (which presently ​accounts for less than 3% of the IE browser usage), hence supported versions from now forth are IE 8+. 

Release Webinar

Our Kendo UI Webinar presenting everything new in Q3 2015 will be held in early November. Stand by for the official announcement ​with the exact date and registration information. The webinar will be hosted by the well-known smart guys from our DevRel team.

Quick Links

​I know you are eager to explore what's described above, so without further ado, ​follow the links to the official demos, documentation and release notes for Kendo UI | UI for ASP.NET MVC | UI for JSP | UI for PHP.
Trial Downloads > Kendo UI | MVC | JSP | PHP.  

Got Feedback?

As a client-driven company, our main objective is to deliver products and tools ​that optimize the time for building apps and solutions from start to finish. ​We listen carefully to your feedback to identify areas in which we can improve and excel our current offerings. I’ll be glad to hear your input and thoughts about this release in the comments section below, and suggestions for new functionality, which you can post ​to our official feedback portal.

BlogBanner_KendoUI

Q3 2015 Official Release for WPF and Silverlight controls

$
0
0

We are happy to announce the arrival of the latest Telerik WPF and Silverlight components in the last major release for this year—Q3 2015. A detailed list of all new features can be found in our What’s New sections for WPF and Silverlight. All other details are included in our thorough release notes here for WPF and here for Silverlight.

New Controls

DesktopAlert (Official)

RadDesktopAlert for WPF will display a small pop-up window on the desktop to notify the user that a specific event in the application has occurred.

TimeSpanPicker (Beta)

The new RadTimeSpanPicker for WPF enables your end users to easily pick timespan values in desktop applications. The control provides full control over time and duration in any desktop app.

 TimeSpanPicker_screenshot2

New Features

All Controls

Multiple private methods of QueryableCollectionView have been updated to protected in order to support inheritance.

DataServiceDataSource

Support for NuGet package which targets OData v4. Telerik.Windows.Controls.DataServices60 assembly is built against OData v4 corresponding binary—Microsoft.Data.Services.Client. Its version is 6.13.0 and all a customer needs to do is to update the references to be the same latest version of the OData assemblies.

ImageEditor

Introduced support for GIF and TIFF import/export and ICO import.

PdfProcessing

Introduced API for exporting PDF documents to plain text.

RibbonView for WPF

Now RadRibbonView supports keyboard navigation where the active element is highlighted once the KeyTips are activated. This feature allows users to navigate through all items inside the RadRibbonView simply by using the ArrowKeys (Left/Right/Top/Down). Users also can execute the action associated with the element which is currently focused by using the Space/Enter keys.   

 Ribbon_screenshot

TreeView

Implemented Multiple Selection mode which is consistent with the same mode in RadListBox, RadGridView, etc. Multiple Selection refers to Selecting/Deselecting items with a single ​mouse click or a single space key press. Until Q3 2015 Extended and Multiple Selection had the same behavior.

WordsProcessing for WPF

RTF Format Provider: Implemented omitting of color definitions in the color table, if a color is set to "auto" or "transparent."

HTML Format Provider: Introduced support for downloading image data only on demand when importing an image with URI source.

You can download the latest bits for WPF and Silverlight and see everything by yourselves. You can enjoy our WPF and Silverlight demos and share your thoughts through our Forums or our Ideas & Feedback portal

Gauges and AutoCompleteTextView Beta plus more in UI for iOS

$
0
0
The third major release of UI for iOS is already here, and as always it's packed and stacked with great features following your requests and feedback. The DataForm becomes official, and we introduce two brand new controls​—Gauges and AutoCompleteTextView (Beta). The Chart also gets three highly requested features added​—namely, the DateTime Categorical and the Logarithmic ax​is as well as Range Bar/Column chart type. Last, but not least, you will be happy to hear that we introduce support for Swift 2.0, while keeping our iOS7 support until Q1 2016 inclusive. Without further preamble, let’s take a deep dive into what’s new.

Gauges

The Linear and Radial Gauges for iOS are a great way to illustrate the magnitude of a value in a given range of upper and lower bounds. This could be speed, distance, temperature, progress of a process, matter saturation or other everyday-life and industrial values. Here are the features you can find in the component:

Visually Stunning Gauges for iOS

Limitless Styling Customizations

You can customize every aspect of the Gauges’ look and feel thanks to the carefully designed API. Starting from the needle, going through with the segments of the arc/line, and finishing with the ticks and labels, you can create a design that will match every application’s look and feel.

Animations

The Gauges API enables easy-to-use animations, allowing you to get a smooth transition effect when going from one value to another. 

Gauges with Animations for iOS



Interactions

What would a gauge be if it’s only a static representation of the data and out of your control​? With Gauges for iOS you can be in control of what the gauge’s value should be. Just swipe your finger on top of the linear or radial gauge to change the value, it’s that easy.

Gauges with Interactions for iOS

AutoCompleteTextView (Beta)

Typing can be a tedious operation, especially on a mobile device. With AutoCompleteTextView you can save the end-users time and effort by giving them suggestions to choose from, based just on the characters they already typed. This is useful in various situations—where the end-user has to choose from a list of airports, or a list of known recipients. On top of that AutoCompleteTextView allows for choosing not just one, but several items. These items become the so-called token and enable scenarios like sending a message to multiple recipients.

AutoCompleteTextView

Filter by StartsWith or Contains

Depending on the scenario, you may want to give suggestions that starts with or contains the typed characters. With AutoCompleteTextView it’s a matter of a single property to control that behavior.

AutoCompleteTextView for iOS

Tokens Support

With AutoCompleteTextView you are allowed to search for and select several items in one control. These items appear as tokens that you can easily dismiss/deselect using their close button. The tokens also provide a convenient API for you to customize them like changing their style, adding an image, etc. The tokens are useful for selecting multiple items like tags or people.

AutoCompleteTextView with Tokens for iOS

Suggest, Append or Both

Depending on your preference, AutoCompleteTextView can only append the remainder of the suggested word without opening any popups with lists of items. Or, it can suggest you choose an item from the filtered list of items that appear. Last, but not least, it can append the remain​der of the word and open a list of suggestions at the same time.

Null-Text and Close Button

Thank to the null-text support, the end-user can easily understand what is expected from him as input. With the Close button, the end-user can easily dismiss any selected items.

AutoCompleteTextView with Close Button

DataForm - It’s Official!

The DataForm is now official and stable and you are free to use it in your AppStore apps. In addition to the stability and the numerous fixes, what’s new there? 

Different Layouts

We added support for different layouts for those of you who are not fans of the standard UITableView way of showing settings lists. Now you can:


  • Place the properties labels above the editors
    dataform-layout-top-alignment
  • Place the properties labels on the left of the editors, visually detaching these labels from the editors themselves
    dataform-layout-left-alignment
  • Set the properties labels inline
    dataform-layout-top-inline
And of course, you will still be able to use the default UITableView layout.

These new layouts will also allow you to achieve one and the same look and feel of your app on iOS and Android, as the DataForm for Android supports the same layouts.

Collapsible Groups

Sometimes, in long lists of properties the end-user can get lost. What can improve the end-user experience is groups. What can improve the end-user behavior even further is the ability to collapse and expand these groups. This way the end-user will be able to focus only on a few expanded groups, and avoid having a long long list of properties to scroll up and down.

DataForm Collapsible Groups for iOS

Chart

DateTime Category Axis

A common scenario for a financial chart is to have only the days Mon-Fri plotted on the axis (i.e. excluding the weekends). With the standard DateTime axis that we have, excluding the weekends was not possible. We got numerous requests for the feature in question though, so here it is​—a DateTime Category axis where you have control over which dates should be plotted and which not. Here is the result from excluding the weekends from the chart:

DateTime Category Axis for iOS


Logarithmic ​Axis

Some values are just not like the others—they are much bigger or much smaller, forming a logarithmic function if one decides to put them all on the same coordinate system. For such cases, the Logarithmic axis are here to help. Thanks to it, you can display values of different scale on one and the same chart without ‘shrinking’ some of the values in favor of others.

Chart Logarithmic Axis for iOS

Range Bar/Column Chart

This new chart type is useful for a number of scenarios that require a data-point consisting of two values—a minimum and a maximum. This could be the minimum/maximum temperature for a day, the speed of the WiFi, etc.

Chart Range Bar for iOS

Swift 2.0 Support in Xcode 7

Although according to TIOBE Swift is still behind Objective-C, Swift is undoubtedly the trending leader already when it comes to iOS development. Apple is betting much on it and you barely can find any new content in Objective-C. With Swift 2.0. which came with Xcode 7, there were some breaking changes in the language which ​required us to make some changes in our code base as well. The improvements are already ​in place and you will be happy to find that UI for iOS works flawlessly in Swift 2.0 and Xcode 7.

iOS7 Support 

iOS9 is now official and deployed to the end-users' devices. This next version of iOS raised a question for the UI for iOS suite though. Should we still support the iOS version we started with some time ago—iOS7. During the summer there was an open survey at our site that asked: “Which is the minimum required iOS version that you plan to support as iOS 9 becomes official. From more than 1000 respondents 34% replied that they will still bet on iOS7 as the minimum supported version. Therefore, despite the fact that globally there are only 8% left using iOS7 and previous versions, we will continue shipping an iOS7-compatible product. The last major version (and its minor updates thereafter) to support iOS7 will be Q1 201​6. 

These and more features and fixes are available in the latest Q3 2015 version of UI for iOS. Get it now [Trial|​Paid]. Check the full list of Release Notes here.

Happy coding!

What’s New in UI for Android Q3 2015

$
0
0

DataForm Out of Beta!

With Q2 2015 we introduced a new control in UI for Android called DataForm. The control, also known as PropertyGrid, is the perfect component for editing the properties of a business object during runtime. All you have to do is provide the DataForm with an entity (business object), and the control will automatically generate editors for each public member. The DataForm offers built-in editors for each of the available primitive types—numbers, strings, booleans and enumerations. With this release the DataForm is no longer in beta which means you can start incorporating it in your production apps. 

data form

One addition to the DataForm is the inclusion of a new default editor—NumberPicker. The NumberPicker is a new control that allows users to select numeric values from within a predefined range.

number picker

If you want to learn more about what additional features the DataForm offers, read this article

New Features in the ListView

One of the newest additions to the ListView is the slide layout. It is a new layout strategy that improves the experience while scrolling through the ListView items. This feature is perfect for enabling picture browsing-like experience in any Android app. The behavior of this feature closely resembles what we currently have in the SlideView control for Windows Phone. 

slide layout

SlideLayoutManager slideLayoutManager = newSlideLayoutManager(getActivity());
myListView.setLayoutManager(slideLayoutManager);

Take a look at the full code example for the SlideLayoutManager.  

Another feature we managed to include is the ability to display the ListView items in a wrapped fashion.

wrap layout

WrapLayoutManager wrapLayoutManager = newWrapLayoutManager(getActivity());
myListView.setLayoutManager(wrapLayoutManager);

Take a look at the full code example for the WrapLayoutManager.

The last addition to the ListView is ability to stick section headers to the top of the scrollable list.

sticky headers

StickyHeaderBehavior stickyHeaderBehavior = newStickyHeaderBehavior();
myListView.addBehavior(stickyHeaderBehavior);

Take a look at the full code example for the StickyHeaderBehavior.

JSON Support in DataSource

The DataSource can consume various data—from arrays with simple items and business objects, to dictionaries coming from various sources. With this release the DataSource can get its data from web services that return data in JSON format.

datasource

RadDataSource<JSONObject> data = RadDataSource.createFromJson(json_response_string);
MyAndroidDataSourceAdapter myAndroidDataSourceAdapter = newMyAndroidDataSourceAdapter(getApplicationContext(), android.R.layout.simple_list_item_1, data.view());
listView.setAdapter(myAndroidDataSourceAdapter);

The latest release is available for download. Grab the bits and let us know what you think in the comments.

banner

Telerik UI for the Universal Windows Platform is Here

$
0
0

If you have already hopped on the train of developing Windows 10 applications then you’ll definitely enjoy the news that we are introducing a new suite with the Q3 2015 release of Telerik DevCraft—UI for Universal Windows Platform (UWP).

Compatibility with the Universal Windows Platform

It is my pleasure to announce that we have extended the majority of our Windows 8.1 and Windows Phone 8.1 controls to be compatible with the latest Universal Windows Platform that is part of Windows 10. This means that you can use them for creating Windows 10 applications, share a single codebase and run on a multitude of Microsoft devices. The controls utilize the adaptive layout approach exposed by the platform. The bundle contains 20 controls, everything from the fastest ListView on the market and DataForm to data visualization controls like Chart, BulletGraph and Gauges. There's also a Map, a Calendar and a number of input pickers and navigation controls.

Here’s the full list of controls in alphabetical order.

  • AutoCompleteBox 
  • BulletGraph 
  • BusyIndicator 
  • Calendar
  • Chart 
  • DataForm 
  • DataStorage
  • Date picker
  • Expander
  • Gauge 
  • HubTile 
  • ListView 
  • Map
  • NumericBox 
  • Pagination 
  • RadialMenu 
  • RangeSlider 
  • Rating
  • SideDrawer
  • Time picker

The controls above have been bundled in a new product called “UI for Universal Windows Platform” and should not be mistaken with our existing offering “UI for Windows Universal.” 

Coming soon... DataGrid!

As you might have correctly guessed, the biggest missing piece from the list above is the DataGrid. We recognize the need for such control and the role it plays in data driven applications. That’s why we will use the upcoming months to reevaluate its design and make it more compliant with the latest mobile design guidelines. Once we do that we’ll include the control in the product bundle. Let us know which DataGrid features you consider most important in the feedback portal. This will help us better prioritize our tasks.

In the meantime, the available ListView control is a perfect substitute for similar scenarios—it can work with large sets of data, supports grouping, sorting and filtering, and offers various layout definitions and much more. 

A DataForm is Already Included

Indeed, we reworked the DataForm for Windows 8.1 and Windows Phone 8.1 to be compatible with the UWP, which means that you can use it in your Windows 10 apps. It supports inline icons in the default property editors as well.

UI for UWP DataForm

Why the Community ​Tech ​Preview (CTP) ​Label?!

The reason is that we are still polishing the controls to be even more compliant with the Universal Windows Platform. Our ultimate goal is to have the most complete and most advanced suite for Windows 10, Xbox and UWP-based IoT development on the market. The new UI bundle is suitable for testing and production purposes ​though, so we urge you to download UI for UWP by clicking on the link below, play with the bits and let us know what you think in the comments or our feedback portal. All the feedback will be highly appreciated.

Download Telerik UI for Universal Windows Platform

DataForm for Xamarin.Forms and More in UI for Xamarin

$
0
0
It’s the third major release of Telerik UI for Xamarin for this year and yes​—as always, we have a bunch of new controls for you. DataForm for Xamarin.Forms will allow you to easily create data fill-in forms from a single shared C# codebase. There are also new controls for Xamarin.iOS and Xamarin.Android​—Gauges, AutoCompleteTextView, and NumberPicker. Moreover, you will be happy to hear that Calendar and Chart for Xamarin.Forms are now supporting the Windows Universal 8.1 platform. Let’s take a closer look at what’s new.

DataForm for Xamarin.Forms

As implied above, the DataForm component for Xamarin.Forms allows you to easily create data fill-in forms, similar to the Settings lists of iOS or Android. It takes an object, and displays the properties and values of that object, allowing the end-user to edit these values. You can set the commit and validation modes, and also replace the default predefined editors with custom ones. And there you have it​—the perfect fill-in form for you. Learn more about DataForm for Xamarin.Forms at its product page.

dataform-xamarin-forms

Gauges for Xamarin.iOS

The new Gauge for Xamarin.iOS helps you visualize numeric values over a circular or a linear scale. The Gauges are a great way to illustrate the magnitude of a value in a given range of upper and lower bounds. This could speed, distance, temperature or progress of a process. For more information, you can check the Gauges for Xamarin product page.

Gauges for Xamarin.Android and Xamarin.Forms will be introduced in a future release.

Visually Stunning Gauges for iOS


AutoCompleteTextView (Beta) for Xamarin.iOS

The AutoCompleteTextView for Xamarin.iOS gives users suggestions, based on the characters they’ve already typed. This is useful in scenarios such as choosing from a list of airports or a list of countries. The control allows choosing one or multiple items. These items are called tokens and enable scenarios like sending a message to multiple recipients. For more information, check the AutoCompleteTextView for Xamarin product page.

AutoCompleteTextView for iOS

As you may expect, AutoCompleteTextView for Xamarin.Android will be shipped in a future release, followed by AutoCompleteTextView for Xamarin.Forms.

NumberPicker for Xamarin.Android

While creating the DataForm, we observed the need for a special number picker control that allows the end-user to pick a number from within a given range. So, we thought: we have the functionality developed for the DataForm, but it’s a general purpose functionality, so why don’t we extract this functionality in a separate control? And we did it, so let me introduce you to NumberPicker for Xamarin.Android:

number-picker-xamarin-android

Chart for Xamarin.iOS 

Chart for Xamarin.iOS comes with a few great, highly demanded ​features:

DateTime Category Axis

This axis comes in handy for scenarios where you want to exclude some dates from being plotted on the axis. For example, in a stock market chart you might want to exclude the weekends from the chart as there is no market data for them:

DateTime Category Axis for iOS

Logarithmic Axis

This axis allows you to plot values of different scale on the same chart, using a logarithmic function, thus keeping both the big and the small values easy to see and understand. In the case of a ‘flat’ numeric axis, you may not be able to clearly see some values if they are too small or too big. Check the example below to see how values from 1 to 10000 are nicely plotted according to a logarithmic function in a single chart:

Chart Logarithmic Axis for iOS
Range Bar/Column Chart

This new chart type is useful for a number of scenarios that require a data-point consisting of two values—a minimum and a maximum. This could be the minimum/maximum temperature for a day, the speed of the WiFi, etc.

Chart Range Bar for iOS
You can check the complete list of Release Notes here.

Eager to try the new stuff? Get a free trial now!

Happy coding!

Using Kendo UI in a Meteor Application

$
0
0

Using Kendo UI in a Meteor Application

By combining Kendo UI’s rich user interface widgets with the Meteor JS app platform, you gain a robust stack for building a complete JS app quickly. But, you might not know how to use Kendo UI with Meteor. So, in this article, I will lay out the necessary steps for using Kendo UI (Core or Pro) within a Meteor application.

If you need to get up to speed (i.e. installing) on Meteor, in the context of Kendo UI, have a look at my “Build & Deploy Rich UI JavaScript Apps, FAST!” article.

The instructions that follow for getting Kendo UI to work with Meteor differs for Kendo UI Core v.s. Kendo UI Professional. Thus, this article is broken down into two different sets of instructions. First we’ll look at adding Kendo UI Core to Meteor and then adding Kendo UI Professional to Meteor.

Adding Kendo UI Core to Meteor

Step 1. Create Meteor App

Create a Meteor application by running:

$ meteor create meteor+kendo-core

This will create a folder (i.e. meteor+kendo-core) with the following sub-folders and files on your local system:

├── .meteor├── meteor+kendo-core.css├── meteor+kendo-core.html└── meteor+kendo-core.js

Then change directories (i.e. $ cd meteor+kendo-core) into the created meteor application directory (i.e. meteor+kendo-core) and run:

$ meteor

You should now have a running meteor application at localhost:3000.

Step 2. Add Kendo UI Atmosphere Package

Go to atmosphere and select which theme you would like to install.

Screenshot 2015-09-16 11.12.29 

Let’s assume you want to install the default theme.

Screenshot 2015-09-16 11.41.00

From the command line, in the meteor+kendo-core directory, run the following command:

$ meteor add telerik:kendo-ui-core-default-theme

This will install the telerik:kendo-ui-core-default-theme package locally.

Step 3. Use Kendo UI

Use Kendo UI Core in your application.

Open meteor+kendo-core.css and remove everything in this file. Paste in the following and save the file:

.demo-sectionp{
    margin:0030px;
    line-height: 50px;
}.demo-sectionp.k-button{
    margin:010px00;
}.k-primary{
    min-width: 150px;
}

Open meteor+kendo-core.html and remove everything in this file. Paste in the following and save the file:

<head><title>meteor+kendo-core</title></head><body><divclass="demo-section k-header"><div><h4>Basic Button</h4><p><buttonid="primaryTextButton"class="k-primary">Primary Button</button><buttonid="textButton">Button</button></p></div><div><h4>Disabled buttons</h4><p><aid="primaryDisabledButton"class="k-primary">Disabled Primary Button</a><aid="disabledButton">Disabled Button</a></p></div><div><h4>Buttons with icons</h4><p><aid="iconTextButton">Filter</a><aid="kendoIconTextButton">Clear Filter</a><emid="iconButton"><spanclass="k-sprite">Refresh</span></em></p></div></div></body>

Open meteor+kendo-core.js and remove everything in this file. Paste in the following and save the file:

if(Meteor.isClient) {
    $(document).ready(function() {
        $("#primaryTextButton").kendoButton();

        $("#textButton").kendoButton();

        $("#primaryDisabledButton").kendoButton({
            enable: false
        });

        $("#disabledButton").kendoButton({
            enable: false
        });

        $("#iconTextButton").kendoButton({
            spriteCssClass: "k-icon k-i-funnel"
        });

        $("#kendoIconTextButton").kendoButton({
            icon: "funnel-clear"
        });

        $("#iconButton").kendoButton({
            spriteCssClass: "k-icon k-i-refresh"
        });
    });
}

if(Meteor.isServer) {
    Meteor.startup(function() {
        // code to run on server at startup
    });
}

You should now see a Kendo UI Core widget in the page at localhost:3000.

Adding Kendo UI Professional to Meteor

If you are coding along make sure you first kill the previous running Meteor application. We’ll be creating a new Meteor application in this section of the article.

Step 1. Create Meteor App

Create a Meteor application by running:

$ meteor create meteor+kendo-pro

This will create a folder (i.e. meteor+kendo-pro) with the following sub-folders and files on your local system:

├── .meteor├── meteor+kendo-pro.css├── meteor+kendo-pro.html└── meteor+kendo-pro.js

Then, change directories (i.e. $ cd meteor+kendo-pro) into the created meteor application directory (i.e. meteor+kendo-pro) and run:

$ meteor

You should now have a running meteor application at localhost:3000.

Step 2. Create Custom Package Directory & package.js File

In the new meteor application folder create a folder called packages (might already be there if you are trying to add Kendo UI to an existing project). Inside of the packages folder add a a folder called kendo-ui-pro. Inside of the kendo-ui-pro folder add a file called package.js (see package.js docs for additional details).

├── meteor+kendo-pro.css├── meteor+kendo-pro.html├── meteor+kendo-pro.js└── packages
    └── kendo-ui-pro
        └── package.js

Step 3. Add Kendo UI Source to Package

Grab the Kendo UI Professional source code by logging into your Telerik account and downloading the source. Then, place the Kendo UI Professional source code inside of the kendo-ui-pro folder.

Below is a directory tree of what this will look like depending on the Kendo UI Professional source code version used.

├── meteor+kendo-pro.css├── meteor+kendo-pro.html├── meteor+kendo-pro.js└── packages
    └── kendo-ui-pro
        ├── package.js└── telerik.kendoui.professional.2015.2.814.commercial├── README
            ├── changelog.html├── examples
            ├── js
            ├── license-agreements
            ├── src
            ├── styles
            ├── typescript
            └── vsdoc

Step 4. Create/Define Custom Package

Open the package.js file you created and add the following JavaScript. Note that the package.js file defines the correct paths to the Kendo UI Professional files.

Package.describe({
  name: 'kendo-ui-pro',
  version: '2015.2.814'
});

Package.onUse(function(api) {
  api.versionsFrom('1.1.0.3'); //meteor dependencyapi.use('jquery', 'client'); //jQuery dependency

  //Then add this packages files...
  
  //jsapi.add_files('telerik.kendoui.professional.2015.2.814.commercial/src/js/kendo.all.js', 'client');

  //css web and dataVizapi.add_files('telerik.kendoui.professional.2015.2.814.commercial/styles/kendo.common.min.css', 'client');
  api.add_files('telerik.kendoui.professional.2015.2.814.commercial/styles/kendo.default.min.css', 'client');

  //mobile cssapi.add_files('telerik.kendoui.professional.2015.2.814.commercial/src/styles/mobile/kendo.mobile.all.css', 'client');

  //global CSS fontsapi.add_files('telerik.kendoui.professional.2015.2.814.commercial/styles/images/kendoui.ttf', 'client');
  api.add_files('telerik.kendoui.professional.2015.2.814.commercial/styles/images/kendoui.woff', 'client');
  api.add_files('telerik.kendoui.professional.2015.2.814.commercial/src/styles/mobile/images/kendoui.woff', 'client');
  api.add_files('telerik.kendoui.professional.2015.2.814.commercial/src/styles/mobile/images/kendoui.ttf', 'client');

  //global CSS  sprites imagesapi.add_files('telerik.kendoui.professional.2015.2.814.commercial/styles/images/back.png', 'client');
  api.add_files('telerik.kendoui.professional.2015.2.814.commercial/styles/images/kendoui.svg', 'client');
  api.add_files('telerik.kendoui.professional.2015.2.814.commercial/styles/images/wp8_icons.png', 'client');
  api.add_files('telerik.kendoui.professional.2015.2.814.commercial/styles/images/wp8_inverseicons.png', 'client');

  //global CSS texturesapi.add_files('telerik.kendoui.professional.2015.2.814.commercial/styles/textures/brushed-metal.png', 'client');
  api.add_files('telerik.kendoui.professional.2015.2.814.commercial/styles/textures/dots1.png', 'client');
  api.add_files('telerik.kendoui.professional.2015.2.814.commercial/styles/textures/dots2.png', 'client');
  api.add_files('telerik.kendoui.professional.2015.2.814.commercial/styles/textures/dots3.png', 'client');
  api.add_files('telerik.kendoui.professional.2015.2.814.commercial/styles/textures/dots4.png', 'client');
  api.add_files('telerik.kendoui.professional.2015.2.814.commercial/styles/textures/dots5.png', 'client');
  api.add_files('telerik.kendoui.professional.2015.2.814.commercial/styles/textures/dots6.png', 'client');
  api.add_files('telerik.kendoui.professional.2015.2.814.commercial/styles/textures/dots7.png', 'client');
  api.add_files('telerik.kendoui.professional.2015.2.814.commercial/styles/textures/dots8.png', 'client');
  api.add_files('telerik.kendoui.professional.2015.2.814.commercial/styles/textures/dots9.png', 'client');
  api.add_files('telerik.kendoui.professional.2015.2.814.commercial/styles/textures/dots10.png', 'client');
  api.add_files('telerik.kendoui.professional.2015.2.814.commercial/styles/textures/dots11.png', 'client');
  api.add_files('telerik.kendoui.professional.2015.2.814.commercial/styles/textures/dots12.png', 'client');
  api.add_files('telerik.kendoui.professional.2015.2.814.commercial/styles/textures/dots13.png', 'client');
  api.add_files('telerik.kendoui.professional.2015.2.814.commercial/styles/textures/glass-lighter.png', 'client');
  api.add_files('telerik.kendoui.professional.2015.2.814.commercial/styles/textures/glass.png', 'client');
  api.add_files('telerik.kendoui.professional.2015.2.814.commercial/styles/textures/highlight.png', 'client');
  api.add_files('telerik.kendoui.professional.2015.2.814.commercial/styles/textures/hsv-gradient.png', 'client');
  api.add_files('telerik.kendoui.professional.2015.2.814.commercial/styles/textures/hue.png', 'client');
  api.add_files('telerik.kendoui.professional.2015.2.814.commercial/styles/textures/leather1.png', 'client');
  api.add_files('telerik.kendoui.professional.2015.2.814.commercial/styles/textures/leather2.png', 'client');
  api.add_files('telerik.kendoui.professional.2015.2.814.commercial/styles/textures/noise.png', 'client');
  api.add_files('telerik.kendoui.professional.2015.2.814.commercial/styles/textures/stripe1.png', 'client');
  api.add_files('telerik.kendoui.professional.2015.2.814.commercial/styles/textures/stripe2.png', 'client');
  api.add_files('telerik.kendoui.professional.2015.2.814.commercial/styles/textures/stripe3.png', 'client');
  api.add_files('telerik.kendoui.professional.2015.2.814.commercial/styles/textures/stripe4.png', 'client');
  api.add_files('telerik.kendoui.professional.2015.2.814.commercial/styles/textures/stripe5.png', 'client');
  api.add_files('telerik.kendoui.professional.2015.2.814.commercial/styles/textures/stripe6.png', 'client');
  api.add_files('telerik.kendoui.professional.2015.2.814.commercial/styles/textures/transparency.png', 'client');
  api.add_files('telerik.kendoui.professional.2015.2.814.commercial/styles/textures/transtexture.png', 'client');

  //theme imagesapi.add_files('telerik.kendoui.professional.2015.2.814.commercial/styles/Default/editor.png', 'client');
  api.add_files('telerik.kendoui.professional.2015.2.814.commercial/styles/Default/imagebrowser.png', 'client');
  api.add_files('telerik.kendoui.professional.2015.2.814.commercial/styles/Default/indeterminate.gif', 'client');
  api.add_files('telerik.kendoui.professional.2015.2.814.commercial/styles/Default/loading-image.gif', 'client');
  api.add_files('telerik.kendoui.professional.2015.2.814.commercial/styles/Default/loading.gif', 'client');
  api.add_files('telerik.kendoui.professional.2015.2.814.commercial/styles/Default/loading_2x.gif', 'client');
  api.add_files('telerik.kendoui.professional.2015.2.814.commercial/styles/Default/slider-h.gif', 'client');
  api.add_files('telerik.kendoui.professional.2015.2.814.commercial/styles/Default/slider-v.gif', 'client');
  api.add_files('telerik.kendoui.professional.2015.2.814.commercial/styles/Default/sprite.png', 'client');
  api.add_files('telerik.kendoui.professional.2015.2.814.commercial/styles/Default/sprite_2x.png', 'client');
  api.add_files('telerik.kendoui.professional.2015.2.814.commercial/styles/Default/sprite_kpi.png', 'client');
  api.add_files('telerik.kendoui.professional.2015.2.814.commercial/styles/Default/sprite_kpi_2x.png', 'client');
});

Step 5. Add Kendo UI Pro Package to App

When all the paths are correct, from your meteor project directory, run the following meteor command:

$ meteor add kendo-ui-pro

Step 6. Use Kendo UI Pro

Use Kendo UI Professional in your application.

Open meteor+kendo-pro.css and remove everything in this file. Paste in the following and save the file:

.customer-photo{
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-size:32px35px;
    background-position: center center;
    vertical-align: middle;
    line-height: 32px;
    box-shadow: inset 001px#999, inset 0010pxrgba(0,0,0,.2);
    margin-left: 5px;
}.customer-name{
    display: inline-block;
    vertical-align: middle;
    line-height: 32px;
    padding-left: 3px;
}

Open meteor+kendo-pro.html and remove everything in this file. Paste in the following and save the file:

<head><title>meteor+kendo-pro</title></head><body><divid="grid"></div></body>

Open meteor+kendo-pro.js and remove everything in this file. Paste in the following and save the file:

if (Meteor.isClient) {
        $(document).ready(function () {
            $("#grid").kendoGrid({
                dataSource: {
                    type: "odata",
                    transport: {
                        read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                    },
                    pageSize: 20
                },
                height: 550,
                groupable: true,
                sortable: true,
                pageable: {
                    refresh: true,
                    pageSizes: true,
                    buttonCount: 5
                },
                columns: [{
                    template: "<div class='customer-photo'" +
                                    "style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
                                "<div class='customer-name'>#: ContactName #</div>",
                    field: "ContactName",
                    title: "Contact Name",
                    width: 240
                }, {
                    field: "ContactTitle",
                    title: "Contact Title"
                }, {
                    field: "CompanyName",
                    title: "Company Name"
                }, {
                    field: "Country",
                    width: 150
                }]
            });
        });
}

if (Meteor.isServer) {
    Meteor.startup(function() {
        // code to run on server at startup
    });
}

You should now see a Kendo UI ​Professional widget in the page at localhost:3000.

The combination of Meteor and Kendo UI Core gives any developer all the required tools to build a modern web application for free (professional hosting excluded). When that application needs professional UI widgets (grids, editors, etc.), simply remove the Kendo UI core package from Atmosphere and add the Kendo UI professional code by creating a custom local package. Now go build an app… fast!

Getting Started with Telerik Report Server

$
0
0

Sam Basu guides us through a hands-on guide on getting started with Telerik Report Server.

Reporting is an essential part of many Enterprise workflows. With today's mobile app lifestyle and cloud services, you may think data is ubiquitous for consumption. That's until the C-level executives or Sales folks in your company demand to see fancy weekly reports generated out of data, sitting either on-premises or in cloud storage. On top of stringent formatting requirements, they demand someplace to manage reports behind a safe authentication and the ability to view reports from any device. Don't bang your head against the wall. Bite the bullet and deliver what's needed. The right tools will make all the difference.

Enter Telerik Report Server—your one-stop shop for professional report management. This article unpacks Report Server for you. Let's start!

Setting Up

Report Server comes bundled up as a lightweight web application that you get to download and run on your local web server.

First, head over to the download page and grab the installer, by clicking on the big red button. Alternatively, if you already have a Telerik DevCraft subscription, Report Server can also be downloaded from your Telerik Control Panel. This may also be a good time to check ​the System Requirements before proceeding.

RSDownload

Once you begin installing Report Server, make note of where you unpack the bits. This is the file location where your Report Server installation will run from.

InstallationFolder

Sit back and let the installer do its thing. Notice how it is trying to configure your local IIS in the process​—you can manually change configurations later, but Report Server offers you a nice default setup.

Installer

When the install finishes, take a pe​ek into the files that come with Report Server. As you can see, they include the assets to run a web application​—you may look, but you don’t need to change anything.

FileInstall1

FileInstall2

Configuration

Next up, open up your local IIS Manager to see what’s been done for you (the screenshot below shows IIS 8 on my Windows 10 machine).

Report Server comes in the form of a simple web application and it has been pre-configured to run as a separate website Telerik Report Server on its own Application Pool.


ReportServerinIIS

Don’t like a configuration? Simply select Edit Site | Basic Settings from the IIS Manager and change the settings.

IISSettings

Check your Site Bindings in the IIS Manager. Report Server simply runs on a open HTTP port like 80 or 83. Click on Browse:xx or point your browser to http://localhost:<port#> and Report Server comes up.

Before you rejoice however, you need to realize the first time you run Report Server is of pivotal importance. That’s because you get to set up the Admin user the first time around​—this user can later add other Admins or regular users. So, make note of the credentials as you register the Admin user.


AdminRegister

Once you have set yourself up as the Admin, you are all set to run Report Server. Pat yourself on the back—you got everything up and running like a champ!

Dashboard

Everyday Usage

BUILD YOUR REPOSITORY

Report Server is meant to be hosted via an on-premise web server or in the cloud. It starts out running locally in your machine’s IIS, ready for you to push to a production URL for access. Before you do so, however, it may be worth trying out a few everyday workings of the Report Server from the user’s standpoint.

In the standalone Report Designer that comes with Report Server, serialization/deserialization of the report definition is done with a specific brand of XML. Reports have a .TRDX extension. If you already have Telerik Reporting installed, you’ll find a lot of sample .TRDX reports in the corresponding Examples folder, which offer an easy way to play with Report Server. Alternatively, once you have Report Server running, just hit the New Report button from the dashboard​—this downloads the Report Designer and you can create reports from scratch.

SampleReports

Click the 
Upload link from the Dashboard menu, pick a .TRDX report and off you go.

UploadReport

Once Report Server has picked up your report, it shows up as a line item in its report collection. Once selected, several menu options light up.


BarcodeReport

REPORT VIEWING

Go ahead and hit the Preview link, or just double click on the report. Report Server opens up a browser window or tab, and shows you a preview of the report. The report view is complete with readability, navigation, download and print options.

BarcodeReportView

Now, if you were the regular user of this Report Server solution, you would want the flexibility to open up reports from any device—including mobile ones, right? Go ahead and resize your browser window to simulate smaller devices, like tablets or smartphones. As the screen real estate shrinks, you’ll see Report Server adjusts the report layout continuously. A Hamburger menu even shows up when the screen is too small for the standard navigation. The responsive design of these reports means that you can deliver your reports to any device!

BarcodeReportMobile

REPORT MANAGEMENT

Want to edit a report, instead of just viewing it? No problem—simply select the report and hit the Edit link on the Dashboard. The standalone Telerik Report Designer will download if you don't have it and then open up in Desktop mode. The Report Designer offers the user a rich WYSIWYG editor to customize existing reports with data binding and a variety of formatting options.

BarcodeReportDesigner

Once you get the hang of it, it’s easy to play around with reports in Report Server—simply upload and deliver. Alternatively, with the stand-alone desktop Report Designer which is hooked up to your Report Server, users can simply add/edit reports locally and changes show up server-side automatically upon saving the reports. The user interface is simple enough for even your non-technical users to be able to store and manage reports without difficulty.

MultipleReports

OlympicsReport

SCHEDULING

Now, having a report management system is nice, but you still get constant demands on scheduled report delivery. Your sales folks want daily trip reports or your CEO wants a weekly summary. Report Server helps you automate all such demands through robust Scheduling options.

Simply select a report and choose the Scheduling option from the top menu.


NewScheduleTask

You get to set up a scheduling Task to deliver the chosen report in a variety of document formats.

ScheduledReportFormats

You also get a wide array of choices for task recurrence for the chosen report. Keep in mind, each report is driven by its backend data source and the task runs at scheduled times. So your users get a fresh report delivered to them that pulls in the latest data.

RecurrenceOptions

You get full granularity to control the occurrence of the scheduling task. Flexibility FTW!

MoreRecurrenceOptions

Once you set up a task, you can see it from your Reports or Schedules dashboard.

ScheduledTask

Now, who gets these scheduled reports? That’s something you get to decide through Subscribers.

Subscribers

Subscribers can be regular Report Server users or external folks with an email address. You get to control mail and SMTP settings from Configuration options.

MailConfig

Flexibility

Vanilla report storage and management can be no fun. You will be faced with the challenges of grouping reports, streamlining storage and managing users, along with fine-grained control to reports. Fortunately, Report Server offers a wide array of flexibility options.

A decision you have to make up-front is where you want Report Server to store all its reports and metadata for management. Report Server allows easy Storage Configuration to help you choose where you want your storage of reports. Your options are the local file system or Microsoft SQL Server and Redis through data connections. There is no right answer here—it all depends on your needs.

StorageOptions

As you start dealing with lots and lots of reports, you’ll invariably want to group reports into logical buckets. This allows for better organization and controlling access to report groups by individual or by collections of users. Report Server allows you to define any number of Categories and manage new/existing reports into respective categories.

Categories

The very first user (likely yourself) that you set up in Report Server is the Super User, and beyond that you get robust User Management. Simply navigate to User Management and select an existing user to see the list of options. You get fine-grained control over user permissions towards access control on a specific report or a collection of reports through Categories.

UserManagement

As you set up new users of your Report Server, you can grant them specific User Roles and then control the permissions on a per report or category basis. You also can set up System Administrators, who can manage other users, or Data Administrators, who control storage configuration, along with who gets read/write access to reports.

NewUser

Report Server, out of the box, supports the standard Forms Authentication. But what if your users do not like to remember one more User ID and Password? Relax. You can leverage the WS Federation standard to authenticate your users. This immediately opens up doors for Active Directory or Azure AD authentication. Simply trust the established Identity Provider to get you a token once the user is authenticated, and then proceed with regular Report Server access rights.

Here’s how you set up WS Federation authentication in Report Server. Simply head over to Configuration | Authentication and provide basic information, like WS Metadata URIRelaying Party ID (your Report Server installation), the Authority URL that issues the token and the unique Client ID.

WSFederation

Once set up correctly, your users will have the option of signing in through AD credentials, on top of the regular Report Server authentication. It’s ok to rejoice.

ADAuth

Conclusion

Report storage and management is tricky business for most enterprises. Sure you can roll out a home-grown solution, but the enormous efforts needed to build ​high-performing, responsive and robust management features far outweigh the benefits.

Report Server comes with everything you expect right out of the box. You get to manage storage, retrieval and delivery of reports from any device the users bring to the table. And you also get the flexibility to fine-tune report categorization and storage configurations, on top of robust user management. You’ll love having Report Server on your side.


Schneider Electric Gets to Market 50% faster with Telerik

$
0
0

Based on information from Telerik Analytics, Schneider Electric's software development team embarked on a refresh of their product's user interface. Here is the story of how they successfully created an optimal user experience for their customers.

Scott Kingsley is the Software Development Manager for Schneider Electric’s Data Center Infrastructure Management (DCIM), a solution that is widely used by facilities and IT managers to analyze, operate, plan and optimize their data centers. He wanted to improve the experience of DCIM’s users, but at first his team lacked the data to understand ​the best way to do ​it.

Kingsley’s team used Telerik Analytics for about three years to gain an understanding of how data center managers use its DCIM solution. Based on the usage insights they gathered, the team then embarked on a refresh of the application’s user interface (UI) to enhance the user experience.

Usage insights provided by Telerik Analytics help determine the value of each feature, and how much screen real estate to devote to that feature on the UI. As Kingsley’s software development team worked on their UI refresh, Kingsley wanted to use a prepackaged widget library and decided to leverage the power of Kendo UI to create an optimal user experience.

Since using the Kendo UI framework to revamp the UI, Schneider Electric’s data center infrastructure management application has gained numerous recognitions from industry experts. Recently, in Gartner's first-ever Magic Quadrant for DCIM tools, Schneider Electric was named as a Leader in the category. 


“I attribute our success with the solution in large part to our use of Telerik solutions,” said Kingsley.

Read the whole story here.



 Learn more about our products:

Report Scheduling and AD FS Support in Telerik Report Server

$
0
0
Have you tried the latest version of the Telerik Report Server, which has been available for a week now? If not, go ahead, this is the link. For help getting started, you can also check out our helpful guide.

What’s in the Box?

This release is a big milestone for us, as we’ve added report scheduling to the Telerik Report Server. This is one of the most requested features and we’re very happy we could deliver it in such a short timeframe. We also added capabilities to the report storage and management along with user management, which lets you use active directory credentials to log in. All together this makes access to the reports far more seamless and secure for those that need them, whether in your company or for your clients. Don’t forget we’ve built this with a responsive web design, so you can load and manage reports from any device. Find out more on what’s new here.

Report Scheduling

Yes, it’s true; you can now schedule reports to run automatically. You can even add an unlimited number of recipients to each scheduled task, and they’ll receive the report right in their mailbox.

Setting a scheduled task is very easy, and once set you have a few options to track it. You can create a task while in the reports view for a selected report, or go to the scheduling module and start from there.

For a new task, you need to specify:

  • The report that will run
  • The format it’ll be saved in: PDF, Excel, Word, TIFF, RTF, CSV, PowerPoint, Web Archive, XPS
  • The date the task will run
  • The recurrence, defined by setting the repeat period to daily, weekly, monthly, yearly or once (and when the task recurrence should end)

Add new scheduled task in Telerik Report Server

You can monitor a task you’ve created in its activity panel. There you’ll see when the task runs, along with the documents created as a result and when they were created. The generated report documents are saved in the Report Server storage that you choose when you configure it.

If you want the generated report to be automatically distributed to stakeholders, colleagues or clients, you can add as many recipients as you want to the scheduled task subscribers list. They can be both Report Server registered users and external one-time entries.

Add recepients to scheduled task in Telerik Report Server

For the automatic emails to be sent to the report recipients, you need to make a one-time configuration in the Report Server settings to specify your mail server properties. You can find more information in the documentation.

AD FS Support

We know that most companies prefer their employees to use their domain credentials to log into any application used internally by the company. It’s more secure, easier to manage by IT and simpler for the end user as they won’t need to create and remember separate accounts for each app. With this release, Telerik Report Server provides that option. In addition to the local (WebForms) account support, we provide authentication option through the Web Services Federation (WS-Federation) specification. Now you can easily configure the Report Server to use a Federation provider to log in. Currently we support:

  • Active Directory for Windows Domain
  • Azure AD

Find out more on how to set it up here.

What’s Next?

More and more exciting staff is coming. First, we will enhance the scheduling functionality by adding the ability to set report parameters for the scheduled task through a nice UI that’s easy to use. This will allow you to best leverage the report parameters functionality and reuse the same report definition multiple times. We will also add the ability to customize the email template that’s sent to the scheduled task subscribers with the generated report. When we’re ready with these features, we will release them immediately.

A full roadmap will be available on the Report Server page by the end of the month, so stay tuned. To have a say on it, share your feedback and thoughts in our feedback portal or in the comments below.

P.S. Join Telerik developer advocates on October 14th to see technical demos of the DevCraft Q3 2015 release highlights. You’ll have a chance to win awesome prizes and get your questions answered live. Hope to see you there.

Make the iOS SideDrawer Bounce with UIKitDynamics

$
0
0

What is the most important thing when we design and create our apps?
 
Colors, shapes, design, feature list, architecture, implementation, code quality and somewhere there a simple thought crosses your mind—how is the user going to interact with my app? Is it intuitive enough? Is it smooth enough?
 
As an iOS dev you know how important is to make your app pretty and resemble the real world in behavior, while also being intuitive and convenient.

Well, so do we. This is exactly why we are building our components in a way that allows both a great experience with the stock feature set and an option for easy customization, so you can fully realize your own ideas.

In this post, we’re going to mix together one of our components, a couple of natural laws and a good bit of imagination—and see what happens.

Show More, Code Less—or TKSideDrawer in Action

TKSideDrawer—this beautiful component saves us so much space with our menus and simultaneously looks so cool in our apps. It’s not just an ordinary space saver though—it offers polished animations and transitions, and it is highly customizable.
 
It is exactly the high level of customization you will benefit from today. Using the UIKitDynamics framework, you will learn how to create a cool bouncy animation and plug it into TKSideDrawer. Ok, no more sweet talk, let’s get to the real deal.

First, open Xcode and create a new Single View Application:

Xcode - Single View Application

Now open the ViewController.swift file. Create a TKSideDrawerView and a navigation bar with a button that will open the side drawer. Next, add the navigation bar as a main view to the side drawer.

Insert the following two sections with a couple of items in each, just for demo purposes:

classViewController: UIViewController{
 
    let sideDrawerView = TKSideDrawerView()
    let navItem = UINavigationItem()
     
    override func viewDidLoad() {
        super.viewDidLoad()
        sideDrawerView.frame= self.view.bounds
        self.view.addSubview(sideDrawerView)
        self.view.backgroundColor= UIColor.yellowColor()
         
        let navBar = UINavigationBar(frame: CGRect(x: 0,y: 0,width: CGRectGetWidth(sideDrawerView.mainView.bounds),height: 44))
        navItem.leftBarButtonItem= UIBarButtonItem(title: "CLICK",style: UIBarButtonItemStyle.Plain,target: self,action: "showSideDrawer")
        navBar.items= [navItem];
        navBar.autoresizingMask= UIViewAutoresizing.FlexibleWidth
        sideDrawerView.mainView.addSubview(navBar)
         
        let sideDrawer = sideDrawerView.sideDrawer
        sideDrawer.fill= TKSolidFill(color: UIColor.grayColor())
        sideDrawer.width= 200;
        sideDrawer.content.backgroundColor= UIColor.clearColor()
         
        var section = sideDrawer.addSectionWithTitle("Primary")
        section.addItemWithTitle("Social")
        section.addItemWithTitle("Promotions")
         
        section = sideDrawer.addSectionWithTitle("Label")
        section.addItemWithTitle("Important")
        section.addItemWithTitle("Starred")
        section.addItemWithTitle("Sent Mail")
        section.addItemWithTitle("Drafts")
    }
 
    func showSideDrawer()
    {
        sideDrawerView.sideDrawer.show()
    }
}
Just a few lines of code and you have a ready-to-use side drawer. It’s as simple as that.


SideDrawer for iOS

This is the default behavior of TKSideDrawer.

You can use some of the predefined transitions to generate a different behavior. If you’re interested, you can read more about them in our online documentation. Now we’re going to dive into a bit deeper waters.

Physics, Gravity and TKSideDrawer

The trend in mobile apps is to resemble the real world more and more closely. We are armed with tons of libraries and frameworks in our everyday fight to deliver an intuitive, useful and rich user experience.

One of our most precious weapons here is UIKit Dynamics. This is the magic that handles our complicated physics equations. This library takes away the great pleasure that is reading and studying physics ourselves, giving us a few useful objects and methods that practically do the job for us instead—as I said, it’s magical. Knowing that, you can create a cool, custom transition for the TKSideDrawer with some help from UIKit Dynamics.
 
Create a new class and give it a name, for example CustomTransition. Keep in mind that it has to be a child class of the TKSideDrawerTransition class. In the new class you should override two methods:

  • -(void) show
  • -(void) dismiss
The three objects that you should define as shown below come from UIKit Dynamics.

The UIDynamicAnimator is the beating heart of the library itself, producing realistic animations thanks to the built-in physics engine. To do its job, the UIDynamicAnimator needs to be given UIDynamic behaviors to work with. The dynamic behaviors actually represent real world physical behaviors implemented into the programming universe. In the demo we are going to use two dynamic behaviors—UIGravityBehavior and UICollisionBehavior.
 
  • UIGravityBehavior applies gravity to the added UIViews
  • UICollisionBehavior handles the collision between objects or an object and a boundary (a screen boundary or such defined by us)
There is one more important class—UIDynamicItemBehavoir—which adjusts properties regarding other behaviors, like velocity, elasticity, density, etc.

classPhysicsTransitionManager: TKSideDrawerTransition {
 
    var animator : UIDynamicAnimator!
    var gravity  : UIGravityBehavior!
    var collision : UICollisionBehavior!
     
    override init(sideDrawer: TKSideDrawer) {
        super.init(sideDrawer: sideDrawer)
        animator = UIDynamicAnimator(referenceView: (sideDrawer.superview)!)
        gravity = UIGravityBehavior(items: [sideDrawer])
        collision = UICollisionBehavior(items: [sideDrawer])
    }
     
    override init()
    {
       super.init()
    }
     
    override func show() {
 
    }
     
    override func dismiss() {
        
    }
}
Before you begin implementing the CustomTransition class, you need to tell the TKSideDrawer that you want it to use our special transition. So, open the ViewController.swift file and in the ViewDidLoad method right under the line where you have set the side drawer’s width to 200, add the following line:
 
sideDrawer.transitionManager= PhysicsTransitionManager(sideDrawer: sideDrawer)

Okay, now that you have a basic knowledge of UIKitDynamics we can start implementing our -show method. You are going to make the side drawer slide in from the left side of the screen and collide in a pretty way with the navigation bar.
 
First, set the side drawer’s frame outside of the screen boundaries so that you can achieve the slide-in effect from the left. Then initialize the UIDynamicAnimator with a reference view, and the UIGravityBehavior with the sideDrawer as an item. Now you have to set up the gravity direction. As I said, we want a slide-in effect from the left and the default value of the gravity direction vector is (0.0, 1.0), which means the objects on which gravity is applied are basically falling down exactly the same way the real world gravity works. That’s not exactly what we need, right?

We need our sideDrawer to be moving horizontally from left to right rather than vertically, so set the gravity direction vector to (1.0, 0.0):

override func show() {
    self.transitionBegan(true)
    self.sideDrawer?.frame= CGRect(x: -200,y: 0,width: (self.sideDrawer?.width)!,height: (self.sideDrawer?.superview?.bounds.height)!)
    self.sideDrawer?.hidden= false
     
    self.animator= UIDynamicAnimator(referenceView: (self.sideDrawer?.superview)!)
    gravity = UIGravityBehavior(items: [self.sideDrawer!])
    gravity.gravityDirection= CGVector(dx: 1.0,dy: 0.0)
 
    animator.addBehavior(gravity)
}
If you build and run your project, you will get this result:


SideDrawer with UIKitDynamics

Not quite as expected, huh?

This happens because now we have gravity applied to the view and it is moving, but there is nothing to stop it—we don’t have any boundaries.

Go back to the implementation of the -show method and at the end of it paste the following lines of code:

collision.addBoundaryWithIdentifier("Bound",fromPoint: CGPoint(x: 200,y: 0),toPoint: CGPoint(x: 200,y: (self.sideDrawer?.superview?.bounds.height)!))
animator.addBehavior(collision)
 
let itemBehavior = UIDynamicItemBehavior(items: [self.sideDrawer!])
itemBehavior.elasticity= 0.4
animator.addBehavior(itemBehavior)
self.transitionEnded(true);
You have just initialized the collision behavior and have set a boundary, which will be like an invisible wall for our side drawer. It will hit the boundary and then bounce back until it loses its force. You have also created a UIDynamicItemBehavior with the side drawer as an item and have set the elasticity property to 0.4, which is the amount of elasticity applied upon collision between objects. Its values are from 0.0 for no bounce at all to 1.0 for completely elastic collision.

Build and run your app again​:
 
SideDrawer with UIKitDynamics and Collision

Close enough, right?

Now the side drawer is doing exactly what we want it to do, but let’s make it look like it collides with the navigation bar not with thin air. The only piece missing here is the movement of the navigation bar, and you can implement that as a simple animation a bit quicker than the movement of the side drawer. Finally, the -show method should look like this. Build, run and let’s see the result:

override func show() {
    self.transitionBegan(true)
    self.sideDrawer?.frame= CGRect(x: -200,y: 0,width: (self.sideDrawer?.width)!,height: (self.sideDrawer?.superview?.bounds.height)!)
    self.sideDrawer?.hidden= false
     
    self.animator= UIDynamicAnimator(referenceView: (self.sideDrawer?.superview)!)
    gravity = UIGravityBehavior(items: [self.sideDrawer!])
    gravity.gravityDirection= CGVector(dx: 1.0,dy: 0.0)
 
    collision.addBoundaryWithIdentifier("Bound",fromPoint: CGPoint(x: 200,y: 0),toPoint: CGPoint(x: 200,y: (self.sideDrawer?.superview?.bounds.height)!))
    animator.addBehavior(collision)
     
    animator.addBehavior(gravity)
 
    let itemBehavior = UIDynamicItemBehavior(items: [self.sideDrawer!])
    itemBehavior.elasticity= 0.4
    animator.addBehavior(itemBehavior)
 
    UIView.animateWithDuration(0.5,animations: { () -> Void in
        self.sideDrawer?.hostview?.center= CGPoint(x: (self.sideDrawer?.hostview?.center.x)! + (self.sideDrawer?.width)!,y:(self.sideDrawer?.hostview?.center.y)! )
        }) { (finished) -> Void in
            self.transitionEnded(true)
    }
}

SideDrawer with UIKitDynamics shows

Nice, but we still don’t have our dismiss transition defined. Given everything we went through so far and the fact that dismiss is simply the opposite of show, you might wonder just how hard can it be?
 
Exactly, it’s not hard at all. You already have everything set up so all you need are a few lines of code.

You have to move the navigation bar to its initial position, with the only difference being that you now need a slower animation so that the navigation bar follows the side drawer.

Flip the gravity direction to the opposite side, remove the previous boundary and add a new one outside of the phone screen:

override func dismiss() {
    self.transitionBegan(true)
 
    UIView.animateWithDuration(0.9,animations: { () -> Void in
        self.sideDrawer?.hostview?.center= CGPoint(x: CGRectGetMidX((self.sideDrawer?.hostview?.superview?.bounds)!),y: CGRectGetMidY((self.sideDrawer?.hostview?.superview?.bounds)!))
        }) { (finished) -> Void in
            self.transitionEnded(false)
    }
     
    gravity.gravityDirection= CGVector(dx: -1.0,dy: 0.0)
    collision.removeAllBoundaries()
    collision.addBoundaryWithIdentifier("leftBound",fromPoint: CGPoint(x: -250,y: 0),toPoint: CGPoint(x: -250,y: (self.sideDrawer?.superview?.bounds.height)!))
}
There you go our final result:


SideDrawer with UIKitDynamics

You can experiment with different directions and dynamic behaviors. Try implementing a vertically falling side drawer with or without a moving navigation bar. You can find the project demonstrated in this article in our Demo apps GitHub repo.

Of course, in order to run the project, you need UI for iOS. Get a free trial here.

Happy coding and... may the force be with you.

Native Android Support Arrives in Test Studio R3 2015

$
0
0

In Test Studio R3 2015, ​native Android ​support comes to Test Studio.

The wait is over for those who develop and test Android applications. The R3 release of Test Studio will support testing native Android applications. If you're just getting started with Test Studio, you may want to start with our ​handy guide, but for Android devs familiar with it we're going to dive right in.

Testing Android devices is a very involved process, due to the prevalent fragmentation issue and the manufacturer-specific Android setups being put on so many devices. There is a need for a testing solution that creates a more stable, polished app that will be robust enough to perform ​reliably across these Android variants.

Here are ​a few highlights from this latest release:

Test Studio Mobile:

  • Automated testing for native Android applications. Create and run automated tests on real devices and emulators without writing a single line of code. Create tests once and execute them on multiple devices.

     

  • Test lists: Create iOS and Android test lists, execute against connected devices in parallel.

     

  • Connect your devices via USB or WiFi: We’ve added the ability to connect your iOS and Android devices directly via USB connection.

     

blog r3R3-3R3-4

  • With R3’s added USB support, Continuous Integration with Windows, MAC & Linux is supported.

     

  • Drill-down results for Mobile Test Lists: We’ve added new UI that allows you to drill in to the test list, test and test step level. 

2

We made several improvements to Test Studio Web & Desktop solution as well. Please see the highlights below:

  • Intellimap is now available in Visual Studio plug
  • We made some performance optimizations for our Element Explorer
  • Full TFS 2015 and Visual Studio 2015 compatibility
  • Test Studio now supports Windows 10
  • Scheduling—hourly and minutely recurring now available
  • Scheduling optimization

For a detailed list of features and changes, please check out the release notes.


What Next?

To ​learn more about this release, please register here for our upcoming release webinar. Our product team will demo the new Record & Playback functionality for iOS and Android native applications along with the latest additions to Test Studio Web & Desktop.

If you're looking for a general guide to getting started with Report Server, 

We Recap the Telerik DevCraft Q3 2015 Release Webinar

$
0
0

The landscape for .NET developers is fast changing and now more than ever, you need the best possible tools to get your job done. Just in time comes the Telerik DevCraft Q3 2015 Release—packed with goodies to enable you to build the next generation of amazing applications for desktop, web and mobile.

Fall/Autumn is a time to get out and enjoy nature, not be holed up in your cubicle. Here’s to Telerik DevCraft helping you deliver projects on time and above expectations. Q3 was a big release and you know the right tools make all the difference.

Relive the Content

On Oct 14th, Telerik developer advocates Michael Crump, Sam Basu& Ed Charbeneau unpacked the Telerik DevCraft bits during the Q3 Release Webinar. For our worldwide audience, we tried covering the content in two time slots this time​—and it looks like it paid dividends for most audiences in conflicting time zones. If you could not make it, you can relive the webinar in its entirety—we now have high definition recording available!



Prize Winners

What’s a Telerik webinar without some awesome prizes? In tune with what’s hot in the Microsoft devices space, we had picked Surface Pro 3 and Xbox One—developers need to be productive everywhere and have fun as well, right? We picked four random winners among webinar attendees for each of the two time slots. You win just for showing up!

11 AM EST Timeslot Winners:
Xbox One​—Dave Scholl
Surface Pro 3—Mark Aydelotte

6 PM EST Timeslot Winners:
Xbox One—Eric Zhuang
Surface Pro 3—Tom Franklin

Congrats winners. Hope you enjoy your prizes!

Additional Questions/Answers

One of the most enjoyable aspects of the webinars for us advocates is the Q/A at the end. We appreciate developers looking at our latest tooling and coming up with real-world questions on usage or product features. While we try to answer as many questions as we can on air, there are just way too many to cover​—here are some additional questions and answers on the most appropriate queries and expanding on product roadmaps.

Mobile:

Q: Do you have any examples of real-world apps for native controls?
A: Yes, you can check out our Windows Phone App Showcase and our customer apps in the spotlight for iOS and Android.

Q: When will UWP UI Controls be available in the Telerik Control Panel?
A: Right now, the new UI for UWP suite is in CTP. As the product becomes official, we will add it to your Telerik Control Panel for easy downloading.

Q: Are you working on a Grid in UI for UWP?
A: If you check the Windows 10 UWP Controls roadmap, you will see that the Grid is our top priority for Windows 10. Other highly prioritized controls are the Image Editor and the design templates from UI for Windows Phone.

Q: Is there sample code for UI for Xamarin?
A: Yes, it is included when you download the UI for Xamarin control suite.

Desktop:

Q: How do I implement themes like you did for the RadTimeSpanPicker?
A: We have 15 themes that are currently available. You can learn how to use a theme HERE. Have fun.

Q: What is the main use of Icon Set for WPF?
A: To provide icons for your app so that you won't need to buy them elsewhere or hire a designer.

Q: Please elaborate on Desktop Alerts for WPF.
A: It allows you to display notifications on the desktop if a specific event occurs in your application. For example, a new e-mail message, meeting request or task request. It is displayed as a small pop-up on a predetermined location for a short period of time and will disappear shortly thereafter. Please look HERE for more info.

Q: Tell me more about the Medical Sample App for WinForms.
A: The Medical App demo shows how to integrate several Telerik components to build a real world scenario of a doctor-patient management system, allowing doctors to manage their patient records, visits and appointments. You can find it in the integration example in our WinForms demo application.

Q: Do the Telerik UWP controls play nicely with most of the open source MVVM frameworks (like MVVM Light) out there?
A: Yes. Just like UI for Windows Phone and UI for Windows Universal, UI for UWP uses standard XAML property bindings and commands, which makes it easy to use with an MVVM architecture.

Web:

Q: Is it possible to use Spreadsheet control on a server without Microsoft.Office.Interop.Excel DLL?
A: The new Spreadsheet widget in both UI for ASP.NET MVC and UI for ASP.NET Ajax are stand-alone UI components. They render HTML5-based spreadsheets in-browser and do not depend on any 3rd party or Office components.

Q: What kind of apps can be developed using the Kendo UI framework?
A:Kendo UI is Telerik’s front-end HTML5, JS & CSS framework that aids in building modern web and mobile applications. Web applications built with Kendo UI can be for desktop or optimized for mobile. Kendo UI Mobile UI widgets can also be used to build Hybrid mobile apps for App store presence and full mobile device integration through Cordova plugins.

Q: Does the Web Components support in rendering Kendo UI widgets not work in IE/Edge?
A: Kendo UI embraces modern web technologies like Web Components and Angular 2. Keep in mind, however, that lot of these technologies have emerging specifications and not production-ready yet. As such support for upcoming specifications (like Custom elements, Shadow DOM etc. in Web Components) varies across browsers. Kendo UI simply wants to provide you with the most flexibility and acceptance of newer technologies should you wish to dabble.

Q: Can you explain the real benefit of MVC Scaffolding?
A: Kendo UI MVC Scaffolders for MVC Grid, Scheduler or Charts can be the developer’s best friends. The scaffolding solutions are meant to easily string together your Model, View and Controllers in an MVC application. Given a Model and Data Context, the scaffolding tools generate a lot of the plumbing code needed for seamless CRUD operations. This is code you would otherwise have to write by hand; the scaffolding tools simply give you a head start in the right direction.

Report Server:

Report Server has come a long way since introduction—consider it your one-stop shop for robust Report Management. This quarter, Report Server gained valuable features like Report Scheduling and WS Federation (AD FS) Authentication support.

The excitement for Report Server is palpable and we had a lot of questions from you all. To do it justice, the Report Server product team will take all the questions and make a separate blog post out of it. This will also answer your relevant doubts and spotlight some upcoming features coming up in the roadmap. Look out for it on the Report Server blog.

Resources

Webinar Recording - https://youtu.be/84iJN9EUDbs
Michael’s Deck - https://speakerdeck.com/mbcrump/devtools-q3-2015-webinar
Sam’s Deck - http://1drv.ms/1MXaubp
Ed’s Deck - http://1drv.ms/1Z7sgzg

That’s a Wrap

This may be one of the best times to be a .NET developer. The future is bright, cross-platform and developer-friendly. The types of applications you can build with .NET have the broadest spectrum of user reach ever. So, go ahead and build your next dream application in .NET for web, desktop or mobile—Telerik DevCraft tooling is right alongside to help you! We’ll talk to you again during the Telerik DevCraft Q1 2016 Release. Until then, adios and have fun coding!

Let's Put Some Makeup on the Telerik ListView for Xamarin

$
0
0
There are millions of apps out there, but many of them are just clon​es of one another in terms of functionality. It's the UI and the UX that really make a first impression ​on your end-user and eventually can win ​them to your side. This is why we are building our components stacked with features and with extensibility in mind. 

Today, we will demonstrate how you can change the look and the behavior of the Telerik ListView for Xamarin.Forms by employing the following features:
  • Ability to customize the template of the items
  • Predefined layouts
  • Support for swipe content
To demonstrate these features, let's say we have a scenario with a list view control that should visualize a playlist of songs. Users can mark a song as a favorite or delete it from the playlist.

Here is what the final result should like on iOS and Android: 

iOS:
ListView for Xamarin.Forms.iOS Normal
ListView for Xamarin.Forms.iOS Fav
ListView for Xamarin.Forms.iOS Del


Android:
ListView for Xamarin.Forms.And Normal
ListView for Xamarin.Forms.And Fav
ListView for Xamarin.Forms.And Del

Now let’s get the job done!

Data Class

To start, here is a simple data class that will hold some information about a song: 

usingTelerik.XamarinForms.Common;
 
namespaceCustomizableListView
{
    publicclassSong : NotifyPropertyChangedBase
    {
        privateboolisFavourite;
  
        publicstringTitle { get; set; }
 
        publicstringAuthor { get; set; }
 
        publicstringAlbum { get; set; }
 
        publicstringAlbumArt { get; set; }
 
        publicboolIsFavourite
        {
            get
            {
                returnthis.isFavourite;
            }
            set
            {
                if(this.isFavourite != value)
                {
                    this.isFavourite = value;
                    this.RaisePropertyCanged();
                }
            }
        }
    }
}
And a view model class that will be the binding context of our list view:

usingSystem;
usingSystem.Collections.ObjectModel;
usingTelerik.XamarinForms.Common;
 
namespaceCustomizableListView
{
    publicclassViewModel : NotifyPropertyChangedBase
    {
        privateObservableCollection<Song> songs;
 
        publicViewModel()
        {
            this.Songs = this.GetData();
        }
 
        publicObservableCollection<Song> Songs
        {
            get
            {
                returnthis.songs;
            }
            set
            {
                if(this.songs != value)
                {
                    this.songs = value;
                    this.RaisePropertyCanged();
                }
            }
        }
 
        publicvoidReloadData()
        {
            this.Songs = this.GetData();
        }
 
        privateObservableCollection<Song> GetData()
        {
            // get songs data
        }
    }
}

Item Template

This is the template of the elements in the ​ListView that we're after: 

ListView for Xamarin.Forms Item Template

We​'ll use the ListViewTemplateCell to set a custom data template for the cells. Here is how we organize the elements and layouts in the cell template: 

<telerikDataControls:RadListView.ItemTemplate>
  <DataTemplate>
    <telerikListView:ListViewTemplateCell>
      <telerikListView:ListViewTemplateCell.View>
        <GridPadding="10">
          <Grid.ColumnDefinitions>
            <ColumnDefinitionWidth="90"/>
            <ColumnDefinitionWidth="*"/>
          </Grid.ColumnDefinitions>
          <ImageSource="{Binding AlbumArt}"/>
          <StackLayoutPadding="10,0,0,0"Grid.Column="1">
            <Grid>
              <Grid.ColumnDefinitions>
                <ColumnDefinitionWidth="*"/>
                <ColumnDefinitionWidth="Auto"/>
              </Grid.ColumnDefinitions>
              <LabelText="{Binding Title}"TextColor="#694A00"LineBreakMode="TailTruncation"FontSize="Large"/>
              <ImageSource="{Binding IsFavourite, Converter={StaticResource FavouriteImageConverter}}"Grid.Column="1"/>
            </Grid>
            <StackLayoutOrientation="Horizontal"Padding="5,0,0,0">
              <LabelTextColor="#806015"Text="by"FontAttributes="Italic"FontSize="Medium"/>
              <LabelTextColor="#806015"Text="{Binding Author}"LineBreakMode="TailTruncation"FontSize="Medium"/>
            </StackLayout>
            <StackLayoutOrientation="Horizontal"Padding="15,0,0,0">
              <LabelTextColor="#A0967D"Text="{Binding Album}"LineBreakMode="TailTruncation"FontSize="Small"/>
            </StackLayout>
          </StackLayout>
        </Grid>
      </telerikListView:ListViewTemplateCell.View>
    </telerikListView:ListViewTemplateCell>
  </DataTemplate>
</telerikDataControls:RadListView.ItemTemplate>

Items State 

Next come the item states. The ListView items are always in one of these states: selected, pressed or normal. There are style properties that customize the item's background and borders for each state.

<telerikDataControls:RadListView.SelectedItemStyle>
  <telerikListView:ListViewItemStyleBackgroundColor="{StaticResource SelectedBackgroundColor}"BorderLocation="Bottom"BorderColor="#A0967D"BorderWidth="2"/>
</telerikDataControls:RadListView.SelectedItemStyle>
<telerikDataControls:RadListView.ItemStyle>
  <telerikListView:ListViewItemStyleBackgroundColor="{StaticResource BackgroundColor}"BorderLocation="Bottom"BorderColor="#A0967D"BorderWidth="2"/>
</telerikDataControls:RadListView.ItemStyle>
<telerikDataControls:RadListView.PressedItemStyle>
  <telerikListView:ListViewItemStyleBackgroundColor="{StaticResource BackgroundColor}"BorderLocation="Bottom"BorderColor="#A0967D"BorderWidth="2"/>
</telerikDataControls:RadListView.PressedItemStyle>

Layout 

The items can be arranged in different layouts, and each layout has properties that specify the length of the items and the distance between them. In this example we use a linear layout: 

<telerikDataControls:RadListView.LayoutDefinition>
  <telerikListView:ListViewLinearLayoutItemLength="100"/>
</telerikDataControls:RadListView.LayoutDefinition>

Swipe Content 

We also want to add a button at each side of the item that is revealed as the user swipes—one to mark the song as favorite and one to delete the song from the playlist. 

We have to enable the swipe gestures and specify the swipe distance. 

<telerikDataControls:RadListViewx:Name="listView"IsItemSwipeEnabled="True"SwipeOffset="50,0,50,0"...>
The ItemSwipeContentTemplate is used to create the content that appears below the item when the user swipes. For this scenario we add a grid with two buttons. 
 
<telerikDataControls:RadListView.ItemSwipeContentTemplate>
  <DataTemplate>
    <Grid>
      <Grid.ColumnDefinitions>
        <ColumnDefinitionWidth="Auto"/>
        <ColumnDefinitionWidth="*"/>
        <ColumnDefinitionWidth="Auto"/>
      </Grid.ColumnDefinitions>
      <GridBackgroundColor="#33FFFFFF"Grid.Column="0">
        <ButtonImage="{Binding IsFavourite, Converter={StaticResource FavouriteButtonConverter}}"Style="{StaticResource ButtonStyle}"Clicked="LoveButtonClick"/>
      </Grid>
      <GridBackgroundColor="#33FF0000"Grid.Column="2">
        <ButtonImage="trash.png"Style="{StaticResource ButtonStyle}"Clicked="DeleteButtonClick"/>
      </Grid>
    </Grid>
  </DataTemplate>
</telerikDataControls:RadListView.ItemSwipeContentTemplate>
privatevoidLoveButtonClick(objectsender, EventArgs e)
{
    var song = (sender asButton).BindingContext asSong;
    song.IsFavourite = !song.IsFavourite;
}
 
privatevoidDeleteButtonClick(objectsender, EventArgs e)
{
    var song = (sender asButton).BindingContext asSong;
    this.viewModel.Songs.Remove(song);
}
That's it! Now the ListView is not just styled, but it allows for right and left item swipe behavior with actionable content underneath. Here is how this looks on iPhone:

listview-xamarin-fav-del

You can get the complete source code of the application from our GitHub repo. Of course, you will need UI for Xamarin to run the app. Get a free trial here
 
Happy coding!

Spreadsheet and New Skin for Telerik ASP.NET AJAX in Q1 2016

$
0
0
Enhance the appearance of your apps with ​the new Material Design theme​ and the improved Theme Builder. Build Excel-like solutions with ease thanks to the official Spread​sheet. Raise the accessibility of your apps to a new level with the introduced Section 508 improvements.

Allow me to present the highlights of the upcoming Q​1 201​6 release:

Spreadsheet

The official release of the Excel-like component will offer the following ​important features:

  • Add/Remove Columns and Rows
  • Cell Formatting features like the following: Cut, Copy and Paste, Apply Border, Alignment, Text Wrapping, Increase and Decrease Decimal, Custom Formats
  • Sorting and Filtering
  • Data Validation
  • Import/Export—CSV, JSON, Tab delimited text
  • Conditional Formatting
  • Scrolling and Pinned Headers/Columns
  • Context Menu
  • And more

ASP.NET AJAX RadSpreadsheet
Figure 1: RadSpreadSheet—the screenshot represents the features available only in the Beta.

Material Design Skin

The ASP.NET AJAX controls will get a new modern dress inspired by the popular Material Design of Google. The Material theme will feature depth effects such as lighting and shadows which will make your apps more vivid and interactive. You will be able to change the default theme colors through the Theme Builder app.
 
Material Design Theme

Figure 2: Light Green version of the Material Design Theme.

Theme Builder Improvements

The theme creator tool will ​continue to be improved with the addition of the remaining Telerik ASP.NET AJAX controls and some of the most popular themes like Silk, Glow, Metro and MetroTouch. Our long-term plans include adding new themes, like one similar to the default Kendo UI theme, that will be available for download from the app.

We will also research the possibility of providing wider support for conversion of Twitter Bootstrap themes, so that the developers can use the AJAX controls along with the Bootstrap widgets on the same page with the same look and feel.
 

Theme Builder Overview
 Figure ​3: Theme Builder app.

Accessibility Improvements

With the introduction of WAI-ARIA compatibility for RadAutoCompleteBox, RadButton, RadWindow, RadAlert, RadConfirm and RadPrompt, you will be able to build more accessible and usable web projects, especially for people who rely on screen readers and who cannot use a mouse.

Easy-to-Use Separate Button Components

We identified ​the need of our customers ​to provide separate definitions for the ​child RadButton controls. This will introduce the following benefits:
  • Easier configuration​—there will be a server tag for each button type (PushButton, ImageButton, LinkButton, etc..) and fewer properties to achieve the same level of functionality as with RadButton
  • Performance optimization
  • Infrastructure for new button types for Q2 2016: button list, switch button, split button and more
  • We won't remove the parent RadButton and your updated apps will continue to function properly as before

Label Control

You will be able replace the standard ASP.NET Label within your web projects with a label control with the same look and feel as the rest of the Telerik ASP.NET AJAX controls. It will offer seamless integration with all components in the suite, along with rich feature server and client-side API for creating various captions for form editors. Its flexibility will allow you to specify the layout and positioning, as well as to customize its inner contents by adding icons and/or hyperlinks.

Chart Pan and Zoom

The long anticipated pan and zoom feature will help you and your end-users navigate through and zoom into or out of the RadHtmlChart.
 
Chart Pan and Zoom

Figure ​4: Use SHIFT + Mouse Drag Region Selection combination on mouse-enabled devices to zoom in data for a specific period of time

Responsive Toolbar

 Stretched Toolbar

Squeezed ToolbarThe responsive capabilities of the toolbar will allow you and your end-users to operate with its UI elements on small screen sizes like tablets or even smartphones. If there is not enough space the right placed tools will become part of the dropdown button context menu, as shown in the second screenshot.


Modern Rendering

The CloudUpload, DataForm, Gantt, MediaPlayer, ImageGallery, LightBox, ProgressBar, SiteMap, Spell, TagCloud and Wizard control will obtain light-weight and semantic rendering based on the latest trends in HTML5, CSS3 and font-icons, which will improve not only the appearance of your apps, but also their performance.


How to Create Custom Project Templates in Xcode 7

$
0
0

With the launch of Xcode 7 we were offered a sweet deal of cool new features like free on-device development, Swift 2.0, Objective-C upgrades, and some sugar in testing and debugging.

Yeah great, but if you had developed with Xcode 7 for a bit longer you would have probably noticed that in order to use a third party library, you now have to manually add the search path to it. It’s not that hard, but when you have to do it often it becomes annoying. ​This was kind of a pain for my team and our clients as well. Before Xcode 7 Framework Search Paths were filled automatically, but with the update this changed. A lot of our clients ​were surprised and inconvenienced by the requirement to fill Framework Search Paths manually now.

In order to satisfy our clients and ease their pain, we started looking for a solution to this search paths issue. Soon we came up with the idea to create a custom project template with added search paths and link to the framework.

However, most of the information on this topic is outdated. Basically almost all public articles are covering the project templates in Xcode 4, and you definitely need to spend some time searching around the web to get all the information you need.

After struggling with this myself, I decided to write this post and synthesize the steps to create a custom project template for Xcode 7, so that it could be easier for all of you. Enjoy!

Explore What's ​Already There!

First, let’s take a look into the Xcode file structure and the default project templates.

Go in Applications, find the Xcode icon, right-click and choose Open Package Contents.

Тhis path leads to the Mac OS project templates:

/Developer/Library/Xcode/Templates/Project Templates/Mac

and this one to the iOS project templates:

/Developer/Platforms/iPhoneOS.platform/Developer/Library/Xcode/Templates/Project Templates/iOS

Before we dive in, let’s set some goals here. First, we are going to build a project template which resembles the Single View Application template provided by Apple. ​After that we'll talk about customizations.

Alright, let’s see what is going on in the original Single View Application. Then we'll make one of our own.

Open up:
 /Developer/Platforms/iPhoneOS.platform/Developer/Library/Xcode/Templates/Project Templates/iOS/Applications

and choose Single View Application.xctemplate.

As you can see, we have a storyboard, an image and a .plist file.

project-template-basic-files

Open the TemplateInfo.plist file with Xcode, which will display it as a table with keys and values, or with any text editor which will display the file content using XML.

<?xmlversion="1.0"encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plistversion="1.0">
<dict>
    <key>Kind</key>
    <string>Xcode.Xcode3.ProjectTemplateUnitKind</string>
    <key>Identifier</key>
    <string>com.apple.dt.unit.singleViewApplication</string>
    <key>Ancestors</key>
    <array>
        <string>com.apple.dt.unit.storyboardApplication</string>
        <string>com.apple.dt.unit.coreDataCocoaTouchApplication</string>
    </array>

Maybe the most important thing here is the Identifier key, whose value is com.apple.dt.unit.singleViewApplication.

Every template has an identifier key which consists of a prefix and the name of the template. Apple uses a com.apple.dt.unit prefix, so every template provided by them has it. For our custom template we have to provide our own identifier prefix.

There is also an Ancestors key, and if you are thinking ​this refers to inheritance, you are absolutely right. The whole deal is that the Xcode templates are organized in a sort of a tree structure, and the Ancestors key defines the parents of the current template. In fact, this is the purpose of the identifier—it allows for referring to the template in order to make possible the creation of hierarchies when there are shared properties between different templates. For example, if you follow the ancestors of the Single View Application template, you will have the following hierarchy:

single-view-application-structure

Each template inherits the properties defined in its ancestors and adds specific ones on top of them. So, the easiest way to create a template is to plug it in the scheme above as last child. The basic scheme of our template will look exactly the same except for the com.apple.dt.unit.SingleViewApplication node, which will be replaced by our template.

Of course, if for some reason you have to build more templates and they share some definitions, you may want to extend the provided by Apple hierarchy in order to reduce the identical definitions in different files.

Ok, next we'll go to ~/Library/Developer/Xcode/Templates.

If the Templates directory does not exist, create it.

Then, in the Templates directory, create another folder, called Custom. It will represent the group to which our template belongs. This folder will show up in Xcode on the right side of the new project panel along with the default categories—Application and Framework & Library.

Alright, now I am going to ask you to break some programming rules. ​If you're okay with it, let’s do some copy/pasting.

Go to the default iOS project templates and copy the Single View Application.xctemplate.

Go back to the ~/Library/Developer/Xcode/Templates/Custom directory and paste it there.

That's it—no more copy/paste, I promise!

Now we have to open the .plist file of our template and change the identifier prefix with, let’s say, com.tkexample.dt.unit.

<?xmlversion="1.0"encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plistversion="1.0">
<dict>
    <key>Kind</key>
    <string>Xcode.Xcode3.ProjectTemplateUnitKind</string>
    <key>Identifier</key>
    <string>com.tkexample.dt.unit.singleViewApplication</string>
    <key>Ancestors</key>
    <array>
        <string>com.apple.dt.unit.storyboardApplication</string>
        <string>com.apple.dt.unit.coreDataCocoaTouchApplication</string>
    </array>

Let’s test what we have just done. Open Xcode and in the new project panel you should be able to see your custom category with the project template in it.

newproject-window

 

Piece of cake, right?

Now let’s see how we can modify our template. 
The answer lays in the rest of the .plist file.

Customizations & Setup

In my experience the most common modifications in a Project Template could be code modifications, build settings and build phases setup.

Let’s start from the build settings and what we can do here.

All the modifications over the build settings should be contained under the key SharedSettings. All build settings are described in the Apple documentation— you can find a link to the article here, and it's quite useful. If you go through the stock .plist files, you will see different definitions in the SharedSettings dictionary. Here you can include all of the build settings from the Apple article depending on your needs, including
FRAMEWORK_SEARCH_PATHS.

<key>Project</key>
<dict>
    <key>SharedSettings</key>
    <dict>
        <key>FRAMEWORK_SEARCH_PATHS</key>
        <array>
            <string>"your path"</string>
        </array>
    </dict>
</dict>

In <key>Targets</key> key we can specify different project targets with their properties like build settings or linked frameworks. The <key>Frameworks</key> key allows us to add links to frameworks, the same way we do from Build Phases >> Link Binary With Libraries.

<key>Targets</key>
<array>
    <dict>
        <key>Frameworks</key>
        <array>
            <string>CoreData</string>
        </array>
    </dict>
</array>

Of course, we can also add new files to our project templates or modify the existing ones. In the property list we have to describe every file that will be included in our project. For the Cocoa Touch Class files we have to provide implementations in both Objective-C and Swift.

In the implementation of the Single View Application there are definitions of the ViewController class using notation with code implementations.

<dict>
    <key>Objective-C</key>
    <dict>
        <key>Nodes</key>
        <array>
            <string>ViewController.h:comments</string>
            <string>ViewController.h:imports:importCocoa</string>
            <string>ViewController.h:interface(___FILEBASENAME___ : UIViewController)</string>
            <string>ViewController.m:comments</string>
            <string>ViewController.m:imports:importHeader:ViewController.h</string>
            <string>ViewController.m:extension</string>
            <string>ViewController.m:implementation:methods:viewDidLoad(- (void\)viewDidLoad)</string>
            <string>ViewController.m:implementation:methods:viewDidLoad:super</string>
            <string>ViewController.m:implementation:methods:didReceiveMemoryWarning(- (void\)didReceiveMemoryWarning)</string>
            <string>ViewController.m:implementation:methods:didReceiveMemoryWarning:super</string>
            <string>TestClass.h</string>
            <string>TestClass.m</string>
        </array>
    </dict>
    <key>Swift</key>
    <dict>
        <key>Nodes</key>
        <array>
            <string>ViewController.swift:comments</string>
            <string>ViewController.swift:imports:importCocoa</string>
            <string>ViewController.swift:implementation(___FILEBASENAME___: UIViewController)</string>
            <string>ViewController.swift:implementation:methods:viewDidLoad(override func viewDidLoad(\))</string>
            <string>ViewController.swift:implementation:methods:viewDidLoad:super</string>
            <string>ViewController.swift:implementation:methods:didReceiveMemoryWarning(override func didReceiveMemoryWarning(\))</string>
            <string>ViewController.swift:implementation:methods:didReceiveMemoryWarning:super</string>
            <string>TestClass.swift</string>
        </array>
    </dict>
</dict>

We are going to use another notation which does not require actual code definitions. Instead of defining every class with its content in the Nodes array, we have to just declare that such files exist. Then in the Definitions dictionary we have to set the path to the files.

Let’s add another class called TestClass into our template.

Add the following lines at the bottom of the Nodes array in the Objective-C section:

<string>TestClass.h</string>
<string>TestClass.m</string>

respectively add in the Swift section.

<string>TestClass.swift</string>

Now we have to specify where our class files are located. Add the following lines in the Definitions dictionary.

<key>TestClass.m</key>
<dict>
    <key>Path</key>
    <string>TestClass.m</string>
</dict>
<key>TestClass.h</key>
<dict>
    <key>Path</key>
    <string>TestClass.h</string>
</dict>
<key>TestClass.swift</key>
<dict>
    <key>Path</key>
    <string>TestClass.swift</string>
</dict>

We can also organize our files into groups. Let’s put our new class into a group called CustomClasses. Modify the Definitions dictionary as show below,
and keep in mind that adding more than one value in the Group array leads to nesting of groups.

<key>TestClass.m</key>
<dict>
    <key>Group</key>
    <array>
        <string>CustomClasses</string>
    </array>
    <key>Path</key>
    <string>TestClass.m</string>
</dict>
<key>TestClass.h</key>
<dict>
<key>Group</key>
    <array>
        <string>CustomClasses</string>
    </array>
    <key>Path</key>
    <string>TestClass.h</string>
</dict>
<key>TestClass.swift</key>
<dict>
    <key>Group</key>
    <array>
        <string>CustomClasses</string>
    </array>
    <key>Path</key>
    <string>TestClass.swift</string>
</dict>

Alright, finally your Templateinfo.plist file should look like this:

<?xmlversion="1.0"encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plistversion="1.0">
<dict>
    <key>Kind</key>
    <string>Xcode.Xcode3.ProjectTemplateUnitKind</string>
    <key>Identifier</key>
    <string>com.tkexample.dt.unit.singleViewApplication</string>
    <key>Ancestors</key>
    <array>
        <string>com.apple.dt.unit.storyboardApplication</string>
        <string>com.apple.dt.unit.coreDataCocoaTouchApplication</string>
    </array>
    <key>Targets</key>
    <array>
        <dict>
            <key>Frameworks</key>
            <array>
            <string>CoreData</string>
            </array>
        </dict>
    </array>
    <key>Concrete</key>
    <true/>
    <key>Description</key>
    <string>This template provides a starting point for an application that uses a single view.</string>
    <key>SortOrder</key>
    <integer>1</integer>
    <key>Options</key>
    <array>
        <dict>
            <key>Identifier</key>
            <string>languageChoice</string>
            <key>Units</key>
            <dict>
                <key>Objective-C</key>
                <dict>
                    <key>Nodes</key>
                    <array>
                        <string>ViewController.h:comments</string>
                        <string>ViewController.h:imports:importCocoa</string>
                        <string>ViewController.h:interface(___FILEBASENAME___ : UIViewController)</string>
                        <string>ViewController.m:comments</string>
                        <string>ViewController.m:imports:importHeader:ViewController.h</string>
                        <string>ViewController.m:extension</string>
                        <string>ViewController.m:implementation:methods:viewDidLoad(- (void\)viewDidLoad)</string>
                        <string>ViewController.m:implementation:methods:viewDidLoad:super</string>
                        <string>ViewController.m:implementation:methods:didReceiveMemoryWarning(- (void\)didReceiveMemoryWarning)</string>
                        <string>ViewController.m:implementation:methods:didReceiveMemoryWarning:super</string>
                        <string>TestClass.h</string>
                        <string>TestClass.m</string>
                    </array>
                </dict>
                <key>Swift</key>
                <dict>
                    <key>Nodes</key>
                    <array>
                        <string>ViewController.swift:comments</string>
                        <string>ViewController.swift:imports:importCocoa</string>
                        <string>ViewController.swift:implementation(___FILEBASENAME___: UIViewController)</string>
                        <string>ViewController.swift:implementation:methods:viewDidLoad(override func viewDidLoad(\))</string>
                        <string>ViewController.swift:implementation:methods:viewDidLoad:super</string>
                        <string>ViewController.swift:implementation:methods:didReceiveMemoryWarning(override func didReceiveMemoryWarning(\))</string>
                        <string>ViewController.swift:implementation:methods:didReceiveMemoryWarning:super</string>
                        <string>TestClass.swift</string>
                    </array>
                </dict>
            </dict>
        </dict>
    </array>
    <key>Definitions</key>
    <dict>
        <key>Base.lproj/Main.storyboard</key>
        <dict>
            <key>Path</key>
            <string>Main.storyboard</string>
            <key>SortOrder</key>
            <integer>99</integer>
        </dict>
        <key>TestClass.m</key>
        <dict>
                <key>Group</key>
        <array>
            <string>CustomClasses</string>
        </array>
            <key>Path</key>
            <string>TestClass.m</string>
        </dict>
        <key>TestClass.h</key>
        <dict>
                <key>Group</key>
        <array>
            <string>CustomClasses</string>
        </array>
            <key>Path</key>
            <string>TestClass.h</string>
        </dict>
        <key>TestClass.swift</key>
        <dict>
        <key>Group</key>
        <array>
            <string>CustomClasses</string>
        </array>
            <key>Path</key>
            <string>TestClass.swift</string>
        </dict>
    </dict>
</dict>
</plist>
Last, but definitely not least, you have to actually create the source files in the template directory:project-template-files

Basically, this how you create custom project templates in Xcode 7.

Keep in mind that the best way to gain knowledge of something new is to play around with it. Speaking of which, here is link to the GitHub repo with the template we just created. Plug it into XCode and check out the result.

We're always adding new improvements to UI for iOS, and this and many other​s will be a part of the next UI for iOS release coming ​in the beginning of November. Feel free to get a Trial of the current official version from here.

May the force be with you, ninjas!

We can also organize our files into groups. Let’s put our new class into a group called CustomClasses. Modify the Definitions dictionary as show below, and keep in mind that adding more than one value in the Group array leads to nesting of groups.

 

<key>TestClass.m</key>
<dict>
    <key>Group</key>
    <array>
        <string>CustomClasses</string>
    </array>
    <key>Path</key>
    <string>TestClass.m</string>
</dict>
<key>TestClass.h</key>
<dict>
    <key>Group</key>
    <array>
        <string>CustomClasses</string>
    </array>
    <key>Path</key>
    <string>TestClass.h</string>
</dict>
<key>TestClass.swift</key>
<dict>
    <key>Group</key>
    <array>
        <string>CustomClasses</string>
    </array>
    <key>Path</key>
    <string>TestClass.swift</string>
</dict>

 

 

We can also organize our files into groups. Let’s put our new class into a group called CustomClasses. Modify the Definitions dictionary as show below, and keep in mind that adding more than one value in the Group array leads to nesting of groups.

 

<key>TestClass.m</key>
<dict>
    <key>Group</key>
    <array>
        <string>CustomClasses</string>
    </array>
    <key>Path</key>
    <string>TestClass.m</string>
</dict>
<key>TestClass.h</key>
<dict>
    <key>Group</key>
    <array>
        <string>CustomClasses</string>
    </array>
    <key>Path</key>
    <string>TestClass.h</string>
</dict>
<key>TestClass.swift</key>
<dict>
    <key>Group</key>
    <array>
        <string>CustomClasses</string>
    </array>
    <key>Path</key>
    <string>TestClass.swift</string>
</dict>

 

 

Download UI for iOS by Telerik

Announcing The Telerik Kendo UI Q1 2016 Roadmap

$
0
0
Following the ​fanfare from our huge Q3 2015 release of Kendo UI, it is time to unveil our plans for Kendo UI development for Q1 2016, and beyond. This includes not only new functionality slated for the Kendo UI framework, but also for our Telerik UI for ASP.NET MVC, UI for JSP and UI for PHP products.

Read on to see what's cooking in our labs, and expect the Q1 2016 release to ​go live in the middle of January 2016.

The Process of Defining a Roadmap

As much as shaping a roadmap may seem quite a trivial task at first sight, it is actually the final outcome of thorough internal discussions between our Engineering, Product Management and Product Strategy leads. It also requires the identification and prioritization of key customer stories ​for which we would like to provide solutions in the next development cycle. The important factors taken into account during this process are as follows:

  • Industry research and analysis
  • Direct customer surveys and feedback (including our UserVoice portal) 
  • Forum posts and support requests
  • Input from Telerik leadership

As visible from the bullets above, your feedback strongly influences the decision making process. It​'s a big part of what guides ​our development plans for providing web and mobile solutions with Kendo UI ​for you​ as a developer. When this data is carefully analyzed, correlated and mapped to key deliverables, the roadmap clicks in and is published on our site.

Given this insight, here are the main deliverables which we plan to pack into our Q1 2016 installment. 

Spreadsheet Goes Official

With the next major release of Kendo UI the Spreadsheet widget will go out of Beta and into RTM, wrapping the essential set of features for a spreadsheet component. This means you and your users will have the entire core functionality to ​employ Excel-like experiences into web apps, and process business data of any type​—financial, manufacturing, operational or other​—in a tabular format using modern and intuitive UI.

Spreadsheet-RTM

In addition to numerous enhancements, optimizations and small features, ​the Spreadsheet will also boast client import from Excel, significantly expanded client API and events, as well as a sample integration with the Kendo UI Chart widget.

Going beyond Q1, we'll look into the possibility of integrating mobile support for the spreadsheet​. We'll also continue to review and prioritize ​client requests posted on our feedback portal, weighing popular demand and votes as we ​plan future implementations. If you have anything pressing that you would like to suggest, or want to ​register your vote for an existing entry, now is the time to ​do that.

More Kendo UI App Templates and Visual Studio Project Templates

Within the next release cycle we plan to extend the set of Kendo UI App Templates introduced in Q3 2015 (see this blog post for reference) by including a dashboard-like template. You will be able to utilize and extend this simple pre-configured template, which will save you manual steps and coding when creating dashboard-like interfaces for the mobile web.

VS_Dashboard_Template

Moreover, these templates will be integrated within MS Visual Studio as project templates, making them readily available for developers who prefer to use this popular IDE for web development.

Angular 2.0 and Web Components Integrations

Angular  ​&WebComponentsLogo

Going forward, we'll be updating the Angular 2.0 and Web Components Beta integration (introduced with Q3'15) with the future updates of the Angular framework, ​as well as the increased adoption of the Web Components standard by browser vendors.

Northwind Dashboard App - AngularJS version

As much as Kendo UI ​has been known for providing seamless integration with AngularJS almost since the inception of the popular JavaScript framework, we haven't had a complete and runnable complex sample app featuring this integration to-date. Well, this is going to change soon. We intend to host an Angular version of our Northwind Dashboard demo app (with downloadable source code) right in our online demos.

Northwind_Dashboard_AngularJS

I'll also give you a hint​—you can even review the sample app implementation ​right now. It's freely accessible in our github repository here.

Grid Features

The next version of Kendo UI will bring additions to the Grid widget filtering functionality as well. The Excel-like filter menu will be enhanced to support search capabilities and complex filter expressions, in addition to current support for checkboxes.

Grid_ExcelFilterMenu

Furthermore, you will be able to filter by null/not null values, which presently is the #1 requested item on our feedback portal.

Extended Widget ​Functionality

​Additional improvements for Kendo UI widgets worth mentioning are:
  • Option to disable calendar/date pickers dates (#2 voted item on our UV portal)
  • Support for a child member being a root with multiple axis dimensions for the PivotGrid

Documentation Improvements

We'll also allocate some time for extending the content and beautifying our online documentation in terms of UX and navigation. ​This will be done in incremental steps, and you can already find the results of the first wave of our improvements right here.

ASP.NET MVC Server Wrappers

ASP.NET vNext Support

The new major version of the .NET framework continues to evolve towards its RC and RTM stages, planned tentatively for November 2015 and Q1 2016, respectively (see the public ASP.NET vNext Roadmap page​on github for reference). We are closely following this schedule and our previous commitment stays the same—we plan to provide compatible versions for UI for ASP.NET MVC with vNext RC and RTM almost simultaneously with their announcements.

Note that tag helpers for ​the ASP.NET MVC server wrappers ​of Kendo UI widgets (where applicable) are also within our scope towards Q1.

Presently we support the latest ASP.NET MVC vNext Beta8 version, and you can download the compatible Telerik UI for ASP.NET MVC 6 Beta from our public NuGet feed. ​You can learn how to use it in ASP.NET vNext apps from this blog post.

New Visual Studio Dashboard Project Template

We'll also be expanding the set of predefined Visual Studio Project Templates for UI for ASP.NET MVC with a new Dashboard-like template, based on the Kendo UI App Template definition depicted in the previous section of this post.

In this way you'll be able to put this template into practice when building MVC applications with our ​UI for ASP.NET MVC product within Visual Studio.

Beyond Q1 2016

There are many more exiting new ​additions and themes coming up for Kendo UI in 2016! For now I can only mention that some of them revolve around ReactJS and ECMAScript 6, but I won't disclose more details ​just yet. Stay tuned for updates later in 2016, and start dreaming about how Kendo UI can make you a developer rockstar next year!

Your Thoughts?

Knowing what's coming in the first major release of Kendo UI in 2016 and onward, I can't wait to hear what you think about our plans. Be the first to share ​your opinion in the comments. Also ​keep in mind that we operate in a dynamic environment, and our preliminary plans might undergo some changes going forward.

​If you have suggestions or feature requests, ​visit our Feedback portal and submit them ​so they can be reviewed and voted on by the community, and prioritized for future development.

BlogBanner_KendoUI

Intro to User Retention Cohort Reports in Telerik Analytics

$
0
0

If you don’t know the word “cohort,” this is what the dictionary says:

cohort

noun

  1. An ancient Roman military unit, comprising six centuries, equal to one tenth of a legion
  2. A group of people with a shared characteristic

Even though it could have been interesting to start mimicking military organizational elements from the Roman empire, the User Retention Cohorts that we recently introduced in Telerik Analytics are more related to definition (2) above. Although the report type does have the power of a small military unit…

Before We Dive In...

It can all sound a bit complicated, and to some extent it is, but if we keep track of the intention with user retention cohorts, then it gets easier to grasp. Basically we wish to present data that will help you understand how loyal your users are. What type are they? Do they use your app once and never again? Do they use it multiple times every day and seemingly without any end? Where are they on this scale?

What is a Telerik Analytics User Cohort?

When we speak about users in Telerik Analytics we actually mean unique installations of a given software application running on a set of devices. This could, for example, be a given hybrid app running on a number of different mobile phones. Each running app instance would be what we call a user.

A user cohort is a subset of all users that you are monitoring with Telerik Analytics for your application. In other words if we look at all the users of one of your apps, then a user cohort is simply a subset of these users.

In this first release of User Retention Cohorts the shared characteristic for the cohorts is simply the time the application is started the first time. You could say, when the “user is born.” We have chosen to implement three different cohort types: day, week and month. These correspond to the timespans that will determine whether a given user is in one cohort or the other. We basically group users by the day they were born, or the week or the month. A cohort could be all users born on Aug 12th 2015, or all users born in January 2012.

Let’s look at an example. Below we have a number of users listed with the time of the first execution of a given app.

User

Initial execution (“born on”)

Day cohort

Week cohort

Month cohort

A

Fri, Aug 7, 10:30

D1

W1

M1

B

Fri, Aug 7, 20:50

D1

W1

M1

C

Sat, Aug 8, 14:21

D2

W1

M1

D

Mon, Aug 10, 14:21

D3

W2

M1

E

Mon, Aug 10, 17:01

D3

W2

M1

F

Mon, Aug 31, 22:25

D4

W3

M1

G

Tue, Sep 1, 07:44

D5

W3

M2

 

The names of the individual cohorts (D1, W1, M1 etc.) are not relevant. They could be anything, but they show for each specific user (A to G) which cohorts the given user belongs to.

Each user is born once and thus belongs exactly to one day, one week and one month cohort. This never changes, like your birthday, birth-week and birth-month never change.

In the table above, you can see that users A, B and C all belong to week cohort W1. User A and B belong to day cohort D1, and C belongs to day cohort D2. So they are all “born” in the same week and A and B are born on the same day.

For the three cohort types we have decided that:

  • New day cohorts start every day at midnight UTC
  • New week cohorts start on Mondays at midnight UTC between Sunday and Monday
  • New month cohorts start on the 1st of the month at midnight UTC between the last day of a month and the first of the following month

What Happens to User Engagement Over Time?

With this definition of cohorts we can talk precisely about subsets of users and start asking questions like: for the specific user month cohort that holds users born in April 2015, how many of these specific users used our application in May 2015, in June 2015 and all the way to, say, August 2015? In other words how many of the users in the given cohort were still “alive” in the following months?

Cohort Retention Report | Telerik

This information is very important because it shows you how long an attention period you have from your users and how quickly or slowly they lose interest in your application. If you see a huge loss of users within a very short time, then clearly you have a challenge to improve your offering.

With the User Retention Cohorts you can choose to view day, week or month cohorts depending on the type of business you drive.

Why Compare Cohorts?

User engagement can be affected in many ways. Obviously the particular version of your application is an important aspect, but marketing campaigns, user reviews and even the particular time of the year or maybe even the time of the month or week can have an effect.

This is why we have made it very easy for you to compare cohorts and see how they “perform” over time. With this view you can gauge whether the steps you take to improve your business work or not.

What’s Cooking?

These cohorts are one reason among a growing list to use Telerik Analytics, and we plan to improve the User Retention Cohort reports over time. We believe it can be relevant to define cohorts based on more shared characteristics. It could be the country the user lives in. It could be those users that have executed a specific feature in your app. It could be users that, on the other hand, haven’t performed a specific action. With such further analysis you would be able to understand segments of your users better and thus be able to take the best next step to improve their experience with your app.

You can read more here:

Recap of the Telerik ASP.NET 5 Webinar

$
0
0

ASP.NET 5 is around the corner. Yes, it is a major re-write and has lots of changes. But that does not mean web developers on Microsoft stack need to be worried. In fact, it's one of the best times to be an ASP.NET developer. ASP.NET 5 is now a modern lean, modular and cross-platform web development framework that works with your choice of OS and IDE/Editors. Good times ahead!

Relive the Content

On Oct 28, Telerik developer advocates Sam Basu, Ed Charbeneau and Michael Crump unpacked all things new and shiny in ASP.NET 5 during the Telerik ASP.NET Webinar. We had a huge audience who asked a LOT of questions​—understandable given how big an impact ASP.NET has on developers. If you couldn't make it for the live webinar, you can relive the webinar in its entirety—high definition recording available now!



Prize Winners

What’s a Telerik webinar without some awesome prizes? ​As they're some of the hottest gadgets around, we picked an Xbox One and a GoPro Camera—developers gotta have fun, right?

We picked two random winners (tentative until accepted) among webinar attendees—you win just for showing up!

Xbox One​—Frank Morales
GoPro Camera—Laura Ye

Congrats winners. Hope you enjoy your prizes!

Additional Question/Answers

One of the most enjoyable aspects of the webinars for us advocates is the Q/A at the end. We appreciate developers bringing up real-world questions and concerns on the latest technologies. And ASP.NET 5 is just a hot topic that invites a ton of questions.

While we tried to answer as many questions as we could on air, there were just way too many to cover. Here is some additional Q/A, expanding on what we covered about ASP.NET as well as the Telerik ASP.NET UI suites.

Q: How do you set up the Telerik private NuGet feed?
A: There is actually nothing to set up. Telerik is already hosting the NuGet bits to include UI for ASP.NET MVC controls into your applications. In Visual Studio, go to Options and NuGet Package Manager and simply add https://nuget.telerik.com/nuget as a Package Source. This will prompt you for your Telerik account credentials first time and once authenticated, gives you access the Telerik UI for ASP.NET MVC bits.


Q: What did you do to set up C# intellisense inside of Sublime Text when building ASP.NET applications?
A: Simply get the Kulture and OmniSharp packages for Sublime Text. Details @ http://www.omnisharp.net/.


Q: Can a Visual Studio ASP.NET project created on Windows be moved to OSX and run using the same setup process?
A: Although the scaffolded project structure of an ASP.NET 5 project on Windows is similar to what you’ll get in OSX/Linux, the runtimes are very different. The DNX runtime is hosted by either IIS or Kestrel for cross-platform compatibility and as such, an ASP.NET application needs to be built on the platform on which they are intended to run. There are detailed steps to set up ASP.NET on OSX and Linux, and project configuration continues to be very similar between systems.


Q: Are there easy migration paths for existing ASP.NET applications to MVC 6?
A: MVC 6 is a big re-write and migration paths will not be simple, in part, because of changed runtimes and API canvas availability. Please hold tight until ASP.NET 5 is released for the migration story to take shape. There will be guidance from Microsoft and the developer community.


Q: Is it possible to replace Bower with NuGet to manage front-end packages?
A: If the desired front-end packages exist in NuGet, by all means, you can use them instead of Bower. NuGet still plays a huge, in fact, a larger role in ASP.NET 5. Bower just gives developers additional options they didn't have before through Visual Studio alone.


Q: Can we define our own Tag Helpers in MVC 6?
A: Yes, creating your own Tag Helpers is easier than writing custom HtmlHelpers from the past.


Q: Now that configuration is done in .JSON rather than .XML, how do we add comments to our configurations?
A: At this time, there does not appear to be a way to add comments within the actual .JSON file itself.


Q: Would the config.json files allow different connection strings for various development/production environments?
A: Yes, you would use config.development.json and config.production.json to allow for different connection strings.


Q: Can you swap out the IOC container in MVC 6 with something like Autofac?
A: Absolutely, we covered this in detail on the Telerik Developer Network.


Q: Will Visual Studio automatically convert Web.config to the new Project.json on solution upgrade?
A: Keep in mind, these files serve slightly different purposes, and as such, we do not know of an automatic conversion strategy. So, there may be some manual mapping to move over configurations and dependencies​—look for the migration strategy to take shape as ASP.NET 5 is released next year.


Q: What would be the status of the Telerik UI suites moving into ASP.NET 5?
A: We’re very excited about ASP.NET 5 and your beloved Telerik UI suites will be ready when vNext of ASP.NET finally ships. In fact, we’re as ready as it can get right now. Both Telerik UI for ASP.NET Ajax and UI for ASP.NET MVC have existing support for Visual Studio 2015. The WebForms suite will be fully supported on top of .NET Framework 4.6. The MVC suite is already boasting support for ASP.NET 5 Beta 7 of MVC 6. We’re working closely with Microsoft on the cross-platform story and to utilize framework enhancements to offer the best possible ASP.NET tooling for developers.

Resources

Webinar Recording - https://youtu.be/EnfyJKSZvMU
Sam’s Deck - http://1drv.ms/1hQArOp
Ed’s Deck - http://1drv.ms/1KL49LS

That’s a Wrap

This ​may be one of the best times to be a ASP.NET developer. Yes, there could be some hesitancy with all of the changes that ASP.NET 5 is bringing to the table. But this was a much needed overhaul to make ASP.NET 5 a modern, lean, modular and more importantly, cross-platform web development framework. So go ahead and start dreaming up your next web application in ASP.NET 5—Telerik DevCraft tooling is right alongside to help you. Adios and have fun coding! 

Kendo UI Dips its Small Toe in the Web Component Pool

$
0
0

Kendo UI is dipping its toe into the murky pool of web components and specifically Custom Elements. Since the Kendo UI 2015 Q3 release on September 30th, it's been possible to instantiate a widget using a custom element. Now you might be thinking, "Murky? Why would you say that?" I am sayingthisformanyreasons, but I will limit my rationalization here to two reasons:

  1. Browser vendors are not in perfect harmony over the details of the specifications as of yet. ​This means native browser support is currently weak. Unless, of course, one uses a polyfill, but even then browser support is lacking (IE 11+ only). Consider that the least debated specification of four, Custom Elements, is only supported natively in Chrome & Opera today. 

    Kendo UI and the Web Component Pool 

  2. A consensus is rising that the value of each individual specification under the banner of "Web Components" is not yet realized in terms of real world development value. That is, the value of the specifications could, and more than likely will, come later when we (i.e. the community) find a use not conceived upon creation. This, of course, requires a reasonable amount of native adoption among browsers, so developers can have their way with it. Which is currently not the case.

Now, you might be thinking, "Why, after that rather optimistic perspective, are you guys offering a new instantiation pattern using custom elements?" Good question! The answer is simple. We are dipping our toe into a potential future, but pragmatically we know it is not yet a known future.

Given the quality of Kendo UI, we believe we owe it to our users to intelligently travel a few steps down any road that might help them be better developers. Can web components help you? Are they the future? Well, only time will tell. We all know that simply saying web components are the future does not make them the future. To assert with even a hint of dogma that they are the future clearly risks that the future is at worst nothing but a self-fulfilling prophecy.

Truth is, we don't know where this crazy web platform ride will take us. Anyone who says otherwise isn't being honest about where we have been and where we are going. Heck, today from a software perspective, a whole lot of the applications run on a platform that was only ever intended to share linked text documents. The web is still very much a wild frontier with frontier justice.

Now, if these new web component specifications do happen to become relevant and helpful to developers, regardless of the hype, we naturally want to be ready to give that to our users. After all, who wouldn't want to believe in the following sentiment?

By combining these four capabilities web developers can create declarative components (Custom Elements) which are fully encapsulated (Shadow DOM). These components can describe their own views (Template Element) and can be easily packaged for distribution to other developers (HTML Imports). When these specifications become available in all major browsers, we are likely to see developer creativity explode as many endeavor to create reusable components to solve common problems or address deficiencies in the standard HTML toolkit (from Databinding With Web Components). - Rob Eisenberg

I want to believe in a jQuery plugin utopia where plugins are native and all my problems melt away. It's just that nothing about the past would leave me to believe that this is the assured future. Instead, I think it will likely be the case that some aspect of the web component specifications might find itself embedded into the unknowable flow of the development stream. It is on that notion that we move forward, not because we know something you don't, but because we simply don't know which way the stream will flow. However, we know enough that we want to be prepared to move quickly if web components do find a path forward.

With that said, I will now explain our initial step into the web components space.

Instantiate Kendo UI Widgets Declaratively Using a Custom Kendo Element

As of the Q3 release, it​'s possible to declaratively instantiate a widget using custom HTML. Below I demonstrate how to create a Kendo UI DropDownList using a custom Kendo HTML element.



Once Kendo has determined that your browser supports the custom elements API the <kendo-dropdownlist> markup shown above will be turned into a custom HTML element and a widget instance (with the proper element) will become a child of the custom element. 

Kendo UI Custom Dropdown List

Any of the configuration options that are available to a widget can be passed as HTML attributes (e.g.
value="Orange").

To bind an event handler during instantiation, simply give the custom Kendo HTML an on-event="" attribute that names a function that can be accessed from the global scope.

<script>
var callbackFunction = function(){console.log('change fired!')};
</script>

<kendo-dropdownlist value="Orange" on-change="callbackFunction">
    <option>Black</option>
    <option>Orange</option>
    <option>Grey</option>
</kendo-dropdownlist>

As I've described, the use of custom elements will, of course, only work natively in recent versions of Chrome and Opera without a polyfill.

Since the Kendo UI implementation relies only on the Custom Element API, only the Custom Element API needs to be polyfilled for custom Kendo HTML to work properly in more browsers (e.g. IE10, Safari, and Firefox).

To do this you'll need to load one of the polyfills listed below before loading Kendo UI:

  1. <script src="document-register-element.js"></script>
    (Note: Only Polyfills Custom Elements for modern browsers and IE10+)
  2. <script src="CustomElements.js"></script>
    (Note: Only Polyfills Custom Elements for current version of modern browsers and IE11+)

If you intend to use more than just the Custom Elements API from the Web Components specifications, then you can consider using one of the broader polyfills available:

  1. <script src="webcomponents-lite.js"></script>
    (Note: Polyfills Web Components API except Shadow DOM for current version of modern browsers and IE11+)
  2. <script src="webcomponents.js"></script>
    (Note: Polyfills Web Components DOM API for current version of modern browsers and IE11+ only)

At this time, using one of the comprehensive browser polyfills above is not a requirement for using custom Kendo UI elements because, like I've already stated, Kendo only uses the Custom Element API. Therefore, at this time, this is all that minimally needs to be polyfilled.

Invoking Kendo UI Methods on Custom Kendo DOM Elements

When a Kendo UI widget is instantiated using a custom Kendo HTML element, the instance is not created behind the scenes using the jQuery plugin pattern. Instead, the widget is created using the init() method and the instance becomes a child of the custom HTML element (i.e. <kendo-dropdownlist>), which literally inherits from the HTMLElement DOM Interface.

Invoking Kendo UI Methods on Custom Kendo DOM Elements

The methods associated with widgets (including inherited methods like bind()) are mixed into the prototypical inheritance chain of the custom Kendo HTML element. This means, to invoke a widget method you will have to call methods on the custom DOM element itself.

For example, to get the value of the DropDownList widget example we have been using in this article you could use one of the following lines of JavaScript:

//using jQuery
$('kendo-dropdownlist').get(0).value(); //logs "Orange"
$('kendo-dropdownlist')[0].value(); //logs "Orange"
 
//or not using jQuery
document.querySelector('kendo-dropdownlist').value();  //logs "Orange"

Why Use Custom Kendo Elements?

I​'ll close this article with three reasons why custom Kendo elements might be an appealing development option today.

  1. While jQuery remains a hard dependency, it is possible to avoid the jQuery instantiation pattern to create widgets by using custom Kendo elements instead. Additionally, after widget creation properties and methods are accessed off the custom DOM element itself instead of using jQuery methods.
  2. Using a custom Kendo element moves the markup itself closer to being semantically sound and this, potentially, has benefits for search engines and developers debugging and developing HTML markup.
  3. Having a simple interface (HTML & attributes) for creating Kendo UI widgets opens their usage up to developers who are not comfortable with JavaScript.

BlogBanner_KendoUI
Viewing all 4135 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>