You have no items in your shopping cart.

Product was successfully added to your shopping cart.
Swipe to the left

Posts tagged 'developer'

RSS Feed

Sencha Architect: Fast Prototyping, Happier Users

By Margreet van Muyden April 17, 2019 474 Views No comments

Web Sites

A lot of web application software these days feels dated: the same old tired user interfaces and boring, faintly obscure but eminently purchasable background art on a web page drawn by some anonymous art student. Or worse, so-called “stock footage.” But while old things aren’t necessarily bad, it doesn’t seem to work very well for user interfaces. Who amongst us wants to go back to using Windows 95? Updating user interfaces so that they can work cross-platform, for example, can be a challenge, as can giving users a modern look and feel.

I used to do development work as a Consultant, and one of the industries I focused on was healthcare IT and medical record systems. One of our software products was an electronic medical record system (EMR) called the Clinician Access System, which was built as a web application, and it was looking tired. Or, more accurately, the user interface was tired looking. On the other hand, the actual medical and business logic encoded into the middleware and the back-end was absolutely vital and essential. It was battle-tested, FDA cleared, and contained the work of dozens of physician’s and nurse’s heuristic experience. Our electronic medical records (EMR) system, though, looked like a relic from the early 2010’s, and some of our customer’s clinicians wanted new features implemented but using much more modern data display UI components.

I used to use a treasure chest of tools like Adobe, Dreamweaver (2004 called, they want their software back), and a bunch of story-boarding (we use Agile/Scrum) and wireframing software to show users prospective user interfaces. If I was going to modernize the Clinician Access System, I wanted a way to do it so that each of our medical clinician customers could have it their way, but keep the essential logic in the background the same.

Back and Forth

I’ve grown tired of trying to design modern websites with ancient tools, and I’m not too keen on exporting/importing layouts and data, or worse, trying to keep the designs in sync as I iterate with my customers on UI design. Back and forth, from wireframing to programming tools. Investing in better wireframing tools didn’t really solve the problem.

After learning about the value of Ext JS Enterprise Edition which includes Architect (and Sencha Test) at no additional charge, I thought what better way to learn about a product and then write about it than to use it?

Nurses and doctors are very particular about UI design, it turns out, and like all professionals are not especially reticent to share their well-informed opinions. They’re driving into telehealth, they’re screaming at IT departments, and they’re trying very hard to not violate HIPAA laws while they fend off medical insurance companies and drug sales people. I needed something to use to design data-intensive, highly complex user interface elements that would minimize the potential for misunderstanding of data, was adaptable to different users and their Section 504 requirements, and most of all saved me schedule time.

Sencha Architect fits the bill. The key advantage of a visual builder is that it can generate best practices code efficiently as opposed to coding and recoding similar experiences over and over. Architect is a visual builder for Ext JS that helps web developers build applications faster and more efficiently with a drag-and-drop environment. I could prototype, hit build, show the user the UI, discuss it, change it (inside of Architect), and show them a different way to look at the data. Some customers liked the polished business look of the graphite theme, and I could change themes using Architect or Themer with ease, right in their conference rooms.

Figure 1: Graphite Theme showing drag and drop capabilities.

Architect comes bundled with several templates, samples apps, and a comprehensive toolbox of Ext JS classes and components. It also comes with the ability to use “mock-data”, reducing my need to create this example-only data yet providing a realistic look at the graphs and results.

Figure 2: Generate mock data dialog box saves a lot of time

We could show advanced UI capabilities such as Grids, Navigator charts to display patient trend data, data analysis Graphs that give the clinician a quick perspective on trend lines, and so much more that comes in Ext JS.

Not only could I adhere to my customer’s corporate look and feel requirements with Theming, I could create any look they can imagine, show it to them, and then run the actual code for them. With the ability to modify the UI quickly, use mock-up data, and show the user, they tend to be impressed that we can offer all of this to them and their applications. The voice of the customer gets instantiated in the software in near real-time. Here’s what another Sencha customer (consultant) had to say about Architect:

There’s a way to generate modern user interfaces that doesn’t cause nodding off like Starbucks closed four hours ago, and there’s a way to experiment with modern UI that performs as well on desktop PC screens as they do on operating room surgical theatre monitors, or on Wall Street TV’s, or on your Apple iOS and Android phones. I suggest giving Sencha Architect a try for 30 days as part of our free Ext JS trial and see if it works for you.

