Friday, April 30, 2010
Thursday, April 29, 2010
GROOVY
-Dhanapathi
What’s Groovy:-
Groovy is a language similar to that of Java with an easier syntax and that which provides ability to write code the code on the fly helping the developers to develop the application and Unit test it at a greater pace. It acts as glue joining various modules and provides the feature of runtime (dynamic) type checking.
Groovy is a language that is tightly coupled to Java and that which runs on JVM. Groovy supports standard Java constructs including annotations, generics, static imports, enums, varargs etc. Thus the usage of Groovy is made easier for the Java developers. Groovy provides advanced language features as properties, closures, native support for lists, maps and regular expressions, duck typing and the elvis operator.
Surprising features:-
• Groovy's relaxed Java syntax allows you to drop semi-colons and modifiers.
• Groovy's syntax also permits you to drop a variable's type.
• Everything in Groovy is public unless you state otherwise.
• Asserts in Groovy will always be executed.
• Groovy allows changing classes and methods at runtime. For example if a class does not have a certain method and this method is called by another class the called class can decided what to do with this call.
• Groovy has list processing and regular expressions directly build into the language. In normal Java code, if you want to create a list of items, you first import java.util.ArrayList (for example), and then programmatically initialize an ArrayList instance, and then add items to it. In Groovy, lists and maps are built into the syntax — you don't need to import anything.
• Groovy implements also the Builder Pattern which allows creating easily GUI's, XML Documents or Ant Tasks.
• Anything you write in Groovy can be compiled into a normal Java class file and re-used in Java code. Likewise, anything you write in normal Java code can be reused in Groovy. As a result, you can easily use Groovy to write unit tests for Java code, for instance. And if you write a handy utility in Groovy, you can also use that utility in your Java programs.
Hello World Program to Demonstrate the Differences:-
Hello World in Java code
The prototypical Hello World example in Java code looks something like this:-
public class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello World!");
}
}
Compile and run the Java example
c:>javac HelloWorld.java
And finally, I run the resulting compiled class:
c:>java HelloWorld
Hello World in Groovy code
Groovy permits a relaxed Java syntax — for instance, you don't need to define classes for simple actions like printing "Hello World!"
What's more, Groovy makes everyday coding activities easier; for instance, Groovy permits you to type println instead of System.out.println. Groovy is smart enough to know you mean System.out when you type println.
Consequently, writing the Hello World program in Groovy is as simple as this:
println "Hello World!"
Note that there is no class structure around the phrase. There isn't a method structure either! I also used println instead of System.out.println.
Run the Groovy example
Assuming the code is saved into a file called MyFirstExample.groovy, run this example by simply typing
c:>groovy MyFirstExample.groovy
That's all it takes to get the words "Hello World!" printed out on my console.
Shortcuts in action
You might notice that we dont have to compile the .groovy file. That's because Groovy belongs to the family of languages known as scripting languages. One of the defining qualities of scripting languages is that they can be interpreted at runtime. (In Java, bytecode is also interpreted and generated as a result of compiling source code. The difference is that scripting languages interpret source code directly.)
Groovy permits you to drop the compilation step entirely, though you could do it, if you wanted to, using the Groovy compiler, groovyc. Compiling Groovy code with groovyc yields normal Java bytecode that we can then run via the java command. As for running the code,
c:>groovy -e "println 'Hello World!'"
Conclusion: -
Being able to code quickly in Groovy also means receiving feedback sooner, not to mention the satisfaction of crossing tasks off of your to-do list. At a high level, if you can put code in front of stake-holders more quickly, you can give them more releases in a shorter time. In essence, Groovy lends itself more to Agile development than Java does.
What’s Groovy:-
Groovy is a language similar to that of Java with an easier syntax and that which provides ability to write code the code on the fly helping the developers to develop the application and Unit test it at a greater pace. It acts as glue joining various modules and provides the feature of runtime (dynamic) type checking.
Groovy is a language that is tightly coupled to Java and that which runs on JVM. Groovy supports standard Java constructs including annotations, generics, static imports, enums, varargs etc. Thus the usage of Groovy is made easier for the Java developers. Groovy provides advanced language features as properties, closures, native support for lists, maps and regular expressions, duck typing and the elvis operator.
Surprising features:-
• Groovy's relaxed Java syntax allows you to drop semi-colons and modifiers.
• Groovy's syntax also permits you to drop a variable's type.
• Everything in Groovy is public unless you state otherwise.
• Asserts in Groovy will always be executed.
• Groovy allows changing classes and methods at runtime. For example if a class does not have a certain method and this method is called by another class the called class can decided what to do with this call.
• Groovy has list processing and regular expressions directly build into the language. In normal Java code, if you want to create a list of items, you first import java.util.ArrayList (for example), and then programmatically initialize an ArrayList instance, and then add items to it. In Groovy, lists and maps are built into the syntax — you don't need to import anything.
• Groovy implements also the Builder Pattern which allows creating easily GUI's, XML Documents or Ant Tasks.
• Anything you write in Groovy can be compiled into a normal Java class file and re-used in Java code. Likewise, anything you write in normal Java code can be reused in Groovy. As a result, you can easily use Groovy to write unit tests for Java code, for instance. And if you write a handy utility in Groovy, you can also use that utility in your Java programs.
Hello World Program to Demonstrate the Differences:-
Hello World in Java code
The prototypical Hello World example in Java code looks something like this:-
public class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello World!");
}
}
Compile and run the Java example
c:>javac HelloWorld.java
And finally, I run the resulting compiled class:
c:>java HelloWorld
Hello World in Groovy code
Groovy permits a relaxed Java syntax — for instance, you don't need to define classes for simple actions like printing "Hello World!"
What's more, Groovy makes everyday coding activities easier; for instance, Groovy permits you to type println instead of System.out.println. Groovy is smart enough to know you mean System.out when you type println.
Consequently, writing the Hello World program in Groovy is as simple as this:
println "Hello World!"
Note that there is no class structure around the phrase. There isn't a method structure either! I also used println instead of System.out.println.
Run the Groovy example
Assuming the code is saved into a file called MyFirstExample.groovy, run this example by simply typing
c:>groovy MyFirstExample.groovy
That's all it takes to get the words "Hello World!" printed out on my console.
Shortcuts in action
You might notice that we dont have to compile the .groovy file. That's because Groovy belongs to the family of languages known as scripting languages. One of the defining qualities of scripting languages is that they can be interpreted at runtime. (In Java, bytecode is also interpreted and generated as a result of compiling source code. The difference is that scripting languages interpret source code directly.)
Groovy permits you to drop the compilation step entirely, though you could do it, if you wanted to, using the Groovy compiler, groovyc. Compiling Groovy code with groovyc yields normal Java bytecode that we can then run via the java command. As for running the code,
c:>groovy -e "println 'Hello World!'"
Conclusion: -
Being able to code quickly in Groovy also means receiving feedback sooner, not to mention the satisfaction of crossing tasks off of your to-do list. At a high level, if you can put code in front of stake-holders more quickly, you can give them more releases in a shorter time. In essence, Groovy lends itself more to Agile development than Java does.
Wednesday, April 28, 2010
UML Concepts
-SatyaSwati
Welcome back . Now we'll continue with the discussion on UML concepts
3) The Object Diagram:
Although we design and define classes, in a live application classes are not directly used, but instances or objects of these classes are used for executing the business logic. A pictorial representation of the relationships between these instantiated classes at any point of time (called objects) is called an "Object diagram." It looks very similar to a class diagram, and uses the similar notations to denote relationships.
If an object diagram and a class diagram look so similar, what is an object diagram actually used for? Well, if you looked at a class diagram, you would not get the picture of how these classes interact with each other at runtime, and in the actual system, how the objects created at runtime are related to the classes. An object diagram shows this relation between the instantiated classes and the defined class, and the relation between these objects, in the logical view of the system. These are very useful to explain smaller portions of your system, when your system class diagram is very complex, and also sometimes recursive.
Elements of an Object Diagram:
Because an object diagram shows how specific instances of a class are linked to each other at runtime, at any moment in time it consists of the same elements as a class diagram; in other words, it contains classes and links showing the relationships. However, there is one minor difference. The class diagram shows a class with attributes and methods declared. However, in an object diagram, these attributes and method parameters are allocated values.
A class that defines the flow of the system is called as an active class. This class instance in the object diagram is represented by thick border. In an MVC application architecture, the controller servlet is the action class, and is denoted by a thicker border. Also, multiple instances of the same class, as in a factory pattern, if the attributes of the individual objects are not important, or are not different, these can be represented by a single symbol of overlapping rectangles (see Figure 3.1):
Figure 3.1—the object diagram for a Factory class
A class that performs more than one role, and is self-linked, is represented by a curve starting and ending on itself, as illustrated in Figure 3.2:
Figure 3.2—the object diagram for a self-linked class
Significance:
• A set of objects (instances of classes) and their relationships.
• A static snapshot of a dynamic view of the system.
• Reperesent real or prototypical cases.
4) The Sequence Diagram:
A Sequence diagram depicts the sequence of actions that occur in a system. The invocation of methods in each object, and the order in which the invocation occurs is captured in a Sequence diagram. This makes the Sequence diagram a very useful tool to easily represent the dynamic behaviour of a system. A Sequence diagram is two-dimensional in nature. On the horizontal axis, it shows the life of the object that it represents, while on the vertical axis, it shows the sequence of the creation or invocation of these objects.
Because it uses class name and object name references, the Sequence diagram is very useful in elaborating and detailing the dynamic design and the sequence and origin of invocation of objects. Hence, the Sequence diagram is one of the most widely used dynamic diagrams in UML.
Defining a Sequence diagram:
A sequence diagram is made up of objects and messages. Objects are represented exactly how they have been represented in all UML diagrams—as rectangles with the underlined class name within the rectangle. A skeleton sequence diagram is shown in Figure 8.1. We shall discuss each of these elements in the next section:
Elements of a Sequence diagram
A Sequence diagram consists of the following behavioral elements:
Significance:
• Composed of objects and messages dispatched between them.
• Shows a dynamic view of the system.
• Sequence Diagram exposes time ordering of messages.
• Collaboration Diagram exposes exposes structural organization of messages.
• In some tools (i.e. Rational Rose), these diagrams can be interchanged from the same underlying information.
5) State Diagram:
Until now, we have seen Use Cases, Class diagrams, and Object diagrams. These diagrams give an architectural and high-level view of a system. In a typical software life cycle, the business or functional domain experts define Use Case diagrams. The Class diagrams and Object diagrams are made by senior-level developers, with the help of system architects. Once this has been accomplished, and the system design and architecture is in place, these artifacts are passed on to the developer, who actually codes the system. All the above diagrams are static diagrams, which means that they help in visualizing what the elements of the complete system would be, but do not say anything about the flows any object of the system can have when an event occurs. Structural elements are used to depict static diagrams.
While coding, it is necessary to understand the details of the modes an Object of a Class can go through and its transitions at time intervals with the occurrence of any event or action.
State diagrams (also called State Chart diagrams) are used to help the developer better understand any complex/unusual functionalities or business flows of specialized areas of the system. In short, State diagrams depict the dynamic behavior of the entire system, or a sub-system, or even a single object in a system. This is done with the help of Behavioral elements.
It is important to note that having a State diagram for your system is not a compulsion, but must be defined only on a need basis.
Elements of a State diagram:
A State diagram consists of the following behavioral elements:
Note: Changes in the system that occur, such as a background thread while the main process is running, are called "sub states." Even though it affects the main state, a sub state is not shown as a part of the main state. Hence, it is depicted as contained within the main state flow.
As you saw above, a state is represented by a rectangle with rounded edges. Within a state, its Name, variables, and Activities can be listed
Figure 4.1: the structure of the state element
Creating a State Diagram
Let us consider the scenario of traveling from station A to station B by the subway. Figure 4.2 would be a state diagram for such a scenario. It represents the normal flow. It does not show the sub states for this scenario.
Significance:
• Represents a state machine, composed of states and transitions.
• Addresses the dynamic view of the system.
• Useful for reactive behaviors.
• Important for modeling interfaces, classes, or collaborations
EXT JS
-Ramesh
EXT JS
In the world of Rich Internet Applications (RIA) development, Ext JS stands out as a cross-browser JavaScript library that offers the applications developer a powerful toolset. With a set of customizable user interface widgets similar to those found in desktop operating systems, an effective data binding model, a comprehensive programming interface for manipulating the Document Object Model and communicating with the server, a committed development team, and an enthusiastic users' community, the Ext JS library is a great choice for today's web builders.
EXT JS OVERVIEW
Ext JS is a cross-browser JavaScript library for building rich internet applications. It includes:
• High performance, customizable UI widgets
• Well designed and extensible Component model
• An intuitive, easy to use API
• Commercial and Open Source licenses available
BROWSER COMPATIBILITY
Ext JS supports all major web browsers including:
• Internet Explorer 6+
• FireFox 1.5+ (PC, Mac)
• Safari 3+
• Chrome 3+
• Opera 9+ (PC, Mac)
DOWNLOAD EXT
If you haven't done so already, you'll first want to download the most current Ext release which can always be found here: http://extjs.com/products/extjs/download.php.
There are several different options for what you can download, but you'll probably want to start with the most current stable production version available. Once you download and unzip the file, you're pretty much ready to go, but read on for some specifics depending on your server setup.
CONFIGURE
Some Ext JS examples require a HTTP server (and some a PHP server). This does not mean that Ext JS can only be used in combination with a HTTP server.
Ext JS code that uses server requests requires a HTTP web server (access pages through a webserver viahttp://something).
NO WEB SERVER
You can actually run Ext JS without a web server thanks to Doug Hendricks. If you would like to run Ext without a web server, check out this forum post.
IIS - MICROSOFT INTERNET INFORMATION SERVICES
If you encounter any difficulties on a IIS platform, additional tips can be found in this forum post.
APACHE
If you encounter issues with Apache on windows (files being corrupted), additional tips can be found in this forum post.
THE DEMOS / EXAMPLES
A good place to start exploring is the examples directory and the wiki (tutorials and manual). The examples directory in the download package has several working examples, please note the following:
Ext uses a 1x1 transparent gif image to create inline icons with CSS background images. The default URL to this file is "extjs.com/s.gif", so you'll want to change this somewhere at the top of your code by telling Ext where to find the empty image. You can modify the URL as needed with a command like this:
Ext.BLANK_IMAGE_URL = '/images/ext/resources/images/default/s.gif';
LET'S GET STARTED
We're going to walk through some of the most common tasks that people have to accomplish in Javascript and how to perform them using Ext. If you'd like to experiment as you go, you should download the starter files in IntroToExt2.zip which we will use to build up a page of working Ext code.
This zip contains four files: ExtStart.html, ExtStart.js, ExtStart.css and ajax-example.php.
Now you're ready to open ExtStart.js in your favorite IDE or text editor and take a look at it:
Ext.onReady(function() {
alert("Congratulations! You have Ext configured correctly!");
});
Ext.onReady is probably the first method that you'll use on every page. This method is automatically called once the DOM is fully loaded, guaranteeing that any page elements that you may want to reference will be available when the script runs. You can go ahead and delete the alert() line now so that we can start adding some real code that actually does something useful!
ELEMENT: THE HEART OF EXT
Almost everything you do in Javascript will at some point involve referencing specific elements on your page so that you can do interesting things with them. Using traditional Javascript, selecting a DOM node by ID is done like this:
var myDiv = document.getElementById('myDiv');
This works just fine, but the object that is returned (a DOM node) doesn't offer much in the way of power or convenience. In order to do anything useful with that node, you are left still writing a lot of custom plumbing code yourself. Plus it is your responsibility to handle all of the differences in how the node can be used from browser to browser, which can be daunting.
Enter the Ext.Element object. The Element really is the heart of Ext as most of what you'll do involves getting access to Elements and performing actions on them. The Element API is fundamental to the entire Ext library, and if you spend the time to really learn only one class in Ext well, Element should be it!
The corresponding code to get an Ext Element by ID looks like this (the starter page ExtStart.html contains a div with the id "myDiv," so go ahead and add this code to ExtStart.js):
Ext.onReady(function() {
var myDiv = Ext.get('myDiv');
});
So we are getting back an Element object now—what's so interesting about that?
This means that you can do all kinds of useful stuff with very minimal code. Here are just a few simple examples (see theElement API documentation for the complete list of everything that you can do). Go ahead and try adding some of these to ExtStart.js after the previous line where we got the 'myDiv' Element:
myDiv.highlight(); // The element's background will highlight to yellow then fade back
myDiv.addClass('red'); // Add a custom CSS class (defined in ExtStart.css)
myDiv.center(); // Center the element in the viewport
myDiv.setOpacity(.25); // Make the element partially-transparent
SELECTING DOM NODES
Often it is either impractical or impossible to select DOM nodes by ID. Maybe the ID is not set, or you don't know it, or there are too many elements to practically reference directly by ID. Sometimes you may want to select nodes based on something other than ID, like an attribute or a CSS classname. For these reasons, Ext ships with an extremely powerful DOM selector library called DomQuery.
DomQuery can be used as a standalone library, but more often when using Ext, you'll use it in the context of selecting Elements so that you can then act on them via the Element interface. Luckily, the Element object itself supports querying via the Element.select method, which internally uses DomQuery to select elements. As a simple example of how you might use this, the ExtStart.html file contains several paragraph (
) tags, none of which have ids. If you wanted to easily select every paragraph and perform an action on all of them at once, you could do something like this:
// Highlights every paragraph
Ext.select('p').highlight();
This example demonstrates a very handy aspect of Element.select—it returns a CompositeElement, which provides access to every underlying Element via the Element interface. This allows you to easily act on every Element instance returned by Element.select without looping and touching each one individually.
DomQuery supports a wide array of selection options, including most of the W3C CSS3 DOM selectors, basic XPath, HTML attributes and a lot more. Please see the DomQuery API documentation for complete details on this powerful library.
RESPONDING TO EVENTS
So far in our examples, all of the code we've written has been directly inside the onReady function, which means that it always executes immediately after the page loads. This doesn't give us much control—you will most commonly want your code to execute in response to specific actions or events that you choose to handle. To do this, you define event handlers that can respond to events using functions that you assign.
Let's start off with a simple example. Open up ExtStart.js and edit it so that your code looks like this:
Ext.onReady(function() {
Ext.get('myButton').on('click', function(){
alert("You clicked the button");
});
});
The code still executes when the page loads, but there's an important difference. The function containing the alert() is defined, but is not actually executed immediately—it is assigned as the "handler" of the button click event. Spelled out in plain English, this code might read: "Get a reference to the Element with id 'myButton' and assign a function to be called anytime someone clicks on the Element."
Not surprisingly, Element.select allows you to do the same thing, but with an entire group of Elements at once. For example, to show our message when any paragraph in our test page is clicked, we could do this:
Ext.onReady(function() {
Ext.select('p').on('click', function() {
alert("You clicked a paragraph");
});
});
In these two examples, the event handling function is simply declared inline, without giving it a function name. The term for this type of function is an "anonymous function" since it is declared without ever being named. You can also assign an event to be handled by a named function, which is especially useful if you want to reuse the function and have it handle multiple events. For example, this code is functionally equivalent to the previous example:
Ext.onReady(function() {
var paragraphClicked = function() {
alert("You clicked a paragraph");
}
Ext.select('p').on('click', paragraphClicked);
});
So far we have looked at performing a generic action when our event is raised, but how do we actually know which specific Element raised the event so that we can perform some action on it? It turns out to be pretty easy—the Element.onmethod passes three extremely useful parameters to the event handling function (we're only going to look at the first one here, but you should explore the API documentation to learn more about event handling details). In our previous examples our handling function was ignoring these parameters, but with one simple change, we can provide an additional level of functionality. The first, and most important, parameter is the event that occurred. This is actually an Ext.EventObject, which is both normalized across browsers and provides more information than the standard browser event. For example, the event's target DOM node can be retrieved with this simple addition:
Ext.onReady(function() {
var paragraphClicked = function(e) {
Ext.get(e.target).highlight();
}
Ext.select('p').on('click', paragraphClicked);
});
Note that target is a DOM node, so we first retrieve the corresponding Element, then perform whatever action we want on it. In this case, we are visually highlighting the paragraph.
PASSING ARGUMENTS TO EVENT HANDLERS
Here's a quick example on how to pass arguments to an event handler using createDelegate:
var someHandler = function(evt,t,o,myArg1,myArg2,myArg3) {
//do stuff
}
Ext.select('.notice-type1').addListener('click', someHandler.createDelegate(this, [4,'pizza',11], true));
Ext.select('.notice-type2').addListener('click', someHandler.createDelegate(this, [7,'stuff',12], true));
The function someHandler will get called with the following arguments:
evt, t, o
These are the arguments that would get passed to your event handler normally. They are: the EventObject describing the event, the Element which was the target of the event, and the options object from the addListener call. See addListener in the API for more information. You can also set a breakpoint in Firebug inside your event handler to check these objects out and see what kind of useful things they contain.
myArg1, myArg2, myArg3
your own custom arguments specified as an array which is passed as the second argument to createDelegate. In this case we're passing 4,'pizza',11 for elements of class "notice-type1" and 7,'stuff',12 for elements of class "notice-type2".
If all you want to do is pass custom arguments to the even handler and you don't need to have access to the element that fired the event you're probably better off just using createCallback.
See addListener and Function for more details.
USING WIDGETS
In addition to the core javascript library that we've been discussing, Ext also includes one of the richest sets of Javascript UI widgets available today. There are far too many to cover in this introduction, but let's take a look at a couple of the widgets that people use most commonly and how easy they are to work with.
MessageBox
Rather than a boring "Hello World" message box, let's add a little twist. We already have code that we wrote in the previous section that highlights each paragraph when you click on it. Let's modify that code to also show the text of the paragraph that was clicked in a message box. In the paragraphClicked function above, replace the line:
Ext.get(e.target).highlight();
...with this code:
var paragraph = Ext.get(e.target);
paragraph.highlight();
Ext.MessageBox.show({
title: 'Paragraph Clicked',
msg: paragraph.dom.innerHTML,
width:400,
buttons: Ext.MessageBox.OK,
animEl: paragraph});
There are a couple of new concepts being shown here that are worth discussing. In the first line, we are now creating a local variable named paragraph that will hold a reference to the Element representing the DOM node that was clicked (in this case we know it will always be a paragraph since our click event is only associated with
tags). Why are we doing this? Well, looking ahead for a moment, we will need a reference to the Element to highlight it, and we'll also use the same Element for some of the MessageBox parameters. In general, it is bad practice to make the same function call multiple times to retrieve the same value or object reference, so by assigning it to a local variable and reusing the variable, we are being good object-oriented developers!
Now, on to the MessageBox call, which demonstrates the other new concept for us to discuss. At first glance, this may look simply like a list of parameters being passed to a method, but if you look closely, there is a very specific syntax. What is actually being passed to MessageBox.show() in this case is only one parameter: an object literal that contains a set of properties and values. In JavaScript, an object literal is a dynamic, generic object that is created anytime you use the { and } characters surrounding a list of name/value properties, and the format for those properties is [property name] : [property value]. You'll see this pattern used extensively throughout Ext, so you should learn it well!
Why use an object literal? The main reason is flexibility. New properties can be added or removed from the object literal at any time, or defined in any order, while the method signature (the number and types of parameters expected by a method) never has to change. It also makes it far more convenient from the end developer's perspective when using methods with many optional parameters (as in the case of MessageBox.show). For example, let's say that a fictional method foo.action has four optional parameters, but you only need to pass one of them. In this case, your code might look like this: foo.action(null, null, null, 'hello'). However, if that method instead took an object literal, the code would look like this: foo.action({ param4: 'hello' }). Much easier to use, much more readable.
GRID
The grid is one of the most popular widgets in Ext, and usually the first one that people want to see, so let's take a look at how easy it is to get a basic grid up and running. Replace any existing code you have in ExtStart.js so that it looks like this:
Ext.onReady(function() {
var myData = [ ['Apple',29.89,0.24,0.81,'9/1 12:00am'],
['Ext',83.81,0.28,0.34,'9/12 12:00am'],
['Google',71.72,0.02,0.03,'10/1 12:00am'],
['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
];
myReader = new Ext.data.ArrayReader({}, [{name: 'company'},{name: 'price', type: 'float'},{name: 'change', type: 'float'},{name: 'pctChange', type: 'float'},{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]);
var grid = new Ext.grid.GridPanel({
store: new Ext.data.Store({data: myData,reader: myReader}),
columns: [{header: 'Company', width: 120, sortable: true, dataIndex: 'company'},
{header: 'Price', width: 90, sortable: true, dataIndex: 'price'},
{header: 'Change', width: 90, sortable: true, dataIndex: 'change'},
{header: '% Change', width: 90, sortable: true, dataIndex: 'pctChange'},
{header: 'Last Updated', width: 120, sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),dataIndex: 'lastChange'}],
viewConfig: {
forceFit: true
},renderTo: 'content',
title: 'My First Grid',
width: 500,
autoHeight: true,
frame: true});
grid.getSelectionModel().selectFirstRow();
});
While this looks like a lot, it is really only 4 lines of code in total (3 if you don't count the test data)!
Of course, there will probably be some details about this code that you may not fully understand at this point. The intent of this example is to show how it's possible to create an extremely rich, visually-complex user interface component with very few lines of code—learning the details will be left as an exercise for the reader. There are many resources to help you with learning the grid, including the interactive grid demos and the GridPanel API documentation.
And Many More...
We've only seen the tip of the iceberg here. There are literally dozens of UI widgets to choose from in Ext, including automatic page layouts, tabs, menus, toolbars, dialogs, a tree view and many more. Please explore the interactive examples for a glimpse of everything that's available.
USING AJAX
Once you have your page created and you know how to interact with it through Javascript, you'll probably want to know how to get data to and from a remote server, most commonly to load and save data from a database on the server. Doing this asynchronously via Javascript without reloading the page is known commonly as Ajax, and Ext has excellent Ajax support built right in. For example, a common goal is to handle a user interaction, post something to the server asynchronously, then update an element of the UI in response to the action. Here's an example of a very simple HTML form containing a text input field, a button, and a div used to display a message (Note: you can add this code to ExtStart.html if you'd like to follow along, but you'll have to have access to a web server in order to run the server code below):
Name:
Next, we'll add the Javascript required to get our data and post it to a server-based process (replace any existing code in ExtStart.js with this):
Ext.onReady(function(){
Ext.get('okButton').on('click', function(){
var msg = Ext.get('msg');
msg.load({
url: 'ajax-example.php', // <-- change if necessary
params: 'name=' + Ext.get('name').dom.value,
text: 'Updating...'
});
msg.show();
});
});
Note: This example will only run from a web server. The URL in your browser should start with http:// and not file:// or the Ajax transaction will not work! Localhost will work fine, but it must be via http.
The real challenges when dealing with Ajax processing involve all of the plumbing code required to properly process and format real structured data on the server. There are several formats to choose from that people use commonly (most often either JSON or XML). There are also many language-specific libraries available to deal with Ajax processing that can work well with Ext, as Ext is language-neutral with regard to the server. As long as the result is sent to the page in the proper data format, Ext does not care what happens on the server! Please see our list of platform-specific resources for additional information about server-side frameworks and tools.
REFERENCES
1. Pronunciation thread on Ext forum
2. (see also, Rich Internet application
3. Ext as of version 2.0 can works with different base libraries or adapters. (e.g. YUI, jQuery, Prototype), or it can work standalone.
4. API documentation includes a migration guide. http://extjs.com/deploy/dev/docs/
5. http://extjs.com/learn/Ext_1_to_2_Migration_Guide
6. ExtJS forum thread on the license change
7. http://www.gnu.org/licenses/lgpl-3.0.txt
8. http://extjs.com/blog/2008/04/21/ext-js-21-and-ext-gwt-10-released-preview-of-ext-js-30/
EXT JS
In the world of Rich Internet Applications (RIA) development, Ext JS stands out as a cross-browser JavaScript library that offers the applications developer a powerful toolset. With a set of customizable user interface widgets similar to those found in desktop operating systems, an effective data binding model, a comprehensive programming interface for manipulating the Document Object Model and communicating with the server, a committed development team, and an enthusiastic users' community, the Ext JS library is a great choice for today's web builders.
EXT JS OVERVIEW
Ext JS is a cross-browser JavaScript library for building rich internet applications. It includes:
• High performance, customizable UI widgets
• Well designed and extensible Component model
• An intuitive, easy to use API
• Commercial and Open Source licenses available
BROWSER COMPATIBILITY
Ext JS supports all major web browsers including:
• Internet Explorer 6+
• FireFox 1.5+ (PC, Mac)
• Safari 3+
• Chrome 3+
• Opera 9+ (PC, Mac)
DOWNLOAD EXT
If you haven't done so already, you'll first want to download the most current Ext release which can always be found here: http://extjs.com/products/extjs/download.php.
There are several different options for what you can download, but you'll probably want to start with the most current stable production version available. Once you download and unzip the file, you're pretty much ready to go, but read on for some specifics depending on your server setup.
CONFIGURE
Some Ext JS examples require a HTTP server (and some a PHP server). This does not mean that Ext JS can only be used in combination with a HTTP server.
Ext JS code that uses server requests requires a HTTP web server (access pages through a webserver viahttp://something).
NO WEB SERVER
You can actually run Ext JS without a web server thanks to Doug Hendricks. If you would like to run Ext without a web server, check out this forum post.
IIS - MICROSOFT INTERNET INFORMATION SERVICES
If you encounter any difficulties on a IIS platform, additional tips can be found in this forum post.
APACHE
If you encounter issues with Apache on windows (files being corrupted), additional tips can be found in this forum post.
THE DEMOS / EXAMPLES
A good place to start exploring is the examples directory and the wiki (tutorials and manual). The examples directory in the download package has several working examples, please note the following:
Ext uses a 1x1 transparent gif image to create inline icons with CSS background images. The default URL to this file is "extjs.com/s.gif", so you'll want to change this somewhere at the top of your code by telling Ext where to find the empty image. You can modify the URL as needed with a command like this:
Ext.BLANK_IMAGE_URL = '/images/ext/resources/images/default/s.gif';
LET'S GET STARTED
We're going to walk through some of the most common tasks that people have to accomplish in Javascript and how to perform them using Ext. If you'd like to experiment as you go, you should download the starter files in IntroToExt2.zip which we will use to build up a page of working Ext code.
This zip contains four files: ExtStart.html, ExtStart.js, ExtStart.css and ajax-example.php.
- Unzip all 4 files into a folder directly under the folder where Ext is installed (for example, if Ext is at "C:\code\ext-2.0\," create a new folder under "ext-2.0\" called "tutorial" ie. "C:\code\ext-2.0\tutorial\").
- Double-click ExtStart.html so that it launches in your default web browser, and you should get a message telling you that everything is configured correctly. If you get a JavaScript error, please follow the instructions on that page to get it working.
Now you're ready to open ExtStart.js in your favorite IDE or text editor and take a look at it:
Ext.onReady(function() {
alert("Congratulations! You have Ext configured correctly!");
});
Ext.onReady is probably the first method that you'll use on every page. This method is automatically called once the DOM is fully loaded, guaranteeing that any page elements that you may want to reference will be available when the script runs. You can go ahead and delete the alert() line now so that we can start adding some real code that actually does something useful!
ELEMENT: THE HEART OF EXT
Almost everything you do in Javascript will at some point involve referencing specific elements on your page so that you can do interesting things with them. Using traditional Javascript, selecting a DOM node by ID is done like this:
var myDiv = document.getElementById('myDiv');
This works just fine, but the object that is returned (a DOM node) doesn't offer much in the way of power or convenience. In order to do anything useful with that node, you are left still writing a lot of custom plumbing code yourself. Plus it is your responsibility to handle all of the differences in how the node can be used from browser to browser, which can be daunting.
Enter the Ext.Element object. The Element really is the heart of Ext as most of what you'll do involves getting access to Elements and performing actions on them. The Element API is fundamental to the entire Ext library, and if you spend the time to really learn only one class in Ext well, Element should be it!
The corresponding code to get an Ext Element by ID looks like this (the starter page ExtStart.html contains a div with the id "myDiv," so go ahead and add this code to ExtStart.js):
Ext.onReady(function() {
var myDiv = Ext.get('myDiv');
});
So we are getting back an Element object now—what's so interesting about that?
- Element wraps most of the DOM methods and properties that you'll need, providing a convenient, unified, cross-browser DOM interface (and you can still get direct access to the underlying DOM node when you need it via Element.dom)
- The Element.get() method provides internal caching, so multiple calls to retrieve the same object are incredibly fast
- The most common actions performed on DOM nodes are built into direct, cross-browser Element methods (add/remove CSS classes, add/remove event handlers, positioning, sizing, animation, drag/drop, etc.)
This means that you can do all kinds of useful stuff with very minimal code. Here are just a few simple examples (see theElement API documentation for the complete list of everything that you can do). Go ahead and try adding some of these to ExtStart.js after the previous line where we got the 'myDiv' Element:
myDiv.highlight(); // The element's background will highlight to yellow then fade back
myDiv.addClass('red'); // Add a custom CSS class (defined in ExtStart.css)
myDiv.center(); // Center the element in the viewport
myDiv.setOpacity(.25); // Make the element partially-transparent
SELECTING DOM NODES
Often it is either impractical or impossible to select DOM nodes by ID. Maybe the ID is not set, or you don't know it, or there are too many elements to practically reference directly by ID. Sometimes you may want to select nodes based on something other than ID, like an attribute or a CSS classname. For these reasons, Ext ships with an extremely powerful DOM selector library called DomQuery.
DomQuery can be used as a standalone library, but more often when using Ext, you'll use it in the context of selecting Elements so that you can then act on them via the Element interface. Luckily, the Element object itself supports querying via the Element.select method, which internally uses DomQuery to select elements. As a simple example of how you might use this, the ExtStart.html file contains several paragraph (
) tags, none of which have ids. If you wanted to easily select every paragraph and perform an action on all of them at once, you could do something like this:
// Highlights every paragraph
Ext.select('p').highlight();
This example demonstrates a very handy aspect of Element.select—it returns a CompositeElement, which provides access to every underlying Element via the Element interface. This allows you to easily act on every Element instance returned by Element.select without looping and touching each one individually.
DomQuery supports a wide array of selection options, including most of the W3C CSS3 DOM selectors, basic XPath, HTML attributes and a lot more. Please see the DomQuery API documentation for complete details on this powerful library.
RESPONDING TO EVENTS
So far in our examples, all of the code we've written has been directly inside the onReady function, which means that it always executes immediately after the page loads. This doesn't give us much control—you will most commonly want your code to execute in response to specific actions or events that you choose to handle. To do this, you define event handlers that can respond to events using functions that you assign.
Let's start off with a simple example. Open up ExtStart.js and edit it so that your code looks like this:
Ext.onReady(function() {
Ext.get('myButton').on('click', function(){
alert("You clicked the button");
});
});
The code still executes when the page loads, but there's an important difference. The function containing the alert() is defined, but is not actually executed immediately—it is assigned as the "handler" of the button click event. Spelled out in plain English, this code might read: "Get a reference to the Element with id 'myButton' and assign a function to be called anytime someone clicks on the Element."
Not surprisingly, Element.select allows you to do the same thing, but with an entire group of Elements at once. For example, to show our message when any paragraph in our test page is clicked, we could do this:
Ext.onReady(function() {
Ext.select('p').on('click', function() {
alert("You clicked a paragraph");
});
});
In these two examples, the event handling function is simply declared inline, without giving it a function name. The term for this type of function is an "anonymous function" since it is declared without ever being named. You can also assign an event to be handled by a named function, which is especially useful if you want to reuse the function and have it handle multiple events. For example, this code is functionally equivalent to the previous example:
Ext.onReady(function() {
var paragraphClicked = function() {
alert("You clicked a paragraph");
}
Ext.select('p').on('click', paragraphClicked);
});
So far we have looked at performing a generic action when our event is raised, but how do we actually know which specific Element raised the event so that we can perform some action on it? It turns out to be pretty easy—the Element.onmethod passes three extremely useful parameters to the event handling function (we're only going to look at the first one here, but you should explore the API documentation to learn more about event handling details). In our previous examples our handling function was ignoring these parameters, but with one simple change, we can provide an additional level of functionality. The first, and most important, parameter is the event that occurred. This is actually an Ext.EventObject, which is both normalized across browsers and provides more information than the standard browser event. For example, the event's target DOM node can be retrieved with this simple addition:
Ext.onReady(function() {
var paragraphClicked = function(e) {
Ext.get(e.target).highlight();
}
Ext.select('p').on('click', paragraphClicked);
});
Note that target is a DOM node, so we first retrieve the corresponding Element, then perform whatever action we want on it. In this case, we are visually highlighting the paragraph.
PASSING ARGUMENTS TO EVENT HANDLERS
Here's a quick example on how to pass arguments to an event handler using createDelegate:
var someHandler = function(evt,t,o,myArg1,myArg2,myArg3) {
//do stuff
}
Ext.select('.notice-type1').addListener('click', someHandler.createDelegate(this, [4,'pizza',11], true));
Ext.select('.notice-type2').addListener('click', someHandler.createDelegate(this, [7,'stuff',12], true));
The function someHandler will get called with the following arguments:
evt, t, o
These are the arguments that would get passed to your event handler normally. They are: the EventObject describing the event, the Element which was the target of the event, and the options object from the addListener call. See addListener in the API for more information. You can also set a breakpoint in Firebug inside your event handler to check these objects out and see what kind of useful things they contain.
myArg1, myArg2, myArg3
your own custom arguments specified as an array which is passed as the second argument to createDelegate. In this case we're passing 4,'pizza',11 for elements of class "notice-type1" and 7,'stuff',12 for elements of class "notice-type2".
If all you want to do is pass custom arguments to the even handler and you don't need to have access to the element that fired the event you're probably better off just using createCallback.
See addListener and Function for more details.
USING WIDGETS
In addition to the core javascript library that we've been discussing, Ext also includes one of the richest sets of Javascript UI widgets available today. There are far too many to cover in this introduction, but let's take a look at a couple of the widgets that people use most commonly and how easy they are to work with.
MessageBox
Rather than a boring "Hello World" message box, let's add a little twist. We already have code that we wrote in the previous section that highlights each paragraph when you click on it. Let's modify that code to also show the text of the paragraph that was clicked in a message box. In the paragraphClicked function above, replace the line:
Ext.get(e.target).highlight();
...with this code:
var paragraph = Ext.get(e.target);
paragraph.highlight();
Ext.MessageBox.show({
title: 'Paragraph Clicked',
msg: paragraph.dom.innerHTML,
width:400,
buttons: Ext.MessageBox.OK,
animEl: paragraph});
There are a couple of new concepts being shown here that are worth discussing. In the first line, we are now creating a local variable named paragraph that will hold a reference to the Element representing the DOM node that was clicked (in this case we know it will always be a paragraph since our click event is only associated with
tags). Why are we doing this? Well, looking ahead for a moment, we will need a reference to the Element to highlight it, and we'll also use the same Element for some of the MessageBox parameters. In general, it is bad practice to make the same function call multiple times to retrieve the same value or object reference, so by assigning it to a local variable and reusing the variable, we are being good object-oriented developers!
Now, on to the MessageBox call, which demonstrates the other new concept for us to discuss. At first glance, this may look simply like a list of parameters being passed to a method, but if you look closely, there is a very specific syntax. What is actually being passed to MessageBox.show() in this case is only one parameter: an object literal that contains a set of properties and values. In JavaScript, an object literal is a dynamic, generic object that is created anytime you use the { and } characters surrounding a list of name/value properties, and the format for those properties is [property name] : [property value]. You'll see this pattern used extensively throughout Ext, so you should learn it well!
Why use an object literal? The main reason is flexibility. New properties can be added or removed from the object literal at any time, or defined in any order, while the method signature (the number and types of parameters expected by a method) never has to change. It also makes it far more convenient from the end developer's perspective when using methods with many optional parameters (as in the case of MessageBox.show). For example, let's say that a fictional method foo.action has four optional parameters, but you only need to pass one of them. In this case, your code might look like this: foo.action(null, null, null, 'hello'). However, if that method instead took an object literal, the code would look like this: foo.action({ param4: 'hello' }). Much easier to use, much more readable.
GRID
The grid is one of the most popular widgets in Ext, and usually the first one that people want to see, so let's take a look at how easy it is to get a basic grid up and running. Replace any existing code you have in ExtStart.js so that it looks like this:
Ext.onReady(function() {
var myData = [ ['Apple',29.89,0.24,0.81,'9/1 12:00am'],
['Ext',83.81,0.28,0.34,'9/12 12:00am'],
['Google',71.72,0.02,0.03,'10/1 12:00am'],
['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
];
myReader = new Ext.data.ArrayReader({}, [{name: 'company'},{name: 'price', type: 'float'},{name: 'change', type: 'float'},{name: 'pctChange', type: 'float'},{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]);
var grid = new Ext.grid.GridPanel({
store: new Ext.data.Store({data: myData,reader: myReader}),
columns: [{header: 'Company', width: 120, sortable: true, dataIndex: 'company'},
{header: 'Price', width: 90, sortable: true, dataIndex: 'price'},
{header: 'Change', width: 90, sortable: true, dataIndex: 'change'},
{header: '% Change', width: 90, sortable: true, dataIndex: 'pctChange'},
{header: 'Last Updated', width: 120, sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),dataIndex: 'lastChange'}],
viewConfig: {
forceFit: true
},renderTo: 'content',
title: 'My First Grid',
width: 500,
autoHeight: true,
frame: true});
grid.getSelectionModel().selectFirstRow();
});
While this looks like a lot, it is really only 4 lines of code in total (3 if you don't count the test data)!
- The first line of code creates an array of test data to be displayed in the grid. In real projects, you would likely load this data from some dynamic source like a database or web service.
- Next, we create a data reader that knows how to interpret the data and convert it into usable records for the grid's data store. There are several different types of Reader classes for different types of data.
- Next, we create the grid widget, passing in all sorts of config values, including:
- A new data store, configured on the fly with our test data and reader
- The column model definition using the columns config
- Additional options to set up specific grid features
- Finally, we tell the grid to highlight its first row via the SelectionModel.
Of course, there will probably be some details about this code that you may not fully understand at this point. The intent of this example is to show how it's possible to create an extremely rich, visually-complex user interface component with very few lines of code—learning the details will be left as an exercise for the reader. There are many resources to help you with learning the grid, including the interactive grid demos and the GridPanel API documentation.
And Many More...
We've only seen the tip of the iceberg here. There are literally dozens of UI widgets to choose from in Ext, including automatic page layouts, tabs, menus, toolbars, dialogs, a tree view and many more. Please explore the interactive examples for a glimpse of everything that's available.
USING AJAX
Once you have your page created and you know how to interact with it through Javascript, you'll probably want to know how to get data to and from a remote server, most commonly to load and save data from a database on the server. Doing this asynchronously via Javascript without reloading the page is known commonly as Ajax, and Ext has excellent Ajax support built right in. For example, a common goal is to handle a user interaction, post something to the server asynchronously, then update an element of the UI in response to the action. Here's an example of a very simple HTML form containing a text input field, a button, and a div used to display a message (Note: you can add this code to ExtStart.html if you'd like to follow along, but you'll have to have access to a web server in order to run the server code below):
Name:
Next, we'll add the Javascript required to get our data and post it to a server-based process (replace any existing code in ExtStart.js with this):
Ext.onReady(function(){
Ext.get('okButton').on('click', function(){
var msg = Ext.get('msg');
msg.load({
url: 'ajax-example.php', // <-- change if necessary
params: 'name=' + Ext.get('name').dom.value,
text: 'Updating...'
});
msg.show();
});
});
Note: This example will only run from a web server. The URL in your browser should start with http:// and not file:// or the Ajax transaction will not work! Localhost will work fine, but it must be via http.
The real challenges when dealing with Ajax processing involve all of the plumbing code required to properly process and format real structured data on the server. There are several formats to choose from that people use commonly (most often either JSON or XML). There are also many language-specific libraries available to deal with Ajax processing that can work well with Ext, as Ext is language-neutral with regard to the server. As long as the result is sent to the page in the proper data format, Ext does not care what happens on the server! Please see our list of platform-specific resources for additional information about server-side frameworks and tools.
REFERENCES
1. Pronunciation thread on Ext forum
2. (see also, Rich Internet application
3. Ext as of version 2.0 can works with different base libraries or adapters. (e.g. YUI, jQuery, Prototype), or it can work standalone.
4. API documentation includes a migration guide. http://extjs.com/deploy/dev/docs/
5. http://extjs.com/learn/Ext_1_to_2_Migration_Guide
6. ExtJS forum thread on the license change
7. http://www.gnu.org/licenses/lgpl-3.0.txt
8. http://extjs.com/blog/2008/04/21/ext-js-21-and-ext-gwt-10-released-preview-of-ext-js-30/
Technology Management
-Pavan
Management of technology:
Definition:
All the knowledge, processes, products, tools, methods and systems employed in creation of goods or in providing services.
4 components:
Interdependent H/W, S/W, Brainware, know-how
According to Pritchett, there has been more information produced in the last 30 years than the previous 5000 years.
Nomads to agricultural labourers to industry. Workers to knowledge worker
America – Importance of TM ----now in India
Success of Japan, Singapore, China, Brazil, Philippines, Taiwan
Role, importance and features of Technology.:-
1. Linked to growth of economy
2. Creation of wealth- IPR, International assets
3. Increase in sales and profits for organization and flexibility of mfg & service systems
4. Reduces wastage & cost
5. Value addition to products and process eg. Maruti car, Nokia mobile, Sony TV, HLL surf.
6. Better HR practices
7. Growth in all sectors- agriculture, education, health, telecommunications,
Technology Development
• Basic research
• Applied research
• Tech. development
• Tech improvement
• Production
• Marketing
• Proliferation
• Technology enhancement
Technology Management connects disciplines which focus on technology creation to conversion of wealth.
Technology acquisition methods:
1. Internal R&D
2. Participating in a JV
3. Contracting out for R&D
4. Licensing in of Tech.
5. Buying the tech.
Technology Forecasting
Basis for good forecasting:
1.Understanding of TLC
2.Factors influencing tech. development or rate of innovation
3.Credibility
4. Accurate information base
5.Clearly describe methods and models
6. Clearly defined and supported assumptions.
7. Quantitative
8.Level of confidence
Technology diffusion :
“Diffusion is the process by which an innovation is communicated, over a time, through certain channels to members of a social system.”
Macro effects of technology change:
1. Rapid change in tech. to identify
2. Technological complexity , cross functional
3. Tech. fusion- cross fertilization of technologies
4. Diffusion of IT with COMM technology- implications in other fields
5. Emerging technologies have the greater impact of life- Molecular biology –IT- genetic engg, bio tech – nano tech will change industries and create markets
6. TLC’s for High tech industries become shorter
7. Changes in business environment
8. Communication, integration and collaboration
9. Changes in orgn. structure
10. Financial structure, education and training
11. Strategic direction of industries and economic strategy
12. Linking will assume greater importance
Forecasting Technology :
First step in tech planning is Forecasting.
It provides vision of the future that can be used to guide action of the present in anticipation of future states.
Technology forecasting is based on following established methodologies to forecast the character and role of the Technological advancement.
Eg: Reliance- CDMA mobile launched 1 year earlier, smart homes, security systems, malls, multiplexes, retail boom, trendy footwear and garments, foods & restaurants, Govt, engg, IT, Pharma, Telecom, engg. sectors.
The innovation chain equation:
Scientific invention +Engg Dev. +Entrepreneurship +Management+ Recognized social need + supportive environment = commercially successful innovation
Methods of Technology Forecasting:
1. Monitoring
2. Expert opinion
3. Trend analysis
4. Modeling
5. Scenarios
Tech. strategy: Technological advantage
Business strategy: Competitive edge
Market demographics Core technology
Business view of Technology Tech. view of business
Effective TM is a perfect blend of TS & BS.
Technology Transfer:
Definition: It is a process that permits the flow of technology from a source to a receiver. Source is the owner or holder of knowledge, while the recipient is the beneficiary of such knowledge.
Source: individual, company or a country
Jain & Triandis;- 1990 defines:
Is a process by which science & tech. are transferred from one individual or group to another that incorporates this technology into its way of doing things.
“ TT is the process by which tech, knowledge and information developed in one enterprise for particular purpose is applied and utilized in another enterprise for another purpose”
• User of tech. does not have to be its creator or inventor.
• Most inventions are created outside the firm that benefit from them. Invention may happen outside the firms boundaries or within the firm, it may be confined to one division.
Categories/modes of tech. transfer (TT):
1.International TT: eg. Advanced to developing countries
2.Regional TT: eg. AP to HP and Gujarat – e- Governance
3. X- industry or X- sector TT
Eg. Space program to commercial applications
4. Inter-firm TT :
Eg. Transfer of CAD / CAM expertise from machine tool mfg firm to a furniture producing firm.
5.Intra-firm TT:
Eg. One division to another, one dept to other- sophisticated computer tech. to manual work.
Obviously there are problems that act as barriers to appropriate TT such as :
1. Local capacity as well as the multi nationals whose financial powers have in many cases weakened the strengths of government. But a much bigger problem in effective and appropriate TT is focused on priorities of the donor or purveyor.
2. The financial limitations of most of the countries in Africa means that they cannot choose the technologies best suited to them and as a result, flexibility is compromised and development stillborn
Channels of Tech. flow:
Tech. is intangible, flows across boundaries of countries, industries, depts. And individuals provided channels of flow are estd.
Feartures and routes of of TT:
General channel: education, training, public conference, study missions, exchange visits
Reverse engg. channel: COMPAQ PC
Planned channel: licensing, franchising, JV, turnkey project, FDI , and consortia.
Technology Transfer agreement – Legal
1. Code of conduct- agreeable and procedural
2. Pricing of TT agreement- negotiating, bargaining
Eg. EICHER tractors- USA to Africa
3. Govt. Initiatives- CSIR labs, IICT, NGRI, Defense R&D, Nuclear deal with USA, TIFAC-in aggr & health, education , training and learning
Technology Search strategy:
There are 5 steps involved in evolving a strategy for TS:
1. Look at your situation
Understand context, helps you understand your internal and external environment reg, transfer and define objectives and strategies for how to proceed.
2. Choose the right path
Analyze risks and select strategy, helps you understand the risks associated with the transfer and select the right strategy to follow.
3. Focus the transfer :
Plan technology implementation, helps you plan the next step of the tech. implementation
4. Getting it done:
Implement technology, helps you implement the transfer as defined in the pplan
5. Determine where to go next:
Review and update transfer plan, helps you understands the results of the transfer to date and how to proceed based on the results.
Improving your TT process provides general guidelines for how to become pro-active in TT.
Technology change:
1. Pace of change
2. Driven by IT
3. USA – 85% workforce – agriculture ---- 3% workforce – agriculture because of Technology Management
4. Earlier manager – resistance to change
Technology transformation: eg E mail, ATM, SMS, SUN micro systems, Netscape
Technology policy- planning
Macro effects of tech. change:
• x-industry integration- IT, Telecom, consumer electronics
• better Forecasting
• rapid growth
• diverse features
• demanding consumer
• technology advancement
• flexibility of mfg & service systems
• orgn. structure
Socio Economic Planning:
1. Organizations operate in a socio-techno economic environment and interact with it.
2. Within the context of TM, interest is on technological factors, acts, plans.
4. Organizations must be aware of the
(i) Potential public concerns of their product about to market.
(ii) And the processes.
Economic Planning:-
The ultimate measure of the success or survival of a corporation is the market performance of its products and services.
Organizations must translate market indicators to strategic decisions and operational plans.
Priority issues:-
1. Integration of technological and strategic plans.
2. Impact of third parties on TC—eg, Judicial decisions, Legislative and Regulatory actions, Insurance risks and Liability.
3. Increasing users influence in selection and application of technology.
4. Decreasing social resistance to adoption of new technologies.
5. Distributing the benefits from new technologies to gain acceptance.
Eg: Automation leads to cost reduction with lower labour share,
Reduces the incentives for outsourcing and offshore facilities,
Increase manufacturing jobs in USA.
6. Other issues worthy of consideration in developing firm specific methodologies to guide managers dealing with technology.
i) Potential obstacles to--- Inter Firm Corporation.
ii) Benefits of--- Inter Firm Corporation.
iii) Appropriate strategies and time points --- for transition from cooperation to completion.
iv) Impact of technology on quality of life health and safety.
Technology Planning:
1. Forecast the technology
2. Analyze and forecast the environment
3. Analyze and forecast the market/user
4. Analyze the organization
5. Develop the mission
6. Design organizational actions
7. Put the plan into operation
Management of technology:
Definition:
All the knowledge, processes, products, tools, methods and systems employed in creation of goods or in providing services.
4 components:
Interdependent H/W, S/W, Brainware, know-how
According to Pritchett, there has been more information produced in the last 30 years than the previous 5000 years.
Nomads to agricultural labourers to industry. Workers to knowledge worker
America – Importance of TM ----now in India
Success of Japan, Singapore, China, Brazil, Philippines, Taiwan
Role, importance and features of Technology.:-
1. Linked to growth of economy
2. Creation of wealth- IPR, International assets
3. Increase in sales and profits for organization and flexibility of mfg & service systems
4. Reduces wastage & cost
5. Value addition to products and process eg. Maruti car, Nokia mobile, Sony TV, HLL surf.
6. Better HR practices
7. Growth in all sectors- agriculture, education, health, telecommunications,
Technology Development
• Basic research
• Applied research
• Tech. development
• Tech improvement
• Production
• Marketing
• Proliferation
• Technology enhancement
Technology Management connects disciplines which focus on technology creation to conversion of wealth.
Technology acquisition methods:
1. Internal R&D
2. Participating in a JV
3. Contracting out for R&D
4. Licensing in of Tech.
5. Buying the tech.
Technology Forecasting
Basis for good forecasting:
1.Understanding of TLC
2.Factors influencing tech. development or rate of innovation
3.Credibility
4. Accurate information base
5.Clearly describe methods and models
6. Clearly defined and supported assumptions.
7. Quantitative
8.Level of confidence
Technology diffusion :
“Diffusion is the process by which an innovation is communicated, over a time, through certain channels to members of a social system.”
Macro effects of technology change:
1. Rapid change in tech. to identify
2. Technological complexity , cross functional
3. Tech. fusion- cross fertilization of technologies
4. Diffusion of IT with COMM technology- implications in other fields
5. Emerging technologies have the greater impact of life- Molecular biology –IT- genetic engg, bio tech – nano tech will change industries and create markets
6. TLC’s for High tech industries become shorter
7. Changes in business environment
8. Communication, integration and collaboration
9. Changes in orgn. structure
10. Financial structure, education and training
11. Strategic direction of industries and economic strategy
12. Linking will assume greater importance
Forecasting Technology :
First step in tech planning is Forecasting.
It provides vision of the future that can be used to guide action of the present in anticipation of future states.
Technology forecasting is based on following established methodologies to forecast the character and role of the Technological advancement.
Eg: Reliance- CDMA mobile launched 1 year earlier, smart homes, security systems, malls, multiplexes, retail boom, trendy footwear and garments, foods & restaurants, Govt, engg, IT, Pharma, Telecom, engg. sectors.
Scientific invention +Engg Dev. +Entrepreneurship +Management+ Recognized social need + supportive environment = commercially successful innovation
Methods of Technology Forecasting:
1. Monitoring
2. Expert opinion
3. Trend analysis
4. Modeling
5. Scenarios
Tech. strategy: Technological advantage
Business strategy: Competitive edge
Business view of Technology Tech. view of business
Effective TM is a perfect blend of TS & BS.
Technology Transfer:
Definition: It is a process that permits the flow of technology from a source to a receiver. Source is the owner or holder of knowledge, while the recipient is the beneficiary of such knowledge.
Source: individual, company or a country
Jain & Triandis;- 1990 defines:
Is a process by which science & tech. are transferred from one individual or group to another that incorporates this technology into its way of doing things.
“ TT is the process by which tech, knowledge and information developed in one enterprise for particular purpose is applied and utilized in another enterprise for another purpose”
• User of tech. does not have to be its creator or inventor.
• Most inventions are created outside the firm that benefit from them. Invention may happen outside the firms boundaries or within the firm, it may be confined to one division.
Categories/modes of tech. transfer (TT):
1.International TT: eg. Advanced to developing countries
2.Regional TT: eg. AP to HP and Gujarat – e- Governance
3. X- industry or X- sector TT
Eg. Space program to commercial applications
4. Inter-firm TT :
Eg. Transfer of CAD / CAM expertise from machine tool mfg firm to a furniture producing firm.
5.Intra-firm TT:
Eg. One division to another, one dept to other- sophisticated computer tech. to manual work.
Obviously there are problems that act as barriers to appropriate TT such as :
1. Local capacity as well as the multi nationals whose financial powers have in many cases weakened the strengths of government. But a much bigger problem in effective and appropriate TT is focused on priorities of the donor or purveyor.
2. The financial limitations of most of the countries in Africa means that they cannot choose the technologies best suited to them and as a result, flexibility is compromised and development stillborn
Channels of Tech. flow:
Tech. is intangible, flows across boundaries of countries, industries, depts. And individuals provided channels of flow are estd.
Feartures and routes of of TT:
General channel: education, training, public conference, study missions, exchange visits
Reverse engg. channel: COMPAQ PC
Planned channel: licensing, franchising, JV, turnkey project, FDI , and consortia.
Technology Transfer agreement – Legal
1. Code of conduct- agreeable and procedural
2. Pricing of TT agreement- negotiating, bargaining
Eg. EICHER tractors- USA to Africa
3. Govt. Initiatives- CSIR labs, IICT, NGRI, Defense R&D, Nuclear deal with USA, TIFAC-in aggr & health, education , training and learning
Technology Search strategy:
There are 5 steps involved in evolving a strategy for TS:
1. Look at your situation
Understand context, helps you understand your internal and external environment reg, transfer and define objectives and strategies for how to proceed.
2. Choose the right path
Analyze risks and select strategy, helps you understand the risks associated with the transfer and select the right strategy to follow.
3. Focus the transfer :
Plan technology implementation, helps you plan the next step of the tech. implementation
4. Getting it done:
Implement technology, helps you implement the transfer as defined in the pplan
5. Determine where to go next:
Review and update transfer plan, helps you understands the results of the transfer to date and how to proceed based on the results.
Improving your TT process provides general guidelines for how to become pro-active in TT.
Technology change:
1. Pace of change
2. Driven by IT
3. USA – 85% workforce – agriculture ---- 3% workforce – agriculture because of Technology Management
4. Earlier manager – resistance to change
Technology transformation: eg E mail, ATM, SMS, SUN micro systems, Netscape
Technology policy- planning
Macro effects of tech. change:
• x-industry integration- IT, Telecom, consumer electronics
• better Forecasting
• rapid growth
• diverse features
• demanding consumer
• technology advancement
• flexibility of mfg & service systems
• orgn. structure
Socio Economic Planning:
1. Organizations operate in a socio-techno economic environment and interact with it.
2. Within the context of TM, interest is on technological factors, acts, plans.
(i) Potential public concerns of their product about to market.
(ii) And the processes.
Economic Planning:-
The ultimate measure of the success or survival of a corporation is the market performance of its products and services.
Organizations must translate market indicators to strategic decisions and operational plans.
Priority issues:-
1. Integration of technological and strategic plans.
2. Impact of third parties on TC—eg, Judicial decisions, Legislative and Regulatory actions, Insurance risks and Liability.
3. Increasing users influence in selection and application of technology.
4. Decreasing social resistance to adoption of new technologies.
5. Distributing the benefits from new technologies to gain acceptance.
Eg: Automation leads to cost reduction with lower labour share,
Reduces the incentives for outsourcing and offshore facilities,
Increase manufacturing jobs in USA.
6. Other issues worthy of consideration in developing firm specific methodologies to guide managers dealing with technology.
i) Potential obstacles to--- Inter Firm Corporation.
ii) Benefits of--- Inter Firm Corporation.
iii) Appropriate strategies and time points --- for transition from cooperation to completion.
iv) Impact of technology on quality of life health and safety.
Technology Planning:
1. Forecast the technology
2. Analyze and forecast the environment
3. Analyze and forecast the market/user
4. Analyze the organization
5. Develop the mission
6. Design organizational actions
7. Put the plan into operation
JFree Charts
-Adam
Graphs and Charts is the most efficient method for displaying information in a simple manner. Using this form of representation helps it's viewers to understand and interpret the information more easily and efficiently, which otherwise could be a very difficult and tedious process.
All forms of Graphs and Charts embodies some Visual content in the representation
JFreeChart is a free open source java chart library. It is used to generate the charts like Area and Line Charts, Pie charts, Time Series, Bar Charts, Bubble Charts, Gantt Charts, 3D. Developers get a better choice to add professional quality charts in swing and web based application by JFreeChart. JFreeChart provides many interactive features like tooltips etc. JFreeChart includes some of the following features as given below.
• JFreeChart have well documented API, which supports the wide range of charts.
• JFreeChart supports Swing components, vector graphics file format (like PDF, SVG and EPS) and image files (like JPEG and PNG).
• JFreeChart is easy to extend and it can be used for developing client side and server side applications.
• JFreeChart requires the JCommon class library.
• interactive zooming;
• events
• tooltips
Downloading and Installing JFreeChart
JFreeChart can be downloaded from http://www.object-refinery.com/jfreechart/index.html
There are two versions of the JFreeChart download:
Files Description
jfreechart-0.9.1.tar.gz JFreeChart for Linux/Unix.
jfreechart-0.9.1.zip JFreeChart for Windows.
Unzip the jar file; this will extract all the source, run-time and documentation files
Into a new directory called jfreechart-0.9.1.
JFreeChart is written entirely in Java, and should run on any implementation of the Java 2 platform (JDK1.3 or later recommended).
Setting Idea Work Space
Create a new Java project, include J2ee environment.
Click in File ---Settings--Project Settings--Libraries--Create New project Library---Attach Jar directory --include the Jfree Jars from the exploded jfreechart-0.9.1 directory.
Now you can create samples.
Sample Charts
Pie Charts
JFreeChart can create pie charts using any data that conforms to the PieDatasetInterface:
Bar Charts
A range of bar charts can be created with JFreeChart, using any data that conforms to the CategoryDataset interface.
The example is a horizontal bar chart
XY Plots
A third type of dataset, the XYSeriesCollectionDataset, is used to generate further chart types. The standard XY plot has numerical x and y axes. By default, lines are drawn between each data point:
JFreeChart supports time series charts with TimeSeries:
The Basic Structure of Jfree Chart
Chart and Dataset:
• In JFreeChart project, you have to create a Dataset for creating a chart. It contains the data, which displays in the chart. JFreeChart have many Dataset objects that are used to create different types of charts. After creating the Dataset object actual chart can be created.
The JFreeChart class coordinates the entire process of drawing charts. One method :public void draw (Graphics2D g2, Rectangle2D area);
...instructs the JFreeChart object to draw a chart onto a specific area on a graphics device.
In broad terms, JFreeChart achieves this by obtaining data from a Dataset, and delegating the drawing to a Plot object (which, in turn, delegates the drawing of individual data items to a CategoryItemRenderer or a XYItemRenderer, depending on the plot type).
We can set background images to chart with plot subclass objects.
CategoryPlot plot = (CategoryPlot) chart.getPlot ();
BufferedImage image = ImageIO.read (new File ("C:\\Documents and Settings\\shaikad\\Desktop\\Team Pics\\DSC09424.JPG"));
plot.setBackgroundImage(image);
The JFreeChart class can work with many different Dataset implementations, and even more Plot subclasses.
The following table summarizes the combinations that are currently available
Dataset Compatible Plot Types:
PieDataset PiePlot
CategoryDataset CategoryPlot subclasses with various renders
XYDataset XYPlot with various renderers.
IntervalXYDataset XYPlot with a VerticalXYBarRenderer.
HighLowDataset XYPlot with a HighLowRenderer.
CandleStickDataset XYPlot with a CandleStickRenderer.
There are a lot of combinations, but don’t worry, just keep in mind that a chart usually has one Dataset and one Plot
Creating Your First Chart
To illustrate, let’s create a pie chart. First, we need to create a dataset that Implements the PieDataset interface. The DefaultPieDataset class in the JCommon Class Library4 is designed just for this purpose:
DefaultPieDataset pieDataset = new DefaultPieDataset ();
pieDataset.setValue ("Adam", new Integer (40));
pieDataset.setValue ("Madhav", new Integer (30));
pieDataset.setValue ("Sekhar", new Integer (30));
Next, we need to create a chart. A convenient way to do this in JFreeChart is to use the ChartFactory class:
// create a chart...
JFreeChart chart = ChartFactory.createPieChart ("Work Distribution ", pieDataset, true);
Notice how we have passed a reference to the dataset to the factory method. The chart object retains this reference so that it can obtain data later on when it is drawing the chart.
Now we have a chart, but we don’t yet have anywhere to draw it. Let’s create a frame to display the chart in. The ChartFrame class contains the machinery required to display charts:
// create and display a frame...
JFreeChartFrame frame = new JFreeChartFrame ("Test", chart);
frame.pack();
frame.setVisible (true);
And that’s all there is to it...here is the complete program, so that you know which packages you need to import:
class PeiChartExample {
public static void main (String[] args) {
// create a dataset...
DefaultPieDataset pieDataset = new DefaultPieDataset ();
pieDataset.setValue ("Adam", new Integer(40));
pieDataset.setValue ("Madhav", new Integer(30));
pieDataset.setValue ("Sekhar", new Integer(30));
// create a chart...
JFreeChart chart = ChartFactory.createPieChart ("Work Distribution", data, true);
// create and display a frame...
ChartFrame frame = new ChartFrame ("Test", chart);
frame.pack ();
frame.setVisible (true);
}
}
Now Run this example, you will see the output.
Hopefully this has convinced you that it is not difficult to create and display charts with JFreeChart.
You can always Google more about Jfree.
Cewolf library to display the charts
Cewolf can be used inside a Servlet/JSP based web application to embed complex graphical charts of all kinds (e.g. line, pie, bar chart, plots, etc.) into a web page. Therefore it provides a full featured tag library to define all properties of the chart (colors, strokes, legend, etc.). Thus the JSP which embeds the chart is not polluted with any java code. Everything is described with XML conform tags.
Cewolf is based on JFreeChart and uses it's rendering engine to render the final chart image into the clients response stream. No files are created on server side. Everything is based on lightweight session objects and dynamic data analysis. Cewolf consists of one Servlet which handles the chart rendering and a tag library which translates the chart definition included in the JSP into an HTML Img tag which consults the rendering Servlet for retrieval of the appropriate chart.
Useful links:
http://www.jfree.org/jfreechart/
http://www.jfree.org/phpBB2/viewforum.php?f=3
http://cewolf.sourceforge.net/new/index.html
Graphs and Charts is the most efficient method for displaying information in a simple manner. Using this form of representation helps it's viewers to understand and interpret the information more easily and efficiently, which otherwise could be a very difficult and tedious process.
All forms of Graphs and Charts embodies some Visual content in the representation
JFreeChart is a free open source java chart library. It is used to generate the charts like Area and Line Charts, Pie charts, Time Series, Bar Charts, Bubble Charts, Gantt Charts, 3D. Developers get a better choice to add professional quality charts in swing and web based application by JFreeChart. JFreeChart provides many interactive features like tooltips etc. JFreeChart includes some of the following features as given below.
• JFreeChart have well documented API, which supports the wide range of charts.
• JFreeChart supports Swing components, vector graphics file format (like PDF, SVG and EPS) and image files (like JPEG and PNG).
• JFreeChart is easy to extend and it can be used for developing client side and server side applications.
• JFreeChart requires the JCommon class library.
• interactive zooming;
• events
• tooltips
Downloading and Installing JFreeChart
JFreeChart can be downloaded from http://www.object-refinery.com/jfreechart/index.html
There are two versions of the JFreeChart download:
Files Description
jfreechart-0.9.1.tar.gz JFreeChart for Linux/Unix.
jfreechart-0.9.1.zip JFreeChart for Windows.
Unzip the jar file; this will extract all the source, run-time and documentation files
Into a new directory called jfreechart-0.9.1.
JFreeChart is written entirely in Java, and should run on any implementation of the Java 2 platform (JDK1.3 or later recommended).
Setting Idea Work Space
Create a new Java project, include J2ee environment.
Click in File ---Settings--Project Settings--Libraries--Create New project Library---Attach Jar directory --include the Jfree Jars from the exploded jfreechart-0.9.1 directory.
Now you can create samples.
Sample Charts
Pie Charts
JFreeChart can create pie charts using any data that conforms to the PieDatasetInterface:
A range of bar charts can be created with JFreeChart, using any data that conforms to the CategoryDataset interface.
The example is a horizontal bar chart
XY Plots
A third type of dataset, the XYSeriesCollectionDataset, is used to generate further chart types. The standard XY plot has numerical x and y axes. By default, lines are drawn between each data point:
JFreeChart supports time series charts with TimeSeries:
The Basic Structure of Jfree Chart
Chart and Dataset:
• In JFreeChart project, you have to create a Dataset for creating a chart. It contains the data, which displays in the chart. JFreeChart have many Dataset objects that are used to create different types of charts. After creating the Dataset object actual chart can be created.
The JFreeChart class coordinates the entire process of drawing charts. One method :public void draw (Graphics2D g2, Rectangle2D area);
...instructs the JFreeChart object to draw a chart onto a specific area on a graphics device.
In broad terms, JFreeChart achieves this by obtaining data from a Dataset, and delegating the drawing to a Plot object (which, in turn, delegates the drawing of individual data items to a CategoryItemRenderer or a XYItemRenderer, depending on the plot type).
We can set background images to chart with plot subclass objects.
CategoryPlot plot = (CategoryPlot) chart.getPlot ();
BufferedImage image = ImageIO.read (new File ("C:\\Documents and Settings\\shaikad\\Desktop\\Team Pics\\DSC09424.JPG"));
plot.setBackgroundImage(image);
The JFreeChart class can work with many different Dataset implementations, and even more Plot subclasses.
The following table summarizes the combinations that are currently available
Dataset Compatible Plot Types:
PieDataset PiePlot
CategoryDataset CategoryPlot subclasses with various renders
XYDataset XYPlot with various renderers.
IntervalXYDataset XYPlot with a VerticalXYBarRenderer.
HighLowDataset XYPlot with a HighLowRenderer.
CandleStickDataset XYPlot with a CandleStickRenderer.
There are a lot of combinations, but don’t worry, just keep in mind that a chart usually has one Dataset and one Plot
Creating Your First Chart
To illustrate, let’s create a pie chart. First, we need to create a dataset that Implements the PieDataset interface. The DefaultPieDataset class in the JCommon Class Library4 is designed just for this purpose:
DefaultPieDataset pieDataset = new DefaultPieDataset ();
pieDataset.setValue ("Adam", new Integer (40));
pieDataset.setValue ("Madhav", new Integer (30));
pieDataset.setValue ("Sekhar", new Integer (30));
Next, we need to create a chart. A convenient way to do this in JFreeChart is to use the ChartFactory class:
// create a chart...
JFreeChart chart = ChartFactory.createPieChart ("Work Distribution ", pieDataset, true);
Notice how we have passed a reference to the dataset to the factory method. The chart object retains this reference so that it can obtain data later on when it is drawing the chart.
Now we have a chart, but we don’t yet have anywhere to draw it. Let’s create a frame to display the chart in. The ChartFrame class contains the machinery required to display charts:
// create and display a frame...
JFreeChartFrame frame = new JFreeChartFrame ("Test", chart);
frame.pack();
frame.setVisible (true);
And that’s all there is to it...here is the complete program, so that you know which packages you need to import:
class PeiChartExample {
public static void main (String[] args) {
// create a dataset...
DefaultPieDataset pieDataset = new DefaultPieDataset ();
pieDataset.setValue ("Adam", new Integer(40));
pieDataset.setValue ("Madhav", new Integer(30));
pieDataset.setValue ("Sekhar", new Integer(30));
// create a chart...
JFreeChart chart = ChartFactory.createPieChart ("Work Distribution", data, true);
// create and display a frame...
ChartFrame frame = new ChartFrame ("Test", chart);
frame.pack ();
frame.setVisible (true);
}
}
Now Run this example, you will see the output.
Hopefully this has convinced you that it is not difficult to create and display charts with JFreeChart.
You can always Google more about Jfree.
Cewolf library to display the charts
Cewolf can be used inside a Servlet/JSP based web application to embed complex graphical charts of all kinds (e.g. line, pie, bar chart, plots, etc.) into a web page. Therefore it provides a full featured tag library to define all properties of the chart (colors, strokes, legend, etc.). Thus the JSP which embeds the chart is not polluted with any java code. Everything is described with XML conform tags.
Cewolf is based on JFreeChart and uses it's rendering engine to render the final chart image into the clients response stream. No files are created on server side. Everything is based on lightweight session objects and dynamic data analysis. Cewolf consists of one Servlet which handles the chart rendering and a tag library which translates the chart definition included in the JSP into an HTML Img tag which consults the rendering Servlet for retrieval of the appropriate chart.
Useful links:
http://www.jfree.org/jfreechart/
http://www.jfree.org/phpBB2/viewforum.php?f=3
http://cewolf.sourceforge.net/new/index.html
