Search Results

Search found 19603 results on 785 pages for 'variable length'.

Page 407/785 | < Previous Page | 403 404 405 406 407 408 409 410 411 412 413 414  | Next Page >

  • Why my laptop sends ARP request to itself ?

    - by user58859
    I have just started to learn about protocols. While studying the packets in wireshark, I came across a ARP request sent by my machine to my own IP. Here is the details of the packet : No. Time Source Destination Protocol Info 15 1.463563 IntelCor_aa:aa:aa Broadcast ARP Who has 192.168.1.34? Tell 0.0.0.0 Frame 15: 42 bytes on wire (336 bits), 42 bytes captured (336 bits) Arrival Time: Jan 7, 2011 18:51:43.886089000 India Standard Time Epoch Time: 1294406503.886089000 seconds [Time delta from previous captured frame: 0.123389000 seconds] [Time delta from previous displayed frame: 0.123389000 seconds] [Time since reference or first frame: 1.463563000 seconds] Frame Number: 15 Frame Length: 42 bytes (336 bits) Capture Length: 42 bytes (336 bits) [Frame is marked: False] [Frame is ignored: False] [Protocols in frame: eth:arp] [Coloring Rule Name: ARP] [Coloring Rule String: arp] Ethernet II, Src: IntelCor_aa:aa:aa (aa:aa:aa:aa:aa:aa), Dst: Broadcast (ff:ff:ff:ff:ff:ff) Destination: Broadcast (ff:ff:ff:ff:ff:ff) Address: Broadcast (ff:ff:ff:ff:ff:ff) .... ...1 .... .... .... .... = IG bit: Group address (multicast/broadcast) .... ..1. .... .... .... .... = LG bit: Locally administered address (this is NOT the factory default) Source: IntelCor_aa:aa:aa (aa:aa:aa:aa:aa:aa) Address: IntelCor_aa:aa:aa (aa:aa:aa:aa:aa:aa) .... ...0 .... .... .... .... = IG bit: Individual address (unicast) .... ..0. .... .... .... .... = LG bit: Globally unique address (factory default) Type: ARP (0x0806) Address Resolution Protocol (request) Hardware type: Ethernet (0x0001) Protocol type: IP (0x0800) Hardware size: 6 Protocol size: 4 Opcode: request (0x0001) [Is gratuitous: False] Sender MAC address: IntelCor_aa:aa:aa (aa:aa:aa:aa:aa:aa) Sender IP address: 0.0.0.0 (0.0.0.0) Target MAC address: 00:00:00_00:00:00 (00:00:00:00:00:00) Target IP address: 192.168.1.34 (192.168.1.34) Here the sender's mac address is mine(Here I have hiden my mac address). target IP is mine. Why my machine is sending ARP request to itself? I found 3 packets of this type. There was no ARP reply for these packets. Can anybody explain me why it is? (My operating system is windows-7. I am directly connected to a wifi modem. I got these packets as soon as I started my connection.) I want one suggestion also. many places I read that RFC's are enough for study about protocols. I studied the RFC 826 on ARP. I personally feel that is not enough at all. Any suggestion regarding this? Is there more then 1 RFC for a protocol? I want to study about the protocols in very detail. Can anybody guide me for this? Thanks in advance.

    Read the article

  • Apache config that uses two document roots based on whether the requested resource exists in the first

    - by mattalexx
    Background I have a client site that consists of a CakePHP installation and a Magento installation: /web/example.com/ /web/example.com/app/ <== CakePHP /web/example.com/app/webroot/ <== DocumentRoot /web/example.com/app/webroot/store/ <== Magento /web/example.com/config/ <== Site-wide config /web/example.com/vendors/ <== Site-wide libraries The server runs Apache 2.2.3. The problem The whole company has FTP access and got used to clogging up the /web/example.com/, /web/example.com/app/webroot/, and /web/example.com/app/webroot/store/ directories with their own files. Sometimes these files need HTTP access and sometimes they don't. In any case, this mess makes my job harder when it comes to maintaining the site. Code merges, tarring the live code, etc, is very complicated and usually requires a bunch of filters. Abandoned solution At first, I thought I would set up a new subdomain on the same server, move all of their files there, and change their FTP chroot. But that wouldn't work for these reasons: Firstly, I have no idea (and neither do they remember) what marketing materials they've sent out that contain URLs to certain resources they've uploaded to the server, using the main domain, and also using abstract subdomains that use the main virtual host because it has ServerAlias *.example.com. So suddenly having them only use static.example.com isn't feasible. Secondly, The PHP scripts in their projects are potentially very non-portable. I want their files to stay in as similar an environment as they were built as I can. Also, I do not want to debug their code to make it portable. Half-baked solution After some thought, I decided to find a way to section off the actual website files into another directory that they would not touch. The company's uploaded files would stay where they were. This would ensure that I didn't break any of their projects that needed HTTP access. It would look something like this: /web/example.com/ <== A bunch of their files are in here /web/example.com/app/webroot/ <== 1st DocumentRoot; A bunch of their files are in here /web/example.com/app/webroot/store/ <== Some more are in here /web/example.com/site/ <== New dir; Contains only site files /web/example.com/site/app/ <== CakePHP /web/example.com/site/app/webroot/ <== 2nd DocumentRoot /web/example.com/site/app/webroot/store/ <== Magento /web/example.com/site/config/ <== Site-wide config /web/example.com/site/vendors/ <== Site-wide libraries After I made this change, I would not need to pay attention to anything except for the stuff within /web/example.com/site/ and my job would be a lot easier. I would be the only one changing stuff in there. So here's where the Apache magic would happen: I need an HTTP request to http://www.example.com/ to first use /web/example.com/app/webroot/ as the document root. If nothing is found (no miscellaneous uploaded company projects are found), try finding something within /web/example.com/site/app/webroot/. Another thing to keep in mind is, the site might have some problems if the $_SERVER['DOCUMENT_ROOT'] variable reads /web/example.com/app/webroot/ but the actual files are within /web/example.com/site/app/webroot/. It would be better if the DOCUMENT_ROOT environment variable could be /web/example.com/site/app/webroot/ for anything within the /web/example.com/site/app/webroot/ directory. Conclusion Is my half-baked solution possible with Apache 2.2.3? Is there a better way to solve this problem?

    Read the article

  • how to use ajax with json in ruby on rails

    - by rafik860
    I am implemeting a facebook application in rails using facebooker plugin, therefore it is very important to use this architecture if i want to update multiple DOM in my page. if my code works in a regular rails application it would work in my facebook application. i am trying to use ajax to let the user know that the comment was sent, and update the comments bloc. migration: class CreateComments < ActiveRecord::Migration def self.up create_table :comments do |t| t.string :body t.timestamps end end def self.down drop_table :comments end end controller: class CommentsController < ApplicationController def index @comments=Comment.all end def create @comment=Comment.create(params[:comment]) if request.xhr? @comments=Comment.all render :json=>{:ids_to_update=>[:all_comments,:form_message], :all_comments=>render_to_string(:partial=>"comments" ), :form_message=>"Your comment has been added." } else redirect_to comments_url end end end view: <script> function update_count(str,message_id) { len=str.length; if (len < 200) { $(message_id).innerHTML="<span style='color: green'>"+ (200-len)+" remaining</span>"; } else { $(message_id).innerHTML="<span style='color: red'>"+ "Comment too long. Only 200 characters allowed.</span>"; } } function update_multiple(json) { for( var i=0; i<json["ids_to_update"].length; i++ ) { id=json["ids_to_update"][i]; $(id).innerHTML=json[id]; } } </script> <div id="all_comments" > <%= render :partial=>"comments/comments" %> </div> Talk some trash: <br /> <% remote_form_for Comment.new, :url=>comments_url, :success=>"update_multiple(request)" do |f|%> <%= f.text_area :body, :onchange=>"update_count(this.getValue(),'remaining');" , :onkeyup=>"update_count(this.getValue(),'remaining');" %> <br /> <%= f.submit 'Post'%> <% end %> <p id="remaining" >&nbsp;</p> <p id="form_message" >&nbsp;</p> <br><br> <br> if i try to do alert(json) in the first line of the update_multiple function , i got an [object Object]. if i try to do alert(json["ids_to_update"][0]) in the first line of the update_multiple function , there is no dialog box displayed. however the comment got saved but nothing is updated. it seems like the object sent by rails is nil or cant be parsed by JSON.parse(json). questions: 1.how can javascript and rails know that i am dealing with json objects?deos ROR sent it a object format or a text format?how can it check that the json object has been sent 2.how can i see what is the returned json?do i have to parse it?how? 2.how can i debug this problem? 3.how can i get it to work?

    Read the article

  • NLog Exception Details Renderer

    - by jtimperley
    Originally posted on: http://geekswithblogs.net/jtimperley/archive/2013/07/28/nlog-exception-details-renderer.aspxI recently switch from Microsoft's Enterprise Library Logging block to NLog.  In my opinion, NLog offers a simpler and much cleaner configuration section with better use of placeholders, complemented by custom variables. Despite this, I found one deficiency in my migration; I had lost the ability to simply render all details of an exception into our logs and notification emails. This is easily remedied by implementing a custom layout renderer. Start by extending 'NLog.LayoutRenderers.LayoutRenderer' and overriding the 'Append' method. using System.Text; using NLog; using NLog.Config; using NLog.LayoutRenderers;   [ThreadAgnostic] [LayoutRenderer(Name)] public class ExceptionDetailsRenderer : LayoutRenderer { public const string Name = "exceptiondetails";   protected override void Append(StringBuilder builder, LogEventInfo logEvent) { // Todo: Append details to StringBuilder } }   Now that we have a base layout renderer, we simply need to add the formatting logic to add exception details as well as inner exception details. This is done using reflection with some simple filtering for the properties that are already being rendered. I have added an additional 'Register' method, allowing the definition to be registered in code, rather than in configuration files. This complements by 'LogWrapper' class which standardizes writing log entries throughout my applications. using System; using System.Collections.Generic; using System.Linq; using System.Reflection; using System.Text; using NLog; using NLog.Config; using NLog.LayoutRenderers;   [ThreadAgnostic] [LayoutRenderer(Name)] public sealed class ExceptionDetailsRenderer : LayoutRenderer { public const string Name = "exceptiondetails"; private const string _Spacer = "======================================"; private List<string> _FilteredProperties;   private List<string> FilteredProperties { get { if (_FilteredProperties == null) { _FilteredProperties = new List<string> { "StackTrace", "HResult", "InnerException", "Data" }; }   return _FilteredProperties; } }   public bool LogNulls { get; set; }   protected override void Append(StringBuilder builder, LogEventInfo logEvent) { Append(builder, logEvent.Exception, false); }   private void Append(StringBuilder builder, Exception exception, bool isInnerException) { if (exception == null) { return; }   builder.AppendLine();   var type = exception.GetType(); if (isInnerException) { builder.Append("Inner "); }   builder.AppendLine("Exception Details:") .AppendLine(_Spacer) .Append("Exception Type: ") .AppendLine(type.ToString());   var bindingFlags = BindingFlags.Instance | BindingFlags.Public; var properties = type.GetProperties(bindingFlags); foreach (var property in properties) { var propertyName = property.Name; var isFiltered = FilteredProperties.Any(filter => String.Equals(propertyName, filter, StringComparison.InvariantCultureIgnoreCase)); if (isFiltered) { continue; }   var propertyValue = property.GetValue(exception, bindingFlags, null, null, null); if (propertyValue == null && !LogNulls) { continue; }   var valueText = propertyValue != null ? propertyValue.ToString() : "NULL"; builder.Append(propertyName) .Append(": ") .AppendLine(valueText); }   AppendStackTrace(builder, exception.StackTrace, isInnerException); Append(builder, exception.InnerException, true); }   private void AppendStackTrace(StringBuilder builder, string stackTrace, bool isInnerException) { if (String.IsNullOrEmpty(stackTrace)) { return; }   builder.AppendLine();   if (isInnerException) { builder.Append("Inner "); }   builder.AppendLine("Exception StackTrace:") .AppendLine(_Spacer) .AppendLine(stackTrace); }   public static void Register() { Type definitionType; var layoutRenderers = ConfigurationItemFactory.Default.LayoutRenderers; if (layoutRenderers.TryGetDefinition(Name, out definitionType)) { return; }   layoutRenderers.RegisterDefinition(Name, typeof(ExceptionDetailsRenderer)); LogManager.ReconfigExistingLoggers(); } } For brevity I have removed the Trace, Debug, Warn, and Fatal methods. They are modelled after the Info methods. As mentioned above, note how the log wrapper automatically registers our custom layout renderer reducing the amount of application configuration required. using System; using NLog;   public static class LogWrapper { static LogWrapper() { ExceptionDetailsRenderer.Register(); }   #region Log Methods   public static void Info(object toLog) { Log(toLog, LogLevel.Info); }   public static void Info(string messageFormat, params object[] parameters) { Log(messageFormat, parameters, LogLevel.Info); }   public static void Error(object toLog) { Log(toLog, LogLevel.Error); }   public static void Error(string message, Exception exception) { Log(message, exception, LogLevel.Error); }   private static void Log(string messageFormat, object[] parameters, LogLevel logLevel) { string message = parameters.Length == 0 ? messageFormat : string.Format(messageFormat, parameters); Log(message, (Exception)null, logLevel); }   private static void Log(object toLog, LogLevel logLevel, LogType logType = LogType.General) { if (toLog == null) { throw new ArgumentNullException("toLog"); }   if (toLog is Exception) { var exception = toLog as Exception; Log(exception.Message, exception, logLevel, logType); } else { var message = toLog.ToString(); Log(message, null, logLevel, logType); } }   private static void Log(string message, Exception exception, LogLevel logLevel, LogType logType = LogType.General) { if (exception == null && String.IsNullOrEmpty(message)) { return; }   var logger = GetLogger(logType); // Note: Using the default constructor doesn't set the current date/time var logInfo = new LogEventInfo(logLevel, logger.Name, message); logInfo.Exception = exception; logger.Log(logInfo); }   private static Logger GetLogger(LogType logType) { var loggerName = logType.ToString(); return LogManager.GetLogger(loggerName); }   #endregion   #region LogType private enum LogType { General } #endregion } The following configuration is similar to what is provided for each of my applications. The 'application' variable is all that differentiates the various applications in all of my environments, the rest has been standardized. Depending on your needs to tweak this configuration while developing and debugging, this section could easily be pushed back into code similar to the registering of our custom layout renderer.   <?xml version="1.0"?>   <configuration> <configSections> <section name="nlog" type="NLog.Config.ConfigSectionHandler, NLog"/> </configSections> <nlog xmlns="http://www.nlog-project.org/schemas/NLog.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> <variable name="application" value="Example"/> <targets> <target type="EventLog" name="EventLog" source="${application}" log="${application}" layout="${message}${onexception: ${newline}${exceptiondetails}}"/> <target type="Mail" name="Email" smtpServer="smtp.example.local" from="[email protected]" to="[email protected]" subject="(${machinename}) ${application}: ${level}" body="Machine: ${machinename}${newline}Timestamp: ${longdate}${newline}Level: ${level}${newline}Message: ${message}${onexception: ${newline}${exceptiondetails}}"/> </targets> <rules> <logger name="*" minlevel="Debug" writeTo="EventLog" /> <logger name="*" minlevel="Error" writeTo="Email" /> </rules> </nlog> </configuration>   Now go forward, create your custom exceptions without concern for including their custom properties in your exception logs and notifications.

    Read the article

  • Parallelism in .NET – Part 6, Declarative Data Parallelism

    - by Reed
    When working with a problem that can be decomposed by data, we have a collection, and some operation being performed upon the collection.  I’ve demonstrated how this can be parallelized using the Task Parallel Library and imperative programming using imperative data parallelism via the Parallel class.  While this provides a huge step forward in terms of power and capabilities, in many cases, special care must still be given for relative common scenarios. C# 3.0 and Visual Basic 9.0 introduced a new, declarative programming model to .NET via the LINQ Project.  When working with collections, we can now write software that describes what we want to occur without having to explicitly state how the program should accomplish the task.  By taking advantage of LINQ, many operations become much shorter, more elegant, and easier to understand and maintain.  Version 4.0 of the .NET framework extends this concept into the parallel computation space by introducing Parallel LINQ. Before we delve into PLINQ, let’s begin with a short discussion of LINQ.  LINQ, the extensions to the .NET Framework which implement language integrated query, set, and transform operations, is implemented in many flavors.  For our purposes, we are interested in LINQ to Objects.  When dealing with parallelizing a routine, we typically are dealing with in-memory data storage.  More data-access oriented LINQ variants, such as LINQ to SQL and LINQ to Entities in the Entity Framework fall outside of our concern, since the parallelism there is the concern of the data base engine processing the query itself. LINQ (LINQ to Objects in particular) works by implementing a series of extension methods, most of which work on IEnumerable<T>.  The language enhancements use these extension methods to create a very concise, readable alternative to using traditional foreach statement.  For example, let’s revisit our minimum aggregation routine we wrote in Part 4: double min = double.MaxValue; foreach(var item in collection) { double value = item.PerformComputation(); min = System.Math.Min(min, value); } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } Here, we’re doing a very simple computation, but writing this in an imperative style.  This can be loosely translated to English as: Create a very large number, and save it in min Loop through each item in the collection. For every item: Perform some computation, and save the result If the computation is less than min, set min to the computation Although this is fairly easy to follow, it’s quite a few lines of code, and it requires us to read through the code, step by step, line by line, in order to understand the intention of the developer. We can rework this same statement, using LINQ: double min = collection.Min(item => item.PerformComputation()); Here, we’re after the same information.  However, this is written using a declarative programming style.  When we see this code, we’d naturally translate this to English as: Save the Min value of collection, determined via calling item.PerformComputation() That’s it – instead of multiple logical steps, we have one single, declarative request.  This makes the developer’s intentions very clear, and very easy to follow.  The system is free to implement this using whatever method required. Parallel LINQ (PLINQ) extends LINQ to Objects to support parallel operations.  This is a perfect fit in many cases when you have a problem that can be decomposed by data.  To show this, let’s again refer to our minimum aggregation routine from Part 4, but this time, let’s review our final, parallelized version: // Safe, and fast! double min = double.MaxValue; // Make a "lock" object object syncObject = new object(); Parallel.ForEach( collection, // First, we provide a local state initialization delegate. () => double.MaxValue, // Next, we supply the body, which takes the original item, loop state, // and local state, and returns a new local state (item, loopState, localState) => { double value = item.PerformComputation(); return System.Math.Min(localState, value); }, // Finally, we provide an Action<TLocal>, to "merge" results together localState => { // This requires locking, but it's only once per used thread lock(syncObj) min = System.Math.Min(min, localState); } ); Here, we’re doing the same computation as above, but fully parallelized.  Describing this in English becomes quite a feat: Create a very large number, and save it in min Create a temporary object we can use for locking Call Parallel.ForEach, specifying three delegates For the first delegate: Initialize a local variable to hold the local state to a very large number For the second delegate: For each item in the collection, perform some computation, save the result If the result is less than our local state, save the result in local state For the final delegate: Take a lock on our temporary object to protect our min variable Save the min of our min and local state variables Although this solves our problem, and does it in a very efficient way, we’ve created a set of code that is quite a bit more difficult to understand and maintain. PLINQ provides us with a very nice alternative.  In order to use PLINQ, we need to learn one new extension method that works on IEnumerable<T> – ParallelEnumerable.AsParallel(). That’s all we need to learn in order to use PLINQ: one single method.  We can write our minimum aggregation in PLINQ very simply: double min = collection.AsParallel().Min(item => item.PerformComputation()); By simply adding “.AsParallel()” to our LINQ to Objects query, we converted this to using PLINQ and running this computation in parallel!  This can be loosely translated into English easily, as well: Process the collection in parallel Get the Minimum value, determined by calling PerformComputation on each item Here, our intention is very clear and easy to understand.  We just want to perform the same operation we did in serial, but run it “as parallel”.  PLINQ completely extends LINQ to Objects: the entire functionality of LINQ to Objects is available.  By simply adding a call to AsParallel(), we can specify that a collection should be processed in parallel.  This is simple, safe, and incredibly useful.

    Read the article

  • ASP.NET MVC 3: Implicit and Explicit code nuggets with Razor

    - by ScottGu
    This is another in a series of posts I’m doing that cover some of the new ASP.NET MVC 3 features: New @model keyword in Razor (Oct 19th) Layouts with Razor (Oct 22nd) Server-Side Comments with Razor (Nov 12th) Razor’s @: and <text> syntax (Dec 15th) Implicit and Explicit code nuggets with Razor (today) In today’s post I’m going to discuss how Razor enables you to both implicitly and explicitly define code nuggets within your view templates, and walkthrough some code examples of each of them.  Fluid Coding with Razor ASP.NET MVC 3 ships with a new view-engine option called “Razor” (in addition to the existing .aspx view engine).  You can learn more about Razor, why we are introducing it, and the syntax it supports from my Introducing Razor blog post. Razor minimizes the number of characters and keystrokes required when writing a view template, and enables a fast, fluid coding workflow. Unlike most template syntaxes, you do not need to interrupt your coding to explicitly denote the start and end of server blocks within your HTML. The Razor parser is smart enough to infer this from your code. This enables a compact and expressive syntax which is clean, fast and fun to type. For example, the Razor snippet below can be used to iterate a collection of products and output a <ul> list of product names that link to their corresponding product pages: When run, the above code generates output like below: Notice above how we were able to embed two code nuggets within the content of the foreach loop.  One of them outputs the name of the Product, and the other embeds the ProductID within a hyperlink.  Notice that we didn’t have to explicitly wrap these code-nuggets - Razor was instead smart enough to implicitly identify where the code began and ended in both of these situations.  How Razor Enables Implicit Code Nuggets Razor does not define its own language.  Instead, the code you write within Razor code nuggets is standard C# or VB.  This allows you to re-use your existing language skills, and avoid having to learn a customized language grammar. The Razor parser has smarts built into it so that whenever possible you do not need to explicitly mark the end of C#/VB code nuggets you write.  This makes coding more fluid and productive, and enables a nice, clean, concise template syntax.  Below are a few scenarios that Razor supports where you can avoid having to explicitly mark the beginning/end of a code nugget, and instead have Razor implicitly identify the code nugget scope for you: Property Access Razor allows you to output a variable value, or a sub-property on a variable that is referenced via “dot” notation: You can also use “dot” notation to access sub-properties multiple levels deep: Array/Collection Indexing: Razor allows you to index into collections or arrays: Calling Methods: Razor also allows you to invoke methods: Notice how for all of the scenarios above how we did not have to explicitly end the code nugget.  Razor was able to implicitly identify the end of the code block for us. Razor’s Parsing Algorithm for Code Nuggets The below algorithm captures the core parsing logic we use to support “@” expressions within Razor, and to enable the implicit code nugget scenarios above: Parse an identifier - As soon as we see a character that isn't valid in a C# or VB identifier, we stop and move to step 2 Check for brackets - If we see "(" or "[", go to step 2.1., otherwise, go to step 3  Parse until the matching ")" or "]" (we track nested "()" and "[]" pairs and ignore "()[]" we see in strings or comments) Go back to step 2 Check for a "." - If we see one, go to step 3.1, otherwise, DO NOT ACCEPT THE "." as code, and go to step 4 If the character AFTER the "." is a valid identifier, accept the "." and go back to step 1, otherwise, go to step 4 Done! Differentiating between code and content Step 3.1 is a particularly interesting part of the above algorithm, and enables Razor to differentiate between scenarios where an identifier is being used as part of the code statement, and when it should instead be treated as static content: Notice how in the snippet above we have ? and ! characters at the end of our code nuggets.  These are both legal C# identifiers – but Razor is able to implicitly identify that they should be treated as static string content as opposed to being part of the code expression because there is whitespace after them.  This is pretty cool and saves us keystrokes. Explicit Code Nuggets in Razor Razor is smart enough to implicitly identify a lot of code nugget scenarios.  But there are still times when you want/need to be more explicit in how you scope the code nugget expression.  The @(expression) syntax allows you to do this: You can write any C#/VB code statement you want within the @() syntax.  Razor will treat the wrapping () characters as the explicit scope of the code nugget statement.  Below are a few scenarios where we could use the explicit code nugget feature: Perform Arithmetic Calculation/Modification: You can perform arithmetic calculations within an explicit code nugget: Appending Text to a Code Expression Result: You can use the explicit expression syntax to append static text at the end of a code nugget without having to worry about it being incorrectly parsed as code: Above we have embedded a code nugget within an <img> element’s src attribute.  It allows us to link to images with URLs like “/Images/Beverages.jpg”.  Without the explicit parenthesis, Razor would have looked for a “.jpg” property on the CategoryName (and raised an error).  By being explicit we can clearly denote where the code ends and the text begins. Using Generics and Lambdas Explicit expressions also allow us to use generic types and generic methods within code expressions – and enable us to avoid the <> characters in generics from being ambiguous with tag elements. One More Thing….Intellisense within Attributes We have used code nuggets within HTML attributes in several of the examples above.  One nice feature supported by the Razor code editor within Visual Studio is the ability to still get VB/C# intellisense when doing this. Below is an example of C# code intellisense when using an implicit code nugget within an <a> href=”” attribute: Below is an example of C# code intellisense when using an explicit code nugget embedded in the middle of a <img> src=”” attribute: Notice how we are getting full code intellisense for both scenarios – despite the fact that the code expression is embedded within an HTML attribute (something the existing .aspx code editor doesn’t support).  This makes writing code even easier, and ensures that you can take advantage of intellisense everywhere. Summary Razor enables a clean and concise templating syntax that enables a very fluid coding workflow.  Razor’s ability to implicitly scope code nuggets reduces the amount of typing you need to perform, and leaves you with really clean code. When necessary, you can also explicitly scope code expressions using a @(expression) syntax to provide greater clarity around your intent, as well as to disambiguate code statements from static markup. Hope this helps, Scott P.S. In addition to blogging, I am also now using Twitter for quick updates and to share links. Follow me at: twitter.com/scottgu

    Read the article

  • Twitter Bootstrap styling conflicts with plug-ins like jqGrid and other third part libraries

    - by Renso
    Issues:The concern is that the Twitter Bootstrap framework is that some of their css selectors are simply too generic and have incompatibility issues and conflicts with most third party plug-ins and css libraries, like jQuery-UI and jqGrid.My most pressing concern is only with the generic selector for the styling of "INPUT" controls.Some concerns:So basically anyone using BS (Bootstrap) will have to override styling 100% of the time on all input controls on all their web pages for all the plug-ins they use that render their own styling for input controls. This seems to chisel away any reason for using Bootstrap. Overriding Bootstrap css in this case seems illogical at best as it implies the BS styling is not correct or as granular as it is supposed to be. It also suggests you realize there is an issue here. Any person who has written a fair amount of css will realize that it is a mammoth task to to take an existing app, converting it to BS and then having to find all non-BS input controls and styling them all. The worst part is that there is no generic styling for this as each input control has a different source/context, some are regular tags and some belong to plug-ins, each with their own flavor of styling. For new web apps the challenge is not that different, each time you add a new plug-in you will have to test all facets of it, and I mean all of it, pop-ups, etc, that contain any kind of input control to make sure it is styled correctly. I am having a hard time seeing the benefits of BS in this context. So until the BS team addresses the issue, or not, you may be wondering what is the easiest solution.Help the community to drive this issue home by creating a new issue on github, see my entry here: https://github.com/twitter/bootstrap/issues/4008. As you can see I got some good and some negative feedback, but we all agree it is an issue. I do believe my solution below should be reverse compatible if the proper class declarations were followed as recommended by Bootstrap.The solution:Add a higher-level qualifier to the input selector, which may not break anything.  Add "control-group" and "controls" classes as higher-level selectors, as they have to be declared inside those classes anyway as far as I understand the design approach of BS. So in my example below can modify the css without possible breaking anything, see the css at the bottom. I tested this briefly and seems to render just as expected. May not be complete as I only spent a few minutes on the css. Your feedback will be greatly appreciated. <div class="control-group">    <label title="" for="Contact_FirstName" class="control-label">First Name</label>    <div class="controls">        <input type="text" value="" name="Contact.FirstName" id="Contact_FirstName" data-val-required="The Reader Contact&amp;#39;s First Name is required" data-val-length-min="2" data-val-length-max="250" data-val-length="The maximum length allowed for the Reader Contact&amp;#39;s First Name is 250 characters and must be two or more characters long" data-val="true" class="input-medium">        <span data-valmsg-replace="true" data-valmsg-for="Contact.FirstName" class="field-validation-valid"></span>    </div></div>Here are the SCSS (SASS) updates. In stead of just including the updates I decided to include the entire bootstrap SCSS file so you can just copy-and-paste it in stead of trying to figure out what selectors have changed./*! * Bootstrap v2.0.4 * Enhacement by Renso Hollhumer * Copyright 2012 Twitter, Inc * Licensed under the Apache License v2.0 * http://www.apache.org/licenses/LICENSE-2.0 * * Designed and built with all the love in the world @twitter by @mdo and @fat. * Enhancement by Renso Hollhumer: To isolate styling of INPUT tags to the Bootstrap context only */.clearfix {  *zoom: 1;}.clearfix:before,.clearfix:after {  display: table;  content: "";}.clearfix:after {  clear: both;}.hide-text {  font: 0/0 a;  color: transparent;  text-shadow: none;  background-color: transparent;  border: 0;}.input-block-level {  display: block;  width: 100%;  min-height: 28px;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  -ms-box-sizing: border-box;  box-sizing: border-box;}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section {  display: block;}audio,canvas,video {  display: inline-block;  *display: inline;  *zoom: 1;}audio:not([controls]) {  display: none;}html {  font-size: 100%;  -webkit-text-size-adjust: 100%;  -ms-text-size-adjust: 100%;}a:focus {  outline: thin dotted #333;  outline: 5px auto -webkit-focus-ring-color;  outline-offset: -2px;}a:hover,a:active {  outline: 0;}sub,sup {  position: relative;  font-size: 75%;  line-height: 0;  vertical-align: baseline;}sup {  top: -0.5em;}sub {  bottom: -0.25em;}img {  max-width: 100%;  vertical-align: middle;  border: 0;  -ms-interpolation-mode: bicubic;}#map_canvas img {  max-width: none;}button,input,select,textarea {  margin: 0;  font-size: 100%;  vertical-align: middle;}button,input {  *overflow: visible;  line-height: normal;}button::-moz-focus-inner,input::-moz-focus-inner {  padding: 0;  border: 0;}button,input[type="button"],input[type="reset"],input[type="submit"] {  cursor: pointer;  -webkit-appearance: button;}input[type="search"] {  -webkit-box-sizing: content-box;  -moz-box-sizing: content-box;  box-sizing: content-box;  -webkit-appearance: textfield;}input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button {  -webkit-appearance: none;}textarea {  overflow: auto;  vertical-align: top;}body {  margin: 0;  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;  font-size: 13px;  line-height: 18px;  color: #333333;  background-color: #ffffff;}a {  color: #0088cc;  text-decoration: none;}a:hover {  color: #005580;  text-decoration: underline;}.row {  margin-left: -20px;  *zoom: 1;}.row:before,.row:after {  display: table;  content: "";}.row:after {  clear: both;}[class*="span"] {  float: left;  margin-left: 20px;}.container,.navbar-fixed-top .container,.navbar-fixed-bottom .container {  width: 940px;}.span12 {  width: 940px;}.span11 {  width: 860px;}.span10 {  width: 780px;}.span9 {  width: 700px;}.span8 {  width: 620px;}.span7 {  width: 540px;}.span6 {  width: 460px;}.span5 {  width: 380px;}.span4 {  width: 300px;}.span3 {  width: 220px;}.span2 {  width: 140px;}.span1 {  width: 60px;}.offset12 {  margin-left: 980px;}.offset11 {  margin-left: 900px;}.offset10 {  margin-left: 820px;}.offset9 {  margin-left: 740px;}.offset8 {  margin-left: 660px;}.offset7 {  margin-left: 580px;}.offset6 {  margin-left: 500px;}.offset5 {  margin-left: 420px;}.offset4 {  margin-left: 340px;}.offset3 {  margin-left: 260px;}.offset2 {  margin-left: 180px;}.offset1 {  margin-left: 100px;}.row-fluid {  width: 100%;  *zoom: 1;}.row-fluid:before,.row-fluid:after {  display: table;  content: "";}.row-fluid:after {  clear: both;}.row-fluid [class*="span"] {  display: block;  width: 100%;  min-height: 28px;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  -ms-box-sizing: border-box;  box-sizing: border-box;  float: left;  margin-left: 2.127659574%;  *margin-left: 2.0744680846382977%;}.row-fluid [class*="span"]:first-child {  margin-left: 0;}.row-fluid .span12 {  width: 99.99999998999999%;  *width: 99.94680850063828%;}.row-fluid .span11 {  width: 91.489361693%;  *width: 91.4361702036383%;}.row-fluid .span10 {  width: 82.97872339599999%;  *width: 82.92553190663828%;}.row-fluid .span9 {  width: 74.468085099%;  *width: 74.4148936096383%;}.row-fluid .span8 {  width: 65.95744680199999%;  *width: 65.90425531263828%;}.row-fluid .span7 {  width: 57.446808505%;  *width: 57.3936170156383%;}.row-fluid .span6 {  width: 48.93617020799999%;  *width: 48.88297871863829%;}.row-fluid .span5 {  width: 40.425531911%;  *width: 40.3723404216383%;}.row-fluid .span4 {  width: 31.914893614%;  *width: 31.8617021246383%;}.row-fluid .span3 {  width: 23.404255317%;  *width: 23.3510638276383%;}.row-fluid .span2 {  width: 14.89361702%;  *width: 14.8404255306383%;}.row-fluid .span1 {  width: 6.382978723%;  *width: 6.329787233638298%;}.container {  margin-right: auto;  margin-left: auto;  *zoom: 1;}.container:before,.container:after {  display: table;  content: "";}.container:after {  clear: both;}.container-fluid {  padding-right: 20px;  padding-left: 20px;  *zoom: 1;}.container-fluid:before,.container-fluid:after {  display: table;  content: "";}.container-fluid:after {  clear: both;}p {  margin: 0 0 9px;}p small {  font-size: 11px;  color: #999999;}.lead {  margin-bottom: 18px;  font-size: 20px;  font-weight: 200;  line-height: 27px;}h1,h2,h3,h4,h5,h6 {  margin: 0;  font-family: inherit;  font-weight: bold;  color: inherit;  text-rendering: optimizelegibility;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small {  font-weight: normal;  color: #999999;}h1 {  font-size: 30px;  line-height: 36px;}h1 small {  font-size: 18px;}h2 {  font-size: 24px;  line-height: 36px;}h2 small {  font-size: 18px;}h3 {  font-size: 18px;  line-height: 27px;}h3 small {  font-size: 14px;}h4,h5,h6 {  line-height: 18px;}h4 {  font-size: 14px;}h4 small {  font-size: 12px;}h5 {  font-size: 12px;}h6 {  font-size: 11px;  color: #999999;  text-transform: uppercase;}.page-header {  padding-bottom: 17px;  margin: 18px 0;  border-bottom: 1px solid #eeeeee;}.page-header h1 {  line-height: 1;}ul,ol {  padding: 0;  margin: 0 0 9px 25px;}ul ul,ul ol,ol ol,ol ul {  margin-bottom: 0;}ul {  list-style: disc;}ol {  list-style: decimal;}li {  line-height: 18px;}ul.unstyled,ol.unstyled {  margin-left: 0;  list-style: none;}dl {  margin-bottom: 18px;}dt,dd {  line-height: 18px;}dt {  font-weight: bold;  line-height: 17px;}dd {  margin-left: 9px;}.dl-horizontal dt {  float: left;  width: 120px;  clear: left;  text-align: right;  overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;}.dl-horizontal dd {  margin-left: 130px;}hr {  margin: 18px 0;  border: 0;  border-top: 1px solid #eeeeee;  border-bottom: 1px solid #ffffff;}strong {  font-weight: bold;}em {  font-style: italic;}.muted {  color: #999999;}abbr[title] {  cursor: help;  border-bottom: 1px dotted #999999;}abbr.initialism {  font-size: 90%;  text-transform: uppercase;}blockquote {  padding: 0 0 0 15px;  margin: 0 0 18px;  border-left: 5px solid #eeeeee;}blockquote p {  margin-bottom: 0;  font-size: 16px;  font-weight: 300;  line-height: 22.5px;}blockquote small {  display: block;  line-height: 18px;  color: #999999;}blockquote small:before {  content: '\2014 \00A0';}blockquote.pull-right {  float: right;  padding-right: 15px;  padding-left: 0;  border-right: 5px solid #eeeeee;  border-left: 0;}blockquote.pull-right p,blockquote.pull-right small {  text-align: right;}q:before,q:after,blockquote:before,blockquote:after {  content: "";}address {  display: block;  margin-bottom: 18px;  font-style: normal;  line-height: 18px;}small {  font-size: 100%;}cite {  font-style: normal;}code,pre {  padding: 0 3px 2px;  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;  font-size: 12px;  color: #333333;  -webkit-border-radius: 3px;  -moz-border-radius: 3px;  border-radius: 3px;}code {  padding: 2px 4px;  color: #d14;  background-color: #f7f7f9;  border: 1px solid #e1e1e8;}pre {  display: block;  padding: 8.5px;  margin: 0 0 9px;  font-size: 12.025px;  line-height: 18px;  word-break: break-all;  word-wrap: break-word;  white-space: pre;  white-space: pre-wrap;  background-color: #f5f5f5;  border: 1px solid #ccc;  border: 1px solid rgba(0, 0, 0, 0.15);  -webkit-border-radius: 4px;  -moz-border-radius: 4px;  border-radius: 4px;}pre.prettyprint {  margin-bottom: 18px;}pre code {  padding: 0;  color: inherit;  background-color: transparent;  border: 0;}.pre-scrollable {  max-height: 340px;  overflow-y: scroll;}.label,.badge {  font-size: 10.998px;  font-weight: bold;  line-height: 14px;  color: #ffffff;  vertical-align: baseline;  white-space: nowrap;  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);  background-color: #999999;}.label {  padding: 1px 4px 2px;  -webkit-border-radius: 3px;  -moz-border-radius: 3px;  border-radius: 3px;}.badge {  padding: 1px 9px 2px;  -webkit-border-radius: 9px;  -moz-border-radius: 9px;  border-radius: 9px;}a.label:hover,a.badge:hover {  color: #ffffff;  text-decoration: none;  cursor: pointer;}.label-important,.badge-important {  background-color: #b94a48;}.label-important[href],.badge-important[href] {  background-color: #953b39;}.label-warning,.badge-warning {  background-color: #f89406;}.label-warning[href],.badge-warning[href] {  background-color: #c67605;}.label-success,.badge-success {  background-color: #468847;}.label-success[href],.badge-success[href] {  background-color: #356635;}.label-info,.badge-info {  background-color: #3a87ad;}.label-info[href],.badge-info[href] {  background-color: #2d6987;}.label-inverse,.badge-inverse {  background-color: #333333;}.label-inverse[href],.badge-inverse[href] {  background-color: #1a1a1a;}table {  max-width: 100%;  background-color: transparent;  border-collapse: collapse;  border-spacing: 0;}.table {  width: 100%;  margin-bottom: 18px;}.table th,.table td {  padding: 8px;  line-height: 18px;  text-align: left;  vertical-align: top;  border-top: 1px solid #dddddd;}.table th {  font-weight: bold;}.table thead th {  vertical-align: bottom;}.table caption + thead tr:first-child th,.table caption + thead tr:first-child td,.table colgroup + thead tr:first-child th,.table colgroup + thead tr:first-child td,.table thead:first-child tr:first-child th,.table thead:first-child tr:first-child td {  border-top: 0;}.table tbody + tbody {  border-top: 2px solid #dddddd;}.table-condensed th,.table-condensed td {  padding: 4px 5px;}.table-bordered {  border: 1px solid #dddddd;  border-collapse: separate;  *border-collapse: collapsed;  border-left: 0;  -webkit-border-radius: 4px;  -moz-border-radius: 4px;  border-radius: 4px;}.table-bordered th,.table-bordered td {  border-left: 1px solid #dddddd;}.table-bordered caption + thead tr:first-child th,.table-bordered caption + tbody tr:first-child th,.table-bordered caption + tbody tr:first-child td,.table-bordered colgroup + thead tr:first-child th,.table-bordered colgroup + tbody tr:first-child th,.table-bordered colgroup + tbody tr:first-child td,.table-bordered thead:first-child tr:first-child th,.table-bordered tbody:first-child tr:first-child th,.table-bordered tbody:first-child tr:first-child td {  border-top: 0;}.table-bordered thead:first-child tr:first-child th:first-child,.table-bordered tbody:first-child tr:first-child td:first-child {  -webkit-border-top-left-radius: 4px;  border-top-left-radius: 4px;  -moz-border-radius-topleft: 4px;}.table-bordered thead:first-child tr:first-child th:last-child,.table-bordered tbody:first-child tr:first-child td:last-child {  -webkit-border-top-right-radius: 4px;  border-top-right-radius: 4px;  -moz-border-radius-topright: 4px;}.table-bordered thead:last-child tr:last-child th:first-child,.table-bordered tbody:last-child tr:last-child td:first-child {  -webkit-border-radius: 0 0 0 4px;  -moz-border-radius: 0 0 0 4px;  border-radius: 0 0 0 4px;  -webkit-border-bottom-left-radius: 4px;  border-bottom-left-radius: 4px;  -moz-border-radius-bottomleft: 4px;}.table-bordered thead:last-child tr:last-child th:last-child,.table-bordered tbody:last-child tr:last-child td:last-child {  -webkit-border-bottom-right-radius: 4px;  border-bottom-right-radius: 4px;  -moz-border-radius-bottomright: 4px;}.table-striped tbody tr:nth-child(odd) td,.table-striped tbody tr:nth-child(odd) th {  background-color: #f9f9f9;}.table tbody tr:hover td,.table tbody tr:hover th {  background-color: #f5f5f5;}table .span1 {  float: none;  width: 44px;  margin-left: 0;}table .span2 {  float: none;  width: 124px;  margin-left: 0;}table .span3 {  float: none;  width: 204px;  margin-left: 0;}table .span4 {  float: none;  width: 284px;  margin-left: 0;}table .span5 {  float: none;  width: 364px;  margin-left: 0;}table .span6 {  float: none;  width: 444px;  margin-left: 0;}table .span7 {  float: none;  width: 524px;  margin-left: 0;}table .span8 {  float: none;  width: 604px;  margin-left: 0;}table .span9 {  float: none;  width: 684px;  margin-left: 0;}table .span10 {  float: none;  width: 764px;  margin-left: 0;}table .span11 {  float: none;  width: 844px;  margin-left: 0;}table .span12 {  float: none;  width: 924px;  margin-left: 0;}table .span13 {  float: none;  width: 1004px;  margin-left: 0;}table .span14 {  float: none;  width: 1084px;  margin-left: 0;}table .span15 {  float: none;  width: 1164px;  margin-left: 0;}table .span16 {  float: none;  width: 1244px;  margin-left: 0;}table .span17 {  float: none;  width: 1324px;  margin-left: 0;}table .span18 {  float: none;  width: 1404px;  margin-left: 0;}table .span19 {  float: none;  width: 1484px;  margin-left: 0;}table .span20 {  float: none;  width: 1564px;  margin-left: 0;}table .span21 {  float: none;  width: 1644px;  margin-left: 0;}table .span22 {  float: none;  width: 1724px;  margin-left: 0;}table .span23 {  float: none;  width: 1804px;  margin-left: 0;}table .span24 {  float: none;  width: 1884px;  margin-left: 0;}form {  margin: 0 0 18px;}fieldset {  padding: 0;  margin: 0;  border: 0;}legend {  display: block;  width: 100%;  padding: 0;  margin-bottom: 27px;  font-size: 19.5px;  line-height: 36px;  color: #333333;  border: 0;  border-bottom: 1px solid #e5e5e5;}legend small {  font-size: 13.5px;  color: #999999;}.control-group .controls {    label,    input,    button,    select,    textarea {      font-size: 13px;      font-weight: normal;      line-height: 18px;    }}.control-group .controls {    input,    button,    select,    textarea {      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;    }}label {  display: block;  margin-bottom: 5px;}.control-group .controls {    select,    textarea,    input[type="text"],    input[type="password"],    input[type="datetime"],    input[type="datetime-local"],    input[type="date"],    input[type="month"],    input[type="time"],    input[type="week"],    input[type="number"],    input[type="email"],    input[type="url"],    input[type="search"],    input[type="tel"],    input[type="color"],    .uneditable-input {      display: inline-block;      height: 18px;      padding: 4px;      margin-bottom: 9px;      font-size: 13px;      line-height: 18px;      color: #555555;    }}.control-group .controls {    input,    textarea {      width: 210px;    }}.control-group .controls {    textarea {      height: auto;    }}.control-group .controls {    textarea,    input[type="text"],    input[type="password"],    input[type="datetime"],    input[type="datetime-local"],    input[type="date"],    input[type="month"],    input[type="time"],    input[type="week"],    input[type="number"],    input[type="email"],    input[type="url"],    input[type="search"],    input[type="tel"],    input[type="color"],    .uneditable-input {      background-color: #ffffff;      border: 1px solid #cccccc;      -webkit-border-radius: 3px;      -moz-border-radius: 3px;      border-radius: 3px;      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);      -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);      -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;      -moz-transition: border linear 0.2s, box-shadow linear 0.2s;      -ms-transition: border linear 0.2s, box-shadow linear 0.2s;      -o-transition: border linear 0.2s, box-shadow linear 0.2s;      transition: border linear 0.2s, box-shadow linear 0.2s;    }}.control-group .controls {    textarea:focus,    input[type="text"]:focus,    input[type="password"]:focus,    input[type="datetime"]:focus,    input[type="datetime-local"]:focus,    input[type="date"]:focus,    input[type="month"]:focus,    input[type="time"]:focus,    input[type="week"]:focus,    input[type="number"]:focus,    input[type="email"]:focus,    input[type="url"]:focus,    input[type="search"]:focus,    input[type="tel"]:focus,    input[type="color"]:focus,    .uneditable-input:focus {      border-color: rgba(82, 168, 236, 0.8);      outline: 0;      outline: thin dotted \9;      /* IE6-9 */      -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);      -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);      box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);    }}.control-group .controls {    input[type="radio"],    input[type="checkbox"] {      margin: 3px 0;      *margin-top: 0;      /* IE7 */      line-height: normal;      cursor: pointer;    }}.control-group .controls {    input[type="submit"],    input[type="reset"],    input[type="button"],    input[type="radio"],    input[type="checkbox"] {      width: auto;    }}.uneditable-textarea {  width: auto;  height: auto;}.control-group .controls {    select,    input[type="file"] {      height: 28px;      /* In IE7, the height of the select element cannot be changed by height, only font-size */      *margin-top: 4px;      /* For IE7, add top margin to align select with labels */      line-height: 28px;    }}.control-group .controls {    select {      width: 220px;      border: 1px solid #bbb;    }}.control-group .controls {    select[multiple],    select[size] {      height: auto;    }}.control-group .controls {    select:focus,    input[type="file"]:focus,    input[type="radio"]:focus,    input[type="checkbox"]:focus {      outline: thin dotted #333;      outline: 5px auto -webkit-focus-ring-color;      outline-offset: -2px;    }}.radio,.checkbox {  min-height: 18px;  padding-left: 18px;}.radio input[type="radio"],.checkbox input[type="checkbox"] {  float: left;  margin-left: -18px;}.controls > .radio:first-child,.controls > .checkbox:first-child {  padding-top: 5px;}.radio.inline,.checkbox.inline {  display: inline-block;  padding-top: 5px;  margin-bottom: 0;  vertical-align: middle;}.radio.inline + .radio.inline,.checkbox.inline + .checkbox.inline {  margin-left: 10px;}.control-group .controls {    .input-mini {      width: 60px;    }}.control-group .controls {    .input-small {      width: 90px;    }}.control-group .controls {    .input-medium {      width: 150px;    }}.control-group .controls {    .input-large {      width: 210px;    }}.input-xlarge {    .input-xlarge {      width: 270px;    }}.input-xxlarge {    .input-xxlarge {      width: 530px;    }}.control-group .controls {    input[class*="span"],    select[class*="span"],    textarea[class*="span"],    .uneditable-input[class*="span"],    .row-fluid input[class*="span"],    .row-fluid select[class*="span"],    .row-fluid textarea[class*="span"],    .row-fluid .uneditable-input[class*="span"] {      float: none;      margin-left: 0;    }}.input-append input[class*="span"],.input-append .uneditable-input[class*="span"],.input-prepend input[class*="span"],.input-prepend .uneditable-input[class*="span"],.row-fluid .input-prepend [class*="span"],.row-fluid .input-append [class*="span"] {  display: inline-block;}.control-group .controls {    input,    textarea,    .uneditable-input {      margin-left: 0;    }}input.span12, textarea.span12, .uneditable-input.span12 {  width: 930px;}input.span11, textarea.span11, .uneditable-input.span11 {  width: 850px;}input.span10, textarea.span10, .uneditable-input.span10 {  width: 770px;}input.span9, textarea.span9, .uneditable-input.span9 {  width: 690px;}input.span8, textarea.span8, .uneditable-input.span8 {  width: 610px;}input.span7, textarea.span7, .uneditable-input.span7 {  width: 530px;}input.span6, textarea.span6, .uneditable-input.span6 {  width: 450px;}input.span5, textarea.span5, .uneditable-input.span5 {  width: 370px;}input.span4, textarea.span4, .uneditable-input.span4 {  width: 290px;}input.span3, textarea.span3, .uneditable-input.span3 {  width: 210px;}input.span2, textarea.span2, .uneditable-input.span2 {  width: 130px;}input.span1, textarea.span1, .uneditable-input.span1 {  width: 50px;}input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly] {  cursor: not-allowed;  background-color: #eeeeee;  border-color: #ddd;}input[type="radio"][disabled],input[type="checkbox"][disabled],input[type="radio"][readonly],input[type="checkbox"][readonly] {  background-color: transparent;}.control-group.warning > label,.control-group.warning .help-block,.control-group.warning .help-inline {  color: #c09853;}.control-group.warning .checkbox,.control-group.warning .radio,.control-group.warning input,.control-group.warning select,.control-group.warning textarea {  color: #c09853;  border-color: #c09853;}.control-group.warning .checkbox:focus,.control-group.warning .radio:focus,.control-group.warning input:focus,.control-group.warning select:focus,.control-group.warning textarea:focus {  border-color: #a47e3c;  -webkit-box-shadow: 0 0 6px #dbc59e;  -moz-box-shadow: 0 0 6px #dbc59e;  box-shadow: 0 0 6px #dbc59e;}.control-group.warning .input-prepend .add-on,.control-group.warning .input-append .add-on {  color: #c09853;  background-color: #fcf8e3;  border-color: #c09853;}.control-group.error > label,.control-group.error .help-block,.control-group.error .help-inline {  color: #b94a48;}.control-group.error .checkbox,.control-group.error .radio,.control-group.error input,.control-group.error select,.control-group.error textarea {  color: #b94a48;  border-color: #b94a48;}.control-group.error .checkbox:focus,.control-group.error .radio:focus,.control-group.error input:focus,.control-group.error select:focus,.control-group.error textarea:focus {  border-color: #953b39;  -webkit-box-shadow: 0 0 6px #d59392;  -moz-box-shadow: 0 0 6px #d59392;  box-shadow: 0 0 6px #d59392;}.control-group.error .input-prepend .add-on,.control-group.error .input-append .add-on {  color: #b94a48;  background-color: #f2dede;  border-color: #b94a48;}.control-group.success > label,.control-group.success .help-block,.control-group.success .help-inline {  color: #468847;}.control-group.success .checkbox,.control-group.success .radio,.control-group.success input,.control-group.success select,.control-group.success textarea {  color: #468847;  border-color: #468847;}.control-group.success .checkbox:focus,.control-group.success .radio:focus,.control-group.success input:focus,.control-group.success select:focus,.control-group.success textarea:focus {  border-color: #356635;  -webkit-box-shadow: 0 0 6px #7aba7b;  -moz-box-shadow: 0 0 6px #7aba7b;  box-shadow: 0 0 6px #7aba7b;}.control-group.success .input-prepend .add-on,.control-group.success .input-append .add-on {  color: #468847;  background-color: #dff0d8;  border-color: #468847;}input:focus:required:invalid,textarea:focus:required:invalid,select:focus:required:invalid {  color: #b94a48;  border-color: #ee5f5b;}input:focus:required:invalid:focus,textarea:focus:required:invalid:focus,select:focus:required:invalid:focus {  border-color: #e9322d;  -webkit-box-shadow: 0 0 6px #f8b9b7;  -moz-box-shadow: 0 0 6px #f8b9b7;  box-shadow: 0 0 6px #f8b9b7;}.form-actions {  padding: 17px 20px 18px;  margin-top: 18px;  margin-bottom: 18px;  background-color: #f5f5f5;  border-top: 1px solid #e5e5e5;  *zoom: 1;}.form-actions:before,.form-actions:after {  display: table;  content: "";}.form-actions:after {  clear: both;}.uneditable-input {  overflow: hidden;  white-space: nowrap;  cursor: not-allowed;  background-color: #ffffff;  border-color: #eee;  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);}:-moz-placeholder {  color: #999999;}:-ms-input-placeholder {  color: #999999;}::-webkit-input-placeholder {  color: #999999;}.help-block,.help-inline {  color: #555555;}.help-block {  display: block;  margin-bottom: 9px;}.help-inline {  display: inline-block;  *display: inline;  /* IE7 inline-block hack */  *zoom: 1;  vertical-align: middle;  padding-left: 5px;}.input-prepend,.input-append {  margin-bottom: 5px;}.input-prepend input,.input-append input,.input-prepend select,.input-append select,.input-prepend .uneditable-input,.input-append .uneditable-input {  position: relative;  margin-bottom: 0;  *margin-left: 0;  vertical-align: middle;  -webkit-border-radius: 0 3px 3px 0;  -moz-border-radius: 0 3px 3px 0;  border-radius: 0 3px 3px 0;}.input-prepend input:focus,.input-append input:focus,.input-prepend select:focus,.input-append select:focus,.input-prepend .uneditable-input:focus,.input-append .uneditable-input:focus {  z-index: 2;}.input-prepend .uneditable-input,.input-append .uneditable-input {  border-left-color: #ccc;}.input-prepend .add-on,.input-append .add-on {  display: inline-block;  width: auto;  height: 18px;  min-width: 16px;  padding: 4px 5px;  font-weight: normal;  line-height: 18px;  text-align: center;  text-shadow: 0 1px 0 #ffffff;  vertical-align: middle;  background-color: #eeeeee;  border: 1px solid #ccc;}.input-prepend .add-on,.input-append .add-on,.input-prepend .btn,.input-append .btn {  margin-left: -1px;  -webkit-border-radius: 0;  -moz-border-radius: 0;  border-radius: 0;}.input-prepend .active,.input-append .active {  background-color: #a9dba9;  border-color: #46a546;}.input-prepend .add-on,.input-prepend .btn {  margin-right: -1px;}.input-prepend .add-on:first-child,.input-prepend .btn:first-child {  -webkit-border-radius: 3px 0 0 3px;  -moz-border-radius: 3px 0 0 3px;  border-radius: 3px 0 0 3px;}.input-append input,.input-append select,.input-append .uneditable-input {  -webkit-border-radius: 3px 0 0 3px;  -moz-border-radius: 3px 0 0 3px;  border-radius: 3px 0 0 3px;}.input-append .uneditable-input {  border-right-color: #ccc;  border-left-color: #eee;}.input-append .add-on:last-child,.input-append .btn:last-child {  -webkit-border-radius: 0 3px 3px 0;  -moz-border-radius: 0 3px 3px 0;  border-radius: 0 3px 3px 0;}.input-prepend.input-append input,.input-prepend.input-append select,.input-prepend.input-append .uneditable-input {  -webkit-border-radius: 0;  -moz-border-radius: 0;  border-radius: 0;}.input-prepend.input-append .add-on:first-child,.input-prepend.input-append .btn:first-child {  margin-right: -1px;  -webkit-border-radius: 3px 0 0 3px;  -moz-border-radius: 3px 0 0 3px;  border-radius: 3px 0 0 3px;}.input-prepend.input-append .add-on:last-child,.input-prepend.input-append .btn:last-child {  margin-left: -1px;  -webkit-border-radius: 0 3px 3px 0;  -moz-border-radius: 0 3px 3px 0;  border-radius: 0 3px 3px 0;}.search-query {  padding-right: 14px;  padding-right: 4px \9;  padding-left: 14px;  padding-left: 4px \9;  /* IE7-8 doesn't have border-radius, so don't indent the padding */  margin-bottom: 0;  -webkit-border-radius: 14px;  -moz-border-radius: 14px;  border-radius: 14px;}.form-search input,.form-inline input,.form-horizontal input,.form-search textarea,.form-inline textarea,.form-horizontal textarea,.form-search select,.form-inline select,.form-horizontal select,.form-search .help-inline,.form-inline .help-inline,.form-horizontal .help-inline,.form-search .uneditable-input,.form-inline .uneditable-input,.form-horizontal .uneditable-input,.form-search .input-prepend,.form-inline .input-prepend,.form-horizontal .input-prepend,.form-search .input-append,.form-inline .input-append,.form-horizontal .input-append {  display: inline-block;  *display: inline;  /* IE7 inline-block hack */  *zoom: 1;  margin-bottom: 0;}.form-search .hide,.form-inline .hide,.form-horizontal .hide {  display: none;}.form-search label,.form-inline label {  display: inline-block;}.form-search .input-append,.form-inline .input-append,.form-search .input-prepend,.form-inline .input-prepend {  margin-bottom: 0;}.form-search .radio,.form-search .checkbox,.form-inline .radio,.form-inline .checkbox {  padding-left: 0;  margin-bottom: 0;  vertical-align: middle;}.form-search .radio input[type="radio"],.form-search .checkbox input[type="checkbox"],.form-inline .radio input[type="radio"],.form-inline .checkbox input[type="checkbox"] {  float: left;  margin-right: 3px;  margin-left: 0;}.control-group {  margin-bottom: 9px;}legend + .control-group {  margin-top: 18px;  -webkit-margin-top-collapse: separate;}.form-horizontal .control-group {  margin-bottom: 18px;  *zoom: 1;}.form-horizontal .control-group:before,.form-horizontal .control-group:after {  display: table;  content: "";}.form-horizontal .control-group:after {  clear: both;}.form-horizontal .control-label {  float: left;  width: 140px;  padding-top: 5px;  text-align: right;}.form-horizontal .controls {  *display: inline-block;  *padding-left: 20px;  margin-left: 160px;  *margin-left: 0;}.form-horizontal .controls:first-child {  *padding-left: 160px;}.form-horizontal .help-block {  margin-top: 9px;  margin-bottom: 0;}.form-horizontal .form-actions {  padding-left: 160px;}.btn {  display: inline-block;  *display: inline;  /* IE7 inline-block hack */  *zoom: 1;  padding: 4px 10px 4px;  margin-bottom: 0;  font-size: 13px;  line-height: 18px;  *line-height: 20px;  color: #333333;  text-align: center;  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);  vertical-align: middle;  cursor: pointer;  background-color: #f5f5f5;  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);  background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);  background-image: linear-gradient(top, #ffffff, #e6e6e6);  background-repeat: repeat-x;  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);  border-color: #e6e6e6 #e6e6e6 #bfbfbf;  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);  *background-color: #e6e6e6;  /* Darken IE7 buttons by default so they stand out more given they won't have borders */  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);  border: 1px solid #cccccc;  *border: 0;  border-bottom-color: #b3b3b3;  -webkit-border-radius: 4px;  -moz-border-radius: 4px;  border-radius: 4px;  *margin-left: .3em;  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);}.btn:hover,.btn:active,.btn.active,.btn.disabled,.btn[disabled] {  background-color: #e6e6e6;  *background-color: #d9d9d9;}.btn:active,.btn.active {  background-color: #cccccc \9;}.btn:first-child {  *margin-left: 0;}.btn:hover {  color: #333333;  text-decoration: none;  background-color: #e6e6e6;  *background-color: #d9d9d9;  /* Buttons in IE7 don't get borders, so darken on hover */  background-position: 0 -15px;  -webkit-transition: background-position 0.1s linear;  -moz-transition: background-position 0.1s linear;  -ms-transition: background-position 0.1s linear;  -o-transition: background-position 0.1s linear;  transition: background-position 0.1s linear;}.btn:focus {  outline: thin dotted #333;  outline: 5px auto -webkit-focus-ring-color;  outline-offset: -2px;}.btn.active,.btn:active {  background-color: #e6e6e6;  background-color: #d9d9d9 \9;  background-image: none;  outline: 0;  -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);  -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);  box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);}.btn.disabled,.btn[disabled] {  cursor: default;  background-color: #e6e6e6;  background-image: none;  opacity: 0.65;  filter: alpha(opacity=65);  -webkit-box-shadow: none;  -moz-box-shadow: none;  box-shadow: none;}.btn-large {  padding: 9px 14px;  font-size: 15px;  line-height: normal;  -webkit-border-radius: 5px;  -moz-border-radius: 5px;  border-radius: 5px;}.btn-large [class^="icon-"] {  margin-top: 1px;}.btn-small {  padding: 5px 9px;  font-size: 11px;  line-height: 16px;}.btn-small [class^="icon-"] {  margin-top: -1px;}.btn-mini {  padding: 2px 6px;  font-size: 11px;  line-height: 14px;}.btn-primary,.btn-primary:hover,.btn-warning,.btn-warning:hover,.btn-danger,.btn-danger:hover,.btn-success,.btn-success:hover,.btn-info,.btn-info:hover,.btn-inverse,.btn-inverse:hover {  color: #ffffff;  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);}.btn-primary.active,.btn-warning.active,.btn-danger.active,.btn-success.active,.btn-info.active,.btn-inverse.active {  color: rgba(255, 255, 255, 0.75);}.btn {  border-color: #ccc;  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}.btn-primary {  background-color: #0074cc;  background-image: -moz-linear-gradient(top, #0088cc, #0055cc);  background-image: -ms-linear-gradient(top, #0088cc, #0055cc);  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0055cc));  background-image: -webkit-linear-gradient(top, #0088cc, #0055cc);  background-image: -o-linear-gradient(top, #0088cc, #0055cc);  background-image: linear-gradient(top, #0088cc, #0055cc);  background-repeat: repeat-x;  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0055cc', GradientType=0);  border-color: #0055cc #0055cc #003580;  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);  *background-color: #0055cc;  /* Darken IE7 buttons by default so they stand out more given they won't have borders */  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);}.btn-primary:hover,.btn-primary:active,.btn-primary.active,.btn-primary.disabled,.btn-primary[disabled] {  background-color: #0055cc;  *background-color: #004ab3;}.btn-primary:active,.btn-primary.active {  background-color: #004099 \9;}.btn-warning {  background-color: #faa732;  background-image: -moz-linear-gradient(top, #fbb450, #f89406);  background-image: -ms-linear-gradient(top, #fbb450, #f89406);  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));  background-image: -webkit-linear-gradient(top, #fbb450, #f89406);  background-image: -o-linear-gradient(top, #fbb450, #f89406);  background-image: linear-gradient(top, #fbb450, #f89406);  background-repeat: repeat-x;  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89406', GradientType=0);  border-color: #f89406 #f89406 #ad6704;  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);  *background-color: #f89406;  /* Darken IE7 buttons by default so they stand out more given they won't have borders */  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);}.btn-warning:hover,.btn-warning:active,.btn-warning.active,.btn-warning.disabled,.btn-warning[disabled] {  background-color: #f89406;  *background-color: #df8505;}.btn-warning:active,.btn-warning.active {  background-color: #c67605 \9;}.btn-danger {  background-color: #da4f49;  background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);  background-image: -ms-linear-gradient(top, #ee5f5b, #bd362f);  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));  background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);  background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);  background-image: linear-gradient(top, #ee5f5b, #bd362f);  background-repeat: repeat-x;  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#bd362f', GradientType=0);  border-color: #bd362f #bd362f #802420;  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);  *background-color: #bd362f;  /* Darken IE7 buttons by default so they stand out more given they won't have borders */  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);}.btn-danger:hover,.btn-danger:active,.btn-danger.active,.btn-danger.disabled,.btn-danger[disabled] {  background-color: #bd362f;  *background-color: #a9302a;}.btn-danger:active,.btn-danger.active {  background-color: #942a25 \9;}.btn-success {  background-color: #5bb75b;  background-image: -moz-linear-gradient(top, #62c462, #51a351);  background-image: -ms-linear-gradient(top, #62c462, #51a351);  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));  background-image: -webkit-linear-gradient(top, #62c462, #51a351);  background-image: -o-linear-gradient(top, #62c462, #51a351);  background-image: linear-gradient(top, #62c462, #51a351);  background-repeat: repeat-x;  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#51a351', GradientType=0);  border-color: #51a351 #51a351 #387038;  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);  *background-color: #51a351;  /* Darken IE7 buttons by default so they stand out more given they won't have borders */  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);}.btn-success:hover,.btn-success:active,.btn-success.active,.btn-success.disabled,.btn-success[disabled] {  background-color: #51a351;  *background-color: #499249;}.btn-success:active,.btn-success.active {  background-color: #408140 \9;}.btn-info {  background-color: #49afcd;  background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);  background-image: -ms-linear-gradient(top, #5bc0de, #2f96b4);  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4));  background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);  background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);  background-image: linear-gradient(top, #5bc0de, #2f96b4);  background-repeat: repeat-x;  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#2f96b4', GradientType=0);  border-color: #2f96b4 #2f96b4 #1f6377;  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);  *background-color: #2f96b4;  /* Darken IE7 buttons by default so they stand out more given they won't have borders */  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);}.btn-info:hover,.btn-info:active,.btn-info.active,.btn-info.disabled,.btn-info[disabled] {  background-color: #2f96b4;  *background-color: #2a85a0;}.btn-info:active,.btn-info.active {  background-color: #24748c \9;}.btn-inverse {  background-color: #414141;  background-image: -moz-linear-gradient(top, #555555, #222222);  background-image: -ms-linear-gradient(top, #555555, #222222);  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#555555), to(#222222));  background-image: -webkit-linear-gradient(top, #555555, #222222);  background-image: -o-linear-gradient(top, #555555, #222222);  background-image: linear-gradient(top, #555555, #222222);  background-repeat: repeat-x;  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#555555', endColorstr='#222222', GradientType=0);  border-color: #222222 #222222 #000000;  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);  *background-color: #222222;  /* Darken IE7 buttons by default so they stand out more given they won't have borders */  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);}.btn-inverse:hover,.btn-inverse:active,.btn-inverse.active,.btn-inverse.disabled,.btn-inverse[disabled] {  background-color: #222222;  *background-color: #151515;}.btn-inverse:active,.btn-inverse.active {  background-color: #080808 \9;}button.btn,input[type="submit"].btn {  *padding-top: 2px;  *padding-bottom: 2px;}button.btn::-moz-focus-inner,input[type="submit"].btn::-moz-focus-inner {  padding: 0;  border: 0;}button.btn.btn-large,input[type="submit"].btn.btn-large {  *padding-top: 7px;  *padding-bottom: 7px;}button.btn.btn-small,input[type="submit"].btn.btn-small {  *padding-top: 3px;  *padding-bottom: 3px;}button.btn.btn-mini,input[type="submit"].btn.btn-mini {  *padding-top: 1px;  *padding-bottom: 1px;}.btn-group {  position: relative;  *zoom: 1;  *margin-left: .3em;}.btn-group:before,.btn-group:after {  display: table;  content: "";}.btn-group:after {  clear: both;}.btn-group:first-child {  *margin-left: 0;}.btn-group + .btn-group {  margin-left: 5px;}.btn-toolbar {  margin-top: 9px;  margin-bottom: 9px;}.btn-toolbar .btn-group {  display: inline-block;  *display: inline;  /* IE7 inline-block hack */  *zoom: 1;}.btn-group > .btn {  position: relative;  float: left;  margin-left: -1px;  -webkit-border-radius: 0;  -moz-border-radius: 0;  border-radius: 0;}.btn-group > .btn:first-child {  margin-left: 0;  -webkit-border-top-left-radius: 4px;  -moz-border-radius-topleft: 4px;  border-top-left-radius: 4px;  -webkit-border-bottom-left-radius: 4px;  -moz-border-radius-bottomleft: 4px;  border-bottom-left-radius: 4px;}.btn-group > .btn:last-child,.btn-group > .dropdown-toggle {  -webkit-border-top-right-radius: 4px;  -moz-border-radius-topright: 4px;  border-top-right-radius: 4px;  -webkit-border-bottom-right-radius: 4px;  -moz-border-radius-bottomright: 4px;  border-bottom-right-radius: 4px;}.btn-group > .btn.large:first-child {  margin-left: 0;  -webkit-border-top-left-radius: 6px;  -moz-border-radius-topleft: 6px;  border-top-left-radius: 6px;  -webkit-border-bottom-left-radius: 6px;  -moz-border-radius-bottomleft: 6px;  border-bottom-left-radius: 6px;}.btn-group > .btn.large:last-child,.btn-group > .large.dropdown-toggle {  -webkit-border-top-right-radius: 6px;  -moz-border-radius-topright: 6px;  border-top-right-radius: 6px;  -webkit-border-bottom-right-radius: 6px;  -moz-border-radius-bottomright: 6px;  border-bottom-right-radius: 6px;}.btn-group > .btn:hover,.btn-group > .btn:focus,.btn-group > .btn:active,.btn-group > .btn.active {  z-index: 2;}.btn-group .dropdown-toggle:active,.btn-group.open .dropdown-toggle {  outline: 0;}.btn-group > .dropdown-toggle {  padding-left: 8px;  padding-right: 8px;  -webkit-box-shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);  -moz-box-shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);  box-shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);  *padding-top: 4px;  *padding-bottom: 4px;}.btn-group > .btn-mini.dropdown-toggle {  padding-left: 5px;  padding-right: 5px;}.btn-group > .btn-small.dropdown-toggle {  *padding-top: 4px;  *padding-bottom: 4px;}.btn-group > .btn-large.dropdown-toggle {  padding-left: 12px;  padding-right: 12px;}.btn-group.open .dropdown-toggle {  background-image: none;  -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);  -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);  box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);}.btn-group.open .btn.dropdown-toggle {  background-color: #e6e6e6;}.btn-group.open .btn-primary.dropdown-toggle {  background-color: #0055cc;}.btn-group.open .btn-warning.dropdown-toggle {  background-color: #f89406;}.btn-group.open .btn-danger.dropdown-toggle {  background-color: #bd362f;}.btn-group.open .btn-success.dropdown-toggle {  background-color: #51a351;}.btn-group.open .btn-info.dropdown-toggle {  background-color: #2f96b4;}.btn-group.open .btn-inverse.dropdown-toggle {  background-color: #222222;}.btn .caret {  margin-top: 7px;  margin-left: 0;}.btn:hover .caret,.open.btn-group .caret {  opacity: 1;  filter: alpha(opacity=100);}.btn-mini .caret {  margin-top: 5px;}.btn-small .caret {  margin-top: 6px;}.btn-large .caret {  margin-top: 6px;  border-left-width: 5px;  border-right-width: 5px;  border-top-width: 5px;}.dropup .btn-large .caret {  border-bottom: 5px solid #000000;  border-top: 0;}.btn-primary .caret,.btn-warning .caret,.btn-danger .caret,.btn-info .caret,.btn-success .caret,.btn-inverse .caret {  border-top-color: #ffffff;  border-bottom-color: #ffffff;  opacity: 0.75;  filter: alpha(opacity=75);}.nav {  margin-left: 0;  margin-bottom: 18px;  list-style: none;}.nav > li > a {  display: block;}.nav > li > a:hover {  text-decoration: none;  background-color: #eeeeee;}.nav > .pull-right {  float: right;}.nav .nav-header {  display: block;  padding: 3px 15px;  font-size: 11px;  font-weight: bold;  line-height: 18px;  color: #999999;  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);  text-transform: uppercase;}.nav li + .nav-header {  margin-top: 9px;}.nav-list {  padding-left: 15px;  padding-right: 15px;  margin-bottom: 0;}.nav-list > li > a,.nav-list .nav-header {  margin-left: -15px;  margin-right: -15px;  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);}.nav-list > li > a {  padding: 3px 15px;}.nav-list > .active > a,.nav-list > .active > a:hover {  color: #ffffff;  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);  background-color: #0088cc;}.nav-list [class^="icon-"] {  margin-right: 2px;}.nav-list .divider {  *width: 100%;  height: 1px;  margin: 8px 1px;  *margin: -5px 0 5px;  overflow: hidden;  background-color: #e5e5e5;  border-bottom: 1px solid #ffffff;}.nav-tabs,.nav-pills {  *zoom: 1;}.nav-tabs:before,.nav-pills:before,.nav-tabs:after,.nav-pills:after {  display: table;  content: "";}.nav-tabs:after,.nav-pills:after {  clear: both;}.nav-tabs > li,.nav-pills > li {  float: left;}.nav-tabs > li > a,.nav-pills > li > a {  padding-right: 12px;  padding-left: 12px;  margin-right: 2px;  line-height: 14px;}.nav-tabs {  border-bottom: 1px solid #ddd;}.nav-tabs > li {  margin-bottom: -1px;}.nav-tabs > li > a {  padding-top: 8px;  padding-bottom: 8px;  line-height: 18px;  border: 1px solid transparent;  -webkit-border-radius: 4px 4px 0 0;  -moz-border-radius: 4px 4px 0 0;  border-radius: 4px 4px 0 0;}.nav-tabs > li > a:hover {  border-color: #eeeeee #eeeeee #dddddd;}.nav-tabs > .active > a,.nav-tabs > .active > a:hover {  color: #555555;  background-color: #ffffff;  border: 1px solid #ddd;  border-bottom-color: transparent;  cursor: default;}.nav-pills > li > a {  padding-top: 8px;  padding-bottom: 8px;  margin-top: 2px;  margin-bottom: 2px;  -webkit-border-radius: 5px;  -moz-border-radius: 5px;  border-radius: 5px;}.nav-pills > .active > a,.nav-pills > .active > a:hover {  color: #ffffff;  background-color: #0088cc;}.nav-stacked > li {  float: none;}.nav-stacked > li > a {  margin-right: 0;}.nav-tabs.nav-stacked {  border-bottom: 0;}.nav-tabs.nav-stacked > li > a {  border: 1px solid #ddd;  -webkit-border-radius: 0;  -moz-border-radius: 0;  border-radius: 0;}.nav-tabs.nav-stacked > li:first-child > a {  -webkit-border-radius: 4px 4px 0 0;  -moz-border-radius: 4px 4px 0 0;  border-radius: 4px 4px 0 0;}.nav-tabs.nav-stacked > li:last-child > a {  -webkit-border-radius: 0 0 4px 4px;  -moz-border-radius: 0 0 4px 4px;  border-radius: 0 0 4px 4px;}.nav-tabs.nav-stacked > li > a:hover {  border-color: #ddd;  z-index: 2;}.nav-pills.nav-stacked > li > a {  margin-bottom: 3px;}.nav-pills.nav-stacked > li:last-child > a {  margin-bottom: 1px;}.nav-tabs .dropdown-menu {  -webkit-border-radius: 0 0 5px 5px;  -moz-border-radius: 0 0 5px 5px;  border-radius: 0 0 5px 5px;}.nav-pills .dropdown-menu {  -webkit-border-radius: 4px;  -moz-border-radius: 4px;  border-radius: 4px;}.nav-tabs .dropdown-toggle .caret,.nav-pills .dropdown-toggle .caret {  border-top-color: #0088cc;  border-bottom-color: #0088cc;  margin-top: 6px;}.nav-tabs .dropdown-toggle:hover .caret,.nav-pills .dropdown-toggle:hover .caret {  border-top-color: #005580;  border-bottom-color: #005580;}.nav-tabs .active .dropdown-toggle .caret,.nav-pills .active .dropdown-toggle .caret {  border-top-color: #333333;  border-bottom-color: #333333;}.nav > .dropdown.active > a:hover {  color: #000000;  cursor: pointer;}.nav-tabs .open .dropdown-toggle,.nav-pills .open .dropdown-toggle,.nav > li.dropdown.open.active > a:hover {  color: #ffffff;  background-color: #999999;  border-color: #999999;}.nav li.dropdown.open .caret,.nav li.dropdown.open.active .caret,.nav li.dropdown.open a:hover .caret {  border-top-color: #ffffff;  border-bottom-color: #ffffff;  opacity: 1;  filter: alpha(opacity=100);}.tabs-stacked .open > a:hover {  border-color: #999999;}.tabbable {  *zoom: 1;}.tabbable:before,.tabbable:after {  display: table;  content: "";}.tabbable:after {  clear: both;}.tab-content {  overflow: auto;}.tabs-below > .nav-tabs,.tabs-right > .nav-tabs,.tabs-left > .nav-tabs {  border-bottom: 0;}.tab-content > .tab-pane,.pill-content > .pill-pane {  display: none;}.tab-content > .active,.pill-content > .active {  display: block;}.tabs-below > .nav-tabs {  border-top: 1px solid #ddd;}.tabs-below > .nav-tabs > li {  margin-top: -1px;  margin-bottom: 0;}.tabs-below > .nav-tabs > li > a {  -webkit-border-radius: 0 0 4px 4px;  -moz-border-radius: 0 0 4px 4px;  border-radius: 0 0 4px 4px;}.tabs-below > .nav-tabs > li > a:hover {  border-bottom-color: transparent;  border-top-color: #ddd;}.tabs-below > .nav-tabs > .active > a,.tabs-below > .nav-tabs > .active > a:hover {  border-color: transparent #ddd #ddd #ddd;}.tabs-left > .nav-tabs > li,.tabs-right > .nav-tabs > li {  float: none;}.tabs-left > .nav-tabs > li > a,.tabs-right > .nav-tabs > li > a {  min-width: 74px;  margin-right: 0;  margin-bottom: 3px;}.tabs-left > .nav-tabs {  float: left;  margin-right: 19px;  border-right: 1px solid #ddd;}.tabs-left > .nav-tabs > li > a {  margin-right: -1px;  -webkit-border-radius: 4px 0 0 4px;  -moz-border-radius: 4px 0 0 4px;  border-radius: 4px 0 0 4px;}.tabs-left > .nav-tabs > li > a:hover {  border-color: #eeeeee #dddddd #eeeeee #eeeeee;}.tabs-left > .nav-tabs .active > a,.tabs-left > .nav-tabs .active > a:hover {  border-color: #ddd transparent #ddd #ddd;  *border-right-color: #ffffff;}.tabs-right > .nav-tabs {  float: right;  margin-left: 19px;  border-left: 1px solid #ddd;}.tabs-right > .nav-tabs > li > a {  margin-left: -1px;  -webkit-border-radius: 0 4px 4px 0;  -moz-border-radius: 0 4px 4px 0;  border-radius: 0 4px 4px 0;}.tabs-right > .nav-tabs > li > a:hover {  border-color: #eeeeee #eeeeee #eeeeee #dddddd;}.tabs-right > .nav-tabs .active > a,.tabs-right > .nav-tabs .active > a:hover {  border-color: #ddd #ddd #ddd transparent;  *border-left-color: #ffffff;}.navbar {  *position: relative;  *z-index: 2;  overflow: visible;  margin-bottom: 18px;}.navbar-inner {  min-height: 40px;  padding-left: 20px;  padding-right: 20px;  background-color: #2c2c2c;  background-image: -moz-linear-gradient(top, #333333, #222222);  background-image: -ms-linear-gradient(top, #333333, #222222);  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222));  background-image: -webkit-linear-gradient(top, #333333, #222222);  background-image: -o-linear-gradient(top, #333333, #222222);  background-image: linear-gradient(top, #333333, #222222);  background-repeat: repeat-x;  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);  -webkit-border-radius: 4px;  -moz-border-radius: 4px;  border-radius: 4px;  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);  -moz-box-shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);  box-shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);}.navbar .container {  width: auto;}.nav-collapse.collapse {  height: auto;}.navbar {  color: #999999;}.navbar .brand:hover {  text-decoration: none;}.navbar .brand {  float: left;  display: block;  padding: 8px 20px 12px;  margin-left: -20px;  font-size: 20px;  font-weight: 200;  line-height: 1;  color: #999999;}.navbar .navbar-text {  margin-bottom: 0;  line-height: 40px;}.navbar .navbar-link {  color: #999999;}.navbar .navbar-link:hover {  color: #ffffff;}.navbar .btn,.navbar .btn-group {  margin-top: 5px;}.navbar .btn-group .btn {  margin: 0;}.navbar-form {  margin-bottom: 0;  *zoom: 1;}.navbar-form:before,.navbar-form:after {  display: table;  content: "";}.navbar-form:after {  clear: both;}.navbar-form input,.navbar-form select,.navbar-form .radio,.navbar-form .checkbox {  margin-top: 5px;}.navbar-form input,.navbar-form select {  display: inline-block;  margin-bottom: 0;}.navbar-form input[type="image"],.navbar-form input[type="checkbox"],.navbar-form input[type="radio"] {  margin-top: 3px;}.navbar-form .input-append,.navbar-form .input-prepend {  margin-top: 6px;  white-space: nowrap;}.navbar-form .input-append input,.navbar-form .input-prepend input {  margin-top: 0;}.navbar-search {  position: relative;  float: left;  margin-top: 6px;  margin-bottom: 0;}.navbar-search .search-query {  padding: 4px 9px;  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;  font-size: 13px;  font-weight: normal;  line-height: 1;  color: #ffffff;  background-color: #626262;  border: 1px solid #151515;  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15);  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15);  box-shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15);  -webkit-transition: none;  -moz-transition: none;  -ms-transition: none;  -o-transition: none;  transition: none;}.navbar-search .search-query:-moz-placeholder {  color: #cccccc;}.navbar-search .search-query:-ms-input-placeholder {  color: #cccccc;}.navbar-search .search-query::-webkit-input-placeholder {  color: #cccccc;}.navbar-search .search-query:focus,.navbar-search .search-query.focused {  padding: 5px 10px;  color: #333333;  text-shadow: 0 1px 0 #ffffff;  background-color: #ffffff;  border: 0;  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);  -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);  box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);  outline: 0;}.navbar-fixed-top,.navbar-fixed-bottom {  position: fixed;  right: 0;  left: 0;  z-index: 1030;  margin-bottom: 0;}.navbar-fixed-top .navbar-inner,.navbar-fixed-bottom .navbar-inner {  padding-left: 0;  padding-right: 0;  -webkit-border-radius: 0;  -moz-border-radius: 0;  border-radius: 0;}.navbar-fixed-top .container,.navbar-fixed-bottom .container {  width: 940px;}.navbar-fixed-top {  top: 0;}.navbar-fixed-bottom {  bottom: 0;}.navbar .nav {  position: relative;  left: 0;  display: block;  float: left;  margin: 0 10px 0 0;}.navbar .nav.pull-right {  float: right;}.navbar .nav > li {  display: block;  float: left;}.navbar .nav > li > a {  float: none;  padding: 9px 10px 11px;  line-height: 19px;  color: #999999;  text-decoration: none;  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);}.navbar .btn {  display: inline-block;  padding: 4px 10px 4px;  margin: 5px 5px 6px;  line-height: 18px;}.navbar .btn-group {  margin: 0;  padding: 5px 5px 6px;}.navbar .nav > li > a:hover {  background-color: transparent;  color: #ffffff;  text-decoration: none;}.navbar .nav .active > a,.navbar .nav .active > a:hover {  color: #ffffff;  text-decoration: none;  background-color: #222222;}.navbar .divider-vertical {  height: 40px;  width: 1px;  margin: 0 9px;  overflow: hidden;  background-color: #222222;  border-right: 1px solid #333333;}.navbar .nav.pull-right {  margin-left: 10px;  margin-right: 0;}.navbar .btn-navbar {  display: none;  float: right;  padding: 7px 10px;  margin-left: 5px;  margin-right: 5px;  background-color: #2c2c2c;  background-image: -moz-linear-gradient(top, #333333, #222222);  background-image: -ms-linear-gradient(top, #333333, #222222);  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222));  background-image: -webkit-linear-gradient(top, #333333, #222222);  background-image: -o-linear-gradient(top, #333333, #222222);  background-image: linear-gradient(top, #333333, #222222);  background-repeat: repeat-x;  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);  border-color: #222222 #222222 #000000;  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);  *background-color: #222222;  /* Darken IE7 buttons by default so they stand out more given they won't have borders */  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);}.navbar .btn-navbar:hover,.navbar .btn-navbar:active,.navbar .btn-navbar.active,.navbar .btn-navbar.disabled,.navbar .btn-navbar[disabled] {  background-color: #222222;  *background-color: #151515;}.navbar .btn-navbar:active,.navbar .btn-navbar.active {  background-color: #080808 \9;}.navbar .btn-navbar .icon-bar {  display: block;  width: 18px;  height: 2px;  background-color: #f5f5f5;  -webkit-border-radius: 1px;  -moz-border-radius: 1px;  border-radius: 1px;  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);  -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);}.btn-navbar .icon-bar + .icon-bar {  margin-top: 3px;}.navbar .dropdown-menu:before {  content: '';  display: inline-block;  border-left: 7px solid transparent;  border-right: 7px solid transparent;  border-bottom: 7px solid #ccc;  border-bottom-color: rgba(0, 0, 0, 0.2);  position: absolute;  top: -7px;  left: 9px;}.navbar .dropdown-menu:after {  content: '';  display: inline-block;  border-left: 6px solid transparent;  border-right: 6px solid transparent;  border-bottom: 6px solid #ffffff;  position: absolute;  top: -6px;  left: 10px;}.navbar-fixed-bottom .dropdown-menu:before {  border-top: 7px solid #ccc;  border-top-color: rgba(0, 0, 0, 0.2);  border-bottom: 0;  bottom: -7px;  top: auto;}.navbar-fixed-bottom .dropdown-menu:after {  border-top: 6px solid #ffffff;  border-bottom: 0;  bottom: -6px;  top: auto;}.navbar .nav li.dropdown .dropdown-toggle .caret,.navbar .nav li.dropdown.open .caret {  border-top-color: #ffffff;  border-bottom-color: #ffffff;}.navbar .nav li.dropdown.active .caret {  opacity: 1;  filter: alpha(opacity=100);}.navbar .nav li.dropdown.open > .dropdown-toggle,.navbar .nav li.dropdown.active > .dropdown-toggle,.navbar .nav li.dropdown.open.active > .dropdown-toggle {  background-color: transparent;}.navbar .nav li.dropdown.active > .dropdown-toggle:hover {  color: #ffffff;}.navbar .pull-right .dropdown-menu,.navbar .dropdown-menu.pull-right {  left: auto;  right: 0;}.navbar .pull-right .dropdown-menu:before,.navbar .dropdown-menu.pull-right:before {  left: auto;  right: 12px;}.navbar .pull-right .dropdown-menu:after,.navbar .dropdown-menu.pull-right:after {  left: auto;  right: 13px;}.breadcrumb {  padding: 7px 14px;  margin: 0 0 18px;  list-style: none;  background-color: #fbfbfb;  background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5);  background-image: -ms-linear-gradient(top, #ffffff, #f5f5f5);  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f5f5f5));  background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5);  background-image: -o-linear-gradient(top, #ffffff, #f5f5f5);  background-image: linear-gradient(top, #ffffff, #f5f5f5);  background-repeat: repeat-x;  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);  border: 1px solid #ddd;  -webkit-border-radius: 3px;  -moz-border-radius: 3px;  border-radius: 3px;  -webkit-box-shadow: inset 0 1px 0 #ffffff;  -moz-box-shadow: inset 0 1px 0 #ffffff;  box-shadow: inset 0 1px 0 #ffffff;}.breadcrumb li {  display: inline-block;  *display: inline;  /* IE7 inline-block hack */  *zoom: 1;  text-shadow: 0 1px 0 #ffffff;}.breadcrumb .divider {  padding: 0 5px;  color: #999999;}.breadcrumb .active a {  color: #333333;}.pagination {  height: 36px;  margin: 18px 0;}.pagination ul {  display: inline-block;  *display: inline;  /* IE7 inline-block hack */  *zoom: 1;  margin-left: 0;  margin-bottom: 0;  -webkit-border-radius: 3px;  -moz-border-radius: 3px;  border-radius: 3px;  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);}.pagination li {  display: inline;}.pagination a {  float: left;  padding: 0 14px;  line-height: 34px;  text-decoration: none;  border: 1px solid #ddd;  border-left-width: 0;}.pagination a:hover,.pagination .active a {  background-color: #f5f5f5;}.pagination .active a {  color: #999999;  cursor: default;}.pagination .disabled span,.pagination .disabled a,.pagination .disabled a:hover {  color: #999999;  background-color: transparent;  cursor: default;}.pagination li:first-child a {  border-left-width: 1px;  -webkit-border-radius: 3px 0 0 3px;  -moz-border-radius: 3px 0 0 3px;  border-radius: 3px 0 0 3px;}.pagination li:last-child a {  -webkit-border-radius: 0 3px 3px 0;  -moz-border-radius: 0 3px 3px 0;  border-radius: 0 3px 3px 0;}.pagination-centered {  text-align: center;}.pagination-right {  text-align: right;}.pager {  margin-left: 0;  margin-bottom: 18px;  list-style: none;  text-align: center;  *zoom: 1;}.pager:before,.pager:after {  display: table;  content: "";}.pager:after {  clear: both;}.pager li {  display: inline;}.pager a {  display: inline-block;  padding: 5px 14px;  background-color: #fff;  border: 1px solid #ddd;  -webkit-border-radius: 15px;  -moz-border-radius: 15px;  border-radius: 15px;}.pager a:hover {  text-decoration: none;  background-color: #f5f5f5;}.pager .next a {  float: right;}.pager .previous a {  float: left;}.pager .disabled a,.pager .disabled a:hover {  color: #999999;  background-color: #fff;  cursor: default;}.thumbnails {  margin-left: -20px;  list-style: none;  *zoom: 1;}.thumbnails:before,.thumbnails:after {  display: table;  content: "";}.thumbnails:after {  clear: both;}.row-fluid .thumbnails {  margin-left: 0;}.thumbnails > li {  float: left;  margin-bottom: 18px;  margin-left: 20px;}.thumbnail {  display: block;  padding: 4px;  line-height: 1;  border: 1px solid #ddd;  -webkit-border-radius: 4px;  -moz-border-radius: 4px;  border-radius: 4px;  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);}a.thumbnail:hover {  border-color: #0088cc;  -webkit-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);  -moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);  box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);}.thumbnail > img {  display: block;  max-width: 100%;  margin-left: auto;  margin-right: auto;}.thumbnail .caption {  padding: 9px;}.alert {  padding: 8px 35px 8px 14px;  margin-bottom: 18px;  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);  background-color: #fcf8e3;  border: 1px solid #fbeed5;  -webkit-border-radius: 4px;  -moz-border-radius: 4px;  border-radius: 4px;  color: #c09853;}.alert-heading {  color: inherit;}.alert .close {  position: relative;  top: -2px;  right: -21px;  line-height: 18px;}.alert-success {  background-color: #dff0d8;  border-color: #d6e9c6;  color: #468847;}.alert-danger,.alert-error {  background-color: #f2dede;  border-color: #eed3d7;  color: #b94a48;}.alert-info {  background-color: #d9edf7;  border-color: #bce8f1;  color: #3a87ad;}.alert-block {  padding-top: 14px;  padding-bottom: 14px;}.alert-block > p,.alert-block > ul {  margin-bottom: 0;}.alert-block p + p {  margin-top: 5px;}@-webkit-keyframes progress-bar-stripes {  from {    background-position: 40px 0;  }  to {    background-position: 0 0;  }}@-moz-keyframes progress-bar-stripes {  from {    background-position: 40px 0;  }  to {    background-position: 0 0;  }}@-ms-keyframes progress-bar-stripes {  from {    background-position: 40px 0;  }  to {    background-position: 0 0;  }}@-o-keyframes progress-bar-stripes {  from {    background-position: 0 0;  }  to {    background-position: 40px 0;  }}@keyframes progress-bar-stripes {  from {    background-position: 40px 0;  }  to {    background-position: 0 0;  }}.progress {  overflow: hidden;  height: 18px;  margin-bottom: 18px;  background-color: #f7f7f7;  background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9);  background-image: -ms-linear-gradient(top, #f5f5f5, #f9f9f9);  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));  background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9);  background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9);  background-image: linear-gradient(top, #f5f5f5, #f9f9f9);  background-repeat: repeat-x;  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f9f9f9', GradientType=0);  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);  -webkit-border-radius: 4px;  -moz-border-radius: 4px;  border-radius: 4px;}.progress .bar {  width: 0%;  height: 18px;  color: #ffffff;  font-size: 12px;  text-align: center;  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);  background-color: #0e90d2;  background-image: -moz-linear-gradient(top, #149bdf, #0480be);  background-image: -ms-linear-gradient(top, #149bdf, #0480be);  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be));  background-image: -webkit-linear-gradient(top, #149bdf, #0480be);  background-image: -o-linear-gradient(top, #149bdf, #0480be);  background-image: linear-gradient(top, #149bdf, #0480be);  background-repeat: repeat-x;  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#149bdf', endColorstr='#0480be', GradientType=0);  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);  -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  -ms-box-sizing: border-box;  box-sizing: border-box;  -webkit-transition: width 0.6s ease;  -moz-transition: width 0.6s ease;  -ms-transition: width 0.6s ease;  -o-transition: width 0.6s ease;  transition: width 0.6s ease;}.progress-striped .bar {  background-color: #149bdf;  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));  background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);  background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);  background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);  background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);  background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);  -webkit-background-size: 40px 40px;  -moz-background-size: 40px 40px;  -o-background-size: 40px 40px;  background-size: 40px 40px;}.progress.active .bar {  -webkit-animation: progress-bar-stripes 2s linear infinite;  -moz-animation: progress-bar-stripes 2s linear infinite;  -ms-animation: progress-bar-stripes 2s linear infinite;  -o-animation: progress-bar-stripes 2s linear infinite;  animation: progress-bar-stripes 2s linear infinite;}.progress-danger .bar {  background-color: #dd514c;  background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);  background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#c43c35));  background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);  background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);  background-image: linear-gradient(top, #ee5f5b, #c43c35);  background-repeat: repeat-x;  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);}.progress-danger.progress-striped .bar {  background-color: #ee5f5b;  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));  background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);  background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);  background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);  background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);  background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);}.progress-success .bar {  background-color: #5eb95e;  background-image: -moz-linear-gradient(top, #62c462, #57a957);  background-image: -ms-linear-gradient(top, #62c462, #57a957);  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#57a957));  background-image: -webkit-linear-gradient(top, #62c462, #57a957);  background-image: -o-linear-gradient(top, #62c462, #57a957);  background-image: linear-gradient(top, #62c462, #57a957);  background-repeat: repeat-x;  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);}.progress-success.progress-striped .bar {  background-color: #62c462;  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));  background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);  background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);  background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);  background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);  background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);}.progress-info .bar {  background-color: #4bb1cf;  background-image: -moz-linear-gradient(top, #5bc0de, #339bb9);  background-image: -ms-linear-gradient(top, #5bc0de, #339bb9);  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#339bb9));  background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9);  background-image: -o-linear-gradient(top, #5bc0de, #339bb9);  background-image: linear-gradient(top, #5bc0de, #339bb9);  background-repeat: repeat-x;  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);}.progress-info.progress-striped .bar {  background-color: #5bc0de;  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));  background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);  background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);  background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);  background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);  background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);}.progress-warning .bar {  background-color: #faa732;  background-image: -moz-linear-gradient(top, #fbb450, #f89406);  background-image: -ms-linear-gradient(top, #fbb450, #f89406);  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));  background-image: -webkit-linear-gradient(top, #fbb450, #f89406);  background-image: -o-linear-gradient(top, #fbb450, #f89406);  background-image: linear-gradient(top, #fbb450, #f89406);  background-repeat: repeat-x;  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89406', GradientType=0);}.progress-warning.progress-striped .bar {  background-color: #fbb450;  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));  background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);  background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);  background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);  background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);  background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);}.hero-unit {  padding: 60px;  margin-bottom: 30px;  background-color: #eeeeee;  -webkit-border-radius: 6px;  -moz-border-radius: 6px;  border-radius: 6px;}.hero-unit h1 {  margin-bottom: 0;  font-size: 60px;  line-height: 1;  color: inherit;  letter-spacing: -1px;}.hero-unit p {  font-size: 18px;  font-weight: 200;  line-height: 27px;  color: inherit;}.tooltip {  position: absolute;  z-index: 1020;  display: block;  visibility: visible;  padding: 5px;  font-size: 11px;  opacity: 0;  filter: alpha(opacity=0);}.tooltip.in {  opacity: 0.8;  filter: alpha(opacity=80);}.tooltip.top {  margin-top: -2px;}.tooltip.right {  margin-left: 2px;}.tooltip.bottom {  margin-top: 2px;}.tooltip.left {  margin-left: -2px;}.tooltip.top .tooltip-arrow {  bottom: 0;  left: 50%;  margin-left: -5px;  border-left: 5px solid transparent;  border-right: 5px solid transparent;  border-top: 5px solid #000000;}.tooltip.left .tooltip-arrow {  top: 50%;  right: 0;  margin-top: -5px;  border-top: 5px solid transparent;  border-bottom: 5px solid transparent;  border-left: 5px solid #000000;}.tooltip.bottom .tooltip-arrow {  top: 0;  left: 50%;  margin-left: -5px;  border-left: 5px solid transparent;  border-right: 5px solid transparent;  border-bottom: 5px solid #000000;}.tooltip.right .tooltip-arrow {  top: 50%;  left: 0;  margin-top: -5px;  border-top: 5px solid transparent;  border-bottom: 5px solid transparent;  border-right: 5px solid #000000;}.tooltip-inner {  max-width: 200px;  padding: 3px 8px;  color: #ffffff;  text-align: center;  text-decoration: none;  background-color: #000000;  -webkit-border-radius: 4px;  -moz-border-radius: 4px;  border-radius: 4px;}.tooltip-arrow {  position: absolute;  width: 0;  height: 0;}.popover {  position: absolute;  top: 0;  left: 0;  z-index: 1010;  display: none;  padding: 5px;}.popover.top {  margin-top: -5px;}.popover.right {  margin-left: 5px;}.popover.bottom {  margin-top: 5px;}.popover.left {  margin-left: -5px;}.popover.top .arrow {  bottom: 0;  left: 50%;  margin-left: -5px;  border-left: 5px solid transparent;  border-right: 5px solid transparent;  border-top: 5px solid #000000;}.popover.right .arrow {  top: 50%;  left: 0;  margin-top: -5px;  border-top: 5px solid transparent;  border-bottom: 5px solid transparent;  border-right: 5px solid #000000;}.popover.bottom .arrow {  top: 0;  left: 50%;  margin-left: -5px;  border-left: 5px solid transparent;  border-right: 5px solid transparent;  border-bottom: 5px solid #000000;}.popover.left .arrow {  top: 50%;  right: 0;  margin-top: -5px;  border-top: 5px solid transparent;  border-bottom: 5px solid transparent;  border-left: 5px solid #000000;}.popover .arrow {  position: absolute;  width: 0;  height: 0;}.popover-inner {  padding: 3px;  width: 280px;  overflow: hidden;  background: #000000;  background: rgba(0, 0, 0, 0.8);  -webkit-border-radius: 6px;  -moz-border-radius: 6px;  border-radius: 6px;  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);  -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);}.popover-title {  padding: 9px 15px;  line-height: 1;  background-color: #f5f5f5;  border-bottom: 1px solid #eee;  -webkit-border-radius: 3px 3px 0 0;  -moz-border-radius: 3px 3px 0 0;  border-radius: 3px 3px 0 0;}.popover-content {  padding: 14px;  background-color: #ffffff;  -webkit-border-radius: 0 0 3px 3px;  -moz-border-radius: 0 0 3px 3px;  border-radius: 0 0 3px 3px;  -webkit-background-clip: padding-box;  -moz-background-clip: padding-box;  background-clip: padding-box;}.popover-content p,.popover-content ul,.popover-content ol {  margin-bottom: 0;}.modal-open .dropdown-menu {  z-index: 2050;}.modal-open .dropdown.open {  *z-index: 2050;}.modal-open .popover {  z-index: 2060;}.modal-open .tooltip {  z-index: 2070;}.modal-backdrop {  position: fixed;  top: 0;  right: 0;  bottom: 0;  left: 0;  z-index: 1040;  background-color: #000000;}.modal-backdrop.fade {  opacity: 0;}.modal-backdrop,.modal-backdrop.fade.in {  opacity: 0.8;  filter: alpha(opacity=80);}.modal {  position: fixed;  top: 50%;  left: 50%;  z-index: 1050;  overflow: auto;  width: 560px;  margin: -250px 0 0 -280px;  background-color: #ffffff;  border: 1px solid #999;  border: 1px solid rgba(0, 0, 0, 0.3);  *border: 1px solid #999;  /* IE6-7 */  -webkit-border-radius: 6px;  -moz-border-radius: 6px;  border-radius: 6px;  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);  -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);  -webkit-background-clip: padding-box;  -moz-background-clip: padding-box;  background-clip: padding-box;}.modal.fade {  -webkit-transition: opacity .3s linear, top .3s ease-out;  -moz-transition: opacity .3s linear, top .3s ease-out;  -ms-transition: opacity .3s linear, top .3s ease-out;  -o-transition: opacity .3s linear, top .3s ease-out;  transition: opacity .3s linear, top .3s ease-out;  top: -25%;}.modal.fade.in {  top: 50%;}.modal-header {  padding: 9px 15px;  border-bottom: 1px solid #eee;}.modal-header .close {  margin-top: 2px;}.modal-body {  overflow-y: auto;  max-height: 400px;  padding: 15px;}.modal-form {  margin-bottom: 0;}.modal-footer {  padding: 14px 15px 15px;  margin-bottom: 0;  text-align: right;  background-color: #f5f5f5;  border-top: 1px solid #ddd;  -webkit-border-radius: 0 0 6px 6px;  -moz-border-radius: 0 0 6px 6px;  border-radius: 0 0 6px 6px;  -webkit-box-shadow: inset 0 1px 0 #ffffff;  -moz-box-shadow: inset 0 1px 0 #ffffff;  box-shadow: inset 0 1px 0 #ffffff;  *zoom: 1;}.modal-footer:before,.modal-footer:after {  display: table;  content: "";}.modal-footer:after {  clear: both;}.modal-footer .btn + .btn {  margin-left: 5px;  margin-bottom: 0;}.modal-footer .btn-group .btn + .btn {  margin-left: -1px;}.dropup,.dropdown {  position: relative;}.dropdown-toggle {  *margin-bottom: -3px;}.dropdown-toggle:active,.open .dropdown-toggle {  outline: 0;}.caret {  display: inline-block;  width: 0;  height: 0;  vertical-align: top;  border-top: 4px solid #000000;  border-right: 4px solid transparent;  border-left: 4px solid transparent;  content: "";  opacity: 0.3;  filter: alpha(opacity=30);}.dropdown .caret {  margin-top: 8px;  margin-left: 2px;}.dropdown:hover .caret,.open .caret {  opacity: 1;  filter: alpha(opacity=100);}.dropdown-menu {  position: absolute;  top: 100%;  left: 0;  z-index: 1000;  display: none;  float: left;  min-width: 160px;  padding: 4px 0;  margin: 1px 0 0;  list-style: none;  background-color: #ffffff;  border: 1px solid #ccc;  border: 1px solid rgba(0, 0, 0, 0.2);  *border-right-width: 2px;  *border-bottom-width: 2px;  -webkit-border-radius: 5px;  -moz-border-radius: 5px;  border-radius: 5px;  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);  -webkit-background-clip: padding-box;  -moz-background-clip: padding;  background-clip: padding-box;}.dropdown-menu.pull-right {  right: 0;  left: auto;}.dropdown-menu .divider {  *width: 100%;  height: 1px;  margin: 8px 1px;  *margin: -5px 0 5px;  overflow: hidden;  background-color: #e5e5e5;  border-bottom: 1px solid #ffffff;}.dropdown-menu a {  display: block;  padding: 3px 15px;  clear: both;  font-weight: normal;  line-height: 18px;  color: #333333;  white-space: nowrap;}.dropdown-menu li > a:hover,.dropdown-menu .active > a,.dropdown-menu .active > a:hover {  color: #ffffff;  text-decoration: none;  background-color: #0088cc;}.open {  *z-index: 1000;}.open  > .dropdown-menu {  display: block;}.pull-right > .dropdown-menu {  right: 0;  left: auto;}.dropup .caret,.navbar-fixed-bottom .dropdown .caret {  border-top: 0;  border-bottom: 4px solid #000000;  content: "\2191";}.dropup .dropdown-menu,.navbar-fixed-bottom .dropdown .dropdown-menu {  top: auto;  bottom: 100%;  margin-bottom: 1px;}.typeahead {  margin-top: 2px;  -webkit-border-radius: 4px;  -moz-border-radius: 4px;  border-radius: 4px;}.accordion {  margin-bottom: 18px;}.accordion-group {  margin-bottom: 2px;  border: 1px solid #e5e5e5;  -webkit-border-radius: 4px;  -moz-border-radius: 4px;  border-radius: 4px;}.accordion-heading {  border-bottom: 0;}.accordion-heading .accordion-toggle {  display: block;  padding: 8px 15px;}.accordion-toggle {  cursor: pointer;}.accordion-inner {  padding: 9px 15px;  border-top: 1px solid #e5e5e5;}.carousel {  position: relative;  margin-bottom: 18px;  line-height: 1;}.carousel-inner {  overflow: hidden;  width: 100%;  position: relative;}.carousel .item {  display: none;  position: relative;  -webkit-transition: 0.6s ease-in-out left;  -moz-transition: 0.6s ease-in-out left;  -ms-transition: 0.6s ease-in-out left;  -o-transition: 0.6s ease-in-out left;  transition: 0.6s ease-in-out left;}.carousel .item > img {  display: block;  line-height: 1;}.carousel .active,.carousel .next,.carousel .prev {  display: block;}.carousel .active {  left: 0;}.carousel .next,.carousel .prev {  position: absolute;  top: 0;  width: 100%;}.carousel .next {  left: 100%;}.carousel .prev {  left: -100%;}.carousel .next.left,.carousel .prev.right {  left: 0;}.carousel .active.left {  left: -100%;}.carousel .active.right {  left: 100%;}.carousel-control {  position: absolute;  top: 40%;  left: 15px;  width: 40px;  height: 40px;  margin-top: -20px;  font-size: 60px;  font-weight: 100;  line-height: 30px;  color: #ffffff;  text-align: center;  background: #222222;  border: 3px solid #ffffff;  -webkit-border-radius: 23px;  -moz-border-radius: 23px;  border-radius: 23px;  opacity: 0.5;  filter: alpha(opacity=50);}.carousel-control.right {  left: auto;  right: 15px;}.carousel-control:hover {  color: #ffffff;  text-decoration: none;  opacity: 0.9;  filter: alpha(opacity=90);}.carousel-caption {  position: absolute;  left: 0;  right: 0;  bottom: 0;  padding: 10px 15px 5px;  background: #333333;  background: rgba(0, 0, 0, 0.75);}.carousel-caption h4,.carousel-caption p {  color: #ffffff;}.well {  min-height: 20px;  padding: 19px;  margin-bottom: 20px;  background-color: #f5f5f5;  border: 1px solid #eee;  border: 1px solid rgba(0, 0, 0, 0.05);  -webkit-border-radius: 4px;  -moz-border-radius: 4px;  border-radius: 4px;  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);}.well blockquote {  border-color: #ddd;  border-color: rgba(0, 0, 0, 0.15);}.well-large {  padding: 24px;  -webkit-border-radius: 6px;  -moz-border-radius: 6px;  border-radius: 6px;}.well-small {  padding: 9px;  -webkit-border-radius: 3px;  -moz-border-radius: 3px;  border-radius: 3px;}.close {  float: right;  font-size: 20px;  font-weight: bold;  line-height: 18px;  color: #000000;  text-shadow: 0 1px 0 #ffffff;  opacity: 0.2;  filter: alpha(opacity=20);}.close:hover {  color: #000000;  text-decoration: none;  cursor: pointer;  opacity: 0.4;  filter: alpha(opacity=40);}button.close {  padding: 0;  cursor: pointer;  background: transparent;  border: 0;  -webkit-appearance: none;}.pull-right {  float: right;}.pull-left {  float: left;}.hide {  display: none;}.show {  display: block;}.invisible {  visibility: hidden;}.fade {  opacity: 0;  -webkit-transition: opacity 0.15s linear;  -moz-transition: opacity 0.15s linear;  -ms-transition: opacity 0.15s linear;  -o-transition: opacity 0.15s linear;  transition: opacity 0.15s linear;}.fade.in {  opacity: 1;}.collapse {  position: relative;  height: 0;  overflow: hidden;  -webkit-transition: height 0.35s ease;  -moz-transition: height 0.35s ease;  -ms-transition: height 0.35s ease;  -o-transition: height 0.35s ease;  transition: height 0.35s ease;}.collapse.in {  height: auto;}.hidden {  display: none;  visibility: hidden;}.visible-phone {  display: none !important;}.visible-tablet {  display: none !important;}.hidden-desktop {  display: none !important;}@media (max-width: 767px) {  .visible-phone {    display: inherit !important;  }  .hidden-phone {    display: none !important;  }  .hidden-desktop {    display: inherit !important;  }  .visible-desktop {    display: none !important;  }}@media (min-width: 768px) and (max-width: 979px) {  .visible-tablet {    display: inherit !important;  }  .hidden-tablet {    display: none !important;  }  .hidden-desktop {    display: inherit !important;  }  .visible-desktop {    display: none !important ;  }}@media (max-width: 480px) {  .nav-collapse {    -webkit-transform: translate3d(0, 0, 0);  }  .page-header h1 small {    display: block;    line-height: 18px;  }  input[type="checkbox"],  input[type="radio"] {    border: 1px solid #ccc;  }  .form-horizontal .control-group > label {    float: none;    width: auto;    padding-top: 0;    text-align: left;  }  .form-horizontal .controls {    margin-left: 0;  }  .form-horizontal .control-list {    padding-top: 0;  }  .form-horizontal .form-actions {    padding-left: 10px;    padding-right: 10px;  }  .modal {    position: absolute;    top: 10px;    left: 10px;    right: 10px;    width: auto;    margin: 0;  }  .modal.fade.in {    top: auto;  }  .modal-header .close {    padding: 10px;    margin: -10px;  }  .carousel-caption {    position: static;  }}@media (max-width: 767px) {  body {    padding-left: 20px;    padding-right: 20px;  }  .navbar-fixed-top,  .navbar-fixed-bottom {    margin-left: -20px;    margin-right: -20px;  }  .container-fluid {    padding: 0;  }  .dl-horizontal dt {    float: none;    clear: none;    width: auto;    text-align: left;  }  .dl-horizontal dd {    margin-left: 0;  }  .container {    width: auto;  }  .row-fluid {    width: 100%;  }  .row,  .thumbnails {    margin-left: 0;  }  [class*="span"],  .row-fluid [class*="span"] {    float: none;    display: block;    width: auto;    margin-left: 0;  }  .input-large,  .input-xlarge,  .input-xxlarge,  input[class*="span"],  select[class*="span"],  textarea[class*="span"],  .uneditable-input {    display: block;    width: 100%;    min-height: 28px;    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    -ms-box-sizing: border-box;    box-sizing: border-box;  }  .input-prepend input,  .input-append input,  .input-prepend input[class*="span"],  .input-append input[class*="span"] {    display: inline-block;    width: auto;  }}@media (min-width: 768px) and (max-width: 979px) {  .row {    margin-left: -20px;    *zoom: 1;  }  .row:before,  .row:after {    display: table;    content: "";  }  .row:after {    clear: both;  }  [class*="span"] {    float: left;    margin-left: 20px;  }  .container,  .navbar-fixed-top .container,  .navbar-fixed-bottom .container {    width: 724px;  }  .span12 {    width: 724px;  }  .span11 {    width: 662px;  }  .span10 {    width: 600px;  }  .span9 {    width: 538px;  }  .span8 {    width: 476px;  }  .span7 {    width: 414px;  }  .span6 {    width: 352px;  }  .span5 {    width: 290px;  }  .span4 {    width: 228px;  }  .span3 {    width: 166px;  }  .span2 {    width: 104px;  }  .span1 {    width: 42px;  }  .offset12 {    margin-left: 764px;  }  .offset11 {    margin-left: 702px;  }  .offset10 {    margin-left: 640px;  }  .offset9 {    margin-left: 578px;  }  .offset8 {    margin-left: 516px;  }  .offset7 {    margin-left: 454px;  }  .offset6 {    margin-left: 392px;  }  .offset5 {    margin-left: 330px;  }  .offset4 {    margin-left: 268px;  }  .offset3 {    margin-left: 206px;  }  .offset2 {    margin-left: 144px;  }  .offset1 {    margin-left: 82px;  }  .row-fluid {    width: 100%;    *zoom: 1;  }  .row-fluid:before,  .row-fluid:after {    display: table;    content: "";  }  .row-fluid:after {    clear: both;  }  .row-fluid [class*="span"] {    display: block;    width: 100%;    min-height: 28px;    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    -ms-box-sizing: border-box;    box-sizing: border-box;    float: left;    margin-left: 2.762430939%;    *margin-left: 2.709239449638298%;  }  .row-fluid [class*="span"]:first-child {    margin-left: 0;  }  .row-fluid .span12 {    width: 99.999999993%;    *width: 99.9468085036383%;  }  .row-fluid .span11 {    width: 91.436464082%;    *width: 91.38327259263829%;  }  .row-fluid .span10 {    width: 82.87292817100001%;    *width: 82.8197366816383%;  }  .row-fluid .span9 {    width: 74.30939226%;    *width: 74.25620077063829%;  }  .row-fluid .span8 {    width: 65.74585634900001%;    *width: 65.6926648596383%;  }  .row-fluid .span7 {    width: 57.182320438000005%;    *width: 57.129128948638304%;  }  .row-fluid .span6 {    width: 48.618784527%;    *width: 48.5655930376383%;  }  .row-fluid .span5 {    width: 40.055248616%;    *width: 40.0020571266383%;  }  .row-fluid .span4 {    width: 31.491712705%;    *width: 31.4385212156383%;  }  .row-fluid .span3 {    width: 22.928176794%;    *width: 22.874985304638297%;  }  .row-fluid .span2 {    width: 14.364640883%;    *width: 14.311449393638298%;  }  .row-fluid .span1 {    width: 5.801104972%;    *width: 5.747913482638298%;  }  input,  textarea,  .uneditable-input {    margin-left: 0;  }  input.span12, textarea.span12, .uneditable-input.span12 {    width: 714px;  }  input.span11, textarea.span11, .uneditable-input.span11 {    width: 652px;  }  input.span10, textarea.span10, .uneditable-input.span10 {    width: 590px;  }  input.span9, textarea.span9, .uneditable-input.span9 {    width: 528px;  }  input.span8, textarea.span8, .uneditable-input.span8 {    width: 466px;  }  input.span7, textarea.span7, .uneditable-input.span7 {    width: 404px;  }  input.span6, textarea.span6, .uneditable-input.span6 {    width: 342px;  }  input.span5, textarea.span5, .uneditable-input.span5 {    width: 280px;  }  input.span4, textarea.span4, .uneditable-input.span4 {    width: 218px;  }  input.span3, textarea.span3, .uneditable-input.span3 {    width: 156px;  }  input.span2, textarea.span2, .uneditable-input.span2 {    width: 94px;  }  input.span1, textarea.span1, .uneditable-input.span1 {    width: 32px;  }}@media (min-width: 1200px) {  .row {    margin-left: -30px;    *zoom: 1;  }  .row:before,  .row:after {    display: table;    content: "";  }  .row:after {    clear: both;  }  [class*="span"] {    float: left;    margin-left: 30px;  }  .container,  .navbar-fixed-top .container,  .navbar-fixed-bottom .container {    width: 1170px;  }  .span12 {    width: 1170px;  }  .span11 {    width: 1070px;  }  .span10 {    width: 970px;  }  .span9 {    width: 870px;  }  .span8 {    width: 770px;  }  .span7 {    width: 670px;  }  .span6 {    width: 570px;  }  .span5 {    width: 470px;  }  .span4 {    width: 370px;  }  .span3 {    width: 270px;  }  .span2 {    width: 170px;  }  .span1 {    width: 70px;  }  .offset12 {    margin-left: 1230px;  }  .offset11 {    margin-left: 1130px;  }  .offset10 {    margin-left: 1030px;  }  .offset9 {    margin-left: 930px;  }  .offset8 {    margin-left: 830px;  }  .offset7 {    margin-left: 730px;  }  .offset6 {    margin-left: 630px;  }  .offset5 {    margin-left: 530px;  }  .offset4 {    margin-left: 430px;  }  .offset3 {    margin-left: 330px;  }  .offset2 {    margin-left: 230px;  }  .offset1 {    margin-left: 130px;  }  .row-fluid {    width: 100%;    *zoom: 1;  }  .row-fluid:before,  .row-fluid:after {    display: table;    content: "";  }  .row-fluid:after {    clear: both;  }  .row-fluid [class*="span"] {    display: block;    width: 100%;    min-height: 28px;    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    -ms-box-sizing: border-box;    box-sizing: border-box;    float: left;    margin-left: 2.564102564%;    *margin-left: 2.510911074638298%;  }  .row-fluid [class*="span"]:first-child {    margin-left: 0;  }  .row-fluid .span12 {    width: 100%;    *width: 99.94680851063829%;  }  .row-fluid .span11 {    width: 91.45299145300001%;    *width: 91.3997999636383%;  }  .row-fluid .span10 {    width: 82.905982906%;    *width: 82.8527914166383%;  }  .row-fluid .span9 {    width: 74.358974359%;    *width: 74.30578286963829%;  }  .row-fluid .span8 {    width: 65.81196581200001%;    *width: 65.7587743226383%;  }  .row-fluid .span7 {    width: 57.264957265%;    *width: 57.2117657756383%;  }  .row-fluid .span6 {    width: 48.717948718%;    *width: 48.6647572286383%;  }  .row-fluid .span5 {    width: 40.170940171000005%;    *width: 40.117748681638304%;  }  .row-fluid .span4 {    width: 31.623931624%;    *width: 31.5707401346383%;  }  .row-fluid .span3 {    width: 23.076923077%;    *width: 23.0237315876383%;  }  .row-fluid .span2 {    width: 14.529914530000001%;    *width: 14.4767230406383%;  }  .row-fluid .span1 {    width: 5.982905983%;    *width: 5.929714493638298%;  }  input,  textarea,  .uneditable-input {    margin-left: 0;  }  input.span12, textarea.span12, .uneditable-input.span12 {    width: 1160px;  }  input.span11, textarea.span11, .uneditable-input.span11 {    width: 1060px;  }  input.span10, textarea.span10, .uneditable-input.span10 {    width: 960px;  }  input.span9, textarea.span9, .uneditable-input.span9 {    width: 860px;  }  input.span8, textarea.span8, .uneditable-input.span8 {    width: 760px;  }  input.span7, textarea.span7, .uneditable-input.span7 {    width: 660px;  }  input.span6, textarea.span6, .uneditable-input.span6 {    width: 560px;  }  input.span5, textarea.span5, .uneditable-input.span5 {    width: 460px;  }  input.span4, textarea.span4, .uneditable-input.span4 {    width: 360px;  }  input.span3, textarea.span3, .uneditable-input.span3 {    width: 260px;  }  input.span2, textarea.span2, .uneditable-input.span2 {    width: 160px;  }  input.span1, textarea.span1, .uneditable-input.span1 {    width: 60px;  }  .thumbnails {    margin-left: -30px;  }  .thumbnails > li {    margin-left: 30px;  }  .row-fluid .thumbnails {    margin-left: 0;  }}@media (max-width: 979px) {  body {    padding-top: 0;  }  .navbar-fixed-top,  .navbar-fixed-bottom {    position: static;  }  .navbar-fixed-top {    margin-bottom: 18px;  }  .navbar-fixed-bottom {    margin-top: 18px;  }  .navbar-fixed-top .navbar-inner,  .navbar-fixed-bottom .navbar-inner {    padding: 5px;  }  .navbar .container {    width: auto;    padding: 0;  }  .navbar .brand {    padding-left: 10px;    padding-right: 10px;    margin: 0 0 0 -5px;  }  .nav-collapse {    clear: both;  }  .nav-collapse .nav {    float: none;    margin: 0 0 9px;  }  .nav-collapse .nav > li {    float: none;  }  .nav-collapse .nav > li > a {    margin-bottom: 2px;  }  .nav-collapse .nav > .divider-vertical {    display: none;  }  .nav-collapse .nav .nav-header {    color: #999999;    text-shadow: none;  }  .nav-collapse .nav > li > a,  .nav-collapse .dropdown-menu a {    padding: 6px 15px;    font-weight: bold;    color: #999999;    -webkit-border-radius: 3px;    -moz-border-radius: 3px;    border-radius: 3px;  }  .nav-collapse .btn {    padding: 4px 10px 4px;    font-weight: normal;    -webkit-border-radius: 4px;    -moz-border-radius: 4px;    border-radius: 4px;  }  .nav-collapse .dropdown-menu li + li a {    margin-bottom: 2px;  }  .nav-collapse .nav > li > a:hover,  .nav-collapse .dropdown-menu a:hover {    background-color: #222222;  }  .nav-collapse.in .btn-group {    margin-top: 5px;    padding: 0;  }  .nav-collapse .dropdown-menu {    position: static;    top: auto;    left: auto;    float: none;    display: block;    max-width: none;    margin: 0 15px;    padding: 0;    background-color: transparent;    border: none;    -webkit-border-radius: 0;    -moz-border-radius: 0;    border-radius: 0;    -webkit-box-shadow: none;    -moz-box-shadow: none;    box-shadow: none;  }  .nav-collapse .dropdown-menu:before,  .nav-collapse .dropdown-menu:after {    display: none;  }  .nav-collapse .dropdown-menu .divider {    display: none;  }  .nav-collapse .navbar-form,  .nav-collapse .navbar-search {    float: none;    padding: 9px 15px;    margin: 9px 0;    border-top: 1px solid #222222;    border-bottom: 1px solid #222222;    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);    box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);  }  .navbar .nav-collapse .nav.pull-right {    float: none;    margin-left: 0;  }  .nav-collapse,  .nav-collapse.collapse {    overflow: hidden;    height: 0;  }  .navbar .btn-navbar {    display: block;  }  .navbar-static .navbar-inner {    padding-left: 10px;    padding-right: 10px;  }}@media (min-width: 980px) {  .nav-collapse.collapse {    height: auto !important;    overflow: visible !important;  }}

    Read the article

  • FAQ: GridView Calculation with JavaScript

    - by Vincent Maverick Durano
    In my previous post I wrote a simple demo on how to Calculate Totals in GridView and Display it in the Footer. Basically what it does is it calculates the total amount by typing into the TextBox and display the grand total in the footer of the GridView and basically it was a server side implemenation.  Many users in the forums are asking how to do the same thing without postbacks and how to calculate both amount and total amount together. In this post I will demonstrate how to do this using JavaScript. To get started let's go ahead and set up the form. Just for the simplicity of this demo I just set up the form like this:   <asp:gridview ID="GridView1" runat="server" ShowFooter="true" AutoGenerateColumns="false"> <Columns> <asp:BoundField DataField="RowNumber" HeaderText="Row Number" /> <asp:BoundField DataField="Description" HeaderText="Item Description" /> <asp:TemplateField HeaderText="Item Price"> <ItemTemplate> <asp:Label ID="LBLPrice" runat="server" Text='<%# Eval("Price") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Quantity"> <ItemTemplate> <asp:TextBox ID="TXTQty" runat="server"></asp:TextBox> </ItemTemplate> <FooterTemplate> <b>Total Amount:</b> </FooterTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Sub-Total"> <ItemTemplate> <asp:Label ID="LBLSubTotal" runat="server"></asp:Label> </ItemTemplate> <FooterTemplate> <asp:Label ID="LBLTotal" runat="server" ForeColor="Green"></asp:Label> </FooterTemplate> </asp:TemplateField> </Columns> </asp:gridview>   As you can see there's no fancy about the mark up above. It just a standard GridView with BoundFields and TemplateFields on it. Now just for the purpose of this demo I just use a dummy data for populating the GridView. Here's the code below:   public partial class GridCalculation : System.Web.UI.Page { private void BindDummyDataToGrid() { DataTable dt = new DataTable(); DataRow dr = null; dt.Columns.Add(new DataColumn("RowNumber", typeof(string))); dt.Columns.Add(new DataColumn("Description", typeof(string))); dt.Columns.Add(new DataColumn("Price", typeof(string))); dr = dt.NewRow(); dr["RowNumber"] = 1; dr["Description"] = "Nike"; dr["Price"] = "1000"; dt.Rows.Add(dr); dr = dt.NewRow(); dr["RowNumber"] = 2; dr["Description"] = "Converse"; dr["Price"] = "800"; dt.Rows.Add(dr); dr = dt.NewRow(); dr["RowNumber"] = 3; dr["Description"] = "Adidas"; dr["Price"] = "500"; dt.Rows.Add(dr); dr = dt.NewRow(); dr["RowNumber"] = 4; dr["Description"] = "Reebok"; dr["Price"] = "750"; dt.Rows.Add(dr); dr = dt.NewRow(); dr["RowNumber"] = 5; dr["Description"] = "Vans"; dr["Price"] = "1100"; dt.Rows.Add(dr); dr = dt.NewRow(); dr["RowNumber"] = 6; dr["Description"] = "Fila"; dr["Price"] = "200"; dt.Rows.Add(dr); //Bind the Gridview GridView1.DataSource = dt; GridView1.DataBind(); } protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { BindDummyDataToGrid(); } } }   Now try to run the page. The output should look something like below: The Client-Side Calculation Here's the code for the GridView calculation:   <script type="text/javascript"> function CalculateTotals() { var gv = document.getElementById("<%= GridView1.ClientID %>"); var tb = gv.getElementsByTagName("input"); var lb = gv.getElementsByTagName("span"); var sub = 0; var total = 0; var indexQ = 1; var indexP = 0; for (var i = 0; i < tb.length; i++) { if (tb[i].type == "text") { sub = parseFloat(lb[indexP].innerHTML) * parseFloat(tb[i].value); if (isNaN(sub)) { lb[i + indexQ].innerHTML = ""; sub = 0; } else { lb[i + indexQ].innerHTML = sub; } indexQ++; indexP = indexP + 2; total += parseFloat(sub); } } lb[lb.length -1].innerHTML = total; } </script>   The code above calculates the sub-total by multiplying the price and the quantity and at the same time calculates the total amount  by adding the sub-total values. Now you can simply call the JavaScript function above like this:   <ItemTemplate> <asp:TextBox ID="TXTQty" runat="server" onkeyup="CalculateTotals();"></asp:TextBox> </ItemTemplate>   Running the code above will display something like below: That's it! I hope someone find this post useful! Technorati Tags: ASP.NET,JavaScript,GridView,TipsTricks

    Read the article

  • Routing Issue in ASP.NET MVC 3 RC 2

    - by imran_ku07
         Introduction:             Two weeks ago, ASP.NET MVC team shipped the ASP.NET MVC 3 RC 2 release. This release includes some new features and some performance optimization. This release also fixes most of the bugs but still some minor issues are present in this release. Some of these issues are already discussed by Scott Guthrie at Update on ASP.NET MVC 3 RC2 (and a workaround for a bug in it). In addition to these issues, I have found another issue in this release regarding routing. In this article, I will show you the issue regarding routing and a simple workaround for this issue.       Description:             The easiest way to understand an issue is to reproduce it in the application. So create a MVC 2 application and a MVC 3 RC 2 application. Then in both applications, just open global.asax file and update the default route as below,     routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.MapRoute( "Default", // Route name "{controller}/{action}/{id1}/{id2}", // URL with parameters new { controller = "Home", action = "Index", id1 = UrlParameter.Optional, id2 = UrlParameter.Optional } // Parameter defaults );              Then just open Index View and add the following lines,    <%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %> <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> Home Page </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <% Html.RenderAction("About"); %> </asp:Content>             The above view will issue a child request to About action method. Now run both applications. ASP.NET MVC 2 application will run just fine. But ASP.NET MVC 3 RC 2 application will throw an exception as shown below,                  You may think that this is a routing issue but this is not the case here as both ASP.NET MVC 2 and ASP.NET MVC  3 RC 2 applications(created above) are built with .NET Framework 4.0 and both will use the same routing defined in System.Web. Something is wrong in ASP.NET MVC 3 RC 2. So after digging into ASP.NET MVC source code, I have found that the UrlParameter class in ASP.NET MVC 3 RC 2 overrides the ToString method which simply return an empty string.     public sealed class UrlParameter { public static readonly UrlParameter Optional = new UrlParameter(); private UrlParameter() { } public override string ToString() { return string.Empty; } }             In MVC 2 the ToString method was not overridden. So to quickly fix the above problem just replace UrlParameter.Optional default value with a different value other than null or empty(for example, a single white space) or replace UrlParameter.Optional default value with a new class object containing the same code as UrlParameter class have except the ToString method is not overridden (or with a overridden ToString method that return a string value other than null or empty). But by doing this you will loose the benefit of ASP.NET MVC 2 Optional URL Parameters. There may be many different ways to fix the above problem and not loose the benefit of optional parameters. Here I will create a new class MyUrlParameter with the same code as UrlParameter class have except the ToString method is not overridden. Then I will create a base controller class which contains a constructor to remove all MyUrlParameter route data parameters, same like ASP.NET MVC doing with UrlParameter route data parameters early in the request.     public class BaseController : Controller { public BaseController() { if (System.Web.HttpContext.Current.CurrentHandler is MvcHandler) { RouteValueDictionary rvd = ((MvcHandler)System.Web.HttpContext.Current.CurrentHandler).RequestContext.RouteData.Values; string[] matchingKeys = (from entry in rvd where entry.Value == MyUrlParameter.Optional select entry.Key).ToArray(); foreach (string key in matchingKeys) { rvd.Remove(key); } } } } public class HomeController : BaseController { public ActionResult Index(string id1) { ViewBag.Message = "Welcome to ASP.NET MVC!"; return View(); } public ActionResult About() { return Content("Child Request Contents"); } }     public sealed class MyUrlParameter { public static readonly MyUrlParameter Optional = new MyUrlParameter(); private MyUrlParameter() { } }     routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.MapRoute( "Default", // Route name "{controller}/{action}/{id1}/{id2}", // URL with parameters new { controller = "Home", action = "Index", id1 = MyUrlParameter.Optional, id2 = MyUrlParameter.Optional } // Parameter defaults );             MyUrlParameter class is a copy of UrlParameter class except that MyUrlParameter class not overrides the ToString method. Note that the default route is modified to use MyUrlParameter.Optional instead of UrlParameter.Optional. Also note that BaseController class constructor is removing MyUrlParameter parameters from the current request route data so that the model binder will not bind these parameters with action method parameters. Now just run the ASP.NET MVC 3 RC 2 application again, you will find that it runs just fine.             In case if you are curious to know that why ASP.NET MVC 3 RC 2 application throws an exception if UrlParameter class contains a ToString method which returns an empty string, then you need to know something about a feature of routing for url generation. During url generation, routing will call the ParsedRoute.Bind method internally. This method includes a logic to match the route and build the url. During building the url, ParsedRoute.Bind method will call the ToString method of the route values(in our case this will call the UrlParameter.ToString method) and then append the returned value into url. This method includes a logic after appending the returned value into url that if two continuous returned values are empty then don't match the current route otherwise an incorrect url will be generated. Here is the snippet from ParsedRoute.Bind method which will prove this statement.       if ((builder2.Length > 0) && (builder2[builder2.Length - 1] == '/')) { return null; } builder2.Append("/"); ........................................................... ........................................................... ........................................................... ........................................................... if (RoutePartsEqual(obj3, obj4)) { builder2.Append(UrlEncode(Convert.ToString(obj3, CultureInfo.InvariantCulture))); continue; }             In the above example, both id1 and id2 parameters default values are set to UrlParameter object and UrlParameter class include a ToString method that returns an empty string. That's why this route will not matched.            Summary:             In this article I showed you the issue regarding routing and also showed you how to workaround this problem. I explained this issue with an example by creating a ASP.NET MVC 2 and a ASP.NET MVC 3 RC 2 application. Finally I also explained the reason for this issue. Hopefully you will enjoy this article too.   SyntaxHighlighter.all()

    Read the article

  • Create PDF document using iTextSharp in ASP.Net 4.0 and MemoryMappedFile

    - by sreejukg
    In this article I am going to demonstrate how ASP.Net developers can programmatically create PDF documents using iTextSharp. iTextSharp is a software component, that allows developers to programmatically create or manipulate PDF documents. Also this article discusses the process of creating in-memory file, read/write data from/to the in-memory file utilizing the new feature MemoryMappedFile. I have a database of users, where I need to send a notice to all my users as a PDF document. The sending mail part of it is not covered in this article. The PDF document will contain the company letter head, to make it more official. I have a list of users stored in a database table named “tblusers”. For each user I need to send customized message addressed to them personally. The database structure for the users is give below. id Title Full Name 1 Mr. Sreeju Nair K. G. 2 Dr. Alberto Mathews 3 Prof. Venketachalam Now I am going to generate the pdf document that contains some message to the user, in the following format. Dear <Title> <FullName>, The message for the user. Regards, Administrator Also I have an image, bg.jpg that contains the background for the document generated. I have created .Net 4.0 empty web application project named “iTextSharpSample”. First thing I need to do is to download the iTextSharp dll from the source forge. You can find the url for the download here. http://sourceforge.net/projects/itextsharp/files/ I have extracted the Zip file and added the itextsharp.dll as a reference to my project. Also I have added a web form named default.aspx to my project. After doing all this, the solution explorer have the following view. In the default.aspx page, I inserted one grid view and associated it with a SQL Data source control that bind data from tblusers. I have added a button column in the grid view with text “generate pdf”. The output of the page in the browser is as follows. Now I am going to create a pdf document when the user clicking on the Generate PDF button. As I mentioned before, I am going to work with the file in memory, I am not going to create a file in the disk. I added an event handler for button by specifying onrowcommand event handler. My gridview source looks like <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" Width="481px" CellPadding="4" ForeColor="#333333" GridLines="None" onrowcommand="Generate_PDF" > ………………………………………………………………………….. ………………………………………………………………………….. </asp:GridView> In the code behind, I wrote the corresponding event handler. protected void Generate_PDF(object sender, GridViewCommandEventArgs e) { // The button click event handler code. // I am going to explain the code for this section in the remaining part of the article } The Generate_PDF method is straight forward, It get the title, fullname and message to some variables, then create the pdf using these variables. The code for getting data from the grid view is as follows // get the row index stored in the CommandArgument property int index = Convert.ToInt32(e.CommandArgument); // get the GridViewRow where the command is raised GridViewRow selectedRow = ((GridView)e.CommandSource).Rows[index]; string title = selectedRow.Cells[1].Text; string fullname = selectedRow.Cells[2].Text; string msg = @"There are some changes in the company policy, due to this matter you need to submit your latest address to us. Please update your contact details / personnal details by visiting the member area of the website. ................................... "; since I don’t want to save the file in the disk, I am going the new feature introduced in .Net framework 4, called Memory-Mapped Files. Using Memory-Mapped mapped file, you can created non-persisted memory mapped files, that are not associated with a file in a disk. So I am going to create a temporary file in memory, add the pdf content to it, then write it to the output stream. To read more about MemoryMappedFile, read this msdn article http://msdn.microsoft.com/en-us/library/dd997372.aspx The below portion of the code using MemoryMappedFile object to create a test pdf document in memory and perform read/write operation on file. The CreateViewStream() object will give you a stream that can be used to read or write data to/from file. The code is very straight forward and I included comment so that you can understand the code. using (MemoryMappedFile mmf = MemoryMappedFile.CreateNew("test1.pdf", 1000000)) { // Create a new pdf document object using the constructor. The parameters passed are document size, left margin, right margin, top margin and bottom margin. iTextSharp.text.Document d = new iTextSharp.text.Document(PageSize.A4, 72,72,172,72); //get an instance of the memory mapped file to stream object so that user can write to this using (MemoryMappedViewStream stream = mmf.CreateViewStream()) { // associate the document to the stream. PdfWriter.GetInstance(d, stream); /* add an image as bg*/ iTextSharp.text.Image jpg = iTextSharp.text.Image.GetInstance(Server.MapPath("Image/bg.png")); jpg.Alignment = iTextSharp.text.Image.UNDERLYING; jpg.SetAbsolutePosition(0, 0); //this is the size of my background letter head image. the size is in points. this will fit to A4 size document. jpg.ScaleToFit(595, 842); d.Open(); d.Add(jpg); d.Add(new Paragraph(String.Format("Dear {0} {1},", title, fullname))); d.Add(new Paragraph("\n")); d.Add(new Paragraph(msg)); d.Add(new Paragraph("\n")); d.Add(new Paragraph(String.Format("Administrator"))); d.Close(); } //read the file data byte[] b; using (MemoryMappedViewStream stream = mmf.CreateViewStream()) { BinaryReader rdr = new BinaryReader(stream); b = new byte[mmf.CreateViewStream().Length]; rdr.Read(b, 0, (int)mmf.CreateViewStream().Length); } Response.Clear(); Response.ContentType = "Application/pdf"; Response.BinaryWrite(b); Response.End(); } Press ctrl + f5 to run the application. First I got the user list. Click on the generate pdf icon. The created looks as follows. Summary: Creating pdf document using iTextSharp is easy. You will get lot of information while surfing the www. Some useful resources and references are mentioned below http://itextsharp.com/ http://www.mikesdotnetting.com/Article/82/iTextSharp-Adding-Text-with-Chunks-Phrases-and-Paragraphs http://somewebguy.wordpress.com/2009/05/08/itextsharp-simplify-your-html-to-pdf-creation/ Hope you enjoyed the article.

    Read the article

  • LightDM will not start after stopping it

    - by Sweeters
    I am running Ubuntu 11.10 "Oneiric Ocelot", and in trying to install the nvidia CUDA developer drivers I switched to a virtual terminal (Ctrl-Alt-F5) and stopped lightdm (installation required that no X server instance be running) through sudo service lightdm stop. Re-starting lightdm with sudo service lightdm start did not work: A couple of * Starting [...] lines where displayed, but the process hanged. (I do not remember at which point, but I think it was * Starting System V runlevel compatibility. I manually rebooted my laptop, and ever since booting seems to hang, usually around the * Starting anac(h)ronistic cron [OK] log line (not consistently at that point, though). From that point on, I seem to be able to interact with my system only through a tty session (Ctrl-Alt-F1). I've tried purging and reinstalling both lightdm and gdm, as well as selecting both as the default display managers (through sudo dpkg-reconfigure [lightdm / gdm] or by manually editing /etc/X11/default-display-manager) through both apt-get and aptitude (that shouldn't make a difference anyway) after updating the packages, but the problem persists. Some of the responses I'm getting are the following: After running sudo dpkg-reconfigure lightdm (but not ... gdm) I get the following message: dpkg-maintscript-helper:warning: environment variable DPKG_MATINSCRIPT_NAME missing dpkg-maintscript-helper:warning: environment variable DPKG_MATINSCRIPT_PACKAGE missing After trying sudo service lightdm start or sudo start lightdm I get to see the boot loading screen again but nothing changes. If I go back to the tty shell I see lightdm start/running, process <num> but ps -e | grep lightdm gives no output. After trying sudo service gdm start or sudo starg gdm I get the gdm start/running, process <num> message, and gdm-binary is supposedly an active process, but all that happens is that the screen blinks a couple of times and nothing else. Other candidate solutions that I'd found on the web included running startx but when I try that I get an error output [...] Fatal server error: no screens found [...]. Moreover, I made sure that lightdm-gtk-greeter is installed but that did not help either. Please excuse my not including complete outputs/logs; I am writing this post from another computer and it's hard to manually copy the complete logs. Also, I've seen several posts that had to do with similar problems, but either there was no fix, or the one suggested did not work for me. In closing: Please help! I very much hope to avoid re-installing Ubuntu from scratch! :) Alex @mosi I did not manage to fix the NVIDIA kernel driver as per your instructions. I should perhaps mention that I'm on a Dell XPS15 laptop with an NVIDIA Optimus graphics card, and that I have bumblebee installed (which installs nvidia drivers during its installation, I believe). Issuing the mentioned commands I get the following: ~$uname -r 3.0.0-12-generic ~$lsmod | grep -i nvidia nvidia 11713772 0 ~$dmesg | grep -i nvidia [ 8.980041] nvidia: module license 'NVIDIA' taints kernel. [ 9.354860] nvidia 0000:01:00.0: power state changed by ACPI to D0 [ 9.354864] nvidia 0000:01:00.0: power state changed by ACPI to D0 [ 9.354868] nvidia 0000:01:00.0: enabling device (0006 -> 0007) [ 9.354873] nvidia 0000:01:00.0: PCI INT A -> GSI 16 (level, low) -> IRQ 16 [ 9.354879] nvidia 0000:01:00.0: setting latency timer to 64 [ 9.355052] NVRM: loading NVIDIA UNIX x86_64 Kernel Module 280.13 Wed Jul 27 16:53:56 PDT 2011 Also, running aptitude search nvidia gives me the following: p nvidia-173 - NVIDIA binary Xorg driver, kernel module a p nvidia-173-dev - NVIDIA binary Xorg driver development file p nvidia-173-updates - NVIDIA binary Xorg driver, kernel module a p nvidia-173-updates-dev - NVIDIA binary Xorg driver development file p nvidia-96 - NVIDIA binary Xorg driver, kernel module a p nvidia-96-dev - NVIDIA binary Xorg driver development file p nvidia-96-updates - NVIDIA binary Xorg driver, kernel module a p nvidia-96-updates-dev - NVIDIA binary Xorg driver development file p nvidia-cg-toolkit - Cg Toolkit - GPU Shader Authoring Language p nvidia-common - Find obsolete NVIDIA drivers i nvidia-current - NVIDIA binary Xorg driver, kernel module a p nvidia-current-dev - NVIDIA binary Xorg driver development file c nvidia-current-updates - NVIDIA binary Xorg driver, kernel module a p nvidia-current-updates-dev - NVIDIA binary Xorg driver development file i nvidia-settings - Tool of configuring the NVIDIA graphics dr p nvidia-settings-updates - Tool of configuring the NVIDIA graphics dr v nvidia-va-driver - v nvidia-va-driver - I've tried manually installing (sudo aptitude install <package>) packages nvidia-common and nvidia-settings-updates but to no avail. For example, sudo aptitude install nvidia-settings-updates returns the following log: Reading package lists... Building dependency tree... Reading state information... Reading extended state information... Initializing package states... Writing extended state information... No packages will be installed, upgraded, or removed. 0 packages upgraded, 0 newly installed, 0 to remove and 83 not upgraded. Need to get 0 B of archives. After unpacking 0 B will be used. Writing extended state information... Reading package lists... Building dependency tree... Reading state information... Reading extended state information... Initializing package states... Writing extended state information... The same happens with the Linux headers (i.e. I cannot seem to be able to install linux-headers-3.0.0-12-generic). The output of aptitude search linux-headers is as follows: v linux-headers - v linux-headers - v linux-headers-2.6 - i linux-headers-2.6.38-11 - Header files related to Linux kernel versi i linux-headers-2.6.38-11-generic - Linux kernel headers for version 2.6.38 on i A linux-headers-2.6.38-8 - Header files related to Linux kernel versi i A linux-headers-2.6.38-8-generic - Linux kernel headers for version 2.6.38 on v linux-headers-3 - v linux-headers-3.0 - v linux-headers-3.0 - i A linux-headers-3.0.0-12 - Header files related to Linux kernel versi p linux-headers-3.0.0-12-generic - Linux kernel headers for version 3.0.0 on p linux-headers-3.0.0-12-generic- - Linux kernel headers for version 3.0.0 on p linux-headers-3.0.0-12-server - Linux kernel headers for version 3.0.0 on p linux-headers-3.0.0-12-virtual - Linux kernel headers for version 3.0.0 on p linux-headers-generic - Generic Linux kernel headers p linux-headers-generic-pae - Generic Linux kernel headers v linux-headers-lbm - v linux-headers-lbm - v linux-headers-lbm-2.6 - v linux-headers-lbm-2.6 - p linux-headers-lbm-3.0.0-12-gene - Header files related to linux-backports-mo p linux-headers-lbm-3.0.0-12-gene - Header files related to linux-backports-mo p linux-headers-lbm-3.0.0-12-serv - Header files related to linux-backports-mo p linux-headers-server - Linux kernel headers on Server Equipment. p linux-headers-virtual - Linux kernel headers for virtual machines @heartsmagic I did try purging and reinstalling any nvidia driver packages, but it did not seem to make a difference, My xorg.conf file contains the following: # nvidia-xconfig: X configuration file generated by nvidia-xconfig # nvidia-xconfig: version 280.13 ([email protected]) Wed Jul 27 17:15:58 PDT 2011 Section "ServerLayout" Identifier "Layout0" Screen 0 "Screen0" 0 0 InputDevice "Keyboard0" "CoreKeyboard" InputDevice "Mouse0" "CorePointer" EndSection Section "Files" EndSection Section "InputDevice" # generated from default Identifier "Mouse0" Driver "mouse" Option "Protocol" "auto" Option "Device" "/dev/psaux" Option "Emulate3Buttons" "no" Option "ZAxisMapping" "4 5" EndSection Section "InputDevice" # generated from default Identifier "Keyboard0" Driver "kbd" EndSection Section "Monitor" Identifier "Monitor0" VendorName "Unknown" ModelName "Unknown" HorizSync 28.0 - 33.0 VertRefresh 43.0 - 72.0 Option "DPMS" EndSection Section "Device" Identifier "Device0" Driver "nvidia" VendorName "NVIDIA Corporation" EndSection Section "Screen" Identifier "Screen0" Device "Device0" Monitor "Monitor0" DefaultDepth 24 SubSection "Display" Depth 24 EndSubSection EndSection

    Read the article

  • Using the HTML5 &lt;input type=&quot;file&quot; multiple=&quot;multiple&quot;&gt; Tag in ASP.NET

    - by Rick Strahl
    Per HTML5 spec the <input type="file" /> tag allows for multiple files to be picked from a single File upload button. This is actually a very subtle change that's very useful as it makes it much easier to send multiple files to the server without using complex uploader controls. Please understand though, that even though you can send multiple files using the <input type="file" /> tag, the process of how those files are sent hasn't really changed - there's still no progress information or other hooks that allow you to automatically make for a nicer upload experience without additional libraries or code. For that you will still need some sort of library (I'll post an example in my next blog post using plUpload). All the new features allow for is to make it easier to select multiple images from disk in one operation. Where you might have required many file upload controls before to upload several files, one File control can potentially do the job. How it works To create a file input box that allows with multiple file support you can simply do:<form method="post" enctype="multipart/form-data"> <label>Upload Images:</label> <input type="file" multiple="multiple" name="File1" id="File1" accept="image/*" /> <hr /> <input type="submit" id="btnUpload" value="Upload Images" /> </form> Now when the file open dialog pops up - depending on the browser and whether the browser supports it - you can pick multiple files. Here I'm using Firefox using the thumbnail preview I can easily pick images to upload on a form: Note that I can select multiple images in the dialog all of which get stored in the file textbox. The UI for this can be different in some browsers. For example Chrome displays 3 files selected as text next to the Browse… button when I choose three rather than showing any files in the textbox. Most other browsers display the standard file input box and display the multiple filenames as a comma delimited list in the textbox. Note that you can also specify the accept attribute in the <input> tag, which specifies a mime-type to specify what type of content to allow.Here I'm only allowing images (image/*) and the browser complies by just showing me image files to display. Likewise I could use text/* for all text formats registered on the machine or text/xml to only show XML files (which would include xml,xst,xsd etc.). Capturing Files on the Server with ASP.NET When you upload files to an ASP.NET server there are a couple of things to be aware of. When multiple files are uploaded from a single file control, they are assigned the same name. In other words if I select 3 files to upload on the File1 control shown above I get three file form variables named File1. This means I can't easily retrieve files by their name:HttpPostedFileBase file = Request.Files["File1"]; because there will be multiple files for a given name. The above only selects the first file. Instead you can only reliably retrieve files by their index. Below is an example I use in app to capture a number of images uploaded and store them into a database using a business object and EF 4.2.for (int i = 0; i < Request.Files.Count; i++) { HttpPostedFileBase file = Request.Files[i]; if (file.ContentLength == 0) continue; if (file.ContentLength > App.Configuration.MaxImageUploadSize) { ErrorDisplay.ShowError("File " + file.FileName + " is too large. Max upload size is: " + App.Configuration.MaxImageUploadSize); return View("UploadClassic",model); } var image = new ClassifiedsBusiness.Image(); var ms = new MemoryStream(16498); file.InputStream.CopyTo(ms); image.Entered = DateTime.Now; image.EntryId = model.Entry.Id; image.ContentType = "image/jpeg"; image.ImageData = ms.ToArray(); ms.Seek(0, SeekOrigin.Begin); // resize image if necessary and turn into jpeg Bitmap bmp = Imaging.ResizeImage(ms.ToArray(), App.Configuration.MaxImageWidth, App.Configuration.MaxImageHeight); ms.Close(); ms = new MemoryStream(); bmp.Save(ms,ImageFormat.Jpeg); image.ImageData = ms.ToArray(); bmp.Dispose(); ms.Close(); model.Entry.Images.Add(image); } This works great and also allows you to capture input from multiple input controls if you are dealing with browsers that don't support multiple file selections in the file upload control. The important thing here is that I iterate over the files by index, rather than using a foreach loop over the Request.Files collection. The files collection returns key name strings, rather than the actual files (who thought that was good idea at Microsoft?), and so that isn't going to work since you end up getting multiple keys with the same name. Instead a plain for loop has to be used to loop over all files. Another Option in ASP.NET MVC If you're using ASP.NET MVC you can use the code above as well, but you have yet another option to capture multiple uploaded files by using a parameter for your post action method.public ActionResult Save(HttpPostedFileBase[] file1) { foreach (var file in file1) { if (file.ContentLength < 0) continue; // do something with the file }} Note that in order for this to work you have to specify each posted file variable individually in the parameter list. This works great if you have a single file upload to deal with. You can also pass this in addition to your main model to separate out a ViewModel and a set of uploaded files:public ActionResult Edit(EntryViewModel model,HttpPostedFileBase[] uploadedFile) You can also make the uploaded files part of the ViewModel itself - just make sure you use the appropriate naming for the variable name in the HTML document (since there's Html.FileFor() extension). Browser Support You knew this was coming, right? The feature is really nice, but unfortunately not supported universally yet. Once again Internet Explorer is the problem: No shipping version of Internet Explorer supports multiple file uploads. IE10 supposedly will, but even IE9 does not. All other major browsers - Chrome, Firefox, Safari and Opera - support multi-file uploads in their latest versions. So how can you handle this? If you need to provide multiple file uploads you can simply add multiple file selection boxes and let people either select multiple files with a single upload file box or use multiples. Alternately you can do some browser detection and if IE is used simply show the extra file upload boxes. It's not ideal, but either one of these approaches makes life easier for folks that use a decent browser and leaves you with a functional interface for those that don't. Here's a UI I recently built as an alternate uploader with multiple file upload buttons: I say this is my 'alternate' uploader - for my primary uploader I continue to use an add-in solution. Specifically I use plUpload and I'll discuss how that's implemented in my next post. Although I think that plUpload (and many of the other packaged JavaScript upload solutions) are a better choice especially for large uploads, for simple one file uploads input boxes work well enough. The advantage of this solution is that it's very easy to handle on the server side. Any of the JavaScript controls require special handling for uploads which I'll also discuss in my next post.© Rick Strahl, West Wind Technologies, 2005-2012Posted in HTML5  ASP.NET  MVC   Tweet !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();

    Read the article

  • Using Radio Button in GridView with Validation

    - by Vincent Maverick Durano
    A developer is asking how to select one radio button at a time if the radio button is inside the GridView.  As you may know setting the group name attribute of radio button will not work if the radio button is located within a Data Representation control like GridView. This because the radio button inside the gridview bahaves differentely. Since a gridview is rendered as table element , at run time it will assign different "name" to each radio button. Hence you are able to select multiple rows. In this post I'm going to demonstrate how select one radio button at a time in gridview and add a simple validation on it. To get started let's go ahead and fire up visual studio and the create a new web application / website project. Add a WebForm and then add gridview. The mark up would look something like this: <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" > <Columns> <asp:TemplateField> <ItemTemplate> <asp:RadioButton ID="rb" runat="server" /> </ItemTemplate> </asp:TemplateField> <asp:BoundField DataField="RowNumber" HeaderText="Row Number" /> <asp:BoundField DataField="Col1" HeaderText="First Column" /> <asp:BoundField DataField="Col2" HeaderText="Second Column" /> </Columns> </asp:GridView> Noticed that I've added a templatefield column so that we can add the radio button there. Also I have set up some BoundField columns and set the DataFields as RowNumber, Col1 and Col2. These columns are just dummy columns and i used it for the simplicity of this example. Now where these columns came from? These columns are created by hand at the code behind file of the ASPX. Here's the code below: private DataTable FillData() { DataTable dt = new DataTable(); DataRow dr = null; //Create DataTable columns dt.Columns.Add(new DataColumn("RowNumber", typeof(string))); dt.Columns.Add(new DataColumn("Col1", typeof(string))); dt.Columns.Add(new DataColumn("Col2", typeof(string))); //Create Row for each columns dr = dt.NewRow(); dr["RowNumber"] = 1; dr["Col1"] = "A"; dr["Col2"] = "B"; dt.Rows.Add(dr); dr = dt.NewRow(); dr["RowNumber"] = 2; dr["Col1"] = "AA"; dr["Col2"] = "BB"; dt.Rows.Add(dr); dr = dt.NewRow(); dr["RowNumber"] = 3; dr["Col1"] = "A"; dr["Col2"] = "B"; dt.Rows.Add(dr); dr = dt.NewRow(); dr["RowNumber"] = 4; dr["Col1"] = "A"; dr["Col2"] = "B"; dt.Rows.Add(dr); dr = dt.NewRow(); dr["RowNumber"] = 5; dr["Col1"] = "A"; dr["Col2"] = "B"; dt.Rows.Add(dr); return dt; } And here's the code for binding the GridView with the dummy data above. protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { GridView1.DataSource = FillData(); GridView1.DataBind(); } } Okay we have now a GridView data with a radio button on each row. Now lets go ahead and switch back to ASPX mark up. In this example I'm going to use a JavaScript for validating the radio button to select one radio button at a time. Here's the javascript code below: function CheckOtherIsCheckedByGVID(rb) { var isChecked = rb.checked; var row = rb.parentNode.parentNode; if (isChecked) { row.style.backgroundColor = '#B6C4DE'; row.style.color = 'black'; } var currentRdbID = rb.id; parent = document.getElementById("<%= GridView1.ClientID %>"); var items = parent.getElementsByTagName('input'); for (i = 0; i < items.length; i++) { if (items[i].id != currentRdbID && items[i].type == "radio") { if (items[i].checked) { items[i].checked = false; items[i].parentNode.parentNode.style.backgroundColor = 'white'; items[i].parentNode.parentNode.style.color = '#696969'; } } } } The function above sets the row of the current selected radio button's style to determine that the row is selected and then loops through the radio buttons in the gridview and then de-select the previous selected radio button and set the row style back to its default. You can then call the javascript function above at onlick event of radio button like below: <asp:RadioButton ID="rb" runat="server" onclick="javascript:CheckOtherIsCheckedByGVID(this);" /> Here's the output below: On Load: After Selecting a Radio Button: As you have noticed, on initial load there's no default selected radio in the GridView. Now let's add a simple validation for that. We will basically display an error message if a user clicks a button that triggers a postback without selecting  a radio button in the GridView. Here's the javascript for the validation: function ValidateRadioButton(sender, args) { var gv = document.getElementById("<%= GridView1.ClientID %>"); var items = gv.getElementsByTagName('input'); for (var i = 0; i < items.length ; i++) { if (items[i].type == "radio") { if (items[i].checked) { args.IsValid = true; return; } else { args.IsValid = false; } } } } The function above loops through the rows in gridview and find all the radio buttons within it. It will then check each radio button checked property. If a radio is checked then set IsValid to true else set it to false.  The reason why I'm using IsValid is because I'm using the ASP validator control for validation. Now add the following mark up below under the GridView declaration: <br /> <asp:Label ID="lblMessage" runat="server" /> <br /> <asp:Button ID="btn" runat="server" Text="POST" onclick="btn_Click" ValidationGroup="GroupA" /> <asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="Please select row in the grid." ClientValidationFunction="ValidateRadioButton" ValidationGroup="GroupA" style="display:none"></asp:CustomValidator> <asp:ValidationSummary ID="ValidationSummary1" runat="server" ValidationGroup="GroupA" HeaderText="Error List:" DisplayMode="BulletList" ForeColor="Red" /> And then at Button Click event add this simple code below just to test if  the validation works: protected void btn_Click(object sender, EventArgs e) { lblMessage.Text = "Postback at: " + DateTime.Now.ToString("hh:mm:ss tt"); } Here's the output below that you can see in the browser:   That's it! I hope someone find this post useful! Technorati Tags: ASP.NET,JavaScript,GridView

    Read the article

  • Creating A SharePoint Parent/Child List Relationship&ndash; SharePoint 2010 Edition

    - by Mark Rackley
    Hey blog readers… It has been almost 2 years since I posted my most read blog on creating a Parent/Child list relationship in SharePoint 2007: Creating a SharePoint List Parent / Child Relationship - Out of the Box And then a year ago I improved on my method and redid the blog post… still for SharePoint 2007: Creating a SharePoint List Parent/Child Relationship – VIDEO REMIX Since then many of you have been asking me how to get this to work in SharePoint 2010, and frankly I have just not had time to look into it. I wish I could have jumped into this sooner, but have just recently began to look at it. Well.. after all this time I have actually come up with two solutions that work, neither of them are as clean as I’d like them to be, but I wanted to get something in your hands that you can start using today. Hopefully in the coming weeks and months I’ll be able to improve upon this further and give you guys some better options. For the most part, the process is identical to the 2007 process, but you have probably found out that the list view web parts in 2010 behave differently, and getting the Parent ID to your new child form can be a pain in the rear (at least that’s what I’ve discovered). Anyway, like I said, I have found a couple of solutions that work. If you know of a better one, please let us know as it bugs me that this not as eloquent as my 2007 implementation. Getting on the same page First thing I’d recommend is recreating this blog: Creating a SharePoint List Parent/Child Relationship – VIDEO REMIX in SharePoint 2010… There are some vague differences, but it’s basically the same…  Here’s a quick video of me doing this in SP 2010: Creating Lists necessary for this blog post Now that you have the lists created, lets set up the New Time form to use a QueryString variable to populate the Parent ID field: Creating parameters in Child’s new item form to set parent ID Did I talk fast enough through both of those videos? Hopefully by now that stuff is old hat to you, but I wanted to make sure everyone could get on the same page.  Okay… let’s get started. Solution 1 – XSLTListView with Javascript This solution is the more elegant of the two, however it does require the use of a little javascript.  The other solution does not use javascript, but it also doesn’t use the pretty new SP 2010 pop-ups.  I’ll let you decide which you like better. The basic steps of this solution are: Inserted a Related Item View Insert a ContentEditorWebPart Insert script in ContentEditorWebPart that pulls the ID from the Query string and calls the method to insert a new item on the child entry form Hide the toolbar from data view to remove “add new item” link. Again, you don’t HAVE to use a CEWP, you could just put the javascript directly in the page using SPD.  Anyway, here is how I did it: Using Related Item View / JavaScript Here’s the JavaScript I used in my Content Editor Web Part: <script type="text/javascript"> function NewTime() { // Get the Query String values and split them out into the vals array var vals = new Object(); var qs = location.search.substring(1, location.search.length); var args = qs.split("&"); for (var i=0; i < args.length; i++) { var nameVal = args[i].split("="); var temp = unescape(nameVal[1]).split('+'); nameVal[1] = temp.join(' '); vals[nameVal[0]] = nameVal[1]; } var issueID = vals["ID"]; //use this to bring up the pretty pop up NewItem2(event,"http://sp2010dev:1234/Lists/Time/NewForm.aspx?IssueID=" + issueID); //use this to open a new window //window.location="http://sp2010dev:1234/Lists/Time/NewForm.aspx?IssueID=" + issueID; } </script> Solution 2 – DataFormWebPart and exact same 2007 Process This solution is a little more of a hack, but it also MUCH more close to the process we did in SP 2007. So, if you don’t mind not having the pretty pop-up and prefer the comforts of what you are used to, you can give this one a try.  The basics steps are: Insert a DataFormWebPart instead of the List Data View Create a Parameter on DataFormWebPart to store “ID” Query String Variable Filter DataFormWebPart using Parameter Insert a link at bottom of DataForm Web part that points to the Child’s new item form and passes in the Parent Id using the Parameter. See.. like I told you, exact same process as in 2007 (except using the DataFormWeb Part). The DataFormWebPart also requires a lot more work to make it look “pretty” but it’s just table rows and cells, and can be configured pretty painlessly.  Here is that video: Using DataForm Web Part One quick update… if you change the link in this solution from: <tr> <td><a href="http://sp2010dev:1234/Lists/Time/NewForm.aspx?IssueID={$IssueIDParam}">Click here to create new item...</a> </td> </tr> to: <tr> <td> <a href="javascript:NewItem2(event,'http://sp2010dev:1234/Lists/Time/NewForm.aspx?IssueID={$IssueIDParam}');">Click here to create new item...</a> </td> </tr> It will open up in the pretty pop up and act the same as solution one… So… both Solutions will now behave the same to the end user. Just depends on which you want to implement. That’s all for now… Remember in both solutions when you have them working, you can make the “IssueID” invisible to users by using the “ms-hidden” class (it’s my previous blog post on the subject up there). That’s basically all there is to it! No pithy or witty closing this time… I am sorry it took me so long to dive into this and I hope your questions are answered. As I become more polished myself I will try to come up with a cleaner solution that will make everyone happy… As always, thanks for taking the time to stop by.

    Read the article

  • Controlar Autentificaci&oacute;n Crystal Reports

    - by Jason Ulloa
    Para todos los que hemos trabajamos con Crystal Reports, no es un secreto que cuando tratamos de conectar nuestro reporte directamente a la base de datos, se nos viene encima el problema de autenticación. Es decir nuestro reporte al momento de iniciar la carga nos solicita autentificarnos en el servidor y sino lo hacemos, simplemente no veremos el reporte. Esto, además de ser tedioso para los usuarios se convierte en un problema de seguridad bastante grande, de ahí que en la mayoría de los casos se recomienda utilizar dataset. Sin embargo, para todos los que aún sabiendo esto no desean utilizar datasets, sino que, quieren conectar su crystal directamente veremos como implementar una pequeña clase que nos ayudará con esa tarea. Generalmente, cuando trabajamos con una aplicación web, nuestra cadena de conexión esta incluida en el web.config y también en muchas ocasiones contiene los datos como el usuario y password para acceder a la base de datos.  De esta cadena de conexión y estos datos es de los que nos ayudaremos para implementar la autentificación en el reporte. Generalmente, la cadena de conexión se vería así <connectionStrings> <remove name="LocalSqlServer"/> <add name="xxx" connectionString="Data Source=.\SqlExpress;Integrated Security=False;Initial Catalog=xxx;user id=myuser;password=mypass" providerName="System.Data.SqlClient"/> </connectionStrings>   Para nuestro ejemplo, nombraremos a nuestra clase CrystalRules (es solo algo que pensé de momento) 1. Primer Paso Creamos una variable de tipo SqlConnectionStringBuilder, a la cual le asignaremos la cadena de conexión que definimos en el web.config, y que luego utilizaremos para obtener los datos del usuario y el password para el crystal report. SqlConnectionStringBuilder builder = new SqlConnectionStringBuilder(ConfigurationManager.ConnectionStrings["xxx"].ConnectionString); 2. Implementación de propiedad Para ser más ordenados crearemos varias propiedad de tipo Privado, que se encargarán de recibir los datos de:   La Base de datos, el password, el usuario y el servidor private string _dbName; private string _serverName; private string _userID; private string _passWord;   private string dataBase { get { return _dbName; } set { _dbName = value; } }   private string serverName { get { return _serverName; } set { _serverName = value; } }   private string userName { get { return _userID; } set { _userID = value; } }   private string dataBasePassword { get { return _passWord; } set { _passWord = value; } } 3. Creación del Método para aplicar los datos de conexión Una vez que ya tenemos las propiedades, asignaremos a las variables los valores que se han recogido en el SqlConnectionStringBuilder. Y crearemos una variable de tipo ConnectionInfo para aplicar los datos de conexión. internal void ApplyInfo(ReportDocument _oRpt) { dataBase = builder.InitialCatalog; serverName = builder.DataSource; userName = builder.UserID; dataBasePassword = builder.Password;   Database oCRDb = _oRpt.Database; Tables oCRTables = oCRDb.Tables; //Table oCRTable = default(Table); TableLogOnInfo oCRTableLogonInfo = default(TableLogOnInfo); ConnectionInfo oCRConnectionInfo = new ConnectionInfo();   oCRConnectionInfo.DatabaseName = _dbName; oCRConnectionInfo.ServerName = _serverName; oCRConnectionInfo.UserID = _userID; oCRConnectionInfo.Password = _passWord;   foreach (Table oCRTable in oCRTables) { oCRTableLogonInfo = oCRTable.LogOnInfo; oCRTableLogonInfo.ConnectionInfo = oCRConnectionInfo; oCRTable.ApplyLogOnInfo(oCRTableLogonInfo);     }   }   4. Creación del report document y aplicación de la seguridad Una vez recogidos los datos y asignados, crearemos un elemento report document al cual le asignaremos el CrystalReportViewer y le aplicaremos los datos de acceso que obtuvimos anteriormente public void loadReport(string repName, CrystalReportViewer viewer) {   // attached our report to viewer and set database login. ReportDocument report = new ReportDocument(); report.Load(HttpContext.Current.Server.MapPath("~/Reports/" + repName)); ApplyInfo(report); viewer.ReportSource = report; } Al final, nuestra clase completa ser vería así public class CrystalRules { SqlConnectionStringBuilder builder = new SqlConnectionStringBuilder(ConfigurationManager.ConnectionStrings["Fatchoy.Data.Properties.Settings.FatchoyConnectionString"].ConnectionString);   private string _dbName; private string _serverName; private string _userID; private string _passWord;   private string dataBase { get { return _dbName; } set { _dbName = value; } }   private string serverName { get { return _serverName; } set { _serverName = value; } }   private string userName { get { return _userID; } set { _userID = value; } }   private string dataBasePassword { get { return _passWord; } set { _passWord = value; } }   internal void ApplyInfo(ReportDocument _oRpt) { dataBase = builder.InitialCatalog; serverName = builder.DataSource; userName = builder.UserID; dataBasePassword = builder.Password;   Database oCRDb = _oRpt.Database; Tables oCRTables = oCRDb.Tables; //Table oCRTable = default(Table); TableLogOnInfo oCRTableLogonInfo = default(TableLogOnInfo); ConnectionInfo oCRConnectionInfo = new ConnectionInfo();   oCRConnectionInfo.DatabaseName = _dbName; oCRConnectionInfo.ServerName = _serverName; oCRConnectionInfo.UserID = _userID; oCRConnectionInfo.Password = _passWord;   foreach (Table oCRTable in oCRTables) { oCRTableLogonInfo = oCRTable.LogOnInfo; oCRTableLogonInfo.ConnectionInfo = oCRConnectionInfo; oCRTable.ApplyLogOnInfo(oCRTableLogonInfo);     }   }   public void loadReport(string repName, CrystalReportViewer viewer) {   // attached our report to viewer and set database login. ReportDocument report = new ReportDocument(); report.Load(HttpContext.Current.Server.MapPath("~/Reports/" + repName)); ApplyInfo(report); viewer.ReportSource = report; }       #region instance   private static CrystalRules m_instance;   // Properties public static CrystalRules Instance { get { if (m_instance == null) { m_instance = new CrystalRules(); } return m_instance; } }   public DataDataContext m_DataContext { get { return DataDataContext.Instance; } }     #endregion instance   }   Si bien, la solución no es robusta y no es la mas segura. En casos de uso como una intranet y cuando estamos contra tiempo, podría ser de gran ayuda.

    Read the article

  • A simple Dynamic Proxy

    - by Abhijeet Patel
    Frameworks such as EF4 and MOQ do what most developers consider "dark magic". For instance in EF4, when you use a POCO for an entity you can opt-in to get behaviors such as "lazy-loading" and "change tracking" at runtime merely by ensuring that your type has the following characteristics: The class must be public and not sealed. The class must have a public or protected parameter-less constructor. The class must have public or protected properties Adhere to this and your type is magically endowed with these behaviors without any additional programming on your part. Behind the scenes the framework subclasses your type at runtime and creates a "dynamic proxy" which has these additional behaviors and when you navigate properties of your POCO, the framework replaces the POCO type with derived type instances. The MOQ framework does simlar magic. Let's say you have a simple interface:   public interface IFoo      {          int GetNum();      }   We can verify that the GetNum() was invoked on a mock like so:   var mock = new Mock<IFoo>(MockBehavior.Default);   mock.Setup(f => f.GetNum());   var num = mock.Object.GetNum();   mock.Verify(f => f.GetNum());   Beind the scenes the MOQ framework is generating a dynamic proxy by implementing IFoo at runtime. the call to moq.Object returns the dynamic proxy on which we then call "GetNum" and then verify that this method was invoked. No dark magic at all, just clever programming is what's going on here, just not visible and hence appears magical! Let's create a simple dynamic proxy generator which accepts an interface type and dynamically creates a proxy implementing the interface type specified at runtime.     public static class DynamicProxyGenerator   {       public static T GetInstanceFor<T>()       {           Type typeOfT = typeof(T);           var methodInfos = typeOfT.GetMethods();           AssemblyName assName = new AssemblyName("testAssembly");           var assBuilder = AppDomain.CurrentDomain.DefineDynamicAssembly(assName, AssemblyBuilderAccess.RunAndSave);           var moduleBuilder = assBuilder.DefineDynamicModule("testModule", "test.dll");           var typeBuilder = moduleBuilder.DefineType(typeOfT.Name + "Proxy", TypeAttributes.Public);              typeBuilder.AddInterfaceImplementation(typeOfT);           var ctorBuilder = typeBuilder.DefineConstructor(                     MethodAttributes.Public,                     CallingConventions.Standard,                     new Type[] { });           var ilGenerator = ctorBuilder.GetILGenerator();           ilGenerator.EmitWriteLine("Creating Proxy instance");           ilGenerator.Emit(OpCodes.Ret);           foreach (var methodInfo in methodInfos)           {               var methodBuilder = typeBuilder.DefineMethod(                   methodInfo.Name,                   MethodAttributes.Public | MethodAttributes.Virtual,                   methodInfo.ReturnType,                   methodInfo.GetParameters().Select(p => p.GetType()).ToArray()                   );               var methodILGen = methodBuilder.GetILGenerator();               methodILGen.EmitWriteLine("I'm a proxy");               if (methodInfo.ReturnType == typeof(void))               {                   methodILGen.Emit(OpCodes.Ret);               }               else               {                   if (methodInfo.ReturnType.IsValueType || methodInfo.ReturnType.IsEnum)                   {                       MethodInfo getMethod = typeof(Activator).GetMethod(/span>"CreateInstance",new Type[]{typeof((Type)});                                               LocalBuilder lb = methodILGen.DeclareLocal(methodInfo.ReturnType);                       methodILGen.Emit(OpCodes.Ldtoken, lb.LocalType);                       methodILGen.Emit(OpCodes.Call, typeofype).GetMethod("GetTypeFromHandle"));  ));                       methodILGen.Emit(OpCodes.Callvirt, getMethod);                       methodILGen.Emit(OpCodes.Unbox_Any, lb.LocalType);                                                              }                 else                   {                       methodILGen.Emit(OpCodes.Ldnull);                   }                   methodILGen.Emit(OpCodes.Ret);               }               typeBuilder.DefineMethodOverride(methodBuilder, methodInfo);           }                     Type constructedType = typeBuilder.CreateType();           var instance = Activator.CreateInstance(constructedType);           return (T)instance;       }   }   Dynamic proxies are created by calling into the following main types: AssemblyBuilder, TypeBuilder, Modulebuilder and ILGenerator. These types enable dynamically creating an assembly and emitting .NET modules and types in that assembly, all using IL instructions. Let's break down the code above a bit and examine it piece by piece                Type typeOfT = typeof(T);              var methodInfos = typeOfT.GetMethods();              AssemblyName assName = new AssemblyName("testAssembly");              var assBuilder = AppDomain.CurrentDomain.DefineDynamicAssembly(assName, AssemblyBuilderAccess.RunAndSave);              var moduleBuilder = assBuilder.DefineDynamicModule("testModule", "test.dll");              var typeBuilder = moduleBuilder.DefineType(typeOfT.Name + "Proxy", TypeAttributes.Public);   We are instructing the runtime to create an assembly caled "test.dll"and in this assembly we then emit a new module called "testModule". We then emit a new type definition of name "typeName"Proxy into this new module. This is the definition for the "dynamic proxy" for type T                 typeBuilder.AddInterfaceImplementation(typeOfT);               var ctorBuilder = typeBuilder.DefineConstructor(                         MethodAttributes.Public,                         CallingConventions.Standard,                         new Type[] { });               var ilGenerator = ctorBuilder.GetILGenerator();               ilGenerator.EmitWriteLine("Creating Proxy instance");               ilGenerator.Emit(OpCodes.Ret);   The newly created type implements type T and defines a default parameterless constructor in which we emit a call to Console.WriteLine. This call is not necessary but we do this so that we can see first hand that when the proxy is constructed, when our default constructor is invoked.   var methodBuilder = typeBuilder.DefineMethod(                      methodInfo.Name,                      MethodAttributes.Public | MethodAttributes.Virtual,                      methodInfo.ReturnType,                      methodInfo.GetParameters().Select(p => p.GetType()).ToArray()                      );   We then iterate over each method declared on type T and add a method definition of the same name into our "dynamic proxy" definition     if (methodInfo.ReturnType == typeof(void))   {       methodILGen.Emit(OpCodes.Ret);   }   If the return type specified in the method declaration of T is void we simply return.     if (methodInfo.ReturnType.IsValueType || methodInfo.ReturnType.IsEnum)   {                               MethodInfo getMethod = typeof(Activator).GetMethod("CreateInstance",                                                         new Type[]{typeof(Type)});                               LocalBuilder lb = methodILGen.DeclareLocal(methodInfo.ReturnType);                                                     methodILGen.Emit(OpCodes.Ldtoken, lb.LocalType);       methodILGen.Emit(OpCodes.Call, typeof(Type).GetMethod("GetTypeFromHandle"));       methodILGen.Emit(OpCodes.Callvirt, getMethod);       methodILGen.Emit(OpCodes.Unbox_Any, lb.LocalType);   }   If the return type in the method declaration of T is either a value type or an enum, then we need to create an instance of the value type and return that instance the caller. In order to accomplish that we need to do the following: 1) Get a handle to the Activator.CreateInstance method 2) Declare a local variable which represents the Type of the return type(i.e the type object of the return type) specified on the method declaration of T(obtained from the MethodInfo) and push this Type object onto the evaluation stack. In reality a RuntimeTypeHandle is what is pushed onto the stack. 3) Invoke the "GetTypeFromHandle" method(a static method in the Type class) passing in the RuntimeTypeHandle pushed onto the stack previously as an argument, the result of this invocation is a Type object (representing the method's return type) which is pushed onto the top of the evaluation stack. 4) Invoke Activator.CreateInstance passing in the Type object from step 3, the result of this invocation is an instance of the value type boxed as a reference type and pushed onto the top of the evaluation stack. 5) Unbox the result and place it into the local variable of the return type defined in step 2   methodILGen.Emit(OpCodes.Ldnull);   If the return type is a reference type then we just load a null onto the evaluation stack   methodILGen.Emit(OpCodes.Ret);   Emit a a return statement to return whatever is on top of the evaluation stack(null or an instance of a value type) back to the caller     Type constructedType = typeBuilder.CreateType();   var instance = Activator.CreateInstance(constructedType);   return (T)instance;   Now that we have a definition of the "dynamic proxy" implementing all the methods declared on T, we can now create an instance of the proxy type and return that out typed as T. The caller can now invoke the generator and request a dynamic proxy for any type T. In our example when the client invokes GetNum() we get back "0". Lets add a new method on the interface called DayOfWeek GetDay()   public interface IFoo      {          int GetNum();          DayOfWeek GetDay();      }   When GetDay() is invoked, the "dynamic proxy" returns "Sunday" since that is the default value for the DayOfWeek enum This is a very trivial example of dynammic proxies, frameworks like MOQ have a way more sophisticated implementation of this paradigm where in you can instruct the framework to create proxies which return specified values for a method implementation.

    Read the article

  • Partial Page Rendering in OAF Page

    - by PRajkumar
    Let us try to implement partial page rendering for a text item. If value of TextItem1 is null then TextItem2 will not be appreared on UI. If value of TextItem1 is not null then TextItem2 will be appreared on UI.   1. Create a New OA Workspace and Empty OA Project File> New > General> Workspace Configured for Oracle Applications File Name -- PPRProj Project Name – PPRDemoProj Default Package -- prajkumar.oracle.apps.fnd.pprdemo   2. Create Application Module AM PPRDemoProj right click > New > ADF Business Components > Application Module Name -- PPRAM Package -- prajkumar.oracle.apps.fnd.pprdemo.server   Check Application Module Class: PPRAMImpl Generate JavaFile(s)   3. Create a PPRVO View Object PPRDemoProj> New > ADF Business Components > View Objects Name – PPRVO Package – prajkumar.oracle.apps.fnd.pprdemo.server   In Attribute Page Click on New button and create transient primary key attribute with the following properties:   Attribute Property Name RowKey Type Number Updateable Always Key Attribute (Checked)   Click New button again and create transient attribute with the following properties:   Attribute Property Name TextItem2Render Type Boolean Updateable Always   Note – No Need to generate any JAVA files for PPRVO   4. Add Your View Object to Root UI Application Module Right click on PPRAM > Edit PPRAM > Data Model > Select PPRVO in Available View Objects list and shuttle to Data Model list   5. Create a OA components Page PPRDemoProj right click > New > OA Components > Page Name – PPRPG Package -- prajkumar.oracle.apps.fnd.pprdemo.webui   6. Modify the Page Layout (Top-level) Region   Attribute Property ID PageLayoutRN Region Style pageLayout Form Property True Auto Footer True Window Title PPR Demo Window Title True Title PPR Demo Page Header AM Definition prajkumar.oracle.apps.fnd.pprdemo.server.PPRAM   7. Create the Second Region (Main Content Region) Right click on PageLayoutRN > New > Region   Attribute Property ID MainRN Region Style messageComponentLayout   8. Create Two Text Items   Create First messageTextItem -- Right click on MainRN > New > messageTextInput   Attribute Property ID TextItem1 Region Style messageTextInput Prompt Text Item1 Length 20 Disable Server Side Validation True Disable Client Side Validation True Action Type firePartialAction Event TextItem1Change Submit True   Note -- Disable Client Side Validation and Event property appears after you set the Action Type property to firePartialAction   Create Second messageTextItem -- Select MainRN right click > New > messageTextInput   Attribute Property ID TextItem2 Region Style messageTextInput Prompt Text Item2 Length 20 Rendered ${oa.PPRVO1.TextItem2Render}   9. Add Following code in PPRAMImpl.java   import oracle.apps.fnd.framework.OARow; import oracle.apps.fnd.framework.OAViewObject; import oracle.apps.fnd.framework.server.OAApplicationModuleImpl; import oracle.apps.fnd.framework.server.OAViewObjectImpl; public void handlePPRAction()  {   Number val = 1;  OAViewObject vo = (OAViewObject)findViewObject("PPRVO1");  if (vo != null)   {    if (vo.getFetchedRowCount() == 0)    {     vo.setMaxFetchSize(0);     vo.executeQuery();     vo.insertRow(vo.createRow());     OARow row = (OARow)vo.first();            row.setAttribute("RowKey", val);    row.setAttribute("TextItem2Render", Boolean.FALSE);      }  } }   10. Implement Controller for Page Select PageLayoutRN in Structure pane right click > Set New Controller Package Name -- prajkumar.oracle.apps.fnd.pprdemo.webui Class Name – PPRCO   Write following code in processFormRequest function of PPRCO Controller   import oracle.apps.fnd.framework.OARow; import oracle.apps.fnd.framework.OAViewObject; public void processRequest(OAPageContext pageContext, OAWebBean webBean) {  super.processRequest(pageContext, webBean);  PPRAMImpl am = (PPRAMImpl)pageContext.getApplicationModule(webBean);      am.invokeMethod("handlePPRAction"); } public void processFormRequest(OAPageContext pageContext, OAWebBean webBean) {  super.processFormRequest(pageContext, webBean);        PPRAMImpl am = (PPRAMImpl)pageContext.getApplicationModule(webBean);  OAViewObject vo = (OAViewObject)am.findViewObject("PPRVO1");  OARow row = (OARow)vo.getCurrentRow();        if ("TextItem1Change".equals(pageContext.getParameter(EVENT_PARAM)))  {   if (pageContext.getParameter("TextItem1").equals(""))   {    row.setAttribute("TextItem2Render", Boolean.FALSE);   }   else   {    row.setAttribute("TextItem2Render", Boolean.TRUE);   }  } }   11. Congratulation you have successfully finished. Run Your PPRPG page and Test Your Work          

    Read the article

  • Segfault when iterating over a map<string, string> and drawing its contents using SDL_TTF

    - by Michael Stahre
    I'm not entirely sure this question belongs on gamedev.stackexchange, but I'm technically working on a game and working with SDL, so it might not be entirely offtopic. I've written a class called DebugText. The point of the class is to have a nice way of printing values of variables to the game screen. The idea is to call SetDebugText() with the variables in question every time they change or, as is currently the case, every time the game's Update() is called. The issue is that when iterating over the map that contains my variables and their latest updated values, I get segfaults. See the comments in DrawDebugText() below, it specifies where the error happens. I've tried splitting the calls to it-first and it-second into separate lines and found that the problem doesn't always happen when calling it-first. It alters between it-first and it-second. I can't find a pattern. It doesn't fail on every call to DrawDebugText() either. It might fail on the third time DrawDebugText() is called, or it might fail on the fourth. Class header: #ifndef CLIENT_DEBUGTEXT_H #define CLIENT_DEBUGTEXT_H #include <Map> #include <Math.h> #include <sstream> #include <SDL.h> #include <SDL_ttf.h> #include "vector2.h" using std::string; using std::stringstream; using std::map; using std::pair; using game::Vector2; namespace game { class DebugText { private: TTF_Font* debug_text_font; map<string, string>* debug_text_list; public: void SetDebugText(string var, bool value); void SetDebugText(string var, float value); void SetDebugText(string var, int value); void SetDebugText(string var, Vector2 value); void SetDebugText(string var, string value); int DrawDebugText(SDL_Surface*, SDL_Rect*); void InitDebugText(); void Clear(); }; } #endif Class source file: #include "debugtext.h" namespace game { // Copypasta function for handling the toString conversion template <class T> inline string to_string (const T& t) { stringstream ss (stringstream::in | stringstream::out); ss << t; return ss.str(); } // Initializes SDL_TTF and sets its font void DebugText::InitDebugText() { if(TTF_WasInit()) TTF_Quit(); TTF_Init(); debug_text_font = TTF_OpenFont("LiberationSans-Regular.ttf", 16); TTF_SetFontStyle(debug_text_font, TTF_STYLE_NORMAL); } // Iterates over the current debug_text_list and draws every element on the screen. // After drawing with SDL you need to get a rect specifying the area on the screen that was changed and tell SDL that this part of the screen needs to be updated. this is done in the game's Draw() function // This function sets rects_to_update to the new list of rects provided by all of the surfaces and returns the number of rects in the list. These two parameters are used in Draw() when calling on SDL_UpdateRects(), which takes an SDL_Rect* and a list length int DebugText::DrawDebugText(SDL_Surface* screen, SDL_Rect* rects_to_update) { if(debug_text_list == NULL) return 0; if(!TTF_WasInit()) InitDebugText(); rects_to_update = NULL; // Specifying the font color SDL_Color font_color = {0xff, 0x00, 0x00, 0x00}; // r, g, b, unused int row_count = 0; string line; // The iterator variable map<string, string>::iterator it; // Gets the iterator and iterates over it for(it = debug_text_list->begin(); it != debug_text_list->end(); it++) { // Takes the first value (the name of the variable) and the second value (the value of the parameter in string form) //---------THIS LINE GIVES ME SEGFAULTS----- line = it->first + ": " + it->second; //------------------------------------------ // Creates a surface with the text on it that in turn can be rendered to the screen itself later SDL_Surface* debug_surface = TTF_RenderText_Solid(debug_text_font, line.c_str(), font_color); if(debug_surface == NULL) { // A standard check for errors fprintf(stderr, "Error: %s", TTF_GetError()); return NULL; } else { // If SDL_TTF did its job right, then we now set a destination rect row_count++; SDL_Rect dstrect = {5, 5, 0, 0}; // x, y, w, h dstrect.x = 20; dstrect.y = 20*row_count; // Draws the surface with the text on it to the screen int res = SDL_BlitSurface(debug_surface,NULL,screen,&dstrect); if(res != 0) { //Just an error check fprintf(stderr, "Error: %s", SDL_GetError()); return NULL; } // Creates a new rect to specify the area that needs to be updated with SDL_Rect* new_rect_to_update = (SDL_Rect*) malloc(sizeof(SDL_Rect)); new_rect_to_update->h = debug_surface->h; new_rect_to_update->w = debug_surface->w; new_rect_to_update->x = dstrect.x; new_rect_to_update->y = dstrect.y; // Just freeing the surface since it isn't necessary anymore SDL_FreeSurface(debug_surface); // Creates a new list of rects with room for the new rect SDL_Rect* newtemp = (SDL_Rect*) malloc(row_count*sizeof(SDL_Rect)); // Copies the data from the old list of rects to the new one memcpy(newtemp, rects_to_update, (row_count-1)*sizeof(SDL_Rect)); // Adds the new rect to the new list newtemp[row_count-1] = *new_rect_to_update; // Frees the memory used by the old list free(rects_to_update); // And finally redirects the pointer to the old list to the new list rects_to_update = newtemp; newtemp = NULL; } } // When the entire map has been iterated over, return the number of lines that were drawn, ie. the number of rects in the returned rect list return row_count; } // The SetDebugText used by all the SetDebugText overloads // Takes two strings, inserts them into the map as a pair void DebugText::SetDebugText(string var, string value) { if (debug_text_list == NULL) { debug_text_list = new map<string, string>(); } debug_text_list->erase(var); debug_text_list->insert(pair<string, string>(var, value)); } // Writes the bool to a string and calls SetDebugText(string, string) void DebugText::SetDebugText(string var, bool value) { string result; if (value) result = "True"; else result = "False"; SetDebugText(var, result); } // Does the same thing, but uses to_string() to convert the float void DebugText::SetDebugText(string var, float value) { SetDebugText(var, to_string(value)); } // Same as above, but int void DebugText::SetDebugText(string var, int value) { SetDebugText(var, to_string(value)); } // Vector2 is a struct of my own making. It contains the two float vars x and y void DebugText::SetDebugText(string var, Vector2 value) { SetDebugText(var + ".x", to_string(value.x)); SetDebugText(var + ".y", to_string(value.y)); } // Empties the list. I don't actually use this in my code. Shame on me for writing something I don't use. void DebugText::Clear() { if(debug_text_list != NULL) debug_text_list->clear(); } }

    Read the article

  • Creating a podcast feed for iTunes & BlackBerry users using WCF Syndication

    - by brian_ritchie
     In my previous post, I showed how to create a RSS feed using WCF Syndication.  Next, I'll show how to add the additional tags needed to turn a RSS feed into an iTunes podcast.   A podcast is merely a RSS feed with some special characteristics: iTunes RSS tags.  These are additional tags beyond the standard RSS spec.  Apple has a good page on the requirements. Audio file enclosure.  This is a link to the audio file (such as mp3) hosted by your site.  Apple doesn't host the audio, they just read the meta-data from the RSS feed into their system. The SyndicationFeed class supports both AttributeExtensions & ElementExtensions to add custom tags to the RSS feeds. A couple of points of interest in the code below: The imageUrl below provides the album cover for iTunes (170px × 170px) Each SyndicationItem corresponds to an audio episode in your podcast So, here's the code: .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: Consolas, "Courier New", Courier, Monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } 1: XNamespace itunesNS = "http://www.itunes.com/dtds/podcast-1.0.dtd"; 2: string prefix = "itunes"; 3:   4: var feed = new SyndicationFeed(title, description, new Uri(link)); 5: feed.Categories.Add(new SyndicationCategory(category)); 6: feed.AttributeExtensions.Add(new XmlQualifiedName(prefix, 7: "http://www.w3.org/2000/xmlns/"), itunesNS.NamespaceName); 8: feed.Copyright = new TextSyndicationContent(copyright); 9: feed.Language = "en-us"; 10: feed.Copyright = new TextSyndicationContent(DateTime.Now.Year + " " + ownerName); 11: feed.ImageUrl = new Uri(imageUrl); 12: feed.LastUpdatedTime = DateTime.Now; 13: feed.Authors.Add(new SyndicationPerson() {Name=ownerName, Email=ownerEmail }); 14: var extensions = feed.ElementExtensions; 15: extensions.Add(new XElement(itunesNS + "subtitle", subTitle).CreateReader()); 16: extensions.Add(new XElement(itunesNS + "image", 17: new XAttribute("href", imageUrl)).CreateReader()); 18: extensions.Add(new XElement(itunesNS + "author", ownerName).CreateReader()); 19: extensions.Add(new XElement(itunesNS + "summary", description).CreateReader()); 20: extensions.Add(new XElement(itunesNS + "category", 21: new XAttribute("text", category), 22: new XElement(itunesNS + "category", 23: new XAttribute("text", subCategory))).CreateReader()); 24: extensions.Add(new XElement(itunesNS + "explicit", "no").CreateReader()); 25: extensions.Add(new XDocument( 26: new XElement(itunesNS + "owner", 27: new XElement(itunesNS + "name", ownerName), 28: new XElement(itunesNS + "email", ownerEmail))).CreateReader()); 29:   30: var feedItems = new List<SyndicationItem>(); 31: foreach (var i in Items) 32: { 33: var item = new SyndicationItem(i.title, null, new Uri(link)); 34: item.Summary = new TextSyndicationContent(i.summary); 35: item.Id = i.id; 36: if (i.publishedDate != null) 37: item.PublishDate = (DateTimeOffset)i.publishedDate; 38: item.Links.Add(new SyndicationLink() { 39: Title = i.title, Uri = new Uri(link), 40: Length = i.size, MediaType = i.mediaType }); 41: var itemExt = item.ElementExtensions; 42: itemExt.Add(new XElement(itunesNS + "subtitle", i.subTitle).CreateReader()); 43: itemExt.Add(new XElement(itunesNS + "summary", i.summary).CreateReader()); 44: itemExt.Add(new XElement(itunesNS + "duration", 45: string.Format("{0}:{1:00}:{2:00}", 46: i.duration.Hours, i.duration.Minutes, i.duration.Seconds) 47: ).CreateReader()); 48: itemExt.Add(new XElement(itunesNS + "keywords", i.keywords).CreateReader()); 49: itemExt.Add(new XElement(itunesNS + "explicit", "no").CreateReader()); 50: itemExt.Add(new XElement("enclosure", new XAttribute("url", i.url), 51: new XAttribute("length", i.size), new XAttribute("type", i.mediaType))); 52: feedItems.Add(item); 53: } 54:   55: feed.Items = feedItems; If you're hosting your podcast feed within a MVC project, you can use the code from my previous post to stream it. Once you have created your feed, you can use the Feed Validator tool to make sure it is up to spec.  Or you can use iTunes: Launch iTunes. In the Advanced menu, select Subscribe to Podcast. Enter your feed URL in the text box and click OK. After you've verified your feed is solid & good to go, you can submit it to iTunes.  Launch iTunes. In the left navigation column, click on iTunes Store to open the store. Once the store loads, click on Podcasts along the top navigation bar to go to the Podcasts page. In the right column of the Podcasts page, click on the Submit a Podcast link. Follow the instructions on the Submit a Podcast page. Here are the full instructions.  Once they have approved your podcast, it will be available within iTunes. RIM has also gotten into the podcasting business...which is great for BlackBerry users.  They accept the same enhanced-RSS feed that iTunes uses, so just create an account with them & submit the feed's URL.  It goes through a similar approval process to iTunes.  BlackBerry users must be on BlackBerry 6 OS or download the Podcast App from App World. In my next post, I'll show how to build the podcast feed dynamically from the ID3 tags within the MP3 files.

    Read the article

  • Deferred rendering with VSM - Scaling light depth loses moments

    - by user1423893
    I'm calculating my shadow term using a VSM method. This works correctly when using forward rendered lights but fails with deferred lights. // Shadow term (1 = no shadow) float shadow = 1; // [Light Space -> Shadow Map Space] // Transform the surface into light space and project // NB: Could be done in the vertex shader, but doing it here keeps the // "light shader" abstraction and doesn't limit the number of shadowed lights float4x4 LightViewProjection = mul(LightView, LightProjection); float4 surf_tex = mul(position, LightViewProjection); // Re-homogenize // 'w' component is not used in later calculations so no need to homogenize (it will equal '1' if homogenized) surf_tex.xyz /= surf_tex.w; // Rescale viewport to be [0,1] (texture coordinate system) float2 shadow_tex; shadow_tex.x = surf_tex.x * 0.5f + 0.5f; shadow_tex.y = -surf_tex.y * 0.5f + 0.5f; // Half texel offset //shadow_tex += (0.5 / 512); // Scaled distance to light (instead of 'surf_tex.z') float rescaled_dist_to_light = dist_to_light / LightAttenuation.y; //float rescaled_dist_to_light = surf_tex.z; // [Variance Shadow Map Depth Calculation] // No filtering float2 moments = tex2D(ShadowSampler, shadow_tex).xy; // Flip the moments values to bring them back to their original values moments.x = 1.0 - moments.x; moments.y = 1.0 - moments.y; // Compute variance float E_x2 = moments.y; float Ex_2 = moments.x * moments.x; float variance = E_x2 - Ex_2; variance = max(variance, Bias.y); // Surface is fully lit if the current pixel is before the light occluder (lit_factor == 1) // One-tailed inequality valid if float lit_factor = (rescaled_dist_to_light <= moments.x - Bias.x); // Compute probabilistic upper bound (mean distance) float m_d = moments.x - rescaled_dist_to_light; // Chebychev's inequality float p = variance / (variance + m_d * m_d); p = ReduceLightBleeding(p, Bias.z); // Adjust the light color based on the shadow attenuation shadow *= max(lit_factor, p); This is what I know for certain so far: The lighting is correct if I do not try and calculate the shadow term. (No shadows) The shadow term is correct when calculated using forward rendered lighting. (VSM works with forward rendered lights) With the current rescaled light distance (lightAttenuation.y is the far plane value): float rescaled_dist_to_light = dist_to_light / LightAttenuation.y; The light is correct and the shadow appears to be zoomed in and misses the blurring: When I do not rescale the light and use the homogenized 'surf_tex': float rescaled_dist_to_light = surf_tex.z; the shadows are blurred correctly but the lighting is incorrect and the cube model is no longer lit Why is scaling by the far plane value (LightAttenuation.y) zooming in too far? The only other factor involved is my world pixel position, which is calculated as follows: // [Position] float4 position; // [Screen Position] position.xy = input.PositionClone.xy; // Use 'x' and 'y' components already homogenized for uv coordinates above position.z = tex2D(DepthSampler, texCoord).r; // No need to homogenize 'z' component position.z = 1.0 - position.z; position.w = 1.0; // 1.0 = position.w / position.w // [World Position] position = mul(position, CameraViewProjectionInverse); // Re-homogenize position (xyz AND w, otherwise shadows will bend when camera is close) position.xyz /= position.w; position.w = 1.0; Using the inverse matrix of the camera's view x projection matrix does work for lighting but maybe it is incorrect for shadow calculation? EDIT: Light calculations for shadow including 'dist_to_light' // Work out the light position and direction in world space float3 light_position = float3(LightViewInverse._41, LightViewInverse._42, LightViewInverse._43); // Direction might need to be negated float3 light_direction = float3(-LightViewInverse._31, -LightViewInverse._32, -LightViewInverse._33); // Unnormalized light vector float3 dir_to_light = light_position - position; // Direction from vertex float dist_to_light = length(dir_to_light); // Normalise 'toLight' vector for lighting calculations dir_to_light = normalize(dir_to_light); EDIT2: These are the calculations for the moments (depth) //============================================= //---[Vertex Shaders]-------------------------- //============================================= DepthVSOutput depth_VS( float4 Position : POSITION, uniform float4x4 shadow_view, uniform float4x4 shadow_view_projection) { DepthVSOutput output = (DepthVSOutput)0; // First transform position into world space float4 position_world = mul(Position, World); output.position_screen = mul(position_world, shadow_view_projection); output.light_vec = mul(position_world, shadow_view).xyz; return output; } //============================================= //---[Pixel Shaders]--------------------------- //============================================= DepthPSOutput depth_PS(DepthVSOutput input) { DepthPSOutput output = (DepthPSOutput)0; // Work out the depth of this fragment from the light, normalized to [0, 1] float2 depth; depth.x = length(input.light_vec) / FarPlane; depth.y = depth.x * depth.x; // Flip depth values to avoid floating point inaccuracies depth.x = 1.0f - depth.x; depth.y = 1.0f - depth.y; output.depth = depth.xyxy; return output; } EDIT 3: I have tried the folloiwng: float4 pp; pp.xy = input.PositionClone.xy; // Use 'x' and 'y' components already homogenized for uv coordinates above pp.z = tex2D(DepthSampler, texCoord).r; // No need to homogenize 'z' component pp.z = 1.0 - pp.z; pp.w = 1.0; // 1.0 = position.w / position.w // Determine the depth of the pixel with respect to the light float4x4 LightViewProjection = mul(LightView, LightProjection); float4x4 matViewToLightViewProj = mul(CameraViewProjectionInverse, LightViewProjection); float4 vPositionLightCS = mul(pp, matViewToLightViewProj); float fLightDepth = vPositionLightCS.z / vPositionLightCS.w; // Transform from light space to shadow map texture space. float2 vShadowTexCoord = 0.5 * vPositionLightCS.xy / vPositionLightCS.w + float2(0.5f, 0.5f); vShadowTexCoord.y = 1.0f - vShadowTexCoord.y; // Offset the coordinate by half a texel so we sample it correctly vShadowTexCoord += (0.5f / 512); //g_vShadowMapSize This suffers the same problem as the second picture. I have tried storing the depth based on the view x projection matrix: output.position_screen = mul(position_world, shadow_view_projection); //output.light_vec = mul(position_world, shadow_view); output.light_vec = output.position_screen; depth.x = input.light_vec.z / input.light_vec.w; This gives a shadow that has lots surface acne due to horrible floating point precision errors. Everything is lit correctly though. EDIT 4: Found an OpenGL based tutorial here I have followed it to the letter and it would seem that the uv coordinates for looking up the shadow map are incorrect. The source uses a scaled matrix to get the uv coordinates for the shadow map sampler /// <summary> /// The scale matrix is used to push the projected vertex into the 0.0 - 1.0 region. /// Similar in role to a * 0.5 + 0.5, where -1.0 < a < 1.0. /// <summary> const float4x4 ScaleMatrix = float4x4 ( 0.5, 0.0, 0.0, 0.0, 0.0, -0.5, 0.0, 0.0, 0.0, 0.0, 0.5, 0.0, 0.5, 0.5, 0.5, 1.0 ); I had to negate the 0.5 for the y scaling (M22) in order for it to work but the shadowing is still not correct. Is this really the correct way to scale? float2 shadow_tex; shadow_tex.x = surf_tex.x * 0.5f + 0.5f; shadow_tex.y = surf_tex.y * -0.5f + 0.5f; The depth calculations are exactly the same as the source code yet they still do not work, which makes me believe something about the uv calculation above is incorrect.

    Read the article

  • CodePlex Daily Summary for Monday, July 01, 2013

    CodePlex Daily Summary for Monday, July 01, 2013Popular ReleasesQuickMon: Version 2.10.3: Mainly just a service release - no major changes. Toolbar buttons on main and config window can now be re-arrange (using ALT key) Added property to disable corrective scriptsDotNetNuke® IFrame: IFrame 04.05.00: New DNN6/7 Manifest file and Azure Compatibility.VidCoder: 1.5.2 Beta: Fixed crash on presets with an invalid bitrate.Roadkill - .NET Wiki engine: Roadkill v1.7: New features in 1.7: New file manager: Multiple file uploads Drag and drop uploads Delete folders (admins only) Delete files (admins only) (Experimental) Syntaxhighlighting custom variable (using https://github.com/alexgorbatchev/SyntaxHighlighter) - use [[[code lang=c#|your code here]]] (Experimental) MathJax custom variable - use [[[Mathjax]]] and $$your tex$$ on the page. Improved black bar theme Site speed improvements for Javascript/CSS files - now just two files files ea...Download Sharepoint Solution package: Release 4: version updated for SP2013WinRT XAML Toolkit: WinRT XAML Toolkit - 1.5: WinRT XAML Toolkit based on the Windows 8.0 and 8.1 Preview SDKs. Do not download the source code from here if you are looking for latest updates! You can download the latest source from the SOURCE CODE page. For compiled version use NuGet. You can add it to your project in Visual Studio by going to View/Other Windows/Package Manager Console and entering: PM> Install-Package winrtxamltoolkit Features Attachable Behaviors AwaitableUI extensions Composition library for visual tree rende...Gardens Point LEX: Gardens Point LEX version 1.2.1: The main distribution is a zip file. This contains the binary executable, documentation, source code and the examples. ChangesVersion 1.2.1 has new facilities for defining and manipulating character classes. These changes make the construction of large Unicode character classes more convenient. The runtime code for performing automaton backup has been re-implemented, and is now faster for scanners that need backup. Source CodeThe distribution contains a complete VS2010 project for the appli...ZXMAK2: Version 2.7.5.7: - fix TZX emulation (Bruce Lee, Zynaps) - fix ATM 16 colors for border - add memory module PROFI 512K; add PROFI V03 rom image; fix PROFI 3.XX configTwitter image Downloader: Twitter Image Downloader 2 with Installer: Application file with Install shield and Dot Net 4.0 redistributableUltimate Music Tagger: Ultimate Music Tagger 1.0.0.0: First release of Ultimate Music TaggerBlackJumboDog: Ver5.9.2: 2013.06.28 Ver5.9.2 (1) ??????????(????SMTP?????)?????????? (2) HTTPS???????????Outlook 2013 Add-In: Configuration Form: This new version includes the following changes: - Refactored code a bit. - Removing configuration from main form to gain more space to display items. - Moved configuration to separate form. You can click the little "gear" icon to access the configuration form (still very simple). - Added option to show past day appointments from the selected day (previous in time, that is). - Added some tooltips. You will have to uninstall the previous version (add/remove programs) if you had installed it ...Terminals: Version 3.0 - Release: Changes since version 2.0:Choose 100% portable or installed version Removed connection warning when running RDP 8 (Windows 8) client Fixed Active directory search Extended Active directory search by LDAP filters Fixed single instance mode when running on Windows Terminal server Merged usage of Tags and Groups Added columns sorting option in tables No UAC prompts on Windows 7 Completely new file persistence data layer New MS SQL persistence layer (Store data in SQL database)...NuGet: NuGet 2.6: Released June 26, 2013. Release notes: http://docs.nuget.org/docs/release-notes/nuget-2.6Python Tools for Visual Studio: 2.0 Beta: We’re pleased to announce the release of Python Tools for Visual Studio 2.0 Beta. Python Tools for Visual Studio (PTVS) is an open-source plug-in for Visual Studio which supports programming with the Python language. PTVS supports a broad range of features including CPython/IronPython, Edit/Intellisense/Debug/Profile, Cloud, HPC, IPython, and cross platform debugging support. For a quick overview of the general IDE experience, please watch this video: http://www.youtube.com/watch?v=TuewiStN...Player Framework by Microsoft: Player Framework for Windows 8 and WP8 (v1.3 beta): Preview: New MPEG DASH adaptive streaming plugin for Windows Azure Media Services Preview: New Ultraviolet CFF plugin. Preview: New WP7 version with WP8 compatibility. (source code only) Source code is now available via CodePlex Git Misc bug fixes and improvements: WP8 only: Added optional fullscreen and mute buttons to default xaml JS only: protecting currentTime from returning infinity. Some videos would cause currentTime to be infinity which could cause errors in plugins expectin...AssaultCube Reloaded: 2.5.8: SERVER OWNERS: note that the default maprot has changed once again. Linux has Ubuntu 11.10 32-bit precompiled binaries and Ubuntu 10.10 64-bit precompiled binaries, but you can compile your own as it also contains the source. If you are using Mac or other operating systems, please wait while we continue to try to package for those OSes. Or better yet, try to compile it. If it fails, download a virtual machine. The server pack is ready for both Windows and Linux, but you might need to compi...Microsoft Ajax Minifier: Microsoft Ajax Minifier 4.95: update parser to allow for CSS3 calc( function to nest. add recognition of -pponly (Preprocess-Only) switch in AjaxMinManifestTask build task. Fix crashing bug in EXE when processing a manifest file using the -xml switch and an error message needs to be displayed (like a missing input file). Create separate Clean and Bundle build tasks for working with manifest files (AjaxMinManifestCleanTask and AjaxMinBundleTask). Removed the IsCleanOperation from AjaxMinManifestTask -- use AjaxMinMan...VG-Ripper & PG-Ripper: VG-Ripper 2.9.44: changes NEW: Added Support for "ImgChili.net" links FIXED: Auto UpdaterDocument.Editor: 2013.25: What's new for Document.Editor 2013.25: Improved Spell Check support Improved User Interface Minor Bug Fix's, improvements and speed upsNew ProjectsAerCloud.net Client - Java, Linux & Windows: This project source code provides a step by step guide for using AerCloud.net Framework as a Service API. For more information please visit http://www.aercloudAmiClient – Asterisk Manager Interface (AMI) client based on the Rx Framework: Asterisk Manager Interface (AMI) client based on the Rx Frameworkbaidupan: cdcddddC#??????: C#??????ImageHelper: imagehelperIP switcher: IP switcher is a simple tool for switching settings, and store presets, on networkadapters.MastersProject: A MS project with a goal of creating a fully Code Contracts verified physics engine and a relatively simple game that uses it.Multiplatform card game: Example multipatform project.PhoneTools: A collection of tools designed to help developers create beautiful Windows Phone 8 apps.rodidexter: lllSharePoint 2013 List Item Encryption: This coding exercise project enables you to encrypt/decrypt list item text field in the browser using industry standard algorithms.tvaSoft: simulation, rotor dynamics, Finite Element Analisys, FEM, ODE, torsional vibration, flexural vibrationX3DML Project: X3DML is an xml-based markup language that defines rules for modeling 3D scenes from a tag-based document. It may be usefull in 3D web design and VR.zhuang-tfs: zhuang tfs

    Read the article

  • What's up with LDoms: Part 2 - Creating a first, simple guest

    - by Stefan Hinker
    Welcome back! In the first part, we discussed the basic concepts of LDoms and how to configure a simple control domain.  We saw how resources were put aside for guest systems and what infrastructure we need for them.  With that, we are now ready to create a first, very simple guest domain.  In this first example, we'll keep things very simple.  Later on, we'll have a detailed look at things like sizing, IO redundancy, other types of IO as well as security. For now,let's start with this very simple guest.  It'll have one core's worth of CPU, one crypto unit, 8GB of RAM, a single boot disk and one network port.  CPU and RAM are easy.  The network port we'll create by attaching a virtual network port to the vswitch we created in the primary domain.  This is very much like plugging a cable into a computer system on one end and a network switch on the other.  For the boot disk, we'll need two things: A physical piece of storage to hold the data - this is called the backend device in LDoms speak.  And then a mapping between that storage and the guest domain, giving it access to that virtual disk.  For this example, we'll use a ZFS volume for the backend.  We'll discuss what other options there are for this and how to chose the right one in a later article.  Here we go: root@sun # ldm create mars root@sun # ldm set-vcpu 8 mars root@sun # ldm set-mau 1 mars root@sun # ldm set-memory 8g mars root@sun # zfs create rpool/guests root@sun # zfs create -V 32g rpool/guests/mars.bootdisk root@sun # ldm add-vdsdev /dev/zvol/dsk/rpool/guests/mars.bootdisk \ mars.root@primary-vds root@sun # ldm add-vdisk root mars.root@primary-vds mars root@sun # ldm add-vnet net0 switch-primary mars That's all, mars is now ready to power on.  There are just three commands between us and the OK prompt of mars:  We have to "bind" the domain, start it and connect to its console.  Binding is the process where the hypervisor actually puts all the pieces that we've configured together.  If we made a mistake, binding is where we'll be told (starting in version 2.1, a lot of sanity checking has been put into the config commands themselves, but binding will catch everything else).  Once bound, we can start (and of course later stop) the domain, which will trigger the boot process of OBP.  By default, the domain will then try to boot right away.  If we don't want that, we can set "auto-boot?" to false.  Finally, we'll use telnet to connect to the console of our newly created guest.  The output of "ldm list" shows us what port has been assigned to mars.  By default, the console service only listens on the loopback interface, so using telnet is not a large security concern here. root@sun # ldm set-variable auto-boot\?=false mars root@sun # ldm bind mars root@sun # ldm start mars root@sun # ldm list NAME STATE FLAGS CONS VCPU MEMORY UTIL UPTIME primary active -n-cv- UART 8 7680M 0.5% 1d 4h 30m mars active -t---- 5000 8 8G 12% 1s root@sun # telnet localhost 5000 Trying 127.0.0.1... Connected to localhost. Escape character is '^]'. ~Connecting to console "mars" in group "mars" .... Press ~? for control options .. {0} ok banner SPARC T3-4, No Keyboard Copyright (c) 1998, 2011, Oracle and/or its affiliates. All rights reserved. OpenBoot 4.33.1, 8192 MB memory available, Serial # 87203131. Ethernet address 0:21:28:24:1b:50, Host ID: 85241b50. {0} ok We're done, mars is ready to install Solaris, preferably using AI, of course ;-)  But before we do that, let's have a little look at the OBP environment to see how our virtual devices show up here: {0} ok printenv auto-boot? auto-boot? = false {0} ok printenv boot-device boot-device = disk net {0} ok devalias root /virtual-devices@100/channel-devices@200/disk@0 net0 /virtual-devices@100/channel-devices@200/network@0 net /virtual-devices@100/channel-devices@200/network@0 disk /virtual-devices@100/channel-devices@200/disk@0 virtual-console /virtual-devices/console@1 name aliases We can see that setting the OBP variable "auto-boot?" to false with the ldm command worked.  Of course, we'd normally set this to "true" to allow Solaris to boot right away once the LDom guest is started.  The setting for "boot-device" is the default "disk net", which means OBP would try to boot off the devices pointed to by the aliases "disk" and "net" in that order, which usually means "disk" once Solaris is installed on the disk image.  The actual devices these aliases point to are shown with the command "devalias".  Here, we have one line for both "disk" and "net".  The device paths speak for themselves.  Note that each of these devices has a second alias: "net0" for the network device and "root" for the disk device.  These are the very same names we've given these devices in the control domain with the commands "ldm add-vnet" and "ldm add-vdisk".  Remember this, as it is very useful once you have several dozen disk devices... To wrap this up, in this part we've created a simple guest domain, complete with CPU, memory, boot disk and network connectivity.  This should be enough to get you going.  I will cover all the more advanced features and a little more theoretical background in several follow-on articles.  For some background reading, I'd recommend the following links: LDoms 2.2 Admin Guide: Setting up Guest Domains Virtual Console Server: vntsd manpage - This includes the control sequences and commands available to control the console session. OpenBoot 4.x command reference - All the things you can do at the ok prompt

    Read the article

  • SQL SERVER – Weekly Series – Memory Lane – #048

    - by Pinal Dave
    Here is the list of selected articles of SQLAuthority.com across all these years. Instead of just listing all the articles I have selected a few of my most favorite articles and have listed them here with additional notes below it. Let me know which one of the following is your favorite article from memory lane. 2007 Order of Result Set of SELECT Statement on Clustered Indexed Table When ORDER BY is Not Used Above theory is true in most of the cases. However SQL Server does not use that logic when returning the resultset. SQL Server always returns the resultset which it can return fastest.In most of the cases the resultset which can be returned fastest is the resultset which is returned using clustered index. Effect of TRANSACTION on Local Variable – After ROLLBACK and After COMMIT One of the Jr. Developer asked me this question (What will be the Effect of TRANSACTION on Local Variable – After ROLLBACK and After COMMIT?) while I was rushing to an important meeting. I was getting late so I asked him to talk with his Application Tech Lead. When I came back from meeting both of them were looking for me. They said they are confused. I quickly wrote down following example for them. 2008 SQL SERVER – Guidelines and Coding Standards Complete List Download Coding standards and guidelines are very important for any developer on the path of a successful career. A coding standard is a set of guidelines, rules and regulations on how to write code. Coding standards should be flexible enough or should take care of the situation where they should not prevent best practices for coding. They are basically the guidelines that one should follow for better understanding. Download Guidelines and Coding Standards complete List Download Get Answer in Float When Dividing of Two Integer Many times we have requirements of some calculations amongst different fields in Tables. One of the software developers here was trying to calculate some fields having integer values and divide it which gave incorrect results in integer where accurate results including decimals was expected. Puzzle – Computed Columns Datatype Explanation SQL Server automatically does a cast to the data type having the highest precedence. So the result of INT and INT will be INT, but INT and FLOAT will be FLOAT because FLOAT has a higher precedence. If you want a different data type, you need to do an EXPLICIT cast. Renaming SP is Not Good Idea – Renaming Stored Procedure Does Not Update sys.procedures I have written many articles about renaming a tables, columns and procedures SQL SERVER – How to Rename a Column Name or Table Name, here I found something interesting about renaming the stored procedures and felt like sharing it with you all. The interesting fact is that when we rename a stored procedure using SP_Rename command, the Stored Procedure is successfully renamed. But when we try to test the procedure using sp_helptext, the procedure will be having the old name instead of new names. 2009 Insert Values of Stored Procedure in Table – Use Table Valued Function It is clear from the result set that , where I have converted stored procedure logic into the table valued function, is much better in terms of logic as it saves a large number of operations. However, this option should be used carefully. The performance of the stored procedure is “usually” better than that of functions. Interesting Observation – Index on Index View Used in Similar Query Recently, I was working on an optimization project for one of the largest organizations. While working on one of the queries, we came across a very interesting observation. We found that there was a query on the base table and when the query was run, it used the index, which did not exist in the base table. On careful examination, we found that the query was using the index that was on another view. This was very interesting as I have personally never experienced a scenario like this. In simple words, “Query on the base table can use the index created on the indexed view of the same base table.” Interesting Observation – Execution Plan and Results of Aggregate Concatenation Queries Working with SQL Server has never seemed to be monotonous – no matter how long one has worked with it. Quite often, I come across some excellent comments that I feel like acknowledging them as blog posts. Recently, I wrote an article on SQL SERVER – Execution Plan and Results of Aggregate Concatenation Queries Depend Upon Expression Location, which is well received in the community. 2010 I encourage all of you to go through complete series and write your own on the subject. If you write an article and send it to me, I will publish it on this blog with due credit to you. If you write on your own blog, I will update this blog post pointing to your blog post. SQL SERVER – ORDER BY Does Not Work – Limitation of the View 1 SQL SERVER – Adding Column is Expensive by Joining Table Outside View – Limitation of the View 2 SQL SERVER – Index Created on View not Used Often – Limitation of the View 3 SQL SERVER – SELECT * and Adding Column Issue in View – Limitation of the View 4 SQL SERVER – COUNT(*) Not Allowed but COUNT_BIG(*) Allowed – Limitation of the View 5 SQL SERVER – UNION Not Allowed but OR Allowed in Index View – Limitation of the View 6 SQL SERVER – Cross Database Queries Not Allowed in Indexed View – Limitation of the View 7 SQL SERVER – Outer Join Not Allowed in Indexed Views – Limitation of the View 8 SQL SERVER – SELF JOIN Not Allowed in Indexed View – Limitation of the View 9 SQL SERVER – Keywords View Definition Must Not Contain for Indexed View – Limitation of the View 10 SQL SERVER – View Over the View Not Possible with Index View – Limitations of the View 11 2011 Startup Parameters Easy to Configure If you are a regular reader of this blog, you must be aware that I have written about SQL Server Denali recently. Here is the quickest way to reach into the screen where we can change the startup parameters. Go to SQL Server Configuration Manager >> SQL Server Services >> Right Click on the Server >> Properties >> Startup Parameters 2012 Validating Unique Columnname Across Whole Database I sometimes come across very strange requirements and often I do not receive a proper explanation of the same. Here is the one of those examples. For example “Our business requirement is when we add new column we want it unique across current database.” Read the solution to this strange request in this blog post. Excel Losing Decimal Values When Value Pasted from SSMS ResultSet It is very common when users are coping the resultset to Excel, the floating point or decimals are missed. The solution is very much simple and it requires a small adjustment in the Excel. By default Excel is very smart and when it detects the value which is getting pasted is numeric it changes the column format to accommodate that. Basic Calculation and PEMDAS Order of Operation Read this interesting blog post for fantastic conversation about the subject. Copy Column Headers from Resultset – SQL in Sixty Seconds #027 – Video http://www.youtube.com/watch?v=x_-3tLqTRv0 Delete From Multiple Table – Update Multiple Table in Single Statement There are two questions which I get every single day multiple times. In my gmail, I have created standard canned reply for them. Let us see the questions here. I want to delete from multiple table in a single statement how will I do it? I want to update multiple table in a single statement how will I do it? Read the answer in the blog post. Reference: Pinal Dave (http://blog.sqlauthority.com) Filed under: Memory Lane, PostADay, SQL, SQL Authority, SQL Query, SQL Server, SQL Tips and Tricks, T SQL, Technology

    Read the article

  • Library like ENet, but for TCP?

    - by Milo
    I'm not looking to use boost::asio, it is overly complex for my needs. I'm building a game that is cross platform, for desktop, iPhone and Android. I found a library called ENet which is pretty much what I need, but it uses UDP which does not seem to support encryption and a few other things. Given that the game is an event driven card game, TCP seems like the right fit. However, all I have found is WINSOCK / berkley sockets and bost::asio. Here is a sample client server application with ENet: #include <enet/enet.h> #include <stdlib.h> #include <string> #include <iostream> class Host { ENetAddress address; ENetHost * server; ENetHost* client; ENetEvent event; public: Host() :server(NULL) { enet_initialize(); setupServer(); } void setupServer() { if(server) { enet_host_destroy(server); server = NULL; } address.host = ENET_HOST_ANY; /* Bind the server to port 1234. */ address.port = 1721; server = enet_host_create (& address /* the address to bind the server host to */, 32 /* allow up to 32 clients and/or outgoing connections */, 2 /* allow up to 2 channels to be used, 0 and 1 */, 0 /* assume any amount of incoming bandwidth */, 0 /* assume any amount of outgoing bandwidth */); } void daLoop() { while(true) { /* Wait up to 1000 milliseconds for an event. */ while (enet_host_service (server, & event, 5000) > 0) { ENetPacket * packet; switch (event.type) { case ENET_EVENT_TYPE_CONNECT: printf ("A new client connected from %x:%u.\n", event.peer -> address.host, event.peer -> address.port); /* Store any relevant client information here. */ event.peer -> data = "Client information"; /* Create a reliable packet of size 7 containing "packet\0" */ packet = enet_packet_create ("packet", strlen ("packet") + 1, ENET_PACKET_FLAG_RELIABLE); /* Extend the packet so and append the string "foo", so it now */ /* contains "packetfoo\0" */ enet_packet_resize (packet, strlen ("packetfoo") + 1); strcpy ((char*)& packet -> data [strlen ("packet")], "foo"); /* Send the packet to the peer over channel id 0. */ /* One could also broadcast the packet by */ /* enet_host_broadcast (host, 0, packet); */ enet_peer_send (event.peer, 0, packet); /* One could just use enet_host_service() instead. */ enet_host_flush (server); break; case ENET_EVENT_TYPE_RECEIVE: printf ("A packet of length %u containing %s was received from %s on channel %u.\n", event.packet -> dataLength, event.packet -> data, event.peer -> data, event.channelID); /* Clean up the packet now that we're done using it. */ enet_packet_destroy (event.packet); break; case ENET_EVENT_TYPE_DISCONNECT: printf ("%s disconected.\n", event.peer -> data); /* Reset the peer's client information. */ event.peer -> data = NULL; } } } } ~Host() { if(server) { enet_host_destroy(server); server = NULL; } atexit (enet_deinitialize); } }; class Client { ENetAddress address; ENetEvent event; ENetPeer *peer; ENetHost* client; public: Client() :peer(NULL) { enet_initialize(); setupPeer(); } void setupPeer() { client = enet_host_create (NULL /* create a client host */, 1 /* only allow 1 outgoing connection */, 2 /* allow up 2 channels to be used, 0 and 1 */, 57600 / 8 /* 56K modem with 56 Kbps downstream bandwidth */, 14400 / 8 /* 56K modem with 14 Kbps upstream bandwidth */); if (client == NULL) { fprintf (stderr, "An error occurred while trying to create an ENet client host.\n"); exit (EXIT_FAILURE); } /* Connect to some.server.net:1234. */ enet_address_set_host (& address, "192.168.2.13"); address.port = 1721; /* Initiate the connection, allocating the two channels 0 and 1. */ peer = enet_host_connect (client, & address, 2, 0); if (peer == NULL) { fprintf (stderr, "No available peers for initiating an ENet connection.\n"); exit (EXIT_FAILURE); } /* Wait up to 5 seconds for the connection attempt to succeed. */ if (enet_host_service (client, & event, 20000) > 0 && event.type == ENET_EVENT_TYPE_CONNECT) { std::cout << "Connection to some.server.net:1234 succeeded." << std::endl; } else { /* Either the 5 seconds are up or a disconnect event was */ /* received. Reset the peer in the event the 5 seconds */ /* had run out without any significant event. */ enet_peer_reset (peer); puts ("Connection to some.server.net:1234 failed."); } } void daLoop() { ENetPacket* packet; /* Create a reliable packet of size 7 containing "packet\0" */ packet = enet_packet_create ("backet", strlen ("backet") + 1, ENET_PACKET_FLAG_RELIABLE); /* Extend the packet so and append the string "foo", so it now */ /* contains "packetfoo\0" */ enet_packet_resize (packet, strlen ("backetfoo") + 1); strcpy ((char*)& packet -> data [strlen ("backet")], "foo"); /* Send the packet to the peer over channel id 0. */ /* One could also broadcast the packet by */ /* enet_host_broadcast (host, 0, packet); */ enet_peer_send (event.peer, 0, packet); /* One could just use enet_host_service() instead. */ enet_host_flush (client); while(true) { /* Wait up to 1000 milliseconds for an event. */ while (enet_host_service (client, & event, 1000) > 0) { ENetPacket * packet; switch (event.type) { case ENET_EVENT_TYPE_RECEIVE: printf ("A packet of length %u containing %s was received from %s on channel %u.\n", event.packet -> dataLength, event.packet -> data, event.peer -> data, event.channelID); /* Clean up the packet now that we're done using it. */ enet_packet_destroy (event.packet); break; } } } } ~Client() { atexit (enet_deinitialize); } }; int main() { std::string a; std::cin >> a; if(a == "host") { Host host; host.daLoop(); } else { Client c; c.daLoop(); } return 0; } I looked at some socket tutorials and they seemed a bit too low level. I just need something that abstracts away the platform (eg, no WINSOCKS) and that has basic ability to keep track of connected clients and send them messages. Thanks

    Read the article

  • SortedDictionary and SortedList

    - by Simon Cooper
    Apart from Dictionary<TKey, TValue>, there's two other dictionaries in the BCL - SortedDictionary<TKey, TValue> and SortedList<TKey, TValue>. On the face of it, these two classes do the same thing - provide an IDictionary<TKey, TValue> interface where the iterator returns the items sorted by the key. So what's the difference between them, and when should you use one rather than the other? (as in my previous post, I'll assume you have some basic algorithm & datastructure knowledge) SortedDictionary We'll first cover SortedDictionary. This is implemented as a special sort of binary tree called a red-black tree. Essentially, it's a binary tree that uses various constraints on how the nodes of the tree can be arranged to ensure the tree is always roughly balanced (for more gory algorithmical details, see the wikipedia link above). What I'm concerned about in this post is how the .NET SortedDictionary is actually implemented. In .NET 4, behind the scenes, the actual implementation of the tree is delegated to a SortedSet<KeyValuePair<TKey, TValue>>. One example tree might look like this: Each node in the above tree is stored as a separate SortedSet<T>.Node object (remember, in a SortedDictionary, T is instantiated to KeyValuePair<TKey, TValue>): class Node { public bool IsRed; public T Item; public SortedSet<T>.Node Left; public SortedSet<T>.Node Right; } The SortedSet only stores a reference to the root node; all the data in the tree is accessed by traversing the Left and Right node references until you reach the node you're looking for. Each individual node can be physically stored anywhere in memory; what's important is the relationship between the nodes. This is also why there is no constructor to SortedDictionary or SortedSet that takes an integer representing the capacity; there are no internal arrays that need to be created and resized. This may seen trivial, but it's an important distinction between SortedDictionary and SortedList that I'll cover later on. And that's pretty much it; it's a standard red-black tree. Plenty of webpages and datastructure books cover the algorithms behind the tree itself far better than I could. What's interesting is the comparions between SortedDictionary and SortedList, which I'll cover at the end. As a side point, SortedDictionary has existed in the BCL ever since .NET 2. That means that, all through .NET 2, 3, and 3.5, there has been a bona-fide sorted set class in the BCL (called TreeSet). However, it was internal, so it couldn't be used outside System.dll. Only in .NET 4 was this class exposed as SortedSet. SortedList Whereas SortedDictionary didn't use any backing arrays, SortedList does. It is implemented just as the name suggests; two arrays, one containing the keys, and one the values (I've just used random letters for the values): The items in the keys array are always guarenteed to be stored in sorted order, and the value corresponding to each key is stored in the same index as the key in the values array. In this example, the value for key item 5 is 'z', and for key item 8 is 'm'. Whenever an item is inserted or removed from the SortedList, a binary search is run on the keys array to find the correct index, then all the items in the arrays are shifted to accomodate the new or removed item. For example, if the key 3 was removed, a binary search would be run to find the array index the item was at, then everything above that index would be moved down by one: and then if the key/value pair {7, 'f'} was added, a binary search would be run on the keys to find the index to insert the new item, and everything above that index would be moved up to accomodate the new item: If another item was then added, both arrays would be resized (to a length of 10) before the new item was added to the arrays. As you can see, any insertions or removals in the middle of the list require a proportion of the array contents to be moved; an O(n) operation. However, if the insertion or removal is at the end of the array (ie the largest key), then it's only O(log n); the cost of the binary search to determine it does actually need to be added to the end (excluding the occasional O(n) cost of resizing the arrays to fit more items). As a side effect of using backing arrays, SortedList offers IList Keys and Values views that simply use the backing keys or values arrays, as well as various methods utilising the array index of stored items, which SortedDictionary does not (and cannot) offer. The Comparison So, when should you use one and not the other? Well, here's the important differences: Memory usage SortedDictionary and SortedList have got very different memory profiles. SortedDictionary... has a memory overhead of one object instance, a bool, and two references per item. On 64-bit systems, this adds up to ~40 bytes, not including the stored item and the reference to it from the Node object. stores the items in separate objects that can be spread all over the heap. This helps to keep memory fragmentation low, as the individual node objects can be allocated wherever there's a spare 60 bytes. In contrast, SortedList... has no additional overhead per item (only the reference to it in the array entries), however the backing arrays can be significantly larger than you need; every time the arrays are resized they double in size. That means that if you add 513 items to a SortedList, the backing arrays will each have a length of 1024. To conteract this, the TrimExcess method resizes the arrays back down to the actual size needed, or you can simply assign list.Capacity = list.Count. stores its items in a continuous block in memory. If the list stores thousands of items, this can cause significant problems with Large Object Heap memory fragmentation as the array resizes, which SortedDictionary doesn't have. Performance Operations on a SortedDictionary always have O(log n) performance, regardless of where in the collection you're adding or removing items. In contrast, SortedList has O(n) performance when you're altering the middle of the collection. If you're adding or removing from the end (ie the largest item), then performance is O(log n), same as SortedDictionary (in practice, it will likely be slightly faster, due to the array items all being in the same area in memory, also called locality of reference). So, when should you use one and not the other? As always with these sort of things, there are no hard-and-fast rules. But generally, if you: need to access items using their index within the collection are populating the dictionary all at once from sorted data aren't adding or removing keys once it's populated then use a SortedList. But if you: don't know how many items are going to be in the dictionary are populating the dictionary from random, unsorted data are adding & removing items randomly then use a SortedDictionary. The default (again, there's no definite rules on these sort of things!) should be to use SortedDictionary, unless there's a good reason to use SortedList, due to the bad performance of SortedList when altering the middle of the collection.

    Read the article

< Previous Page | 403 404 405 406 407 408 409 410 411 412 413 414  | Next Page >