Find some poor information about dojo. Thank you!

Source: Internet
Author: User

Introduction:
Here we will give you an initial course on dojo. You may say to yourself, "skip this section because I already know javascript and know website development very well. "But here is an opportunity for you to realize that your knowledge is not so solid, and there are still many basic things to learn.

When we introduced dojo to people, we encountered two problems. Some users have been using DHTML for a long time and have a deep understanding of javascript. They know what javascript can do, what it cannot do, and there are stereotypes in their minds. Sometimes, it is more difficult for these people to understand dojo. The second challenge is for beginners who are too inexperienced and have a good understanding of javascript.

I encourage both of them to read the introduction, and you may not even read it completely.

What is Dojo?

In fact, it is very difficult to summarize what Dojo is. I said it is very difficult to sum up Dojo because Dojo is an extensible code set (expandable collection of code ). Expansion is not only from many developers, but also you will find that you can expand your own set of things according to your own needs. That is to say, the reason why you focus on Dojo is that Dojo can complement javascript.

The client-side development consists of three main parts: events, repeated use of DHTML blocks, and information transmission by the client and server. Dojo is very good at these three aspects and makes them easy to change.

History

Note: I really don't want to translate history. If anyone is interested, I can leave a message and I will translate it later.

............

What is Toolkit )?

Many people think that the structure (framework), library (library), and tool share the same meaning. However, figuring out the differences between them will be helpful for future understanding.

Framework

In software development, a framework is usually defined to allow other projects to share and cooperate ). A structure usually contains support programs, libraries, and a script program. You may realize that Dojo is a part of the framework, but it is not the framework itself.

Library

Library files define a lot of methods (functions) that can be referenced. They can be run anywhere and are not the methods we usually define in programs. After reading this, you may say, "Hey! Dojo is the collection of libraries !". You should be right, but dojo is much more contained than a collection of libraries.

Toolkit

After reading the previous article, you may still be wondering what dojo is. Obviously, it is not a framework. Is it a tool or a library? Finally, let me explain. Generally, the libraries are defined previously. You can reference them in your program and use them, but in dojo, we added a package system to the database. In this way, it is different from the general library.

In this system, we divide the database into many parts. There are core functions and many other sub-libraries that are not commonly used ). This makes it simple when you use dojo. The following is a more detailed analysis that will help you better understand dojo.

What does Dojo give you?

At one time, most people were using Netscape, So Netscape gave a website creation standard. After a long time, Microsoft's Internet Explorer emerged. At that time, Internet Explorer was better than Netscape and became a new standard. However, this standard is different from W3C, so when people make websites, they begin to move closer to the new IE standard.

After many years, IE is still undefeated and has not been updated much. There are as many bugs as possible, and there is a lack of standardization. Net worms gradually started to use firefox, opera, and safari. They were updated very quickly to keep up with W3C standards.

Many of the same functions, but different browsers need to write different code. What does this mean for us? This means that it is very difficult for us to make a perfect website. What will a programmer do?

Knowledge supplement

If you use static html to create a website, of course, the above problems will not occur, but this also means that the website cannot be interactive, the most is to provide a form for users to submit, then, a new page is displayed.

Javascript is designed to solve these problems.

Resolve all problems

Dojo not only exists in the abstract layer, but also exists independently. It not only provides some libraries, methods, and functions, but also makes the code more concise and ensures that your code only contains the necessary parts.

Dojo makes your life easier, because it links a lot of things for you and divides your complex projects into small problems, making your code simpler and more efficient, and it can be used repeatedly better.

Chapter 1: Start Using Dojo

Dojo has many versions, so you don't know which one to choose. Here, you can rest assured that no matter what version you are using, you can run the examples in this book.

Download Dojo

