Top gui Questions

List of Tags
564
Wolfbyte

When looking beyond the RAD (drag-drop and configure) way of building User Interfaces that many tools encourage you are likely to come across 2 design patterns called Model-View-Controller and Model-View-Presenter. My question has two parts to it:

  1. What issues do these patterns address?
  2. How are they similar?
  3. How are they different?
Answered By: Glenn Block ( 672)

Model-View-Presenter

In MVP, the Presenter contains the UI business logic for the View. All invocations from the View delegate directly to Presenter. The Presenter is also decoupled directly from the View and talks to it through an interface. This is to allow mocking of the View in a unit test. One common attribute of MVP is that there has to be a lot of two-way dispatching. For example, when someone clicks the "Save" button, the event handler delegates to the Presenter's "OnSave" method. Once the save is completed, the Presenter will then call back the View through its interface so that the View can display that the save has completed.

MVP tends to be a very natural pattern for achieving separated presentation in Web Forms. The reason is that the View is always created first by the ASP.NET runtime. You can find out more about both variants.

Two primary variations

Passive View: The View is as dumb as possible and contains almost zero logic. The Presenter is a middle man that talks to the View and the Model. The View and Model are completely shielded from one another. The Model may raise events, but the Presenter subscribes to them for updating the View. In Passive View there is no direct data binding, instead the View exposes setter properties which the Presenter uses to set the data. All state is managed in the Presenter and not the View.

  • Pro: maximum testability surface; clean separation of the View and Model
  • Con: more work (for example all the setter properties) as you are doing all the data binding yourself.

Supervising Controller: The Presenter handles user gestures. The View binds to the Model directly through data binding. In this case it's the Presenter's job to pass off the Model to the View so that it can bind to it. The Presenter will also contain logic for gestures like pressing a button, navigation, etc.

  • Pro: by leveraging databinding the amount of code is reduced.
  • Con: there's less testable surface (because of data binding), and there's less encapsulation in the View since it talks directly to the Model.

Model-View-Controller

In the MVC, the Controller is responsible for determining which View is displayed in response to any action including when the application loads. This differs from MVP where actions route through the View to the Presenter. In MVC, every action in the View correlates with a call to a Controller along with an action. In the web each action involves a call to a URL on the other side of which there is a Controller who responds. Once that Controller has completed its processing, it will return the correct View. The sequence continues in that manner throughout the life of the application:

    Action in the View
        -> Call to Controller
        -> Controller Logic
        -> Controller returns the View.

One other big difference about MVC is that the View does not directly bind to the Model. The view simply renders, and is completely stateless. In implementations of MVC the View usually will not have any logic in the code behind. This is contrary to MVP where it is absolutely necessary as if the View does not delegate to the Presenter, it will never get called.

Presentation Model

One other pattern to look at is the Presentation Model pattern. In this pattern there is no Presenter. Instead the View binds directly to a Presentation Model. The Presentation Model is a Model crafted specifically for the View. This means this Model can expose properties that one would never put on a domain model as it would be a violation of separation-of-concerns. In this case, the Presentation Model binds to the domain model, and may subscribe to events coming from that Model. The View then subscribes to events coming from the Presentation Model and updates itself accordingly. The Presentation Model can expose commands which the view uses for invoking actions. The advantage of this approach is that you can essentially remove the code-behind altogether as the PM completely encapsulates all of the behaviour for the view. This pattern is a very strong candidate for use in WPF applications and is also called Model-View-ViewModel.

There is a MSDN article about the Presentation Model and a section in the Composite Application Guidance for WPF (former Prism) about Separated Presentation Patterns

365
Lakshman Prasad

Which is the best gui client on Linux for Git.

Update: After checking out all of the GUIs mentioned here,

git cola seems to work well for committing/pushing

gitk seem to work the best for examining history and

giggle is awesome for watching the diffs.

