Useful Developer Tools #1: Adobe Color Wheel

Welcome to the first part of our “Useful Developer Tools” series. We would like to present you a set of small tools that makes a developer’s life easier and their results better. Today we want to start with the Adobe Color Wheel.

Formerly known as “Adobe Kuler” the color wheel genrates color schemes that look great because of the adjustment of their colors. The Adobe Color Wheel only shows you combinations of colors that look good and harmonic together. You can configure the output in different ways like selecting a single color and let the tool generate matching ones or selecting only complementary colors and much more. Just play around with it and discover a color scheme that fits your needs.

For inspiration you can also explore popular schemes from others and adapt them, if you like. It is completely free so you should definitely give it a try!

adobecolorwheel

Show a custom dialog in your Xamarin Android app

Sometimes you want to show your users a dialog that contains more than just text and buttons. In those cases the pre-defined AlertDialog that come with Android will need some adjustment. Read here how to do that.

First of all we need an Alert Dialog Builder as always when it comes to creating dialogs in Android. If you want to go with backwards compatibility you should use the one that can be found inside the Android.Support.V7.App class, but you don’t necessarily need to. Instead of simply adding a title and a message we now have the chance to inflate our custom layout and set it as the dialog’s view.

Once the view is attached to the dialog we can manipulate it. We can access its elements by calling FindViewById from the dialogView.

Of course you can still attach buttons and event hanlders to your dialog or set a title, like you are used to it when working with the pre-definded alert dialog.

Don’t forget to show the dialog with builder.Show() and proudly present your first custom dialog to your users!

Xamarin .gitignore

If you use git as source control for your Xamarin project, you might not want everything but only the necessary files to be commited. Unfortunately most auto-generated .gitignore files like the one from GitHub for example don’t contain Xamarin paths. By adding these lines to your .gitignore file your repository will remain clean:

The bin and obj folders (both with upper or lower case) contain compiled stuff and do not need to be checked into your repository. Same is with the test-results. Inside the Components folder you can find downloaded Xamarin components that you loaded from the component store. You do not need to check them in, because a reference to the components is included in your project file and everytime you build, the systems checks if they already have been downloaded or not. If you work on a Mac, make sure to ignore hidden the Mac resourece folder .DS_Store.

Remember: If you already committed files that should be ignored afterwards, git will continue to watch them. Read this post about how you can fix that.

Want to create Xamarin.iOS apps without buying a Mac? Rent one!

As a mobile developer you will know that a MacOS device is stringently required to build and run iOS apps. Same is with Xamarin: You can write your code wherever you want but when it comes to compiling you need a Mac. Fortunately Xamarin ship a tool called Build Host which connects your Windows machine to a Mac anywhere in your network and compiles your code there. But you still need to buy at least one Apple. If you don’t want to invest the money, renting a remote on via MacinCloud might be an option for you.

Renting a Mac?

Yeah, it sounds weird but why not? Others rent luxury cars if they can’t or don’t want to afford them, so can’t be a shame to rent an overpriced piece of tech. MacinCloud offers you several plans to do that. You can choose to pay only what you use and get billed by hour or having an own machine which waits 24/7 for you to connect. Just check the pricing page, they will have something that fit your needs and wallet.

The chance is good that they have everything you need to develop or build your solution. These Macs have a whole bunch of software pre-installed which includes Xamarin and several other SDKs, GitHub, Java, different mobile development tools and much more.

Setting up the environment

Once you chose a subscription you will receive an E-Mail with all the information you need like the IP-Address and credentials as well as a zip file with Remote Desktop profiles. Simply double click one of them to connect with your remote Mac. All you need to do here is starting the Xamarin.iOS Build Host application. After a click on the Pair button, your Mac is ready to receive build instructions from your Windows PC.

Now you can plug the other end of the cable: Start Visual Studio and open the Tools → Options → Xamarin → iOS Settings options pane, where you can connect your IDE with a remote build host for iOS applications. Because the rented mac is not in your local network you need to configure the host manually by clicking on the corresponding button. Enter the IP-Address from your E-Mail and the connection Code that the Xamarin.iOS Build Host on your Mac shows.

connectBuildHost

Compiling on the Mac

When the connection between Visual Studio and your remote Mac is up and running you can send it your iOS applications for building and testing.
5
Choose an iPhone simulator as deployment target inside your IDE and test your application remotely. It’s that simple! Depending on the connection speed there might be some lags but I was surprised how responsive and fast the iPhone emulator on the remote Mac was.

Anything else I need to know?

In most cases you do not have admin rights on the hosted machine, which means that you won’t be able to change or update the installed version of Xamarin. Make sure, that you run the same one as the hosted Mac. In the moment that I write this article, the installed version of Xamarin.iOS is 9.0 which means you might have to downgrade. Oh, and make sure to always log off when you are finished to avoid unnecessary costs.

