Hi，How are you doing?
我是职场编码（CodeVoc）。
在E000中，我们介绍了Node.js、Ruby、Electron等工具下载安装。
这期，给你演示一下由Electron联合Ruby制作的小工具。
知乎视频www.zhihu.com借助Electron官方Demo，我们很容易制作一个工具展示平台。
点击“View Demo”会弹出我们的工具界面。
一、项目需求
这个工具的主要目的是为了把文字内容写入Excel表格。
它可以选择待写入的目标文件，选择文件后，文件路径会显示在单行输入框内。
点击“写入”按钮，会打开Excel文件，在A1单元格显示我们写入的文字内容。
二、界面设计
案例网页由head、body两部分组成，他们都写在html封闭标签内部。
<网页标题写在<title></title>标签中间。
html组件写在<body></body>标签中间。
css样式写在<style></style>标签中间。
javascript逻辑写在<script></script>标签中间。
由此可见，
<> </>用尖括号和反尖括号包裹的区域就是网页编程核心。
在网页世界里，标签也具有属性。
类、ID、类型等等，这些都是标签属性。
标签属性和标签间隔一个空格，呆在尖角<>里。
如，
标签类：<class="">
标签ID：<ID="">
标签类型：<type="">
标签名：<name="">
标签值：<value="">
标签提示信息：<placeholder="">
html：
html是网页的骨架结构，首先生成想要的组件。
根据案例E001，我们需要1个标签，1个单行输入框，1个文本框，2个按钮。
另外，还需要form表单标签、div标签进行空间排版设计。
标签：标签内容
单行输入框：<input>
文本框：<textarea></textarea>
普通按钮：<input type="button">
文件选择按钮：<input type="file">
布局标签：<form></form><div></div>
css：
我们想要对标签进行美化，首先需要选中标签。
大多数情况，我们可以通过标签选择器选中标签。
案例常用标签选择器有标签选择器、类选择器、ID选择器三种。
标签选择器：标签名 { } ，即标签名 + 花括号 { }。
ID选择器：# 标签ID名 , 标签ID名 { }，即井号 + 标签ID名 + 花括号 { }。
类选择器：. 标签类名 { }，即点号 + 标签类名 + 花括号 { }
在花括号内，我们就可以通过设置宽高，上下左右边距，颜色等属性值进行美化。
请在四点前白后绿气泡某杺平台，关注“职场编码”查看源码。
javascript：
javascript简称“js”，用于设计交互操作，如点击按钮弹出一个文件选择对话框等等。
在html阶段，我们通过<input id="input_line">生成单行输入框。
在js阶段，我们通过document.getElementById('input_line')选中它。
var 我们给它添加一个"change"事件，
自然语言表述为当“input_file”标签发生变化时，将“input_file”的标签值作为参数1直接赋值给“input_line”标签。
input_line接着，给ID为execute的标签添加一个单击事件，
当鼠标单击execute按钮时，获取<textarea>标签值作为参数2。
var 继续，利用下方指令调用本地Ruby脚本，完成写入操作。
const 三、逻辑梳理
=> 基础语法
引用Ruby标准库
require 创建双参数入口方法
Write_in_excel接收控制台传双参
Write_in_excel=> 对象模型
本案例Excel根模型下有三层对象
Application 创建可视化Excel应用
@eap打开工作簿
ebk执行txt写入cells(1,1)单元格操作
ebk欢迎关注四点前白后绿气泡某杺平台，关注“职场编码”查看源码。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