I use command line for committing, web trac interface for viewing history, in a rare occasions, and accept giggle as giggle is what, I think, one needs as a desktop git gui, with occasional git cola and gitk.

Answered By: Jakub Narębski ( 337)

Take a look at "Graphical Interfaces" section of InterfacesFrontendsAndTools page on Git Wiki. There you have mentioned:

  • gitk - graphical history browser, in Tcl/Tk, distributed with Git (usually in gitk package)
  • git gui - graphical commit tool, in Tcl/Tk, distributed with Git (usually in git-gui package)
  • QGit - uses Qt toolkit
  • Giggle - uses GTK+ toolkit
  • git-cola - uses PyQt4
  • gitg - GTK+/GNOME clone of GitX
  • tig - text mode interface for git, is GUI and pager, uses ncurses
280
Rory Becker

I use Subversion via TortoiseSVN but I hear good things about Git.

Are there any similar tools available for Git on Windows?

Feel free to answer with tools which still in early development.

Answered By: BlaM ( 110)

There is a TortoiseSVN port for GIT: http://code.google.com/p/tortoisegit/

The software installs as shell extension (right-click in Explorer and other file-browsers) and works with sites like GitHub.

I've successfully used it in WindowsXP (x86), Windows Vista (x64) and Windows 7 (x64) environments.

236
David Arno

I am considering creating a GUI-based tool that I want to be cross-platform. I've dismissed Java, as I personally do not like Swing. I'm currently considering C# and using Mono to make it cross-platform. However I'm wondering whether new-fangled cross-platform languages like Python can offer me a decent GUI development environment.

Answered By: Jon Cage ( 146)

I've made numerous UI's in wxPython and would highly recommend it. I used to build in VisualC++/MFC then discovered wxWidgets/C++ and finally moved onto wxPython. I find I'm able to get working GUIs in no time at all with wxPython compared to the other methods and with almost no effort, the same source works works on Linux and the Mac* (sometimes you need some tweaks for visual anomolies).

*I generally develop under Windows in case you hadn't guessed.

[Edit] There's a tool (wxDesigner) you can use to generate the layout for you or alternatively, you can play with it programmatically. Either way, layout under wxWidgets is done using Sizers. They're quite a powerful way of laying out a GUI and once set up correctly, will automatically resize your controls appropriately for you.

[Edit2] There's a nice little tutorial on sourceforge with some good examples of what you can do with sizers.

[Edit3] There's another tool (wxGlade) I've just discovered which does what wxDesigner does, but for free from a quick trial, might actually be better as well.

[Edit4] ..aaaand another tool (Dialog Blocks).

Bear with me because this question doesn't pertain to an algorithm or any block of code. Rather, it deals with designing forms and applications.

I'm working on a project where the user is able to save their work (most likely to the HDD but also possibly any other media, including floppy disks). Sure, the popular File > Save option is there but what about a toolbar button?

By far the most popular icon is the floppy disk. However, the chances the user will write to the floppy are pretty slim. Still, I think the floppy is more representational than literal.

In the end, I'll probably stick with the floppy disk icon to keep the convention most users are familiar with but... anybody have any ideas on how to update this old icon?

alt text

Answered By: Welbog ( 178)

The floppy disk icon has become the standard for saving files. It's a highly recognizable icon and there's no reason to change that. Consistency between applications is a wonderful thing.

I suspect that over time the icon will grow more stylized and less like an actual floppy disk once people start forgetting what they look like (or never knew). The icon nowadays represents the concept of saving more than it represents floppy disks anyway.

Here's my layout code;

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <TextView android:text="@string/welcome" 
        android:id="@+id/TextView" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content">
    </TextView>

    <LinearLayout android:id="@+id/LinearLayout" 
        android:orientation="horizontal"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:gravity="bottom">

            <EditText android:id="@+id/EditText" 
                android:layout_width="fill_parent" 
                android:layout_height="wrap_content">
            </EditText>

            <Button android:text="@string/label_submit_button" 
                android:id="@+id/Button" 
                android:layout_width="wrap_content" 
                android:layout_height="wrap_content">
            </Button>

    </LinearLayout>

