34

Okay, so this will probably be closed or whatever, I don't care. I have to say this because it just frustrates me like hell.

Once upon a time, I came from a html/css/php background into the vast deeps of application development. I wandered around the valleys of Java and explored the mysteries of C#. I gasped at the beauty of Ruby, fell over the stubborn simplicity of Bash and from time to time came back to visit my old friends HTML, CSS and PHP.

It was until I had the quest to create a Desktop application in Java that I was shocked about the pain and suffering I had to go through in order to make the application more or less user-friendly in terms of look and feel.

I was trapped in a nightmare of LayoutManagers, Docking parameters and whatever foul creatures lied beyond the gates of java.swing and companions.

At this point, I felt an idea breeding in me. As it was said by Cobb; What is the most resilient parasite? Bacteria? A virus? An intestinal worm? An idea. Resilient... highly contagious. Once an idea has taken hold of the brain it's almost impossible to eradicate. An idea that is fully formed - fully understood - that sticks; right in there somewhere. - Y'know, that kinda idea.

I was wondering, why couldn't it be just as easy as my buddy CSS made it. Layouting as such, using margins, borders, floatings, whatever.

Modern web-applications are completely designed in pure, simple, easy CSS. Am I insane for wanting the same for my desktop-applications? The gap between the both closes more and more as I write this. There are web-pages out there that are far more complex than anything most hobby-programmers will write in their entire life.

I just can't understand why GUI creating has to be such a fuss. Probably it's just because I come from a different background and am used to CSS-like styling, so only I feel this way, but still;

Hasn't anybody ever thought of this? Would it be so hard to create a CSS-parser to style GUI? With the exact same methods as in web-development? Classes, IDs, selectors etc. What's the big difficulty in creating this?

Does anybody even feel the same way I do?

Or (what would be quite emberassing) is there such a tool and I was just too stupid to find it?

10
  • Try visual studio there you have at least a try of a css designer integration into asp.net.
    – MUG4N
    Sep 9, 2010 at 8:10
  • I am using visual studio and it's quite okay, but as soon as you try to create somewhat sophisticated layouts that are flexible in resizing etc, it's having the same problems as every other gui-designer out there.
    – F.P
    Sep 9, 2010 at 8:11
  • 7
    StackOverflow is not a blog. Please rewrite your post to ask a specific question that can be answered definitively.
    – user113292
    Sep 9, 2010 at 8:22
  • You won't get it really better
    – MUG4N
    Sep 9, 2010 at 8:29
  • 2
    I love the way you wrote your question!
    – muffin
    Jun 25, 2013 at 14:37

7 Answers 7

13

Microsoft NET's WPF (Windows Presentation Foundation) is a GUI-creation solution kind of similar to HTML + CSS.

IMO, it is much more versatile than HTML, but still easy to use (and to create readable GUI code).

Defining layout is as easy as this:

<DockPanel>
    <Label Content="Dock Panel Layout Demo" 
    FontSize="15" FontWeight="Bold" Background="LightBlue"
    Foreground="Blue" DockPanel.Dock="Top"/>

    <Label Content="Footer" FontSize="15" FontWeight="Bold" 
           Background="LightGray"
           DockPanel.Dock="Bottom" />

    <Label Content="Left Pane" FontSize="15" FontWeight="Bold"
           Width="125" Background="Firebrick"
           DockPanel.Dock="Left"/>

   <Label Content="Content Pane" FontSize="15" FontWeight="Bold"
           Width="255"
           Background="Beige"/>

    <Label Content="Right Pane" FontSize="15" FontWeight="Bold"
           Width="125" Background="Khaki"
           DockPanel.Dock="Right"/>
</DockPanel>

And styles:

<Window.Resources>
    <Style x:Key="myStyle" TargetType="Button">
       <Setter Property="Background" Value="Orange" />
       <Setter Property="FontStyle" Value="Italic" />
       <Setter Property="Padding" Value="8,4" />
       <Setter Property="Margin" Value="4" />
    </Style>
</Window.Resources>
9
  • I am aware of WPF, but I think I didn't make really clear what I wanted; a way of desining a GUI using no designer I want to have complete control over the looks of my GUI without having to use a drag-and-drop-and-fail designer. Nobody uses designer to create HTML/CSS layouts, why sould a desktop-programmer do so?
    – F.P
    Sep 9, 2010 at 8:15
  • 6
    I use no designer to write WPF's XAML code. IMO designer is slower than handwritiog the code. That's what hooked me to WPF - Visual Studio's WinForms designer files break from time to time forcing me to use backups. There is no such danger with WPF. Sep 9, 2010 at 8:16
  • You can write XAML by hand. You don't have to use the designer at all.
    – Ikke
    Sep 9, 2010 at 8:17
  • 1
    @doc: XML is easy to read for both humans and machines, what do you want more? Yes, it is a very verbose, but that is necessary to mantain readability and versatility. Sep 9, 2010 at 9:40
  • 1
    @commanderz "XML is easy to read for both humans and machines" - unless you start using XSL, XQuery, XPath, WSDL... 4:0 for the machines. You may call me a racist but why ever consider machines? Fu... machines are to make work for us! XML is good at keeping hierarchical data, nothing else. Creation of indirect references like DockPanel.Dock=Left abuse this format.
    – mip
    Sep 9, 2010 at 9:57
