Blogs

The One With

DXperience 12.2 Office Inspired Apps : Part III

Building Microsoft® Office® Inspired apps is a snap with DXperience 12.2. From Reporting Controls, Data Grids and Tree Lists to Schedulers, Ribbons and App Skins, the DXperience 12.2 offers a complete set of user interface controls to get you from A to Z in no time.

In previous sections we created a Project Manager App where we can display and manage different kinds of projects and their inter dependencies.

In this article we will build on that, and give the end user the ability to define and manage resources. Let's begin!

New DXperience Form

We'll start by creating a new Form based on the template provided by DXperience 12.2. Let’s name it “ResourcesForm

By using the DXperience 12.2 template our form will automatically adhere to the currently selected App Skin.

Let’s add a Ribbon command to invoke the new form.

Bring up the Form1.cs designer and select the Home tab in the Ribbon control. Right-click the Appointment Ribbon group and click Add Button.

Assign appropriate values for Caption, Glyph, and LargeGlyph, and use drag-and-drop to position it at the beginning of the group.

Now handle the ItemClick event to invoke the form

private void defineResourcesButton_ItemClick(object sender, ItemClickEventArgs e) {
   
using (ResourcesForm resourcesForm = new
ResourcesForm()) {
        resourcesForm.ShowDialog();
    }
}

Form Layout with XtraLayoutControl

Now that we have a way to show our form, let’s lay our control out with the help of the XtraLayoutControl. The XtraLayoutControl was designed to drastically simplify form layout management. All controls within the layout manager are “vectorized” so that you don’t have to spend time on pixilation and size adjustment. All the alignment and positioning are automatically handled for you.

Open up the ResourcesForm.cs designer and drop the LayoutControl from your toolbox and dock it to full:

Bring in one TreeList,

two TextEdits, a ColorPickEdit and a PictureEdit.

You just drag-and-drop the layout items to position them how you like:

You can hold the Shift button and click the captions for all four of the layout control items on the right and then group them all as one.

Do the same for the TreeList.

Now that all of the editors are in place, we would need to add the command buttons for manipulating the resources and for accepting the changes.

After you drag them from the toolbox, open the layout Customization form, using the context menu, and add an empty space element to separate the button groups.

Go through all of the items and give them proper descriptions.

Go ahead and fire up the application in the debugger. We now have a properly laid out form for defining our hierarchical resources. The form can be resized and the elements inside will automatically be adjusted without having to do any additional work.

Binding to Data

Now let's work on data-binding the controls so our resources are displayed correctly. Select the Smart Tag for the TreeList and set the data source to Other Data Sources | Project Data Sources | DXProjectManagerDataSet | Resources

private void ResourcesForm_Load(object sender, EventArgs e) {
    // TODO: This line of code loads data into the       
    // 'dXProjectManagerDataSet.Resources' table.   
    this.resourcesTableAdapter.Fill(this.dXProjectManagerDataSet.Resources);
}

In the Properties window (with the treeList1 still selected), set the KeyFieldName to Id and the ParentFieldName to ParentId, enable the OptionsBehavior | DragNodes  and disable the OptionsBehavior | Editable.

The tree list is now configured, let’s bind the editors. Select the first editor on the right and expand DataBindings section in the Properties window.

Click the EditValue drop down and select resourcesBindingSource and then the Description. Use the same steps to bind the remaining edit controls to Color, CustomField1, and Image. Additionally, for the ColorPickEdit set the Properties.StoreColorAsInteger to True and for the PictureEdit, set the Properties.PictureStoreMode to ByteArray.

Run the app and you will see the resources displayed with their details shown on the right.

Now that we can see the data, let's make it possible to modify and save it.

Modifying Resources

Add the following event handlers for the Add and Delete buttons:

private void addButton_Click(object sender, EventArgs e) {
    DXProjectManagerDataSet.ResourcesRow newResource = dXProjectManagerDataSet.Resources.NewResourcesRow();
    dXProjectManagerDataSet.Resources.AddResourcesRow(newResource);    
    resourcesBindingSource.MoveLast();
    descriptionEdit.Focus();
} 

private void deleteButton_Click(object sender, EventArgs e) {
    resourcesTree.DeleteSelectedNodes();
}

The code above is pretty self-explanatory. The Add button handler creates a new row, adds it to our dataset, and focuses both the new row and the description editor. The Delete handler uses the TreeList control to delete the selected data row.

Persisting Data

Let's wire up the last two buttons. Set the DialogResult property of the Cancel button to Cancel and handle the click event of the OK button with the following code:

private void okButton_Click(object sender, EventArgs e) {
    resourcesBindingSource.EndEdit();
    resourcesTableAdapter.Update(dXProjectManagerDataSet);
    DialogResult = System.Windows.Forms.DialogResult.OK;
}

Go ahead and run the project to see this in action!

Finishing Up

The last thing we need to do is check to see if the user clicked OK on our new dialog and, if so, refresh the data on the main screen. In the Form1.cs code, modify the Click event handler for the Define Resources bar button added to the Ribbon previously:

private void defineResourcesButton_ItemClick(object sender, ItemClickEventArgs e)
{    
    ShowResourceEditor();
} 

private void ShowResourceEditor() {
    using (ResourcesForm resourcesForm = new ResourcesForm()) {
        if (resourcesForm.ShowDialog() == System.Windows.Forms.DialogResult.OK) {
            schedulerControl.BeginUpdate();
            resourcesTree.BeginUpdate();
            try {
                resourcesTableAdapter.Fill(dXProjectManagerDataSet.Resources);                
                resourcesBindingSource.ResetBindings(false); 
            }
            finally {
                resourcesTree.EndUpdate();
                schedulerControl.EndUpdate();
            }
        }
    }
}

Download Source Code

What's Next?

In the next article we'll use the XtraGrid control to incorporate a list of tasks on our main screen that synchronizes with the scheduler control.

Published Jan 08 2013, 03:19 PM by
Bookmark and Share

Comments

No Comments
LIVE CHAT

Chat is one of the many ways you can contact members of the DevExpress Team.
We are available Monday-Friday between 7:30am and 4:30pm Pacific Time.

If you need additional product information, write to us at info@devexpress.com or call us at +1 (818) 844-3383

FOLLOW US

DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, along with high-performance HTML JS Mobile Frameworks for developers targeting iOS, Android and Windows Phone. Whether using WPF, Silverlight, ASP.NET, WinForms, HTML5 or Windows 8, DevExpress tools help you build and deliver your best in the shortest time possible.

Copyright © 1998-2014 Developer Express Inc.
All trademarks or registered trademarks are property of their respective owners