Monday, 21 April 2014

Make Calculator with WPF and WCF




First of all i informed you that i use Microsoft Visual Studio 2010, i use C# Language and i'm a beginner.
Oke lets start !!

1. open your Visual Studio, click "New Project". or press at the same time ctrl + shift + n . Follow this picture bellow.







2. After that, on the left side select select Visual C# and on the right side select WPF Application and on the column name type "WPFCalculator" or anything you like it's up to you then click button "OK". follow this picture bellow




3. and automatically your project make solution explorer with main component, XSD pane, and schema tree.



4. On the left side (schema tree) click toolbox. and drag tool button. as much as the button you'll need. 0-9 operand and button CE for clear all. total you'll need 17 buttons and 1 textbox for show the action. make your interface like this picture bellow



5. to change the text on the button you can just click the button and see on  XAML side (#code #under #red) which from the text that blocked.


can you see the button that clicked by me ? can you see the text that blocked on the 17th line?
Yups, i clicked button CE and the text that blocked is called properties for button that i clicked. so if you want to change anything in the button such as Name, Content, Event, etc you can type it in here.

for change the text on button, you can change the text on Content as you want. and for make process implementation code easier, you could change properties Name as you want but i suggest you to make a name that identify your button function. do the same thing for all buttons. change the Content and Name and dont forget to change Name on your only one textbox, your textbox doesn't need a content. Fighting !!! :D
for name i use "btn1" for identify it is a button 1 and "btn2" for button 2. and for textboxt i use txthasil.

 6. Finish ?? check again, don't be stupid :)
after you change all the Content and Name, it's time to make a WCF !!! Yeeeaaaay !! Happy ??
No. okay up to you.
now click your button start on your gadget, type it visual and press enter buttonon your keyboard.

7. after you open your visual studio, make a new project. do the same like the 1st step we made.
but don't select WPF Application but now select WCF. Follow this picture bellow



Select WCF Service Application and type WCFCalculator in column Name and OK.



8. After you click OK automatically your project make solution explorer.


double click on Iservice1.cs in solution explorer.



and you will go to source code from Iservice1.cs. look this picture bellow


9. and now it's time to cocktail party :D !!! copy and paste [OperationContract] above //TODO : Add your service operations here
and make some OperationContract to operate your calculator. look this picture bellow.


i make 4 OperatorContract. one for operator plus, second for operator multiply third for minus and last for divide.
string tambah(int num1, int num2);
string kali(int num1, int num2);
string kurang(int num1, int num2);
string bagi(int num1, int num2);

you can changet anything at word "tambah, kali, kurang, bagi" because it's up to you, or if you like you can do the same with me.

whereas (int num1, int num2) called parameter
int = data type integer for numbers
num1, num2 = its variable for value that you catch from your WPF Project that we have made before.you can named it anything you want, it's up to you.

we only calculate 2 numbers so in parameters we just put 2 variable. understand ? ok next.

10. after that, back to Service1.sfc.cs and declare all your OperatorContract that you have been made. follow this picture bellow.


After you declare all your OperatorContract, now let's run your IService1.cs and copy the address of your service. follow this picture bellow.



and you'll go to your web browser, 
click service1.svc
the address of localhost maybe different. it's not important

after you click you'll go to somewhere out  there over the rainbow. lol
no you will open new tab and copy the address that i blocked, the address might be different and it's no problem. follow this picture bellow




And your WCF Project is DONE :D yeaaay !! Happy ?? No -__- . okay i dont care

now back to your WPF Application, WPFCalculator.
and add service Reference on it.
first right click on WPFCalculator, and add service Reference. follow this picture bellow agaain !! :D



paste your address in address column. and click "Go" follow this pictue bellow


and you will see the content of your WCF. in column namespace type "MyService" or up to you.and click "ok" like this



On your WPF Project will automatically added your WCF project. like this


okey, now your WPF Project has been successfully connect with your WCFCalculator. now its's Cocktails party time !!! double click on your button "1" and type it into your project.

and after that, back to your interface design MainWindow.xaml and click the next button, button 2 type it into your button 2 source code.

do the same with all numbers 0-9. hahahaha it's easy. is'nt it ?? :D

check again your code, one by one. its really need a patience :D
are you sure it's all right ??
okey next.

above your 

public MainWindow()
{
    InitializeComponent();
}

type
private string operan1 = "";
private string operan2 = "";
private char _operator1 = ' ';

look this picture bellow


done ??
not yet.

click button plus (+) and type this into it


do the same to all operator button, and dont forget to replace sign '+'

have you done it all ??
oke next step.
double click at equal sign (=) and type it.
type manually from 
private string GetResult(string num1,  string num2)

because it's a function that we made not from our interface. it to call our WCFCalculator.


MyService.Service1Client kal = new MyServicet.Service1Client();
it is called Instansiation
kal = object.
so if we want use function in WCF we must type "kal" first and then followed by .(dot) and name of the function and followed by parameters().
like code above.
we type kal.kurang and followed by parameters (int.parse(num1), int.parse(num2));

kal.kurang(int.parse(num1), int.parse(num2));

understand or not ?


okey, I think it's all done !!! :D
now you just need to press at the same time ctrl + s
and run :D

is it any problem that you got ?

if you have any problem or error, you can leave a comment. thank you. hope it  can help you :D

it will be like this

1 + 2 = 3





see ?
ooh yaa, maybe when you run it for the first time, it's feel a little bit slow. isn't it ? because for the first time your WPF Project calls your WCF Project, it might take a second but don't worry, it's only for the first time, after it all, your program work faster and smarter :D happy coding  !!!

if you make other WPF Project you can use your WCF Project.
WCF works like a global function, if you need it you only "add service Reference" like before.


No comments:

Post a Comment