Editorial Workflows

Python UI 2

unlisted workflow

Install Workflow...

This workflow contains at least one Python script. Only use it if you trust the person who shared this with you, and if you know exactly what it does.

I understand, install the workflow!

This is a workflow for Editorial, a Markdown and plain text editor for iOS. To download it, you need to view this page on a device that has the app installed.

Description: Test UI

Shared by: Tutorial Doctor

Comments: Comment Feed (RSS)

There are no comments yet.

+ Add Comment

Workflow Preview
Help ?
Run the block if
  • is Equal to
  • is Not Equal to
  • Contains
  • Doesn't Contain
  • Matches Regular Expression
Markdown Help ?
Variable Name
help
Value
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Preview</title> <style type="text/css"> body { margin: 0; padding: 0; border: 0; color: #333333; font-size: 16px; font-family: "Palatino-Roman", Helvetica, sans-serif; line-height: 150%; vertical-align: baseline; overflow: hidden; background-color: #FAFAFA; } a { color: #045591; text-decoration:none; } h1 { font-family: SourceSansPro-Regular; font-size: 32px; font-weight: bold; font-style: normal; margin-top: 32px; margin-bottom: 12px; } h2 { font-family: SourceSansPro-Regular; font-size: 24px; font-weight: bold; font-style: normal; margin-top: 32px; margin-bottom: 12px; } h3 { font-family: SourceSansPro-Regular; font-size: 19px; font-weight: bold; font-style: normal; } h4, h5, h6 { font-family: SourceSansPro-Regular; font-size: 19px; font-weight: bold; font-style: normal; margin-top: 12px; margin-bottom: 0; } h1:first-child { margin-top: 0; } p { margin-bottom: 12px; } p:last-child { margin-bottom:0; } ol { list-style: outside decimal; } ul { list-style: outside disc; } ol, ul { padding-left:0; margin-bottom:12px; } ol li { margin-bottom:16px; margin-left:28px; } ul li { margin-bottom: 12px; margin-left: 20px; } ol:last-child, ul:last-child { margin-bottom:0; } li > p { margin-bottom:12px; } li > ol, li > ul { margin-top: 12px !important; padding-left:12px; } dl { margin-bottom: 12px; } dl dt { font-weight: bold; margin-bottom: 8px; } dl dd { margin-left: 0; margin-bottom: 12px; } dl dd:last-child, dl:last-child { margin-bottom: 0; } pre { white-space: pre-wrap; margin-bottom: 24px; overflow: hidden; padding: 3px; -webkit-border-radius: 3px; background-color: #F2F2F2; border: 1px solid #D9D9D9; } code { font-family: "DejaVuSansMono", monospace; font-size: 0.9em; white-space: nowrap; padding: 2px; -webkit-border-radius: 4px; background-color: #F2F2F2; border: 1px solid #D9D9D9; } pre code { font-family: "DejaVuSansMono", monospace; font-size: 16px; white-space: pre-wrap; border: none; padding: 0; background-color: transparent; -webkit-border-radius: 0; } blockquote { border-left: 3px solid #ccc; margin-left: 0; margin-right: auto; width: 95%; padding: 0 10px; } table { margin-left: auto; margin-right: auto; margin-bottom: 24px; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; border-spacing: 0; } table th { padding: 3px 10px; background-color: #FAFAFA; border-top: 1px solid #ddd; border-left: 1px solid #ddd; } table td { padding: 3px 10px; border-top: 1px solid #ddd; border-left: 1px solid #ddd; } img { border: none; display: block; margin: 1em auto; max-width: 100%; } #content-wrapper { height: 100%; overflow-y: scroll; overflow-x: hidden; font-size: 1.0em; width: 100%; } #content { width: auto; padding: 40px 40px 40px 40px; } .footnote { font-size: 0.8em; vertical-align: super; } .footnotes ol { font-weight: bold; } .footnotes ol li p { font-weight: normal; } </style> </head> <body> <div id="content-wrapper"> <div id="content"> <h1 id="introduction">Introduction</h1> <p>The <strong>ui</strong> module provides components for building “native” graphical user interfaces on iOS. It is modeled closely after Apple’s UIKit, but it is by no means a complete wrapper, and simplifies some aspects of the framework.</p> <p>The module is complemented by an integrated UI design tool that can be used to arrange and configure GUI elements without writing any code. <hr></p> <p>Note: The controls inherit from the UI class.</p> <h1 id="view.flex">View.flex</h1> <p>The autoresizing behavior of the view. When a view changes its bounds, it automatically resizes its subviews according to the flags set by this attribute.</p> <p>The flags are represented as a string of one-letter “codes” that specify how the view should be resized.</p> <p>Valid flags are “W” (flexible width), “H” (flexible height), “L” (flexible left margin), “R” (flexible right margin), “T” (flexible top margin), “B” (flexible bottom margin).</p> <h2 id="examples:">Examples:</h2> <ul> <li><p>“WH” – the view’s width and height are automatically adjusted, this is often suitable for views that fill the entire superview.</p></li> <li><p>“TR” – the view is anchored to the bottom-left corner of its superview (the top margin and right margin are flexible). If you don’t want auto-resizing to occur, use an empty string. <hr></p></li> </ul> <h1 id="button.action">Button.action</h1> <p>A function or method that gets called when the button is tapped.</p> <p>The function must take a single sender parameter (excluding self if it’s a bound method). <hr></p> <h1 id="letslookatthecodeinmoredetail">Let’s look at the code in more detail</h1> <ol> <li>First, we create a View. This is the base class for pretty much everything that you can put on the screen. A vanilla View is just a colored rectangle, but it can also serve as a container for other views (in this case, a button).</li> <li>We set the view’s name to ‘Demo’, this is what will be shown in the title bar, when the view is presented later.</li> <li>The view’s background color is set to &#8216;<code>white</code> &#8217;. You can use strings (color names and hex), tuples (e.g. (1.0, 0.0, 0.0) for red, (0.0, 1.0, 0.0, 0.5) for half-transparent green), or numbers (e.g. 0.5 for 50% gray). Internally, all these color representations are converted to 4-tuples (r, g, b, a), so when you access the view’s <code>background_color</code> attribute later, you’ll get (1.0, 1.0, 1.0, 1.0), no matter if you set it to &#8216;<code>white</code> &#8217;, &#8216;<code>#ffffff</code> &#8217;, or just 1.0.</li> <li>We create a new Button, setting its title with a keyword argument. When you set a title during initialization, its size is automatically adjusted to fit.</li> <li>By setting the <strong>View.center</strong> attribute, we set the button’s position relative to its parent. In this case, we use half of the parent’s <strong>View.width</strong> and <strong>View.height</strong> attributes to center the button.</li> <li>Because the view may change its size (e.g. when the device is rotated), we set the button’s <strong>View.flex</strong> attribute that controls its auto-resizing behavior. In this case, we want the left, right, top, and bottom margins to be flexible, so that the button stays centered in its container.</li> <li>We set the button’s <strong>Button.action</strong> attribute to the function that is defined at the top of the script. The function must accept a single parameter, which is conventionally named sender. The parameter will be the button that triggered the event, so you can use a single action for multiple buttons, and determine what to do depending on which button caused the event.</li> <li>We’re done setting up the button, so we add it as a child of the container view, using the <strong>View.add_subview() </strong>method.</li> <li>Finally, we call the <strong>View.present()</strong> method to get the main view on screen. Views can be presented with different styles. On the iPhone, all views are presented in full-screen, but on the iPad, you can choose between &#8216;<code>sheet</code> &#8217;, &#8216;<code>popover</code> &#8217; and &#8216;*<code>fullscreen</code> &#8217;.</li> </ol> </div> </div> </body> </html>
Show Help ?
Run the block if
  • is Equal to
  • is Not Equal to
  • Contains
  • Doesn't Contain
  • Matches Regular Expression
Custom UI ?
User Interface
Presentation Style
  • Sheet
  • Full-Screen
  • Popover
Output
Use Editor Theme
ON
…End If
…End If
Python UI ?
Source Code
import ui
import sound

# FUNCTIONS

def ChangeTitle(sender):
	sender.title='New Title'
	sound.play_effect('Beep')

# CREATE OBJECTS

window = ui.View()
button = ui.Button(title='Tap Here')
slider = ui.Slider()

# OBJECT ATTRIBUTES

# Window
window.background_color = 'white'
window.width = 1024
window.height = 300
#wx = 300 # window's x position. 
#wy = 512 # window's y position.
window.name = 'Window'
window.flex = 'WTB'
#window.flex = 'WTB'
# window.size_to_fit()


# Button
y_offset = -30
button.background_color = 'gray'
button.width = 100
button.center = (window.width/2,window.height/2 + y_offset)
button.flex = 'LRTB'
button.action = ChangeTitle

# Slider
slider.width = 300
slider.center = (window.width/2,window.height/2)
slider.flex = 'LRTB'

# Display Objects
window.add_subview(button)
window.add_subview(slider)
window.present('popover',animated=True,popover_location=(ui.get_screen_size()[0]/2,ui.get_screen_size()[1]/2), hide_title_bar=True,title_bar_color=None,title_color=None,orientations=None)