-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
232 lines (210 loc) · 11.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TideSDK - Desktop App development</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href="assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-bottom: 40px;
}
</style>
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/img/ico/appjs_144.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/img/ico/appjs_114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/img/ico/appjs_72.png">
<link rel="apple-touch-icon-precomposed" href="assets/img/ico/appjs_57.png">
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="160">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#home"><img src="assets/img/logo1.png"/></a>
<div class="nav-collapse pull-right">
<ul class="nav">
<li><a href="#why">Why TideSDK?</a></li>
<li><a href="#guide">Guide</a></li>
<li><a href="#contribute">Contribute</a></li>
<li><a href="#download">Download</a></li>
<li><a href="https://twitter.com/tideSDK" target="_blank">Twitter</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="home" style="padding-top: 60px;"></div>
<!-- Main hero unit for a primary marketing message or call to action -->
<header class="hero-unit linen">
<div class="inner">
<h1>Desktop App development</h1>
<p>for Mac, Windows and Linux. HTML5, Javascript and CSS3 plus the power of Python, Ruby or PHP when you need it.</p>
<p>
<a class="btn btn-warning btn-large disabled">Download TideSDK (v0.0.2)</a>
<a class="btn btn-large disabled">Read Documentation</a>
</p>
</div>
</header>
<div class="container">
<section id="why">
<div class="page-header">
<h1>Why TideSDK?</h1>
</div>
<div class="page-body">
<p>Because it is simple and yet powerful. Using AppJS you don't need to be worry about coding cross-platform or learning new languages and tools. You are already familiar with HTML, CSS and Javascript. What is better than this stack for application development? Beside, AppJS uses Chromium at the core so you get latest HTML 5 APIs working. So relax and focus on the task your application should do.</p>
<div class="row">
<div class="span4">
<h3>HTML 5</h3>
<p>AppJS allows you to use HTML 5 APIs to create attractive applications from Word Processors to 3D Games. You are no longer limited to default GUI widgets that plaforms force you to use. Creating custom UIs is now only limited to your imagination!</p>
<p><a class="btn" href="http://slides.html5rocks.com/" target="_blank">Learn more about HTML 5 »</a></p>
</div>
<div class="span4">
<h3>CSS 3</h3>
<p>Using CSS you can decorate widgets as you like. Create a custom widget in HTML and complete your work with decorating it. Adding shadows, animating elements and transforming objects in 3D space are a few examples of what you can do with CSS 3. </p>
<p><a class="btn" href="http://www.css3.info/preview/" target="_blank">Learn more about CSS 3 »</a></p>
</div>
<div class="span4">
<h3>Node.js</h3>
<p>The interesting part of AppJS is that it uses Node.js as the backbone. Node.js has been built to ease the process of developing scalable network applications. But today, you can see Node nearly everywhere! It has a nice API and lots of modules.</p>
<p><a class="btn" href="http://nodejs.org" target="_blank">Read more at nodejs.org »</a></p>
</div>
</div>
</div>
</section>
<section id="guide">
<div class="page-header">
<h1>Getting Started Guide</h1>
</div>
<div class="page-body">
<p>Make sure you have the latest Node.js installed.</p>
<p>Before you continue, install node-gyp using npm (node's package manager).</p>
<pre>$ npm install node-gyp -g</pre>
<p>Again use npm to install AppJS.</p>
<pre>$ npm install appjs</pre>
<p>AppJS tries to install dependencies based on the platform you are working with.</p>
<p>Now you are ready to develop your first desktop application with HTML/assets/css/JS! Create a file named app.js. Open it with your favorite editor and start coding:</p>
<pre>
/**
* Begin by requiring appjs. appjs object has only one function that initializes everything you need.
**/
var appjs = require('appjs');
/**
* We will use window and app variables later.
* settings is the object that you will use to set window properties like width or height.
* There are more options like disabling chrome (frame around the window) or enabling fullscreen
* mode but we don't need them.
**/
var window,app,settings = {
width: 800,
height: 600,
autoResize: false
};
// Initialize application. It tells appjs that you are going to start desktop application.
app = appjs.init();
/**
* This event is fired when window is ready to show up. Calling window.show() before this event
* causes exception.
**/
app.on("window_ready",function(){
console.log("Event WindowReady called");
window.show();
});
/**
* use a static router to serve html, css and javascript files that are in public folder.
* appjs uses your routers when you request a resource with appjs:// custom scheme.
**/
app.use(app.staticRouter('./public'));
/**
* There are other routing functions that you can use like `post`, `get` or `all`.
**/
app.post('/',function(req,res,next){
res.send(200,'Hey! How are you '+req.post('firstname'));
})
/**
* Create a window and point it to htt://appassets/js/. This url is a special url. It is not a http
* request. AppJS manages these requests manually using routers you defined.
**/
window = app.createWindow("http://appassets/js/",settings);
</pre>
<p>Create a folder named <code>public</code> and create a html file named <code>index.html</code> inside it. Open <code>index.html</code> in the editor. We want to create a form to submit first name and last name.</p>
<pre><!doctype html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<form action="/" method="POST">
<input name="firstname" type="text" placeholder="Firstname"/>
<input name="lastname" type="text" placeholder="Firstname"/>
<input type="submit"/>
</form>
</body>
</html></pre>
<p>Now everything is ready. Open terminal and navigate to your project directory.</p>
<pre>$ node app.js</pre>
<p>You will see a window that asks you for firstname and lastname! Fill the form and click submit. AppJS routes the request to post router at line 42 of <code>app.js</code>. We process the request and send response.</p>
<p>It was a simple application to show how AppJS works. For more detailed information read the documentation <href="/docs" title="Documentation">here</a>.</p>
</div>
</section>
<section id="contribute">
<div class="page-header">
<h1>We need your help!</h1>
</div>
<div class="page-body">
<p>AppJS is a work in progress and needs a lot of improvement. There are unimplemented stuff waiting for your help! You can find them at github <a href="https://github.com/milani/appassets/js/issues">issue tracker</a> or <a href="https://github.com/milani/appjs">read the code</a> and find <span class="label">@TODO</span> tags! You can also subscribe to <a href="https://groups.google.com/d/forum/appjs-dev" title="AppJS Mailing list" target="_blank">the development mailing list</a> where we talk about AppJS features.</p>
<p>There are two areas you can help. If you code in C++ try to implement features that are only supported in one platform or two. We need all three major platforms to work (Mac, Linux and Windows). If you are professional in Javascript and Node.js then you can help us by implementing JS wrappers for C++ APIs.</p>
<p>To start contributing, fork git repository from github, clone the forked repository and make your changes according to instructions below. Then send a pull request. We discuss changes you have made. After that you can see your changes merged in the main repository!</p>
<h2>Contribution guideline</h2>
<p>Please follow the guidelines below before making any change to source code. Otherwise we can not merge your pull request.</p>
<h3>Git</h3>
<ul>
<li>Use topic branches to add features. This way you can keep master branch up-to-date and reduce merge conflicts.</li>
<li>Use present tense commit messages. Always add describe what you did in this commit. Example:
<pre>Fixes #111
Describe what changed in this commit here.</pre>
</li>
</ul>
<h3>Code</h3>
<ul>
<li>Remove trailing whitespaces.</li>
<li>Use two-space tab indention.</li>
<li>Use 80 characters line length.</li>
<li>Use single quotes in JS.</li>
<li>Use same line braces.</li>
<li>Use camelCase variables in JS, underline variables in C++.</li>
</ul>
</div>
</section>
<section id="download">
<div class="page-header">
<h1>Download</h1>
</div>
<div class="page-body">
<p>AppJS should be used as a module for Nodejs. If you have <code>npm</code> installed then downloading AppJS is easy:</p>
<pre>$ npm install appjs</pre>
<p>There is no tarball at the time. We are working hard to make them available.</p>
<!--p>Here are compiled tarballs for different platforms. Remember that you should extract tarball in <code>your_project_root/node_modules</code>.</p-->
</div>
</section>
<hr>
<footer>
<p>© Sharry Stowell 2012</p>
</footer>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
</body>
</html>