ゼロと無限の間に

フリーでオープンソースなJavaScriptとかPHPとか。

ユーザ用ツール

サイト用ツール


サイドバー

何かありましたら、メールで連絡いただくか、ブログのどこかにコメント入れてくださいね ^_^

Menu

ゼロと無限の間に

はじめに

作った主なサイト

作った主な便利ツール(無料)

ログ (Blog)

javascript:prometheus

文書の過去の版を表示しています。


Titanium Mobileに神の火を! - Prometheus.js

iPhoneアプリもAndroidアプリもJavaScriptで作れてしまうTitanium Mobile。便利なのだがその構成は良くも悪くもきちんと体系だっている。(JavaやYUIを連想させる?)

そこで、もう少しだけ手軽にTitamium Mobileを使えるように、Titaniumをラップするライブラリを作ってみた。その名も、Prometheus.js

ライセンス

MITライセンス

使用例

UIを生成する

全てのUIを、本家Titaniumよりちょっと短いコードで生成できる

// Titaniumの場合
var win = Ti.UI.createWindow();
 
// Prometheus.jsの場合
var win = Pr.window();

UI生成時のパラメータはTitaniumと同様に渡すことができる

var label = Pr.label({text:"ラベルだよ", fontWeight:"bold"});

ラベルとボタンは、パラメータが表示文字列のみなら、それを文字列として渡すことができる

Hashにしない分、ちょっと短くて済む

// Titaniumの場合
var label = Ti.UI.createLabel({text:"ラベルだよ"});
 
// Prometheus.jsの場合
var label = Pr.label("ラベルだよ");

ボタンやダイアログは、第2匹数としてonclickのイベントハンドラーを渡すことができる

// Titaniumの場合
var button = Ti.UI.creatButton({title:"押してみる?"});
button.addEventListener("click", function() { alert("押しちゃったね"); });
 
// Prometheus.jsの場合
var button = Pr.button("押してみる?", function() { alert("押しちゃったね"); });

Viewは第2匹数としてView上に載せるUIを渡すことができる

var view = Pr.view({}, Pr.label("viewに載るよ"));
 
// 複数の場合は配列で渡す
var view = Pr.view({}, [Pr.label("ラベル1"), Pr.label("ラベル2")]);

パラメータの共通の初期値を指定できる

// ラベルは全て太字にする場合
Pr.params.label.fontWeight = "bold";

この後にPrometheus.jsで生成したlabelは全てfontWeightがboldになる

また、いくつかのUIはデフォルトで使いやすいように初期値が設定されている

これらを合わせると、Titaniumに比べてこれぐらいコードが短くなる

// Titaniumの場合
var win = Ti.UI.createWindow({backgroundColor:"#000", layout:"vertical"});
var view = Ti.UI.createView({layout:"horizontal"});
win.add(view);
view.add(Ti.UI.createLabel({text:"ラベル1"}));
view.add(Ti.UI.createLabel({text:"ラベル2"}));
var button = Ti.UI.createButton({title:"ボタン"});
button.addEventListener("click", function() {
    Ti.UI.createAlertDialog(message:"こんにちはこんにちは!", buttonNames:["OK"]).show();
});
win.add(button);
 
