HTML5 Builder サンプルの歩き方

投稿者:: Chikako Yonezawa

概要: HTML5 Bulder には豊富なサンプルが用意されています

HTML5 Builder のサンプルはデフォルトで

Windows XP:

C:\Documents and Settings\All Users\Shared Documents\HTML5 Builder\5.0\Demos

Windows Vista, Windows 7 または Windows 8:

C:\Users\Public\Documents\HTML5 Builder\5.0\Demos

にインストールされます。


更に以下のようなフォルダが展開され、用途別に分類されています。
このサンプルには HTML5, CSS3, jQuery Mobile, テンプレート等様々なものが含まれており、アプリケーションを開発する際の参考になるでしょう。

  • Ajax
  • BasicAuthentication
  • BlogProject
  • Button
  • CheckBox
  • CheckListBox
  • ComboBox
  • Components
  • CSS3
  • Data Aware
  • DataSnap
  • ECommerceExample
  • Edit
  • Features
  • FlashObject
  • GetStylesFromStyleSheet
  • HTML5
  • I18N
  • Image
  • Internationalization
  • JQueryMobile
  • Languages
  • ListBox
  • MapShape
  • Memo
  • ParentProperties
  • PhoneGap
  • ProgressBar
  • RadioButton
  • RadioGroup
  • Shape
  • SimpleManagement
  • SimpleManagementAndJS
  • StyleSheet
  • Templates
  • Timer
  • TrackBarDemo
  • Upload
  • Web Service
  • ZendFramework

また、このフォルダ内には InterBase用のサンプルデータベース employee.gdb と、サンプル SQLスクリプト(MySQLベース) oscommerce.sql があります。


この記事では、用途別にいくつかサンプルをご紹介します。

HTML5 の Canvas を利用したサンプルについては
  \Demos\HTML5\HTML5.h5bprj
のプロジェクト内の CanvasColorCircles.php を HTML5 Builder で開き、実行してください。

Hide image
Click to see full-sized image

このサンプルでは Canvas 上に 3つの円を描き JavaScript のイベントで指定された色で描画行い、また同様に JavaScript イベントを使用し、描画されたイメージを別途ファイルとして保存します。

Hide image
Click to see full-sized image

CSS3 を利用したサンプルについては
  \Demos\CSS3\CSS3.h5bprj
のプロジェクト内の BorderRadius.php を HTML5 Builder で開き、実行してください。

Hide image


このサンプルでは、CSS3 プロパティエディタを使用し、ボタンの形などを定義しています。
CSS3 プロパティエディタはデザイナ上でコンポーネントを選択し、オブジェクトインスペクタで BorderRadius プロパティ(BoxShadow, Gradient, TextShadow, Transform プロパティ等でも OK)を選択して表示される [...] ボタンをクリックすることで表示されます。

Hide image
Click to see full-sized image

jQuery Mobile を利用したサンプルについては
\Demos\JQueryMobile\basic\Examples.h5bprj
のプロジェクト内の index.php.php を HTML5 Builder で開き、実行してください。

Hide image
Click to see full-sized image

このサンプルでは、各 MButton コンポーネントの Link プロパティを利用して、クリックされたら別の phpファイル内のプログラムを実行するという方法で動作の実装を行っています。

Hide image
Click to see full-sized image

また Quick Start Guide 内にチュートリアル(日本語)がございますので、こちらもご参考にしていただければ幸いです。
 


次からのサーバー応答:: ETNASC04