Examples for Pglet 0.5

powershell/controls/buttons.ps1

@@ -27,60 +27,14 @@ Connect-PgletApp -Name "pglet-buttons" -ScriptBlock {
             Button -Compound -Primary -Text "Primary compound" -SecondaryText "This is a secondary text"
         )
 
+        # context menu buttons
+        Button -Icon "Add" -Text "New item" -MenuItems @(
+            MenuItem -Text "Email message" -Icon "Mail"
+            MenuItem -Text "Calendar event" -Icon "Calendar"
+        )
+
         $dialog
     )
 
     $page.add($view)
-}
-
-"add
-  stack horizontal
-    button text='Standard'
-    button disabled text='Standard disabled'
-  stack horizontal
-    button primary text='Primary'
-    button primary disabled text='Primary disabled'
-  stack horizontal
-    button compound text='Compound' secondaryText='This is a secondary text'
-    button primary compound text='Primary compound' secondaryText='This is a secondary text'
-  stack horizontal
-    button icon='Add' text='Button with icon'
-    button primary icon='Delete' text='Delete'
-  stack horizontal
-    button toolbar icon='Add' text='New item'
-    button toolbar icon='Mail' text='Send'
-    button toolbar icon='ChevronDown' text='Show example'
-    button toolbar icon='Delete' iconColor=red text='Delete'
-  stack horizontal
-    button icon='Emoji2' title=Emoji!
-    button icon='Calendar' title=Calendar!
-  stack horizontal
-    button ghost icon='AddFriend' text='Create account'
-    button ghost icon='Add' text='New item'
-  stack horizontal
-    button action icon='Globe' text='Pglet website' url='https://pglet.io' newWindow
-    button icon='MyMoviesTV' text='Go to Disney' url='https://disney.com' newWindow
-  stack horizontal
-    button text='Button with menu'
-      item id=new text='New' icon='Add'
-        item text='Email message' icon='Mail'
-        item text='Calendar event' icon='Calendar'
-      item id=share text='Share' icon='Share'
-        item id=twitter text='Share to Twitter' data='sharetotwitter'
-        item id=facebook text='Share to Facebook' data='sharetofacebook'
-      item
-        item data='key1'
-    button primary split text='Primary with split'
-      item text='New' icon='Add'
-        item text='Email message' icon='Mail'
-        item text='Calendar event' icon='Calendar'
-      item text='Share' icon='Share' split
-        item text='Share to Twitter' key='sharetotwitter'
-        item text='Share to Facebook' key='sharetofacebook'
-        item text='Share to Somewhere' disabled
-        item text='Share to Email' key='sharetoemail'
-          item text='Share to Outlook'
-          item text='Share to Gmail'
-      item divider
-      item text='To to Google' icon='Globe' iconColor=green url='https://google.com' newWindow secondaryText='New window'
-"
+}

powershell/controls/html.ps1

@@ -0,0 +1,7 @@
+Import-Module pglet
+
+$page = Connect-PgletPage -Name "html-test"
+$page.clean()
+
+$h = Html '<h1>Hello, world!</h1><iframe src=''https://pglet.io''></iframe>'
+$page.add($h)

powershell/controls/iframe.ps1

@@ -0,0 +1,8 @@
+Import-Module pglet
+
+Connect-PgletApp -ScriptBlock {
+    $pglet_page.title = "IFrame example"
+    $pglet_page.add(
+        (IFrame -Src 'https://pglet.io' -Width '100%' -Height 300 -Border '2px solid red')
+    )
+}

powershell/controls/progress.ps1

@@ -0,0 +1,39 @@
+Import-Module pglet
+
+Connect-PgletApp -Name "pglet-progress" -ScriptBlock {
+    $ErrorActionPreference = 'stop'
+
+    $page = $pglet_page
+
+    $controls = @(
+      Text "Indeterminate Progress" -Size xLarge
+      Progress -Label "Operation progress" -Description "Doing something indefinite..." -Width "30%"
+    )
+
+    $page.add($controls)
+
+    $prog1 = Progress -Label "Copying file1.txt to file2.txt" -Width "30%" -BarHeight 4
+    $page.add($prog1)
+
+    for($i = 0; $i -lt 101; $i=$i+10) {
+      $prog1.value = $i
+      $prog1.update()
+      Start-Sleep -Milliseconds 500
+    }
+
+    $prog2 = Progress -Label "Provisioning your account" -Value 0 -Width "30%"
+    $page.add($prog2)
+
+    $prog2.description = "Preparing environment..."
+    $prog2.value = 50
+    $prog2.update()
+    Start-Sleep -Seconds 2
+
+    $prog2.description = "Collecting information..."
+    $prog2.value = 100
+    $prog2.update()
+    Start-Sleep -Seconds 2
+
+    $prog2.value = $null
+    $prog2.update()  
+  }

