# Note.FO

**Repository Path**: 41zone/Note.FO

## Basic Information

- **Project Name**: Note.FO
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2014-09-28
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## Note.FO开发实录

> 这边文章便是用Note.FO生成的哦，Note.FO的开发已经有了最初的定型，技术选型也已经完成，采用了Java 8 + JavaFX 2 + Freemarker + PegDownProcessor + ControlsFX + SQLite + Spring 4 + Maven 3

## 第六天

> 版本：1.0.4.DEV
> 这次主要是解决一些比较麻烦的问题，并没有最新的功能添加

### 关于编辑器与页面同步的问题

1. 重新实现了编辑器与页面同步代码，虽然 **JavaFX** 没有释放接口，但通过一些办法还是可以拿到想要的数据
2. 对于 **WebView** 而言，需要通过调用 **Javascript** 接口执行获得页面实际高度
3. 对于 **TextArea** 而言，其结构比较复杂，通过遍历子节点的同时还要判断子节点的类型，确定后才能拿出 **ScrollPane**，而 **ScrollPane** ，也需要拿出 **Content** 之后才能精确拿到高度，以便计算同步高度
4. 这次解决了这个问题， **相信会带来比较好的同步视图体验**

#### WebView的实际页面高度

```Java
private WebView web;

/**
 * 对于Web类型的高度而言，主要考虑加载成功时的计算
 */
public void updateScrollHeight() {
	Object result = null;
	try {
		result = engine.executeScript("(function(){return Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);})();");
	}catch(JSException e){
	}
	
	if (result == null) {
		scrollHeight = web.getHeight();
		return ;
	}
	scrollHeight = Double.parseDouble(result.toString());
}
```

#### TextArea的实际内容高度

```Java
private TextArea input;

/**
 * 更新可视高度
 */
public void updateScrollHeight() {
	double height = -1;
	ObservableList<Node> list = input.getChildrenUnmodifiable();
	if(list.isEmpty()) height = input.getHeight();
	for(Node node : list){
		if(node instanceof ScrollPane) {
			ScrollPane pane = (ScrollPane) node;
			Region content = (Region) pane.getContent();
			height = content.getHeight();
			break;
		}
	}
	this.scrollHeight = height < 0 ? input.getHeight() : height;
}
```

### 关于`CTRL+D`删除行的光标问题

1. 之前使用 `CTRL+D` 时，光标向上移了一位，导致体验变差
2. 这次效果与 **Eclipse** 的 `CTRL+D` 的功能相同体验

### 添加了`CTRL+P`预览命令

1. 添加预览，并不执行保存

## 第五天，10月6号

> 此次升级了一个版本子号，且为开发版( **1.0.3 DEV** )，仅作内部测试，暂时不开放到外部，计划在 **1.0.20** 版本发布

