Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

THE PROJECT APPROVAL

Approval of Project Manager Project Manager (Mr.Gamindu Hemachandra)

I certify that this thesis satisfies the requirements as a thesis for the degree of Bachelor of Science in Software Engineering. Advisor/Assessor (Ms Nadeera Ahangama)

I certify that I have read this thesis and that in my opinion it is fully adequate in scope and quality as a thesis for the degree of Bachelor of Science in Software Engineering. Supervisor (Mr. Udesh Amarasinghe)

Page i of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

ABSTRACT
The project is about to develop plug-in for Net beans IDE which facilitated drag and drop functionalities for Google web tool kit (GWT). Since currently this process has to be done with coding. This project is got that process into automated manner. Therefore developers tasks become effortless. This project has gone through GWT architecture, Net beans architecture in very details in order to come up with excellent technical foundation and also Java, GWT drag and drop mechanisms. To make sure that project is ended with successful manner similar systems studies for Swing GUI builder, Visual JSF and GWT designer preformed within the research phase. In order to apply software engineering principles efficiently software engineering methodology has been used. V model is the most suited methodology for this project. Finally NetBeans plug-in development methods are researched and put on the document and not only that under critical evaluation conceptual structure and conceptual UI design also represented in this document. Analyzing the project requirements and design with software engineering principles like using design patterns and developing using stabilized methodologies are also documented under this thesis. Those are the major areas that are documented in this project, for the final year project submissions.

Page ii of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

ACKNOWLEDGEMENTS
I would like to thank Mr. Udesh Amarasinghe for his continuous support and guidance in the preparation of this study. Without his invaluable supervision, all my efforts could have been short-sighted. I owe quite a lot to my family who provided me the chance to fulfill my career objectives and for the support throughout my studies. I would like to dedicate this study to them as an indication of their significance in this study as well as in my life. Finally, I am responsible for any errors that remain in this dissertation.

Page iii of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

TABLE OF CONTENTS
The project approval ....................................................................................................... i Abstract ......................................................................................................................... ii Acknowledgements .......................................................................................................iii Table of Contents .......................................................................................................... iv List of Tables ................................................................................................................ ix List of Figures ................................................................................................................ x Chapter One ................................................................................................................... 1 1.0 Introduction.......................................................................................................... 1 1.1 Problem Background and Problem Statement ....................................................... 4 1.2 Project Scope ....................................................................................................... 5 1.3 Project Objectives ................................................................................................ 6 1.3.1 Deliverables .................................................................................................. 6 1.4 Project Requirements ........................................................................................... 7 1.4.1 Hardware Requirements ................................................................................ 7 1.4.1.1 Minimum hardware requirements ........................................................... 7 1.4.1.2 Recommended hardware requirements .................................................... 7 1.4.2 Software requirements ................................................................................... 7 1.5 Conclusion on Chapter One .................................................................................. 8 Chapter Two .................................................................................................................. 9 2.0 Domain Research ................................................................................................. 9 2.0.1 Google Web Toolkit ...................................................................................... 9 2.0.2 Google Web Toolkit Architecture ................................................................ 11 2.0.2.1 Java to JavaScript compiler ................................................................... 12

Page iv of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

2.0.2.2 JavaScript Native Interface (JSNI) ........................................................ 13 2.0.2.3 Java Runtime Environment Emulation(JRE) ......................................... 13 2.0.2.4 GWT API ............................................................................................. 14 2.0.2.4.1 GWT Widget and Panel Library ..................................................... 14 2.0.2.4.2 Internationalization and Configuration Tools (I18N) ...................... 15 2.0.2.4.3 Remote Procedure Calling (RPC) ................................................... 15 2.0.2.4.4 XML Parser ................................................................................... 16 2.0.2.4.5 History Management ...................................................................... 16 2.0.2.4.6 JUnit Integration ............................................................................ 17 2.0.3 NetBeans Integrated Development Environment (IDE) ................................ 18 2.0.4 NetBeans Platform Architecture .................................................................. 19 2.0.5 Similar System Study .................................................................................. 21 2.0.5.1 For NetBeans ........................................................................................ 21 2.0.5.1.1 Swing GUI Builder (formerly known as Matisse) ........................... 21 2.0.5.1.2 Visual JSF ...................................................................................... 24 2.0.5.2 For Eclipse............................................................................................ 26 2.0.5.2.1 GWT Designer ............................................................................... 26 2.1 Technical Research ............................................................................................ 28 2.1.1 Software engineering methodologies ........................................................... 28 2.1.1.1 Waterfall Model.................................................................................... 28 2.1.1.2 V Model ............................................................................................... 31 2.1.1.3 Advantages of the V model ................................................................... 32 2.1.2 Drag and Drop ............................................................................................. 33 2.1.2.1 Drag and Drop in Java .......................................................................... 33 2.1.2.2 Drag and Drop in GWT ........................................................................ 35

Page v of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

2.1.3 Plug-in Development with NetBeans ........................................................... 36 2.1.3.1 Modules in NetBeans ............................................................................ 36 2.1.3.2 Versioning and Dependencies ............................................................... 38 2.1.3.2.1 Versioning ..................................................................................... 39 2.1.3.2.2 Dependencies ................................................................................. 39 2.1.3.2.2.1 Module Dependencies ............................................................. 40 2.1.3.2.2.2 Java Package Dependency ....................................................... 40 2.1.3.2.2.3 Java Version Dependency........................................................ 41 2.1.4 XML (Extensible markup language) ............................................................ 42 2.1.5 Design Patterns ............................................................................................ 44 2.1.5.1 State ..................................................................................................... 44 2.1.5.2 Observer ............................................................................................... 45 2.1.5.3 Composite ............................................................................................ 46 2.1.5.4 Decorator .............................................................................................. 47 2.2 Conclusion on Chapter Two ............................................................................... 48 Chapter three ............................................................................................................... 50 3.0 Project Requirement Specification ...................................................................... 50 3.0.1 Core functionalities ..................................................................................... 50 3.0.2 Enhanced functionalities .............................................................................. 50 3.0.3 Special functionalities .................................................................................. 51 3.1 Research Critical Evaluation and Conceptual Design.......................................... 52 3.1.1 Conceptually Structure of the plug-in .......................................................... 52 3.1.2 Conceptual UI for Plug-in ............................................................................ 53 3.2 Conclusion on Chapter Three ............................................................................. 53 Chapter Four ................................................................................................................ 54

Page vi of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

4.0 Analysis and Design ........................................................................................... 54 4.1 Analysis ......................................................................................................... 54 4.1.1 Use Case .................................................................................................. 54 4.1.1.1 Web Developer ................................................................................. 55 4.1.1.2 Web Designer ................................................................................... 56 4.2 Design ............................................................................................................ 57 4.2.1 Class Diagram ......................................................................................... 57 4.2.1.1 Overall Class Diagram ...................................................................... 58 4.2.1.2 Palette Class Diagram ....................................................................... 59 4.2.1.3 Editor Work Space Class Diagram .................................................... 60 4.2.1.4 Window Updater Class Diagram ....................................................... 61 4.2.1.5 Object Decorator Class Diagram ....................................................... 62 4.2.2 Sequence Diagram ................................................................................... 62 4.2.2.1 Overall Sequence Diagram ................................................................ 63 4.2.3 Activity Diagram ..................................................................................... 64 4.2.3.1 Overall Activity Diagram .................................................................. 64 4.3 Conclusion on Chapter Four ........................................................................... 65 Chapter Five ................................................................................................................ 66 5.0 Implementation .................................................................................................. 66 5.0.1 Platform features ......................................................................................... 66 5.0.2 Code snips ................................................................................................... 67 5.0.2.1 Layer.xml file ....................................................................................... 67 5.0.2.2 Entrypoint Java Template file ............................................................... 72 5.0.2.3 Entrypoint Form Template file .............................................................. 74 5.0.2.4 Entrypoint html Template file ............................................................... 74

Page vii of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

5.0.2.4 Button.palette_item file ......................................................................... 74 5.0.2.5 Bundle.properties file ............................................................................ 75 5.0.3 Deploy Information ..................................................................................... 77 5.1 Testing ............................................................................................................... 78 5.1.1 Test Cases ................................................................................................... 78 5.1.1.1 Overall Test Plans ................................................................................. 78 5.1.1.2 Component based test cases .................................................................. 79 5.2 Conclusion on Chapter Four ............................................................................... 80 Chapter Six .................................................................................................................. 81 6.0 Critical Evaluation ............................................................................................. 81 Reference ..................................................................................................................... 84 Appendix A ................................................................................................................. 89 1.0 Gantt chart ......................................................................................................... 89 2.0 Requirement analysis ......................................................................................... 90 2.0.1 Process of Requirement determination ......................................................... 90 2.0.1.1 Interviewing.......................................................................................... 92 2.0.1.2 Questionnaires ...................................................................................... 94 2.0.1.3 Observing decision maker behavior ...................................................... 95

Page viii of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

LIST OF TABLES
Table 1 Overall Test plan ............................................................................................. 79 Table 2 File creation .................................................................................................... 79 Table 3 palette loader ................................................................................................... 80 Table 4 - Trade-offs of open-ended and closed-ended questions ................................... 95 Table 5 - Advantages and Disadvantages of Observing approaches .............................. 96

Page ix of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

LIST OF FIGURES
Figure 1 - GWT Architecture ....................................................................................... 11 Figure 2 GWT Widget and Panel .............................................................................. 14 Figure 3 Conceptual NetBeans Platform Architecture ............................................... 19 Figure 4 NetBeans Architecture ................................................................................ 20 Figure 5 Overview of Swing GUI Builder ................................................................. 22 Figure 6 Palette area in Swing GUI Builder ............................................................... 23 Figure 7 Properties area in Swing GUI Builder ......................................................... 23 Figure 8 Working/Drawing area in Swing GUI Builder ............................................. 23 Figure 9 Inspector area in Swing GUI Builder ........................................................... 23 Figure 10 Overall Concept of Visual JSF .................................................................. 24 Figure 11 - Visual components of webpage designer .................................................... 25 Figure 12 Palette area Visual JSF .............................................................................. 25 Figure 13 Property area Visual JSF ........................................................................... 25 Figure 14 GWT Eclipse plug-in overview ................................................................. 26 Figure 15 - Waterfall methodology .............................................................................. 29 Figure 16 - VModel methodology ............................................................................... 31 Figure 17 - Drop API java awt package ........................................................................ 34 Figure 18 - Drag API java awt package ....................................................................... 34 Figure 19 - NetBeans Module Structure ....................................................................... 37 Figure 20 - Setting the module version ........................................................................ 39 Figure 21 - Definition of module dependencies ........................................................... 40 Figure 22- State Design Pattern .................................................................................... 44 Figure 23 Observer Design Pattern............................................................................... 45 Figure 24 Composite Design Pattern ............................................................................ 46 Figure 25 Decorator Design Pattern ............................................................................. 47 Figure 26 Conceptual structure of Plug-in ................................................................. 52 Figure 27 - Conceptual UI Design ................................................................................ 53 Figure 28 web developer use case ................................................................................ 55 Figure 29 web designer ................................................................................................ 56 Page x of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

Figure 30 Overall Class diagram .................................................................................. 58 Figure 31 palette class diagram .................................................................................... 59 Figure 32 Editor work space class diagram .................................................................. 60 Figure 33 window updater class diagram...................................................................... 61 Figure 34 object decorator class diagram...................................................................... 62 Figure 35 overall sequence diagram ............................................................................. 63 Figure 36 overall activity diagram ................................................................................ 64

Page xi of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

