Web Developers

render Low-level text

2015-06-11T04:19:00.002-07:00

Download source code - 19.4 KB

Introduction

I needed to position individual text characters in my app, and it was more involved than I thought it would be. So I'm chalking it up for posterity.
But I want to zoom out a bit. What's really important isn't knowing how to do a particular trick. It is your general approach to the generic problem of assimilating and implementing new technology.
First thing I do nowadays when I want to add something new to my app is start with a clean slate and get it working on that. It's like working of a clean desk on a Monday morning, or keeping a clean tool shed.
And I've even made my own clean slate -- CreatingXcodeProject.aspx. I ended up brushing up the template a bit -- you can download the new one here: 1prepgroundiphonedev.aspx.
The modifications I made are:

Tidying up the view controller's files so that iVars don't share the same name with their getter methods (I explain why this is a bad practice in my introductory article: 1prepgroundiphonedev.aspx).
Improving the test picture, and pulling it out as a method. It's a really useful method -- practically every time I am creating a bitmap, or positioning a view within a view, or sticking a layer on a layer, and I'm using transforms, I never get it right the first time -- so I need to know how far out I am. With my original test picture, it was sometimes completely off the screen, which was no help. So this one fires out radial rays from 0,0 to some stupid distance like 10,000; I have used thin wedges -- just drawing lines is messier as you have to specify a line thickness, and as you don't necessarily have any idea how many pixels represent one unit, you can't just say CGContextSetStrokeWidth(X, 1.0), as that might be too small to even be seen, or so big that it fills the screen.

Anyway -- with this scheme, you can just look at what's on your screen and infer the origin. Also, the colour goes from red to blue as we progress counterclockwise from the positive X axis. So we can infer orientation. And the white circle on the grey background gives us bounds. Origin, orientation, bounds. Sorted!
I put in a function that transforms a context's coordinate system, giving a Cartesian coordinate system with 0, 0 in the centre, and 1, 1 in the top right corner. Like it should be!

So, I create a new project using this template, and I can just put code in the view's drawRect -- the coordinate system is set up as described above.
Getting text onto the screen is no problem -- I can just set:

Hide Copy Code

[self drawTestShapeToContext: X
      inRect: wholeRect
      withText: YES ];

… and the template will stick some text on the screen. This is how it does it:

Hide Copy Code

if</span /> (showText)
{
   CGContextSaveGState(X);
   CGAffineTransform tmX = CGContextGetTextMatrix(X);
   
   char</span />* text = "</span />Hello World!"</span />;
   CGContextSelectFont(X, "</span />Helvetica Bold"</span />, 
                       rect.size.width / 13</span />.0</span />, kCGEncodingMacRoman);
   CGContextSetTextDrawingMode(X, kCGTextFill);
   CGContextSetRGBFillColor(X, 0</span />.1f, 0</span />.3f, 0</span />.8f,  1</span />.0f);         
   //</span />CGAffineTransform xform = CGAffineTransformMake(
</span />   //</span />             1.0f,  0.0f,
</span />   //</span />             0.0f, -1.0f,
</span />   //</span />             0.0f,  0.0f   );
</span />   //</span />CGContextSetTextMatrix(X, xform);    
</span />   CGContextShowTextAtPoint(X, centre.x, centre.y, text, strlen(text));
   
   //</span />  Watch out! TextMatrix doesn't get restored
</span />   //</span />  when you restore the graphics context!
</span />   CGContextRestoreGState(X);
   CGContextSetTextMatrix(X, tmX);
}

(Commented out transform because I have flipped the coordinate system myself -- if you didn't do that, the text would appear upside down).
But this is no use to me. I need finer grained control. I need to know the bounds of each glyph. What I really want is a CGPath for each glyph. If you don't know about CGPaths, think PDF. Representing glyphs (and everything else where possible) as a sequence of geometrical moves; MoveTo(100,100) then draws an arc centered on (50,50), radius 50 from theta = pi / 2 to pi / 2 … etc., so that the result is device independent.
I generally start out clicking through Apple's help.

Part one -- the grizzly dance with Apple's help system

This next section is about using the Apple help. It's not pretty. If you want to skip straight to the solution, scroll down.
Now, what's the next step? Well, it would be wonderful if I could just Alt+ double-click onCGContextShowTextAtPoint and have the help say 'Sorry, core graphics doesn't have any function for what you want -- what you want is core text'. And then I click on 'core text' and get the answer. But the Apple help is not so smart.
This is a horrible experience every time for me. Even finding something again that I was looking at yesterday can be a mission.
Help -> Developer documentation -> Home icon -> iOS 4.0 developer library.
I can see 'Core Text' on the left pane if I scroll down. So I click on that. And I don't even know what core text is, but it sounds like the right thing.
Now I can see 'Core text programming guide' coming up on the right-hand panel, so I click on that. Now I look at the status bar, and it says:
iPhone OS 4.0 library -> Data management -> Strings, text, & fonts -> Core text programming guide -> Introduction
So I double click on 'strings, text & fonts' (I don't want to read the core text guide without first being aware of all of the other options): 'no documents found'. Great -- my help is broken. So I will have to pick it up from this point online.
Throw 'core text programming guide' into Google and get the same page up.
Looking at its status bar, it is completely inconsistent with what my local help was saying. Here I get:
IPhone Dev centre -> iOS reference library -> Framework -> Media layer -> Core text
Which seems to be missing the level at which the different available technologies are differentiated, which is what I'm looking for.
There is also a warning to say that these pages are not up-to-date with iOS 3.2. Well, at the time of writing, the current version of iOS is 4.0. So even the warning telling us that the information is out of date is itself out of date.
Anyway, I can find it just by clicking the link in the introduction paragraph, which takes me here:

Mac OSX text technologies

Great! Finally we have got to the juicy stuff.
I'm not irately trying to bash Apple here. I'm just pointing out that behind your sleek metallic black rectangle of Zen perfection is a lot of people scrabbling hard to collectively get it together. The help misleadingly carries the same gloss veneer, giving you the impression that it has been put together by some mastermind, and you, the common idiot, are thrashing around as a result of your own stupidity.
It's important to get some perspective. You need to start at ground zero, a.k.a. reality. And reality is that the help is a mess. Maybe this is a good thing -- maybe it means they are putting their focus on good code. I would rather good code badly documented than vice versa. Most likely their best brains are not wasted on patching up the help system.
Anyway, let's look at that link. How far can you get before everything turns into 'blah de blah blah BLAH'?
Technical documentation and instruction manuals always sap my will to live. Why does the world conspire thus!
Sure, it all makes perfect sense -- if you understand it already. But to a newcomer, it is a nightmare. Everything is being presented in the wrong order. The problem is, these help files are written by people who have been so exposed to the material that they have forgotten what it is like to learn it -- they have forgotten which questions come first.
I want to dive into some code. This is all too wishy-washy. I want to see some code! As do you probably…
Okay, to cut a long story short, I eventually found some Apple sample code -- through a mix of Googling 'core-text sample' and asking on IRC. Alt + double-clicking on various functions in this sample brought up help pages that link to a couple of other samples.
I like to store links like this at the top of my project:

This way you can open them straight out of Xcode.
OK, that is all the sample code the Internet is providing.
I needed some help on IRC to convert CoreTextArcCocoa from OSX to iOS. Although it does what I need (wrapping text around a circle), the way it is done is not at all transparent. So I just kept gutting it out, moving auxiliary functions into the main body, trimming and pruning until I had the minimum needed to put a glyph on the screen.
CoreAnimationText is very nicely written -- and contains one line that is very interesting:

Hide Copy Code

path = CTFontCreatePathForGlyph(font, glyph, NULL);

Wonderful! Let's stick together!

Part two: How to put a glyph on the screen

Start with a C-style string, something like 'hello world'.
Now, an attributed string is something like 'hello world' with 'hello' in Times new Roman 14 point Italic, and ' world' in Courier underlined. Basically rich text, remember .RTF? Microsoft WordPad?
Okay, suppose for now you have your attrString (we will discuss how to create it out of a string later). Here is how to render it glyph by glyph:

Hide Shrink Copy Code

CTLineRef line = CTLineCreateWithAttributedString( attStr ) ;
         
CFArrayRef runArray = CTLineGetGlyphRuns(line);

//</span /> for each RUN
</span />for</span /> (CFIndex runIndex = 0</span />; runIndex <</span /> CFArrayGetCount(runArray); runIndex++)
{
   //</span /> Get FONT for this run
</span />   CTRunRef run = (CTRunRef)CFArrayGetValueAtIndex(runArray, runIndex);
   CTFontRef runFont = 
     CFDictionaryGetValue(CTRunGetAttributes(run), kCTFontAttributeName);
   
   //</span /> for each GLYPH in run
</span />   for</span /> (CFIndex runGlyphIndex = 0</span />; 
        runGlyphIndex <</span /> CTRunGetGlyphCount(run); runGlyphIndex++) 
   {
        //</span /> get Glyph & Glyph-data
</span />        CFRange thisGlyphRange = CFRangeMake(runGlyphIndex, 1</span />);
        CGGlyph glyph;
        CGPoint position;
        CTRunGetGlyphs(run, thisGlyphRange, &glyph);
        CTRunGetPositions(run, thisGlyphRange, &position);

        //</span /> Render it
</span />        {
             CGFontRef cgFont = CTFontCopyGraphicsFont(runFont, NULL);
                 
             CGAffineTransform textMatrix = CTRunGetTextMatrix(run);
             CGContextSetTextMatrix(X, textMatrix);

             CGContextSetFont(X, cgFont);
             CGContextSetFontSize(X, CTFontGetSize(runFont));
             CGContextSetRGBFillColor(X, 1</span />.0</span />, 1</span />.0</span />, 1</span />.0</span />, 0</span />.5</span />);
             CGContextShowGlyphsAtPositions(X, &glyph, &position, 1</span />);
             CFRelease(cgFont);
        }
                            
        //</span /> Get PATH of outline & stroke outline
</span />        {
             CGPathRef path = CTFontCreatePathForGlyph(runFont, glyph, NULL);
             CGMutablePathRef pT = CGPathCreateMutable();
             CGAffineTransform T = 
               CGAffineTransformMakeTranslation(position.x, position.y);
             CGPathAddPath(pT, &T, path);
             
             CGContextAddPath(X, pT);
             CGContextSetStrokeColorWithColor(X, [UIColor yellowColor].CGColor);
             CGContextSetLineWidth(X, atLeastOnePixel);
             CGContextStrokePath(X);
             CGPathRelease(path);
             CGPathRelease(pT);
        }
        
        //</span /> draw blue bounding box
</span />        {
             CGRect glyphRect = CTRunGetImageBounds(run, X, thisGlyphRange);
             
             CGContextSetLineWidth(X, atLeastOnePixel);
             CGContextSetStrokeColorWithColor(X, [UIColor blueColor ].CGColor);
             CGContextStrokeRect(X, glyphRect);
        }
        
        //</span /> release things
</span />   }
}
CFRelease(line);

Say in our previous example, 'hello world' was our attributed string. We convert it into a CTLine. There will be a function for printing out a CTLine, but for now, we keep digging.
We find it comprises two CTRun-s. 'hello' and ' world' Obviously, a run is a wodge of text sharing the same attributes.
So for each run, we go through -- glyph by glyph.
For each glyph, we get its CPath. We could have a ton of fun with that. But let's stay minimal for now and just stroke the outline yellow.
Now that we have dug to the bottom, we can see a host of higher-level functions in a new light.

Hide Copy Code

//</span /> Render it
</span />CGFontRef cgFont = CTFontCopyGraphicsFont(runFont, NULL);
 
CGContextSetFont(X, cgFont);
CGContextSetFontSize(X, CTFontGetSize(runFont));
CGContextSetRGBFillColor(X, 1</span />.0</span />, 1</span />.0</span />, 1</span />.0</span />, 0</span />.5</span />);
CGContextShowGlyphsAtPositions(X, &glyph, &position, 1</span />);

This is just filling the paths, isn't it?
And this obviously just gets the bounding box for the CG path:

Hide Copy Code

CGRect glyphRect = CTRunGetImageBounds(run, X, thisGlyphRange);

The one remaining piece of the puzzle: how to create the attributed string in the first place.

Hide Shrink Copy Code

#define</span /> FONT @"</span />HelveticaNeue-Bold"</span />
#define</span /> FONTSIZE 0</span />.7</span />
#define</span /> TEXT @"</span />jkl"</span />
:
:
NSString* string = TEXT;

//</span /> A string is something like: 'hello world!'
</span />//</span /> An attributed string is something like 'hello world!' with 'Hello' in 
</span />//</span /> Times new Roman, 14pt and 'world' in this is the Courier Bold.
</span />//</span /> An RTF file is basically an attributed string.
</span />
CFAttributedStringRef attStr;
//</span /> get attributed-string from string
</span />{
   UIFont* font = [UIFont fontWithName:FONT size:FONTSIZE];
   
   CTFontRef ctFont = CTFontCreateWithName((CFStringRef)font.fontName, 
                      font.pointSize, 
                      NULL);
   
   //</span /> In our example we just set the font,
</span />   //</span /> and specify ' only use ligatures when essential '.
</span />   //</span /> Ligatures: on some fonts 'fit' comes out
</span />   //</span /> as only 2 glyphs; 'fi'+'t', because if 'f' and
</span />   //</span /> 'i' are drawn separately, they will tend
</span />   //</span /> to be close together and messy. 'fi' is a ligature
</span />   NSNumber* NS_0 = [NSNumber numberWithInteger:0</span />];
   NSDictionary *attributes = [NSDictionary dictionaryWithObjectsAndKeys:
       (id) ctFont, kCTFontAttributeName, //</span /> NSFontAttributeName
</span />       (id) NS_0, kCTLigatureAttributeName,  //</span /> NSLigatureAttributeName
</span />       nil];
   assert(attributes != nil);
   
   NSAttributedString* ns_attrString = [[NSAttributedString alloc] initWithString:string
                                         attributes:attributes];
   [ns_attrString autorelease];
   
   attStr = (CFAttributedStringRef) ns_attrString; 
}

As I am including all of the developer boilerplate in this article, I will point out that we are not quite done. The next step, once we have something drawing on the screen, is to test it. Try different fonts and sizes. Try drawing upside down. Try drawing from a point other than (0,0). Kick and punch it a little -- toughen it up. In doing this, I discovered that restoring the graphics context doesn't restore the text matrix. Which made me add a couple of crucial lines to my code:

Hide Copy Code

CGAffineTransform textMatrix = CTRunGetTextMatrix(run);
CGContextSetTextMatrix(X, textMatrix);

Then --who knows? Depends on what you want. Maybe extract the functionality you need into methods and stick them in a new source file, so you can just drag it into your project.
P.S.: If you're trying this at home -- you need to add the core text framework and the following line to your .PCH:

Hide Copy Code

#import</span /> <</span />CoreText/CoreText.h></span />

If anyone has useful tips for speeding up the research phase, please share! It took me hours to find the sample projects. I should have probably gone to the Apple website straight away -- there is an easy to find page listing all of their code examples: hmm... just checked, and it is junk:

iPhone - Visual Studio debug console

2015-06-11T04:16:00.002-07:00

Download Html5DebugConsole.zip - 90.6 KB

Introduction

The following article has two purposes:

From the architectural perspective: To show an approach to integrate Windows applications with smarthphone and tablet applications through HTML5 WebSockets.
From the software engineering perspective: To show a concrete and useful case of a Visual Studio remote debugging console on iPhones, extensible to Android devices.

It is not a goal of this article to provide a final and polished solution, the source code and applications provided are just for demonstrating the concept. Although the .net application uses the WPF library, it can be used with any UI library.

Background

Few days ago I got an iPhone 4. I was hoping to find a way to use it as a debugging console for my .net applications: No luck. So, I started to research about the simplest solution to perform this, using the following criteria:

Avoid to learn a totally new language, like Objective-C
Avoid to distribute the application through Apple's AppStore (and save a hundred bucks!)
Use a firewall-friendly communication technique
Use a simple library, prefereably just one DLL

The research process was not too long, HTML5 seems to be the best choice for writing an application without requiring the AppStore process, iOS supports nicely the HTML5 Application Cache feature and the HTML5 WebSockets complied with the firewall-friendly requirement and was implemented natively in iOS' Safari browser.

Architecture

In the Windows side, the core functionality of the tool is a TraceListener-derived class. This class is responsible to trap the System.Diagnostics.Debug.Write() and .WriteLine() calls and sent it to the remote device by using an HTML5 WebSocket server. On the other hand, the iPhone implements a javascript application using a WebSocket client. The high-level design looks like this:

Implementation

Windows side

In the Windows side, WebSockets is still not supported natively by .Net (but already announced for the .Net Framework 4.5). After evaluating a half dozen of C# WebSocket libraries, I went for Alchemy (see http://alchemywebsockets.net ) because of its simplicity and monolitic DLL implementation.
Another important feature of Alchemy is its support for several versions of the WebSocket protocol. Since it is not a mature standard, there are many versions of it, depending on the browser brand, version and platform. The supported versions are hixie-76 (hybi00), hybi-10, hybi-17 and RFC6455.
As mentioned before, the main class in the windows side is a TraceListener-derived class, namedWebSocketTraceListener. The implementation is really short, as follows:

Hide Shrink Copy Code

namespace System.Diagnostics
{
    public class WebSocketTraceListener : TraceListener
    {
        private Alchemy.WebSocketServer  server = new Alchemy.WebSocketServer();
        private Alchemy.Classes.UserContext connection = null;

        public void Initialize(System.Net.IPAddress ip, int port)
        {
            try
            {
                server.ListenAddress = ip;
                server.Port = port;
                server.OnConnect = OnConnect;
                server.OnDisconnect = OnDisconnect;
                server.Start();

                Debug.WriteLine("WebSocket Trace Listener: An error ocurred when the application tried to start");
                Debug.Listeners.Add(this);
            }
            catch (Exception)
            {
                Debug.WriteLine("WebSocket Trace Listener: Started correctly.");
            }
        }
        public override void Write(string message)
        {
            if (this.connection != null)
                this.connection.Send(message);
        }
        public override void WriteLine(string message)
        {
            if (this.connection != null)
                this.connection.Send(message);
        }

        private void OnConnect(Alchemy.Classes.UserContext context)
        {
            if (this.connection != null)
                this.server.Restart();
            this.connection = context;
        }
        private void OnDisconnect(Alchemy.Classes.UserContext context)
        {
            this.connection = null;
        }
    }
}

This class can be embedded directly into your application; there is no need to keep it in a separated DLL. There are two dependencies, though: The Alchemy library (Alchemy.dll, included in the solution), and System.Web.dll, which requires the project to be configured with the regular .Net Framework (and not the .Net Framework Client Profile) in order to allow you to attach that DLL. Finally, the listener class can be used by adding few lines of code:

Hide Copy Code

            var listener = new WebSocketTraceListener();
            listener.Initialize(IPAddress.Parse("192.168.0.101"), 81);
            ...
            Debug.WriteLine("This is a debug line");

Notice that the IP address belongs to the computer where the debugged application runs, and the port number should be one that is not blocked by your current OS and Hardware firewall settings; 81 is a good one. The IP address will be usually local, as it is expected to be connected from the mobile device inside a LAN context. In order to debug an application which is running in Internet, more settings may be required in your router.
A mockup WPF application has been created in order to send some debug strings according to the user interaction:

Mobile device side

In the mobile device, the source code is simple as well, by using a native WebSocket client object, as in the following template:

Hide Copy Code

var socket;

function Initialize(address) {
    socket = new WebSocket(address);
    socket.onopen = function (event) {
       // Prepare the UI here
    };
    socket.onclose = function(event) {
       // Reset the UI here
    };
    socket.onerror = function (event) {
       // Display the error (event.data)
    };
    socket.onmessage = function (event) {
       // Display the debug message (event.data)
    };
}
function Stop() {
    if (socket !== undefined) {
        socket.close();
    }
}

The address must indicate the ws:// protocol and shall match the IP and port specified in the Windows side.
Regarding the concrete tool, it has a minimalistic user interface. The first row allows to specify the socket address, start and stop the connection. The incoming lines will appear from top to bottom and can de scrolled up and down as usual:
When a connection is succesful, the Connect button will become disabled and the Stop button will turn enabled. After stopping successfully, both buttons will swap their states.

Deployment

The unique file required to be deployed is DebugConsole.htm, which contains all the HTML, CSS and Javascript code. It can be placed in any server. As this is an HTML5 application using WebSocket, the application will run as a standalone application after it is loaded through a browser. In order to convert this Internet page into a cached application, there are several tricks and tips required.
The first step to prepare a cached application is to create a manifest file. The minimum content would be something like:

Hide Copy Code

CACHE MANIFEST
CACHE:
DebugConsole.htm

The web page is linked by specifying the manifest file into the html tag as: <html manifest="manifest_file">. This will keep the page cached into the local machine until the manifest is changed at server or the local cache is manually cleared by the user.
The big tip here is that the manifest must be served with MIME type text/cache-manifest. There are many authors that suggest to configure the server to allow this new MIME type for the specific file, but sometimes we don't have that degree of control. Another way to accomplish the same task, is to manually manipulate the headers while creating the manifest file dinamically. The sample source code shows a way to do it with PHP, but it can be done with ASP as well:

Hide Copy Code

<?php ob_start(); header('Content-type: text/cache-manifest'); 
echo 'CACHE MANIFEST
CACHE:
DebugConsole.htm';
ob_end_flush(); ?>

A final trick can avoid hours of pain: When alterating the headers at runtime, it is extremely important to not to output any single character before the header is changed. That would throw a server exception. Be sure to remove any extra white spaces at the end of the scripted file.

iPhone specifics

There are few extra steps to make this a true iPhone application. We need a couple of resources: a 57x57 icon and a 320x460 splash screen. Both image files can be png or jpeg. After creating the required resource files, they shall be added to the manifest:

Hide Copy Code

<?php ob_start(); header('Content-type: text/cache-manifest'); 
echo 'CACHE MANIFEST
CACHE:
Debug_Icon.png
Debug_Start.png
DebugConsole.htm';
ob_end_flush(); ?>

In the HTML file, some META and LINK records are needed to tell iOS how to set some behaviors and deal with the resources added:

Hide Copy Code

    <head>
        <title>VS Debug</title>
        <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />

        <link rel="apple-touch-icon" href="Debug_Icon.png"/>
        <link rel="apple-touch-startup-image" href="Debug_Start.png"  media="screen and (min-device-width: 200px) and (max-device-width: 320) and (orientation:portrait)" />

The final steps can be seen in the following screen shots. In summary, you have to browse to the desired page by using Safari and then add the page to the Home Screen. The iOS will scan the manifest and take the icon and splash screen for future use.
And that's it! You are now able to develop more complex iPhone/HTML5 Apps connected to other Window applications.

Simplifying Word Responsive Design

2015-06-11T04:14:00.003-07:00

Every so often, there is a new buzz word in the web development/design industry. A few years ago, it was HTML5 and CSS3. Now it seems to be responsive design. And of course, this makes a lot of sense. With more and more Internet users accessing the content on their laptop or desktop PC, tablets, and mobile phones, websites need to be able to be ready to serve up the content in an appropriate fashion.

In this article, I want to take a step back and help simplify this process because by stopping and thinking just a little bit, it doesn't need to be complicated. In fact, it's quite simple.

At the time of writing this article, my blog is only about 50% responsive, I am planning a new design soon that will take it to the next level.

First things first, do NOT change how you are already designing websites! Designers, please continue making your fixed sized designs in Photoshop. This is the best way to get started.

Once your design is ready, slice and dice it as usual. Set up your grid layout, get your fonts right, etc. Once you're done that, a few subtle changes need to happen to make it responsive. The first thing is removing those pixels and replacing them with percentages.

Let's look at the following grid example:

The above picture is a pretty basic grid; it contains a header that spans the full length and two boxes below, one slightly larger than the other.

Basic HTML and CSS would probably look something like this:

Hide Copy Code

<div id=page>
<div id=header></div>

<div id=content></div>
<div id=sidebar></div>
</div>

And the CSS:

Hide Copy Code

#page {
margin: 0 auto;
width: 960px;
}

#content {
float: left;
margin-right: 30px;
width: 600px;
}
#sidebar {
float: left;
width: 330px;
}

