Visual Programming. Introduction. Information Systems Department College of Technology Vietnam National University, Hanoi

Transcription

1 Visual Programming Introduction Hoá NGUYEN Information Systems Department College of Technology Vietnam National University, Hanoi 23 January 2007 Plan 1. Introduction to Visual Programming Graphical User Interfaces Event-Driven Programming Integrated Development Environment 2. Key concepts of object oriented development Abstraction Encapsulation Inheritance Interfaces Polymorphism 3. Introduction to Visual Studio 2005 Components Refactoring 4. System Design Considerations Visual Programming - Information Systems Department,

2 1. Introduction Visual programming: specify programs by manipulating program elements graphically rather than by specifying them textually Visual programming language: visual expressions, spatial arrangements of text and graphic symbols object and arrows Objects: boxes or circles or bubbles, Relations: arrows, lines or arcs: Visual Programming - Information Systems Department, Visual Programming Visual programming environments graphical or iconic elements which can be manipulated by users in an interactive way according to some specific spatial grammar for program construction allow users to create new applications by moving programming building blocks or code nodes to create flowcharts or structure diagrams which are then compiled or interpreted. These flowcharts often are based on the Unified Modeling Language Integrated Development Environment IDE: consist of a source code editor, a compiler/interpreter, build-automation tools, and a debugger Microsoft: Visual Studio IBM: Eclipse Open source IDE, Borland: CodeGear s IDE, Visual Programming - Information Systems Department,

3 GUIs Graphical User Interfaces Most modern programs used as GUI: Graphical not just text or characters GUI: way to interact with the programs by graphical elements Typical graphical elements Window: portion of the screen that serves as a smaller screen within the screen Menu: list of alternatives offered to a user Button: looks like a button that can be pressed etc. Visual Programming - Information Systems Department, Even-Driven Programming Programs with GUI often use Event-Driven Programming Event-Driven Programming: program wait for events to occur and then responds Examples of events: Clicking a mouse button Dragging the mouse Pressing a key on the keyboad, Event managing: Firing an event when an object generates an event Listener object that waits for events to occur Event handler method that responds to an event Visual Programming - Information Systems Department,

4 New approach to Programming Traditional Style List of instructions performed in order Event-Driven Programming Objects that can fire events and objects that react to events Next thing to happen is next thing in list Next thing to happen depends on next event Program performed by one agent the computer Program flow is driven by interactions between user and computer Visual Programming - Information Systems Department, Key Object-Oriented Oriented Concepts Object-Oriented groups data and the functions & subroutines (methods) that are associated with the data into a class. A class is data structure with methods C procedural because all functionality is grouped into functions all data is isolated into primitive variables or into data structures Java- object oriented because all data and related functions (& subs) are grouped together into class Has encapsulation, inheritance and polymorphism (the 3 requirements of OO) Visual Programming - Information Systems Department,

5 Object Oriented Why? Allows for more efficient code reuse and design Easier to modify and add to later Closer to the people manage actual concepts Helps separate presentation layer from business logic layer from data layer OO is based on the key idea of objects, which can be physical (car) or conceptual (bank account) Visual Programming - Information Systems Department, Key Concepts Essential requirements: encapsulation, inheritance and polymorphism Concept: Class and Object - Class is the blueprint, object is the building A Class The blueprint from which objects are made. Blueprints can have properties and methods as well. The shape in the cookie cutter is the class and the cookie is an object A class that inherits from another class is called a derived class, and the one it inherited from is the parent class Visual Programming - Information Systems Department,

6 A class has Methods - subroutines and functions Properties - looks like data but allows for features of a method Data members - data that is not exposed Events - we ll deal with these later! Objects are reference types, therefore a declaration provides a reference, a New creates a new object Visual Programming - Information Systems Department, OO Definitions Method A subroutine or function that is contained within a class. They may have a defined scope of access which is either Public available to anyone who has access to the object Protected available to anyone who inherits from the object but no one else Private only available to other methods and properties of the class itself Friend available to anyone who has access to the object and is in the same DLL (Advanced Feature) Visual Programming - Information Systems Department,

7 OO Definitions Property Provides the user of the class with a variable to tell you about or let you affect the state of the object Implemented with a Set and Get method within the class but looks you are setting a variable on the class myanswer.questionid = 7 Is really (show the code!) Scope of access is the same as a method, i.e. Public, Protected, Private or Friend Visual Programming - Information Systems Department, OO Definitions Event A bit of a cross between a method and a property. Provides a publisher/subscriber implementation that is easy to use. Think of it as a sign-up sheet. If you want to know about certain things that could happen, like the Page Load event, then sign up! When it happens, I ll call you! Any method that has Handles MyClass.MyEvent automatically signs up. Visual Programming - Information Systems Department,