We have great plans for Ext JS in terms of improving automatic code generation and the entire developer experience. Idera, our parent company, is taking the best ideas of our sister companies’ features and cross-pollinating it with our other products, and I think you will see some real synergies designed to make the development effort faster, better, smarter, easier, and more automated. But most of all, they should translate into business benefits for you, your enterprise, your customers, your reduced backlog. If you’re looking for faster, better ways to prototype and get your app done more quickly, try Architect and share your thoughts with us on the forum.

Written by

Alan Weiss is a Product Marketing Manager at Sencha. Prior to joining Sencha, Alan helped launch a software-intensive Internet of Things platform for Renesas Synergy. Prior to Renesas, Alan owned his own consulting company and led the charge on developing an advanced telehealth platform, Waldo Health. Alan has created and marketed everything from embedded devices and software to large-scale cloud-delivered enterprise web applications. He lives to ship products customers love!

Igniting the passion for Delphi for future generations

By Margreet van Muyden February 13, 2019 233 Views No comments

Tuesday, February 12, 2019 - in TMS Software office

A local school in the town where the TMS office is located organized last week for the kids a project where they could experience an entire day in a working place they dream of for their future career.
We had the pleasure to welcome Obama in our office. Obama is an 11-year-old boy who would love to become a software developer. We at TMS Software offered him the opportunity to follow us for a day and see what it takes to be a software developer. To inspire Obama and raise the interest of the next generation, we wanted to show Obama what a great variety of platforms we could tackle with our beloved tool Delphi and our frameworks. And what better way to captivate the youth then to create a game?

We choose the code-breaking game Mastermind that was invented in 1970 by Mordecai Meirowitz.
For those who don’t know the game, the purpose is to guess the code created by your opponent, or in this case the computer, by using four colored pegs. There are six colors to choose from and after each guess the opponent gives feedback on how many colors are correct and how many colored pegs are in the right position. In our game we decided that the red mark would indicate that the peg was in the correct place and a white mark if the color was used in the code, but not on the position you’ve guessed. To make it a little easier, we’ve also made sure that the colors are only used once and no empty spots are in the pattern.

If you already want to play our game before we explain how everything works, you can do this at www.tmssoftware.com/MasterMind.

As we wanted to show the power of our components and use it on almost every platform on the planet, it was a logical choice to work with our FNC components. This way we can use the same codebase to create a VCL, FMX and web application. A progressive web application to be precise. The advantages for a PWA application are clear:
- The application has a responsive design, this means that it adapts automatically to the device screen so it looks good on mobile and desktop.
- It is aware of status, it continues to work also when you are offline.
- You can install the application on mobile devices and Chrome OS, without going to a censored application store.
- It looks like a native application running full-screen with access to the hardware.
The only remark here is that it should initially be accessed via HTTPS. As you can see on both pictures below an example where you can see the web application on the left and then the downloaded app on the right which is launched as installed app and is running full-screen and offline.

So, a TMS web progressive web application is the best way to let Obama show what he built to all of his friends and family. It is as easy as sharing the link to play the game in an internet browser and you can also download and install it on your phone or tablet to have it available even when you are offline or want to save some mobile data.

To put the icing on the cake, we didn’t just create the game as progressive web application. This served also as a proof of concept to create a TMS Electron project created in Delphi from the same source code! This technology is in development in our lab and this will be part of the TMS WEB Core 1.2 Padua release. It allowed us to have an out-of-the-box working and installable desktop application for Windows, macOS (macOS 64-bit app to be precise), and on Linux in a matter of minutes. Here are some screenshots of this cross platform TMS Electron desktop application on Windows, macOS and Ubuntu. As we guess that many of you are eager to work with this awesome technology, we are working hard to make a TMS WEB Core 1.2 Padua Beta release available as soon as possible to our TMS ALL-ACCESS users.

Now to get to the programming. We started with the idea to create a control for one entry containing the four colored pins, a check button and the four markers that evaluate your guess.

A quick look in the wide range of FNC UI components we’ve already available, learned us that the TTMSFNCBitmapSelector looks the most similar component to what we want to create. So we took the custom FNC component this TTMSFNCBitmapSelector was derived from and started with the TTMSFNCDefaultSelector. This would be the basis for our FNC UI component TTMSFNCMasterMindControl. We built the board by creating 12 of our UI controls and placed them underneath each other with the use of top align.

