Uw winkelwagen bevat geen artikelen.

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

Modernize your application with Ext JS 7.0

By Margreet van Muyden 9 juli 2019 8 Views No comments

As an Engineer at Sencha, I spend a lot of time visiting customers, screen-sharing with them, and helping them build awesome looking UIs. One trend I see within our customer base is the need to extend the lifespan of these web applications.

The need for businesses to reach their customers and employees through web applications is well established and common to most business sectors. Businesses are investing more in each web app they build and expect apps to provide long term value, both internally and to their client base. Web apps are becoming the new Enterprise Application.

I see a lot of Ext JS version 5.x and 6.x apps in production that are feature rich, do the job required, but are starting to get a bit long in the tooth. As more and more users have become familiar with web apps, the bar for quality, usability and application look and feel is quite high. In fact, many of the legacy apps are now overdue for a complete rework.

If you are using Ext JS 5 or Ext JS with a Classic Toolkit application, the release of Ext JS 7 provides a simple, low-cost way to modernize the look & feel of your application with just 2 lines of code!

When you migrate to Ext JS 7 you will be able to use the new modern looking Material Theme for Classic Toolkit. This theme utilizes Material Design developed by Google that describes visual components and layout of an application, possible interactions, and the unified expression of qualities like color, shape, and motion. Material design is not just about the visual aspects of an app, but also about motion. What makes this new theme interesting, are it’s guidelines on interface motion, giving us developers the opportunity to not only produce a bright, shiny, new UI, but also use motion to give the end user a much improved experience.

You would need to literally modify 2 lines of code in your application to take full advantage of the Material Design

  • First, reference the new NPM package @sencha/ext-classic-theme-material in your package.json file (in case your are using modern tooling):
    <span class="st0">"dependencies"</span><span class="sy0">:</span> <span class="br0">{</span>
    <span class="st0">"@sencha/ext"</span><span class="sy0">:</span> <span class="st0">"~7.0.0"</span><span class="sy0">,</span>
    <span class="st0">"@sencha/ext-classic"</span><span class="sy0">:</span> <span class="st0">"~7.0.0"</span><span class="sy0">,</span>
    <span class="st0">"@sencha/ext-classic-theme-material"</span><span class="sy0">:</span> <span class="st0">"~7.0.0"</span><span class="sy0">,</span>
    <span class="br0">}</span><span class="sy0">,</span>
  • Second, specify the new theme for your build profile in app.json file:
    <span class="st0">"classic-material"</span><span class="sy0">:</span> <span class="br0">{</span>
    <span class="st0">"toolkit"</span><span class="sy0">:</span> <span class="st0">"classic"</span><span class="sy0">,</span>
    <span class="st0">"theme"</span><span class="sy0">:</span> <span class="st0">"theme-material"</span>
    <span class="br0">}</span><span class="sy0">,</span>

And re-build your application. Done!

New Material theme for Classic Toolkit (as well as Material theme for Modern toolkit) supports CSS variables, and provides APIs to get and set colors. It is now possible for you to make a color picker with only verified material colors. You can live update the look and feel of your application without the need of an external server or Sencha Cmd.
The material theme provides APIs to get colors that give you a nested object with all the material colors and weights.

Ext.<span class="me1">theme</span>.<span class="me1">Material</span>.<span class="me1">getColors</span><span class="br0">(</span><span class="br0">)</span>

The material theme provides you with APIs to set colors that can be used as follows:

Ext.<span class="me1">theme</span>.<span class="me1">Material</span>.<span class="me1">setColors</span><span class="br0">(</span><span class="br0">{</span>
    <span class="st0">'darkMode'</span><span class="sy0">:</span> darkMode<span class="sy0">,</span>
    <span class="st0">'base'</span><span class="sy0">:</span> base <span class="sy0">||</span> me._materialBaseColor<span class="sy0">,</span>
    <span class="st0">'accent'</span><span class="sy0">:</span> accent <span class="sy0">||</span> me._materialAccentColor
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>

Justifying using resources to upgrade an existing app can be a difficult sell, but moving from v5 or v6 to Ext JS 7.0 should be a simple step. Implementing the material design theme will give your users a better experience and extend the life of your application. If you need any assistance putting a bright, new, shiny face on your app, contact me for help.

Try Ext JS 7.0
Check our special offers valid until August 31, 2019:
Ext JS Single Developer Perpetual license incl. 36 months subscription
Ext JS Perpertual 5-pack license incl. 12 months subscription

Sencha Architect: Fast Prototyping, Happier Users

By Margreet van Muyden 17 april 2019 74 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!

UniRadio - Radio Automatiseringssysteem geschreven door Patrick Sterk

By Margreet van Muyden 23 maart 2018 2901 Views No comments


Mijn naam is Patrick Sterk, 29 jaar en software ontwikkelaar in de taal object pascal of te wel: Delphi. In dit artikel zal ik dieper in gaan in het ontstaan van het radio automatiseringssysteem genaamd UniRadio en de achterliggende techniek.

Jaren 90

Met de introductie van het Dalet systeem halverwege de jaren 90 en het automatiseren van radiostations, is er (in Nederland) als het ware een standaard geïntroduceerd destijds waarbij getracht is om de radiostudio waar mogelijk te visualiseren. Het systeem werd uiteindelijk een dermate succes dat vrijwel elk nationaal en regionaal radiostation gebruik maakte van dit systeem. Dalet(5.x) was gebaseerd op een Sybase database server, vereiste(zeker in de 4.xx versies) een dure digigram audio kaart en is ontwikkelt in Visual C . Het had ook een aantal nadelen: Het was duur, het vergt veel onderhoud en niet altijd stabiel. Naar mate de tijd vorderde en de techniek vooruit ging raakte het systeem steeds sneller verouderd en kon het niet meer mee met de huidige tijd, waardoor er een aantal alternatieve systemen zijn ontwikkelt, waaronder UniRadio.

Het UniRadio project dat wordt ontwikkelt in de meest recente Delphi versie en is een combinatie van een radio hobby, software development en behoefte aan een goedkoper systeem. Met dit project probeer ik een middenweg te vinden tussen de grootte automatiseringssystemen en de ‘kleine’ gebruiker. Met ‘de kleine gebruiker’ doel ik op thuis gebruik, op een locatie set en of internet radio stations, zodat het voor iedereen toegankelijk kan zijn. Uiteraard is het zo dat er op internet een lijst aan software te vinden is welke gratis zijn te downloaden en in te zetten zijn als automatiseringssysteem. In dergelijke systemen ontbreken(naar mijn inziens) een aantal punten waardoor het in mijn ogen niet aan mijn eisen voldoet. Met een eigen ontwikkeling heb je uiteraard de touwtjes letterlijk in handen en geeft het de vrijheid om te ontwikkelen waarvan ik denk dat, dat een goede toevoeging is aan het systeem zonder afhankelijk te zijn van derde en of andere software ontwikkelaars en de daarmee bijkomende kosten. De enigste beperking is mijn eigen kennis en kunde waar ik overigens tot op heden nog niet tegen aan gelopen ben.

Een onderdeel wat o.a. een succes maakte van het oude Dalet systeem en tevens is ontwikkelt in UniRadio, is het visualiseren van de mengtafel in de studio. Hiervoor had men een grafische module ontwikkeld waarbij er twee audio sporen werden weergegeven, welke je kunt vergelijken met twee faders op je mengtafel. Met de module was het mogelijk om visueel overgangen te maken en voor te beluisteren eer deze ook daadwerkelijk on-air te horen zou zijn. Een bijkomende mogelijk was om jingles of ingesproken teksten(z.g. voicetracks) tussen de overgangen visueel te plaatsen en deze precies te positioneren tussen de muziek. Met deze grafische optie is tevens ook makkelijker om audio effecten toe te passen, zoals het aanpassen van het tempo, pitch, knippen, volume en / of VST effecten.


Alle modules binnen het systeem werken samen; dit zowel buiten of tijdens de uitzending, maar zijn niet

LPlaylistManager := Core.CreatePlaylistManager(Owner);

afhankelijk van elkaar om te kunnen opereren. Zo is het mogelijk audio en of tekst items vanuit bijvoorbeeld USB stick rechtstreeks in de playlist te droppen zonder tussenkomt van de database. Overigens is het desgewenst mogelijk om te audio bestanden tijdens het droppen toe te voegen aan de onderliggende database waardoor de items hergebruikt kunnen worden. De navigator is een van de hoofd modules binnen het systeem. Hier wordt de uiteindelijke uur planning ingeladen inclusief de eventueel ingeplande reclameblokken, nieuws, weer & verkeer of andere eventueel op tijd geplande events. Op technisch vlak heb ik er voor gekozen om elke module welke voorzien is van een lijst(playlist) te voorzien van een PlaylistManager.

Deze PlaylistManager bevat alle items in de playlist inclusief de benodigde functionaliteit om bijvoorbeeld te bepalen welk item als eerst volgende afgespeeld dient te worden. Zodoende is elk zichtbaar item in de playlist van het type TPlaylistItem. Op basis van de ingevulde properties kan worden bepaald met wat voor item ik te maken heb. Zo kan een playlist item een blokheader, jingle, blokitem of we te maken hebben met een variabel duration item, zoals bijvoorbeeld nieuws, weer & verkeer. Diezelfde playlistmanager kan worden koppelt aan de grafische mix editor, waardoor het eenvoudig wordt om de bijhorende playlistitems te bewerken.


De hele programmering van muziek tot reclame/event blokken komen in zijn geheel samen in de Log Editor. Vanuit deze module worden de navigator en/of singleplayers gevoed met voor hun op dat moment geldende playlist. In Log Editor kunnen uiteraard ook wijzigingen worden aangebracht in de playlist. De playlist kan zowel handmatig in elkaar worden gezet alsmede worden ingelezen vanuit een externe playlist scheduler(zoals stationplaylist).

Hardware & Techniek

Zoals eerder vermeld ontwikkel ik het systeem in de meest recente Delphi professional versie. Op het moment van schrijven is dat Delphi 10.2.1. Als data opslag heb ik gekozen voor Microsoft SQL Server 2016 in combinatie met een ORM framework van Devart, genaamd: Entity framework. Als audio engine heb ik gekozen voor de engine van Un4seen(bass.dll). Het hele systeem bouw ik rondom een singleton core object welke de toegang verleend aan de diverse systeem objecten, zoals bijvoorbeeld:

  • Core.AudioEngine.Play(TPlaylistItem);
  • Core.AudioEngine.Stop(TPlaylistItem);
  • Core.AudioEngine.Seek(TPlaylistItem, aScrollValue: integer);
  • Core.AudioEngine.MuteDevice(TOutputDevice);
  • Core.AudioEngine.UpdateStopPosition(TPlaylistItem);
  • Core.SettingsManager.PropertyName(Read/Write);
  • Core.SettingsManager.Init;
  • Core.SettingsManager.Save;
  • Core.Utils.functions;

‘Alleen tekenen van je ziet’

for LCounter := 0 to Fragmenten.count -1 do

waarbij Fragmenten een TObjectList<TAudioFragment> is.

  • Threading
    Naast de core opbouw maak ik tevens veelvuldig gebruik van threads(OnniThreadLibrary). De meeste hiervan zijn parallel threads in de vorm van Async(procedure).AWait(procedure), zodat de software overweg kan met meerdere cores in de onderliggende CPU. Deze methode gebruik ik onder andere voor het inlezen van data, audio bestanden, checks en polling.

Omdat de logica geschieden is van de User interface, kan ik de user interface zonder problemen aanpassen. Voor het opbouwen van de user interface heb ik gekozen om gebruik te maken van DevExpress VCL componenten. Het TcxGrid is een component dat veelvuldig terug komt in de applicatie waaronder in de Navigator, Singleplayers, LogEditor e.t.c. Daarnaast is het toepassen van skins een stuk eenvoudiger geworden evenals het aanpassen van de GUI kleuren. In de toekomst zal het mogelijk worden om je eigen GUI indeling te maken, zodat software naar persoonlijke smaak kan worden ingedeeld.

Muziek starten met de functietoetsen of met de muis, dat kan. Nog makkelijker wordt het als de software kan communiceren met diverse broadcast consoles. Het systeem heeft momenteel ondersteuning voor WheatNET, D&R, Velleman USB en de LabJack. Momenteel werk ik aan ondersteuning voor DHD, IO Warrior en de D&R Airmate. Om dit eenvoudig te bewerkstelligen ben ik bezig om een HAL(Hardware access layer) te implementeren waarbij het mogelijk wordt om eenvoudig nieuwe hardware aan het systeem te kunnen koppelen.

Verbinden en gebeurtenissen
In tijden van socialmedia, API’s en koppelingen, is UniRadio een open systeem. Het bevat mogelijkheden om data te exporteren naar XML en weer in te lezen in het systeem, koppelen met overige playout systemen en complete playlisten(inclusief audio bestanden) uit te wisselen tussen UniRadio gebruikers. Momenteel ben ik eveneens met een webportaal bezig om vanaf afstand inzicht te krijgen in playlisten en aan te passen. Buiten de communicatie met de buitenwereld heb ik er voor gekozen om gebeurtenissen te implementeren in het systeem. Om een voorbeeld te noemen: Indien een audio bestand fysiek wordt gewist en het betreffende item staat gepland, dan zal dit item rood kleuren en de status zal worden gewijzigd in ‘niet beschikbaar’.

​Delphi Meetup in The Netherlands

By Margreet van Muyden 14 februari 2018 660 Views No comments

Last Tuesday we kicked off with our first Delphi Meetup.

The Meetup was organized in conjunction with customer Ultraware and we were invited in their office in Assen in the north of The Netherlands. About 25 Delphi developers joined this Meetup.

After the warm welcome in the meeting area of the building we went up to the presentation room where one of their developers - André Mussche - showed us how to use the new protocol gRPC (protobuffer) where data minimalisation and realtime communication are key. The communication is realized on the basis of fixed defined contract and are bi-directional. gRPC is based on a contract with cross platform libraries and therefore universal. We learned about the use of this protocol with the strong combination of Golang and Delphi! Google for example is using this protocol themselves in Google Speech. We see more and more how important speech recognition is in software applicationsand it was great to see how you can add this extra dimension to your existing or new Delphi applications.

Techniques he used were gRPC: realtime bidirectional streaming (http2 with websockets as fallback, compact data with protobuffer, streaming Google Speech demo: intermediate results during talking, incl. an Android app demo, Delphi server + client implementation, etc. and that was fun!

After his presentation it was time for coffee and tea again and we went to the meeting room where Serge de Mul - owner of Ultraware - told us more about the one overarching control system they developed for their building. This system works together with all existing systems like ventilation, heating, lighting and security systems. When the office is not used or even when a room is empty all power is switched off by this system. A energy saving of 90% as a result.

Jeroen Pluimers was the second presenter and his subject was Security.
Security is a hot item, privacy laws are changing and becoming stricter. Jeroen told us how to use software and protocols in a secure way. How important the setup of your servers and data is.Every protocol has his own specific pitfalls in terms of safety and it is important to be aware of this during your application development. He showed a library of a SFTP-protocol he wrapped himself to use within Delphi. Because we all know - data leaks are fatal.

After this presentation it was Pizza time! And a great moment for everyone to talk to each other, share ideas and have fun.

With special thanks to Ultraware for their hospitality.