This grid will work perfectly on the desktop; however, if you look it on a mobile device or even just resize your browser, you will quickly notice that left and right scrollbars start appearing.

Let's now remove the pixels and convert this to percentages, luckily only the CSS changes:

Hide Copy Code

#page {
margin: 0 auto;
width: 90%;
}

#content {
float: left;
margin-right: 3.125%;
width: 62.5%;
}
#sidebar {
float: left;
width: 34.375%;
}

Using the above CSS, as you resize your browser, you will see that our grid automatically adjusts to make the new site and no horizontal scrollbars appear.

How did I come up with these numbers? It's quite simple; I took my pixels and did some math.

The 90% is simply trial and error/personal preference for what works well
The content and sidebar is basic math: 600 / 960 * 100 = 62.5% and 330 / 960 * 100 = 34.375%
The margin right is the remainder: 100 ? 62.5 ? 34.375 = 3.125%

This covers the most complicated part of responsive design. The next part is dealing with the left overs. I like to think of it in 2 different ways. Firstly, you need to deal with the smallest of devices and secondly, you need to deal with the largest of devices. For the former, I typically think of 320 pixels in width (standard iPhone or Android width). And for the latter, I think of desktop PCs or laptops that exceed 1200 pixels in width.

In most scenarios, your base design should handle well on tablet devices or when the phone is in landscape mode. A few small adjustments might be required, but this needs to be addressed on a case-by-case basis.

When you look at the smallest width, in most scenarios your grid layout will no longer work. There simply is not enough room to divide the grid in two. Instead, I suggest using media queries and make some slight adjustments to your CSS:

Hide Copy Code

@media screen and (min-width: 320px) {
#content, #sidebar {
clear: both;
float: none;
width: auto;
}
}

With the above CSS in place, my sidebar will no longer float left. Instead, the content will take the full width of the window and the sidebar will live directly beneath the content.

Similarly when dealing with screen sizes larger than 1200 pixels, we have the inverse problem. There is typically too much white space or our content stretches so far that as the reader attempts to transition back to a new line it's easy for them to lose their place.

To solve this problem, another media query can be used that perhaps brings a third column into the grid so the main content doesn't exceed that sweet spot of 60-80 words across:

Hide Copy Code

@media screen and (min-width: 1200px) {
/* make a third grid */
}

This of course is not the only option, if you are in a situation like my current blog is and it's not easy to make a third grid item, I instead played around with the 90% that I used above in the outer grid size. Instead, I reduced it something more reasonable like 70% allowing more whitespace on the outside of the grid.

Summary

The bottom line I want to reinforce in this article is that responsive design is not hard, but it does require additional thought. As I am not a designer, I truly don't have all the answers, but I can help you pose the right questions.

Once you've implemented your base flexible grid, adjust your browser or load your website on the various devices and critic your layout. Is there too much whitespace? Is the grid too small and content unreadable? Is a font size you've chosen for larger designs taking over on smaller devices? Etc.

These and other questions simply need answering and by using media queries and making several minor adjustment, your website will begin to scale smoothly and easily.

PayPal for C# - ASP.NET

2015-06-11T04:10:00.003-07:00

Download source - 166 KB

Index

PayPal API

Introduction

PayPal is probably one of the first things that gets mentioned once you start discussion on online payments. It’s not so without reason – in 2008, PayPal moved over 60 billion dollars between accounts which is, you’ll agree, a respectable amount. And also, all trends show that this growth will continue – with huge number of new accounts (over 184 million accounts in 2008 compared to 96.2 million in 2005), with a new platform named PayPal X, and with more cool applications that involve paying (like Twitpay), you can bet that PayPal is here to stay. So, how can you join the whole PayPal Development movement?
Unfortunately, I would say – not so easily. When I first started with PayPal integration - it was hard, really hard. If you wish to see what I mean, just jump to the PayPal Developer Center. There is no way you’ll easily fish out what you need from that site if you are a PayPal newbie; simply - there are too many links, too many resources, and too many mixings of important and not-so-important information. So, how should you start?