CHAPTER ONE
1.0 Introduction
Within the evolution time period of Stone Age to contemporary time period the most successful product human being invented was the computer, which is derived from the calculator. The main reason to develop such kind machinery is to compute the complex algorithms and mathematics problems within short period of time. Early Chinese people used stunning machine to calculate their mathematics which is named as Abacus. Napiers bone was one of the early days calculator which can perform multiplication, in 1642 Blaise Pascal invented new device which can calculate addition and subtraction for whole numbers. It was the first digital calculator and it is called Pascaline. After calculators are being developed up-to certain level first analog computer was created. According to hubpages(2011) Joseph-Marie Jacquard invented new concept for computers is called Punched Cards and it was used by all around the world at that time. The father of the modern computer Charles Babbage put his all efforts but finally he was ended with uncompleted machine but his idea was change the entire era of computer evolution and after delivery of number of clusters hands and minds help to created todays computer. After electromagnetic vacuum tube generation which is called first generation of computers, Introduction to semiconductors put the next step of computer revolution which is called the second generation(Techiwarehouse 2011), then third generation which is Integrated Circuits did the major difference in evolution of computers and then the fourth generation which is microprocessors generation came in-to picture where we stands today. When walking to the next generation of computer, computer programming is a crucial fraction. The reason to say such a statement is, from the first programmer (hubpages

Page 1 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

2011) Ada Augusta King to every programmer has put various sweat to the evolution of the computers, as same as we also have to put our effort. Computer programming has bunch of definitions, thefreedictionary(2011) says creating a sequence of instructions to enable the computer to do something is the computer programming stands for. And the same time according to businessdictionary(n.d) computer programming is the process of developing and implementing various sets of instructions to enable a computer to do a certain task. These instructions are considered computer programs and help the computer to operate smoothly. The language used to program computers is not understood by an untrained eye. Computer programming languages are used to write computer programs and there are several types of programming languages. One way of categorizing computer programming languages is generation wise. Object oriented, procedure-oriented, functional are also methods which are programming languages categorized. When

programming languages are becoming progress high level languages are made and when programming using those high level languages programmers used to use Integrated Development Environments (IDEs) such as Microsoft Visual Studio, Eclipse, NetBeans, Code Blocks etc. the reason behind to use Integrated Development Environments (IDEs) is when using such kind of programming tool syntax errors made by programmers will be lesser, compilers and interpreters will be bound to IDE so compiling will be easy and many other advantages are there rather than using terminal and text editor. Integrated Development Environments (IDEs) are getting popular, programmers are used to develop small piece of software and plug it in to the his/her favorite Integrated Development Environments (IDEs) which are called plug-in. The concept of plug-in was originate by Softbench around 1995. After that the tradition of plug-in became popular and most of the Integrated Development Environments (IDEs) used to have plug-in concept for their own Integrated Development Environments (IDEs). Nowadays plug-ins are so much popular among every software, not only for Integrated Development Environments (IDEs) for example Microsoft word has save as PDF plugPage 2 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

in, Web browsers like fire fox and chrome has their own plug-ins. Plug-in concept is an one of the most popular in these days in computer development constituency.

Page 3 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

1.1 Problem Background and Problem Statement

AJAX is a technological combination of JavaScript and XML. As natures rule every good has its own bad when developers use AJAX they have to write JavaScript code as well as java code, due that developers tend to make errors. So most of developers used to get rid of using AJAX technology. Google Corporation has come up with solution for the scenario called Google Web Tool Kit (GWT). As javapassion.com (2006) says GWT work as a java-to-JavaScript compiler. Chaganti (2006) pointed that it provides a programming framework that is similar to that used by developers building Java applications using one of the GUI toolkits such as Swing, AWT, or SWT. When considering all the essentials of GWT it plays a major role for AJAX. To develop GUI java uses Swing package and in NetBeans it supports drag and drop feature for that, but when comes to GWT application development in NetBeans it is still at the level of primitive, because it still requires programmers to manually enter each and every single keyword to develop the GUI. Because of that developing GWT applications takes time and after compilation only developer will see the output of the code. Drag and Drop plug-in will enable WYSIWYG concept and in this project main challenge to face is develop the plug-in that enables dragging and dropping objects into a form and then design the GWT applications user Interface.

Page 4 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

1.2 Project Scope

By today client-Server architecture web development has undergone a vast development up to the level of cloud computing with-in a very short period of time. Early days web sites were commonly used to share information among each other, Since their work load is increased, humans planned to use the internet as a market place. This evolvement reasoned the popularity of internet money transferring and sensitive data/information transferring over the web. Due that developers used to use different technologies instead of HTML and CSS and any other traditional. AJAX came into the picture because of web pages are keeping refresh/reload browsers. AJAX is concerned as the best solution for that and the same time it was a good solution for performance issues. The scope of this project is developing a plug-in for NetBeans that enables Drag and Drop functionality to GWT application. Scoped plug-in will have basic objects such as, o Label o Text Box o Check Box o Radio Button o Button o Combo Box o List Box o Integer Box o Long Box o Double Box Not only that these objects can be drag in to a form from object palette and also should be able to set the properties of each object using a property panel. At the same time for a dragged object the code will be automatically generated in Source view environment. Above listed objects will be the core functionalities means main scope.

Page 5 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

1.3 Project Objectives

1.3.1 Deliverables
By the end of this project the final deliverable will be fully functional plug-in which satisfies the following points, Dragging and Dropping Basic Objects in-to form and should be easily design user interface To drag and drop objects there should be palette in an organized manner such as basic objects, enhanced objects and special objects Dragged objects should be able to set basic properties using the property panel such as size of object, name of object and display name of object The panel called hierarchy shower panel show the hierarchy of the dragged objects and can facilitate changing the hierarchy of objects When mouse is right clicked the application facilitate writing the event handling methods

Page 6 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

1.4 Project Requirements

1.4.1 Hardware Requirements
For the system that is going to be developed, the basic hardware requirements that accomplish running NetBeans IDE is more than enough, because system is going to install as a plug-in. 1.4.1.1 Minimum hardware requirements Processor: 800MHz Intel Pentium III or equivalent Memory: 512 MB Disk space: 750 MB of free disk space(netbeans.org 2011)

1.4.1.2 Recommended hardware requirements Processor: 2.6 GHz Intel Pentium IV or equivalent Memory: 2 GB Disk space: 1 GB of free disk space(netbeans.org 2011)

1.4.2 Software requirements

The main part of this project is software based. According to the netbeans.org (2011) JDK 6 Update 13 or later is required. The 6.8 version of the IDE cannot be installed or run using JDK 5.0 and to run NetBeans any version the PC should have Java Development Kit (JDK) as on NetBeans version. That is the basic and minimum software requirement that required in this stage.

Page 7 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

1.5 Conclusion on Chapter One

Technology is growing day by day and software is one side of that development. When moving with the momentum software technology giving the birth to new technologies. How Technologies are been developed, what are the major reasons to construct machine called computer how it is been developed to the day which we seen today are talked under the first chapter. How the computer programmers are born and what are computer programming languages and who are the first programmers in the field of computer programming and not only that but also what are Integrated Development Environments (IDEs) are researched and documented in the first chapter. Next the introduction of computer, is computer programming and what is this project and why this project is documented. First of all, the problem background has been talked and then talked about the problem statement, which is why these kind of plug-in is required and what are the benefits which are developers getting by developing these kind of plug-in. Then scope of this project documented and then what are the project objectives and deliverables. Finally this chapter required hardware and software resources are documented.

Page 8 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

CHAPTER TWO
2.0 Domain Research
2.0.1 Google Web Toolkit
Java language is popular among vast vicinity of programmers because of easiness of coding and other remuneration which it gives. Because of that lot of developers tend to use Java technology for web development also, when client server architecture was urbanized to distributed/cloud computing levels; people anxious about human computer interaction principles and also effectives and efficiency of a system. At that altitude web page refreshing is a massive crisis because, for each and every transaction pages are refreshing which leads to time consuming, to overcome that developers use, technology called JavaScripting which helps them to surmount that condition. Java and JavaScripting are two different technologies and also the way the syntax structure is used. Most of the time for Java programmers are not good at writing JavaScripting code because JavaScripting is a scripting language and it is hard to identify errors occur in scripting languages. Because of that most of Java programmers tend to use only Java but not to use JavaScripting because of that nice technology from them is yield. Because of that Google incorporation found polite way to overcome that they developed a compiler which can compile Java source code in to JavaScripting code called Google Web Toolkit (GWT)( developerlife 2007). According to code.google(2011) Google Web Toolkit (GWT) is a development toolkit for building and optimizing complex browser-based applications. Its goal is to enable productive development of high-performance web applications without the developer having to be an expert in browser quirks, XMLHttpRequest, and JavaScript. GWT is used by many products at Google, including Google Wave and the new version of

Page 9 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

AdWords. It's open source, completely free, and used by thousands of developers around the world. According to linuxjournal(2009) first Google Web Toolkit public release was done May 2006. Since then GWT 1.0.21 to GWT 2.2.0( newest release Feb 2011) Google released thirty two releases by the side of different time periods(code.google n.d) including first milestones and first release candidates.

Page 10 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

2.0.2 Google Web Toolkit Architecture

Google Web Toolkit provides a rich set of tools to develop browser based applications. As in Hanson & Tacy(2007) GWT tools can be divided into those that are tied to the compiler, and the Java libraries that make up the GWT API which are shows in bellow figure.

Figure 1 - GWT Architecture

Source : GWT in Action Easy Ajax with the Google Web Toolkit(2007).

When walking though each and every element in this figure 1, first to look at is Java to JavaScript compiler

Page 11 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

2.0.2.1 Java to JavaScript compiler This part is the core in GWT architecture because this compiler converts Java code into JavaScript code. According to Hanson.R,Tacy.A(2007 ) the GWT compiler works differently than the standard Java compiler because it doesnt compile everything in the module; instead it only includes what is being used. GWT Java to JavaScript compiler has three different styles of resulting Java code into JavaScript code. First style is named as obfuscate (Hanson & Tacy 2007) and following code snap shows the result of it. function b(){return this.c + '@' + this.d();} and the Second style is named as pretty (Hanson & Tacy 2007) which gives code like bellow. function _toString(){ return this._typeName + '@' + this._hashCode(); } Third style is detailed (Hanson & Tacy 2007) which is looks similar to pretty but the addition is this style includes full class names and part of the JavaScript method name. function java_lang_Object_toString__(){ return this.java_lang_Object_typeName + '@' + this.hashCode__(); } The GWT complier requires Java source codes should meeting or according to the jdk syntax standards which are compiled to JavaScript source codes.

Page 12 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

2.0.2.2 JavaScript Native Interface (JSNI) Google Web Toolkit is used to write Java code instead of writing JavaScript code, but there can be situations that have to write JavaScript code, as Hanson & Tacy(2007) says that there is some super-fantastic JavaScript library that you want to use. That kind of situations programmer have to write JavaScript code. What JavaScript Native Interface dose is it allows to execute JavaScript from Java, as well as execute Java from JavaScript(Hanson & Tacy 2007). 2.0.2.3 Java Runtime Environment Emulation(JRE) When Google Web Toolkit compiler compiles Java source code, it need to access Java classes and other necessary libraries and programmers need to use functionalities available in core of java so to perform that in GWT, JRE Emulation is used. According to code.google(2011) Google Web Toolkit includes a library that emulates a subset of the Java runtime library. The list below shows the set of JRE packages, types and methods that GWT can translate automatically (according to current version GWT 2.2.0). java.lang java.lang.annotation java.math java.io java.sql java.util java.util.logging

and Hanson & Tacy(2007) pointed that this isnt as limiting as we have made it sound. In many cases you can get around the problem by using other Java classes, writing your own code to perform a specific function, or making direct use of the JavaScript API. As GWT gains momentum, it is likely a lot of these holes will be filled by either the GWT library itself or by open source libraries. Page 13 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

2.0.2.4 GWT API 2.0.2.4.1 GWT Widget and Panel Library GWT having large set of widgets and panels for programmers to use and one reason to GWT to popular among web developers is also this. The difference between panels and widget is panels are used to place/contain controllers and widgets are sort of controllers used by users. Consider the bellow figure, sender and email is listed in tabular format and to accomplish that the Grid panel is used and controllers used in this figure is text areas, so Grid panel is containing text area widget.

Figure 2 GWT Widget and Panel

Source: http://google-webtoolkit.googlecode.com/svn/javadoc/latest/com/google/gwt/user/client/ui/Grid.html Other significant truth about panels are; it is not only used for formatting the layouts but also a number of them can offer interactivity also.

Page 14 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

