搜索内容：
时间：2020-02-14
编辑:网站制作公司
724
0
HTML5正在彻底改变网络。该Web应用程序具有可与大多数桌面应用程序相媲美的功能。HTML5的新功能使浏览器成为开发下一代应用程序的强大平台。
这种方法的优点是普通开发人员可以编写良好的模块化和可维护的代码。这样做的缺点是，浏览器中仍处于试验状态的每个新功能都需要在这些工具箱中实现。因此，在设计新功能的早期原型时未使用这些工具包。Google Elemental是一个GWT库。它使用JavaScript覆盖类型来生成高性能JavaScript。Java文件是从WebKit的IDL文件中重新生成的。芜湖高端网站设计:Elemental支持各种HTML5功能。它包括WebSocket，WebWorkers，WebAudio，WebRTC等。它还包括直接映射到JavaScript集合的集合类，以及在浏览器和服务器环境中均可使用的新JSON库。
GWT Elemental库非常快，但是目前我们可以找到供应商前缀。这些供应商前缀将消失，因为浏览器将删除供应商前缀。目前，这些API已将Webkit作为供应商前缀，因此尖端功能仅在Chrome中可用，并且将来我们会看到对其他现代浏览器的更好支持。
GWT Elemental是一个新库，该库上的文档绝对为零。在本文中，我们使用了一些HTML5功能，例如gwt-elemental库中的WebWorker，WebSockets和FileSystem API。芜湖高端网站设计:这里显示的示例非常简单，但是它们给出了创建大型应用程序的想法。Gwt-elemental提供elemental.Window类来创建不同类的对象。此Window对象不同于com.google.gwt.user.client.Window
要开始使用GWT Elemental库，请在GWT项目的类路径中添加gwt-elemental。当前，当我们创建GWT项目时，默认情况下，gwt-developer和gwt-client只是由GWT_HOME变量设置的库。在项目的项目模块文件（ProjectName.gwt.xml）中继承gwt-elemental。下图显示了eclipse的一些屏幕截图。
我们将在这里使用gwt-elemental库研究Web浏览器的某些功能。
Web Worker是可以在客户端运行的JavaScript线程。这用于执行繁重的计算任务，而不会阻塞UI线程。DOM是单线程的，因此此处不能同时运行多个脚本。如果脚本需要很长时间才能在UI线程中执行，那么它将被阻止，并且页面将无响应。网络工作者无法操纵DOM。使用Web Workers，可以在Web应用程序中生成后台脚本。
在主页中会创建一个新的工作程序对象，该工作程序的代码将写入一个单独的文件中。
//worker.js
var n = 1;
search: while (true) {
n += 1;
for (var i = 2; i <= Math.sqrt(n); i += 1)
if (n % i == 0)
continue search;
// found a prime!
postMessage(n);
}使用事件模型和postMessage()方法在工作人员和主页之间进行通信。此方法用于将数据发送到工作程序以及将数据传递回主线程。
示例：在下面的代码中，单击“开始”按钮后，将消息“ Hello worker”发送给该工作人员。单击stopButton终止工作程序。
privatestatic Window window = elemental.client.Browser.getWindow();
worker = window.newWorker("worker.js");
final Button startButton = new Button("Start");
startButton.addClickHandler(new ClickHandler() {
@Override
publicvoid onClick(ClickEvent event) {
worker.postMessage(“Hello worker”);
}
});
final Button stopButton = new Button("Stop Worker");
stopButton.addClickHandler(new ClickHandler() {
@Override
publicvoid onClick(ClickEvent event) {
worker.terminate();
}});事件处理程序onMessage和onError被定义，它将在主线程收到来自工作程序的任何错误或任何消息时执行。
worker.setOnerror(new EventListener() {
@Override
publicvoid handleEvent(elemental.events.Event evt) {
window.alert("Error message"+evt.toString());
}
});
worker.setOnmessage(new EventListener() {
@Override
publicvoid handleEvent(elemental.events.Event evt) {
if(evt instanceof MessageEvent){
MessageEvent event = (MessageEvent)evt;
Object obj= event.getData();
updateLabel.setText(obj.toString()+"Data");
}else{
updateLabel.setText("Message not came");
}
}
});长轮询和其他技术（客户端打开与服务器的HTTP连接，并且连接保持打开状态直到发送响应）非常有效；但它们会带来HTTP的开销。WebSocket协议使用HTTP升级系统将HTTP连接升级到WebSocket连接。
Web套接字允许我们在客户端和服务器之间建立连接，并且客户端和服务器都可以随时开始发送数据。Gwt-web-sockets为浏览器的本地Web Socket实现提供了一个简单的GWT包装器。
创建一个Web套接字，并设置OpenHandler，CloseHandler和MessageHandler来处理Web套接字事件。
WebSocket socket = window.newWebSocket(url); //url of server is provided
socket.setOnopen(new EventListener() {
@Override
publicvoid handleEvent(Event evt) {
// steps which are executed when socket connection is opened
}
});
socket.setOnclose(new EventListener() {
@Override
publicvoid handleEvent(Event evt) {
// steps which are executed when socket connection is closed
}
});
socket.setOnmessage(new EventListener() {
@Override
publicvoid handleEvent(Event evt) {
// steps which are executed when a message is received from the server
}
});使用socket.send(String data)将消息发送到服务器。
//服务器端代码以建立连接并处理客户端请求
public WebSocket doWebSocketConnect(HttpServletRequest request, String protocol)
{
returnnewServerSocket(this);
}import org.eclipse.jetty.websocket.WebSocket.Connection;
publicclass ServerSocket implements WebSocket.OnTextMessage {
private Connection _connection;
@Override
publicvoid onClose(int closeCode, String message) {
// steps to be executed when socket is closed
}
publicvoid sendMessage(String data) throws IOException {
//to send message to the client
_connection.sendMessage(data);
}
@Override
publicvoid onMessage(String data) {
// steps to be executed on receiving data from clients
}
publicboolean isOpen() {
// returns whether the connection is open or not
return_connection.isOpen();
}
@Override
publicvoid onOpen(Connection connection) {
_connection = connection;
// steps to be executed when the connection is opened
}Web应用程序已经变得更加复杂，它们需要许多台式机上可用的功能。例如，存储和检索文件就是这样的一个例子。可以在基于浏览器的IDE和其他类似应用程序中使用。我们可以使用IndexDB做类似的事情，但是应用程序逻辑对于存储和检索数据以模拟文件系统变得更加复杂。新的文件系统API解决了该问题。这些API可帮助您在用户本地文件系统的沙盒部分中创建文件，读取，写入，操作和导航文件。文件由FileEntry接口表示。由于同源策略相同，一个Web应用程序无法与其他Web应用程序的存储进行交互。同源策略限制了从一个来源加载的文档或脚本如何与另一个来源的资源进行交互。
对于文件系统API，有两种存储类型：
永久储存
临时存储
浏览器可自行决定删除临时存储中的数据，而除非得到用户或应用的明确授权，否则无法清除永久存储。我们必须获得用户的许可才能存储持久性数据。要请求存储，请使用window.webkitStorageInfo API。
Mozilla仅支持FileReader，而Chrome支持FileReader和FileWriter。
下面的代码片段描绘了gwt-elemental使用文件系统API的用法。使用window.webkitRequestFileSystem()，Web应用程序可以请求访问用户文件系统的沙盒部分。
Window window = Browser.getWindow(); window.webkitRequestFileSystem(type, size, successCallback, optionalerrorCallback)
在这里，type指定文件存储是持久存储还是not.Type可以是window.TEMPORARY或window.PERSISTENT。大小指定存储所需的字节数。successCallback和optionalerrorCallback是分别在请求成功或错误时执行的回调方法。
文件由FileEntry接口表示。FileSystem getFile()的DirectoryEntry接口方法用于创建文件。请求文件系统后，successCallback接收DOMFileSystem对象。FileSystem对象如下获得。
publicboolean onFileSystemCallback(DOMFileSystem inFileSystem) {
fileSystem = inFileSystem;}在成功回调中，我们可以getFile()使用要创建的文件名来调用method。
DirectoryEntry directoryEntry = fileSystem.getRoot();
JsonObject object = JsJsonObject.create();
object.put("create", true);
object.put("exclusive”, true);
directoryEntry.getFile(FileName, object, successCallBack,errorCallback)在这里，如果文件不存在，则使用create = true来创建文件，如果存在则抛出错误（exclusive = true）。如果create = false，则仅获取并返回文件。为了附加和删除文件，在中提供了create = false JsonObject.A。JsonObject是名称/值对的无序集合。Put()方法用于按名称添加或替换值。
上面的快照显示了使用给定文件内容创建demo.txt的过程。可以从Here下载名为HTML5 FileSystem Explorer的扩展。该扩展帮助开发人员浏览由FileSystem API创建的本地Web文件系统的内容。
FileReader API用于读取文件。在下面列出的代码中，将读取一个文件，并将内容显示在TextArea中。errorCallback用于处理错误。
FileEntry fileEntry = (FileEntry)entry;
FileCallback callback = new FileCallback() {
publicboolean onFileCallback(File file) {
final FileReader reader = window.newFileReader();
reader.setOnloadend(new EventListener() {
publicvoid handleEvent(Event evt) {
txtArea.setText(reader.getResult().toString());
}});
reader.readAsText(file);
returntrue;
}
};
fileEntry.file(callback, errorCallback);createWriter()调用FileEntry的方法以获得FileWriter对象。将创建一个Blob对象，并将其传递给FileWriter.write()方法。在这里，TextArea中的文本将传递给createBlob()方法，该方法将创建一个Blob对象。
FileWriterCallback callBack = new FileWriterCallback() {
publicboolean onFileWriterCallback(FileWriter fileWriter){
fileWriter.write(createBlob(writeTextArea.getValue()));
returntrue;}
};
fileEntry.createWriter(callBack, errorCallback);为了将数据追加到文件下面，编写了代码。然后将blob对象传递给write方法。Seek用于获取文件末尾的位置。
fileWriter.seek(fileWriter.length); // start position for writing is set at EOF 删除文件：
为了删除文件，编写了以下代码行。
fileEntry.remove(successCallback, errorCallback);
目录由DirectoryEntry接口表示。getDirectory()DirectoryEntry方法用于读取或创建目录。
DirectoryEntry directoryEntry = fileSystem.getRoot();
JsonObject object = JsJsonObject.create();
object.put("create", true);
directoryEntry.getDirectory(DirName, object, entryCallback
errorCallback);DirectoryEntry.remove()方法用于删除目录。如果我们要删除的目录不为空，它将抛出错误。
DirectoryEntry dirEntry = (DirectoryEntry) entry;
dirEntry.remove(new VoidCallback() {
publicvoid onVoidCallback() {
window.alert("Directory removed");
}
}, errorCallback);为了列出根目录中存在的所有文件和目录，将创建DirectoryReader并readEntries()调用方法。
window.webkitRequestFileSystem(Window.PERSISTENT, 1024 * 1024, new FileSystemCallback() {
publicboolean onFileSystemCallback(DOMFileSystem fileSystem) {
DirectoryEntry directoryEntry = fileSystem.getRoot();
directoryEntry.createReader().readEntries(new EntriesCallback() {
publicboolean onEntriesCallback(EntryArray entries) {
for (int i = 0; i < entries.getLength(); i++) {
Entry entry = entries.item(i);
listFiles.addItem(entry.getName());
}
returnfalse;
}
}, errorCallback);
returnfalse;
}
});这些是使用GWT Elemental执行的一些操作。
我们使用gwt-elemental API展示了HTML5使用的一些功能。尽管这是一个新的库，但它具有在企业中构建大规模应用程序的潜力。在下一篇文章中，我们将利用此库使用文件系统API来构建一些GIT（分布式版本控制系统）命令。
3
s后返回登录
3
s后返回登录