</LinearLayout>

What this looks like is on the left and what I want it to look like is on the right.

Android Layout - Actual (Left) and Desired (Right)

The obvious answer is to set the TextView to fill_parent on height but this causes no room to be left for the button or entry field. Essentially the issue is that I want the submit button and the text entry to be a fixed height at the bottom and the text view to fill the rest of the space, similarly in the horizontal Linear layout I want the submit button to wrap its content and for the text entry to fill the rest of the space.

If the first item in a Linear Layout is told to fill_parent it does exactly that, leaving no room for other items, how do I get an item which is first in a linear layout to fill all space apart from the minimum required by the rest of the items in the layout?

EDIT:

Relative Layouts were indeed the answer - Thank you!

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent">

    <TextView 
        android:text="@string/welcome" 
        android:id="@+id/TextView"
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true">
    </TextView>

    <RelativeLayout 
        android:id="@+id/InnerRelativeLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true" >

        <Button 
            android:text="@string/label_submit_button" 
            android:id="@+id/Button"
            android:layout_alignParentRight="true" 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
        </Button>

        <EditText 
            android:id="@+id/EditText" 
            android:layout_width="fill_parent"
            android:layout_toLeftOf="@id/Button"
            android:layout_height="wrap_content">
        </EditText>

    </RelativeLayout>

</RelativeLayout>
Answered By: Janusz ( 121)

I think you should try a relative layout.
If you have a relative layout that fills the whole screen you should be able to use android:layout_alignParentBottom to move the button to the bottom of the screen.

If your views at the bottom are not shown in a relative layout then maybe the layout above it takes all the space. In this case you can put the view that should be at the bottom, first in your layout file and position the rest of the layout above the views with android:layout_above. This enable the bottom view to take as much space as it needs and the rest of the layout can fill all the rest of the screen.

168
nyenyec

This must come up very often.

When the user is editing preferences in an Android app, I'd like them to be able to see the currently set value of the preference in the Preference summary.

Example: if I have a Preference setting for "Discard old messages" that specifies the number of days after which messages need to be cleaned up. In the PreferenceActivity I'd like the user to see:

"Discard old messages" <- title

"Clean up messages after x days" <- summary where x is the current Preference value

Extra credit: make this reusable, so I can easily apply it to all my preferences regardless of their type (so that it work with EditTextPreference, ListPreference etc. with minimal amount of coding).

Answered By: Reto Meier ( 212)

Unfortunately there doesn't seem to be a simple, automated way of doing this (you'll notice that very few of the 'native' preferences do this). That said, I'm sure it's a pretty common requirement, so here's the technique I use to achieve it.

The key is to make your PreferenceActivity class implement OnSharedPreferenceChangeListener. Using the onSharedPreferenceChanged method you can listen for specific preference keys and use setSummary on the related preference control to modify the text, like this:

public void onSharedPreferenceChanged(SharedPreferences sharedPreferences,
        String key) {
    // Let's do something when a preference value changes
    if (key.equals(KEY_A_CHECKBOX_PREFERENCE)) {
        mCheckBoxPreference.setSummary(sharedPreferences.getBoolean(key,
                false) ? "Disable this setting" : "Enable this setting");
    } else if (key.equals(KEY_AN_EDITTEXT_PREFERENCE)) {
        mEditBoxPreference.setSummary("Current value is "
                + sharedPreferences.getString(key, ""));
    }
}

Listen for changes in preference using the registerOnSharedPreferenceChangeListener method on the applications Shared Preferences to assign this class as a listener, like this:

getPreferenceScreen().getSharedPreferences().
                                  registerOnSharedPreferenceChangeListener(this);

Your best bet is to register it in onResume and deregister on onPause. You'll also need to update the text values when you register the listener to ensure you get the right initial values.

