Is it good to use a formbuilder? - user-interface

I've been doing web development / design for about five years now, and I was about to go onto Dreamweaver as I thought it would make it so much easier to make websites. Later on I heard that it is discouraged to use WYSIWYG editors to build websites as it add "unnecessary code" to your project. I then heard that if you try to write scripts in Dreamweaver, it messes it up.
Now I am trying to get into software development. I've downloaded Netbeans to play around in Java, and it offers some thing like .NET how I can just drag controls onto my GUI. The only programming I actually do is making the buttons do stuff. I don't see myself learning very much Java is I stick to this, but I don't see myself learning it anyway...
I know that I shouldn't be using this to learn, however I would like an opinion from somebody who has experience in software development.
Is using a formbuilder to build GUIs as bad, or worse, than using a WYSIWYG editor to build websites? Is this a good way to learn how to code software?

Form builders and WYSIWYSG's have their place. I think you'll find that many developers don't use them because most developers are control freaks. It also depends on the specific one your using and your target environment/language. It's not bad to use a form builder, but IMO you should learn how to create the UI elements programmatically before using one so you understand the properties and methods for the different controls. Also, the form builder is only useful to lay your UI out. The majority of the work will be the layers that cater to the UI logic.
There's nothing wrong with using them, but you'll likely need to access properties or methods of your controls in code to facilitate the presentation logic, so you'll still need to learn the controls you use.
Hope that helps.

Related

Haxe NME UI: Best practices for MVC application design

yesterday I stumbled across the Haxe NME project, which is a very promising idea. However, it is still not possible to build sophisticated UIs with this framework. In my opinion it seems to be a intimidating task to build a UI framework that targets so many different platforms, hence I think that this isn't a viable approach, because even old and mature UI frameworks like Qt and wxWidgets don't support so many platforms.
However, it could make sense to build a platform specific UI with help of some pretty UI designer tool and then connect the UI code to the UI agnostic code that has been written in Haxe. I don't know if this could work, because I couldn't find any example, but maybe someone who has already written some MVC Haxe code, that could be successfully connected to different platform specific UIs, would like to share his experiences. Thanks.
You say:
However, it is still not possible to build sophisticated UIs
Just because you haven't yet figured out how to do it doesn't mean it's not possible ;)
The reason it is possible is that in the Haxe ecosystem, the language and compiler is extremely consistent cross platform, NME/OpenFL provides a fairly strong cross platform rendering environment (HTML 5 has some quirks, but the others seem fairly strong) and so anything you build on top of these is going to cover a lot of platforms out-of-the-box. It's about being fairly high level - letting the compiler and the libraries take care of the platform quirks.
In MVC, the UI stuff is usually the "View". For View / UI frameworks, check out these libraries:
Stablex UI
NME/OpenFL, Cross Platform. Draws components using NME API. This is
the only one I've played with, but the demo works consistently on android,
flash, html5, native linux. Pretty impressive.
HaxeUI
NME, Cross Platform. Again, draws components on the stage.
Prime
Drawn using Flash API. Not sure if it has been ported cross platform yet.
See also Talk/Video from WWX conference and Slides
Guise
A really innovative way of being able to either draw the UI, or use native if available. Check out the blog post.
Basis
Another attempt at wrapping native components - has iOS and Android libraries so far. Pretty cool, but I haven't played with it yet.
For MVC, there are lots of options:
PrimeVC, mentioned above.
MMVC, based on the RobotLegs framework, but tailored for Haxe.
Lots of small options BBMVC PureMVC etc
The advantage of the MVC frameworks is that they separate your views from your application data (model) and logic (controller). Try to spend some time familiarising yourself with one of the MVC frameworks, and you'll see how you can write your apps in a way where you could use one of these, and then any of the various view engines - either native or NME-rendered. It can be a fairly steep learning curve, but this is how you build apps that are easily portable between different UI frameworks, and easily testable so you know they will scale as the app grows in complexity.
The main problem you seem to face is that there is no out of the box option that is complete and ready for you to use. The multitudes of project people are suggesting do what you want. You need to be willing to use them. A small project on github may be dropped. If so it will be dropped because jo one uses it so its up to people who would like to use it (ie: you) to keep it going.
Everyone can't siphon of others completed projects or nothing would ever be created. Participation is what opensource is about.
Doesn't make sense to have a unified UI for all platforms, every platform have diferent workflow, have you tryed to use a IOS listbox on windows , is simply ridiculous. On the other hand a good design could separate the view from the bussines logic and you can share the bussiness logic with all targets and tweak the views for every target. look at PureMVC
for a mvc example in Haxe

