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
Cloud-based disaster recovery is critical to any production environment and is a high priority for many enterprise organizations today. Nearly 40% of organizations have had to execute their BCDR plan due to a service disruption in the past two years. Zerto on IBM Cloud offer VMware and Microsoft customers simple, automated recovery of on-premise VMware and Microsoft workloads to IBM Cloud data centers.
SYS-CON Events announced today that MIRAI Inc. will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. MIRAI Inc. are IT consultants from the public sector whose mission is to solve social issues by technology and innovation and to create a meaningful future for people.
While some developers care passionately about how data centers and clouds are architected, for most, it is only the end result that matters. To the majority of companies, technology exists to solve a business problem, and only delivers value when it is solving that problem. 2017 brings the mainstream adoption of containers for production workloads. In his session at 21st Cloud Expo, Ben McCormack, VP of Operations at Evernote, will discuss how data centers of the future will be managed, how th...
SYS-CON Events announced today that Enroute Lab will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Enroute Lab is an industrial design, research and development company of unmanned robotic vehicle system. For more information, please visit http://elab.co.jp/.
Today companies are looking to achieve cloud-first digital agility to reduce time-to-market, optimize utilization of resources, and rapidly deliver disruptive business solutions. However, leveraging the benefits of cloud deployments can be complicated for companies with extensive legacy computing environments. In his session at 21st Cloud Expo, Craig Sproule, founder and CEO of Metavine, will outline the challenges enterprises face in migrating legacy solutions to the cloud. He will also prese...
Enterprises are moving to the cloud faster than most of us in security expected. CIOs are going from 0 to 100 in cloud adoption and leaving security teams in the dust. Once cloud is part of an enterprise stack, it’s unclear who has responsibility for the protection of applications, services, and data. When cloud breaches occur, whether active compromise or a publicly accessible database, the blame must fall on both service providers and users. In his session at 21st Cloud Expo, Ben Johnson, C...
Agile has finally jumped the technology shark, expanding outside the software world. Enterprises are now increasingly adopting Agile practices across their organizations in order to successfully navigate the disruptive waters that threaten to drown them. In our quest for establishing change as a core competency in our organizations, this business-centric notion of Agile is an essential component of Agile Digital Transformation. In the years since the publication of the Agile Manifesto, the conn...
DevOps is being widely accepted (if not fully adopted) as essential in enterprise IT. But as Enterprise DevOps gains maturity, expands scope, and increases velocity, the need for data-driven decisions across teams becomes more acute. DevOps teams in any modern business must wrangle the ‘digital exhaust’ from the delivery toolchain, "pervasive" and "cognitive" computing, APIs and services, mobile devices and applications, the Internet of Things, and now even blockchain.
As DevOps methodologies expand their reach across the enterprise, organizations face the daunting challenge of adapting related cloud strategies to ensure optimal alignment, from managing complexity to ensuring proper governance. How can culture, automation, legacy apps and even budget be reexamined to enable this ongoing shift within the modern software factory?
The Internet giants are fully embracing AI. All the services they offer to their customers are aimed at drawing a map of the world with the data they get. The AIs from these companies are used to build disruptive approaches that cannot be used by established enterprises, which are threatened by these disruptions. However, most leaders underestimate the effect this will have on their businesses. In his session at 21st Cloud Expo, Rene Buest, Director Market Research & Technology Evangelism at Ara...
WebRTC is great technology to build your own communication tools. It will be even more exciting experience it with advanced devices, such as a 360 Camera, 360 microphone, and a depth sensor camera. In his session at @ThingsExpo, Masashi Ganeko, a manager at INFOCOM Corporation, will introduce two experimental projects from his team and what they learned from them. "Shotoku Tamago" uses the robot audition software HARK to track speakers in 360 video of a remote party. "Virtual Teleport" uses a mu...
Trying to improve density, lower costs and run applications faster than before? Today, enterprises looking for a secure cloud strategy are increasingly turning to container-based Platform as a Service solutions for on-premises hosted DevOps. In her session at 21st Cloud Expo, Alise Cashman Spence, Offering Manager, Power Systems Cloud Solutions at IBM, will discuss the driving factors behind these cloud trends and how IBM customers are realizing exceptional performance, security and control for ...
Internet of @ThingsExpo, taking place October 31 - November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA, is co-located with 21st Cloud Expo and will feature technical sessions from a rock star conference faculty and the leading industry players in the world. The Internet of Things (IoT) is the most profound change in personal and enterprise IT since the creation of the Worldwide Web more than 20 years ago. All major researchers estimate there will be tens of billions devic...
Mobile device usage has increased exponentially during the past several years, as consumers rely on handhelds for everything from news and weather to banking and purchases. What can we expect in the next few years? The way in which we interact with our devices will fundamentally change, as businesses leverage Artificial Intelligence. We already see this taking shape as businesses leverage AI for cost savings and customer responsiveness. This trend will continue, as AI is used for more sophistica...
"When we talk about cloud without compromise what we're talking about is that when people think about 'I need the flexibility of the cloud' - it's the ability to create applications and run them in a cloud environment that's far more flexible,” explained Matthew Finnie, CTO of Interoute, in this SYS-CON.tv interview at 20th Cloud Expo, held June 6-8, 2017, at the Javits Center in New York City, NY.