### 下载地址
* 百度云盘：[http://pan.baidu.com/s/1kTJucyN](http://pan.baidu.com/s/1kTJucyN)
* 提取密码： **quri**

### 升级内容

1. 为 **编辑器** 和 **预览界面** 添加同步滚动定位
2. 为编辑器添加了 `CTRL+D` 功能，表示删除当前一行，与`Eclipse`编辑器功能相同，但缺失了 `UNDO` 功能
3. 默认快捷键 `CTRL + S` 与 `CTRL + N` 功能键
4. 添加了 `CTRL+M` 快捷键
5. 添加了 `关于` 功能块
6. 修复了部分BUG
7. 为整体架构添加部分的公共服务，并移植到[Support.FO](http://github.com/41zone/Support.FO)项目中

### 如何升级软件

1. 将压缩包直接进行压缩覆盖即可，此次安装包中不包括 `db` 目录文件夹，因此不会覆盖你本地的数据库内容
2. `WINDOW`下直接双击`Note.FO.jar`即可，`Linux`系统需要执行`startup.sh`命令

### 第一次安装该怎么做呢？

#### 如果你不是Java开发人员

1. 下载Java 8 运行环境进行安装，我分享的百度云盘地址：[http://yun.baidu.com/s/1sj6W56d](http://yun.baidu.com/s/1sj6W56d)，选择版本下载
2. 下载完成，进行安装
3. 解压缩 `Note.FO.zip` 到你的应用程序目录后，双击 `Note.FO.jar` 执行即可

#### 如果你是Java开发人员

1. 需要考虑自己的开发系统下载Java 8，下载地址：[http://www.oracle.com/technetwork/java/javase/downloads/jre8-downloads-2133155.html](http://www.oracle.com/technetwork/java/javase/downloads/jre8-downloads-2133155.html)
2. 环境配置完毕后，可以通过 `java -jar Note.FO.jar` 打开程序
  
## 第四天，10月4日
> 现在可以通过Note.FO进行基本的文本存储工作了，当然为了保证以后的兼容，数据请保存好哦

又经过一天的努力，终于真正的最基本版本可以内部测试使用了，
大家可以先看看界面，是否有眼前一亮的感觉。
是的，没有错，这是通过Java与JavaFX的开发的桌面项目

**目前已有的功能**

1. 文章创建、更新、删除与保存；
2. 文件的检索

**计划开发的功能**

1. 分类的所有功能
2. Tag的所有功能
3. 皮肤的切换功能
4. 文本的导出功能
5. 数据的备份功能
6. 数据的同步功能
7. 文章的推送功能

**新添加的技术**

1. **ControlsFX** UI组件库，项目地址：[http://fxexperience.com/controlsfx/features/](http://fxexperience.com/controlsfx/features/)

### 请大胆的尝试这个Note.FO的小功能吧！
* 如果有同学想参与的，请邮件回复哦

## 第三天，10月3日
**终于技术通了**
终于，通过一天多的开发，有一个基本的样子和最为基本的功能了，重点的是使用了 **WebEngine** 和 **Freemarker** 的配置操作，加之 **Markdown** 的解析器，基本就成型了。

**终于可以用了**
给大家一个截屏吧，可以看到 **Note.FO** 最基本的功能，当然特别挫，不用介意，友好的UI和交互在后期慢慢开发。

### 项目地址

* 代码托管：[http://git.oschina.net/41zone/Note.FO](http://git.oschina.net/41zone/Note.FO)
* Eclipse：请使用最新的 **Luna** 版本
* Java ：请使用最新的 **JDK 8_20** 版本

## 第二天，10月2日

**选择文本解析器**

既然决定了使用 **Markdown** 作为文本控制，那么就需要找到相应的Java包才行。
经过爬山涉水，翻山越岭似的寻找，找到了如下的解析包：

1. Markdown4j : [https://github.com/jdcasey/markdown4j](https://github.com/jdcasey/markdown4j)
2. txtmark : [https://github.com/rjeschke/txtmark](https://github.com/rjeschke/txtmark)
3. markdownj : [https://github.com/myabc/markdownj](https://github.com/myabc/markdownj)
4. pegdown：[https://github.com/sirthias/pegdown](https://github.com/sirthias/pegdown)

最终选用第四个方案，也就是 **pegdown**，其 **Maven** 地址：

```xml
<dependency>
	<groupId>org.pegdown</groupId>
	<artifactId>pegdown</artifactId>
	<version>1.4.2</version>
</dependency>
```

**选择存储引擎**

因为不打算通过网络进行存储文本，所以要考虑本地存储的方式，找了一大圈，甚至想到自己开发一个框架用于本地存储，但是想想，这可是一个巨大的工程，不过绕了一大圈才突然想起来，使用 **SQLite** 不就完了？
我果然是一个机智的少年。

__SQLite的好处：__

1. 无需服务端即可存储
2. 操作与MySQL类似，并且具有事物操作
3. 只需要一个Java包即可开启服务

**SQLite的Maven地址：**

```xml
<dependency>
	<groupId>org.xerial</groupId>
	<artifactId>sqlite-jdbc</artifactId>
	<version>3.7.2</version>
</dependency>
```

## 第一天，10月1日
本来这个计划是想通过Node.js + WebKit搭建开发，但很巧的是 **JavaFX** 升级并融入到了Java 8中。
虽然一直对JavaFX抱有期待，但也明白JavaFX路途还是不容易，是否能够追上Adobe，赶超HTML5，这个一直要打问号。
不论如何，当作实验开发就好了。

#### 想法很简单。

1. 本地化的 **记事本** ，不需要联网
2. 基于Markdown格式进行编辑，相关语法查看：[Markdown——入门指南](http://www.jianshu.com/p/1e402922ee32)
3. 至于同步，是否采用网络同步正在考虑，当然也希望大家能够多提供意见

基于这些，便开始动手写代码，很高兴的是，第一行代码是在回北京的火车上开始的。
当然第一行代码永远是最挫的

```Java
package cc.fozone.note;

...

public class App extends Application {
	public void init() throws Exception {
		// TODO Auto-generated method stub
		super.init();
	}
	
	public void start(Stage stage) throws Exception {
		// TODO Auto-generated method stub
		Group root = new Group();

		Scene scene = new Scene(root,1000,640);
		scene.getStylesheets().add(style);

		stage.setScene(scene);
		stage.centerOnScreen();
		stage.setResizable(resizable);
		stage.show();
	}
}
```
哈哈，差不多对于JavaFX的用法都忘记了，不过这里我给出一堆学习的资料

1. [Java 8下载](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html)
2. [Java FX Sample下载](http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html)
3. [Java FX 教程](http://docs.oracle.com/javafx/2/)
4. [Java FX API](http://docs.oracle.com/javafx/2/api)