Which JavaScript framework to develop a client-side complex UI? Dojo, SproutCore, Cappuccino

I have been using Dojo and Dijit for more than a year to develop a browser-based IDE. Dojo is a great framework. But creating an IDE-like interface using Dojo is cumbersome and wastes a lot of time unless you are a CSS superman. I have a good understanding of HTML5, JavaScript, and CSS. Building the UI I needed required several CSS hacking that I found by trial and error. There was no systematic way to get from the UI design to the implementation and I am afraid to change the UI layout because any simple change can break the UI, mostly by adding irrelevant scroll-bars to Dijit panes where I do not need them. (the complex UI has 4-5 levels of nested panes including mostly border containers and content panes)
Recently I have come across SproutCore and Cappuccino, which have great demoes and their look and feel is more desktop-based. There has been several discussions comparing these two with each other. But none of them talk about how systematic and quick is it to get from UI design to implementation? Ideally, I should be able to implement the UI I want not more than a couple of days (Assuming that I know the framework), and changing them in the future should be easy.
The other difficulty with Dojo is that I have to work directly with DOM, to append and remove dijit widgets. While I do like to keep this flexibility, I wish I could use a higher level of abstraction to define the application UI. I have read about MVC in SproutCore and Cappuccino, but I am wondering if in practice the provided abstraction layer speeds up the UI development? or the provided layer is a fancy architecture that only increases the readability of the code? Will I lose the direct access to DOM if I build my UI using these abstractions?
Cheers,
Navid
Cappuccino is much higher-level. You write in Objective-J, not HTML/CSS/JavaScript. I personally do not recommend it as Objective-J is a niche language and you'd be stuck with something not widely-understood by everybody. You'll find it more difficult to look for answers to problems, and other people will have more difficulty in maintaining your code.
However, due to it being high level, it does shield you from the drudgery of programming in "standards" (i.e. HTML/CSS/JavaScript). Therefore, you should be able to develop UI's faster and easier, but you'll have to instead learn the ins-and-outs of Objective-J. All-in-all, not much to gain here, I suppose.
SproutCore, on the other hand, is HTML/CSS/JavaScript based, so you don't really have to relearn the basics. It follows the MVC model of separating UI and data concerns, so programming UI's should be easier.
My personal recommendation is to stick with Dojo -- 1.6 has come out, which has change-tracking, state-tracking and bining support. 1.7 is around the corner. The MVC module is improving fast. The next version, 2.0, will be quite awesome. It is being actively developed on, and so you won't be left behind.
Dojo can also be used with the Closure Compiler's Advanced Mode to make highly-compact, highly-optimized, fully-obfuscated builds for deployment. Other JavaScript-based frameworks are not as adaptable.
Cappuccino most definitely goes beyond just improving readability. If you don't want something to have a scrollbar in Cappuccino, don't give it one. That's pretty much the end of the story and one of the great advantages of using such a framework. In my experience, HTML and CSS is just an endless troubleshooting session. With Cappuccino things go where you say they should and stay there. And this is true across browsers as well (most of the time).
Furthermore you can, if you choose to, build your user interface using Interface Builder and Cappuccino's nib2cib utility. This makes it trivial both to initially lay out and to then later shuffle buttons and controls around.
Have you considered jQuery and the jQuery UI?

