Page 1 of 1

Advanced Equations Parser tutorial: Part I - Intro and UI construction Rate Topic: -----

#1 pryogene   User is offline

  • The Leafiest of the Leif's
  • member icon

Reputation: 45
  • View blog
  • Posts: 692
  • Joined: 30-June 09

Posted 18 January 2011 - 07:30 AM

Equatron: Advanced Equations parser for Windows Phone 7 tutorial
Part I: Introduction and the UI

Hi there! If you’re reading this, CONGRATULATIONS! You have successfully operated your browser. To business however; welcome to my multipart tutorial on building an advanced equation parsing calculator for Windows Phone 7, which I’m going to go ahead and call ‘Equatron’ – catchy, huh! This is going to be a relatively simple tutorial at first, using some basic concepts, but as we go along I’ll introduce some more complex scenarios, but I’ll be guiding you through it all the way.

Before we begin, you’re going to need a few things, first of which is the Windows Phone 7 SDK – we couldn’t do this without it. Secondly, I’m hoping that you have a fairly decent knowledge of the Windows Phone 7 UI Design Guidelines set out by Microsoft; if you don’t, that’s okay, I’d just recommend that you go off and familiarize yourself, then come back and we’ll begin. Saying this, I’m also assuming you have a thorough knowledge of the different page types (i.e., panorama etc.).

To begin this lovely series of tutorials, we’re going to create out project! If you haven’t done this before, which you should have, open Visual Studio, click File > New > Project, or press CTRL + SHIFT + N to open the new project dialog. In here, let’s create a new WINDOWS PHONE APPLICATION. Name it, click ok, and we’re done.
Now, you should be presented with the solution explorer and a file called ‘MainPage.xaml’. Normally, we’d work from this, but we’re not going to today. So start by creating a folder in the root of this project called ‘Screens’, and add 3 new PAGE files: StdCalc.xaml (portrait), AdvCalc.xaml (landscape) and Settings.xaml (portrait). These are the core 3 screens, but for now we only need 2 – StdCalc and AdvCalc.

StdCalc, as you may or may not have worked out will be our standard calculator, offering pretty normal calculator functionality; while AdvCalc will be our full-on equation parser. For now, we’ll begin with StdCalc, as this will be easiest. When we open our StdCalc file, we’re presented with our page, containing ‘page title’ and ‘myapplication’ labels. Yeah, these are useless to us, but we aren’t going to get rid of them yet. Take a note of their positions, as the positions are going to be VERY useful to us, and then delete them off the canvas – we have no further use for them. Once you’ve deleted those, select the StackPanel control named ‘TitlePanel’ and change the margins to 12,12,12,12. This will make it fairly symmetrical. Granted, I have OCD and things HAVE to be symmetrical for me. But hell, asymmetrical UI’s look gross.

So, we have our noted margins. Next question is, what do we want our basic calculator do exactly? This would be simple, what does any normal calculator do - it adds, subtracts, multiplies, divides, has clear and clear all functions, it will find the inverse and the square root of numbers, a percentage of a number. On top of this, it has memory which you can set to, remove from, clear, add to and subtract from. The later (memory) will be for a later tutorial, as we need a working calculator first before we can actually use it's memory. So lets begin with designing our UI. If you recall our stack panel at the top, we recently removed a title and page title label from it. In this space, stick a text box where the page title was and set that to the same dimensions and margins as the last, and then stick a list box above this with the same dimensions as the application title label. These will serve as our input and memory views. Below this, we have a second grid. I must now stress, that if you just had to LOOK, you probably shouldn't be reading this 'cause you're more than likely just going to steal my code.

Okay, okay, we get it now, just tell us what to do?

Okay, lets start with our UI, you want to have 5 buttons along the top: MC, MR, MS, M+, M- which are memory clear, recall, save, add, and subtract respectively. Name these what you want, as you will need to refer to these in code later. Below this line, we want another five buttons: a backspace (i just use <<), CE (clear everything), C (clear THIS), the funny +/- symbol (negate or inverse), and the square root symbol (do I really need to explain that one to you?). Again, next line now, 7, 8, 9, divide and percent, IN THAT ORDER. Next line, 4 5, 6, multiply, reciprocal. Next, 1, 2, 3, -, Next, 0, decimal, add. Note that in our last two lines, there were only 4 and 3 buttons respectively. Here's how it is, on both of these lines they should only span the width of 4 buttons above, on the last line the 0 should be the width of TWO buttons, so that the last line spans 4. Next to these two bottom lines, we want a button that is the HEIGHT of 2, but the width of 1 - this will serve as our equals button. Each of these buttons will need to be 91.2 pixels wide, and 72 pixels high, with the exception of the equals and zero buttons as previously stated, which will be 91.2 by 144 and 182.4 by 72 respectively.

Lastly, we want to use an application bar (which will be marked with an ellipsis... yeah, that thing). In the application bar we'll have a few options, but they aren't important right now.

Why must you torture us with all these specific positions and whatnot?

Because an asymmetrical UI is ugly, and we can't code for something that has buttons everywhere. The way I see it - a clean UI makes for clean code, and clean code makes for smooth debugging, smooth debugging makes for a good final product, and a good final product makes customers happy. So. Code. Lets begin, we're going to want to start with a few variables, I'm not going to list them, but I'll comment them instead:
        private float _memory = 0; //our calculators memory
        private float _totals = 0; //holds our total value, just makes things easier
        private List<float> _values = 
            new List<float>(); //holds all the numbers input into our calculator
        private List<StandardOperator> _operators =
            new List<StandardOperator>(); //holds a list of instructions
        private string _preParse =
            string.Empty; //holds the next value to be parsed from string form
                          //this just allows our parser to handle things simply.
        private bool _decimal = false; //tells us if we've already used a decimal

You can probably see there a value of StandardOperator right? That's an enum we're going to use to define the basic methods of data manipulation, here it is:
    public enum StandardOperator

All of those should be pretty self explanatory. You're probably now asking, so what exactly does this parse? Well, theoretically, nothing, we're actually going to iterate over the list of operators, after applying the first to the first two numbers, performing each operator on the total value and the next number in our values list. How though, you might also ask, do we get our float value into the list from a string? Simple, each time we're working with a number, the character is appended to _preParse, and once we enter a new operand it turns that into a number and adds it. Same can be said for pressing equals, it parses the string because equals is still an operand. The reason we've put this variables in now is so that they are ready for us next time; also it's so I can trip you up next time if you haven't been paying attention ;)

By this point, you should have the following: A page with a listbox, textbox, and 28 buttons. Wow, now I think about it that's quite a lot. Not to worry though, we don't need to worry about them now. The only thing left to do is put in an application bar, but this bit's a little different. In our xaml, at the very top, we need to add the following:
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">

This will initialize it in hard-coded xaml, which just keeps our C# a little cleaner.
For each button, between the shell:ApplicationBar tags, we'll add:
<shell:ApplicationBarIconButton IconUri="/Images/youricon.png" Text="yourtext"/>

We'll do this for each of our three buttons, home, advanced and settings. We won't add our code handlers to these just yet, as that's for another tutorial.

If you're this far, then you should have something that looks a little like this:
Attached File  finishedUI.png (202.89K)
Number of downloads: 10
If you do, that pretty much concludes my first tutorial in this series. Next up, we'll look at the nitty-gritty code behind all this black-and-white glitz-and-glamour of an app!
See you next time!

Is This A Good Question/Topic? 0
  • +

Page 1 of 1