Getting Started with PayPal

To those who really want to get into PayPal, and are willing to shell out some buck, I would recommend the Pro PayPal E-Commerce book - that’s how I eventually got into understanding the concepts behind PayPal integration. For those who are not so eager to pay – don’t worry, that’s why this article is here... I'll go over most of the stuff that book covers, but in a more brief and concise manner.
First and foremost - understanding what kinds of integration PayPal offers is, I would say, the most important thing in order to successfully start your development journey. A common mistake, that happened to me also, is to start at once with the PayPal API and Express Checkout. I mean it’s natural - we are developers, and when they tell us to integrate with something, the first thing we look for is the SDK & API… the PayPal API comes up as a result… we say “That’s it” to ourselves… and start working. The problem is – the majority of payment scenarios can be handled with a way simpler approach - HTML forms that are part of the Website Payments Standard.
So, without further ado, here is a classification of PayPal integrations:

Website Payments Standard (HTML)
Postpayment Processing

AutoReturn
Payment Data Transfer (PDT)
Instant Payment Notification (IPN)

PayPal API

Express Checkout
Direct Payment (Website Payments Pro)

Payflow Gateway

Items in classification are also ordered in a way I would suggest for everyone to follow. So, if you are new to PayPal – first learn all of the options that you have with the Website Payments Standard (HTML). Then, if you need to add some basic post-payment processing, see if Auto-Return or PDT will solve your problem… if not, IPN is a more robust option you have at your disposal.
The next level would involve the PayPal API and implementing the Express Checkout, which is the most flexible PayPal integration solution. And finally, if you long for the ability to directly process credit cards on your website, you’ll pay a monthly fee to PayPal and implement Direct Payment (effectively getting what is called Website Payments Pro).
The last item from our classification - the Payflow Gateway is, on the other hand, a different beast. It doesn’t “update the stack” in a way the previously mentioned technologies do. It is a solution aimed specifically at those businesses that have/want an Internet Merchant Account (IMA) and just need the payment gateway. In order to keep the article consistent, I’ll skip explaining the details of the Payflow Gateway. However, if you have any questions related to it, feel free to leave a message in the comments section and I’ll try to answer.
That said, let’s get to setting up a test PayPal account, and then we’ll delve deeper into describing the mentioned integrations.

Website Payments Standard (HTML)

In this section, I'll provide you with a number of examples that will show how to create your own HTML form for receiving money over PayPal. You'll see how to use different variables in order to influence payment details. Before we delve into details, let's take a look at the two most basic variables:

form's action attribute - in most cases, it should be https://www.paypal.com/cgi-bin/webscr. If you are using Sandbox for testing payments, you'll change it to https://www.sandbox.paypal.com/cgi-bin/webscr - effectively, you just insert the word sandbox into the URL (this is also true for some other integrations; e.g., the PayPal API). For upcoming examples, I won't be using the Sandbox URL because most of you would just get that "Login to use the PayPal Sandbox features" screen (look up for the image).
form's business child - I'll use youremailaddress@yourdomain.com for most examples; if you copy-paste the code, you'll want to replace that with the email of your PayPal account.

Basic Payment

OK, let’s say you have an opened PayPal account and you just wish to be able to accept a $10 payment for a painting you are selling through your site. Just insert the following HTML into your page and you are set to go:

Hide Copy Code

<form action="https://www.paypal.com/cgi-bin/webscr" method="post">

    <input type="hidden" name="cmd" value="_xclick" />
    <input type="hidden" name="business" value="youremailaddress@yourdomain.com" />

    <input type="hidden" name="item_name" value="My painting" />
    <input type="hidden" name="amount" value="10.00" /> 
    <input type="submit" value="Buy!" />

</form>

Shipping & Handling

The next thing that comes to mind is that you'll wish to add shipping and/or handling fees to your form. It's easy - just add more parameters:

Hide Copy Code

<form action="https://www.paypal.com/cgi-bin/webscr" method="post">

    <input type="hidden" name="cmd" value="_xclick" />
    <input type="hidden" name="business" value="youremailaddress@yourdomain.com" />

    <input type="hidden" name="item_name" value="My painting" />
    <input type="hidden" name="amount" value="10.00" />

    <input type="hidden" name="shipping" value="3.00" /> 
    <input type="hidden" name="handling" value="2.00" />

    <input type="submit" value="Buy with additional parameters!" />
</form>

Donations & Textual Links

If you aren't selling anything but rather accepting donations for some cause - you'll just need to change the value of the cmd variable to _donations. If we combine this with a common requirement to have a hyperlink instead of a button - we get the following URL (of course, you can use this method of URL creation for other PayPal payment types):

https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=youremailaddress@yourdomain.com&item_name=Save Polar Bears!&amount=10.00

Conclusion

My hope is that this article gave you good overview of PayPal integration options. If it did that, I'll be at peace - as once you have an understanding of the concepts laid out in this article, you'll easily fetch the needed details from the provided links. Sure, there are some topics we haven't touched, like Encrypted Website Payments,PayPal API Certificates, or Payflow Gateway, but I think you can tackle even that on your own once you fully understand all things written here.
If you get stuck on anything, I suggest that you first visit the PayPal Developer Community and ask your question in the appropriate forum. A number of great, knowledable developers monitor those forums, and it's highly probable that you'll receive an answer to almost any PayPal issue within an hour. I also have an account on that site (lepipele) and try to answer questions whenever I have time; so feel free to send me a private message if you drop by or run into trouble.

Barcode Generator/Reader

2015-01-02T03:43:00.000-08:00

QR codes are all the rage these days, and if you’ve got anAndroid, you hold in your hand the power to unlock the mysteries of the QR code-spackled world.

These distinctive barcodes are generally square and rendered in simple black-and-white blotches. You’ll find them on TV shows, in print publications, in subway advertisements… Heck, we’re willing to say marketers will slap a QR code on anything that doesn’t move or talk. QR code clothing is also available.

QR codes are used to reveal more information about a product, service, event or person. Generally, they direct the scanning device to a special URL, video, coupon, event page, email address, or other digital signpost with more details and content.

To scan the codes, all you need is a mobile device with a camera and an app to interpret the data in the code.

SEE ALSO: Who’s Really Scanning All Those QR Codes? [INFOGRAPHIC]

Here is a handful of free and serviceable Android apps for scanning and deciphering QR codes. We welcome your suggestions and faves in the comments, as well!

View As Slideshow »

Barcode Generator/Reader

Here's a simple tool for reading QR codes. It will also help you generate your own QR codes and supports all kinds of data, including event, contact, email, location, phone, sms, text, url and wifi.

Android Market link

How do I sum even numbers between two numbers

2014-12-05T05:45:00.000-08:00

How do I sum even numbers between two numbers

I have three textboxes, and one button .

The first txtbox is where the first number is entered by the user

The second txtbox is where the second number is entered by the user

The third txtbox is where the even sum will appear at.

And a enter button is also on the form.

MSDN wrote:

Collapse | Copy Code

public void Linq65()
{
    var numbers =
        from n in Enumerable.Range(100, 50)
 
        select new { Number = n, OddEven = n % 2 == 1 ? "odd" : "even" };
 
    foreach (var n in numbers)
    {
        Console.WriteLine("The number {0} is {1}.", n.Number, n.OddEven);
    }
}

This sample uses Range to generate a sequence of numbers from 100 to 149 that is used to find which numbers in that range are odd and even.

Collapse | Copy Code

The number 100 is even.
The number 101 is odd.
The number 102 is even.
The number 103 is odd.
The number 104 is even.
The number 105 is odd.
The number 106 is even.
...
The number 149 is odd.

Based on above example, you can achieve that in two ways (using Linq):

Collapse | Copy Code

 int fromNumber = 10;
 int toNumber = 30;
    //1. querable method
    var SumOfEvenNumbersInRange = (from n in Enumerable.Range(fromNumber, toNumber - fromNumber +1)
   where(n%2==0)
   select n).Sum();
    //2. Lambda expressions   
    int res = Enumerable.Range(fromNumber, toNumber - fromNumber +1).Where(n=>n%2==0).Sum();

In both cases result is the same: 220.

Disabling browser’s back functionality after logout

2014-12-05T05:38:00.000-08:00

Disabling browser’s back functionality after logout

I want to disable browser's back button after log out.

I have already set session["session-id"] to null on log out event.

But when I am pressing Back button of browser,it will redirect me to that secure page from which I've already log out.

Solution

-----------------------------------------------------------------------------------------------------------------------

When we request any page from server, browser maintains its cache in local system. When user press back button the cached page opened in front of user.

Its mean we have to disable the cache functionality for our session pages. So for this you have to insert this code into “Page_Load” event of the session page or to master page that is used for secure pages.

Response.Buffer= true;
Response.ExpiresAbsolute=DateTime.Now.AddDays(-1d);
Response.Expires =-1500;
Response.CacheControl = "no-cache";
if(Session["SessionId"] == null)
{
Response.Redirect ("WhereYouWantToGo.aspx");
}
}

This code just disable the cache for current page and save this page in buffer.

And buffer is maintained in memory so when user log
out the buffer will
destroy and no backup copy of that page available to view.

So its mean we successfully disable the back button.

Create/Read Advance PDF Report using iTextSharp in C# .NET: Part I

2014-12-05T05:26:00.002-08:00

Create/Read/Write Advance PDF Report using iTextSharp.DLL in Desktop, Mobile, Web Application

Introduction

Recently I was looking for an Advance Tool to create complex PDF Report in C#.Net and I found iTextSharp. The main problem is that lacks of Documentation. Yes, there are a few examples in C#, but that is not sufficient to the Beginners and the examples are in older version of iTextSharp, there are lots of change in the latest version. So, it will be difficult for beginners to convert older version to latest version. Besides, I think that if I write an Article on this, then it will help me also as a future reference as I'll describe each functionality of this library with example. Frankly speaking, in this Article, you find all the examples from Chapter 1 of the book iText in Action, Second Edition which is written for Java Developers. I'll explain all the examples of the rest Chapters in my next release of this Article. So if any one is interested in using this library, he/she will get a good kick start.

To know the history or any other details of iTextSharp, please go through the Official Website

Happy Codding :)

Simple Windows Service which sends auto Email alerts

2014-12-05T05:23:00.001-08:00

Simple Windows Service which sends auto Email alerts

--------------------------------------------------------------------------------------------------------------------------

Introduction

Download sourcecode

Hi,

This is Ravindra, Implemented a windows service in one of my project and like to place a

sample Windows service for the very Basic users of .Net.

First Create a table in Msaccess with Name 'Empdata'

1.Open Visual Studio.net > Select New Project

2.Select Windows Service and give Name as 'GoodDay' and Click Ok.

3.Right Click the Design and Select Properties and give the Name and ServiceName as

'GoodDay' and set AutoLog to 'True'

4.Drag and drop the OleDbConnection and Select its properties and change its name to

'conn' and provide the connection String(I provided the Database sample(Ms

Access)) along with this code.

5.Right Click the Design and select View Code and

Select Project > Add Reference > Select System.Web >Press Ok

6.Now add the following to your code

using System.Web.Mail;

using System.Data.OleDb;

7.Declare DateTime mdt=DateTime.Now;

8. In static void Main()

Edit the following Code

ServicesToRun = new System.ServiceProcess.ServiceBase[] { new GoodDay() };

9. Edit the following code in onstart()

DataSet ds = new DataSet();

protected override void OnStart(string[] args)

{

DateTime dt=DateTime.Now;

conn.Open();

OleDbDataAdapter da=new OleDbDataAdapter("select * from Empdata",conn);

da.Fill(ds);

if(dt.ToShortDateString()==mdt.ToShortDateString())

{

foreach(DataRow dr in ds.Tables[0].Rows)

{

mdt=DateTime.Now.AddDays(+1);

String mailtxt="";

MailMessage mm = new MailMessage();

mm.BodyFormat = MailFormat.Html;

mm.To = dr["emp_email"].ToString();

mm.From = "xyz@xyz.com";

mm.Subject="Good Day";

mailtxt = ""+"Hi "+dr["emp_name"].ToString()+"," + " ";

mailtxt=mailtxt+""+"Good Day." + " ";

mailtxt=mailtxt+""+"May today be filled with sunshine and smile, laughter and love." + " ";

mailtxt=mailtxt+"Cheers!" + " ";

mm.Body = mailtxt;

SmtpMail.SmtpServer="localhost";

SmtpMail.Send(mm);

}

}

}

10.Go to Design,right click and Select Add Installer ,you will notice two controls

 serviceProcessInstaller1,serviceInstaller1

11.Select serviceProcessInstaller1 and go to its properties and change the Account

 type to 'Local System'

12. Select serviceInstaller1 and go to its properties and change DisplayName and

 ServiceName to 'GoodDay' and make the StartType to 'Automatic'

13.Build the Solution(Cntrl+Shift+B)

14.Open the Visual Studio .Net Command Prompt and give the path of application
 for example C:\bin\Debug and then type InstallUtil GoodDay.exe
 to uninstall, InstallUtil /u GoodDay.exe



15. After Installation ,right click My Computer and
 Select 'Manage'
 and Select 'Service and Applications'
 and in that Select 'Services'
Select 'GoodDay' and start the Service.

Happy Codding
All the Best...................

How can i get value from three input text box at time in jquery

2014-12-05T05:19:00.000-08:00

How can i get value from three input text box at time in jquery

i want this three value at a time or in array form.How can i get?? here is html-

<input style='display:none' value='http://localhost/JSG/upload/Hydrangeas6.jpg'  class='imgstr' name='imgstr[]'type='text>
    <input style='display:none' value='http://localhost/JSG/upload/Jellyfish4.jpg'  class='imgstr' name='imgstr[]'type='text'>
    <input style='display:none' value='http://localhost/JSG/upload/Koala1.jpg'  class='imgstr' name='imgstr[]'type='text'>

