What's the use of the layout managers in the (new) GUI Builder of Codename One? - codenameone

I am trying to create a new project with the new GUI BUilder (I've already made hand-coded project). I watched Steve Hannah's tutorial about creating a sign-in form. If the sign-in form was hand-coded then it would have to use eg a Y-BoxLayout Manager. However in the tutorial everything is laid-out without resorting explicitly to this layout manager what I understand because the designer provides the layout.
But I wonder why new the GUI Builder offers such containers with specific layout managers ? What are the use cases when they should be used, and are they meant to be used as is (as ready-to-use examples) or the designer should remove the components inside with custom ones ?
Thanks in advance for the shed lights ;-)

The current version (3.7.2 and earlier) works best with a flat layout (i.e. not nesting subcontainers). The next release will include improvements that make it easier to work with nested layouts.
There are many reasons why you might want to use a nested layout. A couple of use-cases that come to mind are:
If you're laying out a form that has more than one logical section and you want to be able to lay them out independently. In this case using a couple of sub-containers that both use LayeredLayout themselves can make things a little easier.
If the layout has a nested list (i.e. box-layout-y) that you will populate in code at runtime with content that you load from a web-service, etc..

Related

Need to replace DevExpress Bootstrap for ASP.NET Core in project. Solution from experience? Rewrite with different framework like Vue? Smthn else?

We need to get rid of DevExpress Bootstrap Controls for ASP.NET Core from project.
What would be the easiest/cheapest/feastet solution?
To simply rewrite everything with a different framework like Angular/Vue/React?
Maybe there is a known framework/method of migrating to DevExpress ASP.NET Core Controls? Or to something else?
How many controls were used from DevExpress?
If you only used a few controls, then you only need a few replacements.
I would not call purchase of some controls from DevExpress a whole "framework", but that of only purchasing some controls to use with your project.
So, does the project use 3-5 or 50 of those DevExpress controls? (by using, I mean DIFFERENT kinds of controls).
If you only used a few, say like their GridView, then you would only need to find a replacement for their gridview control, or simply use the built-in one, and fancy it up with some css, and addtional options. (I would make a user control).
So, you want to determine what the controls used did, how many different controls were used, and then find some controls that have a great look and feel that you like.
Their grid controls are VERY nice, since they have some "really" nice filter options for the header of that grid control.
So, you need to find some control replacements, but how many did the project use will quite much determine scope here.
So, in place of say their tab control, then consider using the jQuery one. As noted, I would wrap say the jQuery.UI tab control into a user control, so then you can just drag + drop in that jQuery.UI "tab" control in place of the devExpress one.
Same goes for the multi-select combo box (dropdown list).
So, either you cobbile together some replacements of your own, or you find some replacemetns, or you buy some more controls from another vendor.
The challenge and issue will of course be that each of their controls has a specific object and event model.
However, that's not really any different then say if you started used sweet-alert, and now want to replace sweet-alert say with some jQuery.UI dialogs.
I would say that the real challenge of replacing their controls is often not so much finding a replacement, but finding something that has a great look and feel. The main huge wonderful bonus of the devExpress controls tends to be their look and feel. In other words, they had someone with REALLY good taste in terms of look and feel.
I mean, for years I used the ajaxtoolkit. (free, open source). it was and still remains a fantastic set of controls. The pop dialog, the tab control, the multi-select combo box, the HTML editor?
They are all great, but their HUGE downside is not the features, but the controls from that free toolkit look like something from the 1980's!!!
The popular jQuery.UI? Same thing, the controls look ugly and something designed by a un-employed rodeo clown living in a trailer park.
There is a HUGE but BEYOND huge reason that bootstap is so popular.
Know the answer?
Why of course bootstrap is popular for ONE big HUGE massive SIMPLE reason:
Bootstrap has a fantastic look + feel. (zero other reasons for bootstrap being popular!!).
If you ever hired a graphic artist to re-work the look and feel of your web site? Guess what? Their resulting work and suggestions will look like the default of bootstrap!!!
So, someone in the print and graphic design industry or someone with VERY good talent and great taste created the bootstrap system. So, when you use bootstrap, then you get fantastic looking results, results that normally would take a full time graphic artist on your staff.
Regardless, we are wondering off topic here.
The main issue you have to determine is how many controls were used from devExpress. Most of their controls do follow a similar object model as the base controls found in asp.net webform controls.
So, for example, jQuery.UI controls has a great set of features (a great set of UI components), but they look way too dated and old fashioned.
The issue you have is not that you want to replace some of the devExpress controls you used, but how much work it would be to replace say a dev-express "gridview" with another different grid control. Every single one of those controls used will not only require you to spend HUGE amounts of time finding a replacement, but I think the LARGER issue is finding something that don't look like it was created by someone living in mom's basement, or by that drunken un-employed rodeo clown that does not belong in our industry.
your issue is not finding some replacement controls, your issue is how much code and money (time and resources) you have available to replace those controls.
You can no more change a bunch of code in c# to then using say client side JavaScript can then you take some Pascal code, and covert that code to vb.net code.
There no more a replacement for those controls from dev-express then there is deciding tomorrow to re-write some server side code in vb.net to now being client side JavaScript code.
In fact, what I am quite much telling you?
How the computer and IT industry has worked for 50+ years has NOT change one bit, and it not change one bit if you decide to rip out some existing controls and replace them with different controls.
Its possible you are asking for something you never seen, never heard of, and thus are imagining some magic wand here, but those don't exist in our industry either, do they?
As I noted, for quite some time, I used the AjaxToolKit. Turns out that jQuery.UI has near EVERY the same kind of controls available. But, the massive difference is jQuery.UI controls are client side ones, but worse yet, they don't work the same as the AjaxToolKit ones. In other words, there is a nice "tab" control in AjaxToolkit, and there is a nice tab control in jQuery.UI. So, they both are tab control, but THEY are VAST different in their operations, how you use them, how they work.
However, both the jQuery.UI and the AjaxToolkit tab control?
My gosh, do they look like crap.
At least the jQuery.UI one can be easy bootstrapped styled.
Again, note how we not really now back to a JUST having a control replacement, but one that looks VERY nice and VERY tasteful out of the box, and a control that should take zero efforts on your part to obtain that great look and feel.
Want to know what product has those great looking controls and great look and feel out of the box?
the DevExpress ones!!!

