SYS-CON MEDIA Authors: Pat Romanski, Gary Arora, Zakia Bouachraoui, Yeshim Deniz, Liz McMillan

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
Every organization is facing their own Digital Transformation as they attempt to stay ahead of the competition, or worse, just keep up. Each new opportunity, whether embracing machine learning, IoT, or a cloud migration, seems to bring new development, deployment, and management models. The results are more diverse and federated computing models than any time in our history.
On-premise or off, you have powerful tools available to maximize the value of your infrastructure and you demand more visibility and operational control. Fortunately, data center management tools keep a vigil on memory contestation, power, thermal consumption, server health, and utilization, allowing better control no matter your cloud's shape. In this session, learn how Intel software tools enable real-time monitoring and precise management to lower operational costs and optimize infrastructure...
"Calligo is a cloud service provider with data privacy at the heart of what we do. We are a typical Infrastructure as a Service cloud provider but it's been designed around data privacy," explained Julian Box, CEO and co-founder of Calligo, in this interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA.
Isomorphic Software is the global leader in high-end, web-based business applications. We develop, market, and support the SmartClient & Smart GWT HTML5/Ajax platform, combining the productivity and performance of traditional desktop software with the simplicity and reach of the open web. With staff in 10 timezones, Isomorphic provides a global network of services related to our technology, with offerings ranging from turnkey application development to SLA-backed enterprise support. Leadin...
While a hybrid cloud can ease that transition, designing and deploy that hybrid cloud still offers challenges for organizations concerned about lack of available cloud skillsets within their organization. Managed service providers offer a unique opportunity to fill those gaps and get organizations of all sizes on a hybrid cloud that meets their comfort level, while delivering enhanced benefits for cost, efficiency, agility, mobility, and elasticity.
DevOps has long focused on reinventing the SDLC (e.g. with CI/CD, ARA, pipeline automation etc.), while reinvention of IT Ops has lagged. However, new approaches like Site Reliability Engineering, Observability, Containerization, Operations Analytics, and ML/AI are driving a resurgence of IT Ops. In this session our expert panel will focus on how these new ideas are [putting the Ops back in DevOps orbringing modern IT Ops to DevOps].
Darktrace is the world's leading AI company for cyber security. Created by mathematicians from the University of Cambridge, Darktrace's Enterprise Immune System is the first non-consumer application of machine learning to work at scale, across all network types, from physical, virtualized, and cloud, through to IoT and industrial control systems. Installed as a self-configuring cyber defense platform, Darktrace continuously learns what is ‘normal' for all devices and users, updating its understa...
Enterprises are striving to become digital businesses for differentiated innovation and customer-centricity. Traditionally, they focused on digitizing processes and paper workflow. To be a disruptor and compete against new players, they need to gain insight into business data and innovate at scale. Cloud and cognitive technologies can help them leverage hidden data in SAP/ERP systems to fuel their businesses to accelerate digital transformation success.
Concerns about security, downtime and latency, budgets, and general unfamiliarity with cloud technologies continue to create hesitation for many organizations that truly need to be developing a cloud strategy. Hybrid cloud solutions are helping to elevate those concerns by enabling the combination or orchestration of two or more platforms, including on-premise infrastructure, private clouds and/or third-party, public cloud services. This gives organizations more comfort to begin their digital tr...
Most organizations are awash today in data and IT systems, yet they're still struggling mightily to use these invaluable assets to meet the rising demand for new digital solutions and customer experiences that drive innovation and growth. What's lacking are potent and effective ways to rapidly combine together on-premises IT and the numerous commercial clouds that the average organization has in place today into effective new business solutions.
Keeping an application running at scale can be a daunting task. When do you need to add more capacity? Larger databases? Additional servers? These questions get harder as the complexity of your application grows. Microservice based architectures and cloud-based dynamic infrastructures are technologies that help you keep your application running with high availability, even during times of extreme scaling. But real cloud success, at scale, requires much more than a basic lift-and-shift migrati...
David Friend is the co-founder and CEO of Wasabi, the hot cloud storage company that delivers fast, low-cost, and reliable cloud storage. Prior to Wasabi, David co-founded Carbonite, one of the world's leading cloud backup companies. A successful tech entrepreneur for more than 30 years, David got his start at ARP Instruments, a manufacturer of synthesizers for rock bands, where he worked with leading musicians of the day like Stevie Wonder, Pete Townsend of The Who, and Led Zeppelin. David has ...
Darktrace is the world's leading AI company for cyber security. Created by mathematicians from the University of Cambridge, Darktrace's Enterprise Immune System is the first non-consumer application of machine learning to work at scale, across all network types, from physical, virtualized, and cloud, through to IoT and industrial control systems. Installed as a self-configuring cyber defense platform, Darktrace continuously learns what is ‘normal' for all devices and users, updating its understa...
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.
Addteq is a leader in providing business solutions to Enterprise clients. Addteq has been in the business for more than 10 years. Through the use of DevOps automation, Addteq strives on creating innovative solutions to solve business processes. Clients depend on Addteq to modernize the software delivery process by providing Atlassian solutions, create custom add-ons, conduct training, offer hosting, perform DevOps services, and provide overall support services.