F# : Create and Call Functions

May 28, 2012 by Abhi·Comments Off

Guys,

In this one i am gonna talk about how we can create and call functions in F#.

In F# functions are also values which is evident because they use the same syntax with the let keyword as assignments.
When you are writing functions that span multiple lines you need to use indentation to define the function structure.
Functions are nestable in F#.
In F# we don’t need to expliclitly define the return value of the function. The last expression which is evaluated in the function would become the function’s return value automatically.
As you have already seen in the previous posts that the inference engine of F# is pretty great and as you would expect input parameters and return values are inferred automatically by the compiler and hence the signature of the function is when we are calling a function in F# automatically defined.
When we are calling a function in F# we don’t need to put any delimiters. We need to use the parentheses for specifying priority only for we are making nested calls.
Lets declare a function and follow it with space and followed by the parameter followed by the evaluation and followed by the return value.

int Square

Now lets create a function with two input parameters. Now this function will be a multi line function. keep in mind when you are writing a multi line function then indentation is very important and if you do not follow the indentation then you might get the following warning.

F# Function Indentation

Now lets talk about the add function. As you could see in the image below when i take my mouse over to the intAdd function then we see that intAdd is a value if type int which goes to int goes to int. Let me explain what i mean by that. Add is a value of type int as all values in F# have a type. int goes to int goes to int means there are are two int parameters coming in and one int value coming out. It might seem odd to you that the two int inputs are separated by the go to operator but thats how it is in F# as all the functions are in carried format. We would talk more about that later.

int Add Function F#

As you know that functions are just values we could nest them according to our requirement. Lets create a new function intAddNested. Here intAddNested is the function and we have nested a value inside it with result as the return value.

Nested Function F#

Now lets call the function that we just created. We dont need to use paranthesis in the same way as we don’t need to use the paranthesis while declaring the function. To call the function just type the following code in your F# program. Here add5and3 is the name of the type and the call to the function is followed by the =.

Function Call F#

Now lets see how we can use the return value from one function in the call to the other function. Here we could see we have used the return value of the intSquare function in intAdd function. As in standard maths the part of the function call inside the paranthesis is called first and then the other part o fthe function is executed.

Multi Function Call F#

You can select all the code and send it to interactive to evaluate your code.

You can find the source code of this post here

Any questions, comments and feedback are most welcome.

F# : Values, Data Types and Type Inference

May 24, 2012 by Abhi·Comments Off

Hey Guys,

In this post i am going to talk about Values, Data Types and Types Inferences in F#.

Values in F# are what Variables are in some other languages. They are declared and assigned using the keyword “let”. By default simple values are immutable and thats the reason why they are not called variables. Their types are automatically inffered automatically by assignment. But this does not mean that F# is a dynamic language. It is still a statically typed language but its just that the type inference works so well that you would rarely find any explicitly assigned types. For litrels F# has a complete list of the suffixes available. Some of them are u for uint, y for byte, L for int64, l for bigint, m for decimal and so on.

If you would have worked with any of the programming languages you would know that a variable is used to hold a value. F# has variable as well but it also has values which are not similar to variables so they cannot be chaged at runtime.

You can declare a variable in F# by sinpmly writing

let myVariable = 100

and now when you hover over the mouse on the variable you would see that F# has inferred it as int. But we cannot chage the value of myVariable and when we try to assign a value to the myVariable then the compile would give a warning that it would expect the value comparision instead of a new assignment to value of myVariable.

Immuteable Variable

The compiler is catually comparing if myVariable has value 111 and its not reassigning it. Also if you try to reassign the value of myVariable saying

let myVariable = 111 then we will get an error that the definition of myVariable is being duplicated.

