Blogs

The exporting functionality is built-in in the ShieldUI Grid component, which makes it very easy to be enabled. Using just configuration options, developers can set up the spreadsheet header, the data source to be used for retrieving the rows, individual column options, and etc. For complex scenarios, there are several commands that can be overriden, where custom settings for the general as well specific rows and columns, can be specified.

The Excel export functionality is available for all platforms - JavaScript&HTML5, ASP.NET, ASP.NET MVC and Java Apache Wicket. For more information check the documentation and the live demo sections.

The introduction of HTML 5 facilitated the writing of validation logic on users' form controls, allowing the creation of usable forms with less or no scripting. Now it is easy to mark form fields with attributes to define what kind of validation hould be applied. The REQUIRED attribute marks the designated field as required and that form can not be posted without a value entered. The PATTERN attribute applied to a field defines that field content should correspond to predefined regular expression. Both attributes can be combined on a single form field hinting that field is required and should obey a given pattern.

And now comes the interesting part. What happens if the user wants to define different validation messages when field is required and when it contradicts a given pattern? We can use field DATA attributes to customize our error messages and show a different one in each error case. Data attributes are valid HTML5, they can be used in any browser that supports HTML5 doctypes. In addition to aiding backwards compatibility, this also ensures that custom data attributes will remain a scalable, cross-platform solution well into the future. Data attributes can store different data which can be useful in later page processing.

Now let us look at the following form containing two input fields. They are meant to store a person's firstname and lastname. They are marked as required and also the fields should contain only letters.

	<form>		
        <p>
            <label for="firstname">First Name:</label>
            <input type="text" id="firstname" required pattern="^[A-Za-z\-]+$" 
	    data-error="Firstname must not be empty." data-pattern-error="Firstname must contain only letters.">
        </p>             
        <p>
            <label for="lastname">Last Name:</label>
            <input type="text" id="lastname" required pattern="^[A-Za-z\-]+$" 
	    data-error="Lastname must not be empty." data-pattern-error="Lastname must contain only letters.">
        </p>
	....

A small script paragraph comes into hand to help us define if there is invalid field on the form. Then we can iterate through invalid fields' list and check each one if there is a pattern mismatch.

    <script type="text/javascript">
	errorItems = self.form.find(":invalid");
	errorItems.each(function(index, node) {
		var item = $(this);		
		var message = (node.validity.patternMismatch ? node.dataset.patternError : node.dataset.error) || "Invalid value.";
		item.get(0).setCustomValidity(message);
	});
    </script>

If a form field is marked with invalid style, then it has failed the validation process. We extract those fields and loop through them. Dependent on a pattern mismatch we use the pattern error message or the other one. Then we can add those messages to a summary list and display them to alert the user. We can see how the data attributes have come to help and easily solve the error message issue. By default we can use the TITLE attribute to store a validation message for the field. But that message also appears as tooltip message when hovering the control. So appears that the solution with using data attributes is more convenient and easy to implement.

Rate limiting, also known as request throttling, is an important mechanism for controlling how often web resources are accessed from a client. Implementing it on your web application or service will allow you to utilize its resources better and protect it from a high volume of malicious requests. In this article we will demonstrate how to implement and setup request throttling in an ASP.NET MVC application.

ASP.NET MVC applications handle each request through action methods that are defined in a controller class. These action methods are the entry point for each request and most of the processing is done there.

The ASP.NET MVC framework provides the ActionFilterAttribute base class that can be used to implement an attribute, applied to a controller action, which modifies the way in which the action is executed. With its help we created a custom action filter, which checks whether a certain action has been executed more than the allowed number of times, within a given period, and if so, return the 429 Rate Limit Exceeded HTTP error along with some details about it.

Below is the complete code of the custom action filter class we have implemented. It uses the runtime cache to store counts for each request made by a certain client to a certain action and method, and if the configured number of requests is exceeded before that cache entry expires, a 429 HTTP error will be returned, instead of proceeding with the action.