2.0.2.4.2 Internationalization and Configuration Tools (I18N) Internationalization is another functionality that GWT provides for developers to make sure that their applications are bear among other languages and data formats. According to code.google(2011) tutorial when translating user interface which is available in English to German, Programmer specifically will follow bellow steps, 1. Select an internationalization technique. 2. Internationalize by creating a translation for each language supported. 3. Localize by selecting the appropriate translation for the context (locale). And code.google(2011) says that GWT offers multiple internationalization techniques to afford maximum flexibility to GWT developers and to make it possible to design for efficiency, maintainability, flexibility, and interoperability in whichever combinations are most useful. And there are three major techniques of internalization available in GWT according to code.google(2011), 1. Static string internationalization 2. Dynamic string internationalization 3. Extending or implementing Localizable 2.0.2.4.3 Remote Procedure Calling (RPC) Communicating with server is an essential in browser based applications. Client side should fetch upcoming data from server for display, in normal client-server communication web pages are refreshing for each transaction and AJAX technology put that concept away using XMLHttpRequest object. Because of that traditional HTML refreshing is no longer a problem for developers and using JavaScript object XMLHttpRequest client can communicate with server. This allows client to talk with server asynchronously and code.google(2011) says that Each time traditional web

Page 15 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

applications talk to the web server, they fetch a completely new HTML page. In contrast, AJAX applications offload the user interface logic to the client and make asynchronous calls to the server to send and receive only the data itself. This allows the UI of an AJAX application to be much more responsive and fluid while reducing an application's bandwidth requirements and the load on the server. And GWT allows three implementation strategies to make asynchronous calls, which are listed as, i. ii. iii. Making Remote Procedure Calls (GWT RPC) Retrieving JSON Data via HTTP Making Cross-Site Requests for JSONP

These three different strategies are bringing into play according to the backend technologies. 2.0.2.4.4 XML Parser Extensible Markup Language (XML) is getting popular among developers last 8 to 9 years because of functionalities it holds and it became a part of daily lives of developers. Consider RSS feeds, SOAP and XML-RPC all of these are using XML. GWT provides a DOM based XML parser (Hanson & Tacy 2007) for GWT developers which are standardized by W3C. 2.0.2.4.5 History Management If back button is pressed when rich internet applications(RIA) is running, suddenly the fracture is happen, this is a gigantic criticism pointed for rich internet applications. To conquer situation GWT uses History Manager. What happened behind the wall is this History Manager add a hidden frame for clients UI and by using History object and HistoryListener, and by keeping record and does the work.

Page 16 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

2.0.2.4.6 JUnit Integration JUnit is a testing frame work for Java programming language and GWT Integrate the JUnit for GWTs testing framework without developing entirely new framework from the scratch. By implementing GWTTestCase to the test class and by overriding gwtModuleName() abstract method(google-web-toolkit.googlecode n.d) can perform the JUnit testing.

Page 17 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

2.0.3 NetBeans Integrated Development Environment (IDE)

Building a desktop application on top of the NetBeans Platform can save years of development time (netbeans.org 2011). NetBeans is an IDE which can help a mixture of diverse types of developers. It doesnt cater only for Java Standalone applications; it can productively help out to Java Enterprise and Web, Java Mobile, Ruby, PHP, Groovy, C/C++ and etc. NetBeans start journey from the hands of student project which is named as Xelfi in the Czech Republic in 1996 (netbeans.org 2011). The first ambition of the developers of Xelfi is write a Delphi-like Java IDE in Java, because of that it was written using Java language and Xelfi is the first Java IDE which is written in Java. According to netbeans.org (2011) Roman Stanek put his hand into the Xelfi project and with the agreement of both parties business was born and Jarda Tulach developed the basic architecture of the IDE which to develop network-enabled JavaBeans components and that leads to the current name NetBeans. Year 1999 was a remarkable year for NetBeans because NetBeans DeveloperX2 was released, supporting Swing and the same year Sun Microsystems put their eye on the NetBeans because there was a space to fulfill which is Sun Microsystems looked-for first-class Java development tool and they knew NetBeans is talented enough to do that(netbeans.org 2011). With the support of Sun Microsystems NetBeans became a open source project and in 2000 NetBeans launched NetBeans.org site and put a stable footstep on the programming world. In 2000 and 2001, a lot of work went into stripping out pieces that made the assumption that an application built on NetBeans was an IDE, so that the platform would be a generic desktop application suitable to any purpose. This work turned out to be healthy for the codebase of the IDE as well, encouraging a clean API design and a separation of concerns (netbeans.org 2011). Then after one by one NetBeans released versions and last stable version is NetBeans 6.9.1.

Page 18 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

2.0.4 NetBeans Platform Architecture

When the applications are scaling bulky and compound developers lean to utilize integrated development environments (IDEs). NetBeans is a one of the accepted IDE among Java development community. When diving into the NetBeans platform, it is a must to walkthrough architecture of NetBeans. Bck (2009) identified that in his book the definitive guide to NetBeans platform the basic building block of the NetBeans platform is a module and came up with conceptual structure for NetBeans IDE which is shown in bellow figure.

Figure 3 Conceptual NetBeans Platform Architecture

Source: The Definitive Guide to NetBeans platform(2009)

Module is defined by thefreedictionary(2011) as a portion of a program that carries out a specific function and may be used alone or combined with other modules of the same program. According to Bck (2009) a module is a collection of functionally related classes, together with a description of the interfaces that the module exposes, as well as a description of the other modules that it needs in order to function. The complete NetBeans Platform, as well as the application built on top of it, is divided into modules. Page 19 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

These are loaded by the core of the NetBeans Platform, which is known as the NetBeans runtime container. When some module is needed then because of this structure Netbeans allows developers to plug/install as vice versa. This is a conceptual level structure of NetBeans and NetBeans platform itself formed from a core modules which are help to start the development of an application. Bck (2009) attached bellow image as NetBeans architecture in his book.

Figure 4 NetBeans Architecture

Source: The Definitive Guide to NetBeans platform(2009)

NetBeans makes lot of APIs and services available for the developers and Bck (2009) says that the NetBeans Platform makes many APIs and service providers available, simplifying the development process considerably. And to carry out such a procedure NetBeans architecture it facilitates lot of help. Other fact is all of these are complete reusable components in the NetBeans Platform (Bck 2009).

Page 20 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

2.0.5 Similar System Study

Before you commence on something it is better to come across with good knowledge on surroundings and start it in which can cause to a better end, the reason to say something like that is, when you know the atmosphere it is easy to get understand about what is going to be in the next second so risk level is comparatively lower. Same rule applies for IT projects also. When it comes to IT, studying similar applications will give better idea about the surroundings and it can lead to successful end of that project. When studying about similar applications for this project there are so many plug-ins are available which can build GUI by dragging and dropping objects. NetBeans has its own plug-ins like Swing GUI Builder, Visual JSF, NetBeans UML, Open Swing, MagicDraw UML and iReport etc. Not only for NetBeans this plug-ins are available, other IDEs like Eclipse, has Microsoft Visual Studio also had their own plug-ins. In Project Management basics the "golden triangle" is a critical fixation and time fit in to one of them(helium 2011), because of that for this project, only a number of selected plug-ins are studied under similar system study which are Swing GUI Builder, Visual JSF plug-ins for NetBeans and GWT Designer plug-in for Eclipse. 2.0.5.1 For NetBeans 2.0.5.1.1 Swing GUI Builder (formerly known as Matisse) Design Swing GUIs by dragging and positioning GUI components from a palette onto a canvas. The GUI builder automatically takes care of the correct spacing and alignment. Click into JLabels, JButtons, ButtonGroups, JTrees, JTextFields, ComboBoxes and edit their properties directly in place. You can use the GUI builder to prototype GUIs right in front of customers (netbeans.org 2011). The way NetBeans developers specified how Swing GUI builder is functioning is above and when actually gone through it, provides the same functionalities as they say.

Page 21 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

This figure shows how it is looks like when it is installed to NetBeans,

Figure 5 Overview of Swing GUI Builder

Source: http://netbeans.org/images_www/v6/9/screenshots/gui-builder.png

The benefit of using Swing GUI Builder is it is customizable and it is easy to develop standard and custom GUI components, not only that Beans Binding technology is an added advantage for this. According to netbeans.org (2011) take advantage of Beans Binding technology and the Java Persistence API to create Swing desktop database applications more easily. Using the new Java Desktop Application project template, you can quickly set up a form that displays a database table and also enables you to modify the database. Bind a database table to an existing form by dragging a table from the Runtime window onto the form. Swing GUI builder can conceptually separate into our sections first section is palette, second section is working/drawing section and third is properties and fourth is inspector section. Following figures shows them respectively.

Page 22 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

Figure 6 Palette area in Swing GUI Builder

Figure 7 Properties area in Swing GUI Builder

Source: http://netbeans.org/features/java/swing.html

Source: http://netbeans.org/features/java/swing.html

Figure 8 Working/Drawing area in Swing GUI Builder

Figure 9 Inspector area in Swing GUI Builder

Source: http://netbeans.org/features/java/swing.html

Source: http://netbeans.org/features/java/swing.html

Page 23 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

2.0.5.1.2 Visual JSF Visual JSF is a UI builder plug-in for NetBeans and Winston .P(2006)says that Netbeans Visual JSF Web Application is a strict Java EE Application and follows the Java Server Faces standards. Swing GUI builder is used for Java Standalone level application UI development and Visual JSF is used for Java Web and EE application UI development. Winston .P(2008) said that in Visual JSF, Visual designing is limited to JSP based JSF web pages created by Visual JSF framework. The framework itself is integral part of Visual Web. Following figure gave overall concept about Visual JSF.

Figure 10 Overall Concept of Visual JSF

Source: http://wiki.netbeans.org/wiki/images/1/12/WpdDesignConcepts_WebPageDesigner.pdf

The way Visual JSF different than other plug-ins because this is a more than plug-in can described as framework. According to Winston .P(2008) in Visual JSF, the loader and Data Objects (JSP & Java) are defined by the VW framework itself. When moving into the visual components of webpage designer part it has basically five parts which are Formatting toolbar, HTML Designer, CSS visual aid, Palette, Navigator and Property sheet. Following figure shows the visual components of webpage designer(Winston .P 2008). Page 24 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

Figure 11 - Visual components of webpage designer

Source: http://wiki.netbeans.org/wiki/images/1/12/WpdDesignConcepts_WebPageDesigner.pdf

Following figures are screen shots of Visual JSF UI designer palette and property areas.

Figure 13 Property area Visual JSF Figure 12 Palette area Visual JSF

Source : http://4.bp.blogspot.com/_UZzjPhczYTc/ SdQoLjjzvCI/AAAAAAAAAuo/AsQxvs b5Ki4/s320/tabletowGroup.png

Source: http://blogs.sun.com/branajam/resource/pale tte.png

Page 25 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

2.0.5.2 For Eclipse 2.0.5.2.1 GWT Designer GWT is popular among web developers because of its functionalities but at the first releases, programmers had to manually code for UI. Then GWT Designer plug-in came developed only for Eclipse which is shown in bellow figure.

Figure 14 GWT Eclipse plug-in overview

Source: http://code.google.com/webtoolkit/tools/gwtdesigner/userinterface/images/userinterface.png

GWT Designer is a powerful and easy to use bi-directional Java GUI designer that makes it very easy to create GWT GUI applications without spending a lot of time writing code to display simple forms. With GWT Designer you can create complicated windows in minutes. Use the visual designer and Java code will be generated for you. You can easily add controls using drag-and-drop, add event handlers to your controls,

Page 26 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

change various properties of controls using a property editor, and internationalize your app and much more (code.google 2011). Code.google(2011) says that GWT designer plug-in is developed for Eclipse to develop GWT application UI in What You See Is What You Get(WYSIWYG). And they divided GWT to two most important parts, major user interface components and major features. Under user interfaces they subdivided parts as following, Design View Source View Structure View Component Tree Property Pane Palette Toolbar Context Menu And major features also subdivided into following, Bi-directional Code Generation Internationalization (i18n) / Localization Custom Composites & Panels Factories Visual Inheritance Event Handling Menu Editing Morphing

Page 27 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

2.1 Technical Research

2.1.1 Software engineering methodologies
Developing software is not just a coding. It has to come through several steps to gain good quality and efficiency. When the competence of the project enlarged, the project is getting complicated with developing. Because of that it is very important to following some development methodology to develop large scale software development methodology. Software development methodology is a framework for develop software. Because of that bunch of advantages are gotten. This project is used couple of software development methodologies which are waterfall model and V model. This section is describing those methodologies and how those are applied in the project. 2.1.1.1 Waterfall Model The waterfall model is a sequential design process which has several phases. These phases are followed one after another which means upper phases have to complete after come to the lower phase. Following figure shows the phases of the waterfall model.

