Windows Phone Guide for Android Application Developers Table of Content



Download 0.57 Mb.
Page6/15
Date04.05.2017
Size0.57 Mb.
#17233
1   2   3   4   5   6   7   8   9   ...   15

Tools for designing


The Windows Phone 8 developer toolset includes two UI design tools:

Visual Studio UI Designer

Blend for Visual Studio

Compared to Eclipse ADT UI plugin, Visual Studio UI design tool is much simpler and richer. Android application developers migrating to Windows Phone 8 developer tools will find the task of designing an application UI much easier.

The main page for our ShoppingList solution, MainPage.xaml, is already opened in the Visual Studio UI designer tool for editing (shown above). Let us change the title of the application, as well as the title of the current page. Right click on the title, “MY APPLICATION” and select Properties. In the properties window, select Text and type “SHOPPING LIST.” Similarly, change the title of the page by typing “my list” in the Text property of the title.

Let us design the interface of the main page of the application.





  1. Open the Toolbox window (View -> Other Windows -> Toolbox) if not already open, drag a TextBlock and drop it on the page in the designer window. Position it so that it is at the top left. Click and select the TextBlock and update its Text property to “Item:” in the Properties window.



  1. Drag a TextBox from the toolbox and place it underneath the text block created in the previous step.

Update the Textbox’s Text property to delete any existing entry.

In the Properties window for the textbox, enter “txtItem in the name field to set the Name of the text box to txtItem. The properties pane in the VS UI is in sync with the XAML code in the code editor window. You can set properties for controls manually in XAML or set them in the UI using properties panel.

Resize the text box by dragging its lower right corner so that its width is 300.

Drag a Button to the right of the TextBox.

Change the button’s Content property to “Add”, and its Name to “btnAdd”.

Resize the button so that its width is 140.

Drag another TextBox and place it underneath the txtItem textbox.

Resize the new TextBox so that it covers the rest of the phone screen.

Update the Name of the new TextBox to “txtList”.

Update the Text property of the new TextBox to “Nothing here yet!”

At this point, your application should look something like this:

Click F5, or Debug and Start Debugging, to compile the application and launch it.

This will start the Windows Phone 8 emulator, deploy the ShoppingList application and run it. You can click on Add, but nothing will happen as we have not written any logic yet.


Blend for Visual Studio


Blend for Visual Studio is a full featured visual UI design tool created for designers. There is no exact counterpart to this in the Android development toolset. Similar to the Visual Studio design tool, Blend also allows drag and drop to design the UI. The tool, shown below, allows pixel accurate layout of controls. They can easily create and use color palettes and gradients, as well as special effects such as reflections and shadows. The tool can import Photoshop files, which makes it easy to bring your Android application resources to your Windows Phone application. Designers can also use the tool to define application behavior, as well as certain animations, without any programming.

You will need to use Visual Studio to code your application logic, but you can create the UI in VS UI or Blend. Both tools include the same control set that provides accurate fidelity to their run time visual representation, making it easy to visualize the application.




Editing Code


Visual Studio has a simple to use, full-featured, configurable source editor. The editor has various features that are familiar to Eclipse users. These include flexible search, rich editing, code formatting, and the ability to outline/hide code.

Let us now proceed to add some logic to our application. :



  1. Stop the running application by clicking Debug, then click Stop Debugging. Leave the emulator running so that it doesn’t need to start up again the next time you debug. This speeds up the subsequent debug sessions.

  2. Double click the “Add” button which will open MainPage.xaml.cs with a method btnAdd_click in the MainPage class.



  1. To add logic for adding items to the shopping list, edit the btnAdd_click method. Enter the following code:

string tStr = txtItem.Text;

Unlike Android where objects must be dereferenced in Java using getViewById, in XAML, objects created in XAML are accessible in code-behind C# or VB files. The specified x:Name or Name attribute of a XAML object becomes the name of a field that is created in the underlying code when XAML is processed. This allows us to access the textbox using txtItem, its x:Name attribute.


