(window.webpackJsonp=window.webpackJsonp||[]).push([[43],{381:function(e,t,s){"use strict";s.r(t);var a=s(15),n=Object(a.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"scaffold-demo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#scaffold-demo"}},[e._v("#")]),e._v(" Scaffold Demo")]),e._v(" "),t("p",[e._v("This is a scaffold demo for UIExtension, including an open-source UI addon. It shows how to customize UI and how to use declaration file. The demo can be accessed at "),t("code",[e._v("./examples/UIExtension/scaffoldDemo")]),e._v(".")]),e._v(" "),t("h2",{attrs:{id:"how-to-run-this-demo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#how-to-run-this-demo"}},[e._v("#")]),e._v(" How to run this demo")]),e._v(" "),t("h3",{attrs:{id:"setup-library"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#setup-library"}},[e._v("#")]),e._v(" Setup library")]),e._v(" "),t("p",[e._v("Execute command "),t("code",[e._v("npm run setup")]),e._v(" in the demo root folder.")]),e._v(" "),t("p",[e._v("This setup would:")]),e._v(" "),t("ul",[t("li",[e._v("Add the "),t("code",[e._v("lib")]),e._v(" directory to the dependency list as a local npm repository.")]),e._v(" "),t("li",[e._v("install all npm package that needed.")])]),e._v(" "),t("h3",{attrs:{id:"run-demo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#run-demo"}},[e._v("#")]),e._v(" Run demo")]),e._v(" "),t("p",[e._v("Execute command:\n"),t("code",[e._v("npm start")])]),e._v(" "),t("h2",{attrs:{id:"source-code"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#source-code"}},[e._v("#")]),e._v(" Source code")]),e._v(" "),t("p",[e._v("The structure of "),t("code",[e._v("src")]),e._v(" folder:")]),e._v(" "),t("div",{staticClass:"language-sh extra-class"},[t("pre",{pre:!0,attrs:{class:"language-sh"}},[t("code",[e._v("│  addons.js                        --- shows how to use foxit addons.\n│  index.js                         --- entry.\n│\n└─addonExample                      --- an addon example. \n    │  addon.info.json              --- addon entry file, "),t("span",{pre:!0,attrs:{class:"token function"}},[e._v("which")]),e._v(" specified all related "),t("span",{pre:!0,attrs:{class:"token function"}},[e._v("file")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[e._v("in")]),e._v(" an addon.\n    │  index.css                    --- style sheet\n    │  index.js                     --- addon script entry. DON"),t("span",{pre:!0,attrs:{class:"token string"}},[e._v("'T modify it'")]),e._v("s "),t("span",{pre:!0,attrs:{class:"token function"}},[e._v("file")]),e._v(" name.\n    │\n    ├─locales                       --- i18n files\n    │      en-US.json\n    │      zh-CN.json\n    │\n    ├─stateHandlers                 --- State Handler Classes "),t("span",{pre:!0,attrs:{class:"token function"}},[e._v("which")]),e._v(" extend IStateHandler \n    │      addTextField.js\n    │\n    └─templates\n            custom-dialog.art       --- Art template "),t("span",{pre:!0,attrs:{class:"token keyword"}},[e._v("for")]),e._v(" customized dialog.\n            tab-template.art        --- Art template "),t("span",{pre:!0,attrs:{class:"token keyword"}},[e._v("for")]),e._v(" customized tool bar.\n")])])]),t("h3",{attrs:{id:"entry-file"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#entry-file"}},[e._v("#")]),e._v(" Entry file")]),e._v(" "),t("p",[e._v("The "),t("code",[e._v("src/addonExample/index.js")]),e._v(" file is the script entry for addon. View "),t("a",{attrs:{target:"_blank",href:"/examples/UIExtension/scaffoldDemo/src/addonExample/index.js"}},[e._v("source file")]),e._v(" for more details.")])])}),[],!1,null,null,null);t.default=n.exports}}]);