Blog Feed Post

Understanding WPF and the XAML editor in PB12.NET (part III)

If you’ve been following this series, you’ve seen how easy it is (perhaps I should say, “will be”, since PB12 is still in beta…) to use the new features of PowerBuilder.NET. I hope I’ve been able to demystify any uncertainty you’re feeling about the upcoming transition to Windows Presentation Foundation (WPF) and Extensible Application Markup Language (XAML).

In this third (and final?) chapter of the series, we’ll add the final four commandbuttons, flesh out the PowerScipt, then add some custom XAML tags to the presentation layer which will really add some sizzle to the finished Calculator application. The point of this exercise is to show how XAML and WPF allows you to separate the user interface design/implementation from the “business logic” code of a PB.Net application.


To refresh everyone’s memory, this series is implementing the sample Calculator application from MSDN, which can be downloaded here. If you’ve gotten this far, we have the basic interface designed, using a GridPanel and some rectangular WPF commandbuttons. Not quite the same look and feel as the MSDN sample, which uses rounded commandbuttons, with cool animations for the MouseOver! and Clicked! events.

Here’s a screen shot of the MSDN sample app in action (which you wouldn’t see unless you have Visual Studio installed):

Sample WPF Calculator from MSDN


OK, so that app has some cool extra functionality, like a MultiLineEdit that simulates a running “paper trail” of the calculation history, some extra function keys, and Memory, so a direct “line for line” comparison to our PB.Net version won’t be a decent metric of application size. It’s not even an exercise on how to program a calculator or a Finite State Machine in PowerBuilder. This is really an attempt to show that PB.Net will be able to do everything that the Visual Studio developers can do with XAML and WPF, and more…

Back to the PB application: I’m not going to bloat this posting with the gory details of every event and method call. If you want to peruse the code, you can download the .Zip file containing the finished application here. But I will cover the XAML concept of Styles and Templates, which allow the PB developer to customize and extend the default GUI behavior. How about some rounded CommandButtons with a gradient background, and some animation to top it all off??


Step 1: Add the final four CommandButtons (BKSP, CE, C, and Enter)

The buttons we’ve placed into the application so far have been standard visual userObjects, descended from the CommandButton class. This allowed us to write some PowerScript into the ancestor classes, which are inherited by each instance that was dropped onto the gridPanel. These final four commandbuttons will just be regular WPF commandbuttons, each with one line of PowerScript in their clicked! events.

Select CommandButton from the Toolbox palette, and drop one each in the second row of grid cells (technically, Grid.Row=”1″). Stretch them to fit, and set their Margin and TextSize properties to match the other buttons in the grid. Their text property, reading from left to right, should be “BKSP”, “CE”, “C”, and “Enter”, and their names should be set to something indicative of their purpose – I named mine “cb_bksp”, “cb_clearentry”, “cb_clearall”, and “cb_enter”.

Now go into the Script window for each of them, and add the following lines of PowerScript.





//if we have only one operand, just exit
if parent.ib_eraseDisplay then Return
parent.ib_eraseDisplay = TRUE
parent.lastOper = e_operation.none!
We defined the window functions that are called by these event scripts in Part II of this series. One nice new feature of PB.Net is that your PowerScript doesn’t have to compile cleanly before it can be saved, so if you haven’t already defined those window functions, you can go back and add them later! (You just can’t do a Full Build until they exist…)


Step 2: Define the custom templates and static resources in the XAML

Custom templates are used to define a standard look and feel for an object with a <Style> tag. Once a standard Style is defined, it can just be referenced from your controls, and they’ll “inherit” that behavior. It’s very similar to the way HTML works with Cascading Style Sheet definitions. These go into a section of the XAML called Resources, which can be “bound” to any container or control, depending on the desired scope of that reference. Since everything in our sample exists within the outer GridPanel, my XAML will create them as Grid.Resources. This example will be demonstrating three changes to the GUI of the calculator.

  1. Using ellipses as buttons, instead of plain old rectangular commandbuttons;
  2. Adding a nice shaded gradient to the background of those ellipses;
  3. Adding an animation effect to the “MouseOver” and “Clicked” events using a StoryBoard tag;

