Package: dresscode
DresscodeDress up your code with a beautiful graphical user interface !This project is part of thePyrustic Ecosystem. Look powered by thecyberpunktheme.Beta version. Only for early-adopters !Installation|ReferenceShowcaseWelcome ! Let me show you something:Figure 1 - DemoWhat if I told you that I did this with1 Hex-digit lines of code:tm: ?The menu bar inFigure 1is not a gimmick. Clicking on the buttons in the menu bar opens another page. So in fact I showed only 1/3 of the pages !Let's take a look at the other pages:Figure 2 - 1 hex-digit lines of code generated an app with 3 pages !Now you are wondering how I did this with just1 hex-digit lines of code:tm:.Well, I first defined the first page:fromdresscodeimportpagehome_page=page.Page(pid="home",name="Home")home_page.add_entry(title="Username")home_page.add_entry(title="Password",secretive=True)home_page.add_button(new_row=True)Then I defined the second page:fromdresscodeimportpageedit_page=page.Page(pid="edit",name="Edit")edit_page.add_entry(title="Username")edit_page.add_button(on_click=lambdapage,cid:page.show_toast("Hello"))Then the third page:fromdresscodeimportpageabout_page=page.Page(pid="about",name="About")about_page.add_button(text="Open Github")about_page.add_button(text="Download the Wheel")And then I created the app and linked the three pages to it.fromdresscodeimportapp,page...my_app=app.App(title="Dresscode Demo",width=450,height=150,home="home")my_app.add_page(home_page)my_app.add_page(edit_page)my_app.add_page(about_page)my_app.start()The 1 hex-digit lines of code:fromdresscodeimportapp,pagemy_app=app.App(title="Dresscode Demo",width=450,height=150,home="home")home_page=page.Page(pid="home",name="Home")home_page.add_entry(title="Username")home_page.add_entry(title="Password",secretive=True)home_page.add_button(new_row=True)edit_page=page.Page(pid="edit",name="Edit")edit_page.add_entry(title="Username")edit_page.add_button(on_click=lambdapage,cid:page.show_toast("Hello"))about_page=page.Page(pid="about",name="About")about_page.add_button(text="Open Github")about_page.add_button(text="Download the Wheel")my_app.add_page(home_page)my_app.add_page(edit_page)my_app.add_page(about_page)my_app.start()Figure 3 - Demo AnimationVoilà !This is the full source code with comment and well structured:fromdresscode.appimportAppfromdresscode.pageimportPagedefget_home_page():# defining the home page herepage=Page(pid="home",name="Home")# pid = page id !page.add_entry(title="Username")page.add_entry(title="Password",secretive=True)# secret secret !page.add_button(new_row=True)returnpagedefget_edit_page():page=Page(pid="edit",name="Edit")page.add_entry(title="Username")# Clicking this button will pop up a "Hello"page.add_button(on_click=lambdapage,cid:page.show_toast("Hello"))returnpagedefget_about_page():page=Page(pid="about",name="About")page.add_button(text="Open Github")page.add_button(text="Download the Wheel")returnpage# the home argument is the pid of the page to show at start upapp=App(title="Dresscode Demo",width=450,height=150,home="home")# adding pages to the app !app.add_page(get_home_page())app.add_page(get_edit_page())app.add_page(get_about_page())# lift up !app.start()# the mainloop is hidden here ! ;)Basically, you can justpip install dresscode, open a lightweight code editor, copy, paste, run the code and yeah it should work ! Try it !Wondering what will happen when there are 10 pages ? Yes your menu bar will be full. The solution: buy large screens !Joking aside, here's the solution:...# Asking Dresscode to create a dropdown menu 'Menu'# then stack inside it the references to the pages !app.add_page(home_page,category="Menu")app.add_page(edit_page,category="Menu")app.add_page(about_page,category="Menu")...Figure 4 - No need to buy large screens !Installationpipinstalldresscode--upgrade--upgrade-strategyeagerInteraction with DresscodeDress up your code with a beautiful graphical user interface !was the intro to this README. There is a clear distinction between the backend and the frontend. The question that arises is therefore how to communicate the frontend and the backend.WithDresscode, you can specify when creating a component which handler to call when a particular event occurs.With the button component, there are theon_clickparameter to keep a reference to the event handler. So basically, you just need to have a handler with 2 parameters:pageandcid.fromdresscode.appimportAppfromdresscode.pageimportPagedefhandler(page,cid):"""page: the page objectcid: the component id (here, the button cid)"""# say 'Hello' !page.show_toast("Hello component{}".format(cid))# you can inspect the dict of components (keys are cid)components=page.components# be curious, inspect the dict !# you can retrieve the data from a componentusername=page.read_component("username")# or you can display a large textpage.show_text("Helloo\n{}".format(username),title="My large text")# or, ask for a confirmationok=page.ask_confirmation()# blocks the app, returns a boolean# you can even decide to scroll the content of the pagepage.scroll(value=1.0)# you can add a new page at runtime !!!app=page.appapp.add_page(Page(pid="new_page",name="New"))# and guess what, you can open this new page !app.open_page("new_page")# and if you are in a hurry to open the home pageapp.open_home()defget_home_page():# home page - a pid will be generated automatically if you don't set itpage=Page(pid="home",name="Home")page.add_entry(cid="username",title="Username")# if you don't set a cid, it will be generatedpage.add_button(on_click=handler)# a cid will be generated automatically# Note, if you click the button twice, you will get a:# dresscode.exception.DresscodeException# Duplicate page id isn't allowed (new_page) !# Guess why ! This isn't a bug but a feature ! hahaha !returnpageapp=App(title="Dresscode Demo",width=450,height=150,home="home")app.add_page(get_home_page())# lift up !app.start()ComponentsDo you thinkDresscodeonly offers two components, the input field and the button ?Normally that would be enough. But I implemented a multitude of components to allow everyone to build applications quickly, from the simplest to the most complex.CheckbuttonsFigure 5 - Checkbuttonsfromdresscode.appimportAppfromdresscode.pageimportPagedefget_home_page():page=Page(pid="home",name="Home")items=("Banana","Apple","Avocado")page.add_checkbutton(title="Choose your favorite fruits",items=items)# you could add a on_choice event handler ;)returnpageapp=App(title="Dresscode Demo",width=450,height=150,home="home")app.add_page(get_home_page())# lift up !app.start()Dropdown listFigure 6 - Drop-down listfromdresscode.appimportAppfromdresscode.pageimportPagedefget_home_page():page=Page(pid="home",name="Home")items=("Banana","Apple","Avocado")page.add_dropdown_list(title="Choose your favorite fruit",items=items)# you could add a on_choice event handler ;)returnpageapp=App(title="Dresscode Demo",width=450,height=150,home="home")app.add_page(get_home_page())# lift up !app.start()EditorFigure 7 - Editorfromdresscode.appimportAppfromdresscode.pageimportPagedefget_home_page():page=Page(pid="home",name="Home")essay="non est ad astra mollis e terris via\nSénèque"page.add_editor(title="My essay",text=essay,readonly=True)# you could change the width and or height...returnpageapp=App(title="Dresscode Demo",width=450,height=150,home="home")app.add_page(get_home_page())# lift up !app.start()LabelFigure 8 - Labelfromdresscode.appimportAppfromdresscode.pageimportPagedefget_home_page():page=Page(pid="home",name="Home")page.add_label(text="Marvelous")page.add_label(text="Dresscode",color="white")page.add_label(text="Project",color="cyan")text="Make Desktop Apps Great Again !"page.add_label(new_row=True,text=text,color="gray",side="right",font=("Corrier",10))returnpageapp=App(title="Dresscode Demo",width=450,height=150,home="home")app.add_page(get_home_page())# lift up !app.start()RadiobuttonsFigure 9 - Radiobuttonsfromdresscode.appimportAppfromdresscode.pageimportPagedefget_home_page():page=Page(pid="home",name="Home")items=("Blue","Red")page.add_radiobutton(title="Make a choice",items=items)returnpageapp=App(title="Dresscode Demo",width=450,height=150,home="home")app.add_page(get_home_page())# lift up !app.start()SpaceFigure 10 - SpaceXfromdresscode.appimportAppfromdresscode.pageimportPagedefget_home_page():page=Page(pid="home",name="Home")items=("Blue","Red")page.add_button()page.add_button()page.add_space()# you can alter the width, height and more...page.add_button()returnpageapp=App(title="Dresscode Demo",width=450,height=150,home="home")app.add_page(get_home_page())# lift up !app.start()SpinboxFigure 11 - Spinboxfromdresscode.appimportAppfromdresscode.pageimportPagedefget_home_page():page=Page(pid="home",name="Home")items=("Blue","Red")page.add_spinbox(title="Make a choice",items=items)returnpageapp=App(title="Dresscode Demo",width=450,height=150,home="home")app.add_page(get_home_page())# lift up !app.start()path entryThe path entry is part ofmegawidget!Figure 12 - Pathentryfromdresscode.appimportAppfromdresscode.pageimportPagedefget_home_page():page=Page(pid="home",name="Home")page.add_path_entry(title="Directory",browse="dir")page.add_path_entry(new_row=True,title="File")returnpageapp=App(title="Dresscode Demo",width=450,height=150,home="home")app.add_page(get_home_page())# lift up !app.start()TableThe table is part ofmegawidget!Figure 13 - Tablefromdresscode.appimportAppfromdresscode.pageimportPagedefget_home_page():page=Page(pid="home",name="Home")columns=("Name","Age","Gender")data=[("Jack",45,"Male"),("Jane",37,"Female"),("Alex",100,"?")]page.add_table(title="My data",columns=columns,data=data)returnpageapp=App(title="Dresscode Demo",width=650,height=300,home="home")app.add_page(get_home_page())# lift up !app.start()ImageAdmit that you didn't expect this !Figure 14 - Imagefromdresscode.appimportAppfromdresscode.pageimportPagedefget_home_page():page=Page(pid="home",name="Home")page.add_label(text="Welcome !",side=None,anchor="center",color="gray")withopen("/home/alex/dresscode.png","rb")asfile:image=file.read()# to center any component, the trick: side=None, anchor="center" !page.add_image(new_row=True,image=image,side=None,anchor="center")page.add_label(text="https://github.com/pyrustic",side=None,anchor="center",font=("Courrier",10),new_row=True,color="gray")returnpageapp=App(title="Dresscode Demo",width=650,height=400,home="home")app.add_page(get_home_page())# lift up !app.start()Cherry on the cakeSince we have this rebellious little side to wanting to customize everything, I implemented the possibility of adding custom components !# WARNING: THIS SNIPPET IS DEPRECATED# WAIT FOR A STABLE VERSIONfromdresscode.appimportAppfromdresscode.pageimportPage# I will cover this topic another time !defdata_getter(page,cid):data=Nonereturndatadefbuilder(page,cid):parts={}returnparts,data_getterdefget_home_page():page=Page(pid="home",name="Home")page.add_custom(builder=builder)returnpageapp=App(title="Dresscode Demo",width=650,height=400,home="home")app.add_page(get_home_page())# lift up !app.start()There you go, so I won't be asked to add new components ! :)Work in progress...