(Translator's note: This is my version and zip file. You can also download it on the Dojoa homepage .)

Dojo module (Modules)

The library definition of Dojo uses modules, Just Like JAVA. In this way, you can only reference what you need, not all, to ensure the browsing speed.

For example, the event package of Dojo is defined in the module dojo. event.

(Translator's note: This part of the original is very cool. I have simplified it. If you are interested, refer to the original article .)

Format of the reference module:

Dojo. require ("dojo. module [. sub module]");

For example, we want to reference lite effects systems,

Dojo. require ("dojo. lfx ");

This will introduce all sub-modules in lfx. Of course you can also use dojo. lfx. *. If you want to independently reference the toggle module in lfx:

Dojo. require ("dojo. lfx. toggle ");

Widgets

What is a widget? A button and an image are all Widgets. The most common html widgets include links, buttons, and input boxes.

You can use Dojo to change Widgets. For example, you can add a color calendar next to the date input box so that you can select a date. At the same time, Dojo does not destroy your original input box, because Dojo extends your html instead of replacing it.

The main advantages of using widgets are as follows:
Cross-platform: With Dojo widgets, no matter which browser is used, the results will be accurate.
Automatic degradation: Some Old browsers may not support javascript perfectly. Dojo can also display the correct content, for example, the preceding example of a color calendar. If the browser does not support it, dojo will automatically degrade the calendar to a simple selection box or something else (depending on different widgets ).
Scalability: You can use the widgets provided by Dojo to create new widgets. In this process, you do not need to copy any code from the library or modify the code in the library.

How to Use Widgets

Widgets have many usage methods. The Widget searches for the entire web framework and automatically adds the content to it.

The following is a simple example. We can also see how widgets are automatically degraded, because we didn't define a choice for ComboBox, but just a value, in addition, the result is displayed as a simple inputbox. if javascript is disabled, the result is displayed as well.

<Input dojoType = "ComboBox" value = "default" dataUrl = "comboBoxData. js">

But if we only want to use W3C standards (Note: there are no additional tags, such as dojoType), we can use the following method.

<Input class = "dojo-ComboBox? "Value =" default "dataUrl =" comboBoxData. js ">

<Dojo: ComboBox? Value = "default" dataUrl = "comboBoxData. js">

You may notice that dataUrl is used to add the content in comboBoxData. js to comboBox, but no content is used in comboBoxData. js. (Note: Of course, you can change the dataUrl content at will. The name is not fixed .)

The following is an example of a select statement:

<Select dojoType = "combobox">
<Option value = "foo"> foo </option>
<Option value = "bar"> bar </option>
<Option value = "baz"> baz </option>
<Option value = "thud"> thud </option>
</Select>

In the above example, you know a lot of things, but it seems useless. Here I just want to tell you that dojo is not that complicated.

Backward and forward

Dynamic web applications (dynamic web applications) Avoid frequent page refresh, but usually bring back and forward button will lose function. More, sometimes it is difficult for users to add webpages to favorites.

Dojo provides a solution to allow web programs to process the browser backward and forward, and provide the browser with a unique address. The solution is to use dojo. undo. browser.

Use dojo. undo. browser

In dojo 0.2.2, no dojo. undo. browser exists. This is added in Versions later than 0.3.

First, you need to use dojo. undo. browser. setInitialStae (state) to set the state of the web page when the browser loads the web page for the first time.

Theory

The dynamic web page program calls XMLHTTPRequest and DOM to update the content of the Web page. This avoids refreshing, updating the browsing history, and does not change the address bar of the browser. This means that when the user clicks the back button, the entire web page program loses the current running state ). Even if you want to add the current webpage content to your favorites, It is impossible because favorites does not record the status of Webpage Programs, instead, it simply records the URL of the webpage program ).

