设为首页   临沂热线欢迎您~!
临沂热线 > 科技 > 正文

《Electron实战》中文版:Electron实现UI界面!

《Electron实战》中文版内容节选,私聊得电子书样本。

《Electron实战》中文版:Electron实现UI界面

2.4. UI实现

我们首先修改一下index.html文件,为UI添加一些必要的标签。

代码清单2.12 为应用程序UI添加标签:./app/index.html

Bookmarker

我们有一个添加新链接的section,一个用于显示所有链接的section,以及一个用于清除所有链接的按钮。应用程序的

内容已经准备好了,现在将注意力转向功能。让我们清除app/renderer.js的所有内容,重新开始。在此过程中,我们需要处理添加的标记元素,因此让我们首先通过选择器查询到这些元素,将他们缓存到变量中。将以下代码添加到app/renderer.js文件。

代码清单2.13 缓存DOM元素选择器:./app/renderer.js

const linksSection = document.querySelector('.links');const errorMessage = document.querySelector('.error-message');const newLinkForm = document.querySelector('.new-link-form');const newLinkUrl = document.querySelector('.new-link-url');const newLinkSubmit = document.querySelector('.new-link-submit');const clearStorageButton= document.querySelector('.clear-storage');

如果你回顾一下代码清单2.12,你会注意到我们将标记中的input元素的type属性设置为了“url”。如果它的内容不是有效的URL,Chromium会将该元素标记为无效。我们可以给元素添加有效和无效状态的样式,甚至可以通过JavaScript来检测它的状态。不幸的是,我们无法访问Chrome或Firefox内置的错误消息弹出窗,这些弹出窗不属于Chromium Content Module,因此也不是Electron的一部分。此时,我们在默认情况下禁用提交按钮,然后用户每次输入URL时,再检查其内容是否是有效的URL。

只有当用户输入了有效的URL,我们才启用提交按钮,允许他们提交URL。向app/renderer.js文件添加以下代码。

代码清单2.14 添加一个事件监听来启用提交按钮:./app/renderer.js

newLinkUrl.addEventListener('keyup', () => {    newLinkSubmit.disabled = !newLinkUrl.validity.valid;});

趁现在还可以添加一个小辅助函数,用来清除URL输入框内容。正常情况下,只要成功存储了链接,就该调用它。

代码清单2.15 添加一个帮助函数来清理输入框:./app/renderer.js

const clearForm= () => {    newLinkUrl.value = null;};

当用户提交链接时,我们希望浏览器能向该URL发送一个请求,获取响应内容后,进行解析,查找title元素并获取标题文本,然后将书签的标题和URL存储到localStorage,最后更新书签页面。


《Electron实战》中文版!

推荐阅读:南昌网视