Changes between Version 8 and Version 9 of AnotherPluginDevelopmentGuide


Ignore:
Timestamp:
20.07.2012 11:21:40 (9 years ago)
Author:
dgf
Comment:

adapt renderer and style convention

Legend:

Unmodified
Added
Removed
Modified
  • AnotherPluginDevelopmentGuide

    v8 v9  
    6767|| . . . . . bucket.png                     || of your choice, all of them are accessible via HTTP. || 
    6868|| . . . . [#js script/]                    || Client-side !JavaScipt goes here. || 
    69 || . . . . . [#pluginjs plugin.js]          || The JavaScipt plugin "main" file. || 
    70 || . . . . style/                           || Another custom folder to separate the styles. || 
     69|| . . . . . renderer/                      || All client renderer implementations are separated here by directory. || 
     70|| . . . . . . [#canvas canvas_renderers/]  || || 
     71|| . . . . . . [#multi multi_renderers/]    || || 
     72|| . . . . . . [#page page_renderers/]      || || 
     73|| . . . . . . [#simple simple_renderers/]  || || 
     74|| . . . . . [#pluginjs plugin.js]          || The !JavaScipt plugin "main" file. || 
     75|| . . . . [#style style/]                  || CSS stylesheets located here are picked up automatically. || 
    7176|||| . . . . . screen.css                   || 
    7277 
     
    327332 
    328333Enhancing the web client with !JavaScript based implementations is supported by  
    329 the unique plugin.js file. 
    330  
    331 A plugin that loads some type specific renderer and adds a custom command: 
     334the unique {{{plugin.js}}} file. 
     335 
     336A plugin with some custom command callbacks: 
    332337{{{#!js 
    333338dm4c.add_plugin('dm4.example.plugin', function() { 
    334  
    335     // load some renderer and a style sheet 
    336     dm4c.load_field_renderer('/de.deepamehta.dm4-example/script/example_content_field_renderer.js') 
    337     dm4c.load_page_renderer('/de.deepamehta.dm4-example/script/example_content_page_renderer.js') 
    338     dm4c.load_stylesheet('/de.deepamehta.dm4-example/style/screen.css') 
    339339 
    340340    // calls the alternative REST creation method with customized JSON format 
     
    369369 
    370370Type specific renderer can be assigned declarative or programmatically in a migration and 
    371 manually in the web client. 
     371manually by editing the view configuration of a type in the web client. 
    372372 
    373373Declarative renderer assignment: 
     
    382382            type_uri: "dm4.webclient.view_config", 
    383383            composite: { 
    384                 dm4.webclient.field_renderer_uri: "dm4.example.content_field_renderer", 
     384                dm4.webclient.simple_renderer_uri: "dm4.example.content_field_renderer", 
    385385                dm4.webclient.page_renderer_uri: "dm4.example.content_page_renderer" 
    386386            } 
     
    391391 
    392392 
    393 === !FieldRenderer === 
    394  
    395 A simple possibility to enhance the UI is the field renderer. The generic topic renderer 
    396 creates a fresh object for each composite part, so please use the prototype approach. 
     393=== !SimpleRenderer === #simple 
     394 
     395A simple possibility to enhance the UI is the simple renderer. 
    397396 
    398397{{{#!js 
    399 // a simple field renderer that renders an example topic name with an additional CSS class 
    400 dm4c.add_field_renderer("dm4.example.content_field_renderer", { 
    401  
    402     render_field: function(field_model, parent_element) { 
    403         dm4c.render.field_label(field_model, parent_element) 
    404         parent_element.append($("<span>").addClass('example').text(field_model.value)) 
     398// a simple example that renders a topic name with a additional CSS class 
     399dm4c.add_simple_renderer('dm4.example.content_field_renderer', { 
     400 
     401    render_info: function(model, $parent) { 
     402        dm4c.render.field_label(model, $parent) 
     403        $parent.append($("<span>").addClass('example').text(model.value)) 
    405404    }, 
    406405 
    407     render_form_element: function(field_model, parent_element) { 
    408         var $content = dm4c.render.input(field_model) 
    409         parent_element.append($content) 
     406    render_form: function(model, $parent) { 
     407        var $content = dm4c.render.input(model) 
     408        $parent.append($content) 
    410409        return function() { // return input value 
    411410            return $.trim($content.val()) 
     
    416415 
    417416 
    418 === !PageRenderer === 
     417=== !PageRenderer === #page 
    419418 
    420419The page renderer can replace the whole page content. 
     
    443442 
    444443 
    445 == !TopicMapRenderer == 
    446  
    447 '''TBD''' describe additional topic map handling 
     444=== !MultiRenderer === #multi 
     445 
     446'''TBD''' describe and write a multi renderer implementation 
     447 
     448 
     449=== !CanvasRenderer === #canvas 
     450 
     451'''TBD''' describe additional canvas renderer 
     452 
     453 
     454=== Stylesheets === #style 
     455 
     456All Stylesheets in the web resource folder are loaded by default. 
     457 
     458Loading custom CSS files of a vendor plugin or something else: 
     459{{{#!js 
     460dm4c.load_stylesheet('/de.deepamehta.dm4-example/vendor/library/css/screen.css') 
     461}}} 
     462 
    448463 
    449464= Java = #java