You can use .map()

var images = $('.imgstr').map(function () {
    return this.value;
}).get();

Enjoy Coding :)

Refresh parent page after close popup page in asp c# ?

2014-12-05T05:15:00.000-08:00

refresh parent page after close popup page in asp c# ?

Hi all
how can i refresh parent web page after i close popup page
my popup page used to login
so i need to refresh parent page after i click login button

Use below code.

In popup window Cross Button Click, Do add the below code. Just Copy and past

onclick="javascript:window.opener.location.reload(true);self.close();"

Create new custom category attribute - Magento

2014-11-28T22:22:00.001-08:00

if you want to create custom textbox attribute use this code.

Step 1

equire_once('app/Mage.php');

Mage::app()->setCurrentStore(Mage::getModel('core/store')->load(Mage_Core_Model_App::ADMIN_STORE_ID));
$installer = new Mage_Sales_Model_Mysql4_Setup;
$attribute  = array(
    'group'         => 'General',
    'input'         => 'text',
    'type'          => 'varchar',
    'label'         => 'Brand value',
    'backend'       => '',
    'visible'       => true,
    'required'      => false,
    'visible_on_front' => true,
    'global'        => Mage_Catalog_Model_Resource_Eav_Attribute::SCOPE_GLOBAL,
);
$installer->addAttribute('catalog_category', 'brand_value', $attribute);
$installer->endSetup();

Step 2 paste this code in header.phml file and check category menu.

if you want to create custom selectbox for Yes/no attribute use this code
require_once('app/Mage.php');
Mage::app()->setCurrentStore(Mage::getModel('core/store')->load(Mage_Core_Model_App::ADMIN_STORE_ID));
$installer = new Mage_Sales_Model_Mysql4_Setup;
$attribute  = array(
    'group'                     => 'General',
        'input'                     => 'select',
        'type'                      => 'int',
        'label'                     => 'Is Mega Menu',
        'source'                    => 'eav/entity_attribute_source_boolean',
        'global'                    => Mage_Catalog_Model_Resource_Eav_Attribute::SCOPE_GLOBAL,
        'visible'                   => 1,
        'required'                  => 0,
        'visible_on_front'          => 0,
        'is_html_allowed_on_front'  => 0,
        'is_configurable'           => 0,
        'searchable'                => 0,
        'filterable'                => 0,
        'comparable'                => 0,
        'unique'                    => false,
        'user_defined'              => false,
        'default'           => '0',
        'is_user_defined'           => false,
        'used_in_product_listing'   => true
);
$installer->addAttribute('catalog_category', 'mega_menu', $attribute);
$installer->endSetup();

Generate Category Tree Recursively - Magento

2014-11-25T05:55:00.004-08:00

Output View

Step 1 Goto theme/layout/catalog.xml put this code in file

Step 2 Goto theme/template/catalog/ thane create navigation folder and put categorymenu.phtml file inside.

<?php
 $_helper = Mage::helper('catalog/category');
 $_categories = $_helper->getStoreCategories();
 $currentCategory = Mage::registry('current_category');
?>
<div class="block block-list block-categorys">
<div class="block-title">
 Category
</div>
 <div class="block-content">