Page 28 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

Figure 15 - Waterfall methodology

Source : General overview of waterfall model (buzzle, 2011)

According to the above figure basically there are 6 phase in waterfall model. Those are contained with several processes to achieve success in the project. 1. Requirement gathering and analysis. In this phase every single requirements have to be capture. Those requirements need to be analyzed to come up with excellent software design in next phase. Also requirement gathering are done in this phase using several technique such as interweaving, questioners, concept maps, repertory grids etc. gathered requirements are analyzed. 2. System design This phase is responsible for come up with excellent system design specifications for the implementation phase. Several design techniques are used to design. This is also phase generating whole system specification and overall system architecture. 3. Implementation

Page 29 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

This phase is responsible for implementing the system which is designed. Futures of the system developed one by one and that output will test and integrated together in next phase. 4. Testing Software testing is most important because each and every component have to be tested. Each unite have to test with unit testing and then integrate them together. 5. Deployment of the system The finalized system is deploying in this phase. There are several deployment methods such as direct manipulation, past, pilot etc. relevant manipulation technique have to be selected and used in this phase. 6. Maintains In this phase system errors are captured and those are use full when redeveloping the system. Traditional waterfall model is now obsolete because of several reasons. There are bunch of problems which affected to waterfall model to obsolete. Those are, Inflexible partitioning of the project into distinct stages. This makes it difficult to respond to changing requirements of the project No fabrication steps Waterfall model takes a static view of requirements Unrealistic separation of specification from design

So waterfall model is not suitable for this project due to the high risk of errors. This project is about implementing plug-in there for quality of the software is most important. Because of that more testing have to include to the development process. V model is the extended version of waterfall model which has been included excellent testing phase over the development life cycle. Page 30 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

2.1.1.2 V Model V model is special software development methodology which is extended version of waterfall model. This is commonly used to identify the relationship between the development and testing phases because in this model testing is major part. Following figure shows the steps of the v model.

Figure 16 - VModel methodology

Source: onestoptesting.com, 2011

Testing is very critical in this model. Eventually from V model provides errors free application to the user because testing is started while staring of the project. There are many advantages with v model which are describing bellow.

Page 31 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

2.1.1.3 Advantages of the V model Projective when defect tracking Avoid down flow of the defect Less time needed for development of the project since the test team involves early stages of the project. Can be developed very good understand of the project at the very beginning. After going through all the models of software developing modules eventually the V model is the most suitable software development method because of the testing phase which is used in the V model. Because of the project is about developing plug-in for Net beans which is more technical and high efficiency and accuracy is needed. Therefore using V model provide best testing to the project so technically quality of the project very well maintained through development process.

Page 32 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

2.1.2 Drag and Drop

2.1.2.1 Drag and Drop in Java Drag and Drop is provides ultimate interactivity to the application, when looking at the basics of how drag and drop is working java. First to put head is what is Drag and Drop (DnD) Eckstein et al(1998) says that the term drag and drop refers to a GUI action whereby the end user picks up an object such as a file or piece of text by pressing the mouse button down on that object. Then without letting up on the button, the user drags it over some area of the screen and lets up on the mouse button to drop the object. First time Java 2 platform release the Drag and Drop stable release drag and drop not so much popular among the users. According to Eckstein et al (1998) Until the Java 2 platform hit the streets, drag and drop support (specifically support for interacting with the native windowing system underneath the JVM) was lacking. The ability to let users drag a file from their file choosers into your application is almost a requirement of a modern, commercial user interface. The java.awt.dnd package gives you and your Java programs access to that support. Now you can create applications that accept information dropped in from an outside source. You can create Java programs that build up drag gable information that you export to other applications. And of course, you can add both the drop and the drag capabilities to a single application to make its interface much more rich and intuitive. When talking about Drag and Drop in Java first to look is Drop API and Eckstein et al (1998) provide the following figure to describe how drop classes fit to each other in java.awt.dnd package.

Page 33 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

Figure 17 - Drop API java awt package

Source: http://oreilly.com/catalog/jswing/chapter/dnd.beta.pdf

When dropping a component there should be dragged component so following figure shows Drag API for java.awt.dnd package.

Figure 18 - Drag API java awt package

Source: http://oreilly.com/catalog/jswing/chapter/dnd.beta.pdf

Page 34 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

2.1.2.2 Drag and Drop in GWT According to Geary & Rob(2007) Until now, drag and drop for Web applications has, for the most part, been limited to specialized JavaScript frameworks such as Script.aculo.us and Rico. No more. With the advent of GWT, we have drag-and-drop capabilities in a Java-based Web application framework. Although GWT does not explicitly support drag and drop (drag and drop is an anticipated feature in the future), it provides us with all the necessary ingredients to make our own drag-and-drop module.

Page 35 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

2.1.3 Plug-in Development with NetBeans

2.1.3.1 Modules in NetBeans Modules are what make the NetBeans IDE extensible. The IDE consists of a thin layer known as the core on top of which are modules that provide most of the features you use (Boudreau & Glick et al 2002). The NetBeans module system is responsible for managing all modules in the application. It is also responsible for tasks such as creating the class loader, the loading of modules, and their activation and deactivation. The concept of the NetBeans module system is based, as far as possible, on standard Java technologies. The basic idea of the module format originates in the Java Extension Mechanism. The fundamental ideas of the Package Versioning Specification are used to describe and manage dependencies between application modules and dependencies of system modules (Bck .H 2009). NetBeans module (or plug-in module) is a group of Java classes interacting with the NetBeans APIs(NetBeans Application Programming Interfaces)that provides an application with a specific feature(Kogent Solutions Inc 2008). Lot of people begins the chapter to opening to NetBeans module as converse in the above clauses. For the first time NetBeans IDE 5.0 allowed plug-in development. According to Boudreau & Glick et al (2002) a module is a JAR filea Java archive containing a set of class and other files that make up the module. What makes it a module is a set of special tags in the JAR manifest that mark it as a module, and tell the IDE what to do to install it. If you look in $NB_HOME/ modules/ , you will find quite a few JAR files. These are all of the modules that came with the IDE. The JAR files making up the modules that are part of a distribution of NetBeans physically live in the modules/ subdirectory underneath the directory it is installed in ($NB_HOME/modules). NetBeans has a concept of the user directory, which is where user-specific settings are stored. If you download a module using the update center, that module will be stored in the modules/ subdirectory of your user directoryso that a module you download wont Page 36 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

suddenly appear to everyone else running that copy of NetBeans. NetBeans plug-ins are having .nbm extension with it, which is stands for NetBeans Module.

Figure 19 - NetBeans Module Structure

Source: The Definitive Guide to NetBeans platform 2009

Above figure shows how simple is the structure of a module, manifest file, layer file, class files and resource part. There are several module types are available and these configurations are available in XML configuration file and it contains name, version and location same time at which point this module should lorded also. Following is a sample XML configuration file taken from Bck .H(2009) book the Definitive Guide to NetBeans platform. <module name="com.galileo.netbeans.module"> <param name="autoload">false</param> <param name="eager">false</param> <param name="enabled">true</param> <param name="jar">modules/com-galileo-netbeans-module.jar</param> <param name="reloadable">false</param> <param name="specversion">1.0</param> </module>

Page 37 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

If the values in eager and autoload is false then the module is a regular type and it loaded in the application start. Autoload type modules are only loading at the level of when another module is requesting them. These type of loading is matching to lazy-loading principles. Eager modules are (Bck .H 2009) only loaded when all dependencies are met. This is another option to minimize starting time. For example, if module X depends on the modules A and B, which are not available, it makes no sense to l oad module X. According to Kogent Solutions Inc (2008) there is a development cycle for NetBeans module development. Setting up the module Developing the module Building the module Trying out the module Distributing the module

NetBeans IDE has three project templates to develop plug-in modules, which are, Module Project Module Suit Project Library Wrapper Module Project

Default method of creating modules are Module Project template and in special cases like depending on external JAR files then Library Wrapper Module template is used and Module Suit template is used when creates a template for set of independent plug-in modules and library wrapper modules, which are going to deploy in together. 2.1.3.2 Versioning and Dependencies When module is developed it should be consistent and maintainable to do so versioning and dependencies techniques are used.

Page 38 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

2.1.3.2.1 Versioning To guarantee compatibility between dependencies, you must define versions. In that regard, there is the major release version, the specification version, and the implementation version. These versions are based on the Java Package Versioning Specification and reflect the basic concepts of dependencies (Bck .H 2009).

Figure 20 - Setting the module version

Source: Definitive Guide to NetBeans platform 2009

2.1.3.2.2 Dependencies Based on these various versions, define your dependencies. To that end, three different types of dependencies are available: a module depends on a module, a package, or a version of Java (Bck .H 2009).

Page 39 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

2.1.3.2.2.1 Module Dependencies

Figure 21 - Definition of module dependencies

Source: Definitive Guide to NetBeans platform 2009

In this window, use Add Dependency to add dependencies to your module. The NetBeans module system offers different methods to connect dependencies to a particular module. In the simplest case, no version is required. That means there should simply be a module available, though not a particular version; although where possible you still specify a version: OpenIDE-Module-Module-Dependencies: com.galileo.netbeans.module2 (Bck .H 2009). 2.1.3.2.2.2 Java Package Dependency NetBeans lets you set a module dependency on a specific Java version. A dependency of this kind is set in the manifest file: OpenIDE-Module-Package-Dependencies: javax.sound.midi.spi > 1.4 (Bck .H 2009).

Page 40 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

2.1.3.2.2.3 Java Version Dependency If the module depends on a specific Java version, such as Java 5, specify that in the module properties under Properties Sources, using the Source Level setting. Aside from that, you can require a specific version of the Java Virtual Machine: OpenIDE-Module-Java-Dependencies: Java > 1.5, VM > 1.0 (Bck .H 2009).

Page 41 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

2.1.4 XML (Extensible markup language)

XML is stand for Extensible markup language. According to w3schools (2011) XML is a markup language such as HTML. But XML is not replacing the HTML; XML is designed for carry data but not to display data like HTML. Furthermore w3schools stated that XML do not have predefined tags user have to define own tags. This capability is giving more flexible to user develop systems with XML. Following are goals of XML and HTML. XML and HTML were designed with different goals: XML was designed to transport and store data, with focus on what data is HTML was designed to display data, with focus on how data looks

(w3schools 2011) NetBeans (2011) website has mentioned that NetBeans has capability to support and tool to work with various XML documents such as XML Schema, WSDL, BPEL, XSLT, CSS, DTD and XML. Furthermore they have mentioned that NetBeans has provided tools for various ways for editing, visualizing there documents. In case of relationship between OOP and XML there are numbers of advantages are achieved. This is proven with that statement which is follows. I see great potential for integrating XML documents with object-oriented application programs. First, the structure of XML documents can be very easily parsed into objects that can be programmatically manipulated. Second, XML document objects can be commingled with other application objects to create hybrid Web-Object systems (Object Magazine. 2007)

Page 42 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

XML is provided lot of advantages for programming. As example GUI is more flexible and can be developed the GUI more interactively. NetBeans plays a big role with XML, when creating GUI it saves data as XML and then uses the form info XML files and uses freemakers to build fast GUI. Even NetBeans Palette uses XML file to save palette items and palette item data.

Page 43 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

2.1.5 Design Patterns

2.1.5.1 State The sate if an object is a combination if the current values of its attributes. When you call a set- method, you typically change an objects state, and an object can change its own state as its methods execute.(Metsker 2002) Furthermore Mestsker (2002) have mention that state is important with behavior of the object. This pattern is talk about behavior of the software. And this is representing state of the object during runtime of the program. That will be helpful in terms of identifying best ways of the program during running time. Software can be well design with this because we can see what is happing when the software is running. Following chart provide how state is important.

Figure 22- State Design Pattern

Source: http://www.lepus.org.uk/ref/companion/State.xml

Page 44 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