using System;
using System.Web;
using System.Web.Caching;
using System.Web.Mvc;
namespace MyMvcProject.Filters
{
    public enum TimeUnit
    {
        Minute = 60,
        Hour = 3600,
        Day = 86400
    }
    [AttributeUsage(AttributeTargets.Method, AllowMultiple = true)]
    public class ThrottleAttribute : ActionFilterAttribute
    {
        public TimeUnit TimeUnit { get; set; }
        public int Count { get; set; }
        public override void OnActionExecuting(ActionExecutingContext filterContext)
        {
            var seconds = Convert.ToInt32(TimeUnit);
            var key = string.Join(
                "-",
                seconds,
                filterContext.HttpContext.Request.HttpMethod,
                filterContext.ActionDescriptor.ControllerDescriptor.ControllerName,
                filterContext.ActionDescriptor.ActionName,
                filterContext.HttpContext.Request.UserHostAddress
            );
            // increment the cache value
            var cnt = 1;
            if (HttpRuntime.Cache[key] != null) {
                cnt = (int)HttpRuntime.Cache[key] + 1;
            }
            HttpRuntime.Cache.Insert(
                key,
                cnt,
                null,
                DateTime.UtcNow.AddSeconds(seconds),
                Cache.NoSlidingExpiration,
                CacheItemPriority.Low,
                null
            );
            if (cnt > Count)
            {
                filterContext.Result = new ContentResult
                {
                    Content = "You are allowed to make only " + Count + " requests per " + TimeUnit.ToString().ToLower()
                };
                filterContext.HttpContext.Response.StatusCode = 429;
            }
        }
    }
}

Here is an example how to use the attribute in a controller class. In it we add different rate limits for the same action - 5 requests within a minute, 20 requests for an hour and 100 requests for a day.

        [Throttle(TimeUnit = TimeUnit.Minute, Count = 5)]
        [Throttle(TimeUnit = TimeUnit.Hour, Count = 20)]
        [Throttle(TimeUnit = TimeUnit.Day, Count = 100)]
        [RequireHttps, HttpPost, ValidateAntiForgeryToken, ActionName("login")]
        public ActionResult Login(LoginViewModel model, string returnUrl)
        {
            // login code here ...
        }

Adding request throttling this way is a quick and easy way to make your web applications more secure, stable and harder to overload.

Bootstrap has prevailed as one of the most widely used front-end systems. There is a large number of alternative frameworks, such as Foundation, Fbootstrapp, BootMetro and Kickstrap. However, there are good reasons why Bootstrap has become so popular. This blog lists just some of the reasons why you should choose Bootstrap too.

Getting Started

In order to take advantage of Bootstrap, all you need to do is download and extract the files from the GitHub repository. Including references to these files in your html files gives access to all Bootstrap classes, which can be applied to the html elements to automatically take care of styling, positioning and responsiveness.

Easy to Learn

Many users have found that Bootstrap has a smooth learning curve and is easy to get used to. Its syntax is as intuitive, as the architecture and the layout system.

Well documented

In addition to all advantages listed this far, Bootstrap is very well documented and has a wealth of examples on the official site. This not only helps with learning, but also keeps things ordered in a neat reference. Every time one wants to go back and check on some class or element, it is easy to do - all elements are included in a single page, which includes a good navigation section.

Additional resources

Once one has mastered the basics, there is a large number of sites, which offer advanced code snippets for Bootstrap, cool designs and complete themes. PrepBootstrap and Bootsnipp are just two of the many good resources to look at.

Complete Themes

Sites like PrepBootstrap and Wrapbootstrap are two examples of sites, which feature free and premium templates and themes. Themes are pretty much complete websites, some of which with advanced options, such as dashboards and third party widgets.

A wealth of plugins

Bootstrap plays nice with many of todays JS widgets and this makes it easy to integrate them into a custom theme or page. There is also a large number of plugins which you can use to enhance your visual presentation. This example demonstrates an integration of the ShieldUI Jquery plugins into a bootstrap layout, which results into a sleek, appealing presentation, which is also responsive and usable on any device.

Layout

Through its powerful Grid layout system, Bootstrap takes care of all the positioning and responsiveness problems, which developers had to tackle on their own previously. By adding just a few classes to the div elements on the page, developers can automatically solve major headaches, such as rendering on smaller devices and application appearance on a variety of screen resolutions.

Today we look at creating a Bootstrap Dashboard application. This layout is increasingly popular lately. It provides both a wealth of data for the user to consider and a responsive layout, which covers a wide variety of devices.

For the sample used in this blog, I have used the ShieldUI web development framework, which offers all of the widgets utilized.
The complete sample is available for download here.

The finished presentation looks like this:

The sections below elaborate a little bit more on the sections used in the sample, and the components employed in creating them. You can download the sample and review the code further.