<ul class="category_sub">
 <?php if (count($_categories) > 0){ ?>

<?php
 global $index;
 global $data;

 foreach($_categories as $_category){

 $check_child_class = check_child_par($_category->getId());
 $collaps = ($check_child_class)? "+" : "";
 echo "<li class='".$check_child_class."'>";
 echo "<a href='".$_helper->getCategoryUrl($_category)."'>".$_category->getName();
 echo " (".product_count($_category->getId()).")";
 echo "</a>".$collaps;
 echo check_child($_category->getId());
 echo "</li>";

 }
 }
 function check_child($cid){
 $_helper = Mage::helper('catalog/category');
 $_subcategory = Mage::getModel('catalog/category')->load($cid);
 $_subsubcategories = $_subcategory->getChildrenCategories();

 if (count($_subsubcategories) > 0){
 echo "<ul>";
 foreach($_subsubcategories as $_subcate){

 $check_child_class = check_child_par($_subcate->getId());
 $collaps = ($check_child_class)? "+" : "";

 echo "<li class='".$check_child_class."'>";
 echo "<a href='".$_helper->getCategoryUrl($_subcate)."'>".$_subcate->getName();
 echo " (".product_count($_subcate->getId()).")";
 echo "</a>".$collaps;
 echo check_child($_subcate->getId());
 echo "</li>";
 }
 echo "</ul>";
 }else{
 return "";
 }

Coffee Script

2014-06-24T02:23:00.000-07:00

Definition

Coffee Script is an attempt to expose the good parts of JavaScript in a simple way. The golden rule of Coffee Script is: "It's just JavaScript". The code compiles one-to-one into the equivalent JS, and there is no interpretation at runtime.

² Overview Of Coffee Script

l Coffee Script is a small language that compiles into JavaScript.

l Coffee Script does not have the semi-colons and curly braces, similar syntax to the likes js.

l This means you can write less code and do things faster. It also makes it easier to read and maintain.

v Variables

In js

var message;

message = "Ready for some Coffee?";

alert(message);

In Coffee script

message = "Ready for some Coffee?"

alert(message)

l No variable declarations

l No semicolons

v Function

coffee = ->

confirm "Ready for some Coffee?"

l Always has a return value

Return String

coffee = ->

answer = confirm "Ready for some Coffee?"

"Your answer is " + answer

v Function Parameters

coffee = (message) ->

answer = confirm message

"Your answer is #{answer}"

v Calling Functions

coffee = -> == coffee()

coffee = (message) -> == 1. coffee("Yo")

2. coffee "Yo"

parenthesis optional

coffee = (message, other) -> == 1. coffee("Yo", 2)

2. coffee "Yo", 2

If we want a default message

coffee = (message = "Ready for some Coffee?") ->

answer = confirm message

"Your answer is #{answer}"

v If Statement

In js

if (age < 18) {

alert('Under age');

}

In Coffee script

1. if age < 18 alert 'Under age'

2. alert 'Under age' if age < 18

3. if age < 18 then alert 'Under age'

v Operators

Coffee Script	JavaScript
== or is	===
!= or isnt	!==
not	!
and	&&
or	\|\|
true yes on	true
false no off	false

v Switch Statements

message = switch cupsOfCoffee

when 0 then 'Asleep'

when 1 then 'Eyes Open'

when 2 then 'Buzzed'

else 'Dangerous

v Arrays

Ranges

l In js

1. var range = [1, 2, 3, 4];

2. var range = [1, 2, 3];

l In Coffee script

1. range = [1..4] (Two Dots include end)

2. range = [1...4] (Three Dots excludes end)

v Objects

1. coffee = { name: 'French', strength: 1 }

l curly brackets optional

2. coffee = name: 'French', strength: 1

l commas optional

3. coffee =

name: 'French'

strength: 1

v Advantages

· Coffee Script has much nicer, more Ruby-like syntax than JavaScript.

· JavaScript does some very silly things, while Coffee Script has several safeguards to prevent unwanted behavior. (For example, if you forget to use the "var" keyword to define new variables in JavaScript, they will suddenly get global scope with no warnings! Coffee Script protects you from this behavior).

· Coffee Script should work nicely with jQuery

· Python style white spacing

· Ruby styled lightweight syntax

· Concise function declarations

· Class based inheritance

v Disadvantages

· Difficult to learn.

· Switch from JavaScript to coffee script not easy.

· Coffee script was designed in the vein of Python and Ruby, so if you hate those languages then you will probably hate coffee script.

· Its compile every time.

· You'll need a basic knowledge of JS for debugging purposes. You can't directly start here, naturally.

Reasons to use it:

· variable safety - no need to declare variable using var keyword like JS.

· loops and comprehensions : Comprehensions replace for loops in CoffeeScript, but they simply compile into the traditional javascript equivalent for-loop.There are other things you can do with compressions. For example, you won't always want to execute some code (like console.log) on each item.

console.log hero for hero, index in heroes when index % 2 == 0

· easy safe loops using has Own Property: for own x of obj

· string interpolation: "My name is #{name}". Coffee Script interpolates strings in similar fashion to ruby. Most expressions are valid inside the #{...} interpolation syntax.

· easy closures (do (x) -> ...)

· ranges: for i in [0..10] : Array range can be define as range = [1..4] (Two Dots include end) and range = [1..4] (Two Dots excludes end).

· range slicing: Easily slice data by using myArray[2..5] its return only data index starting from 2 to 5.

· existential operator: if x? then use(x), are?.you?.there?

Coffee Script's existential operator ? returns true unless a variable is null or undefined, which makes it analogous

· readable regular expressions

· De-structuring assignment: [a,b] = [x,y]

coffee> x = 1

= 1

coffee> y = 2

= 2

coffee> [x, y] = [y, x]

[ 2, 1 ]

coffee> x

coffee> y

In our assignment statement, we matched our value pattern to the structure of our value, swapping x and y.

· Number of lines of code has been shown to be one of the few good indicators for predicting defects. Coffee Script significantly reduces the number of lines of code in a project and therefore the number of defects.

· Coffee Script improvements: indenting two spaces and using -> plus no closing parents and curly braces makes nested callbacks much easier to read and write

· When discussing Coffee Script, you need to keep in mind that it is not a replacement for JavaScript. Coffee Script is a "JavaScript generator." Your browser doesn't need any new plug-ins or add-ons to utilize Coffee Script.

· This also means you can use all your favorite JavaScript libraries (jQuery, Knockout.js, Sammy.js and so on) with Coffee Script (and vice versa).

· With the proper use of white space you can make your script more readable as well as maintainable.

Why I Don't Use Coffee Script

· I have to learn another Ruby-like language.

· meta-programming become a poor experience.

· only a few resources available for this language.

Using UpdateProgress and Making Background Inactive

2014-06-19T02:28:00.000-07:00

Using the Code

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

.divWaiting{
   
position: absolute;
background-color: #FAFAFA;
z-index: 2147483647 !important;
opacity: 0.8;
overflow: hidden;
text-align: center; top: 0; left: 0;
height: 100%;
width: 100%;
padding-top:20%;
}

<asp:UpdateProgress ID="UpdateProgress1" DisplayAfter="10" 
runat="server" AssociatedUpdatePanelID="upTest">
<ProgressTemplate>
  <div class="divWaiting">            
 <asp:Label ID="lblWait" runat="server" 
 Text=" Please wait... " />
 <asp:Image ID="imgWait" runat="server" 
 ImageAlign="Middle" ImageUrl="~/Images/10.gif" />
  </div>
</ProgressTemplate>
</asp:UpdateProgress>

<asp:UpdatePanel ID="upTest" runat="server">
<ContentTemplate>
    <asp:Button ID="btnSubmit" OnClick="btnSubmit_Click" Text="Submit" runat="server" />
</ContentTemplate> 
</asp:UpdatePanel>

C# How to: Image filtering by directly manipulating Pixel ARGB values

2014-04-04T21:40:00.000-07:00

Article purpose

In this article we discover creating basic image filters implemented by directly manipulating the ARGB colour values associated with an image’s pixels. The different types of filters discussed are: Grayscale, Transparency, Image Negative and Sepia tone. All filters are implemented as extension methodstargeting the Image class, as well as the Bitmap class as the result of inheritance and upcasting.

ARGB Overview

ARGB is an abbreviation for the term: “Alpha, Red, Green and Blue”. ARGBrefers to four colour components represented by each pixel that forms part of an image. In C# 32 bit ARGB images are a fairly common occurrence, each pixel being of a fixed size, namely 32 bits or 4 bytes, which also equates to a standard integer. Each colour component consists of 8 bits or 1 byte, equating to a range of possible values starting at 0 inclusive and a maximum value of 255 inclusive. It can thus be logically deduced that each of the four ARGBcomponents can be expressed as a value ranging from 0 to 255 inclusive.

A pixel’s alpha component represents a level of transparency, 255 being no transparency and 0 being completely transparent. The combination of Red,Green and Blue values together represent a single colour, the colour associated with an individual pixel.

We can apply filtering on an image by manipulating the individual Alpha, Red,Green and Blue components of each pixel.

Extracting the ARGB components of each pixel in an image

In C# an Image’s ARGB components are actually stored in the format Blue,Green, Red, Alpha. Before attempting to extract each pixel’s individual components we need to ensure that our source image is in fact formatted as a 32Bit ARGB image. The source code snippet listed below converts source images into 32Bit ARGB formatted images:

private static Bitmap GetArgbCopy(Image sourceImage)
{
    Bitmap bmpNew = new Bitmap(sourceImage.Width, sourceImage.Height, PixelFormat.Format32bppArgb);

  
    using(Graphics graphics = Graphics.FromImage(bmpNew))
    {
        graphics.DrawImage(sourceImage, new Rectangle (0, 0, bmpNew.Width, bmpNew.Height), new  Rectangle (0, 0, bmpNew.Width, bmpNew.Height), GraphicsUnit.Pixel);
        graphics.Flush();
    }

  
    return bmpNew;
}

The GetArgbCopy method creates a blank memory Bitmap having the same size dimensions as the source image. The newly created Bitmap is explicitly specified to conform to a 32Bit ARGB format. By making use of a Graphicsobject of which the context is bound to the new Bitmap instance the source code draws the original image to the new Bitmap.

The Transparency Filter

The transparency filter is intended to create a copy of an image, increase the copy’s level of transparency and return the modified copy to the calling code. Listed below is source code which defines the CopyWithTransparencyextension method.

public static Bitmap CopyWithTransparency(this Image sourceImage, byte alphaComponent = 100)
{
    Bitmap bmpNew = GetArgbCopy(sourceImage);
    BitmapData bmpData = bmpNew.LockBits(new Rectangle(0, 0, sourceImage.Width, sourceImage.Height), ImageLockMode.ReadOnly, PixelFormat.Format32bppArgb);

  
    IntPtr ptr = bmpData.Scan0;

  
    byte[] byteBuffer = new byte[bmpData.Stride * bmpNew.Height];

  
    Marshal.Copy(ptr, byteBuffer, 0, byteBuffer.Length);

  
    for (int k = 3; k < byteBuffer.Length; k += 4)
    {
        byteBuffer[k] = alphaComponent;
    }

  
    Marshal.Copy(byteBuffer, 0, ptr, byteBuffer.Length);

  
    bmpNew.UnlockBits(bmpData);

  
    bmpData = null;
    byteBuffer = null;

  
    return bmpNew;
}

As discussed earlier, the CopyWithTransparency method creates a 32BitARGB formatted copy of the specified source image by invoking the methodGetArgbCopy. In order to extract the image pixel data we implement theBitmapData class and the LockBits method defined by the Bitmap class. Next we create an IntPtr which references the very first pixel. BitmapData.Scan0points to the memory address of the first pixel. Next the source code instantiates a byte array which will used to represent pixel components.

The Marshal.Copy method copies bytes from memory, starting at the address of the first pixel continuing up until the last pixel. The alpha component can be specified by the calling code, or if not specified defaults to a value of 100 due to being a optional method parameter.

How much transparency results from an alpha component of 100? If the maximum value is set at 255 representing no transparency 100 expressed as a percentage of 255 equates to roughly 39.2%. Defining an alpha value of 100 will thus result in an image being roughly 60% transparent.

Notice how the for loop only affects every fourth array element, beginning at index 3. Each element in the byte array represents a pixel colour component, either Alpha, Red, Green or Blue. Remember as mentioned earlier, the components are in fact stored in the format Blue, Green, Red, Alpha. Every four array elements together represents one pixel. We only want to change the value of Alpha components, thus we start at the first pixel’s Alphacomponent at index 3 and then continue to iterate through the byte array, incrementing the index by four with each loop.

After having updated every pixel’s Alpha component the modified byte array is copied back into the actual image object and returned to the calling code.

Transparency Filter

The Grayscale Filter

The grayscale filter operates in a fashion similar to the transparency filter discussed in the previous section. The following details the source code implementation of the CopyAsGrayScale extension method.

public static Bitmap CopyAsGrayscale(this Image sourceImage)
{
    Bitmap bmpNew = GetArgbCopy(sourceImage);
    BitmapData bmpData = bmpNew.LockBits(new Rectangle(0, 0, sourceImage.Width, sourceImage.Height), ImageLockMode.ReadOnly, PixelFormat.Format32bppArgb);

  
    IntPtr ptr = bmpData.Scan0;

  
    byte[] byteBuffer = new byte[bmpData.Stride * bmpNew.Height];

  
    Marshal.Copy(ptr, byteBuffer, 0, byteBuffer.Length);

  
    float rgb = 0;

  
    for (int k = 0; k < byteBuffer.Length; k += 4)
    {
        rgb = byteBuffer[k] * 0.11f;
        rgb += byteBuffer[k+1] * 0.59f;
        rgb += byteBuffer[k+2] * 0.3f;

  
        byteBuffer[k] = (byte)rgb;
        byteBuffer[k + 1] = byteBuffer[k];
        byteBuffer[k + 2] = byteBuffer[k];

  
        byteBuffer[k + 3] = 255;
    }

  
    Marshal.Copy(byteBuffer, 0, ptr, byteBuffer.Length);

  
    bmpNew.UnlockBits(bmpData);

  
    bmpData = null;
    byteBuffer = null;

  
    return bmpNew;
}

Notice how this filter starts iterating the pixel components at index 0. The source code assigns a weight to each colour component. The grayscale filter is achieved by adding together 11% Blue, 59% Green and 30% Red, then assigning the total value to each colour component. Transparency is set to 255, effectively disabling any level of transparency.

Grayscale Filter

The Sepia Tone Filter

The sepia tone filter is implemented in the extension methodCopyAsSepiaTone. Notice how this method follows the same convention as the previously discussed filters. The source code listing is detailed below.

public static Bitmap CopyAsSepiaTone(this Image sourceImage)
{
    Bitmap bmpNew = GetArgbCopy(sourceImage);
    BitmapData bmpData = bmpNew.LockBits(new Rectangle(0, 0, sourceImage.Width, sourceImage.Height), ImageLockMode.ReadOnly, PixelFormat.Format32bppArgb);

  
    IntPtr ptr = bmpData.Scan0;

  
    byte[] byteBuffer = new byte[bmpData.Stride * bmpNew.Height];

  
    Marshal.Copy(ptr, byteBuffer, 0, byteBuffer.Length);

  
    byte maxValue = 255;
    float r = 0;
    float g = 0;
    float b = 0;

  
    for (int k = 0; k < byteBuffer.Length; k += 4)
    {
        r = byteBuffer[k] * 0.189f + byteBuffer[k + 1] * 0.769f + byteBuffer[k + 2] * 0.393f;
        g = byteBuffer[k] * 0.168f + byteBuffer[k + 1] * 0.686f + byteBuffer[k + 2] * 0.349f;
        b = byteBuffer[k] * 0.131f + byteBuffer[k + 1] * 0.534f + byteBuffer[k + 2] * 0.272f;

  
        byteBuffer[k+2] = (r > maxValue ? maxValue : (byte)r);
        byteBuffer[k + 1] = (g > maxValue ? maxValue : (byte)g);
        byteBuffer[k] = (b > maxValue ? maxValue : (byte)b);
    }

  
    Marshal.Copy(byteBuffer, 0, ptr, byteBuffer.Length);

  
    bmpNew.UnlockBits(bmpData);

  
    bmpData = null;
    byteBuffer = null;

  
    return bmpNew;
}

The formula used to calculate a sepia tone differs significantly from thegrayscale filter discussed previously. The formula can be simplified as follows:

Red Component: Sum total of: 18.9% blue, 76.9% green, 39.3% red
Green Component: Sum total of: 16.8% blue, 68.6% green, 34.9% red
Blue Component: Sum total of: 13.1% blue, 53.4% green, 27.2% red

If any of the totalled values exceeds the value of 255 that value is then defined as 255.

Sepia Tone Filter

The Negative Image Filter

Non digital film based cameras produce what is referred to as negatives, which have to be developed into printed photographs using various chemical processes. (I shudder at the thought of labelling 35mm film cameras as “old school” or vintage. I’m old enough to remember a time when film cameras were the norm yet young enough to never have used a rotary phone.)

We can implement an image filter that resembles film negatives by literally inverting every pixel’s colour components. It is fairly simple to invert colour data by implementing the bitwise compliment operator ~, the result being each bit will be reversed. Note: Only colour components are inverted, the Alphacomponent remains unchanged. Listed below is the source code implementation of the CopyAsNegative extension method.

public static Bitmap CopyAsNegative(this Image sourceImage)
{
    Bitmap bmpNew = GetArgbCopy(sourceImage);
    BitmapData bmpData = bmpNew.LockBits(new Rectangle(0, 0, sourceImage.Width, sourceImage.Height), ImageLockMode.ReadOnly, PixelFormat.Format32bppArgb);

 
    IntPtr ptr = bmpData.Scan0;

 
    byte[] byteBuffer = new byte[bmpData.Stride * bmpNew.Height];

 
    Marshal.Copy(ptr, byteBuffer, 0, byteBuffer.Length);
    byte[] pixelBuffer = null;

 
    int pixel = 0;

 
    for (int k = 0; k < byteBuffer.Length; k += 4)
    {
        pixel = ~BitConverter.ToInt32(byteBuffer, k);
        pixelBuffer = BitConverter.GetBytes(pixel);

 
        byteBuffer[k] = pixelBuffer[0];
        byteBuffer[k + 1] = pixelBuffer[1];
        byteBuffer[k + 2] = pixelBuffer[2];
    }

 
    Marshal.Copy(byteBuffer, 0, ptr, byteBuffer.Length);

 
    bmpNew.UnlockBits(bmpData);

 
    bmpData = null;
    byteBuffer = null;

 
    return bmpNew;
}

The negative filter formula extracts the four ARGB components storing the result as an integer value which represents a pixel. All of the pixel’s bits are reversed using the bitwise compliment operator. The resulting integer value is converted back into the four pixel components and assigned to replace the pixel’s original values, all except the alpha component.

Negative Filter

The implementation

The image filters described in this article are all implemented by means of aWindows Forms application. Image filtering is applied by selecting the corresponding radio button. The source image loaded from the file system serves as input to the various image filter methods, the filtered image copy returned will be displayed next to the original source image.

private void OnCheckChangedEventHandler(object sender, EventArgs e)
{
    if (picSource.BackgroundImage != null)
    {
        if (rdGrayscale.Checked == true)
        {
            picOutput.BackgroundImage = picSource.BackgroundImage.CopyAsGrayscale();
        }
        else if (rdTransparency.Checked == true)
        {
            picOutput.BackgroundImage = picSource.BackgroundImage.CopyWithTransparency();
        }
        else if (rdNegative.Checked == true)
        {
            picOutput.BackgroundImage = picSource.BackgroundImage.CopyAsNegative();
        }
        else if (rdSepia.Checked == true)
        {
            picOutput.BackgroundImage = picSource.BackgroundImage.CopyAsSepiaTone();
        }
    }
}

Update progress in center of screen

2013-02-04T03:38:00.000-08:00

Update proggress bar For Iphone Click Here

Download the code sample

At the moment I'm working on making a web application we just developed more user friendly and more appealing to the end users.

The application uses a few ASP.NET Ajax controls so I was pretty surprised when the customer sent me an email saying that he liked all the dynamic loading and the fact that he could reorder "things" using drag&drop and saving them without waiting the page to reload, but it took him a while to understand was going on. The first time he clicked the button, and since nothing happened, he thought that something was going wrong, so he kept clicking on the button, an yet nothing happening.

The problem was that since all the Ajax interactions happen behind the scenes asynchronously, the user doesn't understand what's going on: sometimes the user doesn't need to know what's going on (like when you are just reloading some data), but when he presses a button he needs to know that he did the right thing and that something is happening. With the "old style" ASP.NET a postback would have been initiated, so it was obvious that something was happening, but how to do it using Ajax?

That is pretty easy to accomplish with ASP.NET: just drop in anUpdateProgress control and it will be displayed when an Ajax postback happens.

But, as default behavior, the UpdateProgress is displayed in the position where it is added to the page, so, if your page is longer than a scroll page, the indicator could not be visible: it has to be positioned relative to the browser window and not relative the html document.
At first I looked at how to hook into the script that displays the div in order to change the position via script, but while chatting with Daniela (which is an UIX and web designer) she said: "Why don't you just use the fixed positioning CSS attribute?"

And she was right, much easier than hooking into ASP.NET Ajax scripts. I definitely need to improve my CSS knowledge .

Step 1 - Add an UpdateProgress control to the page

First thing you have to add an UpdateProgress to your ASP.NET page.

<asp:UpdateProgress ID="UpdateProgress1" runat="server"
                     DynamicLayout="false">
    <ProgressTemplate>
        <img src="Images/ajax-loader.gif" /> Loading ...
    </ProgressTemplate>
</asp:UpdateProgress>

You can put this code anywhere inside the page, but I suggest you put it at the end. I didn't specify any AssociatedUpdatePanelID because I want the loading indicator to appear for all the UpdatePanel I have on the page: if you want it only for some of them you have to set it.

Step 2 - Add CSS

 #UpdateProgress1 {
   background-color:#CF4342;
   color:#fff;
   top:0px;
   right:0px;
   position:fixed;
 }

#UpdateProgress1 img {
   vertical-align:middle;
   margin:2px;
 }

The trick is to set the position attribute to fixed: it will make the top and right dimensions relative to the browser window and not to its original position (as with relative) or to containing element (as with absolute).
This CSS will put the indicator on the top right corner of the window, as the Gmail indicator.

Step 3 - Add an activity indicator image

But we can do it even better then gmail, we could add a nice animated activity indicator. Last yearScottGu recommended a few websites to download some indicators from, and I really likedwww.ajaxload.info. This site dynamically generate an activity indicator for you, with the type and colors you prefer.

This is the animated gif I created to fit nicely into my UpdateProgress control:

And this is how the final Gmail-like loading indicator looks like:

Loading ...

Download the code sample

AJAX ModalPopup

2013-02-04T03:36:00.003-08:00

Using the ASP.NET AJAX ModalPopup in an ASP.NET 3.5 application

When developing an ASP.NET application, one important aspect that is difficult to code against is stopping users clicking controls on a page when they have already submitted a request. There are several ways to do this, the most common being a JavaScript function to disable control elements after an event has been raised. Thankfully this task is a lot easier thanks to the Ajax Control Toolkit and the ModalPopup control. The Ajax Control Toolkit is a separate download that is built on top of the Microsoft ASP.NET Ajax framework. The toolkit allows you to create extenders and controls to enhance the current ASP.NET server controls.

The toolkit can be downloaded from http://tinyurl.com/ajax-toolkit. Information on how to install the toolkit can be found at http://tinyurl.com/toolkit-info.

Let’s write some code. Open Visual Studio 2008 and choose File > New > Web > ASP.NET Web Application. Because the ModalPopup uses cascading style, I’m adding an ASP.NET Theme folder to the project. Right click the project and choose Add > Add ASP.NET Folder > Theme. Name the theme ‘Modal’. Under the theme add a new cascading style sheet. Your project should look like the following:

Open the Styles.css file and add the following code:

.modalBackground

{

background-color: Yellow;

filter: alpha(opacity=60);

opacity: 0.6;

}

.modalPopup

{

background-color:#ffffdd;

border-width:3px;

border-style:solid;

border-color:Gray;

padding:5px;

width: 350px;

height:300px;

}

The classes above will be used to style the ModalPopup control. For the theme to be available to the project, you need to update the web.config file with the following code:

This instructs the website to use the Modal theme throughout the website. This is a simple way to centrally manage styles in a website.

The next step is to add a reference to the Microsoft Ajax Control Toolkit. To do this right click on the Toolbox and select Choose Items. The following dialog box will appear:

Browse to where you have installed the Microsoft Ajax Control Toolkit and click OK. This will add the Microsoft Ajax Control Toolkit to the Toolbox.

