lizard-ui

。

トカゲ-UIは、基本的なDjangoのユーザーインターフェースなので、ベースDjangoテンプレートと一部のCSS + JavaScriptの＆NBSPを提供し、私たちは、地理情報のウェブサイトのためNelen＆Schuurmansでそれを設計し（水管理情報で）。
の選択肢、必要条件、仮定の
トカゲ-UIは独断です：それは選択肢と規定して（！良い）テクノロジを作る。
＆NBSP; *含まれるもの：青写真CSSのフレームワーク。私たちは共通のベースを持っているように、これは、CSSスタイルをリセットします。これは、一般的なIEのレイアウトのバグを修正。これはかなり楽しいです基本的なタイポグラフィを提供します。
＆NBSP; *必須：ジャンゴ-staticfiles。より詳細な説明については、（心にトカゲ-UIで書かれた）Reinoutのブログエントリを参照してください。
＆NBSP; *必須：生産でCSS / JavaScriptファイルを結合するためのdjango_compressor。
＆NBSP; *仮定：1画面、スクロールせずに、ブラウザの完全な幅/高さを使用して。私たちの主な目標は、小さなヘッダーとサイドバーと素敵な大きなマップを示している。あなたは、地図をスクロールする必要はありません。その主なコンテンツ領域自体の内部スクロールバーを持っていることは勿論である。
＆NBSP; *仮定：JavaScriptが利用可能です。ねえ、私たちはJavaScriptを必要とするので、マップを見せている。だから我々は自由に検出し、メインコンテンツ領域の幅と高さを設定することで、たとえば、UIの権利を取得するためにJavaScriptを使用しています。
＆NBSP; *含まれるもの：jqueryの。ええ、それはかなり最近は標準です。だから我々はjQueryは、一般的なJavaScriptでそれをやっての代わりに使用することができますjQueryを使用しています。
＆NBSP; *含まれるもの：jqueryuiとjquerytools両方。ビジュアルのグッズ。残り（ドラッグ/ドロップなど）のオーバーレイやタブ、jqueryuiためJquerytools。
＆NBSP; *含まれるもの：マップとしてOpenLayersはではJavaScriptライブラリ。 （トカゲマップ、sooooon発売されるが、私たちの基本的なマップ相互作用JavaScriptとPythonのコードが含まれています）。
外部CSS / JavaScriptのライブラリのカップルとリザード-UI付属しています。
青写真
＆NBSP; MITを修正
jQueryとjqueryui
＆NBSP;デュアルは、MITまたはGPLバージョン2ライセンスの下でライセンス。 MIT、BSD、及びGPLライセンスの下でリリース、Sizzle.jsが含まれています。
Jquerytools
＆NBSP;は著作権やライセンス。あなたが好きなものですか。
OpenLayersは
＆NBSP;クリアBSDライセンス。
Famfamfamのアイコンセット
＆NBSP; CC帰属ライセンス。
ツリービューjQueryプラグイン
＆NBSP; MIT / GPL
のDjangoの設定の
ここでは、使用できるsettings.pyの抜粋です。メディアやスタティックルートディレクトリセットアップはビルドアウトの使用を前提としていますが、あなたはあなた自身のファイルシステムのセットアップにそれを翻訳することができます。
INSTALLED_APPS = [
＆NBSP; 'lizard_ui」、
＆NBSP; 'コンプレッサー」、
＆NBSP; 'staticfiles」、
＆NBSP; 'django.contrib.admin」、
＆NBSP; 'django.contrib.auth'、
＆NBSP; 'django.contrib.contenttypes」、
＆NBSP; 'django.contrib.sessions」、
＆NBSP; 'django.contrib.sites」、
＆NBSP;]
＃注意：以下の設定が必要以上に凝っている、
＃我々はdjango_compressorの圧縮をテストしたい
＃のでメディアのURLとルートとを必要とします。
Trueに設定します＃COMPRESSあなたは時の圧縮をテストしたい場合は、
＃DEBUG ==真。 （デフォルトでは、COMPRESSは反対である
＃のDEBUG）。
COMPRESS =偽
＃のSETTINGS_DIRは、メディアパスとそうはに対して相対的であることを可能にする
＃これは、ファイルを[設定]の代わりにハードコード
＃のC：だけ私コンピュータに。
SETTINGS_DIR = os.path.dirname（os.path.realpath（__ FILE__））
＃BUILDOUT_DIRは、「周囲の」ビルドアウトにアクセスするためのものである
与えるためにBUILDOUT_DIRの/ var /静的ファイルのインスタンスのための＃
＃のすべての収集を配置する適切な場所をDjangoは、staticfiles
＃静的ファイル。
BUILDOUT_DIR = os.path.abspath（は、os.path.join（SETTINGS_DIR、 '..'））
ユーザーがアップロードした保持しているディレクトリへの＃絶対パス
＃メディア。
MEDIA_ROOT =は、os.path.join（BUILDOUT_DIR、「VAR '、'メディア '）
＃ディレクトリへの絶対パスどこジャンゴ-staticfiles」
＃「ビン/ Djangoのbuild_static」の場所は、すべての静的収集
すべてのアプリケーション '/ mediaディレクトリから＃ファイル。
STATIC_ROOT =は、os.path.join（BUILDOUT_DIR、「VAR '、'静的 '）
＃メディアはMEDIA_ROOTから提供扱うURL。作る
パスコンポーネントがある場合、＃を確認してください最後のスラッシュを使用する
＃（他のケースではオプション）。
MEDIA_URL = '/メディア/'
収集されたアプリケーションごと/メディア静的ファイルのための＃のURL
ジャンゴ - staticfilesによって＃。 {{"のようなテンプレートで使用してください
＃のMEDIA_URL}} mypackageに/ my.css」。
STATIC_URL = '/ static_media /'
adminメディアのための＃のURL接頭辞 - CSS、JavaScriptと
＃画像。最後のスラッシュを使用してください。使用方法
ジャンゴ - staticfilesとして＃のSTATIC_URLはうまく管理者を収集
STATIC_ROOT /管理者への＃静的なメディア。
ADMIN_MEDIA_PREFIX = STATIC_URL + '管理/'
＃ストレージエンジンは、圧縮中に使用される
COMPRESS_STORAG​​E = "staticfiles.storage.StaticFileStorage"
＃メディアをリンクされたURLからの読み取りと圧縮されます
＃メディアはに書き込まれる。
COMPRESS_URL = STATIC_URL
媒体から読み出されるリンクされた＃絶対ファイルパス
＃と圧縮されたメディアがに書き込まれます。
COMPRESS_ROOT = STATIC_ROOT
ジャンゴ·staticfilesに使用＃
TEMPLATE_CONTEXT_PROCESSORS =（
＆NBSP;＃デフォルトのアイテム。
＆NBSP; "django.core.context_processors.auth」、
＆NBSP; "django.core.context_processors.debug」、
＆NBSP; "django.core.context_processors.i18n」、
＆NBSP; "django.core.context_processors.media」、
＆NBSP;＃はあなたにできるようにジャンゴ·staticfilesのために追加する必要がある
＆NBSP;あなたのテンプレートで{{STATIC_URL}} myappの/ my.cssを使用するには、＃。
＆NBSP; 'staticfiles.context_processors.static_url」、
＆NBSP;）
そして、適切なApache設定ヒント：
<場所/ static_media />
＆NBSP;＃CSS / JavaScriptの/画像staticfilesはにキャッシュされます
＆NBSP;日の＃ブラウザ。
＆NBSP;はExpiresActiveオン
＆NBSP; ExpiresDefaultディレクティブ「アクセスプラス1日 ​​"

