Googlegears creates offline Web Applications

Source: Internet
Author: User

Googlegears is an open-source browser extension used to create Web applications that can be used offline.ProgramIs still in beta stage.

Its home address is in: http://code.google.com/apis/gears/
Online Forum: http://groups.google.com/group/google-gears/
Blog: http://gearsblog.blogspot.com/(as if not accessible now ...)

Googlegears consists of three modules:

1. Local Web Server (used to provide access requests for HTML, JavaScript, and images)
2. Database
3. workerpool
Use an Asynchronous Method to access resources in the background (such as synchronizing local user data to the server), so that browser programs can respond quickly.

First, install googlegears:
Http://code.google.com/apis/gears/install.html

So how can I check whether the googlegears is installed on the client's computer after the application is launched?
First, you must include this section of js in the page:
Http://code.google.com/apis/gears/tools/gears_init.js
Then, you can determine through the relevant objects and prompt the user to install.
ExampleCodeAs follows:

< Script SRC = "Gears_init.js" > </ Script >
< Script >
If ( ! Window. Google |   ! Google. gears ){
Location. href =   " Http://gears.google.com /? Action = install & message = <meil blog> "   +
" & Return = http://meil.livebaby.cn " ;
}
</ Script >

We can see the prompt that the user's installed address allows two custom information to be customized:

Message: the user prompt message, which cannot exceed 150 characters.
Return: The address returned after the installation is complete, which is our web application page.

Take a look at gears_init.js and you will find that for Windows, googlegears actually installs an ActiveX object on the client:

Factory =   New Activexobject ('gears. Factory ');

All functions of googlegears are called by manipulating this object.

Here are several examples.

1. Database demo
Http://code.google.com/apis/gears/samples/hello_world_database.html

This example allows you to enter some information and display the three most recently entered items. The user still exists at the next access.
The interface is as follows:

First, the following code is included in the HTML page for gears installation and testing. This is required for each page:

< Script Type = "Text/JavaScript" SRC = "Gears_init.js" > </ Script >

Perform initialization and open the database:

// Database connection object
VaR DB;
Init ();

// Open the local database on this page.
Function Init (){
If ( ! Window. Google |   ! Google. gears ){
Return ;
}
Try {
DB = Google. Gears. Factory. Create ('beta. database ',' 1.0 ');
} Catch (Ex ){
Seterror ('could not create database :' + Ex. Message );
}
If (Db ){
DB. Open ('database - Demo '); // Open Database
// Table creation syntax
Db.exe cute ('create table If Not exists demo' +
'(Phrase varchar ( 255 ), Timestamp Int )');

// 
}
// 
}

Obtain the latest three records and delete the implementation code of other old records:

VaR Recentphrases = ['','', ''];
Try {
  // In fact, the cursor of a record set is opened here, which is similar to the classic expression of ASP.
  VaR RS = Db.exe cute ('select * From demo order by timestamp DESC ');
  VaR Index =   0 ;
  While (Rs. isvalidrow ()){
If (Index <   3 ){
Recentphrases [Index] = Rs. Field ( 0 );
} Else {
// Here we can see that tempstamp (timestamp) is used as the primary key.
Db.exe cute (' Delete From demo where Timestamp =? ', [RS. Field ( 1 )]);
}
++ Index;
Rs. Next ();
}
Rs. Close ();
} Catch (E ){
  Throw   New Error (E. Message );
}

When you submit input data, use the following logic to insert data:

Function Handlesubmit (){
If ( ! Google. Gears. Factory |   ! DB ){
Return ;
}

VaRElm=Document. getelementbyid ('submitvalue ');
VaRPhrase=Elm. value;
//Note that the gettime () method returns the millisecond value of the date object equivalent to a benchmark time, which is a large integer.
VaRCurrtime= NewDate (). gettime ();

// Insert a new record
// the gears database can automatically escape/reverse the values inserted by the meaning.
// (the gears database automatically escapes/unescapes inserted values .)
db.exe cute ('insert into demo values ( ? , ? ) ', [phrase, currtime]);

//Update the UI.
Elm. Value='';
Displayrecentphrases ();
}

Close the browser and open the page again. The data is still there. You can copy the demo Page code of Google to a local device,
When HTML is enabled for offline execution, its functions are the same.

 

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.