Open the Default.aspx page. Add the following code to the page:

<asp:ScriptManager ID="ScriptManager1" runat="server" />

Are you sure you want to know the answer?.

<asp:Button ID="btnYes" runat="server" Text="Yes!" />

<asp:Panel ID="pnlModal" runat="server" CssClass="modalPopup">

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque

laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi

architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas

sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione

voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor

sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt

ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam,

quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid

ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate

velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo

voluptas nulla pariatur?

<asp:Button ID="btnClose" runat="server" Text="Close" />

</asp:Panel>

For any of the toolkit controls to work, the page must contain a ScriptManager control. TheScriptManager manages client scripts for ASP.NET Ajax pages. Switch to the design view for the page. By hovering your mouse over the Panel control, you’ll see the smart tag appear. Click the smart tag and choose Add Extender:

A new dialog will appear with the list of extenders that are available in the toolkit. Select ModalPopup Extender:

This will add the following code to the Panel control:

<asp:ModalPopupExtender TargetControlID="btnYes" ID="pnlModal_ModalPopupExtender"

runat="server" DynamicServicePath="" Enabled="True"BackgroundCssClass="modalBackground"

PopupControlID="pnlModal" CancelControlID="btnClose" DropShadow="true">

</asp:ModalPopupExtender>

The properties that must be configured are:

· PopupControlID – The ID of the control that will be displayed as modal popup

· TargetControlID – The ID of the control that activates the modal popup

· CancelControlID – The ID of the control that cancels the modal popup

· BackgroundCssClass - The CSS class to apply to the background when the modal popup is displayed

The code is almost complete. The last thing you need to do is ensure the Panel control that is being used as the modal popup is hidden until the user clicks the Yes! button. Update the Panel control with the following code:

<asp:Panel ID="pnlModal" runat="server" CssClass="modalPopup" Style="display: none;">

The hard work is done. Run the website and when you click on the button to answer the question, a modal popup will appear, disabling the controls in the background.

The ModalPopup is a great way to stop users clicking on controls when you don’t want them to. It provides greater control, which in turn will lead to increased accuracy and integrity of the data captured. The source code of this article can be downloaded from here. To see how to use the ModalPopup in a Master-Detail GridView scenario, take a look at this article by Suprotim Display Master-Detail Data with the ModalPopup Extender and GridView

Query Metadata Using JavaScript

2013-01-31T02:58:00.000-08:00

New Technical Article: Query Metadata Using JavaScript

If you work with JavaScript in Microsoft Dynamics CRM and need to query the metadata, please take a few minutes to look at the new technical article I just published: Query Metadata Using JavaScript.

For a while now, the SDK has had sample libraries for retrieving metadata. The SDK.Metadata.js library included in the Sample: Retrieve Entity Metadata Using JavaScript topic includes functions that use RetrieveAllEntitiesRequest, RetrieveEntityRequest, and RetrieveAttributeRequest.

The new library is different because:

You can use the new classes in the Microsoft.Xrm.Sdk.Metadata.Query namespace to more efficiently retrieve just the metadata you need and to detect changes to the metadata. Details about these classes are found in the SDK topic: Retrieve and Detect Changes to Metadata.
It uses object oriented programming techniques to provide a development experience using JavaScript that is similar to the experience you have with managed code.

As a programmer/writer for the CRM SDK team, I write content and sample code for a variety of areas including form scripting, web resources, and metadata APIs. In my free time I’ve made a number of tools that access the metadata using JavaScript. The new Metadata Browser and the Form Query String Parameter tool are two recent examples. But the old metadata APIs are not optimized for performance. You often get more data than you really need and performance is affected. So I was really excited about the new classes in the Microsoft.Xrm.Sdk.Metadata.Query namespace because they implement something similar to the QueryExpression classes that you can use to define queries for CRM data.

However, with this flexibility came a new challenge. The old metadata APIs have simple parameters like entity name, attribute name and one enumeration value. It is relatively straight forward to convert these into a simple JavaScript function using the pattern described in Walkthrough: Use the SOAP Endpoint for Web Resources with JavaScript.

The new metadata API requires a complex object defined in XML. To get this I had to implement a whole set of JavaScript “classes” that map to the managed code classes. Each of the classes that define a query has a _toXml method that is used to generate the XML that is sent with the request. I spent a lot of time using the SOAPLogger tool in the SDK to observe the XML sent through using managed code so I could reverse engineer the patterns to get the same XML using JavaScript.

The thing about classes in JavaScript is that there are different ways to write them. Many people useScript#. Recently, TypeScript became available. The way that I came up with is an amalgamation of a number of different patterns I found on the Internet, but I wrote them by hand without any supporting tools like TypeScript or Script#. This is probably because I actually enjoy writing JavaScript. I know many of you do not. If TypeScript had been available when I started this project, I might have used that. If you want to follow this pattern and don’t like JavaScript as much as I do, you might want to try TypeScript or Script#.

Now that I have this library done, I’ve already created another one that provides the same experience for QueryExpression with CRM data. I’m still testing it, and I’ll publish an article when it’s ready. But please don’t think that this is what I spend my workday doing. I have a backlog of content and samples to create to support current and upcoming features. I have no time to spend on these kinds of projects during the work week. I do all these projects on my weekends. If you enjoy using this library, thank my wife for her patience.

I’m not releasing this library in the SDK. This library is much more than a sample for using a CRM API. Although I tested it myself and sent it out to others to review, it hasn’t gone through a full set of tests for all the types of queries that you might make with it. I’m confident that it will work for you, but including it in the SDK would require that our technical support team provide some level of support for it. Our technical support team supports the SOAP Endpoint for web resources which this library uses, but I am the support provider for this library. If you have problems with it, contact me using the Send comments about this topic to Microsoft link at the bottom of the Query Metadata Using JavaScript article. But I hope the complete reference documentation provided in the technical article should answer most of your questions.

The Microsoft Dynamics CRM

2013-01-31T02:56:00.000-08:00

Customer relationship management (CRM) can help reduce costs and increase profitability by organizing and automating business processes that nurture customer satisfaction and loyalty.

CRM delivers a holistic view of each customer that enables client-facing employees to make expedited and educated decisions about strategic efforts in the sales, marketing, and customer service fields.

10 things I love about Dynamics CRM 2011 “December 2012 Service Update” or “Polaris Update”

1. The Flow User Experience Forms (UUX forms) - These are the new “process flow” forms with the process bar up the top of each form. The Process Bar is a new, simple, guided and intuitive way for users to work through their company’s
business process. Each step clearly outlines the current stage of the process and makes suggestions on information to be collected and recommends specific activities. It is a more process-centric, outcome-oriented and guided experience. I also love the clean Modern look of these UUX Forms!

2. Easily Edit the Process Bar. The Process bar can be easily edited to meet your business process. No coding required. Just select the “Edit Sales Process” from the menu option

Then you can build your own process using the “Process Control Customization Tool” where you can edit/add your “Stages”, “Steps”, and "Fields"

3. Posts-Activities-Notes all in one place. Tab between Posts, Activities and Notes right within the new Flow User Experience (UUX) forms.

4. Phone Call Activities are auto-created. When you click on a phone number or Skype Name, the system auto-creates a Phone activity and places the cursor on the Activity. Woo hoo! You don’t have to
manually create a Phone Activity anymore. It also has a “left voice mail” check box. These simple features allow for, “quick productivity gains."

5. Skype-to-Skype calling. Trigger a Skype-to-Skype Call, if the phone number field has a Skype handle. The phone number/Skype Name will be hyperlinked and clickable.

6. Auto Save. An User no longer has to click “Save” when they enter their data into an UUX form. The system auto-saves as you type away. Then when you close the form, it saves automatically. Yippee! No more
paranoia about saving my work.

7. Bing Maps- Bing Maps are available on the Lead, Account & Contact forms. You can see exactly where on the map for directions. No more ALT TABBING! the customer is located without ever leaving Dynamics CRM. You can click on the map for directions. No more ALT TABBING!

8. Cross Browser Support on Windows Devices: You can access Dynamics CRM Online org via Firefox, Chrome as well as Safari on McIntosh Desktops. Below is a list of browsers that are supported.

9. Opt-In- Existing customers can Opt-In to the new Update experience. This is not an auto-update. You can Opt In by going to Settings>Administration> Product Updates> Update.

10. Switching to Classic View: a user can switch to “Classic mode” from a menu option at the top of the form.

CMS

2012-07-28T02:07:00.000-07:00

CMS Website Design (Content Management System)

So what is a CMS web site?

CMS or a 'Content Management System' quite literally allows you to control and manage the content within your web site - without technical training. Using this uncomplicated system you can very easily add, delete images and edit text in your web site on the fly. You can also have an unlimited number of pages and a full site-search engine. What's more... with 'Navega Bem - Web Design' you can have a highly professional CMS web site at a very reasonable price indeed!

If you are already familiar with 'Content Management Systems' then click here to see the advantages of our Joomla! or Drupal CMS solutions.

Users with no programming or HTML experience?

Simply put, if you have just a little experience with Microsoft Word then you will be able to manage the content of your own web site very easily indeed. You need have no programming or HTML experience. Editing can be done with any normal web browser from anywhere in the world - or with your iPhone :)

See our 1 minute CMS Demo movie

Most people new to the world of CMS websites cannot imagine how they could ever manage their site themselves. So, see ourJoomla demo movie which shows how you can update your website and publish it - all in just 1 minute!

Why should you opt for CMS?

Many companies find it difficult to keep their web site content as up to date as they would like. Often there are delays getting new content online, the site stagnates and your clients get to see outdated information. That’s why so many companies are turning to CMS. Meet Vanessa and Bertha for an enlightening example.

A CMS web presence allows you to manage your web site even if you have no technical knowledge, experience with HTML or web site design. It also reduces the calls to your web design agency or IT department for changes to the web site. CMS reduces the time required to publish, allowing you to get your content on-line faster. This is a very important issue for any professional web site.

Why use 'Navega Bem' to develop your CMS website?

You have read some really amazing things about CMS on this page. Having a web site that you can manage yourself is the perfect solution for most companies.
However, you need a professional company to design and develop your site. Navega Bem are professional Joomla developers. Our sites are featured in many online design portfolios. Our sites don't only look good - we market them so that they perform well and bring you traffic and business.

It's no coincidence that we are chosen to develop websites by companies from Dubai to New York to California to Hong Kong to London to Lisbon to Naples to Hamburg to... need we say more?

In the field of web design you really do get what you pay for. Let's face it - it doesn't matter how little you paid for your website or how attractive it is. If it can't rapidly be found in the search engines then it is losing money for you every single day. Now that is a very expensive website!

Once 'Navega Bem - Web Design' has developed your CMS site, it belongs to you. There are no monthly fees - no license fees - no maintenance fees - you are not tied to us in any way. You login to your own website to control your own content. You have complete independence and total control! If you should require any support, then of course we are there for you.

How To Write Your First Google Android Application

2012-07-21T04:07:00.000-07:00

Step 1: Get Eclipse

For this tutorial, I’m going to use Eclipse, because frankly it’s the easiest and most hassle-free development tool for Android right now. If you’re a NetBeans programmer, be my guest; but I’ll use Eclipse today.

Download Eclipse IDE for Java Developers (PC or Mac, 92MB)

Note: This is a .zip file; when you unzip it you will be able to run it wherever you unpacked it – there is no installer. I’d recommend that you put this in “C:\Program Files\” unless you plan on making it a portable application on a USB drive or something.

Step 2: Download The Java JDK

If you don’t have it already, you need to download the Java JDK 6. If you currently have the JDK 5, you should be okay, but there’s really no reason not to update. Just install it by downloading and then running through the setup to get things going. I’d recommend that you just hit next–>next–>finish, rather than doing anything fancy. Once you get things working, you can mess around a bit.

Step 3: Download The Android SDK Tools

Next, you’ll need to get the Android SDK Tools straight from Google. Unpack and install this to a directory you’ll remember – you need to reference this in the next few steps.

Step 4: Configure Eclipse For Your Android

Start Eclipse, and head to ‘Help>Install New Software‘. Hit “Add…” and for the name, type “Android” and set the link to “https://dl-ssl.google.com/android/eclipse/” (if this doesn’t work, try it with http:// instead of https://).Click “OK” and the following should appear.

Select both of the resulting packages, and hit next – this will download the Android ADT(Android Development Tools). Go ahead and start the download to obtain these two packages. Restart Eclipse (it should prompt you to on completion of the downloads). We’re almost ready to start coding.

Step 5: Configure The Android SDK

Navigate to the folder you downloaded/unpacked the Android SDK to. In there, you’ll find a file named “SDK Setup.exe.” Start that file – the following dialogue should appear.

Don’t feel obligated to download every single thing. Could it hurt? Not really. For me, however, I only really want to program for Android 2.1 and 2.01, so those are the only API packages I bothered to get (someday I may pay for my folly, but not today). Either way, get what you want (and you do need to pick one) and hit install. The SDK manager will install it for a little while – go grab a snack.

Step 6: Set Up Your Android Virtual Device (AVD)

Now that you’ve finished yet another painful download, click over to “virtual devices” (still in the SDK Manager). We’re going to create an Android device that will test run your programs for you! Hit “New” to create a new Android device, and put in the specifications that you want it to have. In the screenshot below, you’ll see the options I wanted (that closely mimic that of my Motorola Droid).

Click “Create AVD” to–well–create your AVD. Select your AVD from the list, and hit “Start” to make sure that you do indeed have a working emulation of an Android phone. After a pretty lengthy start-up wait, it should look something like this.

Fool around with it and explore for a bit if you want, then close it up so we can get back to work.

Step 7: Configure Eclipse Again

Remember that Android SDK we got earlier? We didn’t do anything with it. Now, it’s time to tell Eclipse where it is so Eclipse can use it as a resource. To do this, open Eclipse and navigate to Window>Preferences (or on Mac, Eclipse>Preferences) and select the Android tab. As shown below, browse to the location of your Android SDK and hit “Apply“.

Everything check out so far? Hit “OK” to save everything and let’s go program.

Step 8: Create A New Project