jquery or alike code generator

I'm looking for code generator that will help me to create mockup for web based GUI. I need to support tabs, buttons lists etc .. I don't care which technology used.
Something similar to MFC/QT or any another GUI libraries usually provided as part of IDE.
I'm don't have any knowledge in java scripts/HTML and want something very simple that i can use for GUI prototyping.
Thanks in advance.
Unless you need to get "fancy" with you GUI (in which case it's doubtful there's a rapid prototyper for it) it will look very similar to anything you'd build with native widget toolkits. MFC and QT already support tabs, buttons and lists.
Barring that, Dreamweaver or heck even Frontpage can probably do what you want. It would be advisable to gain some knowledge of HTML and JS before starting your endeavor; unless of course you're paying a programmer who does ;)

Preferable technology that I should use to create an efficient and user friendly GUI?

There are many more technologies and tools available to build the front end for an application.
Which is the best technology/tool/platform available using which I can build a better GUI, by which I'll be able to build a nice looking as well as an efficient GUI?
Definition of "better" includes factors such as efficiency,user friendliness,better content control mechanism, navigation and many more.
I know this is a question about which GUI toolkit you should use, but your first technology for producing a user-friendly UI is pen and paper. Sketch out some mock-ups. Draw buttons and menus on construction paper, cut them out, and glue them together. Then try your mockups on about a half-dozen people. You'll quickly find out what makes a good UI.
It doesn't matter how good the UI looks or whether it uses the latest snazzy effects -- if your users can't figure out how to use it, they'll go elsewhere. You need to learn what works for your target audience before you write a single line of code.
Read Don't Make Me Think to learn how to make mock-ups and do user testing.
If' you're tracking an IP address, you'll definitely want to create your GUI Interface in Visual Basic.
Use the .NET framework in Visual Studio 2005/2008/2010 Studio. I haven't developed in any other environment, but I have been able to create nice looking apps in this IDE / Framework.
"Best" depends on what your evaluation function is.
For ease of development, and high quality UI, in a non-web based app it's hard to beat C#/VB or any other .NET language and environment for a windows-based app. Depending on the quality of the UI, MPF will give you greater flexibility and control, whereas windows form will make it easier to develop.
Having used Windows Presentation Foundation for a while now i would highly recommend it. There is a pretty big learning curve and, to be honest, MSFT should have included some controls (the datagrid being the biggest one) that were not included by default (but will be in .NET 4.0). Where WPF and XAML exceed is providing a foundation from which you can build just about anything. You can style ANY part of ANY control and build your own composite controls from scratch. A lot of thought went into binding and value converters and once you get used to the declarative nature of XAML you wont want to turn back. The company I work for has been using it for a couple of years now and the difference between the GUIs we used to develop (mainly winforms and asp.net) and what we develop now are night and day in terms of both look-and-feel and functionality. My two cents anyway...
It depends.
What device will the GUI be used on, hand held, PC, Mac?
What platform Windows, Linux, Web?
What kind of application will it be, accounting, email client, web application?
What audience will be using the application (a GUI aimed at a child may be different than one aimed at an adult)?
All of these things must be taken into account before even starting to formulate an answer to your question.
You have several choices for developing a GUI.
first, if cross platform is an issue consider using Java or Python.
you can also use Adobe AIR and develop the gui in Flex.
If you direct the product to windows only users .NET WPF is the best solution, with a very rich set of control and examples.
You can also use .NET with mono for cross platform compatibility, but WPF isn't currently supported.
Desktop, Mobile, Windows, Linux, Database, OpenGL: Nokia Qt. Wiht Python - PyQt development process is shortest and easy. Application containing all required python & qt libraries and modules is around 30MB with Inno Setup installation is 8MB and will work on Windows 2000 and newer for Python 2.6.x, Python 2.5.x based application will run from Windows 95 to Windows 7.
I think all the attributes you list -- efficiency, user friendliness, etc -- are attributes of a good design rather than a good toolkit. Just about any toolkit can be used to meet those goals. I think the question might be different if you were asking about eye candy, fancy multi-media, etc. There are definitely some toolkits that do that better than others.
If you're interested in usability first (and it sounds like you are), focus on the design then pick whatever toolkit meets your current abilities and can handle your design. For example, if you require 3D images that might narrow your choices; likewise if you need to show videos, that will influence which toolkits you can choose from.
So, start with a good design. From that, create a list of requires for the toolkit -- rich editing controls, video, 3D, etc. And then look for a toolkit that provides what you need.
The best toolkit in the world won't make up for poor design.
Personally after having used Win32, Forms and WPF then going to Mac/iPhone GUI development, I very much prefer the flexibility and high quality of visuals in the Mac/iPhone GUI.
One of the most useful examples is the fact that in NSTable/UITable controls (ListViews or similar in Windows), every cell is a fully customisable View (a Control in Windows).
Where in a ListView you have very little customisation for each cell/item in the view since you only provide details, not an actual control, an NSTable/UITable asks you for a table cell which you can add anything to, such as buttons, switches and image views.
Mac OS GUI development to me is a LOT more flexible and more consistently flexible in that regard. Everything is a View so I can my own contents to anything.
Have you considered Silverlight?
It can be used to create internet applications, but it can also be run out of browser to create desktop applications. It's has significant overlap with WPF though there are differences which might catch you out when swapping from one to the other.
Expression Blend 3 is a very good visual designer and the code it produces is quite efficient.

