Category: Code

Welcome to the first part of the Windows App Studio Tutorial. In this article we will be looking at what the online tool of Windows Phone App Studio provides us. We will also see how anyone can get started (and I mean anyone, more on this later) to create a Windows Phone app in a few simple steps. Read more “Windows Phone App Studio – Part 1 – Getting Started”

I installed a Virtual Network within Windows Azure and downloaded the 64-bit VPN client that has a configuration script that corresponds with your VPN device.

When you start the install process, Windows 8 prompts you for permissions. You need to select “more info” and then “Run anyway”

Everything installed fine and the VPN was created. However, when I ran the VPN it could not connect to the Windows Azure network I created. I tried a few times, rebooted the computer but still no luck. When I created the Virtual Network it came from a deployment script and the troubleshooting tips where to remove the Gateway from Windows Azure and recreate it. Read more “Cannot Install Windows Azure VPN Client After Uninstall”

I am working on a new app that utilizes local JSON as well as JSON and XML results from a RESTful service. I enjoy the local JSON with Visual Studio 2013 and Windows Store app since I can bind my JSON data to my XAML to view it at design time. Saves a lot of time when it comes to spacing and determining what your UI looks like.

However, when I tried to run my app I get one of those lovely error messages.

WinRT information: No mapping for the Unicode character exists in the target multi-byte code page.

WTF! Something is obviously wrong with my JSON. So I perform the following troubleshooting routines.

I take the JSON and go to a online validator to ensure that is it valid. (I use JSONLint.com. It does a fine job.) It should be valid because the XAML designer shows my data, but just to be safe.

Skim through my JSON looking for ‘ or any other character that should not be in there.

All of which proves to be unsuccessful. So what do I do.

Well, apparently in Visual Studio you have the ability to save files in different formats. If you open the file in Visual Studio, then go to the File Menu and choose Advanced Save Options you can choose different file encodings. The encoding that came up for my JSON file was Western European (not sure why we are still called Western European but that is a different post).

I changed the encoding from Western European to Unicode UTF-8. Magically it worked!

Hopefully this will help anyone who runs into a issue similar to the one I had with Unicode.

If you are a developer and have not heard about building apps for mobile devices then you must still be in a dark room with coffee and loud music. Apps are all the rage. Ranging from seasoned developers to 12 year old kids with a Mac. But how do you get started? Do you just start coding and submit? Sure. Well it is not that simple but there are some great tools to get a jump start on app development. This article will talk about a few ways to jump start your application development for the Windows 8 platform.

The Idea

Do you have one? Great. If not, there are plenty of ideas out there you just need to ignite the spark. What better way to ignite it with some starter kits. The Technical Evangelist team at Microsoft has created a bunch of “starter kits” that consume public API’s.

They range from the more popular Foursquare and Instagram to Chuck Norris and World of Warcraft. Download these, fire them up, and see how they can jumpstart your app idea.

More Help

Once you are up and running with your idea, you might need more help on location services or media access. There is a plethra of examples and kits over at the Windows Dev Center that can point you in the right directon or answer that question.

What Next?

In the next few weeks I will be sharing a starter kit along with my Windows Store app submission process. I have a great idea, the app will…wait…I can’t let you know yet.

There really is not an issue (aside from image load) when viewing on Desktop browsers. However, I would like this site to be compatible with the iPad as well. Unfortunately this simple technique will not work on the iPad.

The iPad uses Mobile Safari which, by default, scales websites to fit it’s viewport. It does this to text, images and background images. It has to do with a resource limit put on the device from displaying large images. The maximum number is 1024 x 1024 x 3 which is 3,145,728 (result varies a bit depending on iPhone or iPad). However, Mobile Safari will scale your image accordingly to fit that size and your screen.

Ok. Maybe more than 8 lines of code but very little. I have been working with another agency (that will rename nameless) on a mobile web site for a client of ours. The agency provided the HTML/CSS/Images and Script for our technology team to implement. We hook up all the back end and call it a day.

The section that came into question was an ‘accordion’ style UI for a set of FAQ’s and other content. When I first loaded up their pages, everything worked fine. Upon further inspection of their code I noticed a lot of JavaScript libraries that were not needed. They included jQuery AND Prototype along with some effects and accordion scripts. (Prototype alone is almost 100kb in file size and the other scripts were 42kb. That still does not include the 70kb for jQuery) I thought to myself, this is a mobile site…why have extra scripts if not needed. To make matters even more funny, we are supporting Mobile Safari (iOS), Mobile Chrome (Android) and the BlackBerry Browser (RIM), it does not work in BlackBerry at all. Forget enabling or disabling JavaScript it just does not work. Even the elements are hidden.

So it got me thinking about the old saying, “if you want something done right you have to do it yourself”. So I did.

I removed all the libraries except for jQuery and made all of the elements visible by default. Basically if a user does not have JavaScript enabled then they can see everything.

Here is my HTML

JavaScript

1

2

3

4

5

6

7

8

9

10

&lt;div&gt;

&lt;ahref="#"&gt;Really Great Information&lt;/a&gt;

&lt;div class="accordion_content"&gt;

Content that will expand

&lt;/div&gt;

&lt;ahref="#"&gt;Really Great Information&lt;/a&gt;

&lt;div class="accordion_content"&gt;

Content that will expand again

&lt;/div&gt;

&lt;/div&gt;

Styles and other HTML can be wrapped around it. You can change the paragraph tags to div’s if needed but that is the structure you need more or less.

Now for the JavaScript.

Make sure you embed jQuery (I did from Google)

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

$('.accordion_content').hide();

//If JavaScript is not enabled, all content containers stay open, which is nice.

//Next, bind the click event to all of the targets, in this case all 'a' elements in the 'accordion_toggle' class

$('.accordion_toggle a').click(function(e){

//code to come

});

//Within the click function we need to first check if the element being clicked is set as the 'current' which means open. If it is, we need to remove the class 'current' and close the content container.

if($(this).parent().hasClass('current')){

$(this).parent()

.removeClass('current')

.next('.accordion_content').slideUp();

}else{

...

}

Then hide all open content containers:

If the element does not have the ‘current’ class then we need to first remove the ‘old’ ‘current’, close the ‘old’ ‘current’ and open and set the new ‘current’.

JavaScript

1

2

3

4

5

6

7

$(document).find('.current')

.removeClass('current')

.next('.accordion_content').slideUp();

$(this).parent()

.addClass('current')

.next('.accordion_content').slideDown();

Done.

Here is the final:

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

$(function(){

$('.accordion_content').hide();

$('.accordion_toggle a').click(function(e){

if($(this).parent().hasClass('current')){

$(this).parent()

.removeClass('current')

.next('.accordion_content').slideUp();

}else{

$(document).find('.current')

.removeClass('current')

.next('.accordion_content').slideUp();

$(this).parent()

.addClass('current')

.next('.accordion_content').slideDown();

}

e.preventDefault();

});

});

Depending on how you format the code and what you count as a ‘line’ it can be about 8 lines 🙂