It’s finally time to code some. Navigate to ‘File>New>Other…>Android>Android Project‘, and input a project name, as well as some other details. If you want, copy from my screenshot below. Some of the fields need explaining that simply doesn’t belong here, so if you want to know more specifically, please let me know and maybe I’ll write an article about it.

Hit “Finish” and the project will be created.

Step 9: Input Your Code

In the tree on the left, navigate to the “src” folder and expand everything. Go to the file with the name of your “Activity” (created in step 8, mine was HelloWorld) and double click it to see the contents. Presently, your code has all of the content in black (with some minor modifications depending on your settings). To make a working “Hello world” program, you need to add the text that is in bold red. Note that there are two bold red “blocks” of code, and you need to add both to make things work.

//==========Start Code============

package com.android.helloandroid;

import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;

public class HelloAndroid extends Activity {
   /** Called when the activity is first created. */
   @Override
   public void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       TextView tv = new TextView(this);
       tv.setText("Hello, Android");
       setContentView(tv);
   }
}

//==========End Code============

I would love to explain all of the code, but that’s not exactly the point of this tutorial; the point is to get your feet off the ground. I know some/most of this is confusing; but it’s just how things are wired.

Step 10: Run Your Program

Above your code, you’ll see a little green “Play” button (or navigate to ‘Run>Run‘). Click it.When a popup box asks you how to run the application, you’re going to tell it to run as an “Android Application”. It will prompt you to save changes; hit yes.

Now you get to wait an eternity while your virtual device boots up. I’d recommend that you leave it open for the duration of your programming sprees, otherwise you’re going to spend more time watching the Android logo spin than you will watching your program freeze up. Just saying. Efficiency.

After everything’s done loading, your application should upload and start automatically. Which means that right after you “unlock” the device, you’ll be greeted with your first Android program.I only captured the top half of the screen because the rest of it is black.

That’s it, congratulations! The task can be a bit daunting at first; and definitely confusing, but if you stick with it you won’t be disappointed. If you step back and think about it, we only did a few really major things, the rest was just the process of connecting the pieces to make everything work.

Do you want to become an Android developer? Have you ever written an Android app, and if so, what did it do? As always I love getting feedback in the comments section. As someone who answered yes to the first question, I’m in the process of learning to adequately code for my Android device, so do you have any websites or pointers that would help me or a fellow Android newbie out?

Marquee Codes

2012-07-21T03:03:00.000-07:00

Slide-In Text

Top to Bottom

To make your text slide in from the top, use behavior="slide" direction="down". Like this:

Source Code	Result
	Here is some slide-in text... coming from the top.

Bottom to Top

To make your text slide in from the bottom, use behavior="slide" direction="up". Like this:

Source Code	Result
	Here is some slide-in text... coming from the bottom.

Right to Left

To make your text slide in from the right, use behavior="slide" direction="left". Like this:

Source Code	Result
	Here is some slide-in text... coming from the right.

Left to Right

To make your text slide in from the left, use behavior="slide" direction="right". Like this:

Source Code	Result
	Here is some slide-in text... coming from the left.

Changing the Speed

You can speed up your slide-in text - or slow it down if you prefer. To do this, just add the scrollamount attribute. For example, scrollamount="1" results in a very slow slide, while scrollamount="50" will make the text zoom-in - perhaps too fast for most people to notice it zooming in.

Some examples:

Source Code	Result
	Here is some slide-in text... coming in nice and slowly!Here is some slide-in text... coming in nice and slowly!Here is some slide-in text... coming in nice and slowly!Here is some slide-in text... coming in nice and slowly!Here is some slide-in text... coming in nice and slowly!

Usability of Marquees

You should be careful when using marquees in HTML. Many web users dislike websites that contain scrolling text and other elements, so try to use them tastefully :)

Marquee Codes

2012-07-21T03:00:00.000-07:00

Scrolling Text

Right to Left

To make your text scroll left (i.e. from right to left), use behavior="scroll" and direction="left". Like this:

Source Code	Result
	Here is some scrolling text... right to left!

Left to Right

To make your text scroll right (i.e. from left to right), use behavior="scroll" and direction="right". Like this:

Source Code	Result
	Here is some scrolling text... left to right!

Scroll Up

To make your text scroll up (i.e. from bottom to top), use behavior="scroll" and direction="up". Like this:

Source Code	Result
	Here is some scrolling text... going up!

Scroll Down

To make your text scroll down (i.e. from top to bottom), use behavior="scroll" and direction="down". Like this:

Source Code	Result
	Here is some scrolling text... going down!

Speed

You can change the scrolling speed of your marquee. For example, scrollamount="1" sets the marquee to a very slow scroll, while scrollamount="20" will make it faster. You can use whatever number you like though. Like this:

Source Code	Result
	Very slow...Faster...Fast...Lightning!

Usability of Marquees

You should be careful when using marquees in HTML. Many web users dislike websites that contain scrolling text and other elements, so try to use them tastefully :)

Also note that the <marquee> tag is not part of the official HTML specification. Having said that, it is recognized by most major browsers.

Android ?

2012-07-17T22:04:00.001-07:00

1. What is Android?

1.1. Android Operation System

Android is an operating system based on Linux with a Java programming interface.
The Android Software Development Kit (Android SDK) provides all necessary tools to develop Android applications. This includes a compiler, debugger and a device emulator, as well as its own virtual machine to run Android programs.
Android is currently primarily developed by Google.
Android allows background processing, provides a rich user interface library, supports 2-D and 3-D graphics using the OpenGL libraries, access to the file system and provides an embedded SQLite database.
Android applications consist of different components and can re-use components of other applications. This leads to the concept of a task in Android; an application can re-use other Android components to archive a task.
For example you can write an application which use the Android Gallery application to pick a photo.

1.2. Google Play (Android Market)

Google offers the Google Play service in which programmers can offer their Android application to Android users. Google phones include the Google Play application which allows to install applications.
Google Play also offers an update service, e.g. if a programmer uploads a new version of his application to Google Play, this service will notify existing users that an update is available and allow to install it.
Google Play used to be called Android Market.

1.3. Security and permissions

During deployment on an Android device, the Android system will create a unique user and group ID for every Android application. Each application file is private to this generated user, e.g. other applications cannot access these files.
In addition each Android application will be started in its own process.
Therefore by means of the underlying Linux operating system, every Android application is isolated from other running applications.
If data should be shared, the application must do this explicitly, e.g. via a Service or a ContentProvider.
Android also contains a permission system. Android predefines permissions for certain tasks but every application can define additional permissions.
An Android application declare its required permissions in its AndroidManifest.xml configuration file.For example an application may declare that it requires Internet
Permissions have different levels. Some permissions are automatically granted by the Android system, some are automatically rejected.
In most cases the requested permissions will be presented to the user before installation of the application. The user needs to decide if these permissions are given to the application.
If the user denies a permission required by the application, this application cannot be installed. The check of the permission is only performed during installation, permissions cannot be denied or granted after the installation.
Not all users pay attention to the required permissions during installation. But some users do and they write negative reviews on Google Play.

2. Android components

The following gives a short overview of the most important Android components.

2.1. Activity

An Activity represents the presentation layer of an Android application. A simplified description is that anActivity represents a screen in your Android application. This is slightly incorrect as Activities can be displayed as dialogs or can be transparent.
An Android application can have several Activities.

2.2. Views and ViewGroups

Views are user interface widgets, e.g. buttons or text fields. The base class for all Views is theandroid.view.View class. Views have attributes which can be used to configure their appearance and behavior.
A ViewGroup is responsible for arranging other Views. ViewGroups is also called layout managers. The base class for these layout managers is the android.view.ViewGroup class which extends the Viewclass.
ViewGroups can be nestled to create complex layouts. You should not nestle ViewGroups too deeply as this has a negative impact on the performance.

2.3. Intents

Intents are asynchronous messages which allow the application to request functionality from other components of the Android system, e.g. from Services or Activities. An application can call a component directly (explicit Intent) or ask the Android system to evaluate registered components based on the Intentdata (implicit Intents ). For example the application could implement sharing of data via an Intent and all components which allow sharing of data would be available for the user to select. Applications register themselves to an Intent via an IntentFilter.
Intents allow to combine loosely coupled components to perform certain tasks.

2.4. Services

Services perform background tasks without providing a user interface. They can notify the user via the notification framework in Android.

2.5. ContentProvider

A ContentProvider provides a structured interface to application data. Via a ContentProvider your application can share data with other applications. Android contains an SQLite database which is frequently used in conjunction with a ContentProvider. The SQLite database would store the data, which would be accessed via the ContentProvider.

2.6. BroadcastReceiver

BroadcastReceiver can be registered to receive system messages and Intents. A BroadcastReceiver will get notified by the Android system, if the specified situation happens. For example a BroadcastReceivercould get called once the Android system completed the boot process or if a phone call is received.

2.7. (HomeScreen) Widgets

Widgets are interactive components which are primarily used on the Android homescreen. They typically display some kind of data and allow the user to perform actions via them. For example a Widget could display a short summary of new emails and if the user selects an email, it could start the email application with the selected email.

2.8. Other

Android provide many more components but the list above describes the most important ones. Other Android components are Live Folders and Live Wallpapers . Live Folders display data on the homescreen without launching the corresponding application while Live Wallpapers allow to create annimated backgrounds.

3. Android Development Tools

3.1. Android SDK

The Android Software Development Kit (SDK) contains the necessary tools to create, compile and package Android application. Most of these tools are command line based.
The Android SDK also provides an Android device emulator, so that Android applications can be tested without a real Android phone. You can create Android virtual devices (AVD) via the Android SDK, which run in this emulator.
The Android SDK contains the Android debug bridge (adb) tool which allows to connect to an virtual or real Android device.

3.2. Android Development Tools

Google provides the Android Development Tools (ADT) to develop Android applications with Eclipse. ADT is a set of components (plug-ins) which extend the Eclipse IDE with Android development capabilities.
ADT contains all required functionalities to create, compile, debug and deploy Android applications from the Eclipse IDE. ADT also allows to create and start AVDs.

3.3. Dalvik Virtual Machine

The Android system uses a special virtual machine, i.e. the Dalvik Virtual Machine to run Java based applications. Dalvik uses an own bytecode format which is different from Java bytecode.
Therefore you cannot directly run Java class files on Android, they need to get converted in the Dalvik bytecode format.

3.4. How to develop Android Applications

Android applications are primarily written in the Java programming language. The Java source files are converted to Java class files by the Java compiler.
The Android SDK contains a tool called dx which converts Java class files into a .dex (Dalvik Executable) file. All class files of one application are placed in one compressed .dex file. During this conversion process redundant information in the class files are optimized in the .dex file. For example if the same String is found in different class files, the .dex file contains only once reference of this String.
These dex files are therefore much smaller in size than the corresponding class files.

The .dex file and the resources of an Android project, e.g. the images and XML files, are packed into an .apk(Android Package) file. The program aapt (Android Asset Packaging Tool) performs this packaging.
The resulting .apk file contains all necessary data to run the Android application and can be deployed to an Android device via the adb tool.
The Android Development Tools (ADT) performs these steps transparently to the user.
If you use the ADT tooling you press a button the whole Android application (.apk file) will be created and deployed.

3.5. Resource editors

The ADT allows the developer to define certain artifacts, e.g. Strings and layout files, in two ways: via a rich editor, and directly via XML. This is done via multi-page editors in Eclipse. In these editors you can switch between both representations by clicking on the tab on the lower part of the screen.
For example if you open the res/layout/main.xml file in the Package Explorer View of Eclipse, you can switch between the two representations as depicted in the following screenshot.

4. Android Application Architecture

4.1. AndroidManifest.xml

The components and settings of an Android application are described in the AndroidManifest.xml file. For example all Activities and Services of the application must be declared in this file.
It must also contain the required permissions for the application. For example if the application requires network access it must be specified here.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="de.vogella.android.temperature"
      android:versionCode="1"
      android:versionName="1.0">
    <application android:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:name=".Convert"
                  android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

    </application>
    <uses-sdk android:minSdkVersion="9" />

</manifest>

The package attribute defines the base package for the Java objects referred to in this file. If a Java object lies within a different package, it must be declared with the full qualified package name.
Google Play requires that every Android application uses its own unique package. Therefore it is a good habit to use your reverse domain name as package name. This will avoid collisions with other Android applications.
android:versionName and android:versionCode specify the version of your application. versionName is what the user sees and can be any String.
versionCode must be an integer. The Android Market determine based on the versionCode, if it should perform an update of the applications for the existing installations. You typically start with "1" and increase this value by one, if you roll-out a new version of your application.
The <activity> tag defines an Activity, in this example pointing to the Convert class in thede.vogella.android.temperature package. An intent filter is registered for this class which defines that this Activity is started once the application starts (action android:name="android.intent.action.MAIN"). The category definition category android:name="android.intent.category.LAUNCHER" defines that this application is added to the application directory on the Android device.
The @string/app_name value refers to resource files which contain the actual value of the application name. The usage of resource file makes it easy to provide different resources, e.g. strings, colors, icons, for different devices and makes it easy to translate applications.
The uses-sdk part of the AndroidManifest.xml file defines the minimal SDK version for which your application is valid. This will prevent your application being installed on unsupported devices.

4.2. R.java and Resources

The gen directory in an Android project contains generated values. R.java is a generated class which contains references to certain resources of the project.
These resources must be defined in the res directory and can be XML files, icons or pictures. You can for example define values, menus, layouts or animations via XML files.
If you create a new resource, the corresponding reference is automatically created in R.java via the Eclipse ADT tools. These references are static integer values and define IDs for the resources.
The Android system provides methods to access the corresponding resource via these IDs.
For example to access a String with the R.string.yourString ID, you would use thegetString(R.string.yourString)) method.
R.java is automatically created by the Eclipse development environment, manual changes are not necessary and will be overridden by the tooling.

4.3. Assets

While the res directory contains structured values which are known to the Android platform, the assetsdirectory can be used to store any kind of data. You access this data via the AssetsManager which you can access the getAssets() method.
AssetsManager allows to read an assets as InputStream with the open() method.