IntelliSense in Visual Studio


When you enter "t" for "txtItem", Visual Studio displays the auto-completion dialog box. The Visual Studio equivalent for Eclipse auto-completion content assistant is called Intellisense.



  1. Enter the following code in the btnAdd_click method:

if (!string.IsNullOrEmpty(tStr))

When you type "string", Visual Studio displays the auto-completion dialog box. When you type "Is", Visual Studio displays the class methods of the String class. As you see below, it provides a synopsis of the IsNullOrEmpty method.



IntelliSense has a rich feature set. It uses history, code context, and .NET reflection for intelligent auto-completion. IntelliSense can suggest and complete variable names, parameters, classes, and method names. IntelliSense can also generate appropriate code where needed, as shown in the code below:



To complete the event hookup, it will also generate an empty stub for the event handler, in this case, the button1_click method.



You will find the generated event handler in the C# code



void button1_Click(object sender, RoutedEventArgs e)

{

throw new NotImplementedException();

}

The default code would throw an exception if you forgot to implement necessary logic for this handler.Subsequently, we will implement the logic to handle the button click.


Code Snippets in Visual Studio


Visual Studio provides another very useful feature called Code Snippets, similar to code templates in Eclipse, allowing you to insert code fragments with a few clicks. Visual Studio contains a large number of snippets and developers can create their own library of snippets. They can also be indexed and searched using user defined terms.

Type ctrl+k ctrl+x to bring up the Insert Snippet prompt. Select Visual C#, followed by “i” to select a code snippet for “if statement”, which will insert an if-statement in the code.



The inserted snippet identifies the parts the user needs to complete:



Type the remaining code, so that the body of the method is as follows:



string tStr = txtItem.Text;

if (!string.IsNullOrEmpty(tStr))

{

if (!initialized)

{

txtList.Text = "";

}

txtList.Text += txtItem.Text + "\n";

txtItem.Text = "";

}
Make sure that you declare and initialize a variable called initialized as follows.

public partial class MainPage : PhoneApplicationPage

{

bool initialized = false;

Visual Studio supports various refactoring mechanisms. You can select any piece of code and right-click the code to access the refactoring menu.

The Visual Studio editor is highly customizable. Developers can easily define various keyboard shortcuts or create their own macros. Macros help you to automate repetitive actions by combining a series of commands and instructions.

The following table provides various functions and corresponding keyboard shortcuts in both Eclipse and Visual Studio.



Tool

Run

Ctrl+f11

Ctrl+f5

Debug

f11

f5

Toggle breakpoint

Ctrl+shift+b

f9

Switch editor tabs

Ctrl+f6

Ctrl+f6

Source code management

Comment line/block

Ctrl+/

Ctrl+k Ctrl+c

Uncomment line/block

Ctrl+/

Ctrl+k Ctrl+u

Rename

Ctrl+shift+r

f2

Refactor

Ctrl+shift+t

Ctrl+R+..

Autocompletion

Ctrl+space

Automatic

Organize imports

Ctrl+Shift+o

Ctrl+.

Format source code

Ctrl+shift+f

Ctrl+e, f

Search

Find

Ctrl+f

Ctrl+f

Replace

Ctrl+f

Ctrl+h

Find next

Ctrl+k

f3

Find previous

Ctrl+shift+k

Shift+f3

Find in files

Ctrl+h

Ctrl+shift+f

Replace in files

Ctrl+h

Ctrl+shift+h

Navigation

Goto Line

Ctrl+l

Ctrl+g

Goto Definition

Ctrl+click

F12

Eclipse users can easily customize Visual Studio Editor to use shortcuts and keyboard combinations with which they are familiar.

Developers can change the way various windows are laid out to suit their need. They can also change the way in which various windows are docked within the Visual Studio Shell.




Download 0.57 Mb.

Share with your friends:
1   2   3   4   5   6   7   8   9   ...   15




The database is protected by copyright ©ininet.org 2024
send message

    Main page