Corrado's Blog 2.0

Online thoughts of a technology funatic

Learning Git with Visual Studio #7

Until now, we worked with a local installation of git and everything was good but once we start working on a project together with someone else we’ll soon discover that we need a way to share our work with other members so working offline is no longer an option.
It’s now time to go online, and in this post we’ll use GitHub as service for host and share our projects.

In order to user GitHub we need to have an account, if you don’t have one, navigate to https://github.com and register:

image

once registration is completed, login and click Start a project button to create a brand new repository, fill form with your data

image

the click Create Repository to create it, after a moment you will have the uri to GitHub repository

image

Now is time to add to Visual Studio plugin the capability to connect to GitHub repository, if not already present go to Tools->Extensions and Updates, select Online on left column and using search box in upper right corner and type github.

The first result should be the extension you need:

image

Select it and click Download to install it, then restart Visual Studio to complete installation.

Now go to Team Explorer, click on the green plug in top toolbar and connect to your GitHub account

image

Sign in with GitHub credential to complete connection of Visual Studio to GitHub.
We can now create or clone a new github repository, let’s clone the repository we created before by clicking clone above GitHub connection.

image

we are now prompted with a list of our repositories, including the one we just created

image

select and click Clone, we’ll now have an empty GitHub project inside Visual Studio, time to add a blank solution using File->New->Project->Other Project Types->Visual Studio Solutions

image

We’ll now see our blank solution inside Solution Explorer

image

Time to add a new project, let’s add a Console Application Project, right click the Solution->Add New Project->Windows Classic Desktop->Console Application

image

and click Ok, the project will be listed under our solution now

image

From the “+” on the left of the items you will now recognize that items are added to local git repository but not committed, let’s add a comment and try to commit the changes

image

Wait! there’s a problem!, what are those files? we don’t need them to be tracked! but since we didn’t added a .gitignore file, git will track all files that are part of our solution.
Let add it before committing the project: In Team Explorer, click Settings->Repository Settings and click Add button next to Ignore File

image

If we now go back to Changes tab, we’ll see this status, and only files making up our solution will be now tracked

image

Let’s click Commit Staged to commit staged and the Commit to complete the commit phase.
Ok, our new project is now tracked by local Git, how to we sync with GitHub?
Let’s select Sync tab, we’ll see something like this picture

image

Let’s click Push to push changes to GitHub and let’s see how they appear on GitHub portal

image

It is an online copy of our local repository.
Let’s add a property to P1 to Program.cs, commit and push the change, we’ll now see the latest commit listed

image

Let’s make a branch dev, and let’s push it, if we have a look online we will see it listed under branches dropdown list

image

It is now evident that GitHub now acts as online hub for all push operation from different team members and relative pull operation when members need to retrieve changes pushed by other developers.
Of course, if two developers works on the same part of code during pull operation conflicts might happen and need to be fixed.
We’ll talk about that… Smile

Learning Git with Visual Studio #6

In previous post we talked a lot about branches and all the stuff involved (merge, rebasing, cherry-pick) but we didn’t covered a quite simple scenario: You’re working on a branch, and while in the middle of an important refactoring you’ve to urgently move to a different branch to fix a bug.
Answer is easy, commit changes and then checkout the other branch, but in this case we committed something that maybe doesn’t even compile, adding a sort of “ok, need to commit, sorry” entry into project history.
Git covers this need with a feature called Stashing, that is the option to ‘save’ your work without involving commit and retrieve it later.
Unfortunately this feature is not yet available into Git plugin for Visual Studio 2017, but with a little help from a 3rd party extensions we can stash changes without resorting to command line.
First of all, install this extension from Visual Studio Gallery.
The extension adds a new entry Stashes into Team Explorer home tab.

image

While on dev branch, let’s add a new property to Class2.cs and click Stashes, a new tab will open where we can add a comment and save current work.

image

Let’s click Create stash to confirm, we will see our change disappear and code revert back to last commit, don’t worry, nothing is lost.
If we have a look at Changes tab we’ll also note that there are no changes pending.
We can now checkout another branch, work on that and then go back to dev branch and click Stashes again.