Developers can use the dojo. undo. browser package to get the events that the user clicks back and advances, and then update the page content based on these events. Dojo. undo. browser transmits browsing history by using a hidden form (hidden IFRAME) or a unique tag (fragment identifier. (Note: It can be imagined as a cookie or session, but the session information is stored in the hidden IFRAME or tag.) For example:

Http://some.domain.com/my/path/to/page.html#fragmentIdentifier

(Note: # fragmentIdentifier indicates the tag record)

Because changing tags does not refresh the web page, it is very suitable to record the status of the current web page program. Of course, developers can customize a tag that is easier to understand and allow users to add it to favorites.

Dojo. undo. browser allows developers to create a state object relative to the running state. This object will get callback when the user clicks back or forward.

Development

The following are some things that must be done before using dojo. undo. browser:

1: Set preventBackButtonFix: false in djConfig. This ensures that the hidden form (hidden IFRAME) will be added to the page. If this section is not added, dojo. undo. browser will not work normally.

Note: The setting method is to add the following code to the header:

<Script language = "JavaScript" type = "text/javascript">
DjConfig = {isDebug: true, preventBackButtonFix: false };
</Script>

2: Add dojo. require ("dojo. undo. browser ");

Set the initial status of the Web application:

Dojo. undo. browser. setInitialState (state );

Each time a user clicks forward or backward, the state object is called.

Then we need to create several functions for the state object)
The following message is displayed: back (), backButtion (), or handle (type). The type can be "back" or "forward ".
Get the forward prompt: forward (), forwardButton () or handle (type), type as above.

The following is a simple example:

Var state = {
Back: function () {alert ("Back was clicked! ");},
Forward: function () {alert ("Forward was clicked! ");}
};

Register a state object using the following method:

Dojo. undo. browser. addToHistory (state );

If the address (URL) of the browser is changed, the changeUrl attribute of the state object is referenced. If changeUrl is true, dojo. undo. browser generates a unique tag. If changeUrl is defined as any other value (excluding undefined, null, 0, and null string ), this value will be used as a tag. In this way, the user can add the current page to the favorites folder.

Prompt
If you want to use changeUrl, even if you do not set your own tag, it is defined as true at least.
If you want to test on the local machine, do not use IE. The reason is that the historical parameter ifram_history.html is not created when the ie workflow file is created. Upload the webpage to the server for testing.
Safari2.0.3 +: only the back button can work normally, and only when changeUrl is useless.
Opera 8.5.3: it does not run normally.

Here is an online example:

Http://archive.dojotoolkit.org/nightly/tests/undo/test_browser.html

Release Dojo

Note: The English version of this Part has not been completed yet, so it will not be translated yet.

Updated on April 9, June 27:

I/O

Introduction to dojo. io. blind

The purpose of dojo creation is to allow both users and developers to enjoy the DHTML program. With the support of many friends, especially Aaron Boodman and Mark Anderson, we have found a solution to availability. We provide a separate easy-to-use API and a packaging class, which only requires two files. The dojo. io package provides support for XMLHTTP and some other more complex transmission structures.

In the dojo. io package, the most common method is the dojo. io. bind () method. Dojo. io. blind () is a standard asynchronous request API that contains various transport layers, including queues of iFrames, XMLHTTP, mod_pubsub, and LivePage. Dojo tries to select the most suitable transmission method for the current request, because it generally does not use other transmission methods during website creation, so we only use XMLHTTP. Dojo accepts an anonymous class, but uses this class as a function parameter (function argument) When you know its attributes ). The following code creates a request, which returns the original string from the URL.
Dojo. io. bind ({
Url: "http://foo.bar.com/sampleData.txt ",
Load: function (type, data, evt) {/* do something w/the data */},
Mimetype: "text/plain"
});

This is all. You provide a data address and a function to be executed when you get the returned value. But what if an error occurs during the request? Let's create a register to solve the problem:

Dojo. io. bind ({
Url: "http://foo.bar.com/sampleData.txt ",
Load: function (type, data, evt) {/* do something w/the data */},
Error: function (type, error) {/* do something w/the error */},
Mimetype: "text/plain"
});

You can also create a separate handler to solve the problem:
Dojo. io. bind ({
Url: "http://foo.bar.com/sampleData.txt ",
Handle: function (type, data, evt ){
If (type = "load "){
// Do something with the data object
} Else if (type = "error "){
// Here, "data" is our error object
// Respond to the error here
} Else {
// Other types of events might get passed, handle them here
}
},
Mimetype: "text/plain"
});

