65.9K
CodeProject 正在变化。 阅读更多。
Home

PharoJS 入门

Richard Eng
starIconstarIconstarIconstarIconstarIcon

5.00/5 (3投票s)

2018年5月12日

CPOL

6分钟阅读

viewsIcon

8768

开发前端 Web 应用程序的更简单、更快捷的方式

在我之前的文章《Teapot: Web Programming Made Easy》中，我向您展示了如何使用 Pharo 创建动态网站。现在，让我们在前端使用 Pharo...

PharoJS 是进行前端 Web 开发的好方法。它提供了两个巨大的好处

  1. 您可以避免使用 JavaScript，这是世界上最令人厌恶的编程语言之一，而且是当之无愧的。
  2. 您可以使用 Pharo，现代 Smalltalk。

使用 PharoJS，您开发前端应用程序所需的时间可以缩短一半，甚至三分之一，而使用 JavaScript 和 Angular、React、Ember、Meteor、Vue 或任何当季流行的 JS Web 框架则需要更长的时间。

本教程将帮助您快速轻松地入门。它假设您已掌握 Smalltalk 的基础知识。如果您没有，我建议学习这个 Smalltalk 教程。

为了增加趣味性，我们还将使用 Apache Cordova 创建一个跨平台移动应用程序。我们将通过改编我们的 Web 应用程序来实现这一点。

安装 PharoJS

首先，使用这个Pharo 快速入门指南安装 Pharo。

然后，在 Playground 中执行以下命令

<code>Gofer it
 smalltalkhubUser: 'noury' project: 'PharoJS';
 configurationOf: #PharoJS ;
 loadStable.</code>

保存图像。现在，PharoJS 已安装。我们可以继续进行 Web 应用程序的开发。

一个 Web 计数器应用程序

我们将创建一个 Web 应用程序，其唯一目的是让您计算某个实例的数量。是的，这是一个非常无聊的应用程序，但它将说明用户与程序之间的交互性。

首先，我们先把 UI 部分搞定。为我们的程序创建一个工作目录。称之为 PharoJS-Cordova-Tutorial。我们将把以下文件放入此文件夹。

我们需要 HTML 和 CSS。作为我们这些杰出的 Web 设计师，这里是 HTML 和 CSS 文件

<!-- index.html -->
<!DOCTYPE html>
<meta charset="utf-8" />
<head>
<title>PharoJS Counter</title>

<!--meta http-equiv="Content-Security-Policy" 
    content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; 
    style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, 
 minimum-scale=1, width=device-width"-->

<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div class="container">
    <img src="img/pharoJsLogo.png" width="250">
    <div id="countDisplay" class="countText">0</div>
    <button id="resetButton" class="resetButton">Reset</button>
    <button id="incrementButton" class="incrementButton">Increment</button>
    <form id="form1">
        First name:<br>
        <input id="field1" type="text" name="firstname"><br>
        Last name:<br>
        <input id="field2" type="text" name="lastname"><br>
        <button id="hello" class="hello" type="submit">OK</button>
    </form>
</div>

<!--script type="text/javascript" src="cordova.js"></script-->

<script language="javascript" type="text/javascript" src="js/index.js"></script>
</body>
</html>

加粗的部分显示了注释掉的 HTML，将来为 Cordova 所需。斜体部分是我添加的，仅用于说明如何处理输入文本字段。

/* index.css */
.container{
    text-align: center;
}

.countText{
    font-size: 6em;
    font-weight: bold;
}

.resetButton, .incrementButton{
    font-size: 2em;
    width: 200px;
    border: none;
    height: 50px;
    border-radius: 10px; 
}

.resetButton{
    color: white;
    background-color: #FF3333;
}

.incrementButton{
    color: white;
    background-color: #3399FF;
}

.hello{
    color: white;
    background-color: #3300FF;
}

CSS 文件位于 css 子目录中。正如 HTML 所指示的，我们需要一个名为 pharoJsLogo.png 的图像文件，放在 img 子目录中。

我们需要为我们的 counter 对象创建一个类

Object subclass: #PjxCounter
   instanceVariableNames: 'count'
   classVariableNames: ''
   package: 'MyPharoJsProject'

这个对象只做一件事：跟踪计数。以下是它的方法

increment
   self count: self count + 1

initialize
   super initialize.
   self reset

reset
    self count: 0

请确保也为 count 创建访问器方法。

我们需要为我们的 counter 对象的控制器创建一个类

Object subclass: #PjxCounterController
   instanceVariableNames: 'counter countDisplay'
   classVariableNames: ''
   package: 'MyPharoJsProject'

这个对象负责使浏览器屏幕保持更新。以下是它的方法

increment
   self counter increment.
   self updateDisplay

reset
   self counter reset.
   self updateDisplay

updateDisplay
   self countDisplay innerHTML: self counter count

请确保也为 counter 和 countDisplay 创建访问器方法。

最后，我们需要为实际的 Web 浏览器程序创建一个类

PjFileBasedBrowserApp subclass: #PjxCounterCordovaApp
   instanceVariableNames: 'counter controller'
   classVariableNames: ''
   package: 'MyPharoJsProject'

我们需要 **类** 方法来进一步定义程序

appClasses
   <pharoJsSkip>
   ^super appClasses, {PjxCounter. PjxCounterController}

appJsSubFolder
   ^'js'

