{"type":"doc","content":[{"type":"heading","attrs":{"level":2},"content":[{"text":"Infusion Documentation","type":"text"}]},{"type":"paragraph","content":[{"text":"The process of developing this information, along with the related ","type":"text"},{"text":"mind maps","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/fluid/pages/11624995"}}]},{"text":", have led to the development of a proposed architecture for the Infusion Documentation. The latest version of the proposal can be found at ","type":"text"},{"text":"Documentation Architecture - Round 2","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/fluid/pages/11619908"}}]},{"text":".","type":"text"}]},{"type":"bodiedExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"section","parameters":{"macroParams":{},"macroMetadata":{"schemaVersion":{"value":"1"},"title":"Section"}}},"content":[{"type":"extension","attrs":{"extensionType":"com.atlassian.confluence.migration","extensionKey":"legacy-content","text":"","parameters":{"reason":"A column macro in a rich body macro can't be created or edited in the new editor.","nestedContent":{"type":"doc","content":[{"type":"bodiedExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"column","parameters":{"macroParams":{},"macroMetadata":{"schemaVersion":{"value":"1"},"title":"Column"}}},"content":[{"type":"heading","attrs":{"level":3},"content":[{"text":"Goals","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Introduce visitors to Infusion: What it is, what it offers.","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Also the same goal as the ","type":"text","marks":[{"type":"textColor","attrs":{"color":"#008000"}}]},{"text":"Component Demos","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/fluid/pages/11619901"}},{"type":"textColor","attrs":{"color":"#008000"}}]},{"text":" (jh)","type":"text","marks":[{"type":"textColor","attrs":{"color":"#008000"}}]}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Teach the concepts and practices we use in Infusion.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Guide all audiences in using the Infusion Framework and Components.","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Audiences","type":"text"}]},{"type":"paragraph","content":[{"text":"Web developers with varying backgrounds:","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"HTML and CSS, no JS","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Some JS experience, with knowledge of jQuery or something similar","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Experienced JS developers (including in-house developers)","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Audiences will also have different knowledge of Infusion:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Brand-new to Infusion","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Experienced with using Infusion","type":"text"}]}]}]}]}],"version":1},"cxhtml":"

Goals

Introduce visitors to Infusion: What it is, what it offers.
- Also the same goal as the (jh)
Teach the concepts and practices we use in Infusion.
Guide all audiences in using the Infusion Framework and Components.

Audiences

Web developers with varying backgrounds:

HTML and CSS, no JS
Some JS experience, with knowledge of jQuery or something similar
Experienced JS developers (including in-house developers)

Audiences will also have different knowledge of Infusion:

Brand-new to Infusion
Experienced with using Infusion

"}}},{"type":"extension","attrs":{"extensionType":"com.atlassian.confluence.migration","extensionKey":"legacy-content","text":"","parameters":{"reason":"A column macro in a rich body macro can't be created or edited in the new editor.","nestedContent":{"type":"doc","content":[{"type":"bodiedExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"column","parameters":{"macroParams":{},"macroMetadata":{"schemaVersion":{"value":"1"},"title":"Column"}}},"content":[{"type":"table","attrs":{"layout":"default"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"background":"#D3E3C4","rowspan":1},"content":[{"type":"paragraph","content":[{"text":"On This Page","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"background":"#fff","rowspan":1},"content":[{"type":"extension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"toc","parameters":{"macroParams":{"maxLevel":{"value":"3"},"minLevel":{"value":"3"}},"macroMetadata":{"schemaVersion":{"value":"1"},"title":"Table of Contents"}}}}]}]}]}]}],"version":1},"cxhtml":"

#fff#D3E3C4solidOn This Page#566b30

"}}}]},{"type":"paragraph","content":[{"text":"This appears to be a slight subset of the audience for Component Demos. Audience for Component Demos also includes non technical users. (jh)","type":"text","marks":[{"type":"textColor","attrs":{"color":"#008000"}}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Scenarios","type":"text"}]},{"type":"bodiedExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"toc-zone","parameters":{"macroParams":{"location":{"value":"top"},"class":{"value":"panel floatRight"}},"macroMetadata":{"schemaVersion":{"value":"1"},"title":"Table of Content Zone"}}},"content":[{"type":"heading","attrs":{"level":4},"content":[{"text":"Advanced developer, new to Infusion","type":"text"}]},{"type":"paragraph","content":[{"text":"Name:","type":"text","marks":[{"type":"strong"}]},{"text":" Neal","type":"text"},{"type":"hardBreak"},{"text":" ","type":"text"},{"text":"Background:","type":"text","marks":[{"type":"strong"}]},{"text":" experienced developer, Java background, very good JS. Works on a large dev team. Boss said \"Go check out this Infusion thing. Find out if it's something worth using.\"","type":"text"},{"type":"hardBreak"},{"text":" ","type":"text"},{"text":"Goal:","type":"text","marks":[{"type":"strong"}]},{"text":" Learn about Infusion.","type":"text"}]},{"type":"paragraph","content":[{"text":"Neal finds the main Fluid Project site and clicks \"Learn about Infusion.\" He starts with the demos, trying each one out and looking at the sample code. Impressed with the configurability of the components, he goes back to the \"Learn...\" page and follows links to information about the Framework itself. As he reads about the principles embodied in the Infusion code and the designs and practices used, he becomes more and more impressed. As he reads about the Renderer, he realizes something about its strengths that he didn't quite grasp just looking at the demos. Luckily, there is a link on the page to the demos, so he uses it to quickly go back and try the demos with the new insights in mind. He returns to the Framework documentation and reads about the IoC system. Recognizing the concepts from his work in Java with the Spring framework, he's surprised to see something like this available in a JavaScript framework. He reports back to his boss that Infusion is something that is definitely \"worth using.\"","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Beginner developer, knows Infusion, specific goal","type":"text"}]},{"type":"paragraph","content":[{"text":"Name:","type":"text","marks":[{"type":"strong"}]},{"text":" Jamie","type":"text"},{"type":"hardBreak"},{"text":" ","type":"text"},{"text":"Background:","type":"text","marks":[{"type":"strong"}]},{"text":" Web developer with some Javascript. Has added the Uploader out-of-the-box to his application (cutting and pasting the markup).","type":"text"},{"type":"hardBreak"},{"text":" ","type":"text"},{"text":"Goal:","type":"text","marks":[{"type":"strong"}]},{"text":" Customize the markup for the Uploader interface","type":"text"}]},{"type":"paragraph","content":[{"text":"Jamie has created an HTML template for what he ","type":"text"},{"text":"wants","type":"text","marks":[{"type":"em"}]},{"text":" his application's Uploader interface to look like. He turns to the Uploader API page and looks at the list of selectors described there. He understands what the selectors are for based on their name, but he's not sure how to apply them to his different markup (should a selector go on the

around the

?). Jamie follows a link on the API page to the Uploader Demos page. Here, he finds several different Uploader interfaces with different markup. By looking at where the selectors are on each of these examples, he comes to understand how to use them in his markup.","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Beginner developer, new to Infusion","type":"text"}]},{"type":"paragraph","content":[{"text":"Name:","type":"text","marks":[{"type":"strong"}]},{"text":" Mateo","type":"text"},{"type":"hardBreak"},{"text":" ","type":"text"},{"text":"Background:","type":"text","marks":[{"type":"strong"}]},{"text":" self-taught javascript hacker; very enthusiastic; came across Infusion, thinks it looks cool","type":"text"},{"type":"hardBreak"},{"text":" ","type":"text"},{"text":"Goal:","type":"text","marks":[{"type":"strong"}]},{"text":" Add Inline Edit to site","type":"text"}]},{"type":"paragraph","content":[{"text":"Mateo pokes around the Infusion site, looks at the demos, and thinks the Inline Edit is perfect for an image library application he's putting together. He follows a link on the Inline Edit demo page called \"How to add the Inline Edit to your application.\" ...","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Advanced developer, new to Infusion","type":"text"}]},{"type":"paragraph","content":[{"text":"Name:","type":"text","marks":[{"type":"strong"}]},{"text":" Minerva (Minnie)","type":"text"},{"type":"hardBreak"},{"text":" ","type":"text"},{"text":"Background:","type":"text","marks":[{"type":"strong"}]},{"text":" experienced developer, Java background, very good JS. Works in the IT department of a large private school. Boss said \"Go check out this Infusion thing, see if it has anything that will help with our student roster. Joe said they have some kind of pager\"","type":"text"},{"type":"hardBreak"},{"text":" ","type":"text"},{"text":"Goal:","type":"text","marks":[{"type":"strong"}]},{"text":" Learn about Infusion, add Pager to site","type":"text"}]},{"type":"paragraph","content":[{"text":"Minnie finds the main Fluid Project site and clicks \"Learn about Infusion.\" She reads the marketing-speak and is intrigued. She follows the \"Demos\" link and finds the Pager. After playing with the Pager demos and reading a bit about it on the demo page, she thinks it's worth looking closer. She uses the link on the demo page to get to the Download page and downloads the source distribution. Back on the demo page, she follows a link called \"How to add the Pager to your application.\" ...","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Advanced developer, knows Infusion, advanced goal","type":"text"}]},{"type":"paragraph","content":[{"text":"Name:","type":"text","marks":[{"type":"strong"}]},{"text":" Valeriya","type":"text"},{"type":"hardBreak"},{"text":" ","type":"text"},{"text":"Background:","type":"text","marks":[{"type":"strong"}]},{"text":" Experienced JS developer, has worked with Components and a few Framework functions; has looked at the innards of a few components","type":"text"},{"type":"hardBreak"},{"text":" ","type":"text"},{"text":"Goal:","type":"text","marks":[{"type":"strong"}]},{"text":" Wants to create her own Picture Gallery component using Infusion","type":"text"}]},{"type":"paragraph","content":[{"text":"Valeriya starts creating her Picture Gallery component by sketching out the basic creator function and defaults declaration, as she has observed in the Infusion source code. As she expands the code, she suspects that she'll want to encapsulate a particular piece of functionality as its own component, and have her Picture Gallery component use it. As she tries to implement this, she realizes that she doesn't quite understand how dependencies work, so she scans the main Infusion Documentation page. She sees words like \"components\" and \"framework,\" but nothing that looks like it will help with dependencies. There is a link titled \"How do I ... ?\" Hoping that she might find something relevant, she follows the link. On the \"How do I\" page, she follows a link titled \"How do I declare dependencies?\" The resulting page has an explanation of the 'fluid.demands' function, some examples, and links to background and related information. She decides that she'd better read some of the background before continuing, so she starts with \"About Infusion IoC.\"","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Experienced developer, new to Infusion, basic goal","type":"text"}]},{"type":"paragraph","content":[{"text":"Name:","type":"text","marks":[{"type":"strong"}]},{"text":" Takumi","type":"text"},{"type":"hardBreak"},{"text":" ","type":"text"},{"text":"Background:","type":"text","marks":[{"type":"strong"}]},{"text":" Experienced JS developer, no experience with Infusion","type":"text"},{"type":"hardBreak"},{"text":" ","type":"text"},{"text":"Goal:","type":"text","marks":[{"type":"strong"}]},{"text":" wants to create a Drupal module to add UIO to any Drupal site","type":"text"}]},{"type":"paragraph","content":[{"text":"Takumi is an avid Drupal user and developer. He sees a demo of UIO and thinks it would be a great functionality to add to Drupal, so he decides to create a module for it. He finds the tutorial describing how to add the fat-panel UIO to a site and dives right in. The tutorial references various features of the Framework that Takumi needs to understand in order to build his module, so he starts reading.","type":"text"}]},{"type":"paragraph","content":[{"text":"What does Takumi need to know about?","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"(the following list has not yet been sorted into any order)","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"grades","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"components","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"events and listeners","type":"text"}]}]}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Experienced developer, new to Infusion, advanced goal","type":"text"}]},{"type":"paragraph","content":[{"text":"Name:","type":"text","marks":[{"type":"strong"}]},{"text":" Fadilah","type":"text"},{"type":"hardBreak"},{"text":" ","type":"text"},{"text":"Background:","type":"text","marks":[{"type":"strong"}]},{"text":" Experienced JS developer","type":"text"},{"type":"hardBreak"},{"text":" ","type":"text"},{"text":"Goal:","type":"text","marks":[{"type":"strong"}]},{"text":" wants to implement a Preferences Editor using the Preferences Framework","type":"text"}]},{"type":"paragraph","content":[{"text":"Fadilah has seen a demonstration of UIO and is sold on the idea of personalization. Her web application has various features that she's like users to be able to personalize, so she wants to create her own custom preferences editor.","type":"text"}]},{"type":"paragraph","content":[{"text":"What does Fadilah need to know about?","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"(the following list has not yet been sorted into any order)","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"components","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"grades, dynamic grades, grade merging","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"adjustors, panels, enactors","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"dom binder","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"ioc expressions","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"distribute options","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"renderer, templates, protoTrees","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"static environment","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"models, model transformation","type":"text"}]}]}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Experienced developer, new to Infusion, accessibility goal","type":"text"}]},{"type":"paragraph","content":[{"text":"Name:","type":"text","marks":[{"type":"strong"}]},{"text":" Darren","type":"text"},{"type":"hardBreak"},{"text":" ","type":"text"},{"text":"Background:","type":"text","marks":[{"type":"strong"}]},{"text":" Experienced web developer, no experience with Infusion","type":"text"},{"type":"hardBreak"},{"text":" ","type":"text"},{"text":"Goal:","type":"text","marks":[{"type":"strong"}]},{"text":" Ensure web app is accessible","type":"text"}]},{"type":"paragraph","content":[{"text":"...","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Web designer, new to Infusion, wants better CSS","type":"text"}]},{"type":"paragraph","content":[{"text":"Name:","type":"text","marks":[{"type":"strong"}]},{"text":" Mhari","type":"text"},{"type":"hardBreak"},{"text":" ","type":"text"},{"text":"Background:","type":"text","marks":[{"type":"strong"}]},{"text":" Experienced HTML/CSS user","type":"text"},{"type":"hardBreak"},{"text":" ","type":"text"},{"text":"Goal:","type":"text","marks":[{"type":"strong"}]},{"text":" Wants a better way of using CSS to lay out pages","type":"text"}]},{"type":"paragraph","content":[{"text":"...","type":"text"}]}]}],"version":1}

Documentation Redesign Notes

Infusion Documentation

Scenarios