image

Let’s now right click the Stash entry we want to load and select Apply stash option, this will get our changes back and we can continue working and, at the end, commit to history something that worth it and not clutter the history with meaningless commits.
Here’s the history after committing all changes, no trace of the temporary switch of branch,

image

When you’re no longer interested on a specific stash, just right click it and select Delete stash.

The extension sometime causes some Visual Studio slowness during stash/unstash operation but apart this small issue it works pretty well.

Learning Git with Visual Studio #5

In previous article I showed how to take changes from a branch into parent branch, visually we could imagine this operation like “copying” some files from a directory into his parent, but what if, while acting on a branch a colleague working on another branch fixes a bug or add a feature we need to get asap? What if we need to “copy” some changes from parent folder into the one we’re working on at the moment?
This operation is called Rebasing

Starting from the sample solution we’re using in this series of post, let’s move to Master branch and let’s add an empty MustHave.cs class, solution now looks like in following picture

image

Let’s commit this change and checkout the dev branch created in the past article, we’ll see that MustHave.cs class is not present, how can we have it, together with any related change happened on Master branch since we initially created the dev branch?
Checkout Master branch (or in general, the branch that contains the change you want to “merge” into your branch) go to Team Explorer, Branches tab, right click Master branch and select Rebase Onto… menu

image

You will be now prompted to indicated the destination branch where the changes will be merged, in our case the dev branch

image

Click Rebase and you’ll now see MustHave.cs class being listed into the project, so basically we can think Rebase being a sort of reverse Merge, a really nice to have feature especially when multiple people are working on different branches.

Cool but: We have included ALL changes, including maybe some that could conflict or break the branch we’re working on. What if I need to take just one or more commits, maybe from different branches, because very critical for what I’m working on and ignore the others?
Cherry-Pick is the git feature we need.

Let’s imagine, that while on dev branch, someone did a series of commits adding a NewFeature1.cs file, then a P1 property and suddenly a P2 property (of course in real world the changes would be more articulated)
The history for master branch now is:

image

While on dev branch, let’s now take single commits 193d63b4 by right clicking and selecting Cherry-Pick

image

You will get this confirmation message on Team Explorer

image

Let’s do the same with commit b46c2419, we will get a similar confirmation message, and the history of dev branch will now include both cherry-picked commits.

image

As you see, git offers several option for mixing and matching code residing in different branches, of course all have to be treated with care since the risk of overwriting changes is always around the corner.

Learning Git with Visual Studio #4

When you’re in a team and start working on a new implementation or when you just want to do some experiments with your code without worrying about introducing regression with actual code, the best thing to do is to use a git feature called Branching.
Branching can be considered a total independent copy of the last commit, so, since we’re on a copy, the original source remains safe and untouched.
While considered a copy, technically is not, because copying all files making up a solution would be not only slow, but also a total waste of disk space, so git handles all this internally, taking care of deltas, giving us the impression that we’re working on a physical copy.

To create a new local branch (we’re still working locally exclusively) let’s select Branches inside Team Explorer, right click the only branch we have now master, and select New Local Branch From…

image

name it dev and select Create Branch

image

This will create a new “copy” named dev and it will make it the default project we will work on, you can see what’s current branch and even switch quickly by looking at Visual Studio lower right corner

image

Let’s now add a new Class2.cs file and commit the change as usual.
If we have a quick look at the history we will see now a new Tag on the right indicating that that commit refers to dev banch

image

If we now, right click master branch and select Commit we will see that Class2 is not there, even on disk.
Let move back to dev branch and let’s add a property P1 to Class2.cs without committing and let’s try to switch back to Master branch.
We’ll see an error message stating that switching is not possible otherwise some changes will be lost, something that git tries to avoid anytime.

image

Let’s commit the change.
Let’s say we’re done with changes on dev branch and we want to bring them into master branch, together with any changes that might have taken place since we created the dev branch.
We can do that using Merge feature.
Right click the branch were we want to push the changes of the actual branch (master in our case) select checkout to switch to that branch, right click it again and select Merge From…