powershell/controls/signin-entire-app.ps1

@@ -0,0 +1,26 @@
+Import-Module pglet
+
+Connect-PgletApp -Permissions "*" -ScriptBlock {
+    $page = $PGLET_PAGE
+    $page.theme = 'dark'
+
+    $loggedUser = Text "Welcome, $($page.userLogin)"
+
+    $page.onSignin = {
+        Write-Trace "Sign in event"
+        $loggedUser.value = $page.userLogin
+        $page.update()
+    }
+
+    $page.onSignout = {
+        Write-Trace "Sign out event"
+        $loggedUser.value = "Not signed in"
+        $page.update()
+    }
+
+    $signoutButton = Button -Primary -Text "Sign out" -OnClick {
+        $page.signout()
+    }
+
+    $page.add($loggedUser, $signoutButton)
+}

powershell/controls/signin-on-demand.ps1

@@ -0,0 +1,75 @@
+Import-Module pglet
+
+Connect-PgletApp -Web -ScriptBlock {
+    $page = $PGLET_PAGE
+    $page.theme = 'dark'
+
+    $page.onDismissSignin = {
+        Write-Trace "Signin cancelled"
+    }
+
+    $currentUser = Text
+
+    $signinButton = Button -Primary -Text "Sign in" -OnClick {
+        Write-Trace "Display signin dialog"
+
+        try {
+            $success = Show-PgletSignin -AuthProviders "azure,github,google" -AuthGroups -AllowDismiss
+            if ($success) {
+                Write-Trace "Signed in!"
+                updateCurrentUser
+                $page.update()
+            }
+        } catch {
+            Write-Trace "$_"
+        }        
+    }
+
+    $signoutButton = Button -Primary -Text "Sign out" -OnClick {
+        $page.signout()
+    }
+
+    $page.onSignout = {
+        Write-Trace "Signed out!"
+        updateCurrentUser
+        $page.update()
+    }
+
+    $checkAnon = Button -Text "Check anonymous access" -OnClick {
+        $result = $page.canAccess("")
+        Write-Trace $result
+    }    
+
+    $checkAnyAuth = Button -Text "Check any login" -OnClick {
+        $result = $page.canAccess("*")
+        Write-Trace $result
+    }
+
+    $checkGitHubTeams = Button -Text "Check GitHub permissions" -OnClick {
+        $result = $page.canAccess("github:pglet/core developers")
+        Write-Trace $result
+    }
+
+    $checkGoogleLogin = Button -Text "Check Google login" -OnClick {
+        $result = $page.canAccess("google:*@appveyor.com")
+        Write-Trace $result
+    }    
+
+    function updateCurrentUser() {
+        if ($page.userName) {
+            # signed in
+            $currentUser.value = "Welcome back, $($page.userName)"
+            $signoutButton.Visible = $true
+            $signinButton.Visible = $false
+        } else {
+            # anonymous
+            $currentUser.value = "Not logged in"
+            $signinButton.Visible = $true
+            $signoutButton.Visible = $false`
+        }
+    }
+
+    updateCurrentUser
+
+    $page.add($currentUser, $signinButton, $signoutButton, $checkAnon, $checkAnyAuth, $checkGitHubTeams, $checkGoogleLogin)
+}

powershell/controls/stack.ps1

@@ -0,0 +1,109 @@
+Import-Module pglet
+
+Connect-PgletApp -Name "pglet-stack" -ScriptBlock {
+    $ErrorActionPreference = 'stop'
+
+    $pglet_page.horizontalAlign = 'Stretch'
+    $pglet_page.update()
+
+    $bgColor = '#ddddee'
+
+    function items($count) {
+      $items = @()
+      for($i = 1; $i -le $count; $i++) {
+        $items += (Text -Value "$i" -Align Center -VerticalAlign Center -Width 30 -Height 30 -BgColor CyanBlue10 -Color White -Padding 5)
+      }
+      return $items
+    }  
+
+    function createHorizontalStack($horizAlign) {
+      Stack -Controls @(
+        Text -Value $horizAlign
+        Stack -Horizontal -HorizontalAlign $horizAlign -VerticalAlign Center -Gap 20 -BgColor $bgColor -Controls (items 3)
+      )
+    }
+
+    function createVerticalStack($vertAlign, $horizAlign) {
+      Stack -Width '20%' -Controls @(
+        Text -Value $vertAlign
+        Stack -VerticalAlign $vertAlign -HorizontalAlign Center -Height 300 -Gap 20 -BgColor $bgColor -Controls (items 3)
+      )
+    }
+
+    # Gap, padding
+    $spacingStack = Stack -Horizontal -BgColor $bgColor -Gap 0 -Controls (items 5)
+    $gapSlider = Slider "Gap between items" -Min 0 -Max 50 -Step 1 -Value 0 -ShowValue -OnChange {
+      $spacingStack.gap = $gapSlider.value
+      $spacingStack.update()
+    }
+    $paddingSlider = Slider "Stack padding" -Min 0 -Max 50 -Step 1 -Value 0 -ShowValue -OnChange {
+      $spacingStack.padding = $paddingSlider.value
+      $spacingStack.update()
+    }
+
+    $pglet_page.add(
+      (Text "Horizontal stack - Gap and Padding" -Size xLarge),
+      $gapSlider,
+      $paddingSlider,
+      $spacingStack
+    )
+
+    # Wrapping
+    $wrapStack = Stack -Horizontal -Wrap -BgColor $bgColor -Gap 20 -Controls (items 10)
+    $wrapSlider = Slider "Change the stack width to see how child items wrap onto multiple rows:" `
+        -Min 0 -Max 100 -Step 10 -Value 100 -Width '100%' -ShowValue -ValueFormat '{value}%' -OnChange {
+      $wrapStack.width = "$($wrapSlider.value)%"
+      $wrapStack.update()
+    }
+
+    $pglet_page.add(
+      (Text "Horizontal stack - Wrapping" -Size xLarge),
+      $wrapSlider,
+      $wrapStack,
+
+      (Text "Horizontal stack - Horizontal Alignments" -Size xLarge),
+      (createHorizontalStack 'Start'),
+      (createHorizontalStack 'Center'),
+      (createHorizontalStack 'End'),
+      (createHorizontalStack 'SpaceBetween'),
+      (createHorizontalStack 'SpaceAround'),
+      (createHorizontalStack 'SpaceEvenly'),
+
+      (Text "Horizontal stack - Vertical Alignments" -Size xLarge),
+      (Text "Start"),
+      (Stack -Horizontal -VerticalAlign 'Start' -Height 100 -BgColor $bgColor -Gap 20 -Controls (items 3)),
+      (Text "Center"),
+      (Stack -Horizontal -VerticalAlign 'Center' -Height 100 -BgColor $bgColor -Gap 20 -Controls (items 3)),
+      (Text "End"),
+      (Stack -Horizontal -VerticalAlign 'End' -Height 100 -BgColor $bgColor -Gap 20 -Controls (items 3))
+    )
+
+    # Vertical stack
+    $vertStacks = Stack -Horizontal -HorizontalAlign SpaceBetween -Width '100%' -Controls @(
+      (createVerticalStack 'Start'),
+      (createVerticalStack 'Center'),
+      (createVerticalStack 'End'),
+      (createVerticalStack 'SpaceBetween'),
+      (createVerticalStack 'SpaceAround'),
+      (createVerticalStack 'SpaceEvenly')
+    )
+
+    $pglet_page.add(
+      (Text "Vertical stack - Vertical Alignments" -Size xLarge),
+      $vertStacks
+    )
+
+    # Stack submit
+    $form1 = Stack -Padding 10 -width '50%' -Border '2px solid #eee' -BorderRadius 5 -Controls @(
+      Text "Pressing ENTER inside the stack will fire 'submit' event."
+      TextBox "First name"
+      TextBox "Last name"
+    ) -OnSubmit {
+      $form1.controls.insert(0, (Message "Form has been submitted!" -Type Success -Dismiss))
+      $form1.update()
+    }
+    $pglet_page.add(
+      (Text "Stack with Submit event" -Size xLarge),
+      $form1
+    )
+  }

powershell/controls/textbox.ps1

@@ -0,0 +1,15 @@
+Import-Module pglet
+
+Connect-PgletApp -Name "pglet-textbox" -ScriptBlock {
+
+    $controls = @(
+      TextBox -Multiline -AutoAdjustHeight -Label "Multiline textbox with auto-adjust height"
+      TextBox -Underlined -Label "Underlined textbox:"
+      TextBox -Borderless -Label "Borderless textbox"
+      TextBox -Prefix 'https://' -Label "Textbox with prefix"
+      TextBox -Suffix 'px' -Label "Textbox with sufix"
+      TextBox -Prefix 'https://' -Suffix '.com' -Label "Textbox with prefix and suffix"
+    )
+
+    $pglet_page.add($controls)
+  }

powershell/greeter/greeter-app.ps1

@@ -12,7 +12,6 @@ $main = {
   }
 
   $page.add($txt_name, $btn_hello)
-
 }
 
 Connect-PgletApp -Name 'greeter-app' -ScriptBlock $main

python/controls/barchart_control.py

@@ -1,7 +1,3 @@
-import datetime
-import random
-import time
-
 import pglet
 from pglet import Text, BarChart
 from pglet.barchart import Point

python/controls/grid_control.py

@@ -117,4 +117,4 @@ def add_record(e):
         Button("Add record", on_click=add_record)
     )
 
-pglet.app("python-grid", target=main)
+pglet.app("python-grid", target=main, web=False)