How to add personal icons in Glade without polluting hierarchy

I've been looking for solutions for several weeks now, but I'm having a bit of trouble finding and understanding (in cases where I find documentation).
I'm currently developing an application for a school project. But I used a GtkToolPalette (https://developer.gnome.org/gtk3/stable/GtkToolPalette.html) so that the user can have icons to drag and drop into a drawing area. The problem is that first of all, these icons are very specific to what I want, so I can't find them in the icons that Glade/GTK3 already offers. Second, if I add all the icons one by one in Glade via the buttons on my GtkToolPalette it creates images each time (i.e. a lot) in the hierarchy of my objects, widgets and it completely pollutes my Glade workspace.
Is there a way to make all these additions cleanly. At the moment, I haven't found any method via glade. However, I finally found this https://developer.gnome.org/ThemedIcons/ but I don't really understand the method.
Does anyone know of an effective method?
Thank you in advance for your attention and your answers :)

How to reuse content with Sencha Touch

I want to build a mobile site in Sencha which showing HTML content on a tablet device, containing many objects/divisions/containers with similar layouts and properties.
Take this example window:
Is there a best practice or recommended way to achieve reusability and DRY for writing those containers in Sencha Touch 2?
What types of objects would you use? Does it make sense to use HTML div objects + CSS?
Also, does it make sense to use Sencha in this case?
Here is how you would achieve that layout using Sencha Touch:
Unfortunately it is pretty hard to explain, but hopefully it makes sense.
I've also created a very simple example of this layout, viewable here: http://www.senchafiddle.com/#jxiA8 (make sure you press Run).
As for which objects/components; they would all be Ext.Containers. Ideally you would use the MVC structure to create custom classes (which would extend Ext.Container) for each of these items.
This is definitely a great use case for Sencha Touch. It is great for creating rich applications like this.
Best approach to render the list of items in the Orange and Yellow containers is probably with a DataView.
Relying on itemTpl to draw each item as per the official documentation of the Ext.dataview.DataView component or using an item renderer, as per the dive into dataview article. (Note that the code in that article may not work as sencha as changed a lot between the different beta versions - #rdougan's associated demo on github may be more recent).
I did expand on the layout code contributed by #rdougan to add an example of how to implement the Reusable dataviews (gist).
That demo code also contains a quickly baked solution for data injection (applyStore and injectStore), so to make it possible to define an "OrangeContainer" once and only once and pass down different data for the "highlighted" and "list" versions of the views at the top and bottom of the screen, respectively. I have no idea whether this is a good or reliable way to do it. I would be interested in feedback on this.

Is there a way to find out what winform/wpf components a program uses?

I'm a complete novice in gui-programming and I'm looking for an easy way to visualize a data structure I have. I own another program that does a similar job and the component it uses seems like it would fulfill my purposes as well. So instead of testing out different components myself (Which would undoubtedly force me to learn a lot), I'm wondering if there's a fast way out of it.
Is there anyway to find out what specific wpf/winform component a program is using without asking author/having source code access?
Edit:
Looks like this, the area it's in is scrollable horizontally/vertically. The objects on it are selectable, moveable and have actions associated with their right-click menu. I want to visualize an undirected graph and have the possibility to interact with the nodes graphically.
Here's the control I'm talking about:
First step, I'd look at the assemblies the app references. If it references a dll from a component vendor (a simple search can figure this out), you can visit the vendor's website and check out their offerings.
If it is a custom control embedded within the application, and its a WPF app, I'd use Snoop.
(Image ganked from http://snoopwpf.codeplex.com/). Snoop can sniff out the visual tree of a WPF application at runtime and show you all the controls that make it up.
This is no standard control but some propritary one. You can have a look in the program folder of that program which dll's they use, chances are that you can use this dll in your own app. Note that the license of this application may forbid using the code!

Microsoft UI Automation Library Vs Coded UI Test

I'm very much new to Test Automation kind of thing. Recently I've been assigned to a project where I have to write an application (or, a script may be, I'm not sure) that will automate the UI testing of a CAD-like WPF application which misses lots of AutomationIds.
After doing a little searching on MSDN and other sources I'm a bit confused about whether I should use the Microsoft UI Automation Library or the new Coded UI Test feature included in VS2010. I'm not getting the clear picture of which one of these two applies in which scenarios, what advantages one has over the other and which one suits my purpose.
Please shade some light if you have experience/knowledge on the matter. Thanks in advance.
Basically Microsoft UIA is the new accesibility library in .Net 4.0. WPF applications and controls have built-in support for UIA through the AutomationPeer class.
Coded-UI test is a Record & Play automation tool which uses the Microsoft UIA Library underneath. Since being a tool compared to writing code in C# it improves QA productivity for recording more test cases.
For applications with automation support planned into it, Coded-Ui should be sufficient. If the AutomationIDs are missing make sure the controls have some unique property like Name. Use UIVerify or Inspect to check for this.
If NO unique property is avialble, there are the other below mentioned techniques you can use in combination with Coded-UI.
From an Event
When your application receives a UI Automation event, the source object passed to your event handler is an AutomationElement. For example, if you have subscribed to focus-changed events, the source passed to your AutomationFocusChangedEventHandler is the element that received the focus. For more information, see Subscribe to UI Automation Events.
From a Point:
If you have screen coordinates (for example, a cursor position), you can retrieve an AutomationElement by using the static FromPoint method.
From a Window Handle:
To retrieve an AutomationElement from an HWND, use the static FromHandle method.
From the Focused Control:
You can retrieve an AutomationElement that represents the focused control from the static FocusedElement property.
If you can leverage and use the Coded UI Test then go that route. Make sure to verify that your given configuration is supported.
The UI Automation Library resolves everything in the code behind. This then forces you to use a tool like UISpy to gain access to the controls internals so that you can then build out your test.
A Coded UI Test on the other hand still has code behind however it allows for the recording of steps through the given application which you are testing which will greatly increase the number of tests you can create.
UI Automation library is a low-level library. Usually, you don't want to write tests against it directly as it requires a pretty decent amount of work.
I would recommend looking at more high-level libraries. You mentioned one of them - Coded UI; another good choice would be White from TestStack. They both suits different kinds of projects. Coded UI is good when you don't want to invest a lot of efforts into your test suite. At the same time, it doesn't scale much so if you are going to write a lot of tests, you are better of choosing White.
Here I compare the two frameworks in more detail: Coded UI vs White
To complement the above responses, please look at CUITE that helps quite a bit and may be an appropriate approach for you.
I began 'rolling-my-own' 'semi-framework' using the CodedUITest library and devised a paradigm for separating the details of automation from the (C#) code.
Basically, I am creating a driver that reads what needs to be done from spreadsheet(s) where each line in it is a test step (or a pointer to a scenario in a different worksheet).
At present, incomplete, but promising, I have it working against a WPF application with partial success.
One of the main problems is that the developers neglected to identify controls uniquely and consistently.
Bey

Resources