Summary

Renting a remote Mac is an easy way to jump into iOS development without investing thousands of dollars for a performant Apple device and is definitely good enough to test some applications quickly. As a hardcore iOS developer you will come to a point where buying a Mac is cheaper than renting one for a long period of time but for beginners this is an interesting alternative.

There also is a free trial to find out if renting a Mac is an option for you. In my eyes MacinCloud is an interesting choice if you just want to try out iOS development or just need to compile an iPhone app occasionally. Let me know what your thoughts are.

Add a stylish Navigation Drawer to your Xamarin.Android application

These hamburger menus do not only look neat, they also provide a great way of navigating through an application and display additional information or quick settings. Since Google itself uses them in nearly every application users expect one of them when swiping from the left side of the screen. In this post I want to show you how we can add a backward compatible material Navigation Drawer to our apps.XamarinNavigationDrawerDemo

Backwards compatibility

First make sure that our app is backward compatible. Do do so, add the Android Support Library v7 and Android Support Design Library to your project and make sure that your activity inherits from AppCompatActivity. Additionally we need to use a style that inherits from a Theme.AppCompat version like the Theme.AppCompat.Light.DarkActionBar theme. If you need help with this, check the demo code on GitHub.

Prepare you layout

Now we can add the Navigation Drawer to our layout. For this, we use android.support.v4.widget.DrawerLayout as our root layout and add all the content that we want to show inside of it. Beside the content we also add a android.support.design.widget.NavigationView element which will contain the flyout menu. The most important properties are the menu and headerLayout attributes which stands for exactly what you would expect: For the options that should be shown inside the navigation drawer you can define a menu just like you know it from the Action Bar. If you want to define a custom header for your drawer do it in an extra layout file and reference it. Afterwards our layout should look like this:

Hint: If you use a Toolbar, also add it inside the DrawerLayout. It needs to be the root element, otherwise the toolbar overlaps the layout and absorbs the touch events.

React on menu item selections

Once your layout is ready it is time to add some logic. The most obvious next step is reacting on item selections. For this, we simply need to add a listener to the NavigationView‘s NavigationItemSelected event inside the OnCreate method of our activity.

Add the drawer toggle button

When you start the app now, you will notice that we can already open the navigaion drawer by swiping from the left of the screen. If you also want to add this fancy drawer toggle button with the three transforming bars to your app keep on reading.

To add an ActionBarDrawerToggle  to the ActionBar, we need to define it inside the OnCreate method. Beside the context, the constuctor wants to know which DrawerLayout this button is for, which Toolbar it should be added to and where it can find the strings for the open and close mechanism. Once definded we can pair the button with the menu by calling the DrawerLayout‘s SetDrawerListener(ActionBarDrawerToggle) method and passing it the button. To make sure everything is connected correctly, we should call the SyncState() method right afterwards.

Now your app should have been enriched by a nice navigtion menu right where users would expect it. But make sure that there is an actual need for that overhead. A Navigation Drawer Menu might be an overkill if you just offer two options in it. You might want to consider using a classic Toolbar menu alternatively.

Do also check the full demo project on GitHub and feel free to ask your questions in the comments.

How I made my router and my Xbox One like each other

Recently I moved house, and one of the first things that were switched on and installed were my console and my internet router. Two weeks ago, I wanted to play Minecraft with a friend, but sadly the new router and the Xbox One weren’t very cooperative.

I tried narrowing down the issue. Standard solutions, like opening all of the ports listed in the official Xbox Support page, or enabling UPnP, didn’t do the trick. It seemed that the Xbox had a problem dealing with IPv6.
When testing the multiplayer connection, I got an error message: Cannot connect to Teredo IP Address

Teredo tunneling gives full IPv6 connectivity for IPv6-capable hosts that are on the IPv4 network, and have no native connection to an IPv6 network. Which was weird, because both my console and my network are IPv6-capable. It seems to be a known issue that the Xbox assumes the communication is going to be tunneled, without testing if there is even the need for it. If Teredo-tunneling is not possible, there is no way to play in multiplayer.

My router (Fritzbox 7360) blocks Teredo by default. So in order to enable that, I switched from View: Standard to View: Extended (which almost deserves a blogpost on it’s own, because the FritzOS UI is horrificly bad).

erweitert

Under the section Internet there is an option for Filter and Lists. So all I had to do is to remove the check next to – “Teredo Filter active“.

teredo

(It’s important to say that communication using Teredo is a security risk, and I personally don’t understand why Xbox uses it as a standard for all IPv6 networks)

This did the trick. Fun times were had!

My Visual Studio solution won’t build although it should. What can I do?

