User Interface Patterns and Nuxeo

6,610 views

Published on

This is a discussion about the User Interface patterns used by Nuxeo. There is additional information on HTML5 and future directions.

see www.data4USA.com for details

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,610
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

User Interface Patterns and Nuxeo

  1. 1. “Nuxeo UI”Art Nicewick April 2012
  2. 2. Objective Introduce Art Conservations users to concepts behind web based technologies and future directions Provide technologist additional information to help formulate the ideas of how to proceed with UI design and selection Bring the functional and technical people to common language platform
  3. 3. In Advance Conservator’s  Sorry it may be too technical, but ask questions. Our goal is a communication. It’s really not that hard. Technologist  Sorry that we are “re-reviewing” old concepts, and presenting in a manner “slightly different”. Feel free to bring up alternate explanations of concepts, and be patient.
  4. 4. Three Worlds of the UI Complex Complex Simple remote Local Dynamic ActionStatic data, Page Dynamic actions and calling remoterefreshed from the within the page itself resources. Sp page server every time like “alerts”, but data refresh not static until page from required, Like server “Autocomplete” More cross Browser issues
  5. 5. Three Worlds of the UI Complex Complex Simple remote Local Dynamic actions Dynamic ActionStatic data, Page Native HTML Simple JavaScript AJAX (JavaScript) within the page itself and calling remoterefreshed from the like “alerts”, but data resources. Sp page server every time HTML / Javascript /Ajax /JQuery generated at server (PHP,JSP,ASP, JSF, FreeMarker..) static until page from refresh not server required, Like Advanced Javascript Libraries (Dojo, Proto,..) “Autocomplete” JQuery (simple and Ajax)
  6. 6. What is HTML<html><Body> <b> = bold<b> Hello </b> <i> = italic<i> world </i><br>And pluto <br> = new line</body></Html>
  7. 7. What is Javascript<html> HTML<body><b> Click Hello </b> <br><input type="button" HTML button value="Hello" onClick="alert(Hello World!);" /></body> Javascript command (Alert)</html>
  8. 8. What is AJAX Asynchronous Javascript over XML Contacts central database for more data every time you type a letter, and only updates the part of the screen that needs to change. Google Auto complete
  9. 9. What is JQuery A library of JavaScript functions, setup to be called via a “Shorthand” structure. Analogous to the idea of Acronyms in English“Why write “Federal Bureau of Investigation” wheneverybody understand that FBI means the same thing …”The English rule for a Acronyms is ALL CAPS FBIThe rule for JQuery is “$” with commend in brackets … $(ShowPage)A javascipt Library, is “kinda” like a glossary of Acronyms (of javascript code)
  10. 10. Note on JavascriptJQuery Some Acronyms become Words and verbs, same with JQuery. The must famous acronym that became a verb, was the English legal term for inappropriate behavior. People were arrested “For Unlawful Carnal Knowledge” *1. In JQuery, the functions also become verbs JQuery “ofcourse” is much more complex than a Acronym, but is only Shorthand for JavaScript. JQuery plugins constructed to work cross browser (and mobile). *1 Actually a false etymology, but a great example
  11. 11. JQuery (Date Picker)<SCRIPT> Look for something with the ID=Datepicker$(function(){ $( "#datepicker" ).datepicker(); }); And put a datepicker there</SCRIPT>Date:<INPUT id=datepickertype=text> Put the date in this text field
  12. 12. Nuxeo UI Framework Java bean based framework Options  Java Server Faces Seam (Nuxeo Template)  Java Server Faces Seam (Custom)  Google web toolkit  Flex  Freemarker  inFusion
  13. 13. Java Server Faces Seam(Nuxeo Template) Tree Hierarchy format Configurable through Nuxeo Studio (or through XML in IDE) XML based configuration Limited UI capabilities Customize for document management
  14. 14. General UI Structure
  15. 15. Extending Nuxeo Studio<?xml version="1.0"?><component name="org.test.querymodel.contribs"> <extension target="org.nuxeo.ecm.core.search.api.client.querymodel.QueryModelService" point="model"> <queryModel name="TEST_QUERY"> <pattern> SELECT * FROM Document WHERE ecm:primaryType = TestDocType AND ecm:mixinType != HiddenInNavigation AND ecm:currentLifeCycleState != deleted </pattern> <sortable value="true" defaultSortColumn="dc:title" defaultSortAscending="true" /> </queryModel></extension></component>
  16. 16. Question Can I add JQuery to Native Nuxeo JSF pages?http://www.srikanthtechnologies.com/blog/java/jquerywithjsf.aspx Maybe?
  17. 17. Creating Custom interface Nuxeo supports custom interfaces for  JSFSeamRichfaces  Google Web Toolkit  Flex  Freemaker There are also extension to support  PHP  Infusion Most custom interfaces use NXSQL and calls Nuxeo services
  18. 18. Access Nuxeo from PHP$client = new PhpAutomationClient(http://localhost:8080/nuxeo/site/automation);$session = $client->getSession(Administrator,Administrator);$answer=$session->newRequest("Document.Query")->set(params, query, "SELECT * FROM Document“ )->sendRequest();$documentsArray = $answer->getDocumentList();$value = sizeof($documentsArray);echo <table>;echo <tr><TH>uid</TH><TH>Path</TH><TH>Type</TH><TH>State</TH><TH>Title</TH><TH>Download as PDF</TH>;for ($test = 0; $test < $value; $test ++){ echo <tr>; echo <td> . current($documentsArray)->getUid() . </td>; echo <td> . current($documentsArray)->getPath() . </td>; echo <td> . current($documentsArray)->getType() . </td>; echo <td> . current($documentsArray)->getState() . </td>; echo <td> . current($documentsArray)->getTitle() . </td>; echo <td><form id="test" action="../tests/B5bis.php" method="post" >; Request for a list of Documents echo <input type="hidden" name="data" value=". current($documentsArray)->getPath(). "/>; From NUXEO echo <input type="submit" value="download"/>; echo </form></td></tr>; next($documentsArray); Looks allot like SQL …}echo </table>; But it’s really NXSQL …
  19. 19. JSFSEAMRichfaces The Nuxeo EP default web UI is based on JSF (a Java EE standard) for the UI component model, and Seam for the navigation and context management. Technologies: Sun JSF 1.2, Facelets, JBoss RichFaces 3.2, JBoss Seam 2.
  20. 20. SEAM Seam is a integrated bundle of Open Source software with Java Server Faces. However, it also does a little more .. Something called CDI (Context and dependency injection )
  21. 21. SEAM (and CDI) Seam implements a Java Standard (JSR-299) called “Context and dependency injections” (or CDI). This is the general concept that the java programs“Call Out” to “Listeners” at key point in the process. If a listener is found, the program does what it says. If the developer whats to change the programs behavior, they only need to add a new routine and then “Wait for the CDI exit to call it”.
  22. 22. CDI in Action (Extension Points)Step 1 Ready to write None, Ok, “Thank you” email I just do it boss, any adviceStep 2 Wait, I see my Okay boss left a Ready to sign note to add his “Thank you” email name boss, any advice After step 2. AddStep 3 my name Ready to complete“ Thank None, Ok, you” email I just do it boss, any adviceStep 4 Ready to Deliver None, Ok, “Thank you” email I just do it boss, any advice
  23. 23. What is RichFaces JSF 1.2 did not support AJAX (e.g. Autocomplete) Richfaces 3.X added AJAX to JSF 1.2 , with a component library (Note: Richfaces supports a tag called JQUERY) JSF 2.0 now does support ajax Richfaces 4.X extends JSF 2.0 with performance features and additional tags Nuxeo 5.5 uses JSF 1.2 and Richfaces 3.2
  24. 24. JSFSEAM Points and Use Case  Key points: Nuxeo EPs JSF interface is modular and easy to customize:  integrated theme manager,  XML configuration for buttons, tabs, actions, etc.  Form and Widget layout engine.  Open source  Standard Spec  No Plug-in Typical use case:  Business application,  Document management back-office.
  25. 25. Cons JSF  It stores lot of state data on client or server thus have a large memory footprint.  It doesnt have a good validation engine.  Creating new widgets is bit complex for new developers.  Since its a specification and many vendors provide different implementation and plugins for it, you have to spend time creating a good package for yourself. “JBoss Seam creates a nice package. Probably its the best that gives you everything for JSF in a single instance.”
  26. 26. Notes Nuxeo is using JQuery with the JSF implementation In particalur, JQueryTools tooltip feaure.http://forum.nuxeo.com/?t=msg&goto=15430&&srch=jquery#msg_15430 Also, there are JSF Jquery implementation like ProtoFaces and standard Jquery, that we may be able to use to extend the current JSF framework while keeping to the Nuxeo baseline.
  27. 27. GWT Client GWT (Google Web Toolkit) allows the Java development of applications that will be deployed under HTML/JavaScript format. Nuxeo has integrated the GWT technology:  in the build environment (via Maven),  with the platform via dedicated REST APIs,  with the extension points model (to allow modular development with GWT as it is available within the rest of Nuxeo EP). Technologies:  Google Web Toolkit 1.5,  JAX-RS to communicate with server.
  28. 28. GWT Points and Use case  Key Points: The GWT technology allows the development of user- friendly and reactive applications with no deployment needed.  From the development side, it is highly productive to be able to code in Java (Java IDE, Type Safety, unit tests) without bothering with classical RIA related problems (JavaScript debug, multi-browsers support, etc.).  Typical use case: GWT allows the development of complex interfaces that are difficult to create rapidly with standard web technologies:  Text and image annotation interface,  Tiling client to display and navigate in large images.
  29. 29. GWT Requires web designers to be Java Programmers Business logic in UI layer Not friendly to SEO Heavy dependance on Jvascript (all javascript) Known for memory leaks Requires ORM
  30. 30. Google Web Toolkit
  31. 31. Design View
  32. 32. Flex client Nuxeo EP provides a Flex/AMF connector allowing an Air/Flex client to connect. Technologies: Air/Flex, AMF remoting integrated via GraniteDS. Key points: The Flex technology can be easily deployed, as the equipment rate in flash VM is quite high. The Flash technology allows rapid development of advanced clients with a rich and user-friendly interface. Typical use case: It would be a small application requiring rich media support and a plain user interface for a large audience. For example, this technology has been used for eLearning applications based on Nuxeo EP.
  33. 33. Flex The UI looks much nicer then JSF UI Flex looks like more simple to develop rather then JSF Compatible between different web browsers Flex 2 SDK and Flex Builder 2 for Education are both free
  34. 34. Flex disadvantage It doesnt has standard specification Adobe is the only provider of Flex It requires plug in installation on the client side , however this may not be disadvantage since Adobe claims that Flash is installed on more then 99% percent of users. If you build a web site which users would need to search in some search engine the search engine would not be able to understand the content of the flash files (search engines can only understand standard html files/pdf files etc) Flex based pages takes a lot of time to get loading compare to JSF pages Flex Builder 2 costs some money
  35. 35. What is Freemarker? Freemarker is a template engine It is used to generate text output Example: HTML, XML, email, SQL, Java code Programmer prepares environment in Java Designer writes template referencing the environment Freemarker produces output
  36. 36. Java ExampleConfiguration config = new Configuration();config.setSharedVariable("TODAY", new Date());Person person = new Person(1234);person.setName("Jon Smith");List phones = new ArrayList(); Java Beanphones.add("333-555-5777");phones.add("899-379-9973"); Person: 1000 Person: 1000person.setPhones(phones);Map env = new HashMap();env.put("PERSON", person);
  37. 37. Template Example • Template references Java Bean • Expressions are usually surrounded by ${} • Support for JavaBean properties, map keys and collection indexes ${PERSON.phones[1]}Template File (person.ftl)<Html><Body> Dear ${PERSON.name},you have successfully registered with account id${PERSON.id} .${TODAY?string.medium}, </body></Html>OutputDear Jon Smith, you have successfully registered with account id 1234.01/01/2013
  38. 38. Loop though Phone NumbersTemplate File (person.ftl)<Html><body> Dear ${PERSON.name},you have successfully registered with account id${PERSON.id} .<#list PERSON.phones as phone>${phone}<#if phone_has_next>, </#if></#list>${TODAY?string.medium}, </body></html>Output FileDear Jon Smith, you have successfully registered with account id 1234.333-555-5777899-379-997301/01/2013
  39. 39. Java Part - Process TemplateTemplate template = config.getTemplate("person.ftl");FileWriter writer = new FileWriter("person.html");template.process(env, writer);writer.close();
  40. 40. FTL – Advanced Features <#macro>  Macro is a repetitive template fragment <#import "v1/macros.ftl“ as lib>  Imports given library into the namespace <#include "*/header.ftl“>  Include is used to merge specified template root.put( "doc", NodeModel.parse(file.xml)));  XML files can be access by name, attribute with @  ${doc.invoice.item.@price}
  41. 41. Freemarker 2 MSWord (or OpenOffice) A common practice when customizing the template is to create a sample HTML document using Microsoft Word, then insert customized template tags and macros in place of the default content. The default template packaged with this software can be used as an example
  42. 42. s/> <w:LsdException Locked="false" Priority="73" SemiHidden="false" UnhideWhenUsed="false" Name="Colorful Grid Accent 1"/> panose-1:2 4 5 3 5 4 6 3 2 4; <w:LsdException Locked="false" Priority="60" SemiHidden="false" UnhideWhenUsed="false" Name="Light Shading Accent 2"/> mso-font-charset:0; > <w:LsdException Locked="false" Priority="61" SemiHidden="false" UnhideWhenUsed="false" Name="Light List Accent 2"/> mso-generic-font-family:roman; HTML to create “Hello World” documents/> <w:LsdException Locked="false" Priority="62" SemiHidden="false" UnhideWhenUsed="false" Name="Light Grid Accent 2"/> mso-font-pitch:variable; <w:LsdException Locked="false" Priority="63" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Shading 1 Accent 2"/>415 0;} mso-font-signature:-536870145 1107305727 0 0aMark/> <w:LsdException Locked="false" Priority="64" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Shading 2 Accent 2"/> @font-face hSp/> <w:LsdException Locked="false" Priority="65" SemiHidden="false" UnhideWhenUsed="false" Name="Medium List 1 Accent 2"/> {font-family:Calibri;edForcedTables/> <w:LsdException Locked="false" Priority="66" SemiHidden="false" UnhideWhenUsed="false" Name="Medium2 4; 2 Accent 2"/> panose-1:2 15 5 2 2 2 4 3 List > <w:LsdException Locked="false" Priority="67" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Grid 1 Accent 2"/> mso-font-charset:0; /> <w:LsdException Locked="false" Priority="68" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Grid 2 Accent 2"/> mso-generic-font-family:swiss; <w:LsdException Locked="false" Priority="69" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Grid 3 Accent 2"/> mso-font-pitch:variable; <w:LsdException Locked="false" Priority="70" SemiHidden="false" UnhideWhenUsed="false" Name="Dark List Accent 2"/> mso-font-signature:-520092929 1073786111 9 0 415 0;} oftInternetExplorer4</w:BrowserLevel> <w:LsdException Locked="false" Priority="71" SemiHidden="false" Style Definitions */ /* UnhideWhenUsed="false" Name="Colorful Shading Accent 2"/> <w:LsdException Locked="false" Priority="72" SemiHidden="false" UnhideWhenUsed="false"div.MsoNormal List Accent 2"/> p.MsoNormal, li.MsoNormal, Name="Colorful mbria Math"/> <w:LsdException Locked="false" Priority="73" SemiHidden="false" UnhideWhenUsed="false" Name="Colorful Grid Accent 2"/> {mso-style-unhide:no; "/> <w:LsdException Locked="false" Priority="60" SemiHidden="false" UnhideWhenUsed="false" Name="Light Shading Accent 3"/> mso-style-qformat:yes;#45;-"/> <w:LsdException Locked="false" Priority="61" SemiHidden="false" UnhideWhenUsed="false" Name="Light List Accent 3"/> mso-style-parent:"";"/> <w:LsdException Locked="false" Priority="62" SemiHidden="false" UnhideWhenUsed="false" Name="Light Grid Accent 3"/> margin-top:0in; <w:LsdException Locked="false" Priority="63" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Shading 1 Accent 3"/> margin-right:0in; <w:LsdException Locked="false" Priority="64" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Shading 2 Accent 3"/> margin-bottom:10.0pt; <w:LsdException Locked="false" Priority="65" SemiHidden="false" UnhideWhenUsed="false" Name="Medium List 1 Accent 3"/> margin-left:0in;Group"/> <w:LsdException Locked="false" Priority="66" SemiHidden="false" UnhideWhenUsed="false" Name="Medium List 2 Accent 3"/> line-height:115%; 440"/> <w:LsdException Locked="false" Priority="67" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Grid 1 Accent 3"/> mso-pagination:widow-orphan; p"/> <w:LsdException Locked="false" Priority="68" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Grid 2 Accent 3"/> font-size:11.0pt;Ovr"/> <w:LsdException Locked="false" Priority="69" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Grid 3 Accent 3"/> font-family:"Calibri","sans-serif";ocument> <w:LsdException Locked="false" Priority="70" SemiHidden="false" UnhideWhenUsed="false" Name="Dark List Accent 3"/> mso-ascii-font-family:Calibri; mso 9]><xml> <w:LsdException Locked="false" Priority="71" SemiHidden="false" UnhideWhenUsed="false" Name="Colorful Shading Accent 3"/> mso-ascii-theme-font:minor-latin;edState="false" DefUnhideWhenUsed="true" <w:LsdException Locked="false" Priority="72" SemiHidden="false" UnhideWhenUsed="false" Name="Colorful List Accent 3"/> mso-fareast-font-family:Calibri; efQFormat="false" DefPriority="99" Locked="false" Priority="73" SemiHidden="false" UnhideWhenUsed="false" Name="Colorful Grid Accent 3"/> <w:LsdException mso-fareast-theme-font:minor-latin; <w:LsdException Locked="false" Priority="60" SemiHidden="false" UnhideWhenUsed="false" Name="Light Shading Accent 4"/> mso-hansi-font-family:Calibri; ="false" Priority="0" SemiHidden="false" UnhideWhenUsed="false" QFormat="true" Name="Normal"/> mso-hansi-theme-font:minor-latin; 4"/> <w:LsdException Locked="false" Priority="61" SemiHidden="false" UnhideWhenUsed="false" Name="Light List Accent ="false" Priority="9" SemiHidden="false" UnhideWhenUsed="false" QFormat="true" Name="heading 1"/> <w:LsdException Locked="false" Priority="62" SemiHidden="false" UnhideWhenUsed="false" Name="Light GridNew Roman"; mso-bidi-font-family:"Times Accent 4"/> ="false" Priority="9" QFormat="true" Name="heading 2"/> <w:LsdException Locked="false" Priority="63" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Shading 1 Accent 4"/> mso-bidi-theme-font:minor-bidi;} ="false" Priority="9" QFormat="true" Name="heading 3"/> <w:LsdException Locked="false" Priority="64" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Shading 2 Accent 4"/> .MsoChpDefault ="false" Priority="9" QFormat="true" Name="heading 4"/> <w:LsdException Locked="false" Priority="65" SemiHidden="false" UnhideWhenUsed="false" Name="Medium List 1 Accent 4"/> {mso-style-type:export-only; ="false" Priority="9" QFormat="true" Name="heading 5"/> <w:LsdException Locked="false" Priority="66" SemiHidden="false" UnhideWhenUsed="false" Name="Medium List 2 Accent 4"/> mso-default-props:yes; ="false" Priority="9" QFormat="true" Name="heading 6"/> <w:LsdException Locked="false" Priority="67" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Grid 1 Accent 4"/> mso-ascii-font-family:Calibri; ="false" Priority="9" QFormat="true" Name="heading 7"/> <w:LsdException Locked="false" Priority="68" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Grid 2 Accent 4"/> mso-ascii-theme-font:minor-latin; ="false" Priority="9" QFormat="true" Name="heading 8"/> <w:LsdException Locked="false" Priority="69" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Grid 3 Accent 4"/> mso-fareast-font-family:Calibri; ="false" Priority="9" QFormat="true" Name="heading 9"/> <w:LsdException Locked="false" Priority="70" SemiHidden="false" UnhideWhenUsed="false" Name="Dark List Accent 4"/> mso-fareast-theme-font:minor-latin; ="false" Priority="39"<w:LsdException Locked="false" Priority="71" SemiHidden="false" UnhideWhenUsed="false" Name="Colorful Shading Accent 4"/> Name="toc 1"/> mso-hansi-font-family:Calibri; ="false" Priority="39"<w:LsdException Locked="false" Priority="72" SemiHidden="false" UnhideWhenUsed="false" Name="Colorful List Accent 4"/> Name="toc 2"/> mso-hansi-theme-font:minor-latin; ="false" Priority="39"<w:LsdException Locked="false" Priority="73" SemiHidden="false" UnhideWhenUsed="false" Name="Colorful Grid Accent 4"/> Name="toc 3"/> mso-bidi-font-family:"Times New Roman"; ="false" Priority="39"<w:LsdException Locked="false" Priority="60" SemiHidden="false" UnhideWhenUsed="false" Name="Light Shading Accent 5"/> Name="toc 4"/> mso-bidi-theme-font:minor-bidi;} ="false" Priority="39"<w:LsdException Locked="false" Priority="61" SemiHidden="false" UnhideWhenUsed="false" Name="Light List Accent 5"/> Name="toc 5"/> .MsoPapDefault ="false" Priority="39"<w:LsdException Locked="false" Priority="62" SemiHidden="false" UnhideWhenUsed="false" Name="Light Grid Accent 5"/> Name="toc 6"/> {mso-style-type:export-only; ="false" Priority="39"<w:LsdException Locked="false" Priority="63" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Shading 1 Accent 5"/> Name="toc 7"/> margin-bottom:10.0pt; ="false" Priority="39"<w:LsdException Locked="false" Priority="64" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Shading 2 Accent 5"/> Name="toc 8"/> line-height:115%;} ="false" Priority="39"<w:LsdException Locked="false" Priority="65" SemiHidden="false" UnhideWhenUsed="false" Name="Medium List 1 Accent 5"/> Name="toc 9"/> @page WordSection1 ="false" Priority="35"<w:LsdException Name="caption"/> QFormat="true" Locked="false" Priority="66" SemiHidden="false" UnhideWhenUsed="false" Name="Medium List 2 Accent 5"/> {size:8.5in 11.0in; ="false" Priority="10"<w:LsdException Locked="false" Priority="67" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Grid 1 Accent 5"/> SemiHidden="false" UnhideWhenUsed="false" QFormat="true" Name="Title"/> margin:1.0in 1.0in 1.0in 1.0in; ="false" Priority="1" Name="Default Paragraph Font"/> <w:LsdException Locked="false" Priority="68" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Grid 2 Accent 5"/> mso-header-margin:.5in; ="false" Priority="11"<w:LsdException Locked="false" Priority="69" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Grid 3 Accent 5"/> SemiHidden="false" UnhideWhenUsed="false" QFormat="true" Name="Subtitle"/> mso-footer-margin:.5in; ="false" Priority="22"<w:LsdException Locked="false" Priority="70" SemiHidden="false" UnhideWhenUsed="false" Name="Dark List Accent 5"/> SemiHidden="false" UnhideWhenUsed="false" QFormat="true" Name="Strong"/> mso-paper-source:0;} ="false" Priority="20"<w:LsdException Locked="false" Priority="71" SemiHidden="false" UnhideWhenUsed="false" Name="Colorful Shading Accent 5"/> SemiHidden="false" UnhideWhenUsed="false" QFormat="true" Name="Emphasis"/> div.WordSection1 ="false" Priority="59"<w:LsdException Locked="false" Priority="72" SemiHidden="false" UnhideWhenUsed="false" Name="Colorful List Accent 5"/> SemiHidden="false" UnhideWhenUsed="false" Name="Table Grid"/> {page:WordSection1;}

×