I’ve cobbled together most of the actual XAML for this from the MSDN sample itself, and John Strano’s blog post on using Custom Templates with PB.Net. Let’s get started!


Position the cursor in the XAML pane, right after the opening <Grid> tag on line 2, and start typing the <Grid.Resources> tag. Everything we’re adding goes inside this tag. With the shell’s Intellisense feature, all you need is the following key sequence:

<GR (tab) .RES (tab) > then enter.

Now you have a full <Grid.Resources></Grid.Resources> tag with room to enter more stuff inside.

The first thing we’ll add in there is the Storyboard tag, which defines the animation effect, and binds it to the ellipse control (which we’ll add in a moment.) That code looks like the following, and you can just copy and paste right inside the <Grid.Resources> tag.

<Storyboard x:Key="playStoryboard">
  <DoubleAnimation From="46" To="36" Duration="0:0:0.25" RepeatBehavior="1x"
AutoReverse="True" Storyboard.TargetName="TB" Storyboard.TargetProperty="(Ellipse.Height)" />
  <DoubleAnimation From="74" To="64" Duration="0:0:0.25" RepeatBehavior="1x"
AutoReverse="True" Storyboard.TargetName="TB" Storyboard.TargetProperty="(Ellipse.Width)" />

In a nutshell, this creates a Storyboard named “playStoryboard”, which animates an Ellipse named “TB”. It will shrink both the height and width by 10 pixels for .25 seconds, then return them to their original values.


Next, we’ll create the Ellipse style with its gradient background, and the event triggers that link to the Storyboard animation. This looks like a scary bit of XAML, but it’s not all that difficult to understand. This goes right after the closing </Storyboard> tag.  Place the cursor there and hit Enter to get a blank line, then paste the following code: 

<Style x:Key="Btn" TargetType="{x:Type pbwpf:CommandButton}">
  <Setter Property="Template">
      <ControlTemplate TargetType="{x:Type pbwpf:CommandButton}">
        <Grid Width="74" Height="46">
          <Ellipse x:Name="TB" Stroke="DarkBlue" StrokeThickness="2">
              <RadialGradientBrush Center="0.3,0.2" RadiusX="0.5" RadiusY="0.5">
                <GradientStop Color="Azure" Offset="0.1" />
                <GradientStop Color="CornflowerBlue" Offset="1.1" />
          <ContentPresenter Name="Content" HorizontalAlignment="Center" VerticalAlignment="Center" />
          <Trigger Property="IsMouseOver" Value="true">
            <Setter TargetName="TB" Property="Ellipse.Fill" Value="Aquamarine" />
          <Trigger Property="IsPressed" Value="true">
            <Setter TargetName="TB" Property="Ellipse.Fill" Value="Blue" />
          <EventTrigger RoutedEvent="ButtonBase.Click">
              <BeginStoryboard Name="playStoryboard" Storyboard="{StaticResource playStoryboard}" />


All this code does is define a Style named “Btn”. The style defines an Ellipse named “TB” with RadialGradient properties, within a single-celled GridPanel (because all WPF controls must exist within a container).  It then defines the event triggers for the MouseOver and Clicked events, and binds the clicked event to the Storyboard we defined earlier.  The TargetType attribute of the Style says that this Style can be linked to by any control that is a “pbwpf:CommandButton”.   Whew!


Step 3: Bind the CommandButton controls to the new Style resource.

The next step is to tell the CommandButtons to use the new Style.  That is done by simply adding the Style attribute to the CommandButton definitions in the XAML.  Go into each <pbwpf:CommandButton> tag in the XAML pane, and add the following attribute:

Style="{StaticResource Btn}"

You can copy that to the clipboard and just paste it anywhere inside each pbwpf:CommandButton definition.  Watch the Design Layout automatically change as each tag is altered!  Also, note that we haven’t written any PowerScript code in the Clicked or MouseMove events!  This should help illustrate the inherent separation of concerns between the XAML-based presentation layer and the PowerScript-based business logic layer. 

Here’s a screen shot of the final product! 

Finished Project

If you want to get the calculator actually calculating, you’ll need the PowerScript for the window functions, which can be downloaded from the full source code in this .Zip file


The Final Analysis