#appJsSubFolder 方法指示将生成的 JavaScript 文件放在哪里（它位于 js 子目录中）。#appClasses 方法指示此应用程序还需要哪些其他类。<pharoJsSkip> 指令告诉系统不要将此方法翻译成 JavaScript；您可能永远不必担心它。

程序对象处理 DOM。注意 #addEventListener: 方法，它允许我们在某些内容被点击时执行相应的代码。现在是实例方法

countDisplay
   ^ self domElementAt: 'countDisplay'

firstNameField
   ^ self domElementAt: 'field1'

helloForm
   ^ self domElementAt: 'form1'

incrementButton
   ^ self domElementAt: 'incrementButton'

initialize
   super initialize.
   counter := PjxCounter new.
   controller := PjxCounterController new.
   controller counter: counter.
   controller countDisplay: self countDisplay.
   self resetButton addEventListener: #click block: [ controller reset ].
   self incrementButton addEventListener: #click block: [ controller increment ].
   self helloForm addEventListener: #submit block: [ :e | self showHello. e preventDefault ]

resetButton
   ^ self domElementAt: 'resetButton'

showHello
   window alert: 'Hello, ',self firstNameField value

(**提示**：#preventDefault 方法会短路正常的表单提交行为，这样表单就不会发送到服务器。在前端应用程序中，可能没有服务器可以发送数据。)

关于 HTML DOM 方法的说明：像 #addEventListener: 和 #value 这样的方法/属性是 JavaScript 中 DOM 的方法/属性。它们会直接翻译成 Pharo 中的等效方法。请访问 这里、这里 和 这里 获取更多此类方法的示例。

所以这是我们的目录结构

PharoJS-Cordova-Tutorial (containing index.html)
        |
        ---- css (containing index.css)
        |
        ---- img (containing pharoJsLogo.png)
        |
        ---- js (containing index.js)

在 Playground 中执行此操作来测试程序

PjxCounterCordovaApp playground

第一次运行程序时，系统会提示您输入应用程序文件的位置。导航到之前创建的 PharoJS-Cordova-Tutorial 文件夹。

您也可以稍后使用 #setUpAppFolder 方法更改应用程序文件的位置。您还可以使用 #exportApp 方法生成 JavaScript 输出。

(**提示**：您可以通过“**文件输出**”来备份项目源代码。只需在 System Browser 中右键单击包，然后选择“**文件输出**”。它会在您的 Pharo 目录中创建一个扩展名为 .st 的文件。)

这就是我们第一个具有用户交互功能的 PharoJS Web 应用程序。

PharoJS 用于移动端

现在，让我们尝试编写一个移动应用程序（适用于 Android 或 iOS），方法是改编我们的 Web 应用程序。有几个初步步骤...

安装 Node.js

访问 https://node.org.cn/en/ 并选择 LTS（长期支持）安装或 Current 安装。这将为我们提供 npm 包管理器。

安装 Apache Cordova

转到命令行或终端并输入

npm install -g cordova

对于 Android 开发，您需要遵循此平台指南（**勘误**：您还需要创建 ANDROID_SDK_ROOT 环境变量，其值与 ANDROID_HOME 相同）。对于 iOS 开发，您需要遵循此平台指南。

我们将这样组织程序目录

我们在主程序目录中创建一个 Cordova 子目录。我们还为 Android 和 iOS 添加了平台支持

cordova create cordova
cd cordova
cordova platform add android ios

我们将 index.html、css 和 img 文件夹复制到 cordova/www 目录中。

为了使我们的 Web 应用程序适应 Cordova，我们需要修改**Web 应用程序**（而不是 Cordova 应用程序）的 HTML 文件中的脚本标签，使其指向 ‘cordova/www/js/index.js’，并修改 #PjxCounterCordovaApp 类方法 #AppJsSubFolder，使其指向 ‘cordova/www/js’ 文件夹。这样，当您构建 PharoJS 应用程序时，Web 应用程序和 Cordova 应用程序将**共享相同的 JS 输出**。

还记得我们 HTML 文件中的加粗部分吗？为了 Cordova 应用程序，需要取消注释它们。

现在我们必须先生成 Cordova 的 JavaScript 代码。在 Playground 中，执行

PjxCounterCordovaApp exportApp

我们可以这样构建和运行 Cordova 应用程序

cordova run android
# or
cordova run ios

（Android 和 iOS 的智能手机模拟器启动速度都很慢。我发现 iOS 模拟器尤其**慢得离谱**，所以我更喜欢使用 Android。）

您应该会看到类似这样的内容

(**提示**：Google 工程师凭借他们无限的智慧，**默认**禁用了 Android 模拟器的物理键盘！您需要进入 AVD 配置来启用它。真是一群笨蛋。)

结论

PharoJS 对于编写 Web 浏览器应用程序来说非常易于使用。它非常像编写桌面应用程序，而且没有 JavaScript 中那些令人头疼的麻烦。Angular 和 React 是一大堆疯狂的东西，最好避开。

您应该熟悉 PharoJsApp 包中的类。特别是 #PjDOMApplication 类，它有一套处理 DOM 的有用方法。

我希望您在下一个前端、基于浏览器的应用程序中尝试使用 PharoJS。没有必要忍受 JavaScript 或 Angular 或 React。给自己放个假吧。

© . All rights reserved.