モバイルアプリのユーザーインターフェイス

JSR 226:SVG +モバイルAJAX



従来のMIDPアプリケーションがlcdui上にどのように構築されているかを見ることができます* SVGおよびJSR 226を使用して再設計できます。両方のアプリケーションのソースコードは、BSDライセンスの下で利用可能です。



SVGとJSR 226を使用すると、開発プロセスを改善し、アプリケーションの魅力を大幅に高め、使いやすさを向上させることができます。



スクリーンキャストを見る







または 読んで。



アプローチを変える



以下は、lcduiの「ローカルビジネス検索」と呼ばれる既存のアプリケーションの方法を説明しています* SVG GUIに再設計されました

ローカルビジネス検索アプリケーションは、クエリ画面、結果画面、マップ画面の3つの画面で構成されています。 セヴリス「ヤフー! ローカル»は、企業に関する情報の検索と配信に使用され、アプリケーションに表示されます。



アプリケーションの基礎となるロジックは変更されず、ユーザーインターフェイスのみが再作成されます。



既存の画面を置き換えて、アニメーションを追加できます。 SVGの機能を使用して、スクロールシートやトランジションなどのアニメーションコンポーネントを作成することにより、使いやすさをさらに向上させることができます。 最後に、UIの改善を続けながら、レイヤーと透明度を追加できます。



すべての変更が行われたわけではありません。レイヤーと透明度は後で使用できるように設定されています。



前後



そして、ここにスクリーンショットがあります。 左側がオリジナル、右側がSVGバージョンです。 ご覧のとおり、変化は印象的です。

元のリクエスト画面 新しい画面

点滅カーソル付き

スクロール

水平マージン

入力
a




s




結果を含む元の画面 新しい画面

アニメーションスクロール付き

およびスケーリング
a




s




新しい画面

結果の説明付き

a
地図付きの元の画面 新しい画面

-視覚的でない

変更
a




s








ただし、画像にはそれらの一部のみが表示され、残りの部分:SVGバージョンには、点滅する入力カーソル、テキスト入力フィールド、フォーカスのある入力フィールド、およびスクロールリストとスケーリングも含まれています。



元の記事は、ソースへのリンクです

JSR 226をサポートする電話

モバイルAjaxプロジェクト



All Articles