<場所/ static_media / CACHE />
＆NBSP;＃django_compressの生成されたtimestamp'edファイル：
＆NBSP;＃キャッシュ永遠に
＆NBSP;はExpiresActiveオン
＆NBSP; ExpiresDefaultディレクティブ「アクセスプラス10年」

＃静的ファイルは、Apache自体によってホストされている。
＃ユーザーがアップロードしたメディア：MEDIA_URL = '/メディア/'
エイリアス/メディア/ $ {ビルドアウト：ディレクトリ}は、/ var /メディア/
＃のジャンゴ - staticfiles：= '/ static_media /' STATIC_URL
エイリアス/ static_media / $ {ビルドアウト：ディレクトリ}は、/ var /静的/
の使用法の
あなたはトカゲ-UIのURLをマウントすることができますが、それだけで生き例が含まれています。だから、多分あなただけの/ UIの下にデバッグモードでそれをマウントする必要があります。それはあなたが使用できる使用可能なブロックとクラス/ IDを含む、それを使用する方法についての合理的に完全なドキュメントが含まれているように、ハンディ。
基本レイアウトはrealbase.htmlに定義されている。ただしlizard_ui / lizardbase.htmlを拡張して、あなたが望むのブロックをオーバーライドする必要があります。
CSSとJavaScriptを関連ブロックに追加する必要がありますが、「block.super」を呼び出すことを忘れないでください。例：
{％」はlizard_ui / lizardbase.html "％伸び}
{％ブロックのCSS％}
{{block.super}}
<リンクタイプ= "テキスト/ CSS"
＆NBSP; HREF = "{{STATIC_URL}} lizard_map / lizard_map.css」
＆NBSP;メディア= "画面、投影"
＆NBSP; REL = "スタイルシート" />
{％エンドブロックのCSS％}
{％ブロックジャバスクリプト％}
{{block.super}}
<スクリプトタイプ= "テキスト/ javascriptの"
＆NBSP; SRC = "{{STATIC_URL}}のOpenLayers / OpenLayers.js">

<スクリプトタイプ= "テキスト/ javascriptの"
＆NBSP; SRC = "{{STATIC_URL}} lizard_map / lizard_map.js">
{％末端ブロックジャバスクリプト％}
{％ブロック含量％}