User Profile
This section uses a standard bootstrap panel to host basic user details. Such are a user/employee name, department and position. In the footer section of the panel is a QR Code, which contains additional information and can be extended to encode an URL to a specific user page with full profile data, for example.
The footer for the panel holds a div with id="qr1". This is where the QR Code will be initialized, when the page loads. All other elements are standard Bootstrap classes, applied on html elements, which is all it takes to address a large number of issues and development challenges, related to positioning and responsiveness.

User Details
This segment on the page is similar to the previous one, however it lists specific skills. To the right of each skill is a rating component which signifies the level of proficiency in each area. The value for each rating can be modified by simply hovering over the element and choosing a new value.
As with the first panel, the footer contains a QR Code, which contains an encoded value for further drill-down, such as a separate page or url.
All widget elements, such as the QR and Rating controls are represented by a simple div element, which has an ID. This ID will be used at runtime to generate a corresponding widget.

Quarterly Performance Section
This section of the Dashboard represents quarterly data via a Jquery Chart plugin. This sample contains two series, which can plot personal, employee or company data. The number of series can easily be set to accommodate more data; however keeping the number of series to a low minimum ensures good readability.
To keep things simple, the sample uses random data, however it can be extended to fetch the data from anywhere. The dataSeries property is used to describe the two types of series rendered in the chart – line and bar series.

Overall performance Section
This section is yet another panel, which holds visualization data. This simple setup utilizes a progress bar, which signifies performance, or percent completion of a task or target. This is a very quick visual indicator whether a certain goal has been met. The code can be easily extended to use different sets of colors – for example green when the target has been met, or red if there is underperformance.

Company Performance Section
This section involves slightly more code and because of this you can refer to the sample attached in this article for a complete reference. From a structural point of view, this panel section consists of three sub-sections.
The text subsection from the right is a straightforward indicator of what is being visualized – budget trends for example. The second sub-section holds three charts with simplified layouts – spark lines, which are used to convey trends.
The last subsection holds a highly visible text section, which directly conveys the numeric value for each row.

Full Company Data Section
This section holds a standard grid table, which lists row after row of data. This can be company data, or a list of all employees in a company. The widget allows sorting and paging options out-of-the-box. The section contains the panel declaration, such as header and body. Additionally, it contains a div with id="grid1", which will render the table layout at runtime.

As mentioned initially, the complete sample is available for download here. Feel free to download it and explore its contents and code fully.

After a recent post on bootstrap resources, we at the ShieldUI web team division, decided to add another useful entry, this time dedicated to free stock images and photos.

When working on any web presentation, it is often times the case that one finds himself in need of visual materials. While glyphs and fonts do offer some initial relief of such a task, each site and many smaller sections need good resolution images in order to offer a fully developed design.

In this blog entry, we post some useful sites that we have come across while looking for images.

SNAPWIRE SNAPS
Snapwire snaps offers a standard subscription for 7 weekly images, as well as the option to download anything from the site or from the available bundles. The download bundles contain weekly selections.

Snapographic
Snapographic offers a wider set of options. All of its content is categorized and allows browsing and downloading of images. There is the option to purchase a complete image zip package, otherwise each image can be downloaded separately.

Getrefe
This site offers mobile images. There is an archive section, which lists all the images available. The site also allows subscription.

New Old Stock
The site with a catchy name offers vintage photos from public archives. It contains a section about the creator of the site, as well as donate and submit sections.

Picjumbo
Picjumbo offers a categorized collection of images. The site contains many ads, so navigation is a little bit hard, however the images are free to download.

Deathtothestockphoto
This site with a memorable name offers a great selection of photos and images. It also offers a premium section which is the option to access a larger variety of photos.

Gratisography
This collection is offered by Bells design and contains free images and photos. The images are not categorized and the site offers the option for donating to the creator.

Unsplash
Unsplash offers a medium collection of high resolution stock photos. Each image has an author associated with it. The site offers the option to subscribe, as well as some other useful sections with information about the team behind the site.

Our development team recently added a new and highly anticipated feature to our jQuery Grid component - editing. This enhancement impacts both the Grid and the Data-source components, which both received major updates, to facilitate the functionality.

Editing

The editing feature allows end users to modify the records, rendered in the Grid layout, and persist these changes to the underlying data source. Although this feature is new to the ShieldUI Grid component, it is fully functional and very advanced. In its first installment, the functionality allows all standard types of editing - cell, row and batch updates, as well as external forms editing.
Cell Editing allows putting a single cell in edit mode and modifying its value. This is an alternative to the standard row editing, where a the whole row is editable. Batch Updates, on the other hand, allow putting multiple rows in edit mode and modifying and saving their values simultaneously.

