Assignment 2

GUI to Translate Language Apps

The purpose of this assignment is to create a simple Windows GUI application to translate English to Spanish, French, or German by using either Java, C++, Visual Basic, or any other language that you are comfortable to program with.

All the provided screen shots are merely examples to guide you through this assignment. Please feel free to modify them appropriately and creatively.

create a simple Windows GUI application to translate English to Spanish, French, or German (see a sample below):

The below is an example Using Visual Studio (You can use any other programming Languages).

Explain the difference between Windows Forms applications, WPF applications, and Web Forms applications

Microsoft's .NET provides several toolkits for graphical user interface design: one for Web applications and two for Windows applications.

Windows Forms is .NET's traditional programming model for developing Windows applications.

It combines the simplicity of the Visual Basic programming model with the power and flexibility of the .NET common language runtime.

The .NET initiative (2001) added the Visual C# programming language as an alternative to Microsoft's Visual Basic development language

Windows Presentation Foundation (or WPF) is a newer programming model for building Windows-based smart applications. WPF includes

XAML (Extensible Application Markup Language) is a XML-based user interface markup language developed by Microsoft to write user interfaces .

Microsoft Silverlight is a web-based subset of WPF designed to run in the browser.

Web Forms brings the .NET programming framework to developing Web applications

Adds ASP.NET web controls to the standard HTML elements used to create web pages

Visual Studio.NET can be used to quickly create Visual C# Windows Forms applications.

Create a C# Windows Forms Application

Create a New Project called WindowsUI in Solution Lab2

From the File menu, choose New > Project

From the New Project dialog box, choose Visual C# Windows Application

Enter WindowsUI .

Check Create directory for solution

Click OK

Using Visual Studio (any version) Solution Explorer pane, right click the file Form1.cs and rename the filename to MainForm.cs

Verify that the corresponding class name was changed from Form1 to MainForm

Use the Form Designer and Properties window in Visual Studio

Activity: Using the Properties Window

Visual Studio.NET includes a graphical Forms Designer to quickly build graphical user interfaces. The Design tool relies on the use of the Properties Window to facilitate the initialization of properties associated with forms and controls.

Set the initial properties of MainForm

View the MainForm in Design View by right-clicking the MainForm.cs file in Solution Explorer and selecting View Designer

Right-click the body of MainForm in design view and select Properties

Change the MainForm's BackColor property to a light yellow

Change the Form's Size property to 250 wide by 300 high

Set the MainForm's Icon property

Set the MainForm's Icon property

Change the Form's StartPosition property to begin with the form initially centered on the screen

Change the MainForm's Text property (i.e. the string that appears in the form's title bar)

Run your program in the debugger to test the property settings

Behind the scenes, when you are setting Properties using the Design View, Visual Studio is creating C# file. For example, the properties you just set created the following lines of C# code:

this.BackColor = System.Drawing.Color.FromArgb(((int)(((byte)(255)))), ((int)(((byte)(255)))), ((int)(((byte)(192))))); this.ClientSize = new System.Drawing.Size(234, 262); this.Icon = ((System.Drawing.Icon)(resources.GetObject(".Icon"))); this.Name = "MainForm"; this.StartPosition = System.Windows.Forms.FormStartPosition.CenterScreen; this.Text = "Chatter Box";

It is not a good idea to edit or add to the automatically generated code in the Designer.cs file.

Add GUI Controls to a Windows Form

The System.Windows.Forms namespace contains hundreds of built-in classes used to implement controls and components placed on forms.

Many of these controls are available through the Designer's Toolbox. To open the toolbox, use the View Menu >> Toolbox. Each GUI control has multiple properties you can set from the Properties window.

Add a TextBox, a ComboBox, and a Button control to your form

Use the Toolbox window to drag and TextBox near the top of the form

Change The textbox's MultiLine property to True

Resize it to fill the top of the Form

Give it a Vertical Scrollbar

Use the Toolbox window, drag and drop a ComboBox beneath the TextBox

In its Items Collection, add three languages (strings): Spanish, French, and German

Set its initial Text to "Select a Language"

Use the Toolbox window, drag and drop a Button beneath the ComboBox

Change the button's Text to "Translate"

Change the BackColor to red

Select both the ComboBox and the Button and use VS.NET's Format Menu to align the items centered in the form

Run your form by clicking the Start Debugging toolbar button

Type in some text to the textbox and click the Translate button - Nothing should happen yet

Resize, maximize, and minimize your form and see what happens

Anchor and Dock Controls

Anchoring allows you to attach a control onto one of the form's corners. Anchored controls always stay a fixed distance from the point they are bound to.

Docking allows a control to bind itself to an edge in a form. When you resize the form, the control resizes itself to fit the entire edge.

Anchor and Dock your controls

Anchor the Button and ComboBox to the bottom of your form.

Run and Resize the form to ensure the two bottom controls remain centered at the bottom of the form

See what happens when you Dock the TextBox to the top of your form

Remove the Dock value (set to None) and Anchor the TextBox so that it fills the form when the form is resized

Add an Event Handler

Visual Studio automates the registering of the event handler with the control's event. It also prepares the method handling signature, all you need to do is write the C# code to handle the event (harder sometimes than it sounds).

Activity: Handle the Button Click Event

In Design View, select the Button and view its properties

Click the Lightning Bolt in the Property Window to see a list of all possible Button Events (there are a lot)

Double-click the empty drop down box next to the Click event

Visual Studio Editor window will open with the cursor positioned in the newly created event handler method

Write the C# code to translate the textBox1's text into the selected language and then replace the current text with its translated version.

It has become pretty easy to leverage web services from Window Form applications.. See BING Desktop Translator using C# and VB.NET for C# code to do the translation.

A test App Id you may use today is

Language codes for Spanish, French, and German

Since this is only a prototype, if you are short on time hard code the traslation to display "Hola como estas"

Use Container Controls

Visual Studio includes container controls that you can use to layout your controls on the form and resize content as the screen size or user preferences change.

If you finish early, experiment with the Layout controls

Add a SplitContainer control to your form to show two text boxes, one for the initial text and the other for the translated text.

Add a TabControl to your form with four tabs: English, Spanish, French, and German

Deliverable:

Please submit your source code of your programming assignment (any IDE you are using)

Screenshots of your output (Dialogbox) within a MS Word .doc

Submit via d2l Module/dropbox on or before due date