image

Leave the Commit changes option to commit the changes after the merge automatically.
Let’s have a look at Master branch history now

image

As you see you can’t see from the history there’s no trace that a merge operation occurred.
Let Reset the merge and let’s do it again but this time unchecking the Commit Changes flag.
This time we have a warning informing us that we have to commit changes to apply the merge

image

Let’s do it, giving a meaningful comment and let’s see how the history has changed

image

In this case the branch is evident including the additional comment we added after the merge.
If you like this option, as I personally, do, make it permanently unchecking it on plugin settings tab.

image

Learning Git with Visual Studio #3

In this post we’re going to talk about History.
In the previous post we saw how to commit changes so that git can track them, but without an history browser this list of changes wouldn’t be available and we couldn’t do anything regarding commit history.
Git of course let you see all commits history and so the Visual Studio Plugin of course.
From Team Explorer, inside the Changes Tab, select the Actions button and click View History

image

and the list of commits will open

image

Let’s now add a new Class1.cs file to our project, commit the change, then let’s add a property named P1 to the same class and commit the change again.
If we now refresh the list using leftmost button we will see two new entries

image

One of the interesting features of history is that we can see what has changed in each commit, just select a commit entry, right click it and select View Commit Details, the Team Explorer tab will change to Commit Details and will show all files involved, in our case just Class1.cs.

image

Double click the Class1.cs and a diff viewer window will open showing what has changed compared with latest commit in our case we’ll see that property P1 has been added.

image

If you want to compare two specific commits instead just select them and click View Commit Details.

Another interesting feature is Reset, with this option you can delete a series of commits and rollback to a specific point in history.
Right click the commit you want to reset to, select Reset and select Delete Changes, this will remove all changes committed after that point resetting your project to that exact moment.
Reset will remove all changes, including any file added that commit, so use it with care because your job will be definitely lost.
In my case the Reset Hard operation deleted the Class1,cs file from both the project and the disk.

image

under Reset menu there’s another option: Reset (Keep Changes).
After last Reset Hard I’ve re-added Class1.cs, committed, then added P1 property again and committed, putting the git history in the same status as it was before the Reset operation.

image

If I now right click commit with Id 0206669f and select Reset (Keep Changes) it looks like that nothing has changed since both Class1 and P1 are already there and if i add a new P2 property and I commit I see history changing appropriately and Class1 contains both P1 and P2.
Still not totally clear to me honestly, comments welcome.

If you want to delete a specific commit your can right click it and use Revert.
To understand how it works, let’s add P3 and P4 properties to Class1 committing each addition, thus generating following history

image

Let’s now say that we want to delete commit with ID a5aa04f5, right click it and select Revert, we’ll now see Team Explorer tab to prompt something like this

image

and if we click Merge will see that merge tool will try to remove P3 from Class1

image

Click Accept Merge in the upper left corner and P3 property will be no longer present in Class1.

What if you want to undo some modification did to a file returning it to last commit state? Just go to Changes tab, right click changed file, select Undo Changes… and you’re done.

image

Learning Git with Visual Studio #2

In the previous post we learned how to connect a solution to Git source control, we’ll now pay attention to the status of each file inside the solution.
Git defines several status for the files it tracks, they can be:

-Untracked
Git knows nothing about that file, it totally ignores it
-Tracked
Git knows about that files and keep the history of it
-Modified
Git knows that that file has been modified compared to tracked version
-Committed
The file in the solution matches the one in the source control

Note: This is my personal definition, git uses a different terminology, but you got the point.

Take a look at following picture

image

In this case the .pfx file is untracked (ignored) because of the .gitignore file exclusion, if we want to include it we can right click it and select Add Ignored file to Source Control…

image

Turning it into a Tracked (or staged) file (equivalent to Git Add command)

image

Both Class1 and .pfx file are now tracked, meaning that git knows about that but it hasn’t started recoding changes because we have not commited them yet.
To Commit them we can go to  Team Explorer inside Visual Studio and select Changes where we will see something like this

image

Where we see two different sets of files ready to be Committed, let’s add the mandatory comment and then we will be able to commit staged changes