The following code submits a javascript program segment and then enables the server to run it. Generally, we do this to accelerate the program running. Pay attention to mimetype:
Dojo. io. bind ({
Url: "http://foo.bar.com/sampleData.js ",
Load: function (type, evaldObj) {/* do something */},
Mimetype: "text/javascript"
});

If you want to ensure that the program uses XMLHTTP, you can write as follows:
Dojo. io. bind ({
Url: "http://foo.bar.com/sampleData.js ",
Load: function (type, evaldObj) {/* do something */},
Mimetype: "text/plain", // get plain text, don't eval ()
Transport: "XMLHTTPTransport"
});
Being a jack-of-all-trades, bind () also supports the submission of forms via a request (with the single caveat that it won't do file upload over XMLHTTP ):
As a jack-of-all-trades (Mastercard), bind () also supports data submitted from forms.
Dojo. io. bind ({
Url: "http://foo.bar.com/processForm.cgi ",
Load: function (type, evaldObj) {/* do something */},
FormNode: document. getElementById ("formToSubmit ")
});
The above are just some of the most basic ones. In fact, they do not need to be all customized by developers.

RPC
As you can see, Dojo provides a simple and powerful way to use a variety of I/O functions through dojo. io. bind. But in the development process, the programmer will call a lot of I/O, which at the same time will increase the burden on the server and client. The RPC service of Dojo is generated to reduce the burden, ease of use, and streamline the code.

The full name of RPC is Remote Procedre CILS or Remote Method Invocation ). Basically, RPC allows developers to call methods on remote servers ). Dojo not only provides the basic RPC client package, but also extends it to support the JSON-RPC and YAHOO services. At the same time, you can also write the class relative to other services by yourself.

Assume that there is a small program that needs to call the server-side program. Assume that you want to call add (x, y) and subtract (x, y ). Under no special circumstances, our client will write as follows:
Add = function (x, y ){

Request = {x: x, y: y };

Dojo. io. bind ({
Url: "add. php ",
Load: onAddResults,
Mimetype: "text/plain ",
Content: request
});
}

Subtract = function (x, y ){

Request = {x: x, y: y };

Dojo. io. bind ({
Url: "subract ",
Load: onSubtractResults,
Mimetype: "text/plain"
Content: request
});
}

You see, this is not very difficult. However, whether we let the Server Run add and subtract or let the client calculate it on its own, this is just a very simple program. What if we want to call 30 different methods on the server? I guess we may have to repeatedly write almost the same code over and over again. Every time we create a request object, set the URL, set the variable, and so on. This is not only error-prone, but also boring.
The RPC client of Dojo simplifies this process:
{
"ServiceType": "JSON-RPC ",
"ServiceURL": "rpcProcessor. php ",
"Methods ":[
{
"Name": "add ",
"Parameters ":[
{"Name": "x "},
{"Name": "y "}
]
},
{
"Name": "subtract ",
"Parameters ":[
{"Name": "x "},
{"Name": "y "}
]
}

]
}

The above is the definition of the server. Once the definition is created, other things are simple. We can also create a class:
Var myObject = new dojo. rpc. JsonService? (Defintion );
Method to use the server:
MyObject. add (3, 5 );

I bet you will think, "I don't just call the method, but I still have the computing results ." You are right, but it is also very easy. The myObject. add () on the server returns a deferred object ). Twisted Python users may be familiar with the deferred object. The deferred object allows developers to append one or more callbacks based on the type of the returned data) and error handling (errbacks ). Here is a simple example:
Var myDeferred = myObject. add (3, 5 );
MyDeferred. addCallback (myCallbackMethod );

We add mycallbackmethod as callback to our latency class mydeferred. In this case, 8 will be passed to mycallbackmethod. On the other side, we can also add an errback method to handle the error message returned by the server. We can add callback methods at will. They can be called in the defined order.

The preceding examples are based on dojo. rpc. JsonService. We can also use dojo. rpc. YahooService, with the same specifications and structure. Both classes inherit dojo. rpc. RpcService. To create your own class, you will be detailed in chapter 2.

Reprinted from http://www.blogjava.net/burnet

Original address http://www.blogjava.net/burnet/articles/54186.html

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.