It took us no effort to evenly space everything horizontally or to scale everything when the window is resized, as this is already done in the class TTMSFNCDefaultSelector. We just had to draw our images and the first line was already visible on our screen.

To get a little more in detail. We’ve created one row with five columns, where we use images to draw the four pegs with one TTMSFNCBitmapContainer, which contains the images for all the colors. The public property DataInteger that exists for every TTMSFNCCustomSelectorItem in the TTMSFNCDefaultSelector is used to hold the value of the selected color. The “Check” is just text shown in the item and the four check markers are drawn via TTMSFNCGraphics, where we just calculate the optimal size to draw four circles and fill the color of the ellipsis according to the number of correct pegs.
Then we checked how the interaction with mouse, keyboard and touch could be realized to ensure the game can be played on a variety of devices. With mouse or touch, consecutive clicks on each of the 4 positions cycles through the colors. We’ve added navigation between positions with the left and right arrow keys and cycling through color per position with arrow up and down. This UI behavior was again fairly easy to implement due to the fact that most of the behavior was already in the superclass.
We use the left and right arrow keys to navigate within our own control and as you can see below, you have the prove that this is very simple as the GetPreviousSelectableItem and GetNextSelectableItem are both functions from the TTMSFNCCustomSelector.

view plain text

  1. procedure TTMSFNCMasterMindControl.HandleKeyDown(var Key: Word;
  2. Shift: TShiftState);
  3. var
  4. dataInt: NativeInt;
  5. begin
  6. case Key of
  7. KEY_LEFT: SelectedItemIndex := GetPreviousSelectableItem;
  8. KEY_RIGHT: SelectedItemIndex := GetNextSelectableItem;
  9. KEY_UP:
  10. begin
  11. if (SelectedItemIndex >= 0) and (Items.Items[SelectedItemIndex].DataString = 'image') then
  12. begin
  13. dataInt := 1 + Items[SelectedItemIndex].DataInteger;
  14. if (dataInt > 6)then
  15. dataInt := 1;
  16. Items[SelectedItemIndex].DataInteger := dataInt;
  17. Invalidate;
  18. end;
  19. end;
  20. ….
  21. end;

The code to change the peg color from the mouse up handler override is:

view plain text

  1. procedure TTMSFNCMasterMindControl.HandleMouseUp(Button: TTMSFNCMouseButton;
  2. Shift: TShiftState; X, Y: Single);
  3. var
  4. dataInt: NativeInt;
  5. begin
  6. if Enabled then
  7. begin
  8. inherited;
  9. if (SelectedItemIndex >= 0) and (Items.Items[SelectedItemIndex].DataString = 'image') then
  10. begin
  11. dataInt := 1 + Items[SelectedItemIndex].DataInteger;
  12. if (dataInt > 6)then
  13. dataInt := 1;
  14. Items[SelectedItemIndex].DataInteger := dataInt;
  15. Invalidate;
  16. end;
  17. end;

We use the up and down keys to change the public DataInteger property of the selected item of type TTMSFNCCustomSelectorItem which changes the bitmap image of the selected peg in our DrawItemContent function. The code is:

view plain text

  1. procedure TTMSFNCMasterMindControl.DrawItemContent(AGraphics: TTMSFNCGraphics;
  2. ADisplayItem: TTMSFNCCustomSelectorDisplayItem);
  3. var
  4. di: TTMSFNCCustomSelectorItem;
  5. idx: Integer;
  6. bmp: TTMSFNCBitmap;
  7. pt1: TPointF;
  8. checkPinsRect: TRectF;
  9. side: Single;
  10. i: Integer;
  11. tempPCorrect: Integer;
  12. tempCCorrect: Integer;
  13. w, h: Single;
  14. s: string;
  15. begin
  16. inherited;
  17. di := ADisplayItem.Item;
  18. // draw the peg using a bitmapcontainer image
  19. if Assigned(di) and (di.DataString = 'image') then
  20. begin
  21. idx := di.DataInteger;
  22. AGraphics.BitmapContainer := BitmapContainer;
  23. case idx of
  24. 1: s := 'red';
  25. 2: s := 'blue';
  26. 3: s := 'yellow';
  27. 4: s := 'orange';
  28. 5: s := 'green';
  29. 6: s := 'purple';
  30. else s := 'empty';
  31. end;
  32. AGraphics.DrawBitmapWithName(ADisplayItem.Rect, s);
  33. end;
  34. // draw the score
  35. if Assigned(di) and (di.DataString = 'check') then
  36. begin
  37. w := ADisplayItem.Rect.Right - ADisplayItem.Rect.Left;
  38. h := ADisplayItem.Rect.Bottom - ADisplayItem.Rect.Top;
  39. if(w < h) then
  40. side := w / 2
  41. else
  42. side := h / 2;
  43. tempPCorrect := FPosCorrect;
  44. tempCCorrect := FColorCorrect;
  45. // retrieve scores
  46. for i := 0 to 3 do
  47. begin
  48. if(tempPCorrect > 0) then
  49. begin
  50. FTColors[i]:= gcRed;
  51. Dec(tempPCorrect);
  52. end
  53. else if (tempCCorrect > 0) then
  54. begin
  55. FTColors[i] := gcWhite;
  56. Dec(tempCCorrect);
  57. end
  58. else
  59. FTColors[i] := gcNull;
  60. end;
  61. // Mastermind row is active, so use active color
  62. if (Enabled = true) or (FPosCorrect = 4) then
  63. begin
  64. AGraphics.Fill.Color := activeColor;
  65. AGraphics.Stroke.Color := activeColor;
  66. end
  67. else
  68. begin
  69. AGraphics.Fill.Color := boardcolor;
  70. AGraphics.Stroke.Color := boardcolor;
  71. end;
  72. // draw 4 score circles in correct score color
  73. AGraphics.DrawRectangle(ADisplayItem.Rect);
  74. AGraphics.Stroke.Color := gcBlack;
  75. checkPinsRect := RectF(ADisplayItem.Rect.Left + 2, ADisplayItem.Rect.Top + 2, ADisplayItem.Rect.Left + side - 2, ADisplayItem.Rect.Top + side - 2);
  76. AGraphics.Fill.Color := FTColors[0];
  77. AGraphics.DrawEllipse(checkPinsRect);
  78. checkPinsRect := RectF(ADisplayItem.Rect.Left + 2, ADisplayItem.Rect.Top + side + 2, ADisplayItem.Rect.Left + side - 2, ADisplayItem.Rect.Top + (side * 2) - 2);
  79. AGraphics.Fill.Color := FTColors[1];
  80. AGraphics.DrawEllipse(checkPinsRect);
  81. checkPinsRect := RectF(ADisplayItem.Rect.Left + side + 2, ADisplayItem.Rect.Top + 2, ADisplayItem.Rect.Left + (side*2) - 2, ADisplayItem.Rect.Top + side - 2);
  82. AGraphics.Fill.Color := FTColors[2];
  83. AGraphics.DrawEllipse(checkPinsRect);
  84. checkPinsRect := RectF(ADisplayItem.Rect.Left + side + 2, ADisplayItem.Rect.Top + side + 2, ADisplayItem.Rect.Left + (side*2) - 2, ADisplayItem.Rect.Top + (side * 2) - 2);
  85. AGraphics.Fill.Color := FTColors[3];
  86. AGraphics.DrawEllipse(checkPinsRect);
  87. end;
  88. end;

As a last part we just had to implement some code to check the pattern and return an event if we did a guess. We then disable the FNC UI control for the active row on the board and enable the next row so we can move to the next step.
And that’s all for the component used in the game. Now we just have to create the form of the progressive web and Electron application and everyone can play the game anywhere, anytime. Just to show the power and the time we gained by using one of our custom FNC components, we’ve also created a VCL and FireMonkey application with the same code.

To conclude, Obama was very proud of the game he helped creating and named ‘oBama mind’ and he showed it to all of his classmates. We hope that this way, he could transmit the passion for software development to his classmates and inspire a future generation of Delphi developers. To illustrate the scope of this type of development with TMS WEB Core, Obama even showed it to his friends on his PlayStation 4, where you can play it on the built-in web browser. He said that now he is even more certain he wants to become a software developer!

We are one step closer to a future where Pascal programming is guaranteed.

The full source code for the Mastermind game that you can compile as VCL, FMX or Web core application is available for download.
As soon as TMS WEB Core v1.2 Padua will be released, you will also be able to compile it as an Electron Windows, macOS or Linux desktop application.

Blog by Gjalt Vanhauwaert