Since we didn’t implement all of the functionality of the original MSDN example, a true line-by-line comparison isn’t really meaningful.  But I’m going to tell you anyway.  ;)   My example in PowerBuilder.Net comes in at a svelte 94 lines of code, compared to 498 lines of C# in the MSDN sample.  I’m confident that, even if I took the time to implement the remaining functionality, I wouldn’t add 400 more lines of code…

Of course, this is Beta software, and I am seeing some Beta strangeness…  For example, the buttons inside the grid should resize themselves as the grid cells expand, and they’re not.  Also, the animation in the mouse click is not returning the buttons to their original dimensions…  At this point, I’m not sure if it’s my XAML or an issue inside PB.Net, but I’ll certainly follow up as newer builds become available.  Feel free to post any thoughts or comments…





Oct 7, 2009

Follow-up:  I’ve solved the animation problem where the commandbuttons were returning to a circle instead of an ellipse.  If you move the Width and Height properties from the <Grid> tag to the <Ellipse> tag, you’ll see the correct behavior.  Here’s an excerpt of the revised XAML, so you can see what I’ve changed.

<ControlTemplate TargetType=”{x:Type pbwpf:CommandButton}”>
<Ellipse Width=”73″ Height=”46″ x:Name=”TB” Stroke=”DarkBlue” StrokeThickness=”2″>


And make sure the From and To properties in the <StoryBoard> tag are set correctly as well:

<Storyboard x:Key=”playStoryboard”>
<DoubleAnimation From=”46″ To=”36″ Duration=”0:0:0.25″ RepeatBehavior=”1x” AutoReverse=”True” Storyboard.TargetName=”TB” Storyboard.TargetProperty=”(Ellipse.Height)” />
<DoubleAnimation From=”73″ To=”63″ Duration=”0:0:0.25″ RepeatBehavior=”1x” AutoReverse=”True” Storyboard.TargetName=”TB” Storyboard.TargetProperty=”(Ellipse.Width)” />



Read the original blog entry...

More Stories By Paul Horan

Paul Horan is a Senior Solution Advisor and Mobility Architect at SAP, and works with the SAP Mobile Platform and SAP Mobile Secure product lines. Paul joined SAP as part of their acquisition of Sybase in June, 2010. Prior to that, Paul worked for Sybase as a technical pre-sales architect supporting PowerBuilder, PowerDesigner, and SQL Anywhere. Paul works out of SAP's Reston VA office. A 1984 graduate of Indiana University, Paul currently resides in Arlington VA.

