SYS-CON MEDIA Authors: Liz McMillan, Elizabeth White, Pat Romanski, Yeshim Deniz, Courtney Abud

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!

 

Enjoy!

-Paul- 

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
At CloudEXPO Silicon Valley, June 24-26, 2019, Digital Transformation (DX) is a major focus with expanded DevOpsSUMMIT and FinTechEXPO programs within the DXWorldEXPO agenda. 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 business. Only 12% still survive. Similar percentages are found throug...
Docker is sweeping across startups and enterprises alike, changing the way we build and ship applications. It's the most prominent and widely known software container platform, and it's particularly useful for eliminating common challenges when collaborating on code (like the "it works on my machine" phenomenon that most devs know all too well). With Docker, you can run and manage apps side-by-side - in isolated containers - resulting in better compute density. It's something that many developer...
Modern software design has fundamentally changed how we manage applications, causing many to turn to containers as the new virtual machine for resource management. As container adoption grows beyond stateless applications to stateful workloads, the need for persistent storage is foundational - something customers routinely cite as a top pain point. In his session at @DevOpsSummit at 21st Cloud Expo, Bill Borsari, Head of Systems Engineering at Datera, explored how organizations can reap the bene...
Serverless Architecture is the new paradigm shift in cloud application development. It has potential to take the fundamental benefit of cloud platform leverage to another level. "Focus on your application code, not the infrastructure" All the leading cloud platform provide services to implement Serverless architecture : AWS Lambda, Azure Functions, Google Cloud Functions, IBM Openwhisk, Oracle Fn Project.
As you know, enterprise IT conversation over the past year have often centered upon the open-source Kubernetes container orchestration system. In fact, Kubernetes has emerged as the key technology -- and even primary platform -- of cloud migrations for a wide variety of organizations. Kubernetes is critical to forward-looking enterprises that continue to push their IT infrastructures toward maximum functionality, scalability, and flexibility.
At CloudEXPO Silicon Valley, June 24-26, 2019, Digital Transformation (DX) is a major focus with expanded DevOpsSUMMIT and FinTechEXPO programs within the DXWorldEXPO agenda. 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 business. Only 12% still survive. Similar percentages are found throug...
AI and machine learning disruption for Enterprises started happening in the areas such as IT operations management (ITOPs) and Cloud management and SaaS apps. In 2019 CIOs will see disruptive solutions for Cloud & Devops, AI/ML driven IT Ops and Cloud Ops. Customers want AI-driven multi-cloud operations for monitoring, detection, prevention of disruptions. Disruptions cause revenue loss, unhappy users, impacts brand reputation etc.
In 2014, Amazon announced a new form of compute called Lambda. We didn't know it at the time, but this represented a fundamental shift in what we expect from cloud computing. Now, all of the major cloud computing vendors want to take part in this disruptive technology. In his session at 20th Cloud Expo, John Jelinek IV, a web developer at Linux Academy, will discuss why major players like AWS, Microsoft Azure, IBM Bluemix, and Google Cloud Platform are all trying to sidestep VMs and containers...
Serverless applications increase developer productivity and time to market, by freeing engineers from spending time on infrastructure provisioning, configuration and management. Serverless also simplifies Operations and reduces cost - as the Kubernetes container infrastructure required to run these applications is automatically spun up and scaled precisely with the workload, to optimally handle all runtime requests. Recent advances in open source technology now allow organizations to run Serv...
Serverless Computing or Functions as a Service (FaaS) is gaining momentum. Amazon is fueling the innovation by expanding Lambda to edge devices and content distribution network. IBM, Microsoft, and Google have their own FaaS offerings in the public cloud. There are over half-a-dozen open source serverless projects that are getting the attention of developers.
The benefits of automated cloud deployments for speed, reliability and security are undeniable. The cornerstone of this approach, immutable deployment, promotes the idea of continuously rolling safe, stable images instead of trying to keep up with managing a fixed pool of virtual or physical machines. In this talk, we'll explore the immutable infrastructure pattern and how to use continuous deployment and continuous integration (CI/CD) process to build and manage server images for any platform....
If you are part of the cloud development community, you certainly know about “serverless computing,” almost a misnomer. Because it implies there are no servers which is untrue. However the servers are hidden from the developers. This model eliminates operational complexity and increases developer productivity. We came from monolithic computing to client-server to services to microservices to the serverless model. In other words, our systems have slowly “dissolved” from monolithic to function-...
Containers and Kubernetes allow for code portability across on-premise VMs, bare metal, or multiple cloud provider environments. Yet, despite this portability promise, developers may include configuration and application definitions that constrain or even eliminate application portability. In this session we'll describe best practices for "configuration as code" in a Kubernetes environment. We will demonstrate how a properly constructed containerized app can be deployed to both Amazon and Azure ...
Atmosera delivers modern cloud services that maximize the advantages of cloud-based infrastructures. Offering private, hybrid, and public cloud solutions, Atmosera works closely with customers to engineer, deploy, and operate cloud architectures with advanced services that deliver strategic business outcomes. Atmosera's expertise simplifies the process of cloud transformation and our 20+ years of experience managing complex IT environments provides our customers with the confidence and trust tha...
Is advanced scheduling in Kubernetes achievable?Yes, however, how do you properly accommodate every real-life scenario that a Kubernetes user might encounter? How do you leverage advanced scheduling techniques to shape and describe each scenario in easy-to-use rules and configurations? In his session at @DevOpsSummit at 21st Cloud Expo, Oleg Chunikhin, CTO at Kublr, answered these questions and demonstrated techniques for implementing advanced scheduling. For example, using spot instances and co...