Blog Feed Post

Understanding WPF and the XAML editor in PB12.NET

PowerBuilder.NET (aka PB12) is due out in the first half of 2010, and is currently out in public beta testing.  One of the fundamental goals of PowerBuilder, since its introduction in 1991, is to abstract out the technical tedium of Windows application development, and to free developers from having to worry about the “nuts and bolts”.  It was true when we were building Windows 3.1 apps, and it still holds true for the next-generation, which is Windows Presentation Foundation (WPF).  PB.Net will bring PB developers into the new world of WPF programming, introduce them to Extensible Application Markup Language (XAML), while maintaining the familiar “PowerBuilder” coding experience and requiring a minimum investment in retraining.  (Oh, and existing PowerBuilder Win32 applications should migrate to WPF with little or no modification…)  A fairly tall order, but early looks at the public beta for PB12.NET are getting a lot of positive press!!

Even with all that R&D effort, veteran PB developers taking the leap into PB.Net will be faced with some new concepts, not to mention a brand new IDE. PB.Net will be delivered in the Visual Studio Isolated Shell. Microsoft has stripped down the Visual Studio IDE to its bare-bones, and made that shell available to software vendors (like Sybase) to plug in their specific programming languages. Sybase will be one of the first vendors to embrace this new paradigm, and Microsoft is partnering very closely with Sybase to help ensure a successful launch.

Here’s a sneak peek of that new IDE, which shows that all the familiar features of the PB IDE still exist, they’re just enhanced with the features inherent in the Visual Studio IDE.

PB12 in the Visual Studio Isolated Shell

PB12 in the Visual Studio Isolated Shell

Everything that existed in earlier releases of PB will have a counterpart in PB.Net – including the System Tree, the output pane, the toolbox/palette, and the properties panes.  Notice that the layout designer is split into two halves.  The top half is the WYSIWYG drag-n-drop editor that PB developers have known for years.  You select a control from the toolbox, drop it on the surface of the window or container, set its properties, and code its event scripts.  What’s new is the bottom half of the screen – the XAML code pane, where you can edit the XAML directly.  Changes that are made in the designer or the properties pane are immediately reflected in the code pane, and vice versa. 
One nice new feature for PB developers will be instantaneous feedback of errors.  If the editor detects a syntax error, you’ll get that curly red underscore that highlights the problem code as you’re typing.  There’s also code block collapsing and Intellisense, courtesy of the VS Shell.  But the fact that XAML is an industry standard, means that you can assign the graphic design tasks to, say, a graphic designer, and that XAML can then be pasted directly into the editor pane.

But the best way to learn the editor is to take it for a spin, so over the next several blog posts, I’ll implement a WPF sample calculator app  from the MSDN.  To keep things focused, let’s get through the visual UI design first, then worry about writing the Powerscript.  The C# sample on MSDN is 489 lines of C# code - which doesn’t even take the XAML into account!  We’ll see what that looks like in PB.Net.


Step 1:  Create the Solution, Target, and Window

What was called a “Workspace” in prior versions of PB, is now called a “Solution” in PB.Net (to more closely correspond with the Visual Studio environment.)  The process is essentially the same.  You select File > New…  to open the dialog, then give your Solution a name and a folder location.  Solution files are given a .PBWX extension.

Once the Solution is created, you create a new Target with the same File > New… selection (or right-clicking on the Solution in the Solution Explorer/System Tree), but now you select the appropriate Target type from the three options presented.   We want a WPF Window Application.  The other two choices are .Net Assembly and .Net Web Service, but we’ll look at those later on.

File New dialog 

The Wizard walks you through the creation of the Application and Target (which now have a .PBTX extension), and the initial Project object.  I named this example PBCalc.  The rest of the Wizard consists of pages for external resource folders (.ICOs, .BMPs, etc., ), executable filenames, and whether to publish as a SmartClient app.  Just take the defaults and create the target.  Now it’s time to create our first WPF window.  Select File > New… to bring up the same dialog, with a bunch of new selections.  Expand the PB Object node, and select WPF Window.

File New dialog

The next step in this Wizard asks for a Window Title – “WPF Calculator”, and a window name – “w_wpfCalc”.  Press Next to continue.

Now for an important decision – which container style to use for the WPF window?  There are five available choices, as described in my previous post about container styles.  We’ll just take the default Grid, because none of the other layout styles fit our requirements.  We could have used Canvas, but that requires you to place each button at exactly the X/Y coordinates that you want.  It would work, but would introduce a maintenance headache down the road…

  Click Finish to open the Window painter and start the development ball rolling!