12

Mozilla's XML-based language XUL uses CSS as a tool for gui layout. They have an article on "Skinnable XUL and CSS". :)

2
  • 1
    XUL can even be used for stand-alone apps with XULRunner.
    – slikts
    Sep 9, 2010 at 8:19
  • 2
    So there you go. XULRunner == standalone "web-based" apps.
    – adib
    Sep 9, 2010 at 10:59
8

In Qt applications, you can use a CSS-like syntax, called QSS.
The next version will also have a "declarative UI", called QML.

WPF and Silverlight also use an XML-based declarative language for their UI, called XAML.

7

"pure, simple, easy CSS"

I doubt you have done any cross-browser, accessible, browser agnostic web-sites/applications.

The truth is much more painful than you think.

I'd be eternally grateful to never use another "box-model hack" again.

3
  • 1
    You really got the point here ;)
    – MUG4N
    Sep 9, 2010 at 8:28
  • @ApoY2k - that may be true, but what's the point of having a standard that no one interprets in the same way? Mute point, since pragmatically we end up catering for each flavour. I understand where flash grabbed it's market share from
    – Jonathan
    Sep 9, 2010 at 9:50
  • 2
    @ApoY2k: I remember the harsh when I was trying to achieve some effect even with CSS working as expected. CSS is good at defining the looks of certain elements, but when it comes to layouts CSS is really, rally poor tool. I'm surprised that an author of this question wants to use CSS for layouts in GUI applications, while I would be willing to import GUI layout techniques into web world.
    – mip
    Sep 9, 2010 at 10:20
7

It's all a matter of perspective. I've been doing desktop app development for a couple decades. I think CSS is absolutely awful. It's ridiculously hard to create a decent layout, and true interactivity is a royal pain. In my opinion.

Now, I use mostly tcl/tk and python/wxpython which makes GUI development quite easy. I can see how, if your first taste of desktop GUI programming is java, you drew the conclusion that you did. I wouldn't wish java GUI programming on anyone.

3
  • 1
    I can't get why you blame Swing so much. What's so bad with it? Some time ago it was dirty, but now it looks better. Maybe it doesn't bring the best user experience, but it's quite easy to write in it. Now except AWT and Swing you have at least SWT and Jambi in Java. But +1 for CSS layout critics (read my post above or now below).
    – mip
    Sep 9, 2010 at 11:00
  • @doc: As one example: Swing has eight or so layout managers (BorderLayout, BoxLayout, GridBagLayout, etc). Each one different than the other, each one somewhat difficult to use. Compare that to Tk which has exactly three (and only two that are commonly used). And with those three I can duplicate any layout that Swing can do, with considerably fewer lines of code. That's why I dislike Swing. It's not that you can't do a lot with it, it's just that it takes too many lines of code to accomplish anything. Sep 9, 2010 at 13:59
  • I admit, gridbag layout and its constraints is a bit annoying. But after all it's still better than building layout with CSS in my opinion.
    – mip
    Sep 9, 2010 at 14:39
4

Why bother as soon enough HTML and Javascript will be the universal and all-encompassing way of writing user-facing applications ^^

Also, I've not really used WPF but it seems to involve a "declarative" UI building technique in the way you describe your dreams and it extends to Silverlight and all manner of Microsoft technologies. They can't be alone in that approach...

5
  • No it won't. Javascript is currently close to peak of its capacities.
    – mip
    Sep 9, 2010 at 10:40
  • That doesn't mean web-applications won't develop more and more into being actual programs for productive working (which they will)
    – F.P
    Sep 10, 2010 at 5:41
  • @doc webassembly Jul 30, 2017 at 23:12
  • 1
    @GaretClaborn yeah webassembly is something web browsers should begin with. I'm affraid however that simple solutions like web based VNC can take it over now.
    – mip
    Jul 31, 2017 at 9:27
  • @doc yea web socket support is pretty good now and will be pervasive soon. not exactly sure how you are suggesting to use VNC servers though, to host multi-user instances of traditional UI? i'm hoping web assembly will get traction by being an accelerator for doing compute-heavy tasks client-side. if it becomes pervasive i could see it replacing javascript pretty quick as shims for new languages are built on top of it. Aug 3, 2017 at 2:19
2

If you're not fixed on java, WPF with its XAML is kind of an approach you're describing, separating layout from logic as CSS does with HTML.

Not the answer you're looking for? Browse other questions tagged or ask your own question.