Visual Studio is undoubtedly the best development environment you could get your hands on – but sometimes it can drives you crazy. Espacially in these cases where you know that a project should build but it doesn’t no matter how hard you try. What you can do is trying these tricks and tips. Maybe one of them helps.

Clean and Rebuild

The first thing you should try is to click on Build Clean solution and Build Rebuild solution. In 30% of the cases it already solves your problems.

Restart Visual Studio

May sound simple and stupid but believe me, the next 30% of errors will go away after a simple restart.

Restore all NuGet packages

Sometimes your NuGet packages get lost, corrupted or need to be resored. To fix that you can open the NuGet Package Manager for each Project by right clicking it’s References folder and select Manage NuGet packages. Here you can restore the missing packages.

Another smart way to archive and automatic restore whenever you build a solution is enabling the automatic NuGet package restore option that you can find by right clicking your solution folder in Visual Studio.

Regenerate the .suo file

Another thing to try, is to close VS and delete the hidden .suo file that is next to the .sln file in your solution’s folder. Don’t worry. It will be re-generated the next time you save or build. Note that deleting the .suo file will reset the startup project(s) of the solution.

Make sure, that all projects build

Right click on your solution in the solution explorer, go to Properties and select the Configuration Manager. Check if the checkboxes under Build are checked or not. If any or all of them are unchecked, then check them and try building again. If they are all checked you can also try to uncheck them, apply, check them again and apply again. Sounds weird, but sometimes it helps.

 

Beautify Chome’s JSON Viewer

If you use Google’s Chrome browser to test and develop web applications you might have noticed that the default JSON output is always unformatted. This can often lead to an output like this:

To avoid this mess, Gildas Lormeau published the Google Chrome Add-On JSONView. As soon as it gets installed, it automatically formats your JSON outputs and you can even fold it! That makes the output look way better and noticeable enriches your development environment. So give it a try!

jsonviewscreenshot

Add a documentation to your ASP.NET WebApi in 3 simple steps

A well documented API is a welcome part of every software project. Everyone wants a great documentation, bot nobody really wants to write one. Especially when creating an API which many different people should use, this aspect becomes very important. Furthermore many Scrum teams’ acceptance criteras contain a documentation requirement.

Your luck, that ASP.NET 4.5 comes with a build in API-Documentation functionality that you can implement in three very easy steps:

1. Add build-in ASP.NET WebApi Documentation

Microsoft provides a build-in documentation functionality with its WebApi. When creating a new WebApi Project in Visual Studio, the template already contains a documentation implementation. If you created the WebApi project from scratch, you can add it by loading the NuGet package Microsoft.AspNet.WebApi.HelpPage into your project.

Both ways will create an Areas/HelpPage folder, which contains a bunch of methods and classes that will do the documentation work for you. From now on you can access your documentation at the {YOUR_URL}/Help page.

2. Document your code properly

The smartest way to document your methods and classes in C# is the XML-Documentation approach, that comes with .NET 4.5. This documentation style looks like this in your code:

Hint: You can generate this XML-Documentation header by typing three slashes /// above a method or class.

By using this way of documentation, you do not only create a documentation for your Help page. This information is also used inside of Visual Studio to describe a method and its parameters when using code completion and Intelly Sense.

3. Enable documentation access

To give your Help page access to this documentation you need to enable the XML-Documentation output. By doing this, every time you build your project an XML file is generated that contains your documentation comments. To enable this, you need to select the proper checkbox in the project properties, that you can find at the Build tab.

enabledocumentation1

Hint: By enabling the XML-Documentation output, the compiler will send you a warning for every method or class that is undocumented. If you want to avoid that, add 1591 to the suppressed warnings as you can see in the screenshot above.

Now you only need to tell your HelpPage that you do have such a file and where it is located. To do so, open the HelpPageConfig.cs file, uncomment the following line and edit the MapPath:

Now you are ready to enjoy a fully featured documentation of your ASP.NET WebApi at the {YOUR_URL}/Help page.

Use expressions to build variable names in Angular.js

When working with HTML and JavaScript you sometimes have to do weird things to achieve a specific purpose. In my case one of these things was building a variable name with Angular expressions.

While generating a form via ng-repeat, I also had to generate the name of the input element. For verification, I wanted to add a CSS class to the input whenever it gets marked as invalid. To access it, I had to use the form.element pattern wherefore I wrote something like this, trying to generate the variable name with an expression.

Wrong:

The code above does not only cause errors, it also is invalid HTML so I had to find another way. The solution is replacing the double curly braces with simple square brackets so that the final code looked like this:

Correct:

This works perfectly and is also valid HTML code. I hope that helps and spares your nerves. If you are looking for another working example, you can take a look at this JSFiddle repository, where I created a tiny demo project to play around with.