Package: wdom
WDOM is a python GUI library for browser-based desktop applications. WDOM
controls HTML elements (DOM) on browser from python, as if it is a GUI element.
APIs are same as DOM or browser JavaScript, but of course, you can write logic
codes in python.This library includes web-server (tornado), but is not intended to
be used as a web framework, please use forDesktopGUI Applications.Document:WDOM DocumentationDisclaimerWDOM is in the early development stage, and may contain many bugs. All APIs are
not stable, and may be changed in future release.FeaturesPure python implementationAPIs based onDOM specificationNot need to learn new special classes/methods for GUIImplemented DOM features are listed inWiki pageTheming with CSS frameworks (seeScreenShots on Wiki)JavaScript codes are executable on browserTestable with browsers andSeleniumWebDriverLicensed under MIT licenceRequirementsPython 3.5.3+ and any modern-browsers are required.
Also supports Electron and PyQt’s webkit browsers.InstallationInstall by pip:pip install wdomOr, install latest version from github:pip install git+http://github.com/miyakogi/wdomExampleSimple example:fromwdom.documentimportget_documentfromwdom.serverimportstartif__name__=='__main__':document=get_document()h1=document.createElement('h1')h1.textContent='Hello, WDOM'document.body.appendChild(h1)start()Execute this code and accesshttp://localhost:8888by browser."Hello, WDOM"will shown on the browser.
To stop process, pressCTRL+C.As you can see, methods of WDOM (document.createElementanddocument.body.appendChild) are very similar to browser JavaScript.WDOM provides some new DOM APIs (e.g.appendfor appending child) and some
tag classes to easily generate elements:fromwdom.tagimportH1fromwdom.documentimportset_appfromwdom.serverimportstartif__name__=='__main__':h1=H1()h1.textContent='Hello, WDOM'set_app(h1)# equivalent to `wdom.document.get_document().body.appendChild(h1)`start()Of course, WDOM can handle events:fromwdom.tagimportH1fromwdom.documentimportset_appfromwdom.serverimportstartdefrev_text(event):elm=event.currentTargetelm.textContent=elm.textContent[::-1]if__name__=='__main__':h1=H1('Hello, WDOM')h1.addEventListener('click',rev_text)set_app(h1)start()When string"Hello, WDOM"is clicked, it will be flipped.Making components with python class:fromwdom.tagimportDiv,H1,Inputfromwdom.documentimportset_appfromwdom.serverimportstartclassMyApp(Div):def__init__(self,*args,**kwargs):super().__init__(*args,**kwargs)self.text=H1('Hello',parent=self)self.textbox=Input(parent=self,placeholder='input here...')self.textbox.addEventListener('input',self.update)defupdate(self,event):self.text.textContent=event.currentTarget.value# Or, you can write as below# self.text.textContent = self.textbox.valueif__name__=='__main__':set_app(MyApp())start()WDOM package includes some tiny examples. From command line, try:python -m wdom.exapmles.rev_text
python -m wdom.exapmles.data_binding
python -m wdom.exapmles.timerSource codes of these examples will be found inwdom/examples.Theming with CSS FrameworksWDOM is CSS friendly, and provides easy way to theme your app with CSS
frameworks. For example, use bootstrap3:fromwdom.themesimportbootstrap3fromwdom.themes.bootstrap3importButton,PrimaryButton,DangerButtonfromwdom.documentimportget_documentfromwdom.serverimportstartif__name__=='__main__':document=get_document()document.register_theme(bootstrap3)document.body.append(Button('Button'),PrimaryButton('Primary'),DangerButton('Danger'))start()Differences are:import tag classes fromwdom.themes.[theme_name]instead ofwdom.tagregister theme-module bydocument.register_theme(theme_module)If you want to more easily change themes (or, css frameworks), try command-line
option--theme.wdom.themes.defaultmodule would be switched to--themeoption.For example, in the above code, changefrom wdom.themes import bootstrap3tofrom wdom.themes import default. And execute the code with--themetheme_nameoption (see below).Currently, WDOM bundles 20+ CSS frameworks by default, and they are listed inWikiwith screenshots. In
each theme module, only primitive HTML elements (typographies, buttons, form
components, tables, and grids) are defined, but complex elements like
navigations or tabs are not defined.If your favourite CSS framework is not included, please let me know onIssues,
or write its wrapper module and sendPR.Of course you can use your original css. SeeLoading Static Contents -> Local
Resourcesection in theUser Guide.ContributingContributions are welcome!!If you find any bug, or have any comments, please don’t hesitate to report toIssueson GitHub.
All your comments are welcome!More DocumentsPlease seeUser Guide.