HP TouchPadタブレットは、独自のMojo SDK開発環境を使用して作成されたほとんどすべてのwebOSベースのスマートフォンアプリケーション（以下、Mojoアプリケーションと呼びます）との下位互換性を備えた非常に優れたwebOSデバイスです。 唯一の重大な欠点は、Mojoアプリケーションがスマートフォンの通常の解像度320x480ピクセルで実行され、タブレットの追加画面スペースを完全に無視することです。
この記事は、Mojo SDK開発環境で作成された電話アプリケーションを新しいHPタブレットにすばやく適合させるのに役立ちます。
開発者がアプリケーションの作成中に洞察を示し、スケーラビリティの可能性を認識した場合、開発環境を使用してMojoアプリケーションをタブレットに退屈に移植する代わりに
Enyo SDKを使用すると、アプリケーションを数分でフルスクリーンで使いやすいタッチパッドにすることができます。
それでは、始めましょう...
何かをする前に、計画を検討してください。 アプリケーションのすべてのシーンを調べて、スマートフォンのジェスチャの領域で「戻る」ジェスチャの助けを借りてのみ抜け出せるシーンを書き留めます。 TouchPadにはジェスチャ領域がないため、個別のリターンボタンを実装するには、将来このリストが必要になります。
次のステップでは、appinfo.jsonファイルを変更して、タッチパッドがアプリケーションの周囲のフレームを削除し、フルスクリーンモードに切り替えるようにします。 appinfo.jsonファイルに次の行を追加します。
uiRevision: 2
次に、アプリケーションをエミュレーターまたはタブレットにダウンロードし、すべてが期待どおりに機能することを確認します。
画像は大きくなりましたが、ボタンのサイズも変更され（320ではなく1024ピクセルの画面幅に対応するため）、見た目があまり美しくありません。 テキストフィールドとアイテムグループでも同じ問題が発生する可能性があります。 これらの欠点の修正については、少し後で説明します。
タッチパッドの定義
ここで、アプリケーションが電話で実行されているのか、タッチパッドで実行されているのかを判断する必要があります。 webOSにはタブレットが1つしかありませんが、後ほど説明する小さなソフトウェアトリックを使用できます。 ただし、約束された7インチのオパールが出てきたら、タブレット画面サイズの追加定義を実装する必要があります。 しかし、今のところ、これで十分です。そして、アプリケーションをEnyo-tuneする必要があります。
アプリケーションのファイル構造によっては、基本的な機能を含むグローバルJavaScriptファイルを作成している場合があります。 この場合、私たちは彼と協力します。 それ以外の場合、アプリケーションがウィンドウレスの場合、AppAssistant.jsファイルを使用します。アプリケーションがシングルステージの場合、StageAssistant.jsファイルを使用します。 いずれにせよ、それ以降のすべての参照は、「グローバル」とみなされるファイルへの参照になります。
グローバルファイルで、新しい関数を作成します。 アプリケーションのどの部分からでも名前付きオブジェクトにアクセスできるようにすることをお勧めします。開発Metrix統計サービスを使用する場合は、そのようなオブジェクトが既にあります。 それ以外の場合は、次のようなオブジェクトを作成します。
var myApp = {};
このコードが他の関数の外部にあり、別の行に配置されていることを確認して、コードへのアクセスがグローバルになるようにしてください。 それでは、タッチパッドタブレット検出機能の作成に移りましょう。
myApp.isTouchPad = function(){
};
まず、関数を機能させるコードを挿入する必要があります。 MojoフレームワークのDeviceInfoオブジェクトとやり取りします。 ここには複雑なものは何もありません。すべてが非常にシンプルで簡単です。 すべての段階を経て、必要な操作をすべて検討していきます。
if(Mojo.Environment.DeviceInfo.modelNameAscii.indexOf("ouch")>-1) {
return true;
}
このブロックは、デバイスのテキスト名を調べ、その中の文字列「ouch」を探します。 行の「痛い」は、スペースの影響を排除するために大文字と小文字を区別するケースがないように選択され、さらに行自体が短かった。 正規表現はもっと適していますが、著者は書くのが面倒でした。
しかし、プログラムが別の高解像度webOSデバイスまたはエミュレーターで実行されるとどうなりますか？ この場合、最初のチェックがパスしなかった場合、さらに2つのチェックを追加します。 繰り返しになりますが、これは最も理想的な方法ではないかもしれませんが、機能し、最終的には、とにかくあなたのEnyoアプリケーションをやり直す予定ですよね？ :)
if(Mojo.Environment.DeviceInfo.screenWidth==1024){ return true; }
if(Mojo.Environment.DeviceInfo.screenHeight==1024){ return true; }
ここでは、向きに応じて、デバイスの画面の幅と高さを確認します。
最後に、以前のチェックで適切なものが特定されなかった場合、デフォルトの戻り値をfalseに設定します。
return false;
次に、上記のすべてを組み合わせます。
var myApp = {};
myApp.isTouchPad = function(){
if(Mojo.Environment.DeviceInfo.modelNameAscii.indexOf("ouch")>-1) {
return true;
}
if(Mojo.Environment.DeviceInfo.screenWidth==1024){ return true; }
if(Mojo.Environment.DeviceInfo.screenHeight==1024){ return true; }
return false;
};
繰り返しますが、これを行うためのより成功した効率的な方法があるかもしれませんが、これはうまく機能します。
タッチパッド固有の瞬間の処理
最後に、関数を使用する機会があります。 リターンボタンを表示するシーンで、次のコードフラグメントを挿入します。
if(myApp.isTouchPad()){
var menuModel = {
visible: true,
items: [
{ icon: "back", command: "goBack"}
]
};
this.controller.setupWidget(Mojo.Menu.commandMenu,
this.attributes = {
spacerHeight: 0,
menuClass: 'no-fade'
},
menuModel
);
}
ここではCommandMenuウィジェットを使用しますが、同じ成功を収めるには、ViewMenuウィジェット、一般的なアクションボタン、またはその他のウィジェットを使用できます。 このスニペットは、ユーザーが前のシーンに戻ることができるように、戻る矢印付きの小さな丸いボタンを表示するだけです。
シーンのhandleCommand関数のスイッチに挿入したい場合があります
case 'goBack':
this.controller.stageController.popScene();
break;
または、アプリケーションに適用可能な他のコードを使用して、前のシーンに戻ります。
アプリケーションの外観の改善
前述のように、ボタンや同様の要素は幅が広く、見た目があまり美しくありません。 これを簡単に修正する方法を次に示します。 プログラムがTouchPadで実行されていると判断されるシーン内で、ウィジェットに特別なスタイルを追加するこの小さなコードを追加します。
this.controller.get("search-button").addClassName("touchpad");
このコードは、タッチパッドクラスを検索ボタンウィジェットに追加します。 これで、CSSスタイルシートを使用して制御できます。 例：
#search-button.touchpad {
width: 45% !important;
margin: 5px auto !important;
}
この設計により、ボタンが削減され、画面の中央に配置されます。 しかし、アプリケーションに2つの接続されたボタンがある場合はどうでしょうか？ 次に、次のように、それらを隣同士に配置する必要があります。
this.controller.get("save-button").addClassName("touchpad");
this.controller.get("cancel-button").addClassName("touchpad");
そして、あなたのCSSでこれを行います：
#save-button.touchpad {
width: 45% !important;
margin-left: 10px !important;
float: left;
}
#cancel-button.touchpad {
width: 45% !important;
margin-right: 10px !important;
float: right;
}
これで、ボタンが隣り合っています。 特定のアプリケーションに必要なパラメーターを見つけるためにパラメーターをいじる必要がある場合があります（また、コンテンツを期待どおりに作成するための両方の要素も明確にします）。
心配する他のこと
シーンで背景画像を使用している場合は、画面全体を埋める前に必ず繰り返してください。 すべてが非常に広く見えるので、タッチパッド用に別々の画像を使用することをお勧めします。 彼のうなり声のアプリケーションを適応させて、この記事の著者はTouchPadで完璧に見えるようにするために絶対にすべてをしなかった。 主なタスクは、動作中のアプリケーションをすばやく取得することでした。 必要なだけ外観を改善できますが、この時間を費やしてEnyoにアプリケーションを移植することをお勧めします。
そしてそれだけです！ 記事にコメントがある場合は、こちらまたは著者のウェブサイトにコメントをお寄せください。