How often do ASP.NET developers NOT use Visual Studio design mode?

We are developing an ASP.NET application. We retained an outside UI design firm, and for the most part have been very pleased with their work. Their "deliverable" to us was clickable screens -- Visual Studio solutions with ASPX files, images, master pages, etc. The screens were not connected to any data source. They had dummy data so that we could see how the UI worked.
One problem we've run into is that our developers are used to using Visual Studio design mode. The pages we receive from the UI firm have problems sometimes when we pull them up into design mode. The consultant's developers coded these screens without using design mode.
We assumed they'd be using design mode, but this wasn't specified in the contract. Was this too much to assume? Is there a lot of ASP.NET development work that never goes through VS design mode?
Third party edit:
Suggestion: people responding to this question should specify which
version of Visual Studio they're
using, as Microsoft trashed the code
base that was in the VS2005 and
earlier designers, and replaced it
with the one they purchased when they
purchased the Expression products. The
two are totally unrelated, and the new
one is far better. - John
Saunders
The more and more you work with Visual Studio, the less and less you rely on Design Mode. Complicated UIs tend to make the design view look atrocious.
I (and peers) never use Design Mode, for two reasons:
I learnt in VS 2003 not to touch Design Mode because your HTML was managled by VS. (Not anymore though since 2008, but once bitten ...)
It can take ages to render.
Much quicker to drag-drop from toolbox and hand-code.
I actually find that ASP.NET developers that do use the designer to be quite rare. The Visual Studio designer is notoriously bad at generating clean markup.
I never use design mode, probably because it used to mess my markup so much. Plus I do a lot of dynamic rendering, so there is no point. And I use exclusively CSS for formatting, I don't want VS messing around.
Many never use it, because of bad past experiences. I have found little trouble with Design mode in VS2008, when using modern controls, which are up to date and have good designer support.
On the other hand, because of the earlier problems, a lot of custom server controls do not have good designer support, so are much less useful in design mode now that the earlier designer code base has been replaced with a good one.
I almost never use design mode. It typically creates ugly HTML, and call me anal, but I really like to have clean HTML. If that means hand-coding it, so be it.
I prefer doing it manually, I like to have control.
If I want to look at the result, F5.
I almost never use design mode. For me, the biggest reason is because I learned web design/development in Notepad, so I was used to (and comfortable) working with code. Design mode makes me uncomfortable because I'm never sure exactly what decisions VS will make with regard to HTML, etc. Additionally, I can't imagine that a developer would learn nearly as much about ASP.NET and VB/C# using design mode.
The only time I use design mode is to automatically configure a GridView or something like that like.
Design Mode is taking quite a beating here, but let me point out that it is great for learning about new controls. When you are new to ASP.NET, or are using a new library of controls, Design Mode is a godsend for two reasons:
You can modify properties on the Property Editor and see them reflected immediately. This is particularly true for list-container type controls, where the entire layout may depend on one property. Running your application five times to see all five layouts is very tedious.
Controls with complex behavior (and lets face it, thats why you're using a control, right?) often have a lot of configuration built into their Smart Tags. Notice the little [>] arrow in the top right of the control? Click it. It'll probably help you out big time. This is particularly true for configuring DataSources, whose syntax is very meticulous.
When I was first learning to use Telerik controls, I relied heavily on the Smart Tags they provide, which are very robust and complete. From that, you can see what kind of ASPX markup is generated and learn to work outside of Design Mode. I am a learn-by-doing kind of guy, so I much prefer this approach to looking at the documentation when using something for the first time.
I'm using VS2008, and I never use the design view. I find the code view to just be easier and more responsive than the designer.
Y'know, I never even realised I use the source screens 100% of the time. I usually develop in VS2005.
Whenever I do actually open the design mode, it's by accident, and I try and hit the source view before it renders. I've never been impressed with the design mode, and find it slow as well as adding a lot of unnecessary markup. I also find that intellisense and the properties window mean that I don't need a GUI to develop.
The design mode can also be a nightmare when you're trying to add any nested items. Because we've been developing for a customer using IE6 we've been using tables for formatting so we don't need different DIV definitions. Just clicking in an empty cell can be difficult, and resizing a column can take far too long.
For things like Template Fields in grids, I don't even know how I'd go about setting this up in design view!
Having said that, design mode every time for windows apps!
Design mode is getting better and I'd say that it's likely to become more prevalent as time goes on and the design mode tools continue to improve. I design all my components for design mode, but I still do the large majority of my code by hand - it allows greater control of code layout and doesn't end up creating an auto-formatted mess that I then have to dig through to figure out what changes need making. I know that in future my components are likely going to be used by developers that do most of their design by drag/drop and it's easier to cater for that now than have to come back and do it after the event.
Granted I'm doing MVC stuff, but I never use it - I "grew up" with PHP and code editors, and it still does me just fine.
I'm using two different versions of .NET (2003 & 2005). Some of the forms that were written in 2003 can no longer be edited in 2003 and the installation requires that they be maintained in 2003, so I use KEDIT to edit those forms.
Some of the forms in one application are too big for the .NET editor and I prefer a strong editor anyway.
I have no problem working in design mode. One exception is asp:Repeaters, which are not supported, or GridViews which tend to override my manual column definitions.
The other is if VS tries to do a full project scan if I rename a control, and then fails.
We primarily use the code view. The design mode is quite buggy we've found in VS 2008. XML controls tend to barf random character sets out for some reason, and VS will generally run slow whilst trying to render everything on screen. I mainly use the code-view.
Traditionally WYSIWYG designers produced poor code and render CSS and #INCLUDEd files poorly so they were of limited use, so developers tended to code by hand. In addition, these tools allowed you to go a certain distance without real knowledge of what you were doing, which was fine for web tutorials and personal homepages, but as soon as you wanted an extra degree of control you became unstuck - when meant you had to resort to looking 'under the hood' anyway.
Although tools have improved over time, many developers are so comfortable with hand-coding that they all but forget about the Design View - I certainly can't remember last time I used it. I'm sure there are a number of situations where such tools could be genuinely useful, but we are doing fine without and don't want to be bothered with figuring when & where such features can best be used.
Our UI is complicated and it is impossible for us to use design mode with VS2005.
The only time I have touched design mode is to do a quick and dirty prototype or an internal app.
How often do I not use design mode? 99% of the time.

Resources