2.1.5.2 Observer Define a one-to-many dependency between objects so that when one object changes state, all the dependents are notified and updated automatically (GoF p.293) As mentions in above statement in this pattern have capability to observe object within the program and make action according to that. This advantage can be used in any situations as user want. Following are some of situations which observer can be used. When an abstraction has two aspects, one dependent on the other. Encapsulating these aspects in separate objects lets you vary and reuse them independently. When a change to one object requires changing others, and you don't know how many objects need to be changed. When an object should be able to notify other objects without making assumptions about who these objects are. In other words, you don't want these objects tightly coupled.(IBM Research 2007) With these situations it is very clear, usage of the Observer design pattern. Following figure will show the structure of the Observer design pattern.

Figure 23 Observer Design Pattern

Source: http://www.research.ibm.com/designpatterns/example.htm

Page 45 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

2.1.5.3 Composite A composite is a group of objects in which some objects may contain others; thus, one object may represent groups, and another may represent an individual item. (Metsker 2002) According to above statement it is clear the composite design pattern work with bunch of objects. Those objects are interacting each other. Following statement provide more strong evidence for that concept which is mention above. Compose objects into tree structures to represent part-whole hierarchies. Composite lets clients treat individual objects and compositions of objects uniformly. (Javaworld 2011) Furthermore javaworld (2011) has mentioned that implementing composite is effect less when comparing to other design patterns. Following figure is shows the structure of the composite model.

Figure 24 Composite Design Pattern

Source: http://www.javaworld.com/javaworld/jw-09-2002/jw-0913-designpatterns.html

Page 46 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

2.1.5.4 Decorator Decorator is about wrapping the object in runtime. With the statement of the decorator pattern relies on polymorphism, but decorator combines polymorphism with delegation to let you extend and objects behavior (Metsker 2002) The decorator pattern applies when there is a need to dynamically add as well as remove responsibilities to a class, and when sub classing would be impossible due to the large number of subclasses that could result. (oodesign n.d) Following figure provide diagram for show structure of the Decorator design pattern

Figure 25 Decorator Design Pattern

Source: http://www.oodesign.com/decorator-pattern.html

Page 47 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

2.2 Conclusion on Chapter Two

Scripting languages are popular in most of the web development and JavaScript is one among those, when developers develop using scripting languages and normal programming languages it is hard to move in-between programming languages like Java, C++ to scripting languages. In web technology JavaScript is the scripting language which is vicinity of developers are used to use. As mentioned in above there is a difficult for programmers to shift between languages and human being is used to make errors in memorizing keywords etc. Google made solution on that called Google Web Toolkit (GWT), which is a compiler for Java to JavaScript. And it is capable to compile source codes like Java to JavaScript and the main advantages of using compilers like GWT is when developing using only one type of language it make easier to the programmers. When diving in to the GWT and its technology can be identify as that it is more likely works with AJAX technology also. The Architecture of GWT has 3 major parts and it includes 6 APIs. Under the topic of GWT architecture, inside and outside of those each element is talked by me. Without his tools craftsman is not fully efficient and time wasting, as same as software engineers/developers are used to various tools. Integrated development environment (IDE) is a tool for a developer and Netbeans IDE is one of them. Netbeans architecture is extremely important fact when developing a plug-in for Netbeans and topics which comes under Netbeans Integrated Development Environment (IDE) and Netbeans

Platform Architecture talked about the in detail history and architecture of Netbeans IDE. Similar system study is the chapter which talked similar plug-ins and systems that are available in the existing environment. Swing GUI Builder (formerly known as Matisse) is the most popular among Drag and Drop UI development plug-in for Netbeans. And other similar systems talked under the topic are Visual JSF and GWT Designer (for eclipse). When developing a plug-in for Netbeans, XML (Extensible markup language) plays a very big role. The reason to say such XML is used to save data, to transport data Page 48 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

and to create GUI. XML topic is included the brief discussion on Extensible markup language technology. Software engineering practices are highly important in software development, methodologies are the best practice that developers can use and Waterfall and V model methodologies are talked in this project and those are the methodologies that are used in this project. There are lot of advantages of using V model with these type of development one of them are testing is higher in V model compare to other methodology. Drag and Drop functionalities in software engineering provides lot of easygoing to the user. Java has its own drag and drop mechanisms while GWT follows own techniques and those are also documented in the topics. Module development in NetBeans takes another chapter in this thesis and it has types of module developments such as Module projects, Module Suit Projects and Library Wrapper Module Projects not only that Version and Dependencies also has major impact on NetBeans module development. Design Patterns are the core of software engineering and in this project State, Observer, Composite and Decorator patterns are researched and applied in this project. The further details of using design patterns are talked in the design chapter and figures will show how design patterns are applied to the plug-in to make sure system design and system get fully accurate software engineering development.

Page 49 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

CHAPTER THREE
3.0 Project Requirement Specification
3.0.1 Core functionalities
Core functionalities of this plug-in will be, This plug-in will have 02 basic views called source view and design view and developer can move between working environment Automatic code generation will be happen in source view environment when a object is added on design view Following objects will be available as components to be drag and drop o Label o Text Box o Check Box o Radio Button o Button o Combo Box o List Box o Integer Box o Long Box o Double Box

3.0.2 Enhanced functionalities

Following objects will be available as a enhanced components to drag and drop o Absolute Panel o Flow Panel o DockLayoutPanel o DockPanel

Page 50 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

o Horizontal Panel o Vertical Panel

3.0.3 Special functionalities

Following functionalities will be available as special functionalities o Property Changer Panel o Component hierarchy shower Panel o Right click Event Hander for basic objects To develop this plug-in one of the Java language will be preferred by me.

Page 51 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

3.1 Research Critical Evaluation and Conceptual Design

Google Web Toolkit(GWT) plug-in development plan or method is first myself have to research on what are the available techniques to develop plug-in for NetBeans. When researching on that found that NetBeans module development method is the most appropriate way to develop this kind of plug-in. As talked in above chapters using NetBeans functionalities to develop plug-in.

3.1.1 Conceptually Structure of the plug-in

GWT Designer Plug-in

Property & Inspector

Platte

Working Area

Figure 26 Conceptual structure of Plug-in

Page 52 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

3.1.2 Conceptual UI for Plug-in

Figure 27 - Conceptual UI Design

3.2 Conclusion on Chapter Three

This chapter simply included the information about the project specifications which are the core functionalities available in developed version of plug-in and it has three categories, core, enhanced and special functionalities. Core functionalities like create new GWT file and Show objects in palette and allow them to drag in-to the form which is created. And other also two categories have their own specifications. Then in this chapter critically analyses and designed a conceptual level UI design and structure of the plug-in. So this chapter includes those requirement specifications.

Page 53 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

CHAPTER FOUR
4.0 Analysis and Design
4.1 Analysis
Analyzing is one of the most crucial part in software engineering the reason to say such is if analyzing is went with small mistake then the entire development will follow the same. In software engineering best practices there are several ways to analyze the problem in another words, translate human problem in-to computer problem. With Object oriented concepts people came up with nice and solid way to analyze the problems which is called Unified modeling language (UML). One way to analyze the real world problem is UML and in this project UML is the main analyzing tool which is used. 4.1.1 Use Case According to Objectmentor(1998) Use cases describe the behavior of the system when one of these actors sends one particular stimulus. This behavior is described textually. It describes the nature of the stimulus that triggers the use case; the inputs from and outputs to other actors, and the behaviors that convert the inputs to the outputs. The text of the use case also usually describes everything that can go wrong during the course of the specified behavior, and what remedial action the system will take. This problem having two major users, who are web developer and web designer and following use case diagrams talked about the use case on those two users.

Page 54 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

4.1.1.1 Web Developer

Figure 28 web developer use case

Web developers have three different tasks to perform in web application development which are, Work with Database Generate source code for application Test the system

When developing application web developer have to write code for User Interface as well as middle-ware such as Java JSP, Visual C# and PHP. Complex application in web tier is commonly written using Java JSP. Working with Database for web developer is common task reason to say such is each and every data save is happen in databases like Mysql, Oracal, MSSQL etc. Testing of a system is essential and the rule applies for the web developer also so these tasks also have to perform by him to web developer.

Page 55 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

4.1.1.2 Web Designer

Figure 29 web designer

Web designers are more concentration is applied in the area of user interface and web designers have basically three tasks to perform and these tasks are for the plug-in which is going to be developed. Design web interface Develop web interface Generate source code for user interface

Design web interface is more or less paper based work that web designers does, and how buttons are place, where buttons are place, why this image not other one is considered in this level. Develop web interface is computer based source code generation and CSS, Java Script and other languages are used to develop the interface is comes under this. Generate source code for user interface is separate task which is using necessary tags and develop the user interface.

Page 56 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

4.2 Design
Design is one of the critical phases in software development, and what happened in this phase is the requirements which are identified and analyze are going to put in-to the paper based computer development. Unified modeling languages (UML) is the one which is used in this project the reasons to select such is; this project is going to be developed with Java language. Java is an object oriented language and UML is best tool to use when developing using object oriented languages. 4.2.1 Class Diagram According to visual-paradigm (2011) Class diagram is the most widely used diagram in modeling object-oriented system. A class diagram shows a set of classes, interfaces, associations and generalizations. Package is commonly used model element for organizing elements in class diagram. Class diagrams are not just for visualizing and documenting structure models but also for constructing executable system with forward, reverse and round-trip engineering. There is also a synchronization engine for generating and updating entity relationship diagram from class diagram. In this thesis Overall class diagram, pallet class diagram, editor work space class diagram, window updater class diagram and object decorator class diagrams are designed by myself and the following topics will talked in detail about each and every component of those individuals.

Page 57 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

4.2.1.1 Overall Class Diagram

Figure 30 Overall Class diagram

This is the overall class diagram for GWT designer plug-in for NetBeans and the palette part, editor parts and other components are in detail and separately talked in other diagrams.

Page 58 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

4.2.1.2 Palette Class Diagram

Figure 31 palette class diagram

This figure shows how palette items are loaded in to the palette and these classes are following the composite design pattern also. What happens with in the classes is child items are realized the palette and paletteRootItemLoader also does the same as well as it has composite connection with the palette class. Then without one by one child class loading this palette can load data items fast and easily. As in research chapter composite design pattern this also follows the same methods to load the data/ child nodes to the palette and this is the software engineering best practice to load item to palette and use palette items.

Page 59 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

4.2.1.3 Editor Work Space Class Diagram

Figure 32 Editor work space class diagram

Editor work space has two modes to switch which are called source view and designer view. When switching among these two the loading and shifting should be accurate as well as efficient. So this is the class diagram which is designed to shift between two modes and editor uses editorToggle class send which mode window should have the state. Both source and designers are implementing the editorToggle so views can collaborate with the editor and possibly change the editor objects easily. This is using the State design pattern to perform accurate software engineering principles.

Page 60 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

4.2.1.4 Window Updater Class Diagram

Figure 33 window updater class diagram

Window updater is when objects are dragged and dropped in-to the UI or when changes the source code the views should get updated, that task is performed by using the windows updater component. This is using the standards of design pattern which is Observer design pattern. In this classes when object is added to editor by client side then view class will get notified and it will update the both views which are source and design view in this plugin.

Page 61 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

4.2.1.5 Object Decorator Class Diagram

Figure 34 object decorator class diagram

Object Decorator will use when objects are customizing or decorating. Decorating means adding extra features like color, icon images etc. This also follows the design pattern rules comes under decorator design pattern and designed the class diagrams according to the plug-in which can use in fully efficient way. 4.2.2 Sequence Diagram Altova says that (2005) a sequence diagram can map a scenarios described by a use case in step by step detail to define how objects collaborate to achieve your applications goals. A lifeline in a sequence diagram represents an object and shows all its points of interaction with other objects in events that are important to it. Lifelines start at the top of a sequence diagram and descend vertically to indicate the passage of time. Interactions between objects messages and replies are drawn as horizontal direction arrows connecting lifelines. In addition, boxes known as combine fragments are drawn around sets of arrows to mark alternative actions, loops, and other control structures.

Page 62 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

4.2.2.1 Overall Sequence Diagram

Figure 35 overall sequence diagram

This diagram shows the run time overall sequence of GWT designer plug-in, how the objects are calls to each other and works. Sequence starts with the starting NetBeans and when GWT modes node there are two options available and source or design one of them can be use to develop the GWT application.