image

Stages changes are a way to control what files are part of a specific commit, and are an alternative to a “general” commit where we commit everything that has changed.
After clicking Commit Staged here’s what we see

image

And if we select View History under Action buttons we’ll see this

image

Ok, let’s now add another class (Class2) to our project, let go to Team Explorer window and let’s add a commit comment, we’ll se that button has a Commit all text where we can commit everything that has changed in one shot.

image

Ok, but what if i want to split committing of Class1 to commit of Class2 for better separation? Just right click the Class1 file and select Stage, add a comment and click Commit Stages, only Class1 addition will be tracked into history.

image

History

image

But what if i changed my mind and want to correct my last commit, maybe including Class2 as well? Just stage Class2 and use Amend Last Commit option under Actions (don’t use Commit staged that will generates a new commit entry)

image

and the previous commit will be updated with both Class1 and Class2 changes.

image

Most of the times I don’t do such granular commits, but since you can revert to a specific commit entry having using this option can help you track precisely the evolution of your app.

Learning Git with Visual Studio #1

As the vast majority of you i use Git as source control management, and, as many of you, I use it everyday but I feel that I’m just a basic user, so when something goes wrong or I just need to do something more ‘advanced’ i get lost very easily.
Another thing that differentiates me from those geeky developers is that I don’t like using command line to interact with Git, but I prefer to use the same tool I use everyday: Visual Studio.
This series of post are nothing more that my tentative to take some basic notes of my daily Git use as basic user.
There is a lot of documentation around Git, in case you need more detailed info, at this link you will find a comprehensive guide.
The core concept I want to point out here are:

-Git is more than a simple source control system.
-Git is a decentralized and serverless.

Regarding 2nd point: It means that Git doesen’t require you to have a steady connection to a server, in fact you might even decide to not have a server at all and, in case of more developers working on the same code, they work with a local copy of the code and, when they decide to, they can sync their copies and this sync operation might lead to conflicts in case two or more developers changed the same parts of code.
When this happen, fixing all conflicts must be done manually with great attention to prevent that some code modifications got lost (more on this in following episodes)

When we create a new solution with Visual Studio, if we want to use source control with it we need to ‘add it’ to a source management system, Git in this case, since Visual Studio won’t do that automatically for us.
Before creating our first project and connect it to Git we need to install the Git plugin into Visual Studio since this won’t be installed by default, we can do this in different ways:

-At installation time
-Modifying Visual Studio Installation via Visual Studio installer

image

-Add it via Extensions and Updates menu in Visual Studio

image

Done this let’s create a new UWP application (but you can use any project type you like) and note the “Create new Git repository” checkbox

image

If we check it, the new project will be associated with Git and we can use all related functionalities, confirmed by the presence of file status icons behind each file that is part of our solution.

image

All infos related to Git are stored inside hidden .git folder at the root of our solution on disk

image

If we now close the solution, delete the .git folder and reload it, we’ll see that solution is no longer associated with a source control because icons behind the files are gone

image 

How do we connect (or reconnect) a solution to source control? easy, just right click the solution and select Add solution to source control to go back to a connected solution

image

When we associate a project to git source control Visual Studio performs several operations behind the scenes, the most evident one are the inclusion of a couples of files:

-.gitignore that contains a common list of files that don’t have to be considered by source control (e.g. binary files, log files etc)

-.gitattributes configure some git behaviors (like line endings)

We now have our brand new project and we know we can use Git source management system with it directly from Visual Studio, in the next episodes we’ll see how.

Beware of generated XAML in UWP

I admit, this is s strange blog post title but that’s what this post is going to talk about.

I’m working on a UWP app that has different min and target runtimes:

image

After doing some UI work with Visual Studio & Blend I’ve discovered that the app was crashing on machines without Anniversary edition installed. At the end of a debuggin session I’ve found the reason: The XAML template generated by the tools contains incompatible elements (resources mainly, but also new properties) that are not present on previous builds.

To give you an example, this is an extract from a ComboBox default template, generated by Blend when you use the Template->Edit copy feature:

10586

<Setter Property="Foreground"

Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />

14393 (Anniversary)

<Setter Property="Foreground"

Value="{ThemeResource ComboBoxForeground}" />

The reason of this is because the tools generate the template from the Target version SDK and not the Min version SDK that might even not be present.

The team said that they’re going to give you some warnings in the future when situations like this happen, but in the meantime, at least when you’re doing design work, be sure to selected, the min target version SDK otherwise you might end up in troubles.

Use IDEA IDE for Android UI design with Visual Studio and Xamarin

While Xamarin did a monster job integrating Android and iOS designers in both Visual Studio and Xamarin Studio as soon as your project becomes larger you’ll soon hit their limitations, that why many pro developers end up using native designers for UI design. This post is about how to use IntelliJ IDEA based IDEs for Android UI design together with Visual Studio, following the same approach we use with Blend for Windows development.

Step 1: install your favorite IDE: Android Studio or IntelliJ IDEA (they’re practically the same since Android Studio is based on IntelliJ IDEA)

Step 2: Install XamarIdea extension for Visual Studio, this extension, recently updated for Visual Studio 2015, will make integration between the two IDEs a lot faster, thanks to Egor Bogatov (@EgorBo) for sharing.
No idea if something similar exists for Xamarin Studio (sorry, I’m not an pro Xamarin Studio user)

Step 3: Create a new blank Android app using Visual Studio

image

and wait until initial project skeleton creation process ends.

Step 4: Right-click the Main.axml file inside Resources\layout folder and you should see a new option: Open in IDEA/Android Studio

image

click it and you’ll get an initial configuration dialog that should point to IDEA/Android Studio path, if not select it manually, together with other plugin options

image

click Ok, and you’ll see a warning dialog saying that your project needs some modifications:

image

These modifications are necessary since Android layout files use a different extension (.xml) and project structure is slightly different than Xamarin Android apps, just say yes; unfortunately these changes will prevent you to use the integrated Xamarin Android designer further unless you rename the layout file back to .axml. Click Yes, and you’ll get a final dialog reminding you to recompile your project inside Android IDE and that plugin options are available under Visual Studio’s Tools menu:

image

Step 5: Switch to IDEA IDE and, for sure, rebuild the project

image

On the left you’ll see the project structure, under app node expand the Resources folder and you’ll see the familiar Android folder structure together with your renamed main.xml file.

image

Double click it to open the designer.

image

I won’t go into design detail since there are lots of demo tutorials on JetBrains’s site, just want you to see some of the plus of IDEA and why it is more productive than Visual Studio’s integrated editor/designer.

Step 5: Design

-Select and delete the autogenerated button from design surface.
-Let’s change root LinearLayout to a RelativeLayout using the Component tree window in the upper right corner.

image

-Drag a Plain Text to design surface until top tooltip shows CenterVertical/CenterHorizontal

image

-Set layout_width to match_parent using Properties window (hint: if you need to search for a property just start typing to select matching properties Smile)

-Let use xml editor to add left and right margins: Switch to text, select the EditText and start typing: ma, YES! full intellisense to the rescue!

image

-Do you want to create a style that you can reuse with others EditTexts? just right click the edit text and use Refactor –> Extract Style menu

image

Select the properties you want to export (this dialog will look familiar to Reshaper users) and click OK

image

the layout xml has been changed to:

<EditText android:id="@+id/editText" style="@style/MyEditTextStyle"/>

and a styles.xml file has been created for you under values folder:

image

Of course you can edit the styles.xml file with full intellisense / editors support

image

Step 6-Back to Visual Studio

Save the project and switch back to Visual Studio, your main.xml file is automatically updated, but unfortunately the new files that have been added to the project, like styles.xml in our demo, must be added manually to the project.

Add styles.xml under values folder, compile and continue developing your app using Visual Studio.

Closing:

I’ve just scratched the surface of IDEA design productivity features, I encourage you to give it a try, I’m sure you’ll love it.

Have fun exploring!

PS: Did I tell you that IDEA renders AppCompat’s widgets instead of a boring dark gray box? Winking smile