// Get the AssetManager
AssetManager manager = getAssets();

// Read a Bitmap from Assets
try {
 InputStream open = manager.open("logo.png");
 Bitmap bitmap = BitmapFactory.decodeStream(open);
 // Assign the bitmap to an ImageView in this layout
 ImageView view = (ImageView) findViewById(R.id.imageView1);
 view.setImageBitmap(bitmap);
} catch (IOException e) {
 e.printStackTrace();
}

4.4. Activities and Layouts

The user interface for Activities is defined via layouts. The layout defines the included Views (widgets) and their properties.
A layout can be defined via Java code or via XML. In most cases the layout is defined as an XML file.
XML based layouts are defined via a resource file in the /res/layout folder. This file specifies theViewGroups, Views, their relationship and their attributes for this specific layout.
If a View needs to be accessed via Java code, you have to give the View a unique ID via the android:idattribute. To assign a new ID to a View use @+id/yourvalue . The following shows an example in which aButton gets the button1 ID assigned.

<Button
 android:id="@+id/button1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="Show Preferences" >
</Button>

By conversion this will create and assign a new yourvalue ID to the corresponding View. In your Java code you can later access a View via the method findViewById(R.id.yourvalue).
Defining layouts via XML is usually the preferred way as this separates the programming logic from the layout definition. It also allows the definition of different layouts for different devices. You can also mix both approaches.

4.5. Reference to resources in XML files

In your XML files, for example your layout files, you can refer to other resources via the @ sign.
For example, if you want to refer to a color which is defined in a XML resource, you can refer to it via@color/your_id. Or if you defined a "hello" string in an XML resource, you could access it via@string/hello.

4.6. Activities and Lifecycle

The Android system controls the lifecycle of your application. At any time the Android system may stop or destroy your application, e.g. because of an incoming call. The Android system defines a lifecycle forActivities via predefined methods. The most important methods are:

onSaveInstanceState() - called after the Activity is stopped. Used to save data so that theActivity can restore its states if re-started
onPause() - always called if the Activity ends, can be used to release resource or save data
onResume() - called if the Activity is re-started, can be used to initialize fields

4.7. Configuration Change

An Activity will also be restarted, if a so called "configuration change" happens. A configuration change happens if an event is triggered which may be relevant for the application. For example if the user changes the orientation of the device (vertically or horizontally). Android assumes that an Activity might want to use different resources for these orientations and restarts the Activity.
In the emulator you can simulate the change of the orientation via Ctrl+F11.
You can avoid a restart of your application for certain configuration changes via the configChangesattribute on your Activity definition in your AndroidManifest.xml. The following Activity will not be restarted in case of orientation changes or position of the physical keyboard (hidden / visible).

<activity android:name=".ProgressTestActivity"
     android:label="@string/app_name"
     android:configChanges="orientation|keyboardHidden|keyboard">
</activity>

4.8. Context

The class android.content.Context provides the connection to the Android system and the resources of the project. It is the interface to global information about the application environment.
The Context also provides access to Android Services, e.g. the Location Service.
Activities and Services extend the Context class.

5. Installation

5.1. Eclipse

The following assumes that you have already Java and Eclipse installed and know how to use Eclipse. For an introduction into Eclipse please see the following tutorial: Eclipse IDE Tutorial.
The tutorial above also describes how to install new components into Eclipse. This is required to install the Android Development Tools. You find the necessary steps described in the following section of the tutorial:Eclipse Update Manager.
The author of this text has also published a Kindle book on the usage of the Eclipse IDE, which can be found here: Eclipse IDE Book for Kindle.

5.2. Pre-requisites for using a 64bit Linux

The Android SDK is 32bit, therefore on a 64bit Linux system you need to have the package ia32-libsinstalled. For Ubuntu you can do this via the following command.

apt-get install ia32-libs

Please check your distribution documentation, if you are using a different flavor of Linux.

5.3. Install ADT Plug-ins and Android SDK

Use the Eclipse update manager to install all available components for the Android Development Tools (ADT) from the URL https://dl-ssl.google.com/android/eclipse/.
After the new Android development components are installed, you will be prompted to install the Android SDK. You can use the following wizard or go to the next section to learn how to do it manually.

5.4. Manual installation of the Android SDK

After the installation of the ADT the Eclipse tooling allows to download the Android SDK automatically. Alternatively you can also manually download the Android SDK from the Android SDK download page.
The download contains a zip file, which you can extract to any place in your file system, e.g. on my Linux system I placed it under "/home/vogella/android-sdks". Avoid using spaces in the path name, otherwise you may experience problems with the usage of the Android SDK.
You also have to define the location of the Android SDK in the Eclipse Preferences. In Eclipse open the Preferences dialog via the menu Windows → Preferences. Select Android and enter the installation path of the Android SDK.

5.5. Install a specific Android version

The Android SDK Manager allows you to install specific versions of Android. Select Window → Android SDK Manager from the Eclipse menu.

The dialog allows you to install new packages and also allows you to delete them.
Select Available packages and open the Third Party Add-ons . Select the Google API 15 (Android 4.0.3) version of the SDK and press the Install button.

Press the Install button and confirm the license for all packages. After the installation completes, restart Eclipse.

5.6. Android Source Code

During Android development it is very useful to have the Android source code available.
As of Android 4.0 the Android development tools provides also the source code. You can download it via the Android SDK Manager by selecting the Sources for Android SDK.
The sources are downloaded to the source directory located in path_to_android_sdk/sources/android-xx. xx is the API level of Android, e.g. 15 for the Android 4.0.4 version.
To connect the sources with the android.jar file in your Android project, right click on your android.jar in the Eclipse Package Explorer and select Properties → Java Source Attachment. Type in the source directory name and press the OK button.
Afterwards you can browse through the source code.

6. Android virtual device - Emulator

6.1. What is the Android Emulator?

The Android Development Tools (ADT) include an emulator to run an Android system. The emulator behaves like a real Android device (in most cases) and allows you to test your application without having a real device.
You can configure the version of the Android system you would like to run, the size of the SD card, the screen resolution and other relevant settings. You can define several of them with different configurations.
These devices are called Android Virtual Device " and you can start several in parallel.

6.2. Google vs. Android AVD

During the creation of an AVD you decide if you want an Android device or a Google device.
An AVD created for Android will contain the programs from the Android Open Source Project. An AVD created for the Google API's will also contain several Google applications, most notable the Google Maps application.
If you want to use functionality which is only provided via the Google API's, e.g. Google Maps you must run this application on an AVD with Google API's.

6.3. Emulator Shortcuts

The following shortcuts are useful for working with the emulator.
Alt+Enter Maximizes the emulator. Nice for demos.
Ctrl+F11 changes the orientation of the emulator.
F8 Turns network on / off.

6.4. Performance

The graphics of the emulator can use the native GPU of the computer. This makes the rendering in the emulator very fast. To enable this, add the GPU Emulation property to the device configuration and set it totrue.

You can also set the Enabled flag for Snapshots. This will save the state of the emulator and will let it start much faster. Unfortunately currently native GPU rendering and Snapshots do not work together.

6.5. Hardware button

Android 4.0 introduced that devices do not have to have hardware button anymore. If you want to create such an AVD, add the Hardware Back/Home keys property to the device configuration and set it to false.

7. Tutorial: Create and run Android Virtual Device

To define an Android Virtual Device (ADV) open the AVD Manager dialog via Windows → AVD Managerand press New button.

Enter the values similar to the following screenshot.

Select the Enabled for Snapshots box. This will make the second start of the virtual device much faster.
Press the Create AVD button. This will create the AVD configuration and display it under the Virtual devices.
To test if your setup is correct, select your device and press the Start button
After some time your AVD starts. Do not interrupt this startup process, as this might corrupt the AVD.
After the AVD started, you can use the AVD via the mouse and via the virtual keyboard of the emulator.

8. Error handling and typical problems

Things are not always working as they should. This section gives an overview over typical problems and how to solve them.

8.1. Clean Project

Several users report that they get the following errors:

Project ... is missing required source folder: 'gen'
The project could not be built until build path errors are resolved.
Unable to open class file R.java.

To solve any of these errors, go to the project menu and select Project → Clean.

8.2. Problems with Android Debug Bridge (adb)

The communication with the emulator or your Android device might have problems. This communication is handled by the Android Debug Bridge (adb).
Eclipse allows to reset the adb in case this causes problems. Select therefore the DDMS perspective viaWindow → Open Perspective → Other → DDMS
To restart the adb, select the "Reset adb" in the Device View.

8.3. LogCat

The LogCat view shows you the log messages of your Android device and helps you to analyze problems. For example Java exceptions in your program would be shown here. To open this view, select Window →Show View → Other → Android → LogCat.

8.4. Java7

If Android complains that you cannot use Java7 select your right-click on your project and select the Java Compiler entry. Ensure that Java 1.5 or Java 1.6 is used. You may have to select the Enable project specific settings checkbox.

8.5. Eclipse reports file from R.java as missing

Sometimes Eclipse complains that a file, e.g. R.layout.main cannot be found. Check in your source code that you did not import android.R. An android.R import will prevent Eclipse from finding your R file.

8.6. Android editor not opened

Android provides nice editors to edit Android resource files, unfortunately these editor are not always automatically used due to bugs in the ADT. If that happens, you can open this editor manually. Right-click on your menu file and select Open with → Android Menu Editor.

8.7. Emulator does not start

If your emulator does not start, make sure that the android-sdk version is in a path without any spaces in the path name.

8.8. Timeout during deployment

If you face timeout issues during deployment you can increase the default timeout in the Eclipse preferences. Select Window → Preferences → Android → DDMS and increase the ADB connection timeout (in ms)value.

8.9. Installation failed due to insufficient storage

Sometimes the emulator will refuse to install an application with the error message: INSTALL_FAILED_INSUFFICIENT_STORAGE.
An Android virtual device provides by default only 64M for the storaging Android applications. You can clean your installed application by re-starting the emulator and selecting the Wipe user data " flag.
Alternatively you can set the data partition size. If you press edit on the AVD, you can set the Ideal size of data partition property via the New button.

8.10. Debug Certificate expired

If you get the error message Debug Certificate expired switch to the folder which contains the Android AVD, e.g. .android under Linux and delete the debug.keystore file. This file is only valid for a year and if not present, Eclipse will regenerate the password.

8.11. Error message for @Override

The @Override annotation was introduced in Java 1.6. If you receive an error message for @Override, change the Java compiler level to Java 1.6. To do this, right-click on the project, select Properties → Java Compiler → Compiler compliance level and select 1.6 in the drop-down box.

8.12. Missing Imports

Java requires that classes which are not part of the standard Java Language are either fully qualified or declared via imports.
If you see an error message with the XX cannot be resolved to a variable text, right-click in your Editor and select Source → Organize Imports to important required packages.

9. Conventions for the tutorials

9.1. API version, package and application name

The tutorials of this document have been developed and tested with Android 4.0.4, API Level 15. Please use this version for all tutorials in this book. Higher versions of the API level should also work. A lower version of the Android API might also work, but if you face issues, try the recommended version.
The base package for the projects is always the same as the project name, e.g. if you are asked to create a project called de.vogella.android.example.test, then the corresponding package name isde.vogella.android.example.test.
The application name, which must be entered on the Android project generation wizard, will not be predefined. Choose a name you like.

9.2. Warning messages for Strings

The Android development tools show warnings, if you use hard-coded strings, for example in layout files. For real applications you should use String resource files. To simplify the creation of the examples, we use Strings directly. Please ignore the corresponding warnings.

Web Developers

render Low-level text

Introduction

Part one -- the grizzly dance with Apple's help system

Part two: How to put a glyph on the screen

iPhone - Visual Studio debug console

Introduction

Background

Architecture

Implementation

Windows side

Mobile device side

Deployment

iPhone specifics

Simplifying Word Responsive Design

Summary

PayPal for C# - ASP.NET

Index

Introduction

Getting Started with PayPal

Website Payments Standard (HTML)

Basic Payment

Shipping & Handling

Donations & Textual Links

Conclusion

Barcode Generator/Reader

How do I sum even numbers between two numbers

Disabling browser’s back functionality after logout

Disabling browser’s back functionality after logout

Create/Read Advance PDF Report using iTextSharp in C# .NET: Part I

Introduction

Simple Windows Service which sends auto Email alerts

Simple Windows Service which sends auto Email alerts

Introduction

How can i get value from three input text box at time in jquery

How can i get value from three input text box at time in jquery

Refresh parent page after close popup page in asp c# ?

refresh parent page after close popup page in asp c# ?

Create new custom category attribute - Magento

Generate Category Tree Recursively - Magento

Coffee Script

Using UpdateProgress and Making Background Inactive

Using the Code

C# How to: Image filtering by directly manipulating Pixel ARGB values

Article purpose

ARGB Overview

Extracting the ARGB components of each pixel in an image

The Transparency Filter

The Grayscale Filter

The Sepia Tone Filter

The Negative Image Filter

The implementation

Update progress in center of screen

Update proggress bar For Iphone Click Here

Download the code sample

Step 1 - Add an UpdateProgress control to the page

Step 2 - Add CSS

Step 3 - Add an activity indicator image

AJAX ModalPopup

Query Metadata Using JavaScript

New Technical Article: Query Metadata Using JavaScript

The Microsoft Dynamics CRM

10 things I love about Dynamics CRM 2011 “December 2012 Service Update” or “Polaris Update”

CMS

CMS Website Design (Content Management System)

So what is a CMS web site?

Users with no programming or HTML experience?

See our 1 minute CMS Demo movie

Why should you opt for CMS?

Why use 'Navega Bem' to develop your CMS website?

How To Write Your First Google Android Application

Step 1: Get Eclipse

Step 2: Download The Java JDK

Step 3: Download The Android SDK Tools

Step 4: Configure Eclipse For Your Android

Step 5: Configure The Android SDK

Step 6: Set Up Your Android Virtual Device (AVD)

Step 7: Configure Eclipse Again

Step 8: Create A New Project

Step 9: Input Your Code

Simplifying Word Responsive Design