| 3 | | <h1 id="Cooking high-end eggs">Cooking high-end eggs</h1>[[VisitCounter(TracDoc/AdvancedEggCooking2Ja)]]<br /> <br /> <p><strike>Now you have pretty neat plugin already but let's add final twist and serve some static content like stylesheet and image.</strike><br /> もう、かなりきちんとしたプラグインを作りましたが、最後にひねりを加えて、スタイルシートやイメージのような静的コンテンツを扱えるようにしましょう。<br /> </p><h2 id="Important thing to check">Important thing to check</h2> <p><strike>First step is to ensure that your <em>trac.ini</em> doesn't have <em>htdocs_location</em> set otherwise Trac can't serve static data.</strike><br /> まず、trac.iniのhtdoc_locationにTracが静的データを扱えないような記述が去れていないことを確認してください。<br /> （訳注：なにをいっているのか不明）<br /> </p><h2 id="More directories">More directories</h2> <p><strike>Since we don't have enough directories in our simple plugin let's make few more:</strike><br /> これまで作ったシンプルなプラグインではディレクトリが足りないので、以下のものを作りましょう：<br /> </p><pre class="tmtrac">./helloworld-plugin/helloworld/htdocs/<br />./helloworld-plugin/helloworld/htdocs/css/<br />./helloworld-plugin/helloworld/htdocs/images/<br /></pre> <h2 id="Style is everything">Style is everything</h2> <p><strike>We want to use our own stylesheet to give some color to our fine content. For that we need cascaded stylesheet.</strike><br /> 独自のスタイルシートをつくって、コンテンツに色をつけましょう。そのために、カスケードされた（訳注：？）スタイルシートが必要です。<br /> </p><p><strike>Create <em>helloworld.css</em> in <em>./helloworld-plugin/helloworld/htdocs/css/</em>:</strike><br /> ./helloworld-plugin/helloworlg/htdocs/css/にhelloworlg.cssを作ります：<br /> </p><pre class="tmtrac">#!text/css<br />div.helloworld h1 {<br /> color: red;<br />}<br /></pre> <h2 id="Image tells more than thousand words">Image tells more than thousand words</h2> <p><strike>Images are always nice.</strike><br /> イメージはいいっすね。<br /> </p><p><strike>Put small image named <em>helloworld.jpg</em> in <em>./helloworld-plugin/helloworld/htdocs/images/</em>.</strike><br /> helloworld.jpgという小さなイメージを./helloworld-plugin/helloworld/htdocs/images/に置いてください。<br /> </p><p><strike>Note: Since it's not practical to show jpg contents here you should find one image by yourself somewhere.</strike><br /> 注：ここにはjpgは載せないので、どこかから適当なjpgを自分で探してきてください。<br /> </p><h2 id="Egg grows">Egg grows</h2> <p><strike>Even natural eggs doesn't grow Python eggs does.</strike><br /> Python eggは、何もしなくても育つなんてことはありません。（？）<br /> </p><p><strike>Modify <em>setup.py</em> to include our static data:</strike><br /> 静的データをインクルードするために、setup.pyを修正してください：<br /> </p><pre class="tmtrac">#!python<br />from setuptools import setup<br /><br />PACKAGE = 'TracHelloworld'<br />VERSION = '0.1'<br /><br />setup(name=PACKAGE,<br /> version=VERSION,<br /> packages=['helloworld'],<br /> package_data={'helloworld' : ['htdocs/css/*.css', 'htdocs/images/*.jpg', <br /> 'templates/*.cs' ]} |
| | 3 | <h1 id="Cooking high-end eggs">Cooking high-end eggs</h1>[[VisitCounter(TracDoc/AdvancedEggCooking2Ja)]]<br /> <br /> <p><strike>Now you have pretty neat plugin already but let's add final twist and serve some static content like stylesheet and image.</strike><br /> もう、かなりきちんとしたプラグインを作りましたが、最後にひねりを加えて、スタイルシートやイメージのような静的コンテンツを扱えるようにしましょう。<br /> </p><h2 id="Important thing to check">Important thing to check</h2> <p><strike>First step is to ensure that your <em>trac.ini</em> doesn't have <em>htdocs_location</em> set otherwise Trac can't serve static data.</strike><br /> まず、trac.iniのhtdoc_locationにTracが静的データを扱えないような記述が去れていないことを確認してください。<br /> （訳注：なにをいっているのか不明）<br /> </p><h2 id="More directories">More directories</h2> <p><strike>Since we don't have enough directories in our simple plugin let's make few more:</strike><br /> これまで作ったシンプルなプラグインではディレクトリが足りないので、以下のものを作りましょう：<br /> </p><pre class="tmtrac">./helloworld-plugin/helloworld/htdocs/<br />./helloworld-plugin/helloworld/htdocs/css/<br />./helloworld-plugin/helloworld/htdocs/images/<br /></pre> <h2 id="Style is everything">Style is everything</h2> <p><strike>We want to use our own stylesheet to give some color to our fine content. For that we need cascaded stylesheet.</strike><br /> 独自のスタイルシートをつくって、コンテンツに色をつけましょう。そのために、カスケードされた（訳注：？）スタイルシートが必要です。<br /> </p><p><strike>Create <em>helloworld.css</em> in <em>./helloworld-plugin/helloworld/htdocs/css/</em>:</strike><br /> ./helloworld-plugin/helloworlg/htdocs/css/にhelloworlg.cssを作ります：<br /> </p><pre class="tmtrac">#!text/css<br />div.helloworld h1 {<br /> color: red;<br />}<br /></pre> <h2 id="Image tells more than thousand words">Image tells more than thousand words</h2> <p><strike>Images are always nice.</strike><br /> イメージはいいっすね。<br /> </p><p><strike>Put small image named <em>helloworld.jpg</em> in <em>./helloworld-plugin/helloworld/htdocs/images/</em>.</strike><br /> helloworld.jpgという小さなイメージを./helloworld-plugin/helloworld/htdocs/images/に置いてください。<br /> </p><p><strike>Note: Since it's not practical to show jpg contents here you should find one image by yourself somewhere.</strike><br /> 注：ここにはjpgは載せないので、どこかから適当なjpgを自分で探してきてください。<br /> </p><h2 id="Egg grows">Egg grows</h2> <p><strike>Even natural eggs doesn't grow Python eggs does.</strike><br /> Python eggは、何もしなくても育つなんてことはありません。（？）<br /> </p><p><strike>Modify <em>setup.py</em> to include our static data:</strike><br /> 静的データをインクルードするために、setup.pyを修正してください：<br /> </p><pre class="tmtrac">#!python<br />from setuptools import setup<br /><br />PACKAGE = 'TracHelloworld'<br />VERSION = '0.1'<br /><br />setup(name=PACKAGE,<br /> version=VERSION,<br /> packages=['helloworld'],<br /> package_data={'helloworld' : ['htdocs/css/*.css', 'htdocs/images/*.jpg', <br /> 'templates/*.cs' ]},<br /> entry_points={'trac.plugins': '%s = helloworld' % PACKAGE},<br />)<br /></pre> <h2 id="Tell it to Trac too">Tell it to Trac too</h2> <p><strike>Trac doesn't know where our fine stylesheet and image is located. So you have to tell it to Trac.</strike><br /> やはり、Tracはスタイルシートやイメージがどこに置かれたかを知りません。Tracに教えてあげる必要があります。<br /> </p><p><strike>Add the following code at the tail in file <em>helloworld.py</em> which implements get_htdocs_dir() to tell the static data path information for this plugin with identical prefix 'hw'.</strike><br /> 次のコードをhelloworld.pyの最後に追加してください。このget_htdocs_dir()は、静的データのパス情報に'hw'というプレ フィックス（訳注：hwはhelloworldの略なので、自分でプラグイン作るときはhwにする必要はありません)をつけてプラグインに通知します。<br /> </p><pre class="tmtrac">#!python<br /> def get_htdocs_dirs(self):<br /> """<br /> Return a list of directories with static resources (such as style<br /> sheets, images, etc.)<br /><br /> Each item in the list must be a `(prefix, abspath)` tuple. The<br /> `prefix` part defines the path in the URL that requests to these<br /> resources are prefixed with.<br /> <br /> The `abspath` is the absolute path to the directory containing the<br /> resources on the local file system.<br /> """<br /> from pkg_resources import resource_filename<br /> return [('hw', resource_filename(__name__, 'htdocs'))]<br /></pre> <h2 id="Remember to load stylesheet">Remember to load stylesheet</h2> <p><strike>To make Trac to load our stylesheet you need to modify <em>process_request</em> method starting from line 23 to following:</strike><br /> Tracにスタイルシートを読み込ませるように、process_requestメソッドを修正してください。<br /> </p><pre class="tmtrac">#!python<br /> def process_request(self, req):<br /> add_stylesheet(req, 'hw/css/helloworld.css')<br /> return 'helloworld.cs', None<br /></pre> <p><strike>Note that prefix path 'hw/' specified by get_htdocs_dirs() should be used.</strike><br /> 注：プレフィックスパス 'hw/'はget_htdocs_dirs()のなかで指定したものを使ってください。<br /> </p><p><strike>And also import add_stylesheet() at the beginning of <em>helloworld.py</em>.</strike><br /> そして、helloworld/pyの冒頭で、add_stylesheet()をインポートしてください。<br /> </p><pre class="tmtrac">#!python<br />from trac.web.chrome import INavigationContributor, ITemplateProvider, add_stylesheet<br /></pre> <h2 id="Complete version of code">Complete version of code</h2> <p><strike>The whole of final code is here:</strike><br /> 最終的なコードは以下になります：<br /> </p><pre class="tmtrac">#!python<br /># Helloworld plugin<br /><br />from trac.core import *<br />from trac.web.chrome import INavigationContributor, ITemplateProvider, add_stylesheet<br />from trac.web.main import IRequestHandler<br />from trac.util import escape, Markup<br /><br />class UserbaseModule(Component):<br /> implements(INavigationContributor, IRequestHandler, ITemplateProvider)<br /> <br /> # INavigationContributor methods<br /> def get_active_navigation_item(self, req):<br /> return 'helloworld'<br /> <br /> def get_navigation_items(self, req):<br /> yield 'mainnav', 'helloworld', Markup('<a xhref="%s">Hello</a>',<br /> self.env.href.helloworld())<br /> <br /> # IRequestHandler methods<br /> def match_request(self, req):<br /> return req.path_info == '/helloworld'<br /> <br /> def process_request(self, req):<br /> add_stylesheet(req, 'hw/css/helloworld.css')<br /> return 'helloworld.cs', None<br /> <br /> # ITemplateProvider methods<br /> def get_templates_dirs(self):<br /> """<br /> Return the absolute path of the directory containing the provided<br /> ClearSilver templates.<br /> """<br /> from pkg_resources import resource_filename<br /> return [resource_filename(__name__, 'templates')]<br /> <br /> def get_htdocs_dirs(self):<br /> """<br /> Return a list of directories with static resources (such as style<br /> sheets, images, etc.)<br /><br /> Each item in the list must be a `(prefix, abspath)` tuple. The<br /> `prefix` part defines the path in the URL that requests to these<br /> resources are prefixed with.<br /> <br /> The `abspath` is the absolute path to the directory containing the<br /> resources on the local file system.<br /> """<br /> from pkg_resources import resource_filename<br /> return [('hw', resource_filename(__name__, 'htdocs'))]<br /></pre> <h2 id="Back to images">Back to images</h2> <p><strike>We need to add our image to template to see it.</strike><br /> テンプレートにイメージを追加します。<br /> </p><p><strike>Our new <em>helloworld.cs</em>:</strike><br /> helloworld.csを以下のように変更してください：<br /> </p><pre class="tmtrac">#!text/html<br /><?cs include "header.cs" ?><br /><?cs include "macros.cs" ?><br /><br /><div id="content" class="helloworld"><br /> <h1>Hello world!</h1><br /> <img xsrc="<?cs var:chrome.href ?>/hw/images/helloworld.jpg"><br /></div><br /><br /><?cs include "footer.cs" ?><br /></pre> <h2 id="Compilation and deployment">Compilation and deployment</h2> <p><strike>Now you should be familiar with both, so make an egg and deploy it.</strike><br /> 両方を行ったら、eggを作って設置してください。<br /> </p><p><strike>Click and see... Hello world! with your pretty own image.</strike><br /> あなた自身が用意した画像とともにHello world!が見えたでしょうか。<br /> </p><h2 id="Aftermath">Aftermath</h2> <p><strike>Now you have successfully completed nice simple plugin that uses it's own template and serves some static data.</strike><br /> これで、テンプレートと静的データを使ったシンプルで綺麗なプラグインが出来ましたね。<br /> <br /> </p> |
