Microsoft’s Ribbon Strategy MFCMFCWRFWRFWPFWPF Target: Managed Target: Managed Target: MFC Native...
-
Upload
tamsyn-murphy -
Category
Documents
-
view
229 -
download
2
Transcript of Microsoft’s Ribbon Strategy MFCMFCWRFWRFWPFWPF Target: Managed Target: Managed Target: MFC Native...
![Page 1: Microsoft’s Ribbon Strategy MFCMFCWRFWRFWPFWPF Target: Managed Target: Managed Target: MFC Native Target: MFC Native Target: Native 1 Target: Native 1.](https://reader036.fdocuments.net/reader036/viewer/2022062314/56649f145503460f94c282e7/html5/thumbnails/1.jpg)
Windows Ribbon:Technical Deep Dive
Ryan DemopoulosProgram ManagerMicrosoft Corporation
CL18
![Page 2: Microsoft’s Ribbon Strategy MFCMFCWRFWRFWPFWPF Target: Managed Target: Managed Target: MFC Native Target: MFC Native Target: Native 1 Target: Native 1.](https://reader036.fdocuments.net/reader036/viewer/2022062314/56649f145503460f94c282e7/html5/thumbnails/2.jpg)
Ribbon LandscapeThree ways to adopt a ribbon
Microsoft’s Ribbon Strategy
MFC WRFWPF
Target:Managed
Target:MFC Native
Target:Native1
needs .NET 3.5
WinXP or newer
Vista or newer
Office 2007 & Windows look
Office 2007 & Windows look
Windows look
•CodePlex now•New version in 2010
•Available now in Visual Studio 2008 SP1
•Included w/Win7•Vista with Platform Update
Today’s talk:Windows Ribbon
framework
1Managed wrappers for Windows Ribbon framework available with PreviewRibbon tool
http://code.msdn.microsoft.com/PreviewRibbon
![Page 3: Microsoft’s Ribbon Strategy MFCMFCWRFWRFWPFWPF Target: Managed Target: Managed Target: MFC Native Target: MFC Native Target: Native 1 Target: Native 1.](https://reader036.fdocuments.net/reader036/viewer/2022062314/56649f145503460f94c282e7/html5/thumbnails/3.jpg)
Windows Ribbon Technical Deep DiveKey takeaways..> Awareness of how to tackle ribbon
design> Examples from Movie Maker, both good &
bad
> How to implement some controls> Dive into: Gallery, Contextual
TabGroup, Application Modes
> Ultimate goal: You feel equipped & energized to build great ribbons with the Windows Ribbon framework!
![Page 4: Microsoft’s Ribbon Strategy MFCMFCWRFWRFWPFWPF Target: Managed Target: Managed Target: MFC Native Target: MFC Native Target: Native 1 Target: Native 1.](https://reader036.fdocuments.net/reader036/viewer/2022062314/56649f145503460f94c282e7/html5/thumbnails/4.jpg)
Designing a RibbonPrepare your mind!
> Shift your thinking from “features” to “scenarios”> Resist the urge; don’t just map menus
tabs
![Page 5: Microsoft’s Ribbon Strategy MFCMFCWRFWRFWPFWPF Target: Managed Target: Managed Target: MFC Native Target: MFC Native Target: Native 1 Target: Native 1.](https://reader036.fdocuments.net/reader036/viewer/2022062314/56649f145503460f94c282e7/html5/thumbnails/5.jpg)
Designing a RibbonWhere Do I Start?
> General steps taken by our product teams:> Step 1: List all commands in your
application> Step 2: Categorize commands by scenario> Step 3: Scenarios Ribbon, Canvas, App
Menu> Step 4: Form into tabs, groups, & controls
![Page 6: Microsoft’s Ribbon Strategy MFCMFCWRFWRFWPFWPF Target: Managed Target: Managed Target: MFC Native Target: MFC Native Target: Native 1 Target: Native 1.](https://reader036.fdocuments.net/reader036/viewer/2022062314/56649f145503460f94c282e7/html5/thumbnails/6.jpg)
Example: Improve FontControl sampleFocus on design & implementation> Available in Windows SDK, or here:
http://msdn.microsoft.com/en-us/library/dd742703(VS.85).aspx
![Page 7: Microsoft’s Ribbon Strategy MFCMFCWRFWRFWPFWPF Target: Managed Target: Managed Target: MFC Native Target: MFC Native Target: Native 1 Target: Native 1.](https://reader036.fdocuments.net/reader036/viewer/2022062314/56649f145503460f94c282e7/html5/thumbnails/7.jpg)
Example: Improve FontControl sampleFocus on design & implementation> Available in Windows SDK, or here:
http://msdn.microsoft.com/en-us/library/dd742703(VS.85).aspx
> Imagine that we want to turn the sample into something that is more useful> Walk it through the four design steps> Write the necessary ribbon UI
markup/code
![Page 8: Microsoft’s Ribbon Strategy MFCMFCWRFWRFWPFWPF Target: Managed Target: Managed Target: MFC Native Target: MFC Native Target: Native 1 Target: Native 1.](https://reader036.fdocuments.net/reader036/viewer/2022062314/56649f145503460f94c282e7/html5/thumbnails/8.jpg)
Step 1: List All Commands In Your App FontControl> Existing FontControl
commands> Font face> Font size> Inc. font size> Dec. font size> Bold> Italics> Underline> Strikethrough> Subscript> Superscript> Text highlight> Text color> Exit
> New FontControl commands> Uppercase selection> Lowercase selection> Print> Print Preview> Close Print Preview> Pick text style> Add text style
![Page 9: Microsoft’s Ribbon Strategy MFCMFCWRFWRFWPFWPF Target: Managed Target: Managed Target: MFC Native Target: MFC Native Target: Native 1 Target: Native 1.](https://reader036.fdocuments.net/reader036/viewer/2022062314/56649f145503460f94c282e7/html5/thumbnails/9.jpg)
Step 2: Categorize Commands By ScenarioFontControl> New FontControl commands
> Uppercase selection> Lowercase selection> Print> Print Preview> Close Print Preview> Pick text style> Add text style
Transform Text
UppercaseLowercase
PublishingPrintPrint PreviewClose Print Preview
Styling TextPick text styleAdd text style
![Page 10: Microsoft’s Ribbon Strategy MFCMFCWRFWRFWPFWPF Target: Managed Target: Managed Target: MFC Native Target: MFC Native Target: Native 1 Target: Native 1.](https://reader036.fdocuments.net/reader036/viewer/2022062314/56649f145503460f94c282e7/html5/thumbnails/10.jpg)
Styling TextPick text styleAdd text style
Step 2: Categorize Commands By ScenarioFontControl
ExitingExit
> Existing FontControl commands
> Font face> Font size> Inc. font size> Dec. font size> Bold> Italics> Underline> Strikethrough> Subscript> Superscript> Text highlight> Text color> Exit
Font commands(Bold, Dec. font size, Font face, Font size, Inc. font size, Italics, Strikethrough, Subscript, Superscript, Text color, Text highlight, Underline)
Transform Text
UppercaseLowercase
PublishingPrintPrint PreviewClose Print Preview
![Page 11: Microsoft’s Ribbon Strategy MFCMFCWRFWRFWPFWPF Target: Managed Target: Managed Target: MFC Native Target: MFC Native Target: Native 1 Target: Native 1.](https://reader036.fdocuments.net/reader036/viewer/2022062314/56649f145503460f94c282e7/html5/thumbnails/11.jpg)
> “Workspace”-related scenarios> Central place for users to find commands
Step 3: Scenarios Ribbon, Canvas, App MenuWhere do your commands fit best?
Ribbon
![Page 12: Microsoft’s Ribbon Strategy MFCMFCWRFWRFWPFWPF Target: Managed Target: Managed Target: MFC Native Target: MFC Native Target: Native 1 Target: Native 1.](https://reader036.fdocuments.net/reader036/viewer/2022062314/56649f145503460f94c282e7/html5/thumbnails/12.jpg)
> Quickly-performed actions> Maintaining commanding conventions> “Is this command really needed on the
canvas?”
Step 3: Scenarios Ribbon, Canvas, App Menu Where do your commands fit best?
Canvas
![Page 13: Microsoft’s Ribbon Strategy MFCMFCWRFWRFWPFWPF Target: Managed Target: Managed Target: MFC Native Target: MFC Native Target: Native 1 Target: Native 1.](https://reader036.fdocuments.net/reader036/viewer/2022062314/56649f145503460f94c282e7/html5/thumbnails/13.jpg)
Step 3: Scenarios Ribbon, Canvas, App Menu Where do your commands fit best?
> Similar to classic File menu> “Meta-workspace” scenarios> Preferences & application settings
Application Menu
![Page 14: Microsoft’s Ribbon Strategy MFCMFCWRFWRFWPFWPF Target: Managed Target: Managed Target: MFC Native Target: MFC Native Target: Native 1 Target: Native 1.](https://reader036.fdocuments.net/reader036/viewer/2022062314/56649f145503460f94c282e7/html5/thumbnails/14.jpg)
Step 3: Scenarios Ribbon, Canvas, App Menu FontControl
Application Menu
ExitingExit
Transform Text
UppercaseLowercase
PublishingPrintPrint PreviewClose Print Preview
Styling TextPick text styleAdd text styleFont commands(Bold, Dec. font size, Font face, Font size, Inc. font size, Italics, Strikethrough, Subscript, Superscript, Text color, Text highlight, Underline)
Ribbon
Canvas
![Page 15: Microsoft’s Ribbon Strategy MFCMFCWRFWRFWPFWPF Target: Managed Target: Managed Target: MFC Native Target: MFC Native Target: Native 1 Target: Native 1.](https://reader036.fdocuments.net/reader036/viewer/2022062314/56649f145503460f94c282e7/html5/thumbnails/15.jpg)
Step 4: Create Tabs, Groups, & ControlsNow the fun begins!> Recap..
> Step 1: we identified our commands> Step 2: we sorted them into user
scenarios> Step 3: we mapped scenarios to UI areas
> ..now, it’s time to create the UI elements!
![Page 16: Microsoft’s Ribbon Strategy MFCMFCWRFWRFWPFWPF Target: Managed Target: Managed Target: MFC Native Target: MFC Native Target: Native 1 Target: Native 1.](https://reader036.fdocuments.net/reader036/viewer/2022062314/56649f145503460f94c282e7/html5/thumbnails/16.jpg)
Step 4: Create Tabs, Groups, & ControlsSome tips..> Be mindful of future scalability
> Don’t stuff your tabs
![Page 17: Microsoft’s Ribbon Strategy MFCMFCWRFWRFWPFWPF Target: Managed Target: Managed Target: MFC Native Target: MFC Native Target: Native 1 Target: Native 1.](https://reader036.fdocuments.net/reader036/viewer/2022062314/56649f145503460f94c282e7/html5/thumbnails/17.jpg)
Step 4: Create Tabs, Groups, & ControlsSome tips..> Be mindful of future scalability
> Don’t stuff your tabs> On large tabs, users focus on “left-
center”
![Page 18: Microsoft’s Ribbon Strategy MFCMFCWRFWRFWPFWPF Target: Managed Target: Managed Target: MFC Native Target: MFC Native Target: Native 1 Target: Native 1.](https://reader036.fdocuments.net/reader036/viewer/2022062314/56649f145503460f94c282e7/html5/thumbnails/18.jpg)
Step 4: Create Tabs, Groups, & ControlsSome tips..> Be mindful of future scalability
> Don’t stuff your tabs> On large tabs, users focus on “left-
center”> Home Tab: most important commands
![Page 19: Microsoft’s Ribbon Strategy MFCMFCWRFWRFWPFWPF Target: Managed Target: Managed Target: MFC Native Target: MFC Native Target: Native 1 Target: Native 1.](https://reader036.fdocuments.net/reader036/viewer/2022062314/56649f145503460f94c282e7/html5/thumbnails/19.jpg)
Step 4: Create Tabs, Groups, & ControlsSome tips..> Be mindful of future scalability
> Don’t stuff your tabs> On large tabs, users focus on “left-
center”> Home Tab: most important commands
Usability Trumps All
![Page 20: Microsoft’s Ribbon Strategy MFCMFCWRFWRFWPFWPF Target: Managed Target: Managed Target: MFC Native Target: MFC Native Target: Native 1 Target: Native 1.](https://reader036.fdocuments.net/reader036/viewer/2022062314/56649f145503460f94c282e7/html5/thumbnails/20.jpg)
Step 4: Create Tabs, Groups, & Controls Commands for “Styling Text” scenario
> Target:Ribbon (& Canvas)
> Users want to visualize how styling will affect their text
Styling Text
Pick text styleAdd text style
Font commands(Font face, Bold, Text color, Strikethrough, etc..)
![Page 21: Microsoft’s Ribbon Strategy MFCMFCWRFWRFWPFWPF Target: Managed Target: Managed Target: MFC Native Target: MFC Native Target: Native 1 Target: Native 1.](https://reader036.fdocuments.net/reader036/viewer/2022062314/56649f145503460f94c282e7/html5/thumbnails/21.jpg)
Gallery Control
> A menu for exposing visual commands> Live Preview> Arbitrary item image sizes
> Dynamic population of items
InRibbonSplitButtonDropDown
![Page 22: Microsoft’s Ribbon Strategy MFCMFCWRFWRFWPFWPF Target: Managed Target: Managed Target: MFC Native Target: MFC Native Target: Native 1 Target: Native 1.](https://reader036.fdocuments.net/reader036/viewer/2022062314/56649f145503460f94c282e7/html5/thumbnails/22.jpg)
Gallery Control
> A menu for exposing visual commands> Live Preview> Arbitrary item image sizes
> Dynamic population of items> Command Space
Command Space
![Page 23: Microsoft’s Ribbon Strategy MFCMFCWRFWRFWPFWPF Target: Managed Target: Managed Target: MFC Native Target: MFC Native Target: Native 1 Target: Native 1.](https://reader036.fdocuments.net/reader036/viewer/2022062314/56649f145503460f94c282e7/html5/thumbnails/23.jpg)
Gallery Control
> Suggestion: use InRibbonGalleries!> Best visual indicator of what the gallery
can do> Reduces the number of clicks to get to
items> Fills the ribbon in an adaptable way
![Page 24: Microsoft’s Ribbon Strategy MFCMFCWRFWRFWPFWPF Target: Managed Target: Managed Target: MFC Native Target: MFC Native Target: Native 1 Target: Native 1.](https://reader036.fdocuments.net/reader036/viewer/2022062314/56649f145503460f94c282e7/html5/thumbnails/24.jpg)
FontControlStyle Gallery
demo Markup: <InRibbonGallery>Code: IUICollection of
IUISimplePropertySet items
![Page 25: Microsoft’s Ribbon Strategy MFCMFCWRFWRFWPFWPF Target: Managed Target: Managed Target: MFC Native Target: MFC Native Target: Native 1 Target: Native 1.](https://reader036.fdocuments.net/reader036/viewer/2022062314/56649f145503460f94c282e7/html5/thumbnails/25.jpg)
Step 4: Create Tabs, Groups, & Controls Commands for “Exiting” scenario
> Target:Application Menu
ExitingExit
![Page 26: Microsoft’s Ribbon Strategy MFCMFCWRFWRFWPFWPF Target: Managed Target: Managed Target: MFC Native Target: MFC Native Target: Native 1 Target: Native 1.](https://reader036.fdocuments.net/reader036/viewer/2022062314/56649f145503460f94c282e7/html5/thumbnails/26.jpg)
Step 4: Create Tabs, Groups, & Controls Commands for “Transform” scenario
> Target:Ribbon
> Not commonly executed..
Transform Text
UppercaseLowercase
![Page 27: Microsoft’s Ribbon Strategy MFCMFCWRFWRFWPFWPF Target: Managed Target: Managed Target: MFC Native Target: MFC Native Target: Native 1 Target: Native 1.](https://reader036.fdocuments.net/reader036/viewer/2022062314/56649f145503460f94c282e7/html5/thumbnails/27.jpg)
Step 4: Create Tabs, Groups, & Controls Commands for “Transform” scenario
> Target:Ribbon
> Greyed out when text is not selected
Transform Text
UppercaseLowercase
![Page 28: Microsoft’s Ribbon Strategy MFCMFCWRFWRFWPFWPF Target: Managed Target: Managed Target: MFC Native Target: MFC Native Target: Native 1 Target: Native 1.](https://reader036.fdocuments.net/reader036/viewer/2022062314/56649f145503460f94c282e7/html5/thumbnails/28.jpg)
Step 4: Create Tabs, Groups, & Controls Commands for “Transform” scenario
> Target:Ribbon
> App fires Contextual TabGroup when needed
Transform Text
UppercaseLowercase
![Page 29: Microsoft’s Ribbon Strategy MFCMFCWRFWRFWPFWPF Target: Managed Target: Managed Target: MFC Native Target: MFC Native Target: Native 1 Target: Native 1.](https://reader036.fdocuments.net/reader036/viewer/2022062314/56649f145503460f94c282e7/html5/thumbnails/29.jpg)
FontControlContextual TabGroups
demo Markup: <TabGroup>Code: Respond to
UI_PKEY_ContextAvailable
![Page 30: Microsoft’s Ribbon Strategy MFCMFCWRFWRFWPFWPF Target: Managed Target: Managed Target: MFC Native Target: MFC Native Target: Native 1 Target: Native 1.](https://reader036.fdocuments.net/reader036/viewer/2022062314/56649f145503460f94c282e7/html5/thumbnails/30.jpg)
Step 4: Create Tabs, Groups, & Controls Commands for “Publishing” scenario
> Target:Application Menu
PublishingPrintPrint PreviewClose Print Preview
![Page 31: Microsoft’s Ribbon Strategy MFCMFCWRFWRFWPFWPF Target: Managed Target: Managed Target: MFC Native Target: MFC Native Target: Native 1 Target: Native 1.](https://reader036.fdocuments.net/reader036/viewer/2022062314/56649f145503460f94c282e7/html5/thumbnails/31.jpg)
Step 4: Create Tabs, Groups, & Controls Commands for “Publishing” scenario
> Target:Application Menu/Ribbon
PublishingPrintPrint PreviewClose Print Preview
![Page 32: Microsoft’s Ribbon Strategy MFCMFCWRFWRFWPFWPF Target: Managed Target: Managed Target: MFC Native Target: MFC Native Target: Native 1 Target: Native 1.](https://reader036.fdocuments.net/reader036/viewer/2022062314/56649f145503460f94c282e7/html5/thumbnails/32.jpg)
Application Modes
> A way to reconfigure your application’s UI
> Contextual TabGroups vs. Application Modes> TabGroups: context of workspace has
changed> App Modes: context of entire app has
changed
![Page 33: Microsoft’s Ribbon Strategy MFCMFCWRFWRFWPFWPF Target: Managed Target: Managed Target: MFC Native Target: MFC Native Target: Native 1 Target: Native 1.](https://reader036.fdocuments.net/reader036/viewer/2022062314/56649f145503460f94c282e7/html5/thumbnails/33.jpg)
Application ModesHow they work..> Modes are numbered from 0, 1, … 31> Can be bound to three types of
controls:> Core tabs> Groups within a tab> Controls directly in the application menu
> Not always exclusive; they can be combined<Tab ApplicationModes=“1,3,4”>
![Page 34: Microsoft’s Ribbon Strategy MFCMFCWRFWRFWPFWPF Target: Managed Target: Managed Target: MFC Native Target: MFC Native Target: Native 1 Target: Native 1.](https://reader036.fdocuments.net/reader036/viewer/2022062314/56649f145503460f94c282e7/html5/thumbnails/34.jpg)
FontControlApplication Modes
demo Markup:ApplicationModes=“1”Code: IUIFramework::SetModes()
![Page 35: Microsoft’s Ribbon Strategy MFCMFCWRFWRFWPFWPF Target: Managed Target: Managed Target: MFC Native Target: MFC Native Target: Native 1 Target: Native 1.](https://reader036.fdocuments.net/reader036/viewer/2022062314/56649f145503460f94c282e7/html5/thumbnails/35.jpg)
FontControlApplication Modes
demo Markup:ApplicationModes=“1”Code: IUIFramework::SetModes()
PAUSED
![Page 36: Microsoft’s Ribbon Strategy MFCMFCWRFWRFWPFWPF Target: Managed Target: Managed Target: MFC Native Target: MFC Native Target: Native 1 Target: Native 1.](https://reader036.fdocuments.net/reader036/viewer/2022062314/56649f145503460f94c282e7/html5/thumbnails/36.jpg)
The Default mode
> Mode 0 is called the “default” mode> Any modal control that isn’t explicitly
bound to a mode is put into mode 0 (default mode)
> This means FontControl is already modal
> On startup, default mode activates automatically> Useful for default UI configuration
![Page 37: Microsoft’s Ribbon Strategy MFCMFCWRFWRFWPFWPF Target: Managed Target: Managed Target: MFC Native Target: MFC Native Target: Native 1 Target: Native 1.](https://reader036.fdocuments.net/reader036/viewer/2022062314/56649f145503460f94c282e7/html5/thumbnails/37.jpg)
FontControlApplication Modes
demo Markup:ApplicationModes=“1”Code: IUIFramework::SetModes()
RESUME
![Page 38: Microsoft’s Ribbon Strategy MFCMFCWRFWRFWPFWPF Target: Managed Target: Managed Target: MFC Native Target: MFC Native Target: Native 1 Target: Native 1.](https://reader036.fdocuments.net/reader036/viewer/2022062314/56649f145503460f94c282e7/html5/thumbnails/38.jpg)
FontControlApplication Modes
demo Markup:ApplicationModes=“1”Code: IUIFramework::SetModes()
![Page 39: Microsoft’s Ribbon Strategy MFCMFCWRFWRFWPFWPF Target: Managed Target: Managed Target: MFC Native Target: MFC Native Target: Native 1 Target: Native 1.](https://reader036.fdocuments.net/reader036/viewer/2022062314/56649f145503460f94c282e7/html5/thumbnails/39.jpg)
Last Words…
> Practice great ribbon design> Shift thinking from features to scenarios> Usability trumps all
> Windows Ribbon developers’ guides:http://msdn.microsoft.com/en-us/library/dd742866(VS.85).aspx
> Follow-up material:> See hidden slides for extra content> Nicolas Brun’s PDC2008 Windows Ribbon
talk:http://channel9.msdn.com/pdc2008/PC14/
![Page 40: Microsoft’s Ribbon Strategy MFCMFCWRFWRFWPFWPF Target: Managed Target: Managed Target: MFC Native Target: MFC Native Target: Native 1 Target: Native 1.](https://reader036.fdocuments.net/reader036/viewer/2022062314/56649f145503460f94c282e7/html5/thumbnails/40.jpg)
Q & A Please use the microphones provided.
![Page 41: Microsoft’s Ribbon Strategy MFCMFCWRFWRFWPFWPF Target: Managed Target: Managed Target: MFC Native Target: MFC Native Target: Native 1 Target: Native 1.](https://reader036.fdocuments.net/reader036/viewer/2022062314/56649f145503460f94c282e7/html5/thumbnails/41.jpg)
YOUR FEEDBACK IS IMPORTANT TO US!
Please fill out session evaluation
forms online atMicrosoftPDC.com
![Page 42: Microsoft’s Ribbon Strategy MFCMFCWRFWRFWPFWPF Target: Managed Target: Managed Target: MFC Native Target: MFC Native Target: Native 1 Target: Native 1.](https://reader036.fdocuments.net/reader036/viewer/2022062314/56649f145503460f94c282e7/html5/thumbnails/42.jpg)
Learn More On Channel 9
> Expand your PDC experience through Channel 9
> Explore videos, hands-on labs, sample code and demos through the new Channel 9 training courses
channel9.msdn.com/learnBuilt by Developers for Developers….
![Page 43: Microsoft’s Ribbon Strategy MFCMFCWRFWRFWPFWPF Target: Managed Target: Managed Target: MFC Native Target: MFC Native Target: Native 1 Target: Native 1.](https://reader036.fdocuments.net/reader036/viewer/2022062314/56649f145503460f94c282e7/html5/thumbnails/43.jpg)
© 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.
![Page 44: Microsoft’s Ribbon Strategy MFCMFCWRFWRFWPFWPF Target: Managed Target: Managed Target: MFC Native Target: MFC Native Target: Native 1 Target: Native 1.](https://reader036.fdocuments.net/reader036/viewer/2022062314/56649f145503460f94c282e7/html5/thumbnails/44.jpg)