Rhino JavaScript get the current date.

Rhinoで現時点のデートを取得するところには、java.text.SimpleDataFormat()で期日のフォーマットを指定できます。

以下はRhinoのプロンプトで実行した結果:

Rhino 1.7 release 4 2012 06 18
js> var d = new Date();
js> var f = new java.text.SimpleDateFormat();
js> f.format(d);
13/10/26 17:54
js> var d = new Date();
js> var f = new java.text.SimpleDateFormat(‘yyyymmdd’);
js> f.format(d);
20135626                   –月の値は不正!!

「yyyyMMdd」に変換すると、正しい結果を出てきました。
js> var f = new java.text.SimpleDateFormat(‘yyyyMMdd’);
js> f.format(d);
20131026
js>

このコードはjavaプログラム中で利用できます。

Slides a new window/view in from the bottom

This code is for show a new window by slidying in.

Titanium.UI.setBackgroundColor(‘#000’);
 
// create tab group
var tabGroup = Titanium.UI.createTabGroup();
 
 
//
// create base UI tab and root window
//
var win1 = Titanium.UI.createWindow({ 
    title:’Tab 1′,
    backgroundColor:’#fff’
});
var tab1 = Titanium.UI.createTab({ 
    icon:’KS_nav_views.png’,
    title:’Tab 1′,
    window:win1
});
 
var label1 = Titanium.UI.createLabel({
    color:’#999′,
    text:’Click to Toggle Slide In Menu’,
    font:{fontSize:20,fontFamily:’Helvetica Neue’},
    textAlign:’center’,
    width:’auto’
});
 
win1.add(label1);
var bottomMenu = Ti.UI.createView({
    width:’100%’,
    height:100,
    bottom:-100,
    backgroundColor:’#f44′
});
 
win1.add(bottomMenu);
 
label1.addEventListener(‘click’, function(e){
    // create variable to keep track of visibility
    if (bottomMenu._up == true) {
        bottomMenu.animate({bottom:-100,duration:500});
        bottomMenu._up = false;
    } else {
        bottomMenu.animate({bottom:0,duration:500});
        bottomMenu._up = true;
    }
});
 
//
//  add tabs
//
tabGroup.addTab(tab1); 
 
 
// open tab group
tabGroup.open();

Datetime picker

The following code could be used to show a datetime picker.

var minDate = new Date();
minDate.setFullYear(2012);
minDate.setMonth(0);
minDate.setDate(1);

var maxDate = new Date();
maxDate.setFullYear(2012);
maxDate.setMonth(11);
maxDate.setDate(31);

var value = new Date();
value.setFullYear(2012);                   
value.setMonth(0);
value.setDate(1);

var picker = Ti.UI.createPicker({
   type:Ti.UI.PICKER_TYPE_DATE,
   minDate:minDate,
   maxDate:maxDate,
   value:value
});

picker.addEventListener(‘change’,function(e)
{
   textfield_date.value = e.value.toLocaleString();
});

Titanium Calendar Month View

I Google a lot for showing Month View / Calendar View in my Titanium application but unable to find it out which work on IPhone and Android (Almost all the screens) Both.
After that I tried to implement it by my own and got the good implementation.

Calendar View / Month View

Calendar View / Month View

To achieve this, Create project which support Android & IPhone.
Open app.js and replace the following code with the existing code and after that Press Command + Shift + F to format the code.

// Taking Screen Width

var screenWidth = 322;

var needToChangeSize = false;

var screenWidthActual = Ti.Platform.displayCaps.platformWidth;

if (Ti.Platform.osname === ‘android’) {

if (screenWidthActual >= 641) {

screenWidth = screenWidthActual;

needToChangeSize = true;

}

}

// Main Window of the Month View.

var win = Ti.UI.createWindow({

backgroundColor : ‘#FF000000’,

navBarHidden : true

});

// Button at the buttom side

var backButton = Ti.UI.createButton({

bottom : ’20dp’,

height : ’40dp’,

width : ‘200dp’

});

// Previous Button – Tool Bar

var prevMonth = Ti.UI.createButton({

left : ’15dp’,

width : ‘auto’,

height : ‘auto’,

title : ‘<‘

});

// Next Button – Tool Bar

var nextMonth = Ti.UI.createButton({

right : ’15dp’,

width : ‘auto’,

height : ‘auto’,

title : ‘>’

});

// Month Title – Tool Bar

var monthTitle = Ti.UI.createLabel({

width : ‘200dp’,

height : ’24dp’,

textAlign : ‘center’,

color : ‘#3a4756’,

font : {

fontSize : 20,

fontWeight : ‘bold’

}

});

// Tool Bar

var toolBar = Ti.UI.createView({

top : ‘0dp’,

width : ‘322dp’,

height : ’50dp’,

backgroundColor : ‘#FFFFD800’,

layout : ‘vertical’

});

// Tool Bar – View which contain Title Prev. & Next Button

var toolBarTitle = Ti.UI.createView({

top : ‘3dp’,

width : ‘322dp’,

height : ’24dp’

});

toolBarTitle.add(prevMonth);

toolBarTitle.add(monthTitle);

toolBarTitle.add(nextMonth);

// Tool Bar – Day’s

var toolBarDays = Ti.UI.createView({

top : ‘2dp’,

width : ‘322dp’,

height : ’22dp’,

layout : ‘horizontal’,

left : ‘-1dp’

});

toolBarDays.sunday = Ti.UI.createLabel({

left : ‘0dp’,

height : ’20dp’,

text : ‘Sun’,

width : ’46dp’,

textAlign : ‘center’,

font : {

fontSize : 12,

fontWeight : ‘bold’

},

color : ‘#3a4756’

});

toolBarDays.monday = Ti.UI.createLabel({

left : ‘0dp’,

height : ’20dp’,

text : ‘Mon’,

width : ’46dp’,

textAlign : ‘center’,

font : {

fontSize : 12,

fontWeight : ‘bold’

},

color : ‘#3a4756’

});

toolBarDays.tuesday = Ti.UI.createLabel({

left : ‘0dp’,

height : ’20dp’,

text : ‘Tue’,

width : ’46dp’,

textAlign : ‘center’,

font : {

fontSize : 12,

fontWeight : ‘bold’

},

color : ‘#3a4756’

});

toolBarDays.wednesday = Ti.UI.createLabel({

left : ‘0dp’,

height : ’20dp’,

text : ‘Wed’,

width : ’46dp’,

textAlign : ‘center’,

font : {

fontSize : 12,

fontWeight : ‘bold’

},

color : ‘#3a4756’

});

toolBarDays.thursday = Ti.UI.createLabel({

left : ‘0dp’,

height : ’20dp’,

text : ‘Thu’,

width : ’46dp’,

textAlign : ‘center’,

font : {

fontSize : 12,

fontWeight : ‘bold’

},

color : ‘#3a4756’

});

toolBarDays.friday = Ti.UI.createLabel({

left : ‘0dp’,

height : ’20dp’,

text : ‘Fri’,

width : ’46dp’,

textAlign : ‘center’,

font : {

fontSize : 12,

fontWeight : ‘bold’

},

color : ‘#3a4756’

});

toolBarDays.saturday = Ti.UI.createLabel({

left : ‘0dp’,

height : ’20dp’,

text : ‘Sat’,

width : ’46dp’,

textAlign : ‘center’,

font : {

fontSize : 12,

fontWeight : ‘bold’

},

color : ‘#3a4756’

});

toolBarDays.add(toolBarDays.sunday);

toolBarDays.add(toolBarDays.monday);

toolBarDays.add(toolBarDays.tuesday);

toolBarDays.add(toolBarDays.wednesday);

toolBarDays.add(toolBarDays.thursday);

toolBarDays.add(toolBarDays.friday);

toolBarDays.add(toolBarDays.saturday);

// Adding Tool Bar Title View & Tool Bar Days View

toolBar.add(toolBarTitle);

toolBar.add(toolBarDays);

// Function which create day view template

dayView = function(e) {

var label = Ti.UI.createLabel({

current : e.current,

width : ’46dp’,

height : ’44dp’,

backgroundColor : ‘#FFDCDCDF’,

text : e.day,

textAlign : ‘center’,

color : e.color,

font : {

fontSize : 20,

fontWeight : ‘bold’

}

});

return label;

};

monthName = function(e) {

switch(e) {

case 0:

e = ‘January’;

break;

case 1:

e = ‘February’;

break;

case 2:

e = ‘March’;

break;

case 3:

e = ‘April’;

break;

case 4:

e = ‘May’;

break;

case 5:

e = ‘June’;

break;

case 6:

e = ‘July’;

break;

case 7:

e = ‘August’;

break;

case 8:

e = ‘September’;

break;

case 9:

e = ‘October’;

break;

case 10:

e = ‘November’;

break;

case 11:

e = ‘December’;

break;

};

return e;

};

// Calendar Main Function

var calView = function(a, b, c) {

var nameOfMonth = monthName(b);

//create main calendar view

var mainView = Ti.UI.createView({

layout : ‘horizontal’,

width : ‘322dp’,

height : ‘auto’,

top : ’50dp’

});

//set the time

var daysInMonth = 32 – new Date(a, b, 32).getDate();

var dayOfMonth = new Date(a, b, c).getDate();

var dayOfWeek = new Date(a, b, 1).getDay();

var daysInLastMonth = 32 – new Date(a, b – 1, 32).getDate();

var daysInNextMonth = (new Date(a, b, daysInMonth).getDay()) – 6;

//set initial day number

var dayNumber = daysInLastMonth – dayOfWeek + 1;

//get last month’s days

for ( i = 0; i < dayOfWeek; i++) {

mainView.add(new dayView({

day : dayNumber,

color : ‘#8e959f’,

current : ‘no’,

dayOfMonth : ”

}));

dayNumber++;

};

// reset day number for current month

dayNumber = 1;

//get this month’s days

for ( i = 0; i < daysInMonth; i++) {

var newDay = new dayView({

day : dayNumber,

color : ‘#3a4756’,

current : ‘yes’,

dayOfMonth : dayOfMonth

});

mainView.add(newDay);

if (newDay.text == dayOfMonth) {

newDay.color = ‘white’;

// newDay.backgroundImage=’../libraries/calendar/pngs/monthdaytiletoday_selected.png’;

newDay.backgroundColor = ‘#FFFFF000’;

var oldDay = newDay;

}

dayNumber++;

};

dayNumber = 1;

//get remaining month’s days

for ( i = 0; i > daysInNextMonth; i–) {

mainView.add(new dayView({

day : dayNumber,

color : ‘#8e959f’,

current : ‘no’,

dayOfMonth : ”

}));

dayNumber++;

};

// this is the new "clicker" function, although it doesn’t have a name anymore, it just is.

mainView.addEventListener(‘click’, function(e) {

if (e.source.current == ‘yes’) {

// reset last day selected

if (oldDay.text == dayOfMonth) {

oldDay.color = ‘white’;

// oldDay.backgroundImage=’../libraries/calendar/pngs/monthdaytiletoday.png’;

oldDay.backgroundColor = ‘#FFFFF000’;

} else {

oldDay.color = ‘#3a4756’;

// oldDay.backgroundImage=’../libraries/calendar/pngs/monthdaytile-Decoded.png’;

oldDay.backgroundColor = ‘#FFDCDCDF’

}

oldDay.backgroundPaddingLeft = ‘0dp’;

oldDay.backgroundPaddingBottom = ‘0dp’;

// set window title with day selected, for testing purposes only

backButton.title = nameOfMonth + ‘ ‘ + e.source.text + ‘, ‘ + a;

// set characteristic of the day selected

if (e.source.text == dayOfMonth) {

// e.source.backgroundImage=’../libraries/calendar/pngs/monthdaytiletoday_selected.png’;

e.source.backgroundColor = ‘#FFFF00FF’;

} else {

// e.source.backgroundImage=’../libraries/calendar/pngs/monthdaytile_selected.png’;

e.source.backgroundColor = ‘#FFFF0000’;

}

e.source.backgroundPaddingLeft = ‘1dp’;

e.source.backgroundPaddingBottom = ‘1dp’;

e.source.color = ‘white’;

//this day becomes old 😦

oldDay = e.source;

}

});

return mainView;

};

// what’s today’s date?

var setDate = new Date();

a = setDate.getFullYear();

b = setDate.getMonth();

c = setDate.getDate();

// add the three calendar views to the window for changing calendars with animation later

var prevCalendarView = null;

if (b == 0) {

prevCalendarView = calView(a – 1, 11, c);

} else {

prevCalendarView = calView(a, b – 1, c);

}

prevCalendarView.left = (screenWidth * -1) + ‘dp’;

var nextCalendarView = null;

if (b == 0) {

nextCalendarView = calView(a + 1, 0, c);

} else {

nextCalendarView = calView(a, b + 1, c);

}

nextCalendarView.left = screenWidth + ‘dp’;

var thisCalendarView = calView(a, b, c);

if (needToChangeSize == false) {

thisCalendarView.left = ‘-1dp’;

}

monthTitle.text = monthName(b) + ‘ ‘ + a;

backButton.title = monthName(b) + ‘ ‘ + c + ‘, ‘ + a;

// add everything to the window

win.add(toolBar);

win.add(thisCalendarView);

win.add(nextCalendarView);

win.add(prevCalendarView);

win.add(backButton);

// yeah, open the window, why not?

win.open({

modal : true

});

var slideNext = Titanium.UI.createAnimation({

// left : ‘-322’,

duration : 500

});

slideNext.left = (screenWidth * -1);

var slideReset = Titanium.UI.createAnimation({

// left : ‘-1’,

duration : 500

});

if (needToChangeSize == false) {

slideReset.left = ‘-1’;

} else {

slideReset.left = ((screenWidth – 644) / 2);

}

var slidePrev = Titanium.UI.createAnimation({

// left : ‘322’,

duration : 500

});

slidePrev.left = screenWidth;

// Next Month Click Event

nextMonth.addEventListener(‘click’, function() {

if (b == 11) {

b = 0;

a++;

} else {

b++;

}

thisCalendarView.animate(slideNext);

nextCalendarView.animate(slideReset);

setTimeout(function() {

thisCalendarView.left = (screenWidth * -1) + ‘dp’;

if (needToChangeSize == false) {

nextCalendarView.left = ‘-1dp’;

} else {

nextCalendarView.left = ((screenWidth – 644) / 2);

}

prevCalendarView = thisCalendarView;

thisCalendarView = nextCalendarView;

if (b == 11) {

nextCalendarView = calView(a + 1, 0, c);

} else {

nextCalendarView = calView(a, b + 1, c);

}

monthTitle.text = monthName(b) + ‘ ‘ + a;

nextCalendarView.left = screenWidth + ‘dp’;

win.add(nextCalendarView);

}, 500);

});

// Previous Month Click Event

prevMonth.addEventListener(‘click’, function() {

if (b == 0) {

b = 11;

a–;

} else {

b–;

}

thisCalendarView.animate(slidePrev);

prevCalendarView.animate(slideReset);

setTimeout(function() {

thisCalendarView.left = screenWidth + ‘dp’;

if (needToChangeSize == false) {

prevCalendarView.left = ‘-1dp’;

} else {

prevCalendarView.left = ((screenWidth – 644) / 2);

}

nextCalendarView = thisCalendarView;

thisCalendarView = prevCalendarView;

if (b == 0) {

prevCalendarView = calView(a – 1, 11, c);

} else {

prevCalendarView = calView(a, b – 1, c);

}

monthTitle.text = monthName(b) + ‘ ‘ + a;

prevCalendarView.left = (screenWidth * -1) + ‘dp’;

win.add(prevCalendarView);

}, 500);

});

TitaniumでiPhone標準のようなカレンダービューを使う

Titaniumを使ってiPhoneアプリを開発しているときに、標準で入っているようなカレンダーのようなインターフェースを利用したいと思うことがあります。
当然、僕と同じことを考えている人がいるだろうと思いTitaniumのDeveloper CenterのQ&Aで検索してみると、モジュールを作って提供してくれている人がいました。

組み込みの過程で一部ハマりどころがあったので、解決策も含めて組み込む手順を記載しておきます。

Step1
まずはgithubからソースをダウンロードします(※Gitでチェックアウトも可)
Appcelerator-Calendar-Module

Step2
ダウンロードしたディレクトリを展開し、「titanium.xcconfig」を編集します。
編集箇所は、変数「TITANIUM_SDK_VERSION」の値で指定されている、TitaniumSDKのバージョンです。
TITANIUM_SDK_VERSION = 1.4.2

※この記事記載時は1.4.2を使用していました。

Step3
build.py」を実行しビルドします。
./build.py

※展開フォルダでコマンドライン実行でOKです。

Step4
ビルドが終了するとbuild.pyと同一のフォルダの中に「calendarmodule-iphone-0.1.zip」というアーカイブが作成されるので、下記のコマンドで「/Library/Application Support/Titanium」フォルダにコピーします。
cp calendarmodule-iphone-0.1.zip /Library/Application\ Support/Titanium/

※バージョンが変わっていると、0.1の箇所が変更になると思われます。

Step5
カレンダーモジュールを組み込みたいプロジェクトフォルダの直下にある「tiapp.xml」を編集し、ti:appタグの中にモジュールを読み込むために下記の記述をします。
<modules>
<module version="0.1">calendarmodule</module>
</modules>

Step6
Titanium Developerでモジュールを組み込んだプロジェクトをビルドすると、Step4でTitaniumのフォルダにコピーしたアーカイブが展開され、下記のような構成になります。
これが:
/Library/Application Support/Titanium/calendarmodule-iphone-0.1.zip
↓↓
こうなる:
/Library/Application Support/Titanium/modules/iphone/calendarmodule/0.1/…
※バージョンが変更になると、0.1の部分が変わります

ここまでは大体がGitに記載の通りなのですが、Step6でビルドすると何故かシュミレータが起動しません。
※エラーもログに出ない

ここで、よくよくGitのページを見てみると、最後の方に下記の一文が記載されていました。

Note: this requires the EventKit Framework to be included for this 
to work.
EventKit Frameworkが必要なのはわかったけど、どうやってモジュールに依存関係を
持たせるかは記載はありませんので、方法をStep7に記載します。

Step7

Step6で説明した、モジュールが展開されたディレクトリ「/Library/Application Support/Titanium/modules/iphone/calendarmodule/0.1/」直下に、「module.xcconfig」というファイルを作成し、ファイルの中身に下記を記載します。

OTHER_LDFLAGS=$(inherited) -framework EventKit

再度ビルドを行うと、シュミレータが起動します。

※モジュールを組み込んだ場合は、起動するまでの時間が長くなります。

組み込んだカレンダービューの使い方は、また別の記事で解説しようと思います。

参考になった:http://www.mountposition.co.jp/blog/?p=227

Yahoo Application API Key

Congratulations, yanbingms, your application is now registered! Yeah!
Your application id is

r5.HtN3V34HT5kT5JIM9fovmZQtab58AByt7w0ejJ0zIYdcCqeZB9DR7mBbysb1d

For application entrypoint ->

http://www.fujixerox.co.jp/

To view your current application ids, click here.

You may want to print this page for your records.

Here’s what to do next.

While I don’t know how to use it at present, preserved it for the future.

Reference: Appcelerator+Titanium+Smartphone+App+Development+Cookbook