Page 63 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

4.2.3 Activity Diagram Ericsson.M(n.d)says In its basic form, an activity diagram is a simple and intuitive illustration of what happens in a workflow, what activities can be done in parallel, and whether there are alternative paths through the workflow. 4.2.3.1 Overall Activity Diagram

Figure 36 overall activity diagram

This figure is about overall activity diagram for GWT designer plug-in and first task is start the NetBeans for development and then select the GWT development. In the selection there are two modes are available which are design and source user can select one of them and develop the system and compile the system and then activity terminates.

Page 64 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

4.3 Conclusion on Chapter Four

Software development has basically four phases which are analyze, design, implement and test. This chapter holds the information on analyzing the project and designs the project. In this chapter there are two parts and first part is analyzing and second is design. Use cases are important in analyzing and under the analyzing part in this thesis those are talked. Following to use case analyzing is performed and then headed to the design fraction. Unified modeling languages are converse under that and then started to design the application. Class diagrams are widely used in object oriented languages and this project also uses the object oriented languages so it also follows the same imperative. Overall class diagram is figured and discussed and then component by component is taken and then discussed. All of those designs are done according to the design patterns because those can do a major impact on implementation and testing also. The main reasons to use those solid level patterns and design are then this thesis can be following the standards of software engineering and as well as the system can provide the best solution for the problem. Sequence diagrams and activity diagrams also thrash out under this chapter and Overall sequence diagram for running GWT designer plug-in and Overall activity diagram for same circumstances is outline in the topic under design. All those details are argued in this chapter and this is a conclusion for this chapter.

Page 65 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

CHAPTER FIVE
5.0 Implementation
Implementation is the phase that really producing the application. According to techiwarehouse(2004) in the implementation phase, the team builds the components either from scratch or by composition. Given the architecture document from the design phase and the requirement document from the analysis phase, the team should build exactly what has been requested, though there is still room for innovation and flexibility. For example, a component may be narrowly designed for this particular system, or the component may be made more general to satisfy a reusability guideline. The architecture document should give guidance. Sometimes, this guidance is found in the requirement document.

5.0.1 Platform features

NetBeans itself has lot of platform features such as, Modular runtime container Window system Loose coupling and selection management System file system Data management

And these are the core platform features of NetBeans and when putting the eye of GWT plug-in it also follows the above core features because it plugged to NetBeans and other than to those there are couple of features which plug-in itself follows. One Click GWT Source codes file creation for EntryPoint, Dialog, PopupPanel and Composite. One Click GWT UI creation for EntryPoint, Dialog, PopupPanel and Composite.

Page 66 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

GWT panels and controllers to drag and drop

When looking at the development environment of this system. It is been developed using Netbeans 6.8 and Ubuntu 11.04 used as the operating system.

5.0.2 Code snips

This topic will contain the samples of source codes which are available in the GWT designer plug-in. 5.0.2.1 Layer.xml file <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE filesystem PUBLIC "-//NetBeans//DTD Filesystem 1.1//EN" "http://www.netbeans.org/dtds/filesystem-1_1.dtd"> <filesystem> <folder name="Templates"> <folder name="GWT"> <file name="GWTEntryPointForm.java" url="NewGWTForm_java"> <attr name="SystemFileSystem.localizingBundle" stringvalue="org.netbeans.modules.form.resources.Bundle"/> <attr name="position" intvalue="200"/> <attr name="template" boolvalue="true"/> <attr name="instantiatingWizardURL" urlvalue="nbresloc:/org/netbeans/designer/form/MyGWTForm.html"/> <attr name="SystemFileSystem.icon" urlvalue="nbresloc:/org/netbeans/designer/form/icon.png"/> <attr name="SystemFileSystem.icon32" urlvalue="nbresloc:/org/netbeans/designer/form/icon.png"/> <attr name="instantiatingIterator" methodvalue="org.netbeans.modules.form.wizard.TemplateWizardIterator.create"/>

Page 67 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

<attr name="javax.script.ScriptEngine" stringvalue="freemarker"/> <attr name="templateCategory" stringvalue="java-forms"/> </file> <file name="GWTEntryPointForm.form" url="NewGWTForm_form"> <attr name="template" boolvalue="true"/> </file> <file name="GWTPopupForm.java" url="GWTPopupPanel_java"> <attr name="SystemFileSystem.localizingBundle" stringvalue="org.netbeans.modules.form.resources.Bundle"/> <attr name="position" intvalue="200"/> <attr name="template" boolvalue="true"/> <attr name="instantiatingWizardURL" urlvalue="nbresloc:/org/netbeans/designer/form/PopUp.html"/> <attr name="SystemFileSystem.icon" urlvalue="nbresloc:/org/netbeans/designer/form/icon.png"/> <attr name="SystemFileSystem.icon32" urlvalue="nbresloc:/org/netbeans/designer/form/icon.png"/> <attr name="instantiatingIterator" methodvalue="org.netbeans.modules.form.wizard.TemplateWizardIterator.create"/> <attr name="javax.script.ScriptEngine" stringvalue="freemarker"/> <attr name="templateCategory" stringvalue="java-forms"/> </file> <file name="GWTPopupForm.form" url="GwtPopupPanel_form"> <attr name="template" boolvalue="true"/> </file>

<file name="GWTDialogBoxForm.java" url="GWTDialogBox_java"> <attr name="SystemFileSystem.localizingBundle" stringvalue="org.netbeans.modules.form.resources.Bundle"/> <attr name="position" intvalue="200"/> <attr name="template" boolvalue="true"/>

Page 68 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

<attr name="instantiatingWizardURL" urlvalue="nbresloc:/org/netbeans/designer/form/DialogBox.html"/> <attr name="SystemFileSystem.icon" urlvalue="nbresloc:/org/netbeans/designer/form/icon.png"/> <attr name="SystemFileSystem.icon32" urlvalue="nbresloc:/org/netbeans/designer/form/icon.png"/> <attr name="instantiatingIterator" methodvalue="org.netbeans.modules.form.wizard.TemplateWizardIterator.create"/> <attr name="javax.script.ScriptEngine" stringvalue="freemarker"/> <attr name="templateCategory" stringvalue="java-forms"/> </file> <file name="GWTDialogBoxForm.form" url="GWTDialogBox_form"> <attr name="template" boolvalue="true"/> </file>

<file name="GWTCompositeForm.java" url="GWTComposite_java"> <attr name="SystemFileSystem.localizingBundle" stringvalue="org.netbeans.modules.form.resources.Bundle"/> <attr name="position" intvalue="200"/> <attr name="template" boolvalue="true"/> <attr name="instantiatingWizardURL" urlvalue="nbresloc:/org/netbeans/designer/form/Composite.html"/> <attr name="SystemFileSystem.icon" urlvalue="nbresloc:/org/netbeans/designer/form/icon.png"/> <attr name="SystemFileSystem.icon32" urlvalue="nbresloc:/org/netbeans/designer/form/icon.png"/> <attr name="instantiatingIterator" methodvalue="org.netbeans.modules.form.wizard.TemplateWizardIterator.create"/> <attr name="javax.script.ScriptEngine" stringvalue="freemarker"/> <attr name="templateCategory" stringvalue="java-forms"/> </file>

Page 69 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

<file name="GWTCompositeForm.form" url="GWTComposite_form"> <attr name="template" boolvalue="true"/> </file> </folder> </folder> <folder name="FormDesignerPalette"> <attr name="SystemFileSystem.localizingBundle" stringvalue="org.netbeans.modules.form.resources.Bundle"/>

<folder name="GWT Containerss"> <attr name="SystemFileSystem.localizingBundle" stringvalue="org.netbeans.modules.form.resources.Bundle"/> <attr name="isExpanded" boolvalue="true"/> <attr name="position" intvalue="100"/>

<file name="AbsolutePanel.palette_item" url="palette/AbsolutePanel.palette_item"> <attr name="position" intvalue="100"/> </file> <file name="DockLayouPanel.palette_item" url="palette/DockLayouPanel.palette_item"> <attr name="position" intvalue="200"/> </file> <file name="DockPanel.palette_item" url="palette/DockPanel.palette_item"> <attr name="position" intvalue="300"/> </file> <file name="FlowPanel.palette_item" url="palette/FlowPanel.palette_item"> <attr name="position" intvalue="400"/> </file> <file name="HorizontalPanel.palette_item" url="palette/HorizontalPanel.palette_item">

Page 70 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

<attr name="position" intvalue="500"/> </file> <file name="VerticalPanel.palette_item" url="palette/VerticalPanel.palette_item"> <attr name="position" intvalue="600"/> </file> </folder> <folder name="GWT Controls"> <attr name="SystemFileSystem.localizingBundle" stringvalue="org.netbeans.modules.form.resources.Bundle"/> <attr name="position" intvalue="300"/>

<file name="Button.palette_item" url="palette/Button.palette_item"> <attr name="position" intvalue="100"/> </file> <file name="CheckBox.palette_item" url="palette/CheckBox.palette_item"> <attr name="position" intvalue="200"/> </file> <file name="ComboBox.palette_item" url="palette/ComboBox.palette_item"> <attr name="position" intvalue="300"/> </file> <file name="Label.palette_item" url="palette/Label.palette_item"> <attr name="position" intvalue="400"/> </file> <file name="TextBox.palette_item" url="palette/TextBox.palette_item"> <attr name="position" intvalue="500"/> </file> <file name="RadioButton.palette_item" url="palette/RadioButton.palette_item"> <attr name="position" intvalue="600"/> </file> <file name="LongBox.palette_item" url="palette/LongBox.palette_item">

Page 71 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

<attr name="position" intvalue="700"/> </file> <file name="IntegerBox.palette_item" url="palette/IntegerBox.palette_item"> <attr name="position" intvalue="800"/> </file> <file name="DoubleBox.palette_item" url="palette/DoubleBox.palette_item"> <attr name="position" intvalue="900"/> </file> </folder> </folder> </filesystem>

5.0.2.2 Entrypoint Java Template file <#assign licenseFirst = "/*"> <#assign licensePrefix = " * "> <#assign licenseLast = " */"> <#include "../Licenses/license-${project.license}.txt"> <#if package?? && package != ""> package ${package};

import com.google.gwt.core.client.EntryPoint;

/* * ${name}.java * * Created on ${date}, ${time} */

</#if>

Page 72 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