// Prometheus.jsの場合
var win = Pr.win();
win.add(Pr.view({}, [Pr.label("ラベル1"), Pr.label("ラベル2")]);
win.add(Pr.button("ボタン", function() {
    pr.alertDialog(message:"こんにちはこんにちは!").show();
}));

HTTPで通信する

Ti.Network.createHTTPClientによる一連の処理のショートカット

Pr.http("POST", "http://www.example.com/", {q:"hoge"}, function(json) {
    // サーバからのレスポンスのJSONをHash化したものが渡される
});

JSONにしたくない場合は、第6引数で“TEXT”を指定すればよい

ディスプレイのサイズを取得する

var w = Pr.width();
var h = Pr.height();

ソースコード

Promethus.jsを使いたい場合は(ダウンロードできるファイルを用意してないので)下記のソースコードをコピーして使ってください

/**
 * Prometheus.js - The library for Titanium Mobile
 *
 * @see       http://0-oo.net/sbox/javascript/prometheus
 * @version   0.1.0
 * @copyright 2012 dgbadmin@gmail.com
 * @license   http://0-oo.net/pryn/MIT_license.txt (The MIT license)
 *
 * See also
 * @see http://tidocs.com/mobile/latest/
 * @see http://code.google.com/p/titanium-mobile-doc-ja/wiki/toc
 */
 
var Prometheus = {};
var Pr = Prometheus;
 
Ti.UI.setBackgroundColor('#000');
 
 
/*************************************************
 * The utility functions
 ************************************************/
/**
 * Get the opened database
 * @param	String	dbName
 * @return	Object
 */
Pr.db = function(dbName) {
	return Ti.Database.open(dbName);
};
/**
 * Send the HTTP request and get the response
 * @param	String	httpMethod	"GET" or "POST"
 * @param	String	url
 * @param	Hash	params
 * @param	Function	onload
 * @param	Function	onerror	(Optioanl)
 * @param	String	format	(Optioanl) "TEXT" or "JSON"(default)
 */
Pr.http = function(httpMethod, url, params, onload, onerror, format) {
	var http = Ti.Network.createHTTPClient({
		onload: function() {
			var res;
 
			switch (format) {
				case "TEXT":
				    res = this.responseText;
				default:
				    res = JSON.parse(this.responseText);
			}
 
			onload(res);
		},
		onerror: onerror || function(error){
			Pr.alertDialog({title:"Error", message:error}).show();
		}
	});
	http.open(httpMethod, url);
	http.send(params || {});
};
/**
 * Get the width of the display
 * @return Number
 */
Pr.width = function() {
	return Ti.Platform.displayCaps.platformWidth;
};
/**
 * Get the height of the display
 * @return Number
 */
Pr.height = function() {
	return Ti.Platform.displayCaps.platformHeight;
};
/**
 * Merge the hashes
 * @param	Hash	data1
 * @param	Hash	data2
 * @return	Hash
 */
Pr.merge = function(data1, data2) {
	var dst = {};
 
	if (data1) {
		for (var i in data1) {
			dst[i] = data1[i];
		}
	}
 
	if (data2) {
		for (var j in data2) {
			dst[j] = data2[j];
		}
	}
 
	return dst;
};
/**
 * Add the click listener
 * @param	Object	obj
 * @param	Function	onclick
 * @return	Object
 */
Pr.clickable = function(obj, onclick) {
	if (onclick) {
		obj.addEventListener("click", onclick);
	}
 
	return obj;
};
 
/*************************************************
 * The default parameters of UIs
 ************************************************/
Pr.params = {
	ui2DMatrix: {},	// With the prefix "ui"
	ui3DMatrix: {},	// With the prefix "ui"
	activityIndicator:{},
	alertDialog:{buttonNames:["OK"]},
	animation:{},
	button:{},
	buttonBar:{},
	coverFlowView:{},
	dashboardItem:{},
	dashboardView:{},
	emailDialog:{},
	imageView:{},
	label:{},
	optionDialog:{},
	picker:{},
	pickerColumn:{},
	pickerRow:{},
	progressBar:{},
	scrollView:{},
	scrollableView:{},
	searchBar:{},
	slider:{},
	uiSwitch:{},	// With the prefix "ui"
	tab:{},
	tabGroup:{},
	tabbedBar:{},
	tableView:{},
	tableViewRow:{},
	tableViewSection:{},
	textArea:{},
	textField:{passwordMask:false},
	toolbar:{},
	view:{layout:"horizontal"},	// "vertical" or "horizontal" or false
	webView:{backgroundColor:"#000"},
	window:{backgroundColor:"#000", layout:"vertical"}
};
 
/*************************************************
 * The creaters of UIs
 ************************************************/
/**
 * Create a 2dMatrix
 * @param	Hash	params
 * @return	Object
 */
Pr.ui2DMatrix = function(params) {
	return Ti.UI.create2DMatrix(Pr.merge(Pr.params.ui2DMatrix, params));
};
/**
 * Create a ui3DMatrix
 * @param	Hash	params
 * @return	Object
 */
Pr.ui3DMatrix = function(params) {
	return Ti.UI.create3DMatrix(Pr.merge(Pr.params.ui3DMatrix, params));
};
/**
 * Create an activityIndicator
 * @param	Hash	params
 * @return	Object
 */
Pr.activityIndicator = function(params) {
	return Ti.UI.createActivityIndicator(Pr.merge(Pr.params.activityIndicator, params));
};
/**
 * Create an alertDialog
 * @param	Hash	params
 * @param	Function	onclick	(Optional)
 * @return	Object
 */
Pr.alertDialog = function(params, onclick) {
	return Pr.clickable(Ti.UI.createAlertDialog(Pr.merge(Pr.params.alertDialog, params)), onclick);
};
/**
 * Create an animation
 * @param	Hash	params
 * @return	Object
 */
Pr.animation = function(params) {
	return Ti.UI.createAnimation(Pr.merge(Pr.params.animation, params));
};
/**
 * Create a button
 * @param	Hash	params
 * @param	Function	onclick	(Optional)
 * @return	Object
 */
Pr.button = function(params, onclick) {
	if (typeof(params) == "string") {
		params = {title:params};
	}
 
	return Pr.clickable(Ti.UI.createButton(Pr.merge(Pr.params.button, params)), onclick);
};
/**
 * Create a buttonBar
 * @param	Hash	params
 * @return	Object
 */
Pr.buttonBar = function(params) {
	return Ti.UI.createButtonBar(Pr.merge(Pr.params.buttonBar, params));
};
/**
 * Create a coverFlowView
 * @param	Hash	params
 * @return	Object
 */
Pr.coverFlowView = function(params) {
	return Ti.UI.createCoverFlowView(Pr.merge(Pr.params.coverFlowView, params));
};
/**
 * Create a dashboardItem
 * @param	Hash	params
 * @return	Object
 */
Pr.dashboardItem = function(params) {
	return Ti.UI.createDashboardItem(Pr.merge(Pr.params.dashboardItem, params));
};
/**
 * Create a dashboardView
 * @param	Hash	params
 * @return	Object
 */
Pr.dashboardView = function(params) {
	return Ti.UI.createDashboardView(Pr.merge(Pr.params.dashboardView, params));
};
/**
 * Create an emailDialog
 * @param	Hash	params
 * @return	Object
 */
Pr.emailDialog = function(params) {
	return Ti.UI.createEmailDialog(Pr.merge(Pr.params.emailDialog, params));
};
/**
 * Create an imageView
 * @param	Hash	params
 * @return	Object
 */
Pr.imageView = function(params) {
	return Ti.UI.createImageView(Pr.merge(Pr.params.imageView, params));
};
/**
 * Create a label
 * @param	Hash	params
 * @return	Object
 */
Pr.label = function(params) {
	if (typeof(params) == "string") {
		params = {text:params};
	}
 
	return Ti.UI.createLabel(Pr.merge(Pr.params.label, params));
};
/**
 * Create a optionDialog
 * @param	Hash	params
 * @param	Function	onclick	(Optional)
 * @return	Object
 */
Pr.optionDialog = function(params, onclick) {
	return Pr.clickable(Ti.UI.createOptionDialog(Pr.merge(Pr.params.optionDialog, params)), onclick);
};
/**
 * Create a picker
 * @param	Hash	params
 * @return	Object
 */
Pr.picker = function(params) {
	return Ti.UI.createPicker(Pr.merge(Pr.params.picker, params));
};
/**
 * Create a pickerColumn
 * @param	Hash	params
 * @return	Object
 */
Pr.pickerColumn = function(params) {
	return Ti.UI.createPickerColumn(Pr.merge(Pr.params.pickerColumn, params));
};
/**
 * Create a pickerRow
 * @param	Hash	params
 * @return	Object
 */
Pr.pickerRow = function(params) {
	return Ti.UI.createPickerRow(Pr.merge(Pr.params.pickerRow, params));
};
/**
 * Create a progressBar
 * @param	Hash	params
 * @return	Object
 */
Pr.progressBar = function(params) {
	return Ti.UI.createProgressBar(Pr.merge(Pr.params.progressBar, params));
};
/**
 * Create a scrollView
 * @param	Hash	params
 * @return	Object
 */
Pr.scrollView = function(params) {
	return Ti.UI.createScrollView(Pr.merge(Pr.params.scrollView, params));
};
/**
 * Create a scrollableView
 * @param	Hash	params
 * @return	Object
 */
Pr.scrollableView = function(params) {
	return Ti.UI.createScrollableView(Pr.merge(Pr.params.scrollableView, params));
};
/**
 * Create a searchBar
 * @param	Hash	params
 * @return	Object
 */
Pr.searchBar = function(params) {
	return Ti.UI.createSearchBar(Pr.merge(Pr.params.searchBar, params));
};
/**
 * Create a slider
 * @param	Hash	params
 * @return	Object
 */
Pr.slider = function(params) {
	return Ti.UI.createSlider(Pr.merge(Pr.params.slider, params));
};
/**
 * Create a uiSwitch
 * @param	Hash	params
 * @return	Object
 */
Pr.uiSwitch = function(params) {
	return Ti.UI.createSwitch(Pr.merge(Pr.params.uiSwitch, params));
};
/**
 * Create a tab
 * @param	Hash	params
 * @return	Object
 */
Pr.tab = function(params) {
	return Ti.UI.createTab(Pr.merge(Pr.params.tab, params));
};
/**
 * Create a tabGroup
 * @param	Hash	params
 * @return	Object
 */
Pr.tabGroup = function(params) {
	return Ti.UI.createTabGroup(Pr.merge(Pr.params.tabGroup, params));
};
/**
 * Create a tabbedBar
 * @param	Hash	params
 * @return	Object
 */
Pr.tabbedBar = function(params) {
	return Ti.UI.createTabbedBar(Pr.merge(Pr.params.tabbedBar, params));
};
/**
 * Create a tableView
 * @param	Hash	params
 * @return	Object
 */
Pr.tableView = function(params) {
	return Ti.UI.createTableView(Pr.merge(Pr.params.tableView, params));
};
/**
 * Create a tableViewRow
 * @param	Hash	params
 * @return	Object
 */
Pr.tableViewRow = function(params) {
	return Ti.UI.createTableViewRow(Pr.merge(Pr.params.tableViewRow, params));
};
/**
 * Create a tableViewSection
 * @param	Hash	params
 * @return	Object
 */
Pr.tableViewSection = function(params) {
	return Ti.UI.createTableViewSection(Pr.merge(Pr.params.tableViewSection, params));
};
/**
 * Create a textArea
 * @param	Hash	params
 * @return	Object
 */
Pr.textArea = function(params) {
	return Ti.UI.createTextArea(Pr.merge(Pr.params.textArea, params));
};
/**
 * Create a textField
 * @param	Hash	params
 * @return	Object
 */
Pr.textField = function(params) {
	return Ti.UI.createTextField(Pr.merge(Pr.params.textField, params));
};
/**
 * Create a toolbar
 * @param	Hash	params
 * @return	Object
 */
Pr.toolbar = function(params) {
	return Ti.UI.createToolbar(Pr.merge(Pr.params.toolbar, params));
};
/**
 * Create a view
 * @param	Hash	params
 * @param	Object or Array	children	(Optional) The Children of the webView
 * @return	Object
 */
Pr.view = function(params, children) {
	var view = Ti.UI.createView(Pr.merge(Pr.params.view, params));
 
	if (children) {
		if (children instanceof Array) {
			for (var i = 0; i < children.length; i++) {
				view.add(children[i]);
			}
		} else {
			view.add(children);
		}
	}
 
	return view;
};
/**
 * Create a webView
 * @param	Hash	params
 * @return	Object
 */
Pr.webView = function(params) {
	return Ti.UI.createWebView(Pr.merge(Pr.params.webView, params));
};
/**
 * Create a window
 * @param	Hash	params
 * @return	Object
 */
Pr.window = function(params) {
	return Ti.UI.createWindow(Pr.merge(Pr.params.window, params));
};
javascript/prometheus.1326979161.txt.gz · 最終更新: 2012/01/19 22:19 by dgbadmin