Container selection

Step 2: Design the Window surface using the XAML Layout pane

The first major difference between the classic PowerBuilder IDE and PB.Net is that both the WYSIWYG layout designer and the code that implements that layout are visible at the same time.  In PB.Net, there’s a horizontal splitbar separating the layout designer from the XAML pane in the same window.  What you’ll see when you click Finish is a window definition (the pbwpf:Window tag) for our WPF Calculator, with an empty Grid panel inside it. The Powerscript window (where you write functions and event scripts) is on a completely separate tabpage labelled “[Script]“.  

PB12.NET XAML painter

Since we’re focusing initially on the screen layout, let’s start by adding some row and column definitions into the Grid panel. The easiest way to accomplish this is to select the Grid panel, then position the mouse in the small area between the edge of the Grid and the window border.  You’ll see a gridline appear inside the grid, and it will place itself permanently when you click the left mouse button.  Our calculator will require a 4X6 grid, for a total of 24 cells.  Here’s what you’ll see after you place the four vertical gridlines.

Grid - step 1

Watch the XAML pane as you click in the visual painter.  You’ll see PB.Net building the ColumnDefinition tags right before your eyes…  Should you make a mistake and add an extra column, it can be deleted it by simply dragging the icon from the header (that little orange triangle) off the surface of the grid.  Or, you can just edit the XAML directly and delete the entire ColumnDefinition tag.  

Notice that the grid columns aren’t evenly sized either.  The behavior we’d like is for them to resize themselves automatically as the window changes shape, but it’s hard to get that exactly right with the mouse.  Well, look at the Width parameters in the XAML.  The number part indicates the initial size, and the trailing “*” indicates that the cells should resize with the Grid.  If we want them evenly spaced, just remove the integer parts so that the Width parameter is simply “*”.

Now create a RowDefinition tag by clicking in the vertical border area to the right or left side of the Grid. Just do one for now, and place it anywhere along the side of the Grid.  PB.Net will create two RowDefinition tags in the XAML. 

Edit the Width property of both tags and change it to “*” – the horizontal gridline will reposition itself to the center of the grid automatically.  And just so you can truly appreciate the power of direct XAML editing, copy one of the RowDefinition tags to the clipboard, then paste it below the existing tag four more times, for a total of six.  The final result should look something like this:

Finished Grid panel


Step 3: Place the Button and SingleLineEdit controls inside the Grid

In this step, we’ll add one SLE control and 20 CommandButton controls to the grid, and our calculator will start taking shape.  The key to working with a grid is to understand that the row and column numbers start at 0, not 1.  Let’s place the TextBox into row 0 of the grid, and set it to span all four columns.

Hover your mouse over the ToolBox widget in the upper right-hand corner, and it will magically slide into view.  Clicking the “pin” icon will cause it to stay in place, otherwise it will close when the mouse moves away.  Click the TextBox control, and then click the mouse into the upper left-hand cell of the Grid (row 0, column 0).  An SLE control appears in the cell with all sorts of arrows and icons surrounding it, and the pbpwf:SingleLineEdit tag gets created in the XAML.  The Grid.ColumnSpan attribute defaults to “2″ – change it to “4″ in the XAML, or just drag the SLE wider until it touches the right-hand wall of the grid (in column 3).  In either the XAML or the properties panel, change the name to “sle_result”, the taborder to “0″, and the text to “0″.  

Change the TextAlignment property to Right, and the TextSize to 18.  This can either be done in the Properties pane, or in the XAML itself.  The Intellisense feature will auto-select the property as soon as you’ve typed enough characters for it to recognize it.

Notice the Margin property.  It’s some seemingly random collection of four comma-separated digits.  These indicate the size of the area between the left, top, right, and bottom edges of the control to its immediate container – in this case that would be the RowDefinition element.  Change that property to “4,4,4,4″ and see how that looks.

Lastly, to help differentiate the background of the result SLE from the window itself, let’s change the window background color to blue.  Position the cursor in the XAML pane right before the closing “>” character of the Window tag. It should be the one on line 6, just before the <Grid> opening tag.  Press the spacebar to initiate Intellisense, then “B” to select the first property that starts with “B”, (which happens to be “Backcolor”), then TAB to select the property and position the cursor in the attribute value.  Press “B” to select the colors that start with B, then scroll down to select “Blue”.  It’s that easy! 

It should look something like this:

PB12.Net calculator grid

I’ve written enough for this post, so we’ll continue in the next installment with the commandButtons and the PowerScript and get this calculator working!




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 ...