Latest Stories
Andrew Keys is Co-Founder of ConsenSys Enterprise. He comes to ConsenSys Enterprise with capital markets, technology and entrepreneurial experience. Previously, he worked for UBS investment bank in equities analysis. Later, he was responsible for the creation and distribution of life settlement products to hedge funds and investment banks. After, he co-founded a revenue cycle management company where he learned about Bitcoin and eventually Ethereal. Andrew's role at ConsenSys Enterprise is a mul...
DXWorldEXPO LLC announced today that "Miami Blockchain Event by FinTechEXPO" has announced that its Call for Papers is now open. The two-day event will present 20 top Blockchain experts. All speaking inquiries which covers the following information can be submitted by email to [email protected] Financial enterprises in New York City, London, Singapore, and other world financial capitals are embracing a new generation of smart, automated FinTech that eliminates many cumbersome, slow, and expe...
Evan Kirstel is an internationally recognized thought leader and social media influencer in IoT (#1 in 2017), Cloud, Data Security (2016), Health Tech (#9 in 2017), Digital Health (#6 in 2016), B2B Marketing (#5 in 2015), AI, Smart Home, Digital (2017), IIoT (#1 in 2017) and Telecom/Wireless/5G. His connections are a "Who's Who" in these technologies, He is in the top 10 most mentioned/re-tweeted by CMOs and CIOs (2016) and have been recently named 5th most influential B2B marketeer in the US. H...
DXWorldEXPO | CloudEXPO are the world's most influential, independent events where Cloud Computing was coined and where technology buyers and vendors meet to experience and discuss the big picture of Digital Transformation and all of the strategies, tactics, and tools they need to realize their goals. Sponsors of DXWorldEXPO | CloudEXPO benefit from unmatched branding, profile building and lead generation opportunities.
The best way to leverage your Cloud Expo presence as a sponsor and exhibitor is to plan your news announcements around our events. The press covering Cloud Expo and @ThingsExpo will have access to these releases and will amplify your news announcements. More than two dozen Cloud companies either set deals at our shows or have announced their mergers and acquisitions at Cloud Expo. Product announcements during our show provide your company with the most reach through our targeted audiences.
DevOpsSummit New York 2018, colocated with CloudEXPO | DXWorldEXPO New York 2018 will be held November 11-13, 2018, in New York City. Digital Transformation (DX) is a major focus with the introduction of DXWorldEXPO within the program. Successful transformation requires a laser focus on being data-driven and on using all the tools available that enable transformation if they plan to survive over the long term. A total of 88% of Fortune 500 companies from a generation ago are now out of bus...
With 10 simultaneous tracks, keynotes, general sessions and targeted breakout classes, @CloudEXPO and DXWorldEXPO are two of the most important technology events of the year. Since its launch over eight years ago, @CloudEXPO and DXWorldEXPO have presented a rock star faculty as well as showcased hundreds of sponsors and exhibitors! In this blog post, we provide 7 tips on how, as part of our world-class faculty, you can deliver one of the most popular sessions at our events. But before reading...
Cloud Expo | DXWorld Expo have announced the conference tracks for Cloud Expo 2018. Cloud Expo will be held June 5-7, 2018, at the Javits Center in New York City, and November 6-8, 2018, at the Santa Clara Convention Center, Santa Clara, CA. Digital Transformation (DX) is a major focus with the introduction of DX Expo within the program. Successful transformation requires a laser focus on being data-driven and on using all the tools available that enable transformation if they plan to survive ov...
DXWordEXPO New York 2018, colocated with CloudEXPO New York 2018 will be held November 11-13, 2018, in New York City and will bring together Cloud Computing, FinTech and Blockchain, Digital Transformation, Big Data, Internet of Things, DevOps, AI, Machine Learning and WebRTC to one location.
DXWorldEXPO LLC announced today that ICOHOLDER named "Media Sponsor" of Miami Blockchain Event by FinTechEXPO. ICOHOLDER give you detailed information and help the community to invest in the trusty projects. Miami Blockchain Event by FinTechEXPO has opened its Call for Papers. The two-day event will present 20 top Blockchain experts. All speaking inquiries which covers the following information can be submitted by email to [email protected] Miami Blockchain Event by FinTechEXPO also offers s...
@DevOpsSummit New York 2018, colocated with CloudEXPO | DXWorldEXPO New York 2018 will be held November 11-13, 2018, in New York City. From showcase success stories from early adopters and web-scale businesses, DevOps is expanding to organizations of all sizes, including the world's largest enterprises - and delivering real results.
The dynamic nature of the cloud means that change is a constant when it comes to modern cloud-based infrastructure. Delivering modern applications to end users, therefore, is a constantly shifting challenge. Delivery automation helps IT Ops teams ensure that apps are providing an optimal end user experience over hybrid-cloud and multi-cloud environments, no matter what the current state of the infrastructure is. To employ a delivery automation strategy that reflects your business rules, making r...
Dion Hinchcliffe is an internationally recognized digital expert, bestselling book author, frequent keynote speaker, analyst, futurist, and transformation expert based in Washington, DC. He is currently Chief Strategy Officer at the industry-leading digital strategy and online community solutions firm, 7Summits.
"We started a Master of Science in business analytics - that's the hot topic. We serve the business community around San Francisco so we educate the working professionals and this is where they all want to be," explained Judy Lee, Associate Professor and Department Chair at Golden Gate University, in this SYS-CON.tv interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA.
Digital Transformation and Disruption, Amazon Style - What You Can Learn. Chris Kocher is a co-founder of Grey Heron, a management and strategic marketing consulting firm. He has 25+ years in both strategic and hands-on operating experience helping executives and investors build revenues and shareholder value. He has consulted with over 130 companies on innovating with new business models, product strategies and monetization. Chris has held management positions at HP and Symantec in addition to ...