Please create a simple panel demo

Oct 18, 2009 at 12:09 PM

While I love the design of fluid, i'm having a hard time creating a simple panel. I've tried following the source for the password app but I have to admit it is overwhelming me :(

Any chance of creating a simple demo with source that contains a panel with a few lists and sublists?

 

Oct 21, 2009 at 3:46 PM

Hi vibez,

just play araound a while with the PasswordSafe app and you will get the trick.

Here is a simple Panel class that holds two other Panels, one 'Bottombar' panel with 32px height and another one that fills the rest of the screen.

For some more input you can check my first little test app under:  http://klappstuhl.svn.sourceforge.net/viewvc/klappstuhl/trunk/KlappStuhlWMC/FluidTest1/
Concentrate on TestListBoxPanel.cs and on ListBoxes\TestListBox.cs that should help you getting started.

public class SimplePanel:FluidPanel
    {
        public FluidPanel P1 { get; set; }
        public FluidPanel P2 { get; set; }

        private int P2_height = 32;

        public SimplePanel(int x, int y, int w, int h)
            : base(x, y, w, h)
        {
        }

        protected override void InitControl()
        {
            base.InitControl();
            EnableDoubleBuffer = false;
            Anchor = AnchorStyles.Top | AnchorStyles.Bottom | AnchorStyles.Left | AnchorStyles.Right;
            BackColor = Color.Empty;

            P1 = new FluidPanel();
           
            P1.Bounds = new Rectangle(0, 0,Width, Height-P2_height);
            P1.Anchor = AnchorStyles.Top | AnchorStyles.Bottom | AnchorStyles.Left | AnchorStyles.Right;
            Controls.Add(P1);

            P2 = new FluidPanel();
            P2.Bounds = new Rectangle (0, P1.Bounds.Bottom, Width, P2_height);
            Controls.Add(P2);
        }


        protected override void OnSizeChanged(Size oldSize, Size newSize)
        {
            base.OnSizeChanged(oldSize, newSize);
            if (P1 == null) return;
            if (Width < Height)
            {
                int h = ScaleY(P2_height);
                P1.Bounds = new Rectangle(0, 0, Width, Height-h);
                P2.Bounds = new Rectangle(0, P1.Bounds.Bottom, Width, h);
            }
        }
    }

 

/Schaze

Oct 22, 2009 at 4:43 PM
Edited Oct 22, 2009 at 4:55 PM

Hi Schaze.

 

I tried to build the demo app you linked to but I get the follwoing error

 

 

The type or namespace name 'KlappStuhlClientAPI' could not be found (are you missing a using directive or an assembly reference?)

 

Oct 22, 2009 at 6:45 PM

Hi vibez,

ah yes that could be. I used the testapp later also for some other stuff. Sorry for that...

You can remove all refereces to KlappStuhl* .

In From1.cs comment or remove the whole "void parseResponse(Command cmd)" method and the content (not the whole funciton) of the "void ActionButton_Click(object sender, EventArgs e)" method.
Also remove all refrences to
"KlappStuhlClient ksc;"

There is some commented code in TestListBoxPanel.cs (Line 52-87) that should fill the list with the contacts of you phonebook so you have something to scroll. (Don't do that if you have no contacts saved [e.g. in the Emulator] because then it throws an error when I remeber corectly)

Sorry that this was so messed up. As I said I used the app for many quick n dirty tests of the real program...

Let me know if it still does not work and we can figure it out together.

/schaze

Oct 22, 2009 at 6:59 PM
Edited Oct 22, 2009 at 7:08 PM

Thanks for helping me get started with this.

 

I've made the changes but now i'm getting the following error

 

The type or namespace name 'Fluid' could not be found (are you missing a using directive or an assembly reference?)

 

Oct 22, 2009 at 7:06 PM
Edited Oct 22, 2009 at 7:08 PM

I also have the following errors/warning

 

 

Error	9	Property or indexer 'Fluid.Controls.FluidControl.Template' cannot be assigned to -- it is read only	C:\Users\Lee\Desktop\FluidTest1\FluidTest1\ListBoxes\TestListBox.cs	24	13	FluidTest1



Warning    6    The variable 'Host' is either undeclared or was never assigned.    C:\Users\Lee\Desktop\FluidTest1\FluidTest1\Form1.Designer.cs    42    0 

 

Oct 22, 2009 at 10:42 PM

 

The type or namespace name 'Fluid' could not be found (are you missing a using directive or an assembly reference?)
--> You need to add a Reference to the Fluid project

Error 9 Property or indexer 'Fluid.Controls.FluidControl.Template' cannot be assigned to -- it is read only C:\Users\Lee\Desktop\FluidTest1\FluidTest1\ListBoxes\TestListBox.cs 24 13 FluidTest1
--> File permissions?

Warning    6    The variable 'Host' is either undeclared or was never assigned.    C:\Users\Lee\Desktop\FluidTest1\FluidTest1\Form1.Designer.cs    42    0
--> Probably because the Reference to Fluid is missing. I think the best thing would be to create a new project and solution and add all files except Form1.cs. 
Then you can add the FluidHost yourself and the Designer should get everything straight. When I have time over the weekend I'll wrap smth together and send it to you in case you don't get it running....

Oct 23, 2009 at 4:44 PM
Edited Oct 23, 2009 at 4:49 PM

How do I add FluidHost?

I tried creating a .NET 3.5 framework project but after adding the fluid.dll to the toolbox, the controls never show.

If I create a .NET 2.0 project then they show ok but the project has build errors because you reference .NET 3.5 only references such a Linq

Oct 23, 2009 at 6:23 PM

Sorry man but these are the VS basics.
I suggest you try google first on some howtos for  custom controls and how references to other projects etc in Visual Studio work.
This will be to much to explain in a codeplex discussion forum, and also has nothing to to with the Fluid framework.

Sorry/

schaze

Oct 23, 2009 at 6:32 PM
Edited Oct 23, 2009 at 6:35 PM

Ok I have managed to add the custom control. My build of VS seemed to have a corrupted toolbox :-S

I've run your demo app on my phone but the list items are not getting added correctly. Category items are added just perfect though.

 

Here is a screenshot of the issue

 

Oct 23, 2009 at 8:06 PM

Hm... this is strange...

could you perhaps paste in the code from your TestListBoxPanel and the Template.

I looks like as if he misses the correct Template for the Data Items...

/schaze

Oct 23, 2009 at 8:14 PM
Edited Oct 23, 2009 at 8:27 PM

TestListBoxPanel


using System;
using System.Linq;
using System.Collections.Generic;
using System.Text;
using Fluid.Controls;
using FluidTest1.ListBoxes;
using Microsoft.WindowsMobile.PocketOutlook;
using FluidTest1.Classes;
using System.Drawing;
using System.Windows.Forms;

namespace FluidTest1
{
class TestListBoxPanel : FluidPanel
{
public TestListBoxPanel(int x, int y, int w, int h)
: base(x, y, w, h)
{
}
public TestListBox list;
public FluidButton ExitButton;
public FluidButton ActionButton;
protected override void InitControl()
{
base.InitControl();
EnableDoubleBuffer = false ;
Anchor = AnchorStyles.Top | AnchorStyles.Bottom | AnchorStyles.Left | AnchorStyles.Right;
BackColor = Color.Empty;

ExitButton = new FluidButton("Exit");
Controls.Add(ExitButton);
ExitButton.ButtonSize = Size.Empty;
ExitButton.Bounds = new Rectangle(0, 0, Width, 40);
ExitButton.Anchor = AnchorStyles.Left | AnchorStyles.Top | AnchorStyles.Right;
ExitButton.BackColor = Color.DarkRed ;
ExitButton.ForeColor = Color.White;

list = new TestListBox();
Controls.Add(list);
//list.Items = new NotifyList();
list.Bounds = new Rectangle(0, 40, Width, Height - 80);
list.Anchor = AnchorStyles.Top | AnchorStyles.Bottom | AnchorStyles.Left | AnchorStyles.Right;

ActionButton = new FluidButton("LoadData");
Controls.Add(ActionButton);
ActionButton.ButtonSize = Size.Empty;
ActionButton.Bounds = new Rectangle(0, Height-40, Width, 40);
ActionButton.Anchor = AnchorStyles.Left | AnchorStyles.Bottom | AnchorStyles.Right;
ActionButton.BackColor = Color.DarkGray;
ActionButton.ForeColor = Color.White;

OutlookSession oses = new OutlookSession();
NotifyList contacts = new NotifyList();
int i = 0;
String name = "#";
foreach (Contact c in oses.Contacts.Items)
{
if (c.LastName.Length > 0)
{
if (name.ToUpper()[0] != c.LastName.ToUpper()[0] && name[0] != ',')
{
contacts.Add(new GroupHeader(c.LastName.ToUpper()[0].ToString()));
}
else if (name[0] == ',' && name.ToUpper()[2] != c.LastName.ToUpper()[0])
{
contacts.Add(new GroupHeader(c.LastName.ToUpper()[0].ToString()));
}
}
else
{
if (name.ToUpper()[0] != c.FirstName.ToUpper()[0] && name[0] != ',')
{
contacts.Add(new GroupHeader(c.FirstName.ToUpper()[0].ToString()));
}
else if (name[0] == ',' && name.ToUpper()[2] != c.FirstName.ToUpper()[0])
{
contacts.Add(new GroupHeader(c.FirstName.ToUpper()[0].ToString()));
}

}
name = c.LastName + ", " + c.FirstName;
contacts.Add(new TestListBoxItemData(name, c.MobileTelephoneNumber.ToString()));

i++;
//if (i > 20) { break; } } list.Items = contacts; } } }


TestListTemplate


using System;
using System.Linq;
using System.Collections.Generic;
using System.Text;
using Fluid.Controls;
using System.Drawing;
using System.Windows.Forms;
using FluidTest1.Classes;

namespace FluidTest1.Templates
{
    class TestListTemplate:FluidTemplate
    {
        protected override void InitControl()
        {
            base.InitControl();
            this.Bounds = new Rectangle(0, 0, 240, 64);
            FluidLabel l;
            l = new FluidLabel("", 2, 0, Width-32, 64 - 15);
            l.Anchor = AnchorStyles.Left | AnchorStyles.Right | AnchorStyles.Top | AnchorStyles.Bottom;
            l.LineAlignment = StringAlignment.Center;
            l.Alignment = StringAlignment.Near;
            l.Font = new Font(FontFamily.GenericSansSerif, 8f, FontStyle.Bold);
            nameLabel = l;
            Controls.Add(l);

            l = new FluidLabel("", 3, 21, Width-32, 64 - 22);
            //l.Alignment = StringAlignment.Far;88
            //l.LineAlignment = StringAlignment.Far;
            l.Anchor = AnchorStyles.Left | AnchorStyles.Right | AnchorStyles.Top | AnchorStyles.Bottom;
            l.LineAlignment = StringAlignment.Center;
            l.Font = new Font(FontFamily.GenericSansSerif, 7f, FontStyle.Regular);
            numberLabel = l;
            Controls.Add(l);

            recbutton = new FluidButton("Rec", Width-32, 3, 30, 64 - 6);
            recbutton.Corners = Fluid.Drawing.RoundedCorners.All;
            //recbutton.ButtonSize = Size.Empty;
            recbutton.Font= new Font(FontFamily.GenericSansSerif, 7f, FontStyle.Regular);
            recbutton.Anchor = AnchorStyles.Left | AnchorStyles.Right | AnchorStyles.Top | AnchorStyles.Bottom;
            recbutton.BackColor = Color.DarkRed;
            recbutton.ForeColor = Color.White;
            recbutton.Click += new EventHandler(recbutton_Click);
            Controls.Add(recbutton);
        }

        void recbutton_Click(object sender, EventArgs e)
        {
            if (data.Record)
            {
                data.Record = false;
                recbutton.BackColor = Color.DarkRed;
                recbutton.ForeColor = Color.White;
                recbutton.Text = "Rec";
            }
            else
            {
                data.Record = true;
                recbutton.BackColor = Color.DarkGreen;
                recbutton.ForeColor = Color.White;
                recbutton.Text = "Uns";
            }
        }

        private FluidLabel nameLabel;
        private FluidLabel numberLabel;
        private FluidButton recbutton;

        private TestListBoxItemData data = null;

        protected override void OnBindValue(object value)
        {
            TestListBoxItemData data = value as TestListBoxItemData;
            if (data != null)
            {
                nameLabel.Text = data.Name;
                numberLabel.Text = data.Number;
                if (!data.Record)
                {
                    recbutton.BackColor = Color.DarkRed;
                    recbutton.ForeColor = Color.White;
                    recbutton.Text = "Rec";
                }
                else
                {
                    recbutton.BackColor = Color.DarkGreen;
                    recbutton.ForeColor = Color.White;
                    recbutton.Text = "Uns";
                }
                this.data = data;
            }
            else
            {
                nameLabel.Text = "null";
                numberLabel.Text = "null";
            }
        }

        protected override void OnItemUpdate(object value)
        {
            //PasswordsListBox lb = Parent as PasswordsListBox;
            //secondaryLabel.ForeColor = lb.SelectedItemIndex == this.ItemIndex ? Theme.Current.ListSecondarySelectedForeColor : Theme.Current.ListSecondaryForeColor;
        }


    }
}


Oct 23, 2009 at 8:20 PM

Ok, this is just a guess in the blue but can you try it with the list.Items uncommented again?

 

        list = new TestListBox();
        Controls.Add(list);
        //list.Items = new NotifyList();
        list.Bounds = new Rectangle(0, 40, Width, Height - 80);
        list.Anchor = AnchorStyles.Top | AnchorStyles.Bottom | AnchorStyles.Left | AnchorStyles.Right;

I noticed some strange behaviours myself with Fluid when it is not treated exactly the way it wants it to.

 

/schaze

 

Oct 23, 2009 at 8:26 PM

Unfortunately after uncommenting that line, the result is still the same.

Is it worth me uploading the project somewhere for you to take a look at?

Oct 23, 2009 at 8:28 PM

hm... to bad...

yes please upload it. But I will not be able to look into it until next week unfortunately...

Oct 23, 2009 at 8:36 PM
Edited Oct 23, 2009 at 8:37 PM

No worries, here is the project

 

http://rapidshare.com/files/296964466/FluidTest1_-_Copy.zip.html