8 OO - Encapsulation Data and function are packaged together Information hiding: Some methods and data may not be public, which is fine An object is an abstraction User should NOT know implementation details Visual Programming - Information Systems Department, OO - Inheritance A class can only inherit from one class C++ allows for multiple inheritance, which can get you into trouble So how do you allow your class to provide the methods and properties of two or more different things? Like a class that has methods and properties of both a student and a software developer? Visual Programming - Information Systems Department,

9 OO - Inheritance The is a relationship Types are arranged in a hierarchy Called base/derived or superclass/subclass Vehicle Accelerate() Decelerate() OpenTrunk() VIN Accord Car Truck Plane Boat Corvette TakeOff() Land() Interface vs. implementation inheritance Visual Programming - Information Systems Department, OO - Polymorphism The ability to perform an operation on an object without knowing the precise type of the object Lets old code call new code void Poly(object o) { Console.WriteLine(o.ToString()); } Poly(42); Poly( abcd ); Poly( m); Poly(new Point(23,45)); Poly(new PurchaseOrder( PO )); Visual Programming - Information Systems Department,

10 OO Polymorphism There are four main kinds of polymorphism 1. Late binding Used in scripting languages where variables are not typed: methods are looked up dynamically Different types just happen to have the same methods (Not directly supported in C#, Available thru reflection classes) 2. Inheritance One type inherits methods from another type (base type) A variable of the base type can hold any instance of its derived types Example: a variable that is of type Vehicle can hold any kind of Vehicle, like an Accord, Corvette, or specific kinds of Planes, Boats and Trucks Vehicle v; v = new Accord(); v.accelerate(5); v = new Plane(); v.accelerate(100); Visual Programming - Information Systems Department, OO Polymorphism There are four main kinds of polymorphism 3. Interfaces Different types implement a common interface Example: IComparable is an interface that a type implements so that its instances can be compared IComparable has one method: CompareTo The Array.Sort method requires the objects in the array to implement the IComparable interface 4. Delegates A delegate defines a function signature Arguments and return type Many functions may conform to the signature of a delegate Provides the foundation for event handling in.net Visual Programming - Information Systems Department,

11 3. Introduction to VS 2005 Visual Studio 2005 : a fully integrated development environment VS 2005: an assembly of the process of writing your code, debugging it, and compiling it to be shipped as easy as possible Sophisticated multiple-document-interface application to developing your code Support all.net languages Visual Programming - Information Systems Department, Solutions, Projects and Debugging Programming is accomplished as a project & every project must belong to exactly one solution To keep track of the physical and logical elements in projects Solution Explorer Class View Setup Wizard project Windows Application Class Library Windows Control Library Mobile Web Application ASP.NET Web Application ASP.NET Web Service Web Control Library Console Application Windows Service Empty Project Empty Web Project New Project in Existing Folder Visual Programming - Information Systems Department,

12 Code Outlining and Regions Inspired by Centura s SQLWindows editor Visual Programming - Information Systems Department, IntelliSense A sophisticated editor to write your code Automatically lay out your code by indenting lines, matching start and end brackets of code blocks, and color-coding keywords Perform some syntax checks as you type and underlines code causiing compilation errors - design-time debugging Automatically display the names of classes, fields, or methods as you begin to type them with IntelliSense, CTRL+SPACE: bring back the IntelliSense list box Visual Programming - Information Systems Department,

13 References Manage dependencies on other components -Project Add Reference -Right click the References node from the Solution Explorer Window Visual Programming - Information Systems Department, Debugging There are different degrees of support for debugging which can be customized in the project property window simple.net debugging: only permits seeing source from managed code additional debugging: ASP Debugging ASP.NET Debugging Unmanaged Debugging SQL Debugging Visual Programming - Information Systems Department,

14 Object Browser Display all the components in the active project or in the Selected Components Visual Programming - Information Systems Department, Refactoring Refactoring: process of reworking code for readability, performance, providing type safety, and lining applications up to better adhere to standard OO (object-oriented) programming practices right-click either of properties in the document window and select Refactor Encapsulate Field Visual Programming - Information Systems Department,

15 Refactoring VS Refactoring Abilities: Extract Method: Define a new method based on a selection of code statements Encapsulate Field: Turns a public field into a private field encapsulated by a.net property Extract Interface: Defines a new interface type based on a set of existing type members Reorder Parameters: Provides a way to reorder member arguments Remove Parameters: Removes a given argument from the current list of parameters Rename: Rename a code token (method name, field, local variable, and so on) throughout a project Promote Local Variable to Parameter: Moves a local variable to the parameter set of the defining method. Visual Programming - Information Systems Department, Using Visual Studio Types of projects... Console Application Windows Application Web Application Web Service Windows Service Class Library Visual Programming - Information Systems Department,

16 Using Visual Studio Windows Solution Explorer Class View Properties Output Task List Object Browser Server Explorer Toolbox Building Debugging Breakpoints References Saving Visual Programming - Information Systems Department, System Design Considerations Enterprise Architecture Visual Programming - Information Systems Department,

17 Design Model and Process Team Model Resources Schedule Process Model Features Application Model Visual Programming - Information Systems Department, Design Model and Process Z I STABIL I NG Release ENV I S I O N N I G Scope Complete/ First Use D Vision/Scope Approved E VELOPI N G Project Plan Approved P L A N G I N N Visual Programming - Information Systems Department,

18 Design Process Overview Conceptual Scenarios Logical Objects and Services, UI, Logical DB Physical Components, UI, Physical DB Visual Programming - Information Systems Department, Conceptual Design Conceptual Scenarios Logical Objects and Services, UI, Logical DB Physical Components, UI, Physical DB The goal of conceptual design is to understand what the users do and to identify business needs. The output is scenarios or use cases. Visual Programming - Information Systems Department,

19 Logical Design Conceptual Scenarios Logical Objects and Services, UI, Logical DB Physical Components, UI, Physical DB The goal of logical design is to lay out the structure of the solution and the communication among elements. The output is a set of objects and services, high-level user interface design, and logical database design. Visual Programming - Information Systems Department, Physical design Conceptual Conceptual Scenarios Logical Objects and Services, UI, Logical DB Physical Components, UI, Physical DB The goal of physical design is to apply real-world technology constraints to the logical model, including implementation and performance considerations. The output is a set of components, UI design for a particular platform, and physical database design. Visual Programming - Information Systems Department,

20 Design Model and Process Summary Understand and solve the business problem Communicate effectively with users and project teams Design based on a modular approach Consistent Distributable (Web-centric) Implementation language-independent Flexible Reusable Reliable Balance innovation and discipline through each iteration Pay attention to the Enterprise Architecture and Infrastructure Visual Programming - Information Systems Department, Design Principles Entity: corresponds to things (nouns), physical and conceptual, stateful, stored in database E.g. Person, Vehicle, Purchase Order, Book Service: does work/processing Aka Control or Coordinator objects E.g. Web server, authentication, workflow engine, librarian Boundary: provides an interface between systems E.g. user interface controls, web pages, web services Visual Programming - Information Systems Department,

21 Design Principles Object Relationships Uses (delegation): A uses B Class A instantiates and calls methods on class B An instance of class B is passed into a method of Class A Containment (aggregation): A has a B Class A has an instance variable holding an instance of class B The lifetime of B is dependent upon A Containment implies uses Association: A and B are related Like containment but no lifetime dependency Inheritance: A is a kind of B A inherits from B Visual Programming - Information Systems Department, Design Principles Refactoring Refactoring is the process of reorganizing your design into a different set of types It s impossible to get a complex design right the first time Expect to refactor Plan on it! Roles and responsibilities Examples: Books, book shelves, librarian ADO.NET Visual Studio Visual Programming - Information Systems Department,

22 Design Principles UML Class Diagrams Graphical representation of class hierarchy and members Visual Programming - Information Systems Department, Design Principles UML Statecharts Statecharts (state transitions diagrams, STD) represent the actions that are possible in a system as a result of previous actions More abstract than flowcharts, which specify what actions will occur (an algorithm) Appropriate for workflow problems where the exact sequence of state transitions is unknown at design time Visual Programming - Information Systems Department,

23 Design Principles Use Cases A use case is a textual description of how a system will behave to accomplish a task A generalized scenario Main course of action Alternate courses of action Centered around an actor Visual Programming - Information Systems Department, Design Principles Patterns A pattern is a set of related objects that work together to solve a common problem Examples Factory Singleton Proxy Flyweight Iterator Decorator Façade Memento Adaptor Visual Programming - Information Systems Department,