But if you try to do the same thing in the interactive enviorment (for details of how to use the interactive enviorment visit F# Interactive enviorment/) it would work fine as the interactive enviorment is designed to work for the evaluation and revaluation. But this will not work in the application context.

Now let type the different types of values for different variables and mouse over over them and see how they are inferred.

Data Types in F#

You could take your mouse over each of the variables and could see the way it is inferred and type other types as well and see if they are correctly inferred or not.

So we can see that the standard value types in F# are not muteable..

Any Comments, Questions and Feedback are most welcome…

F# : Interactive Enviorment or REPL (Read Eval Print Loop)

May 24, 2012 by Abhi·1 Comment

In this post we would talk about REPL which is the provided by the F# interactive enviorment. It could be used as tool window inside Visual studio or as stand alone command line application. Its really useful as we can evaluate the Code within the Visual Studio enviorment easily. It can used during or before editing the code in the editor. Lets see how this works.

Create a new F# application and add the following code to it.

F# App

The use of the interactive enviorment is pretty easy. Just right click on the first line of code and select – Send to Interactive.

F# Send To Interactive

It will automatically bring up the interactive window within the F# enviorment and evalute the selected line of code.

F# interactive

We can also type in the interactive window for evaluatig the code, but once we type the code to evaluate and hit enter the evaluation will not start so we need to terminate the code line with two semi colons and press enter. As F# does not have its own line termination but in the intercation window we need to treminate the statement with two semi colons. Once you press enter you would see the statement is evaluated and the interactive tool tells you the variable delared is an integer with value as 100.

F# Interaction Line Ternination

Now you can evaluate almost any F# code using the Interactive evaluation there and some restriction on the automatic evaluation. Now if you evalute a System.Console.ReadLine, it would work perfectly fine but if you select all the code written above in the Program.fs and send it to interactive the Console.ReadLine would retrieve an empty string. So we need to to careful at some places withis tool.
The compile langauages before F# did not had this capability so its really nice to have this stuff but you need to be careful while using it.

Any feedback, comments and questions are requeted.

Expression Blend 4 : Control Customization

May 22, 2012 by Abhi·Comments Off

Control Customization

The whole idea behind WPF architecture was that the presentation layer is completely separate from the functionality. This means a button may look like an image or a circle but still have all the functionality of a button.

Custom Controls

Create a new project named CustomControls

Before we start customizing a control let’s talk about style and template as this will be required for control customization.
- Styles – A style is a resource that contains a set of property setters. To see how this works lets create a rectangle on to the design surface. Right click on the rectangle and select Edit Style à Create Empty.

Give the style a name and select its location and click on okay

The left breadcrumb shows the Layout Root. As we are working with a rectangle we see a rectangle here
The next breadcrumb shows us that we are working with Style. This is represented by an icon that looks like a painter’s palette.
The scope that we are working on has changed to RectangleStyle and the name of the style is RectangleStyle1.
We see only one element as of now which is the style.
All asset creation tools have greyed out as when we work in a style we are restricted to the property of that element which is a rectangle in this case.

Now let us set some the properties of the rectangle which we will be able to see in the style later on. The properties that are changed are highlighted as red.

Now let us switch to the XAML of the style and we could see a set of setters as a part of the style of the rectangle which contains the name of the property of the rectangle and its value. Also it has a target type which would specify as to which Element type to target to. You can also see how the rectangle refers the style.

Now just click on the Rectangle in the Breadcrum bar to go back to the Root Document.

When we right click on the rectangle,we would see option to Edit the current style of the rectangle or edit a copy that style or create a completely new style or apply resource which can be any other style already created.

Now just create a rectangle onto the design surface and you would see that the Fill is not set for the rectangle the way it is when create a rectangle by default the reason is that blend expects you apply a style to this rectangle as the last rectangle you were working with had a style. So just right click the rectangle and go to Apply resource and select RectangleStyle1.

Now close your document and open it again and create a rectangle and you would see that the rectangle Fill is set by Blend to default White. Even when you apply the style this white Fill is still there, this is because this fill is set on the rectangle level along with the style and hence overrides the style Fill whereas all the other properties are inherited from style.

Now just click on the property marker next to the Fill property of the rectangle and select reset and you would be able to the Green Fill of the rectangle again.

Templates– The limitation of styles is that style can set properties on the element you are working with. This means that if you are working with a rectangle you can apply that style only on a rectangle. Whereas the template property is on the control which sets the entire Visual Tree. All of the visual states and entire stuff that makes the control.
- Let’s create a button on the panel. When I right click it instead of the edit style option I have Edit template option in which I see option of Edit a copy which will create a copy of the existing default template of the Button and give us to edit and a Create Empty will create a new empty template for us to edit.

Now when click on Edit a Copy you would see a dialog box like below asking to give a name to the style, its asking to create a style and not a template because you can only apply a style to a control and the template is a part of the style. You can also see the option of apply to all. This option will actually create the style with no name nad apply to all the button in its scope.

We are working with the template within the style within the button. You can have a look at the xaml and see that the style has a target type set as button and the setter property template has visual states, border, grid, rectangle, etc which the complete visual tree of the button and will decide how the button looks and behaves.
You can see the Button Visual Tree here.

Now just right and delete all the elements inside the grid so that we can create the visual of our button from scratch. And then press ctrl + 9 to zoom into the grid we are working on.

Now add an ellipse and set the alignments to stretch and margins to 0

Now Go to the assets library and add a couple of rigs to the corners of ellipse. Also now add a textblock on the ellipse and rotate it and make the text as button. Now run the application and you would be able to the button.

Now go over to the states and we would see how the button looks at various states like mouse over and mouse pressed, which is the same as of now as we have not added any effects. Now let’s change what the button does on mouse over and Pressed. Just select MouseOver in the states and change the color of one of the rings and then select Pressed state and change the color of the other ring. Now run the application and see if the effects work at runtime as well.

Now let’s add some transition speed. Now select Mouse Over and change the textblock foreground to white and ellipse fill to black and also change the Default Transition speed from 0s to 3s and when we run the application we will see that all the animation states transition very smoothly.

Now let’s add a new transition. Click on the Arrow+ in mouse over and we could see the transitions we could use. Select the 1^st option.

We can also set the transition effects.

Now you can add new button and apply this style we have created.

Now if you set the background on the button it will not be applied to the button because it is taking its values from the template. Now we need to modify the template

So that the value is picked up from the control. So go ahead and edit the current template and select the ellipse. Now go to the property marker of the fill and select Template Binding à Background

When we change that the value will be coming from the parent and not the template as we have template binded the control to parent. Now if we go to the Mouse Over transition we will see that background color is not changed. So we need to decide as to do we want to template bind it to parent of Control Template.
Let’s Template Bind the Text of the TextBlock to Button Content. So select the TextBlock in the template and goto Common Propertiesà Text and click on the PropertyMarker and select Content as button being the Content Control we need to bind to the Content of the Button. But this work fine only till our content of the button is text.

So we have any other content then we should use content presenter for it. So add one to the template and align it to center and reset all the margins and rotate it the way you want.

Any Comments, feedback or suggestions are most welcome.

F# : WPF Hello World

May 22, 2012 by Abhi·Comments Off

Hope you guys had a look at my other F# posts

In this post i am going to talk about how we can create a Hello World program in WPF using F#.

We would need to manually create and include XAML files in WPF projects, they could also be loaded from code at runtime. We would also need to write the code to hook up event handlers. Let’s get started.

Create a new F# application named HelloWorldWPF

Create WPF F# Project

There is no way add a xaml file to a console application so either you would need to create an xml file and start editing it or use any other tool (Like Expression Blend) to create a xaml file and then include it in the project. i have used the 2nd option

F# Add XAML File

You can have a look at the xaml file below:

F# XAML File

Lets add the references required by the WPF application. Add a reference to PresentationCore, PresentationFramework, System.Data, System.Deployment
Open namespace System, System.Windows and System.Windows.Controls. The let keyword is used for simple values.
Create a function that will load my main windows. So lets create a function named loadMyWindow().
Then define a new Uri for loading our MainWindow.xaml. This is the standard .Net specification. We don’t need any line terminatio as F# terminaties lines automatically.
Then we create a window using the resource loaded in the resourceLocator and then we need to cast this to Window using the F# cast operator.
The we find Element which is our clickButton and and we add a function to the Click Event of the Button. In F# we need to also handle all the return vales and hence we have used F# helper function ignore to ignore the values. In F# the last keyword in the function is the return type of the fuction which in our case is a window.
Now we would pass this window to the Application.Run and we ignore the retun value as well. We also then apply the STAThread attribute.

WPF HelloWorld

Now we run the application and this is what we see.

WPF HelloWorld

Any Feedback, comments or questions were most welcome.