The following example is based on the AdvancedPreferences example project in the Android code samples.

public class AdvancedPreferences extends PreferenceActivity implements
        OnSharedPreferenceChangeListener {

    public static final String KEY_LIST_PREFERENCE = "list_preference";
    public static final String KEY_CHECKBOX_PREFERENCE = "checkbox_preference";
    private CheckBoxPreference mCheckBoxPreference;
    private ListPreference mListPreference;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Load the XML preferences file
        addPreferencesFromResource(R.xml.advanced_preferences);
        // Get a reference to the preferences
        mCheckBoxPreference = (CheckBoxPreference) getPreferenceScreen()
                .findPreference(KEY_ADVANCED_CHECKBOX_PREFERENCE);
        mListPreference = (ListPreference) getPreferenceScreen()
                .findPreference(KEY_LIST_PREFERENCE);
    }

    @Override
    protected void onResume() {
        super.onResume();
        // Setup the initial values
        mCheckBoxPreference
                .setSummary(sharedPreferences.getBoolean(key, false) ? 
                            "Disable this setting" : "Enable this setting");
        mListPreference.setSummary("Current value is "
                + sharedPreferences.getValue(key, ""));
        // Set up a listener whenever a key changes
        getPreferenceScreen().getSharedPreferences()
                .registerOnSharedPreferenceChangeListener(this);
    }

    @Override
    protected void onPause() {
        super.onPause();
        // Unregister the listener whenever a key changes
        getPreferenceScreen().getSharedPreferences()
                .unregisterOnSharedPreferenceChangeListener(this);
    }

    public void onSharedPreferenceChanged(SharedPreferences sharedPreferences,
            String key) {
        // Let's do something a preference value changes
        if (key.equals(KEY_CHECKBOX_PREFERENCE)) {
            mCheckBoxPreference.setSummary(sharedPreferences.getBoolean(key,
                    false) ? "Disable this setting" : "Enable this setting");
        } else if (key.equals(KEY_LIST_PREFERENCE)) {
            mListPreference.setSummary("Current value is "
                    + sharedPreferences.getValue(key, ""));
        }
    }
}
168
c++, c, api, gui, linux
David C

I hope this doesn’t come across as a stupid question but it’s always something I have wondered. Both Windows (Win32 API) and OS X (Cocoa) have their own APIs to handle windows, events and other OS stuff. I have never really got a clear answer as to what Linux’s equivalent is.

I have heard some people say GTK+, but GTK+ being cross platform, how can it be native?

Answered By: Joni ( 285)

In Linux the graphical user interface is not a part of the operating system. The graphical user interface found on most Linux desktops is provided by software called the X Window System, which defines a device independent way of dealing with screens, keyboards and pointer devices.

X Window defines a network protocol for communication, and any program that knows how to "speak" this protocol can use it. There is a C library called Xlib that makes it easier to use this protocol, so Xlib is kind of the native GUI API. Xlib is not the only way to access an X Window server; there is also XCB.

Toolkit libraries such as GTK+ (used by GNOME) and Qt (used by KDE), built on top of Xlib, are used because they are easier to program with. For example they give you a consistent look and feel across applications, make it easier to use drag-and-drop, provide components standard to a modern desktop environment, and so on.

How X draws on the screen internally depends on the implementation. X.org has a device independent part and a device dependent part. The former manages screen resources such as windows, while the latter communicates with the graphics card driver, usually a kernel module. The communication may happen over direct memory access or through system calls to the kernel. The driver translates the commands into a form that the hardware on the card understands.

168
CruelIO

What is the simplest way to update a label from another thread?

My problem
I have a winform(thread1)

From thread1 I'm starting another thread (thread2).

While thread2 is processing some files, I would like to update a label on the winform with status from thread2.

How can I do that?

Answered By: Marc Gravell ( 201)

The simplest way is an anonymous method:

///...blah blah updating files
string newText = "abc"; // running on worker thread
this.Invoke((MethodInvoker)delegate {
    someLabel.Text = newText; // runs on UI thread
});
///...blah blah more updating files

Are there any MySQL Client applications for Windows that get even close to what the Enterprise Manager / Server Management Studio is for Microsoft SQL?

I have two requirements and one "nice to have" feature:

  1. Editing table structure should not be a pain in the a** -> I don't want to click an "add another column" button, then edit the column's properties in a new window. What I want is adding a new row in a "column-list table" as it is done in the Management Studio.

  2. Same applies to adding new rows to the table. Should be as easy as editing an Excel sheet.

  3. Nice to have: I'd like to have a feature that's comparable to the database diagrams in the Management Studio, where I can visualize "foreign key relations" between tables. They don't actually need to become constraints because I mainly use MyISAM (which doesn't support constraints). Just the diagrams are a lot of help.

Is there any application that you can recommend to me? Free would be a plus, but anything up to $100 would be okay, too.

[Update]

I'm going to test the recommended applications and give you an answer when I'm done.

HeidiSQL

I can give you an response to HeidiSQL at once, because that's one of the application's that I used before: Editing tables is a bit cumbersome, because most of the column's properties have to be edited in another window. Also it does not support character encoding, so I can't set my tables to "UTF-8". It does not have a diagram functionality. Editing data worked okay. So far HeidiSQL was one of the best application's I've tried... But there definitely is room for improval.

Toad for MySQL

I just gave Toad for MySQL a quick glimpse:

Editing Tables is in the same way cumbersome as it is in HeidiSQL: When you try to add another column, a new window opens where you enter the columns properties. It does support character encodings (collations), though. While you are in "data" view and want to add a new row (data) to the table, you need to create that row by pressing a button first. Then you can enter data. That's not as "excel-like" as I'd like to see it. It should add a new row when I press "down" in the last row or click the mouse in the first blank row.

The diagram editor is not so user friendly either. When I pull in a new window and drop it in the editing area it is not put where I dropped it. Some auto-arranging goes on. Also the editor is real slow. With a 2.4 GHz dual core machine you shouldn't feel a latency while the flickering window border tries to follow your mouse.

Ergo: Also nice, but not even close to Microsoft.

MySQL Workbench

As J Wynia mentioned in his post: MySQL Workbench is more about designing databases and exporting an "create" SQL script as it is about working with data. I haven't even found a function to connect to my database, so this is not what I'm looking for.

SQLyog

After a few moments of testing: I like SQLyog. Even though it has colors that hurt my eyes :)

Editing table: works nicely. Working with data: everything as expected. Running queries: I fell in love when I found the option to "Switch F5 and F9 functionalities". Exactly as in good ol' Query Analyzer.

There is no DB diagram feature, but I can live with that if I have to... In the end there's still Visio.

I might even consider paying money for this after some working with it.

DbVisualizer

Actually I don't think I really understand DbVisualizer. I get a window and when I open a database, it drops all tables in the drawing area. I can move them around, but I can't see an option to connect two tables, so I can't use it for real database diagrams. It displays the tables' contents nicely, but it seems to be read only. Best feature: There is a nice tab that tells me in big letters, that the table has XY rows. So very useless :)

Is there any editing functionality at all or is it just for browsing existing data?

Ah, I see. You have to pay $150 to get all editing functionality. Sorry, not with me.

Answered By: onnodb ( 64)

I'd recommend you take a look at SQLYog. The free version is already rather good, but the paid version also has visual schema editing and comparison features. The UI has some tiny, but annoying shortcomings, but (the latest versions have solved those shortcomings completely -- Onno 20090331) overall I've been very pleased with it.

From SQLyog v10 they have introduced refreshing modern looks and also optimized/improved few things like- Schema sync is lightning fast for large schemas, an option for multi-column sorting and filtering of table data, Data search which searches in your databases/tables/columns works like Google search!

enter image description here