Changeset 10942
- Timestamp:
- 08/19/08 00:23:28 (5 years ago)
- Files:
-
- plugins/ysfYUIPlugin/trunk/README (modified) (6 diffs)
Legend:
- Unmodified
- Added
- Removed
- Modified
- Copied
- Moved
plugins/ysfYUIPlugin/trunk/README
r10672 r10942 1 = ysfYUIPlugin - symfony + Yahoo! User Interface libraries = 1 ysfYUIPlugin - symfony + Yahoo! User Interface libraries 2 ======================================================== 2 3 3 4 The ysfYUIPlugin provides [http://symfony-project.com symfony] integration with the [http://developer.yahoo.com/yui/ Yahoo! User Interface libraries] is a complete foundation for enterprise web applications. … … 5 6 The Yahoo! User Interface (YUI) Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. 6 7 7 * '''YUI Developer Tools'''8 * *YUI Developer Tools* 8 9 * Logger Control 9 10 * Profiler (client-side, cross-browser profiling) 10 11 * ProfilerViewer Control 11 12 * YUI Test Utility 12 * '''YUI Core'''13 * *YUI Core* 13 14 * YAHOO Global Object (base requirement for all YUI components) 14 15 * DOM Collection (convenience methods for DOM interactions) 15 16 * Event Utility (event normalization and custom events) 16 * '''YUI Library Utilities''': Animation Utility, Browser History Manager, Connection Manager (for XHR/Ajax), Cookie Utility, , DataSource Utility, Drag and Drop Utility, Element Utility, Get Utility (dynamic script/css loading), ImageLoader Utility, JSON Utility, Resize Utility, Selector Utility, The YUI Loader Utility17 * '''YUI Library Controls/Widgets''': AutoComplete, Button, Calendar, Charts, Color Picker, Container (including Module, Overlay, Panel, Tooltip, Dialog, SimpleDialog), DataTable, ImageCropper, Layout Manager, Menu, Rich Text Editor, Slider, TabView, TreeView, Uploader18 * '''YUI Library CSS Tools'''17 * *YUI Library Utilities*: Animation Utility, Browser History Manager, Connection Manager (for XHR/Ajax), Cookie Utility, , DataSource Utility, Drag and Drop Utility, Element Utility, Get Utility (dynamic script/css loading), ImageLoader Utility, JSON Utility, Resize Utility, Selector Utility, The YUI Loader Utility 18 * *YUI Library Controls/Widgets*: AutoComplete, Button, Calendar, Charts, Color Picker, Container (including Module, Overlay, Panel, Tooltip, Dialog, SimpleDialog), DataTable, ImageCropper, Layout Manager, Menu, Rich Text Editor, Slider, TabView, TreeView, Uploader 19 * *YUI Library CSS Tools* 19 20 * CSS Reset (neutralizes browser CSS styles) 20 21 * CSS Base (applies consistent style foundation for common elements) … … 33 34 34 35 35 === Y! UI Helpers === 36 Y! UI Helpers 37 ------------- 36 38 37 39 * yui_link_to_function, yui_link_to_remote … … 47 49 * yui_datatable, yui_accordion, yui_lightbox, yui_collapse, yui_carousel, yui_resizable (in progress) 48 50 49 === Y! UI Widgets === 51 Y! UI Widgets 52 ------------- 50 53 51 54 * ysfYUITextWidget (autocomplete / inline edit options) … … 61 64 * ysfYUISliderWidget 62 65 63 == License == 66 License 67 ------- 64 68 65 69 ysfYUIPlugin code is released under the [http://www.opensource.org/licenses/mit-license.php MIT license] and is free for all uses. All components in the YUI Library 66 70 have been released as open source under a [http://www.opensource.org/licenses/bsd-license.php BSD license] and are free for all uses. See the 67 included '''LICENSE''' files for the complete license. 68 69 == Installation == 71 included *LICENSE* files for the complete license. 72 73 Installation 74 ------------ 70 75 71 76 You can install symfony two ways: 72 77 73 '''1. Install the plugin via the symfony cli''' 74 75 {{{ 76 symfony plugin:install ysfYUIPlugin 77 }}} 78 79 '''2. Install the plugin via subversion''' 78 *1. Install the plugin via the symfony cli* 79 80 symfony plugin:install ysfYUIPlugin 81 82 83 *2. Install the plugin via subversion* 80 84 81 85 This plugin can be downloaded and installed into the plugins directory of your project. 82 86 83 {{{ 84 svn export http://svn.symfony-project.org/plugins/ysfYUIPlugin/trunk ysfYUIPlugin 85 }}} 86 87 88 == Configuration == 87 svn export http://svn.symfony-project.org/plugins/ysfYUIPlugin/trunk ysfYUIPlugin 88 89 90 Configuration 91 ------------- 89 92 90 93 Add YUI helper in settings.yml: 91 {{{ 92 all:93 # Helpers included in all templates by default94 standard_helpers: [Partial, Cache, I18N, Form, YUI]95 }}} 96 97 By default the ysfYUIPlugin changes the default view class to use '''ysfYUIView'''for handling the loading of the Yahoo! User Interface libraries (css/js) and managing generated events:98 {{{ 99 all:100 enabled: on101 view_class: ysfYUI102 is_internal: off103 }}} 104 105 Edit the application '''factories.yml'''and update the logger factory for 'sf_web_debug' to enable the enhanced debug toolbar:106 {{{ 107 logger:108 class: sfAggregateLogger109 param:110 level: debug111 loggers:112 sf_web_debug:113 class: ysfYUIWebDebugLogger114 param:115 condition: %SF_WEB_DEBUG%116 xdebug_logging: true117 web_debug_class: ysfYUIWebDebug118 }}} 94 95 all: 96 # Helpers included in all templates by default 97 standard_helpers: [Partial, Cache, I18N, Form, YUI] 98 99 100 By default the ysfYUIPlugin changes the default view class to use *ysfYUIView* for handling the loading of the Yahoo! User Interface libraries (css/js) and managing generated events: 101 102 all: 103 enabled: on 104 view_class: ysfYUI 105 is_internal: off 106 107 108 Edit the application *factories.yml* and update the logger factory for 'sf_web_debug' to enable the enhanced debug toolbar: 109 110 logger: 111 class: sfAggregateLogger 112 param: 113 level: debug 114 loggers: 115 sf_web_debug: 116 class: ysfYUIWebDebugLogger 117 param: 118 condition: %SF_WEB_DEBUG% 119 xdebug_logging: true 120 web_debug_class: ysfYUIWebDebug 121 119 122 120 123 The ysfYUIPlugin is extremely configurable per environment via the application level yui.yml: 121 {{{ 122 prod:123 suffix: -min124 125 dev:126 suffix: -debug127 128 all:129 130 # Yahoo! User Interface Libraries131 lib_web_dir: /static/ysf/yui132 suffix: -min133 134 # symfony YUI - [forms, debug, admin]135 sf_web_dir: /static/ysf/symfony136 137 # YUI Addons - carousel, domcollapse, yuiaddons [tools, forms, effects], cropper, sweettitles, lightbox138 addons_web_dir: /static/ysf/yui-addons139 assets_web_dir: /static/ysf/assets140 141 # ExtJS Libraries142 ext_web_dir: /static/ysf/ext143 144 allowed:145 cultures: [ en ]146 skins: [ sam ]147 148 default:149 culture: en150 skin: sam151 components: [ reset, fonts, grids, yahoo, dom, event, connection, animation ]152 153 output:154 xhtml_negotation: false155 156 # route management157 routes:158 register: false # let yui handle routes (faster to add to routing.yml and disable here)159 160 # behavior caching161 cache:162 enabled: true # cache behaviors163 ttl: 9600 # cache expiration in seconds164 165 # use ysfYUI loader + ysfYUIView166 loader:167 enabled: true # let sfYUI handl js/css inclusions168 optimize: true # use rollup files to reduce connections169 }}} 170 171 172 == Usage == 173 174 === Basics === 175 176 ==== Loading css/javascript ==== 124 125 prod: 126 suffix: -min 127 128 dev: 129 suffix: -debug 130 131 all: 132 133 # Yahoo! User Interface Libraries 134 lib_web_dir: /static/ysf/yui 135 suffix: -min 136 137 # symfony YUI - [forms, debug, admin] 138 sf_web_dir: /static/ysf/symfony 139 140 # YUI Addons - carousel, domcollapse, yuiaddons [tools, forms, effects], cropper, sweettitles, lightbox 141 addons_web_dir: /static/ysf/yui-addons 142 assets_web_dir: /static/ysf/assets 143 144 # ExtJS Libraries 145 ext_web_dir: /static/ysf/ext 146 147 allowed: 148 cultures: [ en ] 149 skins: [ sam ] 150 151 default: 152 culture: en 153 skin: sam 154 components: [ reset, fonts, grids, yahoo, dom, event, connection, animation ] 155 156 output: 157 xhtml_negotation: false 158 159 # route management 160 routes: 161 register: false # let yui handle routes (faster to add to routing.yml and disable here) 162 163 # behavior caching 164 cache: 165 enabled: true # cache behaviors 166 ttl: 9600 # cache expiration in seconds 167 168 # use ysfYUI loader + ysfYUIView 169 loader: 170 enabled: true # let sfYUI handl js/css inclusions 171 optimize: true # use rollup files to reduce connections 172 173 174 Usage 175 ----- 176 177 Loading css/javascript 178 ---------------------- 179 177 180 Loading YUI Components from am action or view: 178 {{{ 179 <?php ysfYUI::addComponents('reset', 'fonts', 'grids', 'dom', 'event', 'connection', 'animation', 'dragdrop', 'menu', 'tabview'); ?>180 }}} 181 182 <?php ysfYUI::addComponents('reset', 'fonts', 'grids', 'dom', 'event', 'connection', 'animation', 'dragdrop', 'menu', 'tabview'); ?> 183 181 184 182 185 ysfYUI will automatically resolve dependencies and use optimized rollup files: 183 {{{ 184 <?php ysfYUI::addComponent('tabview'); ?> 185 }}} 186 187 ==== Events ==== 186 187 <?php ysfYUI::addComponent('tabview'); ?> 188 189 190 Events 191 ------ 188 192 Add events to dom elements unobtrsuively with php: 189 193 190 194 Equivalent of YAHOO.util.Event.OnDomReady: 191 {{{ 192 ysfYUI::addEvent('document', 'ready', "alert('hello world')"); 193 }}} 195 196 ysfYUI::addEvent('document', 'ready', "alert('hello world')"); 194 197 195 198 Add a click event to a dom element: 196 {{{ 197 ysfYUI::addEvent('domID', 'click', "alert('hello world')");198 }}} 199 200 ysfYUI::addEvent('domID', 'click', "alert('hello world')"); 201 199 202 200 203 The same via helper: 201 {{{ 202 yui_add_event('document', 'ready', "alert('hello world');203 }}} 204 205 yui_add_event('document', 'ready', "alert('hello world'); 206 204 207 205 208 Similar to the sfUJSPlugin, this plugin will modify your existing helpers to add unobtrusive events: 206 {{{ 207 <?php echo link_to('alert via link + onclick', 'content/about', array('onclick' => 'alert("hello world");')); ?>208 }}} 209 210 <?php echo link_to('alert via link + onclick', 'content/about', array('onclick' => 'alert("hello world");')); ?> 211 209 212 210 213 Add an event to link to javascript function: 211 {{{ 212 <?php echo yui_link_to_function('yui_link_to_function', "alert('demo');") ?> 213 }}} 214 215 === Ajax + Buttons === 214 215 <?php echo yui_link_to_function('yui_link_to_function', "alert('demo');") ?> 216 217 218 Ajax + Buttons 219 -------------- 216 220 217 221 Most of the rails inspired scriptaculous javascript helpers have equivalent functionality and syntax with the added benefit of an unobtrusive event driven design. 218 222 219 223 Create an unobtrusive ajax text link: 220 {{{ 221 <?php echo yui_link_to_remote('yui_link_to_remote', array('url' => url_for('ysfYUI/ajaxContent'), 'update' => 'yui-content')) ?>222 }}} 224 225 <?php echo yui_link_to_remote('yui_link_to_remote', array('url' => url_for('ysfYUI/ajaxContent'), 'update' => 'yui-content')) ?> 226 223 227 224 228 Create a yui button and onclick update a dom element with the result: 225 {{{ 226 <?php echo yui_button_to_remote('yui_button_to_remote', array('url' => url_for('ysfYUI/ajaxContent'), 'update' => 'yui-content')) ?>227 }}} 229 230 <?php echo yui_button_to_remote('yui_button_to_remote', array('url' => url_for('ysfYUI/ajaxContent'), 'update' => 'yui-content')) ?> 231 228 232 229 233 230 234 Create yui buttons: 231 {{{ 232 <?php echo yui_button('yui_button'); ?>233 <?php echo yui_button_to('yui_button_to', 'http://yahoo.com/'); ?>234 <?php echo yui_button_to_function('yui_button_to_function', "alert('demo');") ?>235 }}} 235 236 <?php echo yui_button('yui_button'); ?> 237 <?php echo yui_button_to('yui_button_to', 'http://yahoo.com/'); ?> 238 <?php echo yui_button_to_function('yui_button_to_function', "alert('demo');") ?> 239 236 240 237 241 238 242 Ajax submit buttons: 239 {{{ 240 <form action="/ysfYUI/ajaxContent" method="post"> 241 <input type="hidden" name="yui_submit_to_remote" value="" /> 242 <?php echo yui_submit_to_remote('yui_submit_remote_tag', 'yui_submit_remote_tag', array('url' => 'ysfYUI/ajaxContent', 'update' => 'yui-content')) ?> 243 <?php echo yui_submit_image_to_remote('yui_submit_image_to_remote_tag', '/static/ysf/symfony/images/icons/ok48.png', array('url' => 'ysfYUI/ajaxContent', 'update' => 'yui-content')) ?> 244 </form> 245 }}} 243 244 <form action="/ysfYUI/ajaxContent" method="post"> 245 <input type="hidden" name="yui_submit_to_remote" value="" /> 246 <?php echo yui_submit_to_remote('yui_submit_remote_tag', 'yui_submit_remote_tag', array('url' => 'ysfYUI/ajaxContent', 'update' => 'yui-content')) ?> 247 <?php echo yui_submit_image_to_remote('yui_submit_image_to_remote_tag', '/static/ysf/symfony/images/icons/ok48.png', array('url' => 'ysfYUI/ajaxContent', 'update' => 'yui-content')) ?> 248 </form> 246 249 247 250 Periodic background calls: 248 {{{ 249 <?php yui_periodically_call_remote(array('url' => url_for('ysfYUI/ajaxContent?yui_periodically_call_remote=yui_periodically_call_remote'), 'update' => 'yui-content', 'frequency' => 5)); ?> 250 <?php yui_periodically_call_function('function() { alert("yui_periodically_call_function"); }', array('frequency' => 5)); ?> 251 }}} 252 253 254 === Forms === 251 252 <?php yui_periodically_call_remote(array('url' => url_for('ysfYUI/ajaxContent?yui_periodically_call_remote=yui_periodically_call_remote'), 'update' => 'yui-content', 'frequency' => 5)); ?> 253 <?php yui_periodically_call_function('function() { alert("yui_periodically_call_function"); }', array('frequency' => 5)); ?> 254 255 256 257 Forms 258 ----- 255 259 256 260 The demo form class with YUI widgets: 257 {{{ 258 class ysfDemoForm extends ysfYUIForm259 {260 261 public function configure()262 {263 parent::configure();264 265 $this->setDefault('radio', 'maybe');266 267 $this->setWidgets(array(268 'text' => new ysfYUITextWidget(),269 'select' => new ysfYUISelectWidget(array('choices' => array('billing', 'tech support', 'sales'))),270 'autocomplete' => new ysfYUITextWidget(array('datasource' => sfContext::getInstance()->getController()->genUrl('ysfYUI/autocomplete'))),271 'editor' => new ysfYUIEditorWidget(),272 'radio' => new ysfYUIRadioWidget(array('choices' => array('yes' => 'yes', 'no' => 'no', 'maybe' => 'maybe'))),273 'calendar' => new ysfYUICalendarWidget(),274 'checkbox' => new ysfYUICheckboxWidget(array(), array('value' => 'yui')),275 'checkbox2' => new ysfYUICheckboxWidget(array(), array('value' => 'ojay', 'checked' => true)),276 'checkbox3' => new ysfYUICheckboxWidget(array(), array('value' => 'dedchain')),277 'colorpicker' => new ysfYUIColorPickerWidget(),278 'slider' => new ysfYUISliderWidget(),279 'file' => new ysfYUIFileUploadWidget(),280 ));281 282 $this->setValidators(array(283 'text' => new sfValidatorString(array('max_length' => 255, 'required' => false)),284 'editor' => new sfValidatorString(array('max_length' => 255, 'required' => false))285 ));286 287 $this->widgetSchema->setNameFormat('demo[%s]');288 289 $this->errorSchema = new sfValidatorErrorSchema($this->validatorSchema);290 }291 }292 }}} 261 262 class ysfDemoForm extends ysfYUIForm 263 { 264 265 public function configure() 266 { 267 parent::configure(); 268 269 $this->setDefault('radio', 'maybe'); 270 271 $this->setWidgets(array( 272 'text' => new ysfYUITextWidget(), 273 'select' => new ysfYUISelectWidget(array('choices' => array('billing', 'tech support', 'sales'))), 274 'autocomplete' => new ysfYUITextWidget(array('datasource' => sfContext::getInstance()->getController()->genUrl('ysfYUI/autocomplete'))), 275 'editor' => new ysfYUIEditorWidget(), 276 'radio' => new ysfYUIRadioWidget(array('choices' => array('yes' => 'yes', 'no' => 'no', 'maybe' => 'maybe'))), 277 'calendar' => new ysfYUICalendarWidget(), 278 'checkbox' => new ysfYUICheckboxWidget(array(), array('value' => 'yui')), 279 'checkbox2' => new ysfYUICheckboxWidget(array(), array('value' => 'ojay', 'checked' => true)), 280 'checkbox3' => new ysfYUICheckboxWidget(array(), array('value' => 'dedchain')), 281 'colorpicker' => new ysfYUIColorPickerWidget(), 282 'slider' => new ysfYUISliderWidget(), 283 'file' => new ysfYUIFileUploadWidget(), 284 )); 285 286 $this->setValidators(array( 287 'text' => new sfValidatorString(array('max_length' => 255, 'required' => false)), 288 'editor' => new sfValidatorString(array('max_length' => 255, 'required' => false)) 289 )); 290 291 $this->widgetSchema->setNameFormat('demo[%s]'); 292 293 $this->errorSchema = new sfValidatorErrorSchema($this->validatorSchema); 294 } 295 } 296 293 297 294 298 The form action: 295 {{{ 296 /** 297 * Executes demo action 298 */ 299 public function executeDemo($request) 300 { 301 $this->form = new ysfDemoForm(); 302 303 if($request->isMethod('post')) 304 { 305 $this->form->bind($request->getParameter('demo')); 306 if ($this->form->isValid() && $request->isXmlHttpRequest()) 299 300 /** 301 * Executes demo action 302 */ 303 public function executeDemo($request) 307 304 { 308 return $this->renderText(var_export($this->form->getValues(), true)); 305 $this->form = new ysfDemoForm(); 306 307 if($request->isMethod('post')) 308 { 309 $this->form->bind($request->getParameter('demo')); 310 if ($this->form->isValid() && $request->isXmlHttpRequest()) 311 { 312 return $this->renderText(var_export($this->form->getValues(), true)); 313 } 314 } 309 315 } 310 } 311 } 312 }}} 316 313 317 314 318 The form: 315 {{{ 316 <?php echo yui_form_remote_tag(array('url' => 'ysfYUI/ajaxContent', 'update' => 'yui-content')) ?> 317 <table> 318 <?php echo $form; ?> 319 <tr><td colspan="2"><?php echo yui_submit_tag('save'); ?></td></tr> 320 </table> 321 </form> 322 }}} 323 324 325 326 === Containers === 319 320 <?php echo yui_form_remote_tag(array('url' => 'ysfYUI/ajaxContent', 'update' => 'yui-content')) ?> 321 <table> 322 <?php echo $form; ?> 323 <tr><td colspan="2"><?php echo yui_submit_tag('save'); ?></td></tr> 324 </table> 325 </form> 326 327 328 Containers 329 ---------- 327 330 328 331 Tab View: 329 {{{ 330 <?php ysfYUI::addComponent('tabview'); ysfYUI::addEvent('demo', 'ready', "var demoTabs = new YAHOO.widget.TabView('demoTabs');"); ?>331 <div id="demo" class="yui-navset">332 <ul class="yui-nav">333 <li class="selected"><a href="#tab1"><em>Tab 1</em></a></li>334 <li><a href="#tab2"><em>Tab 2</em></a></li>335 </ul>336 <div class="yui-content">337 <div id="tab1">Tab 1 Content</div>338 <div id="tab2">Tab 2 Content</div>339 </div>340 </div>341 }}} 332 333 <?php ysfYUI::addComponent('tabview'); ysfYUI::addEvent('demo', 'ready', "var demoTabs = new YAHOO.widget.TabView('demoTabs');"); ?> 334 <div id="demo" class="yui-navset"> 335 <ul class="yui-nav"> 336 <li class="selected"><a href="#tab1"><em>Tab 1</em></a></li> 337 <li><a href="#tab2"><em>Tab 2</em></a></li> 338 </ul> 339 <div class="yui-content"> 340 <div id="tab1">Tab 1 Content</div> 341 <div id="tab2">Tab 2 Content</div> 342 </div> 343 </div> 344 342 345 343 346 Link to dialog: 344 {{{ 345 <?php echo yui_link_to_dialog('yui_link_to_dialog'); ?> 346 }}} 347 348 <?php echo yui_link_to_dialog('yui_link_to_dialog'); ?> 347 349 348 350 Link to confirm modal dialog: 349 {{{ 350 <?php echo yui_link_to_confirm_dialog('yui_link_to_confirm_dialog'); ?>351 }}} 351 352 <?php echo yui_link_to_confirm_dialog('yui_link_to_confirm_dialog'); ?> 353 352 354 353 355 Create a animated tooltip: 354 {{{ 355 <?php yui_tooltip('yui_tooltip', 'yahoo! tooltip'); ?> 356 <span id="yui_tooltip" title="y! tooltip">yui_tooltip</span> 357 }}} 358 359 360 '''The plugin comes with a demo module and form that show how to use the various integrations.''' This also serves as a tutorial. 361 362 363 == TODO == 356 357 <?php yui_tooltip('yui_tooltip', 'yahoo! tooltip'); ?> 358 <span id="yui_tooltip" title="y! tooltip">yui_tooltip</span> 359 360 *The plugin comes with a demo module and form that show how to use the various integrations.* This also serves as a tutorial. 361 362 363 TODO 364 ---- 364 365 365 366 * propel 1.2 logging for yui debug toolbar … … 385 386 386 387 387 == CHANGELOG == 388 388 CHANGELOG 389 --------- 390