/** * * @author ${user} */ public class ${name} extends javax.swing.JPanel implements EntryPoint{

/** Creates new form ${name} */ public ${name}() { onModuleLoad(); }

@Override private void onModuleLoad(){ throw new UnsupportedOperationException("Not supported yet."); } /** This method is called from within the constructor to * initialize the form. * WARNING: Do NOT modify this code. The content of this method is * always regenerated by the Form Editor. */ @SuppressWarnings("unchecked") // <editor-fold defaultstate="collapsed" desc=" Generated Code ">//GENBEGIN:initComponents private void initComponents() { PopUppanel(); } // </editor-fold>//GEN-END:initComponents // Variables declaration - do not modify//GEN-BEGIN:variables // End of variables declaration//GEN-END:variables

Page 73 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

5.0.2.3 Entrypoint Form Template file <?xml version="1.0" encoding="UTF-8"?> <Form version="1.3" type="com.google.gwt.user.client.ui"> <Panel> </Panel> </Form> 5.0.2.4 Entrypoint html Template file <!-To change this template, choose Tools | Templates and open the template in the editor. --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> Create a New GWTEntryPoint.java file as well as GWTEntryPoint.form file which can be designed using GWT component palette. developed by Hansa Sadeesha Lokuwaduge </body> </html>

5.0.2.4 Button.palette_item file <?xml version="1.0" encoding="UTF-8"?>

Page 74 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

<palette_item version="1.0"> <component classname="com.google.gwt.user.client.ui.Button" type="visual" /> <icon16 urlvalue="org/designerGWT/ui/resource/Button.png" /> <icon32 urlvalue="org/designerGWT/ui/resource/Button2.png" /> <description localizing-bundle="org.designerGWT.ui.Bundle" display-name-key="NAME_ui-gwt-Button" tooltip-key="HINT_ui-gwt-Button" /> </palette_item>

5.0.2.5 Bundle.properties file OpenIDE-Module-Name=designerPluginGWT Templates/Other/MyGWTForm.html=My GWT File

NAME_html-AbsoultePanel=AbsoultePanel HINT_html-AbsoultePanel=AbsoultePanel

NAME_html-Button=Button HINT_html-Button=Button

NAME_html-CheckBox=CheckBox HINT_html-CheckBox=CheckBox

NAME_html-ComboBox=ComboBox HINT_html-ComboBox=ComboBox

NAME_html-DockLayouPanel=DockLayoutPanel HINT_html-DockLayouPanel=DockLayoutPanel

Page 75 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

NAME_html-DockPanel=DockPanel HINT_html-DockPanel=DockPanel

NAME_html-DoubleBox=DoubleBox HINT_html-DoubleBox=DoubleBox

NAME_html-FlowPanel=FlowPanel HINT_html-FlowPanel=FlowPanel

NAME_html-HorizontalPanel=HorizontalPanel HINT_html-HorizontalPanel=HorizontalPanel

NAME_html-IntegerBox=IntegerBox HINT_html-IntegerBox=IntegerBox

NAME_html-Label=Label HINT_html-Label=Label

NAME_html-ListBox=ListBox HINT_html-ListBox=ListBox

NAME_html-LongBox=LongBox HINT_html-LongBox=LongBox

NAME_html-RadioButton=RadioButton HINT_html-RadioButton=RadioButton

NAME_html-TextBox=TextBox HINT_html-TextBox=TextBox

NAME_html-VerticalPanel=VerticalPanel

Page 76 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

HINT_html-VerticalPanel=VerticalPanel

5.0.3 Deploy Information

NetBeans plug-ins is distributed as .nb extension files and it is really easy to deploy rather install in the system. NetBeans says what are the instructions that users have to follow to install the plug-in for NetBeans. 1. Open the Netbeans IDE. (Netbeans 6.7.1 used in the images) 2. On the Menu Bar choose Tools and further choose the Plugins menu option. 3. The Plugins dialog box opens up the Available Plugins tab by default; change the tab to Downloaded. 4. Click the "Add Plugins..." button; A window pops up; navigate to the directory where you downloaded the plugin(s) and add them. It shows up as visible in the figure. 5. Click the install button on the Bottom-left corner of the dialog box. 6. A confirmation window pops up; click next to continue the installation. 7. Next you need to read the license agreement and accept it. The IReport plugin is licensed under the GNU General Public License. 8. Since the plugin would be designed by a 3rd party developer it may not be digitally signed and you would need to ignore and continue inspite of the Validation Warning if you are confirmed about the source of the plugin. If the plugin is signed and but not trusted, you'll need to continue passed this warning. 9. The plugin will install automatically. 10. Once the installation is finished, you should restart the IDE. The installation of the Plugin is complete and it can now be used with the IDE. (netbeans.org 2011)

Page 77 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

5.1 Testing
Pan.J said that (1999) software testing is any activity aimed at evaluating an attribute or capability of a program or system and determining that it meets its required results. [Hetzel88] Although crucial to software quality and widely deployed by programmers and testers, software testing still remains an art, due to limited understanding of the principles of software. The difficulty in software testing stems from the complexity of software: we cannot completely test a program with moderate complexity. Testing is more than just debugging. The purpose of testing can be quality assurance, verification and validation, or reliability estimation. Testing can be used as a generic metric as well. Correctness testing and reliability testing are two major areas of testing. Software testing is a trade-off between budget, time and quality.

5.1.1 Test Cases

A set of test inputs, execution conditions, and expected results developed for a particular objective, such as to exercise a particular program path or to verify compliance with a specific requirement (IEEE Standard 610 1994) Patton.R (2001) Test cases are the specific inputs that youll try and the procedures that youll follow when you test the software 5.1.1.1 Overall Test Plans
Test Case Expected Output Actual output

Start NetBeans Install GWT Designer plug-in

Start without any predicament Install predicament without any

Page 78 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

Open GWT Designer

Able to start projects

Start GWT application development

GWT Files development

Table 1 Overall Test plan

5.1.1.2 Component based test cases

Test Case Open GWT Designer Create entry point Expected Output Able to start projects Creates entry point java and form files Create popup panel Creates popup panel java and form files Actual output

Create dialog

Creates dialog java and form files

Create composite

Creates composite java and form files

Table 2 File creation

Test Case Open GWT Designer Load Palette items

Expected Output Able to start projects to Load to palette loader

Actual output

NetBeans Open the file Source view and design view

Page 79 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

source file

Go to source view Open palette

Shows UI GWT controllers and panels objects

Table 3 palette loader

5.2 Conclusion on Chapter Five

This chapter is including the details about Implementation and Testing. First this consultation on what is implementation in software and then follows the platform features. Under that what the NetBeans inbuilt platform features are and what plug-in based features are discussed. Not only that discussed under that topic, what are the required platform to develop this plug-in also talked in the same time. Then code snips part is documented and under that sample of each and every source code is located. The placed source codes are the most significant source codes in the plug-in and after talking about implementation part testing part comes to the thesis. Under the testing part first what is testing in software engineering is been talked and then what are test cases. Then overall test case is placed and following to the overall test case component test cases are figured. That information is documented under that chapter in this thesis.

Page 80 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

CHAPTER SIX
6.0 Critical Evaluation
Innovations can change the current system. When putting the critical eye on this project, this project problem is and its statement developing GWT designer plug-in for NetBeans is unique and innovative obsession. GWT uses the newer technologies with well known Java language to make sure programmers can easily perform what they want. This problems final outcome is giving hand to GWT for move slight onward. When critically looking at this project, choosing these sorts of projects are chancy as well as tough to perform also. The reason to put that type of comment is there are no sample developments done by the outside, though there are similar types of. Consider there are limited numbers of swing designers for NetBeans but NetBeans dont even thinking about GWT framework at all. With all those facts in mind this project statements, project specifications and project scope also had to made by me. On one occasion glance at the topic of hardware and software requirements of this project will give narrow minded to the readers of this thesis but when real time environment if minimum requirements are not able to achieve then the project can ended in failure. By performing these types of projects will give lot of confidence to the new knowledge and architectures understanding while it has disadvantages also. The main research areas in this thesis are Domain and Technical. Under the Domain Inside and outside of GWT, NetBeans and Similar system studies are performed. Technical research is mainly based on software engineering methodologies, Design Patterns, Drag and Drop, Extensible Markup Languages and Plug-in Development. When critically evaluation the research chapter in this thesis, the advantages of research on GWT and NetBeans are first development is going to be done for GWT so knowing the domain of GWT history, architecture will be an added advantage. Following to GWT, knowing the history and architecture of NetBeans will also provides established foreground to me.

Page 81 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

Because of similar system studies this thesis will demonstrate the existing similar type applications to the reader and by researching on similar system I myself will get better idea on what are the available systems and what are similar functionalities which are users looking forward and what are the users disparate features. With the initiative of that project specifications are categories. Analyzing and Design part is extremely important in this thesis and Unified modeling language is used to perform those tasks. Web developer and web designers are the main users of this plug-in and under the analyzing part, identifying there works and drew the use case diagrams. Then following to the analyzing part design comes and design is one of the major parts in this thesis. All the designs are done according to the use of design patterns the reasons to do so is, this is a plug-in and basically it doesnt have algorithms like other projects image processing, voice recognition and artificial intelligent. This is more or fewer plugs to the existing environment, then this development should be capable to work with those architectures and work fully efficient manner. The meaning of using an algorithm is perform the tasks in polynomial time period. When using standard well establish design patterns in design will achieve the same functionalities. Design patterns using will provides the best for the system and it will also achieves the major outcome of this thesis writing which is applying the software engineering principles with this project, and this software almost achieve the goal with that. All the class diagrams are comes under the topic design, follow the basic rules of design patterns and completed in a way which is open to extend and close to modification. Activity diagrams and sequence diagrams are drawn to provide the basic idea to the thesis reader, how this running application will perform. And with the Implementation chapter platform features are talked. Then next to it code snips are available. In the code snips all the source codes are not available and only the core components most precious source codes are listed. All the forms, files and palette items are developed by myself. Some of the features available for NetBeans are not capable to work with GWT architecture so due to the Page 82 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

reasons of this some parts of this plug-in are not performing 100 percent accurate. When talking in technical way what are the reasons NetBeans uses own forminfo methods to load data to the UI forms and they save the xml contents as .form method. But xml parser available for GWT is only works with DOM. Because of that .form files have small confusions working with .java file and .form file. Testing places big role in software development and when developing plug-in using test plans is the best solution. The critical evaluation for that is plug-in has limited capabilities and testing using test cases is the easiest and cost effective method other than that most of plug-in developers used to Junit testing also, but with the documentations test cases can provide more illustration to the readers and users. Distributing and deploying plug-in is so much easier than other systems. Once .nb file is available then one click can do the rest. When critically evaluating this project by doing these type of totally new products will have advantages like will be able to learn the new technologies and architecture wise learning is also higher than doing other project like image processing, voice recognition etc. but end of the thesis it is a well known fact that research can be ended by failure or success. And it is happy to conclude that this project is ended in successful manner.

Page 83 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

REFERENCE
Altova.(2005).UML Sequence diagram[online]. Available from: http://www.altova.com/umodel/sequence-diagrams.html [Accessed: 1st July 2011]. Bajanen-Broughton,J,T.(n.d).Evolution of Computers[online]. Available from: www.southerncayuga.org/Middle/MSLabSite/jaimmieandtiffiany.ppt [Accessed: 1st Feb 2011]. Bck .H.(2009).The Definitive Guide to NetBeans platform, United States of America: APRESS. Buzzel. (2011).Evolution of Computers [online].Available from:
st

http://www.buzzle.com/articles/evolution-of-computers.html [Accessed 1 2011]. Buzzle.(2011).Waterfall model [Online]. Available

Feb

from: march

http://www.buzzle.com/articles/waterfall-model.html [Accessed : 12 2011]. Businessdictionary.(n.d).computer from: programming

definition[online].Available

http://www.businessdictionary.com/definition/computer-

programming.html [Accessed 5th Feb 2011]. Boudreau & Glick et al..(2002). NetBeans: The Definitive Guide United States of America: OREILLY. Chaganti.P,(2006),Google Web Toolkit GWT Java AJAX Programming A practical guide to Google Web Toolkit for creating AJAX applications with Java,[online] Available from:

https://www.packtpub.com/sites/default/files/sample_chapters/Google-WebToolkit-Ajax-Creating-a-New-GWT-Application-Sample-Chapter.pdf [Accessed 18 January 2011]. Code.Google.(n.d).Google Web Toolkit Release Notes[online]. Available from: http://code.google.com/webtoolkit/release-notes.html#Release_Notes_1_0_21 [Accessed 3rd March 2011].

Page 84 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

Code.Google.(2011). Google Web Toolkit Overview [online]. Available from: http://code.google.com/webtoolkit/overview.html [Accessed 3rd March 2011]. Code.Google.(2011). JRE Emulation Reference[online]. Available from: http://code.google.com/webtoolkit/doc/latest/RefJreEmulation.html 6th March 2011]. [Accessed

Code.Google.(2011).Internationalizing a GWT application[online]. Available from: http://code.google.com/webtoolkit/doc/latest/tutorial/i18n.html [Accessed 6th March 2011].

Code.Google.(2011). Developer's Guide - Internationalization [online]. Available from: http://code.google.com/webtoolkit/doc/latest/DevGuideI18n.html

[Accessed 6th March 2011]. Code.Google.(2011). GWT Designer User Guide [online]. Available from: http://code.google.com/webtoolkit/tools/gwtdesigner/index.html [Accessed 7th March 2011]. Code.Google.(2011). Communicating with the server [online]. Available from: http://code.google.com/webtoolkit/doc/latest/tutorial/clientserver.html [Accessed 8th March 2011]. Developerlife.(2007). Introduction to GWT[online].Available from: http://developerlife.com/tutorials/?p=80 [Accessed 5th March 2011]. Eckstein-Marc & Wood R.L.D.(1998).Java Swing[online].September 1998. Availabel from: http://oreilly.com/catalog/jswing/chapter/dnd.beta.pdf [Accessed 30th March 2011]. Google-web-toolkit.googlecode.(n.d). Javadoc)[online]. Available GWTTestCase(Google from: Web Toolkit

http://google-web-

toolkit.googlecode.com/svn/javadoc/1.5/com/google/gwt/junit/client/GWTTestC ase.html#getModuleName() [Accessed 8th March 2011]. Geary & Rob D. G.(2007)GWT solution #6: Drag and drop Use the Google Web Toolkit to roll your own drag-and-drop module[online]. Available from : http://www.javaworld.com/javaworld/jw-11-2007/jw-11-gwtsolutions.html [Accessed 31st March 2011].

Page 85 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

Hanson.R,Tacy.A,(2007),GWT in Action Easy Ajax with the Google Web Toolkit ,London: Manning. Helium.(2010). Project management from: basics: The "golden

triangle"[online].Available

http://www.helium.com/items/1987665-

project-management-basics-the-golden-triangle [Accessed 14th March 2011]. Hoffer & George et al. (2008), Modern System Analysis and design,3rd ed.New Delhi, India, Dorling Kindersley (India) Pvt.Ltd. Hubpages.(2011).Evolution of Computer[online].Available from:

http://hubpages.com/hub/Evolution-Of-Computers [Accessed 3rd Feb 2011]. Institute of Electrical & Electronics Engineers, Standard 610 (1990), reprinted in IEEE Standards Collection: Software Engineering 1994 Edition. Kogent Solutions Inc.(2008).NetBeans 6 " Simple Steps". New Delhi: Dreamtech Press. Kendall & Kendall.(2005), System Analysis and Design,5th ed,New Delhi,India, Prentice-Hall, Inc. Linuxjournal.(2009). Web 2.0 Development with the Google Web

Toolkit[online].Available from: http://www.linuxjournal.com/magazine/web-20development-google-web-toolkit?page=0,1 [Accessed 2nd March 2011]. Ericsson.M.(n.d). [online].Available http://parsa.iust.ac.ir/SEHandouts/ActivitydiagramsforRoseArchitect.pdf [Accessed 27th June 2011]. Netebans.org.(2011).The NetBeans platform[online].Available from: http://netbeans.org/features/platform/ [Accessed 7th March 2011]. Netebans.org.(2011). A Brief History of NetBeans [online].Available from: http://netbeans.org/about/history.html [Accessed 25th March 2011]. Netebans.org.(2011). 27th March 2011]. Swing GUI Builder (formerly Project Matisse) Activity Diagrams, What it is and How to Use from:

[online].Available from: http://netbeans.org/features/java/swing.html [Accessed

Page 86 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

Netebans.org.(2008). [online].Available

Developing from:

Visual

Web

JSF

Application

http://netbeans.org/kb/docs/web/helloweb.html

[Accessed 27th March 2011]. Netebans.org.(2008). Getting Started with Visual Web JSF Application Development [online].Available from http://netbeans.org/kb/docs/web/intro.html [Accessed 27th March 2011]. Netbeans.org,(2011), Requirements, Netbeans IDE 6.9.1 Release notes and System from:

[online]

Available

http://netbeans.org/community/releases/69/relnotes.html#system_requirements [Accessed 20 January 2011]. Netbeans.org,(2011), InstallingAPlugin, [online] Available from:

http://wiki.netbeans.org/InstallingAPlugin [Accessed 29 July 2011]. Objectmentor (1998). UML Use Case Diagrams [Online]. Available from: http://www.objectmentor.com/resources/articles/usecases.pdf [Accessed : 16th June 2011]. Onestoptesting.(2011) .V-model [Online]. Available from:

http://www.onestoptesting.com/sdlc-models/v-model.asp [Accessed: 10 march 2011]. Pan.J. (1999). Software Testing [Online]. Available
rd

from: August

http://www.ece.cmu.edu/~koopman/des_s99/sw_testing/ [Accessed: 3 2011]. Patton.R (2001) Software Testing, SAMS.

Shelly & Cashman.(2001), system Analysis and Design, 2001, 4th ed, Singapore, Thomson Learning, Inc. Techiwarehouse.(2011).Generations of computer[online].Available from:

http://www.techiwarehouse.com/engine/a046ee08/Generations-of-Computer [Accessed 2nd Feb 2011]. Techiwarehouse.(2004 Software engineering phases [online].Available from: http://www.techiwarehouse.com/engine/18a41ffa/Software-Engineering-Phases [Accessed 2nd Feb 2011].

Page 87 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

Thefreedictionary.(2011) Computer programming definition of computer programming by the free online dictionary[online]. Available from: http://www.thefreedictionary.com/computer+programming [Accessed 5th Feb 2011].

Thefreedictionary.(2011) Module definition of computer programming by the free online dictionary[online]. Available from: http://www.thefreedictionary.com/module [Accessed 9th March 2011].

Visual-paradigm.(2011). Class Diagram and Object Diagram [online]. Available from: http://www.visual-

paradigm.com/product/vpuml/provides/structuralmodeling.jsp [Accessed 26th Jule 2011]. Winston .P.(2006). Understanding Netbeans Available Visual JSF Web from:

Application[online].

http://www.winstonprakash.com/articles/netbeans/understanding_visual_jsf_app. html [Accessed 26th March 2011]. Winston .P.(2008). Web Page Designer Design Concepts [online]. Available from: http://wiki.netbeans.org/wiki/images/1/12/WpdDesignConcepts_WebPageDesig ner.pdf [Accessed 26th March 2011].

Page 88 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

APPENDIX A
1.0 Gantt chart

Page 89 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

2.0 Requirement analysis

The process of requirement analysis begins basically by collecting information from current system users of the Problem domain and observing related fields. This process is known as Requirement gathering. As Hoffer, et.al. (2008) says determining system requirement is a part of System development life cycle in which the analyzer determine how the current information system functions and assess what users would like to see in a new system. Furthermore they define 02 sub phases for the process of requirement analysis. 01. Requirement determination 02. Requirement structuring

2.0.1 Process of Requirement determination

Once the development project is planned and initialized all the next steps of System development life cycle will depend on determining requirements. At the process analysts has to gather information on what the system should do from as many as possible sources. The deliverable of this process will be several forms of information that guide the development team about what to do and how to do it. Basically this process helps to understand the following information about the problem domain. The business objectives that drive what and how work is done The information people need to do their jobs The data (definition, volume, size, etc.) handled within the organization to support the jobs When, how and by whom or what the data are moved, transformed and stored The sequence and other dependencies among different data handling activities The rules governing how data are handled and processed Page 90 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

Policies and guidelines that describe the nature of the business and the market and environment in which it operates Key events affecting data values and when these events occurs Hoffer, et.al. (2008)

There are various fact finding techniques are available for requirement gathering process. These methods have been developed in many wide areas within last 02 decades. We can categorize those methods in to following types 01. Traditional methods Interviewing, Sampling and user observation basically belongs to this category. This type of methods concentrates on collecting information the user about the system that currently being used and what type of functionalities users are expected to see from a new system 02. Contemporary methods Joint Application Development (JAD), Group support systems, CASE tools and prototyping belongs to this category. Methods of this category mostly concentrate on collecting information about the new system and they partially use Traditional methods inside them 03. Radical methods Radical methods of collection information is generally refers to Business Process reengineering (BPR). BPR search for solutions and implementation ways for those solutions to radically change a business process to achieve improvements in products and services.

Following documentation is an adequate literature review of different type of Requirement gathering methods.

Page 91 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

2.0.1.1 Interviewing Conducting interview is an important fact-finding technique. An interview is a planned meeting with people who works inside as well as outside the problem domain. The flow of the interview should depend on the objectives. Means what we going to ask from the interviewee should base on what we need to know. As Shelly and Chashman (2001) says in their famous text of System analysis and designing the process of interviewing consists following steps. 1. Determine the people to interview 2. Establish objectives for the interview 3. Develop interview questions 4. Prepare for the interview 5. Conduct the interview 6. Document the interview 7. Evaluate the interview

Step 1: Determine the people to interview To get a clear idea about the current scenario we have to select right people to interview and ask right questions from them. To design a good system we have to interview people from all levels of the problem domain. Step 2: Establish objectives for the interview Establishing objectives means we have to determine main areas to be discussed, and the facts that we want to gather. Step 3: Develop interview questions

Page 92 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

The interview should consist of several kinds of questions: open-ended, closed-ended or questions with a range of responses. Open-ended questions: These kinds of questions avoid unstructured response. Such questions are useful when we want to understand a larger process. Close-ended questions: These kinds of questions restrict the response. We can use close-ended questions when we want more specific answers for the questions. Range of Response questions: this is a type of close-ended questions. But it provides limited answers to specific response. Step 4: Prepare for the interview Interviewer should have done a basic investigation about the field(s) related to the problem domain. A place to conduct the interview should be decided according to the environment facts. Step 5: Conduct the interview Interview should be initiated and flow up. Appropriate questions need to be asked from the appropriate person and appropriate time and feed backs should be given to interviewee to provide the information/answer Step 6: Document the interview Interview need to be appropriately recorded for further usage. Kendall and Kendall (2005) shows 02 different types that can be used to record an interview 01. Audio recording It is the method that recording the interview with the usage of voice and/or video recording tools. It provides a completely accurate record of what each interviewee said and it makes the interviewer more free to listen to the interviewee and provide response more rapidly Page 93 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

02. Notetaking It is the method that taking down a written record of what interviewee says. The method aids recall of important questions and it keeps the interviewer on alert Step 7: Evaluate the interview Analyze the data gather from the interview for the accuracy. Need to decide what have found through the interview, are they really helpful for the progress of the project and does another process of clarifying is required or not. 2.0.1.2 Questionnaires A questionnaire is one of more frequently used technique in requirement determination process. It ask the current system user to provide answers for some pre organized questions and the required information are filtered through the answers provided Kendall and Kendall (2005) define the process of questionnaires as an information gathering process that allows systems analysts to study attitudes, beliefs, behavior and characteristics of several key people in the organization who may be affected by the current and proposes new systems. Using questionnaires will not be suitable for every requirement gathering method. Following characteristics can be used to determine whether use of questionnaire is appropriate of not The people which are information is need to gather from is widely dispersed Number of people involves with the current system is large and need to know how different group of users (In terms of example, the management) approves and disapproves current system functionalities Need to be certain about the problems of current system identified by interviews

Page 94 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

Questionnaires can be organized with both open-ended and closed-ended questions. Trade-offs between the use of open-ended and closed ended questions can be review as following table Trade-off Speed of completion Exploratory Nature Breadth and Depth Ease of Preparation Ease of Analysis Open ended questions Slow High High Easy Difficult Closed ended questions Fast Low Low Difficult Easy

Table 4 - Trade-offs of open-ended and closed-ended questions

Source: Kendall and Kendall 2006 2.0.1.3 Observing decision maker behavior Observing the behavior of decision maker and his environment is an important method to gather information. Observation must be structured and systematic if the findings are to be interpretable. Kendall and Kendall (2005) states in a proper observation following 04 fields need to be covered 01. Activities 02. Messages 03. Relationship 04. Influences Following steps can be used to aid a proper observation over a user Page 95 of 107

Drag and Drop Google Web Tool Kit (GWT) User Interface Designer plug-in for NetBeans

2011

01. Decide what are the activities and other important areas which need to be observed 02. Decide the level that those fields need to be observed 03. Create categories that adequately capture key activities 04. Prepare appropriate scales, checklists and other materials for observation 05. Decide when to observe There are 02 approaches to decide when and how to flow an observation 01. Time Sampling Specify observing a decision maker in a pre-defined duration with pre-defined set of time intervals. 02. Event Sampling Purposefully sampling an entire event such as a board meeting or a user training session Kendall and Kendall (2005) summarize advantages and disadvantages of these approaches as following Time Sampling Advantages Cuts down on bias with randomization of observations Allows a representative view of frequent activities Gathers data in a fragmented fashion that doesnt allow time for a decision to unfold Misses infrequent but important decisions Event Sampling Allows observation of behavior as it unfolds Allows observation of an event designated as important Takes a great deal of analysts time Misses a representative sample of frequent decisions

Disadvantages

Table 5 - Advantages and Disadvantages of Observing approaches

Source: Kendall and Kendall 2005

Page 96 of 107