メンバー投稿記事一覧
Ext.Carouselのインジケーター設定 | Sencha Touch Tips
Sencha Touchにはいかにもタッチスクリーン向けなパネルとして、Ext.Carouselがあります。
このパネルはカードレイアウトのパネルの一種で複数のカードを左右（または上下）に一列にならべて、
スワイプジェスチャーによって切り替えることができます。
各カードの下にはインジケーターとして、○がアイテムの数だけ並んで現在のアイテムの位置は●になります。
今回はこのインジケーターの表示/非表示を簡単に切り替えるサンプルです。
インジケーターについての記述はほとんどAPIリファレンスに載っていないので、ソースコードを見ないとわかりません。
・サンプルコード
Show/Hide Carousel Indicator – jsdo.it – share JavaScript, HTML5 and CSS
インジケーターの初期設定はExt.Carouselのindicatorコンフィグで行えます。
indicator : Boolean
Provides an indicator while toggling between child items to let the user know where they are in the card stack.
APIリファレンスによると受け付けるのはBooleanとのことですが、ソースコードを見ると以下のようになっています。
インジケーターについての記述はこれくらいで、他の情報がありません。なのでソースコードを見ます。
//Ext.Carouselクラス
initComponent: function() {
・
・
・
if (this.indicator) {
var cfg = Ext.isObject(this.indicator) ? this.indicator : {};
this.indicator = new Ext.Carousel.Indicator(Ext.apply({}, cfg, {
direction: this.direction,
carousel: this,
ui: this.ui
}));
}
Ext.Carousel.superclass.initComponent.call(this);
},
・
・
・
indicatorコンフィグにオブジェクトが渡された場合、Ext.Carousel.Indicatorクラスのコンフィグオプションとしてバイパスするようになっています。
またCarouselが生成されると、このインスタンスのindicatorにはExt.Caorousel.Indicatorオブジェクトが設定されます。
つまり
- Ext.CarouselのindicatorコンフィグにはExt.Carousel.Indicatorクラスのコンフィグが渡せる。
- Ext.Carouselのindicatorコンフィグにtrueを渡すとデフォルトのExt.Carousel.Indicator、falseだと何も生成しない。
- Ext.CarouselオブジェクトのindicatorプロパティによってExt.Carousel.Indicatorオブジェクトが参照できる。
Ext.Carousel.IndicatorクラスはExt.Componentのサブクラスなので、Ext.Componentで設定できるコンフィグは受け付けることができます。サンプルコードではインジケーターの初期値にhiddenとshowAnimationを設定しています。
indicator:{
hidden:true,
showAnimation:{
type:'fade'
}
}
サンプルコードではさらにツールバーの稲妻ボタンで、インジケーターの表示/非表示を切り替えています。
if (carousel.indicator.isVisible()){
carousel.indicator.show();
}else{
carousel.indicator.hide();
}
ここではコンフィグで設定した、showAnimationで設定したアニメーションで表示が切り替えられます。ただし現状では非表示するときのアニメーションしか効いてないようです。
インジケーターもコンポーネントとして扱えるので、もっと複雑なことできそうです。
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
Ext JS/Sencha Touch入門40 Ajaxリクエスト処理
今回はExt JS,Sencha Touchのどちらでも非常によく使うAjaxの処理を紹介します。
サンプルコードはSencha Touchですが、Ajaxリクエストの処理はExt JSでもほぼ同じです。
Ajax サンプル
まずAjaxでリクエストする先を用意する必要があります。
今回はPHPで作成しました。
・PHP
<?php
//サンプル
//3秒待つ
sleep(3);
//POST値の処理
$param = $_POST['id'];
$res['id'] = $param;
if ($param) {
$res['success'] = true;
}else {
$res['success'] = false;
}
//JSONで返す
header('Content-Type: application/json');
echo json_encode($res);
die();
?>
3秒処理を遅らせています。
レスポンスにはJSON形式でPOSTされた情報とサーバーサイドでの処理が正しく終わったらsuccessにtrueを返すようにしています。
HTMLファイルはSencha Touchの基本形のものでよいです。
・HTML
<!DOCTYPE html>
<html manifest="index.manifest">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ajax Sample</title>
<link rel="stylesheet" href="../../st/resources/css/ext-touch.css" type="text/css">
<script type="text/javascript" src="../../st/ext-touch-debug.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body></body>
</html>
今回のサンプルではパネルをひとつ作ってツールバー上に、Ajaxリクエストをキックするボタンを配置します。このボタンをタップするとAjax リクエストが実行されるようにします。
・Javascript
Ext.setup({
onReady: function() {
//リクエスト処理
var ajax = function(callback) {
//ローディングマスク
panel.el.mask(
false,
' <div style="margin:50% auto; text-align:center;color:#EEE;"><img src="loader.gif"/> <br />お待ちください...</div>');
//Ajax リクエスト
Ext.Ajax.request({
url:'post.php',
params:{
id:'test'
},
success:function(result,opt){
//マスクを外す
panel.el.unmask();
var res = Ext.decode(result.responseText);
if (res.success) {
window.alert('Success');
if (Ext.isFunction(callback)) {callback()};
}
},
failure:function(result,opt){
window.alert('リクエスト失敗。ネットワーク接続を確認してください。');
}
});
};
//パネルの生成
var panel = new Ext.Panel({
fullscreen: true,
styleHtmlContent:true,
dockedItems:[
{
xtype:'toolbar',
dock:'top',
items:[
{
ui:'mask',
iconCls:'action',
handler:function(){
//コールバック関数
var callback = function(){
panel.update('Success!');
};
//Ajax処理実行
ajax(callback);
}
}
]
}
],
html:'Ajax Request Sample'
});
}
});
前回のHello, World + Tbarのサンプルによく似ていますが、今回はxtypeでツールバーを作成しています。
xtypeについてはコチラ
ボタンのコンフィグオプションで
ui:’mask’,
iconCls:’action’
が設定されています。iconClsではボタンに配置する画像をCSSで設定できますが、今回はSencha Touchに予め用意されているactionクラスをそのまま使います。
Sencha Touchのパッケージ内のexamplesのiconsサンプルをみるとどんなアイコンがあるのかが分かります。
Ajax リクエスト処理
Ext JSおよびSencha TouchではExt.Ajaxクラスを使用してAjax処理を行ないます。このクラスはシングルトンですので、Ajax処理を呼びたい箇所でExt.Ajaxのrequestメソッドを呼び出します。パラメーターはURLなので設定はオブジェクトで渡します。
・Ext.Ajax.request
Ext.Ajax.requestの引数に渡しているもの
- url:(String)リクエスト先のURL
- params:(Object) パラメータ
- success:(Function) Ajaxリクエスト成功時のコールバック関数
- failure:(Function) Ajaxリクエスト失敗時のコールバック関数
最も単純なAjaxリクエストへ渡す設定は上の4つのものになります。
paramsに設定されているパラメータをurlの先にPOSTして,正しいレスポンスが返ってきたときにsuccessに設定されているコールバック関数が実行されます。リクエスト自体が失敗した場合(404などが返ってきた場合。)にfailureに設定されているコールバックが実行されます。
サンプルではajaxという関数にAjaxの処理をまとめています。
Ext.Ajax.request()の部分で実際にAjaxを実行します。
ajax関数の中では、リクエスト中に画面全体にマスクを掛ける処理を、行っています。
・ローディングマスク
ローディングマスクを表示
panel.el.mask(
false,
' <div style="margin:50% auto; text-align:center;color:#EEE;"><img src="loader.gif"/> <br />お待ちください...</div>');
Ext.Elementのmaskメソッドでそのエレメントにマスクをかける処理を実行します。Ext JSとSencha Touchでは引数が違うので注意が必要です。
Sencha Touchのマスク処理はスタイルがあんまり良くないので、独自で設定する必要があります。ローディング用の画像もないので適当なものを用意する必要があります。今回はこんなのGifアニメを作って設定しています。
ローディング用Gifアニメ
マスクを外すときは同様にExt.Elementのunmaskメソッドで行ないます。サンプルでは
successのコールバックの中でpanel.elをunmaskを実行しています。
success:function(result,opt){
//マスクを外す
panel.el.unmask();
・
・
・
}
・コールバック処理
success:function(result,opt){
//マスクを外す
panel.el.unmask();
var res = Ext.decode(result.responseText);
if (res.success) {
window.alert('Success');
if (Ext.isFunction(callback)) {callback()};
}
},
failure:function(result,opt){
window.alert('リクエスト失敗。ネットワーク接続を確認してください。');
}
リクエスト成功/失敗時はwindow.alertを使って結果を表示してます。
また今回のサンプルではsuccess時にさらに呼び出し元でコールバックを設定して、パネル内の要素を”Success”に書き換えています。
・レスポンスボディーの取り出し
successのコールバックの第一引数にレスポンスがオブジェクトとして渡されます。
サンプルではresultという名前に設定しています。resultの中のresponseTextにレスポンスのボディーが格納されています。
サンプルのPHPの場合ではJSONの文字列を返しています。レスポンスボディーはそのままではただのテキストです、そのため文字列からJSONに変換する必要があります。
Sencha TouchでもExt JSと同じようにExt.util.JSONクラスを使ってJSONの変換を行います。
今回は文字列からオブジェクトへの変換(JSON.decode)処理を使います。
success:function(result,opt){
//文字列からオブジェクトに変換する
var res = Ext.decode(result.responseText);
//resはオブジェクトとして扱えるようになる。
if (res.success) {
window.alert('Success');
・
・
・
}
}
Ext.decodeはExt.util.JSON.decodeへのエイリアスです。Ext.decodeで呼び出した方が簡素なのでこちらを使っています。
このExt.decodeを使ってレスポンスボディの文字列をJavascriptのオブジェクトとして扱えるように変換します。
変換されたレスポンスボディはオブジェクトとして扱えるので、res.successのようにドットシンタックスで任意のプロパティ値を取得できるようになります。
以上、Ext.Ajax.requestの簡単な使い方です。詳しくはAPIリファレンスをご覧ください。
Sencha Touch API Documentation
http://www.sencha.com/deploy/touch/docs/?class=Ext.Ajax
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
7月のExt JS勉強会（東京）「Sencha Touchのはじめかた 」まとめ
7月の勉強会(東京)のまとめになります。
開発環境
→ 好きなやり方。とりあえずささっと試したいならjsdo.itがおすすめ。コードの共有もできる。デバイスに依存しない部分なら結構使える。
検証機(タッチパネルデバイス)
→ iPhone 3GS以降 or iPad が無難。Mac があるならiPhone シュミレーターが一番安定している。iPhone 3G,Android端末は微妙。
APIリファレンス
→ 発表し忘れ項目。Sencha Touchを学ぶうえで公式のAPIリファレンスはとても重要。Ext JSほど充実していないが、サンプルコードも載っているのですごく参考になります。Sencha Touchのパッケージにも入っていますが、以下のURLで見れます。もちろん英語です。
http://www.sencha.com/deploy/touch/docs/
本家フォーラム
→ Sencha はExt の頃からforumで活発な議論が交わされています。Sencha のメンバーからのリプライも早いので、バグっぽいものを見つけたらとりあえずforum内を見てみると以外とすでに質問があがっていたりします。Sencha Touchのライブラリ自体に怪しい部分がたくさんあるので、困ったら覗いてみると良いかもしれません。
http://www.sencha.com/forum/
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
Sencha Touch 入門:Sencha Touchのはじめかた（Ext JS & Sencha Touch勉強会7月＠東京）のサンプルコード
2010/7/25のExt JS & Sencha Touch勉強会7月＠東京でのsus4 佐竹の担当箇所のSencha Touch入門篇で使うサンプルコードをjsdo.itで公開しました。
明日の勉強会では、PCのブラウザでも動作するサンプルばかりですので、jsdo.it上でも動作を確認できます。
また簡単なサンプルばかりですので、forkしていただいて実際に手を動かしてももらうとより理解が深まると思います。
勉強会では持ち時間的に２,３つしか紹介できないと思います。
勉強会のアジェンダはこちらです。
Sencha Touch 入門: Ext JS & Sencha Touch勉強会7月＠東京(2010/7/25 )のアジェンダ
Sencha Touchのはじめかたサンプルコード
Sencha Hello, World!
Hello, World! – jsdo.it – share JavaScript, HTML5 and CSS
Read the rest of this entry »
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
Sencha Touch 入門: Ext JS & Sencha Touch勉強会7月＠東京(2010/7/25 )のアジェンダ
2010/7/25のExt JS & Sencha Touch勉強会7月＠東京でのsus4 佐竹の担当箇所のSencha Touch入門篇アジェンダです。
時間と場所は下記の通りです。残念ながら既に定員に達しているようです。
当日はUstreamでも配信も予定されているようですので、こちらでご覧ください。
http://www.ustream.tv/channel/extjapan
以下 Ext Japanブログより転載
日時：2010年7月28日（水）19:00～21:00（18:45開場）
募集人数：45名
場所：東京都港区東新橋1-9-1 東京汐留ビルディング9Fソフトバンク株式会社内（今回はいつもと会場が違いますので、ご注意ください。）
参加費：無料
アジェンダ：
Senchaへのブランド変更について（直鳥）
Sencha Touch入門（株式会社sus4 佐竹様）
Sencha TouchとYubizoで作るネイティブアプリ（株式会社アイキューブドシステムズ 佐々木様）
SpreadOfficeとSencha Touch（小堤）
ホワイトクラウド シェアードHaaSのご紹介（ソフトバンクテレコム株式会社 加藤様）
—–
Sencha Touch入門：Sencha Touchのはじめかた 佐竹裕行 – 株式会社sus4
・Sencha TouchでつくるiPhone/iPadアプリ
・Sencha Touchの環境
エディタ等
デバッグコンソール
・Hello, World!
Sencha Touchのアプリを作る。
HTML + JS合わせても30行くらいで
APIリファレンス、デバッグ環境など
・付属サンプルCarouselの解説
以前書いたブログの記事ベースにもう少し詳しく、Sencha Touchアプリの作り方を紹介します。
http://extjs.blog.sus4.co.jp/2010/06/28/sencha-ex-carousel/
—–
時間的にSencha Touchのさわり位しかできないと思いますが、
実際に手を動かしてSencha Touchを作ることと、その際のTipsが紹介できれば良いかなと思います。
APIリファレンスの読み方、フォーラム利用等。
内容はできるだけ簡単にして、ExtJSを知らなくても分かる内容です。
まさに入門という内容で、サンプルもできる限り簡単なものにしました。
Hello,World!に至ってはHTML + JS合わせても30行程度コードを書くだけです。
Sencha Touchの開発の雰囲気がつかめれば良いかなと思っています。
またSencha Touchのパッケージに含まれるexamplesを自力で読めるようになるのが目標です。
事前の準備しておくと良いもの：
・Sencha Touch ライブラリのダウンロード
http://extjs.co.jp/products/touch/
・iPhone、iPad、Androidでバイスの実機 もしくは XCode付属iPhoneシュミレーター
Android,iPhone 3G以下はあまりおすすめできません。
XCodeはダウンロードに数GBかかるので事前にインストールしておくいていただくとスムーズです。
・ExtJS自体を知らない方はこのブログのチュートリアルの以前の記事を読んでおいていただけると良いかと思います。
勉強会ext-onreadyからはじめるextjsのまとめ
sus4 Ext JSブログ内Sencha Touchの記事
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
Sencha Touch入門:Sencha Touch の付属サンプルCarouselを使ってSencha Touchのコツをつかむ
Sencha Touch入門
Sencha Touch に付属するでもCarouselを見ながら、基本的なSencha Touchの使い方を紹介します。
コードは配布されているSencha Touchパッケージの/examples/carousel にあります。
ここではindex.htmlについては,前回の記事をごらんください。
index.jsをお好きなエディタで開きながらご覧下さい。
iPad or iPhoneがあるとなおよいと思います。
Ext JSの基本についてはこちらをご覧下さい：
Ext.onReadyからはじめるExtJSのまとめ
Sencha Touch Examples
Sencha TouchはこれまでのExt JSのコードと違う個所がいくつかあります。
今回はその中でも基本となる、3点を紹介します。
1.Ext.setup()
2.onReadyコンフィグ
3.panelのfullscreenコンフィグ
1.Ext.setup();
これまでのExt JSのアプリではExt.onReady()をアプリの起動ポイントとして使っていることがほとんどでした。
Sencha Touch付属のサンプルではExt.setup()を使って、様々な初期設定を行っています。onReady()もこの
Ext.setup()のなかで設定されています。
APIをみるとsetupで設定できる項目一覧が乗っているので簡単に訳しておきます。
- fullscreen – Boolean - フルスクリーン設定
- tabletStartupScreen – String – iPad用の起動時画像へのパス サイズは768×1004 縦長でないといけない
- phoneStartupScreen – String – iPhoneと iPod touch用起動時画像へのパス 320×460 で縦長でないといけない
- icon -タブレットとスマートフォン両方に使われるアイコン画像へのパス 72×72がよい
- tabletIcon – String – タブレット用アイコン画像へのパス こちらがiconで設定される画像より優先される 72×72がよい.
- phoneIcon – String – スマートフォン用アイコン画像へのパス こちらがiconで設定される画像より優先される 57×57がよい.
- glossOnIcon – Boolean – iPhone, iPad and iPod Touchのアイコンにグロスのエフェクトをつけるかどうか
- statusBarStyle – String – iOS web アプリのステータスバーのスタイルの設定. default, black,black-translucentのどれかを選択。
- preloadImages – Array – プリロードする画像へのパスの配列（詳細は後日調査）
- onReady – Function – DOM構築後に実行される関数。アプリの起動ポイントになることが多い。
- scope – Scope – スコープの設定
画像系の設定が多いですね。
CarouselサンプルのExt.setup()で設定される、他の項目をみるといくつか画像が設定されています。
Sencha TouchのWebアプリをホーム画面に追加してから起動すると,iPadはtabletStartupScreen,
iPhoneはphoneStartUpScreenが起動時の画面として登録されます。
Safariのツールバーで[+]をタップすると以下のようなメニューがでるので、ホームに追加します。
Sencha Touch アプリをホーム画面に追加
iconはホーム画面に設定される際のアイコンになる画像です。（ただし現状ではiPadでは正しく設定されましたが、iPhone4では上手くいきませんでした。もう少し詳しく調べてみます。）
iPhone4だとこうなりました。
ホーム画面に追加されたSencha Touch アプリ
- tabletStartupScreen : タブレット用（iPad）
- phoneStartupScreen : スマートフォン用（iPhone,iPod Touch）
- icon :アイコンとなる画像（iPadでしか正しく設定されない？）
まだAndroidの文字がありませんが、これから対応されていくと思います。
iPhoneでの起動時の画像
またホーム画面から起動すると自動的にURLバーとSafariのツールバーが非表示になります。これだけでぐっとネイティブアプリのような見た目になります。
2.onReadyコンフィグ
次にonReadyで実行される処理を見ていきます。
Carouselサンプルでは上下2つの領域に2つのカルーセルのコンテナが配置されています(carousel1,2)。それぞれのコンテナにはさらに子となる要素を設定して、その要素をスライドさせることができます。
carousel1も2もほぼ同じ内容ですので1のほうだけを紹介します。
// Create a Carousel of Items
var carousel1 = new Ext.Carousel({
defaults: { cls: 'card' },
items: [
{
html: '<h1>Carousel</h1><p>Navigate the two carousels on this page by swiping left/right or clickin g on one side of the circle indicators below.</p>'
}, {
title: 'Tab 2',
html: '2'
}, {
title: 'Tab 3',
html: '3'
}]
});
基本的にはExt JSでpanel等の配下にさらに子となるパネルを入れる作業とおなじです。
TabPanelやCardレイアウトのパネルで設定したように,itemsの中にパネルを設定しています。ここでは単純にHTMLで内容を記述した3枚のパネルを使っています。defaultsでそれぞれのパネルのCSSクラスにcardというセレクタを追加してます。
3.fullscreen設定
このサンプルはほんとに簡単で上で作ったカルーセルコンテナをパネルに配置しているだけです。
ただしこのカルーセルの親となるパネルのコンフィグでfullscreen設定をtrueにする必要があります。
この設定で、Ext JSのViewportのように画面全体にパネルを広げます。
ここではlayoutでvboxを設定しています。これはExt JSのレイアウトと同じですね。
この部分だけをみるとExt JSのコードとほとんど区別が付きません。
これまで培ったExt JSのノウハウをそのままSencha Touchで作るタッチスクリーンのアプリに活かせるのよく分かります。
new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
},
items: [carousel1, carousel2]
});
またデバッグの方法を考える必要があります。モバイルSafariではデバッグメニューを表示できますが不十分です。
FirefoxでSencha Touchアプリを見るとレイアウトがかなり崩れています。
よい方法を見つけられた方は是非教えてください。
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
Sencha Touch をはじめよう 1 (Getting Started with Sencha Touch の邦訳 その１)
Sencha Touch をダウンロードするとGetting Started width Sencha Touchというオライリーの本のタイトルっぽいチュートリアルが付属しています。
当然英語なので勝手に翻訳してみます。
英語としては簡単な文章になっているので、原文でも読みやすいとおもいます。
Ext JSの知識がある人にとっては、内容があまりありません。ExtJSの知識無しでいきなりSencha Touchはじめる人のためのチュートリアルといった感じです。
Sencha Touch をはじめよう (Getting Started with Sencha Touch の邦訳)
これはSencha Touchのはじめ型を解説した文書です。
Sencha Touchを使ってタッチスクリーンを持つデバイスに特化したWebアプリを作る際の基本的なステップを紹介しています。この解説では、今回のSencha Touchのリリースに含まれるサンプルアプリGeoTweetsの詳細な製作ステップも紹介しています。
この解説はSencha Touchを使ってすばやく、タッチスクリーンに対応したデバイス向けのWebアプリを作りたい全てのWebデベロッパーに向けて書かれています。
以下の準備を先に済ませている前提で話を進めます
Sencha Touchのライブラリをダウンロード。
開発用のサーバーの準備
HTML + CSS + JSを使用したWebアプリの開発の知識がある。
それでははじめましょう。
この解説では以下のセクションがあります。
- Sencha Touch の紹介 ：Introduction to Sencha Touch
- Sencha Touch の使い方（基本編）：Using Sencha Touch: Main Steps
- Sencha Toutchの使い方（応用編：GeoTweetsの解説）：Using Sencha Touch: Detailed Steps for Creating the GeoTweets Application
- まとめ：Summary and Further Reading
※訳注：今回の翻訳はSencha Touchの使い方（基本編）までです。
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
Ext JS +JQTouch = Sencha Touch!!
先日の会社名変更の衝撃からまだそんなに日がたっていませんが。早くもSencha.comからSenchaブランドのプロダクト第一弾が公開されました。
ExtJSとJQTouchを組み合わせたようなモバイルWebアプリ開発フレームワークです。
Sencha – Sencha Touch Overview – HTML5 Mobile App Framework.
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
Ext JSはSenchaに
ExtJSはJQTouchとRaphaëlを統合してSenchaというプロダクトになるようです。
会社名もSenchaになり、www.extjs.com も www.sencha.comになっています。
以下Extブログ改めSenchaブログです。
Ext JS + jQTouch + Raphaël = Sencha
なぜSencha(煎茶)なのかは、
Why Sencha?
We’re choosing Sencha as our name because it evokes next-generation software development and it’s easy to remember, spell and pronounce. Sencha — the name of a popular Japanese green tea — is in the tradition of Java, and represents a new level of development. It feels memorable to us. We hope you like it too.The roadmaps for Ext JS, Ext GWT, Designer, Direct etc. don’t change as a result of this. We’re very excited about the new things in Ext JS 4.0 and the rest of the product line. Some of the individual product names might evolve in the future (for example, we’re thinking of renaming Ext Designer to Sencha Designer), but don’t expect any major or immediate changes here. One of the benefits of the name change is also that it separates a product name – Ext JS – from the company name, Sencha.
だそうです。
名前が変わるよ以外は今のところあまり情報がありません。
JQTouchはJQueryベースのCocoa Touch風UIプラグインで、Raphaël ベクター系のJavascriptグラフィックライブラリです。
JQTouchとRaphaëlを取り込んでモバイルや、タッチスクリーンに適したUIを構築できるようになりそうです。
追加情報に期待しましょう。
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
ExtJS入門39 ファイルをアップロードするフォームフィールド
ExtJSの標準のライブラリではファイルアップロード用のフォームフィールドは用意されていません。ファイルのアップロードフィールドを作成するためには、uxのExt.ux.form.FileUploadFieldを使うことが比較的多いです。今回はこのUXを使ってファイルを送信するフォームパネルのサンプルです。
Ext.ux.form.FileUploadField
フォーム関連の過去の記事はこちらからです。
- ExtJS入門 ExtJSのフォームについて（基本編）
- ExtJS入門32 フォームパネルとフィールド(基本編)
- ExtJS入門33 Columnレイアウトのフォー
- ExtJS入門34 ComboBoxの基本
- ExtJS入門35 Tableレイアウトのフォーム
- ExtJS入門37 サーバーサイドで処理したフォームのエラーメッセージを表示するム
- ExtJS入門38 独自のVTypeを定義してフォームを検証する
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
