After the previous node webkit with javascript to build web native, finally can make an atom editor, but here is to remember the Nokia Lumia mobile phone, the final code see https://github.com/gmszone/lumia
You must configure the development environment before you start.
Mac OSUnder
Https://github.com/rogerwang/node-webkit
Find the corresponding version
Copy the app to the Application and add the following alias
~ /. Bash_profile
# alias to nw alias nw="/Applications/node-webkit.app/Contents/MacOS/node-webkit"
Application
source ~/.bash_profile
The method to start an application is
nw app.nw
Before starting
zip -r app.nw *
In this way, we have a basic framework.
The initial version of lumia 0.1 is from
Https://github.com/zcbenz/nw-sample-apps
This is an example from the node-webkit official website.
This example seems unfriendly at all. When writing this article, the Lumia Editor
It looks like atom editor, because css is referenced in atom editor.
Currently, the framework mainly consists of the following two basic functions (reprinted and retained: write your own editor-Lumia converted red by Atom)
- Node. js
- Node-webkit
- CodeMirror
Obviously, Node-Webkit has played a major role, but CodeMirror is also indispensable. As an online editor tool, it can be used by other current workers.
- Underscore JS extension Library
- StringJS makes String processing easier
However, there are more libraries in Package. json, but they have not yet played a role.
The basic functions of Lumia Editor have not made too many modifications to the Node-Webkit example. The modifications are mainly based on the following parts:
- Remove the Save, Open, and New buttons and change them to shortcut keys.
- Beautify the UI
- Extended matching and support for more languages
- Sublime Shortcut Key Binding
Therefore, its basic function is
- Open, save, and create a file
- The same shortcut key as Sublime
- Atom-like appearance
- Search
Javascript + HTML + Node-WebkitHTML + CSS mainly beautify the interface
<body style="background:#fff"> <div class="workspace" background="#fff"> <div class="horizontal"> <div class="vertical"> <div class="panes"> <div class="pane" style="min-width:100%;"> <ul tabindex="-1" class="list-inline tab-bar inset-panel"> <li class="tab active"> <div class="title" id="title">untitled</div> <div class="close-icon"></div> </li> </ul> <div class="editor"> <div id="editor"></div> </div> </div> </div> <div class="status-bar tool-panel panel-bottom"> <div class="flexbox-repaint-hack"> <div class="status-bar-left"> <div class="cursor-position inline-block" id="mode"> </a> <div class="status-image inline-block"> <span class="image-size" style="display: none;"></span> </div> </div> </div> </div> </div> </div> <input style="display:none;" id="newFile" type="file" /> <input style="display:none;" id="openFile" type="file" /> <input style="display:none;" id="saveFile" type="file" nwsaveas /> </div> <div style="display:none"> <button style="display:none;" id="new">New</button> <button style="display:none;" id="open">Open</button> <button style="display:none;" id="save">Save</button> </div> </body>
If you move the title to the top of the page and change it to the same position as the title, it looks like a chrome browser tag. Here, we mainly use the pseudo element of CSS.
.tab-bar .tab:before { content:''; position: absolute; top: -1px; left: -16px; height: 26px; width: 30px; border-top-left-radius: 3px; border-left: 1px solid #b9b9b9; box-shadow: inset 1px -1px 1px rgba(0, 0, 0, 0.05); -webkit-transform: skewX(133deg); } .tab-bar:after { content:""; position: absolute; bottom: 0; height: 5px; left: 0px; width: 100%; background-color: #f0f0f0; border-bottom: 1px solid #dddddd; border-top: 1px solid #b9b9b9; }
These are mainly manifested in appearance. In general, they are the above practices.
Editor. jsThe main task is to judge and process events.
onload = function() { newButton = document.getElementById("new"); openButton = document.getElementById("open"); saveButton = document.getElementById("save"); newButton.addEventListener("click", handleNewButton); openButton.addEventListener("click", handleOpenButton); saveButton.addEventListener("click", handleSaveButton); $("#saveFile").change(function(evt) { onChosenFileToSave($(this).val()); }); $("#openFile").change(function(evt) { onChosenFileToOpen($(this).val()); }); editor = CodeMirror( document.getElementById("editor"), { lineNumbers: true, keyMap: "sublime", autoCloseBrackets: true, matchBrackets: true, showCursorWhenSelecting: true, extraKeys: { "Cmd-N": function(instance) { handleNewButton() }, "Ctrl-N": function(instance) { handleNewButton() }, "Cmd-O": function(instance) { handleOpenButton() }, "Ctrl-O": function(instance) { handleOpenButton() }, "Cmd-S": function(instance) { handleSaveButton() }, "Ctrl-S": function(instance) { handleSaveButton() }, "Cmd-Shift-P": function(instance) { console.log("hello".green) } } }); newFile(); onresize(); gui.Window.get().show(); };
We can see that the editor is mainly driven by CodeMirror, and the judgment of the language is used to determine the language and highlight it.
function handleDocumentChange(title) { var mode = "javascript"; var modeName = "JavaScript"; if (title) { title = title.match(/[^/]+$/)[0]; document.getElementById("title").innerHTML = title; document.title ="Lumia"+title; _.each(m.allmodes, function(modes) { if (S(title).contains(modes["filename"])) { mode = modes["mode"]; modeName = modes["modeName"]; console.log(mode); } }); } else { document.getElementById("title").innerHTML = "[no document loaded]"; } editor.setOption("mode", mode); document.getElementById("mode").innerHTML = modeName; }
The main task is
UnderscoreAnd
StringjsHere, m uses an external file.
var m = require('./allmodes')