Additionally, the Grid control supports an autosync feature, which is applicable for both cells and rows. It allows an update to take place as soon as the edited row or cell loses focus or the user clicks on another element. This is handy when one wants to remove all the buttons, associated with edit operations.
Binding to and manipulating data from a Web service is now possible. The following example demonstrates binding the grid component to a RESTful service.

Custom Editors are also supported for each data type. For example, a Boolean column/cell will render a checkbox when in edit mode. Likewise, a numeric column/cell will utilize the ShieldUI numeric input control, which only accepts numeric input and renders additional spin buttons to increase or decrease the value. This can be coupled with standard validation to provide required prerequisites for certain fields.

This outlines some of the newest editing options. For a complete demonstration of our latest features and widgets, please visit our demos section.

The jQuery window control is the latest addition to our component Suite, which has now grown significantly. The control allows showing predefined or dynamic text and content in a windowed container. This improves content separation on the page and allows additional styled prompts.

Features

As mentioned initially, the component is part of the ShieldUI JavaScript Suite, which is a growing collection of over 40 widget types. Combining different widgets in your web development project would allow you to take advantage of the similar API, architecture and styling options, reducing the learning curve and unifying the presentation. You can see all the controls in action in the following section.

Buuble chart series are similar to scatter charts. They resemble individual, disconnected points of data. Unlike scatter points, bubbles should not be used in "cluster" scenarios.

Getting Started
In order to take advantage of the functionality offered by the chart component, you will need to:

1. Include references to all required scripts.
2. Add the control declaration along with the desired properties.

<!DOCTYPE html>
<html>
<head>
<title>Shield Chart</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/shieldui-all.min.css" />
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/shieldui-all.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container" style="width:600px; height:400px;"></div>
<script type="text/javascript">
$(document).ready(function () {
	$("#container").shieldChart({
		  data: [
                     {
                         x: 3.45,
                         y: 26.4,
                         size: 26.4
                     },
                     {
                         x: 20.69,
                         y: 60.8,
                         size: 60.8
                     },
                     {
                         x: 60.02,
                         y: 86.8,
                         size: 86.8
                     },
                     {
                         x: 101.3,
                         y: 100,
                         size: 100
                     },
                     {
                          x: 151.7,
                          y: 112,
                          size: 112
                     }
                ]
	});
});
</script>
</body>
</html>

Unlike other series type, a bubble data point accepts three distinct values. The first two are similar to the scatter series type - x and y values, which determine the exact location of any given point. The third one is the size value, which determines the size of each bubble. This gives a visual presentation of the magnitude of each individual point.
Bubble chart series can be used with axis markers just like any other series type. Their presentation can be enhanced further by using tool-tips to show additional data when the user hovers over a point.

For a complete set of chart features and other controls, visit our online demos section, which contains fully functional samples along with all the required code.

Scatter charts render individual, disconnected points. Unlike line and area charts, scatter points do not convey trends well, but are used for individual data entries.

Getting Started

In order to take advantage of the functionality offered by the chart component, you will need to:

1. Include references to all required scripts.
2. Add the control declaration along with the desired properties.

<!DOCTYPE html>
<html>
<head>
<title>Shield Chart</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/shieldui-all.min.css" />
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/shieldui-all.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container" style="width:600px; height:400px;"></div>
<script type="text/javascript">
$(document).ready(function () {
	$("#container").shieldChart({
		 dataSeries: [{
                    seriesType: "scatter",
                    collectionAlias: "January 2008",
                    data: [[16.4, 5.4], [21.7, 2], [25.4, 3]]
                }, {
                    seriesType: "scatter",
                    collectionAlias: "January 2009",
                    data: [[6.4, 13.4], [1.7, 11], [5.4, 8]]
                }, {
                    seriesType: "scatter",
                    collectionAlias: "January 2010",
                    data: [[21.7, 3], [13.6, 3.5], [13.6, 3]]
                }]
	});
});
</script>
</body>
</html>

The scatter presentation is usually accompanied by Axis Markers. This feature adds horizontal or vertical (or both) markers, when the user hovers over a point. This allows more precise value tracking and matching. This can be further enhanced by the powerful tool-tip available in the chart, rendering a complete set of custom data, or even html elements.

For a complete set of chart features and other controls, visit our online demos section, which contains fully functional samples along with all the required code.