Compile native applications with Javascript, CSS, HTML5 and node.
Tint is a slightly modified version of NodeJS, it allows you to go beyond the shell command of node and turns javascript based node applications into fully functional desktop applications. It's also backwards compatible with node 0.10.
You can perform various things you'd never be able to do normally with node. For example:
require('Application');
Window = require('Window');
var mainWindow = new Window();
mainWindow.title = "I'm a native window built in node.";Tint contains a set of native components such as Window, Toolbar, Button, WebView, Text Inputs, Panels, Menus, etc. It also allows you to integrate with the OS on many levels and supports alerts and native notifications.
There are many alternatives to creating javascript based applications, phonegap, tidekit, tidesdk, cordova based sets, node-webkit, appjs and a few others. Tint isn't a hybrid approach, it doesn't try to mask javascript as a native API. Tint uses language bridges to natively represent real C++, C# and Objective-C objects directly in javascript safely. This allows developers to create applications that integrate into the OS, but also allows developers to enhance its capabilities beyond what the Tint SDK allows. Make your own widgets, create your own OS integration methods, if you know C++, C, C# or Objective-C you have no limitations.If you're just interested in creating cross-platform apps with javascript? You're in luck, there's a wide variety of components and classes using just javascript to choose from.
You can even create custom components and views that are cross-platform compatible in javascript.
This is intended as a preview release for Tint 2, currently only supported on OSX. Preview releases for Windows, iOS, and Android are in tests at the moment.This preview release is limited to OSX only. You'll need OSX 10.7 or higher and Xcode in addition to the Xcode bin utils package.
mkdir tint
cd tint
git clone https://github.com/trueinteractions/tint2.git .
./config.sh
./build.sh
./runtests.shAfter building you'll find the binary in 'build/Release/tint'. You can also use the Xcode project files contained in the 'build' directory. Optionally you can use ninja build files that are generated in 'build/out/Release' and 'build/out/Debug'.
You can run applications using:> tint some.jsOr you can run it in interactive mode.
> tintIn addition applications can be packaged as normal apps using a shell package system (more instructions coming on this).
- Application
- Application Schema (app:// protocol for packaged apps)
- Button
- Dialogs (Alerts, sheets, etc)
- DropDown
- FileDialog (Save/Open)
- Menu (and MenuItem)
- Notification
- PopOver
- ProgressBar
- Screen Devices
- SelectInput (Combo Boxes)
- SearchInput (look ahead while typing)
- Slider (range value)
- Status Bars (System Tray's)
- TextInput
- Toolbar
- WebView (WebKit)
- Window
- process.bridge (Objective-C objects and execution bridge in OSX, C# objects and execution bridge in Windows)
// Include the widgets we'll need.
require('Application');
global.Window = require('Window');
global.WebView = require('WebView');
global.Toolbar = require('Toolbar');
global.Button = require('Button');
global.TextInput = require('TextInput');
// Create the widgets.
var mainWindow = new Window();
var urlLocation = new TextInput();
var webView = new WebView();
var toolbar = new Toolbar();
var backButton = new Button();
var forwardButton = new Button();
// Images can be a URL or a string representing a built in OS icon.
backButton.image = 'back';
forwardButton.image = 'forward';
// Attach our webview to the window, everything else goes into the toolbar.
mainWindow.appendChild(webView);
toolbar.appendChild(backButton);
toolbar.appendChild(forwardButton);
toolbar.appendChild('space');
toolbar.appendChild(urlLocation);
toolbar.appendChild('space');
mainWindow.toolbar = toolbar;
// Set some styling.
mainWindow.titleVisible = false;
mainWindow.preferences.animateOnSizeChange = true;
mainWindow.preferences.animateOnPositionChange = true;
urlLocation.alignment = 'center';
urlLocation.linewrap = false;
urlLocation.scrollable = true;
// Attach some listeners to go back/forward and change the URL.
backButton.addEventListener('click',function() { webView.back(); });
forwardButton.addEventListener('click',function() { webView.forward(); });
urlLocation.addEventListener('inputend', function() {
var url = urlLocation.value;
if(url.indexOf(':') == -1) url = "http://"+url;
webView.location = url;
});
webView.addEventListener('load', function() { urlLocation.value = webView.location; });
// Tell the webview to take up as much space in the parent as possible.
mainWindow.addLayoutConstraint({
priority:'required', relationship:'=',
firstItem:webView, firstAttribute:'top',
secondItem:mainWindow, secondAttribute:'top',
multiplier:1.0, constant:0.0
});
mainWindow.addLayoutConstraint({
priority:'required', relationship:'=',
firstItem:webView, firstAttribute:'bottom',
secondItem:mainWindow, secondAttribute:'bottom',
multiplier:1.0, constant:0
});
mainWindow.addLayoutConstraint({
priority:'required', relationship:'=',
firstItem:webView, firstAttribute:'left',
secondItem:mainWindow, secondAttribute:'left',
multiplier:0.0, constant:0.0
});
mainWindow.addLayoutConstraint({
priority:'required', relationship:'=',
firstItem:webView, firstAttribute:'right',
secondItem:mainWindow, secondAttribute:'right',
multiplier:1.0, constant:0
});Commercial support available at http://www.trueinteractions.com/ Copyright (c) 2014 True Interactions