5,598,938 Members 31,125 Now Online
XDA Developers Android and Mobile Development Forum

[SDK] XFControls - Advanced UI SDK [UPDATED w/ Sense UI Example!]

Tip us?
 
joe_coolish
Old
(Last edited by joe_coolish; 3rd November 2010 at 03:49 PM.)
#1  
Recognized Developer - OP
Thanks Meter 228
Posts: 753
Join Date: Mar 2010
Location: American Fork

 
DONATE TO ME
Default [SDK] XFControls - Advanced UI SDK [UPDATED w/ Sense UI Example!]

This is an Advanced UI SDK for developing finger-friendly Application UIs.

The reason for developing this SDK was mainly to learn about programming for Windows Mobile and the Compact Framework 3.5. I also developed this SDK because I could not find good UI controls that gave total display control to the programmer while taking care of all of the Physics, windowing, and frame buffering AND was open source.

Finally, this SDK was originally developed as part of the XDAFacebook application that I am currently developing.

I am releasing this SDK and its source so that people can have a good foundation to build finger-friendly Windows Mobile applications, and so that programmers starting off in the Windows Mobile world won't have to start from scratch when creating useful UI Controls.

Here are some of the features and uses of this SDK.

Features:
  • Fully customizable
  • Easily create custom UI Controls
  • Resolution independent
  • Full physics for rendering smooth scrolling

Uses:
  • Quickly create UI controls
  • Develop full UI SDKs
  • Learn basic UI programming for .net CF 3.5

I ask that if you use these controls, please provide feedback so that everyone can benefit!


Thank you and I hope you find these controls useful!
Attached Thumbnails
Click image for larger version

Name:	ScreenShot16.jpg
Views:	1895
Size:	48.0 KB
ID:	393363   Click image for larger version

Name:	ScreenShot5.jpg
Views:	1767
Size:	42.0 KB
ID:	393364   Click image for larger version

Name:	ScreenShot1.jpg
Views:	1426
Size:	38.1 KB
ID:	432927   Click image for larger version

Name:	ScreenShot2.jpg
Views:	1110
Size:	53.0 KB
ID:	432928   Click image for larger version

Name:	ScreenShot4.jpg
Views:	1013
Size:	28.9 KB
ID:	432929  

The Following 3 Users Say Thank You to joe_coolish For This Useful Post: [ Click to Expand ]
 
joe_coolish
Old
(Last edited by joe_coolish; 3rd September 2010 at 06:00 AM.)
#2  
Recognized Developer - OP
Thanks Meter 228
Posts: 753
Join Date: Mar 2010
Location: American Fork

 
DONATE TO ME
Default SDK Documentation

Even though the controls are easy to implement, they can seem intimidating at first. Here is an over-view of the core pieces to the SDK:

The IXFItem Interface:

Here are Properties of the interface
PHP Code:
XFPanelBase Parent getset; } // The item's List container
XFItemState State getset; } /* An Enum to describe the current item's state
  This could include things like [B]Selected[/B] or [B]Normal[/B]*/
Bitmap Buffer getset; }  // This is the item's cache buffer.  Allows for speedy rendering
XFItemStyle Style getset; }  // CSS like style object.  Allows for easy customization
XFItemType ItemType getset; }  /* Enum to label the type of the current object.  
For example, [B]Clickable[/B] or [B]Display[/B] meaning the item won't change*/ 
The following are the methods that need to be implemented
PHP Code:
int GetHeight();  /* This returns the height of the item. This value is usually calulated
but in some instances is static.  The value should be cached because this method
is called several times during the rendering process.*/
void ResetHeight();  // What ever needs to be done to reset the height cache
void ItemPaint(Graphics gint xint y);  // Where the magic happens.  More on this later
XFItemClickResult GetClickResult();  // An enum is return with what the action of clicking this item was. 

The main part of the interface is the ItemPaint method. This method is called from the XFPanelList and passes a Graphics object created from the Buffer Bitmap of the Item. In this method, you do all of your graphics logic, drawing it with the supplied graphics object. The x and y are any offset numbers that should influence when the objects are based. Most of the time, these numbers will be 0, 0.

Because the programmer has total control over how the item is rendered, special care must be used when creating the items, to draw all the features with respect to the XFItemStyle object. This object usually is created in CTOR. An example of the XFItemStyle object being created in one of the SenseUI XFItem's CTORs:

PHP Code:
        public SenseItem()
        {
            
ItemType XFItemType.Clickable;
            
Style = new XFItemStyle()
            {
                
BoarderBottomColor Color.FromArgb(189182189),
                
DashStyleBottom System.Drawing.Drawing2D.DashStyle.Dash,
                
TextColor Color.Black,
                
TextFont = new Font(FontFamily.GenericSansSerif8FontStyle.Regular),
                
SelectedTextFont = new Font(FontFamily.GenericSansSerif8FontStyle.Regular),
                
SecondaryTextFont = new Font(FontFamily.GenericSansSerif7FontStyle.Regular),
                
SelectedSecondaryTextFont = new Font(FontFamily.GenericSansSerif7FontStyle.Regular),
                
SecondaryTextColor Color.FromArgb(575257),
                
SelectedTextColor Color.White,
                
SelectedBackgroundColor Color.FromArgb(433643),
                
SelectedSecondaryTextColor Color.FromArgb(182178182),
                
Padding 11,
                
PaddingBottom 12,
                
PaddingLeft 10,
                
PaddingRight 16
            
};
        } 
You will also notice that the ItemType is also set here.
How you use the Style is a little more involved. In the ItemPaint, the programmer should base all of the features off of what is in the Style object. Here is an example of how the above Style object was used in the ItemPaint method:

PHP Code:
        public void ItemPaint(Graphics gint xint y)
        {
            
int width Parent == null Screen.PrimaryScreen.WorkingArea.Width Parent.Width;
            
XFControlUtils.DrawBoarders(Styleg00widthGetHeight());

            
int currX Style.PaddingLeft;
            
int currY Style.PaddingTop;
            
int mHeight 0;
            
int sHeight 0;

            if (
Icon != null)
                
currX += _iconSize Style.PaddingLeft;

            
SizeF mText = new SizeF();
            if (!
string.IsNullOrEmpty(MainText))
            {
                
mText XFControlUtils.GetEllipsisStringMeasure(width currX Style.PaddingRightMainTextStyle.TextFont);
                
MainText XFControlUtils.EllipsisWord(width currX Style.PaddingRightMainTextStyle.TextFont);
            }

            
SizeF sText = new SizeF();
            if (!
string.IsNullOrEmpty(SecondaryText))
            {
                
sText XFControlUtils.GetEllipsisStringMeasure(width currX Style.PaddingRightSecondaryTextStyle.SecondaryTextFont);
                
SecondaryText XFControlUtils.EllipsisWord(width currX Style.PaddingRightSecondaryTextStyle.SecondaryTextFont);
            }

            
mHeight = (GetHeight() / 2) - ((int)mText.Height 2);

            if (!
string.IsNullOrEmpty(SecondaryText))
            {
                
mHeight = (GetHeight() / 2) - _textSpace - (int)mText.Height;
                
sHeight = (GetHeight() / 2) + _textSpace;
            }

            if (
State == XFItemState.Selected)
            {
                
XFControlUtils.DrawBackgroundSelected(StylegxywidthGetHeight());

                if (!
string.IsNullOrEmpty(MainText))
                    
using (SolidBrush b = new SolidBrush(Style.SelectedTextColor))
                        
g.DrawString(MainTextStyle.SelectedTextFontbcurrXmHeight);
                if (!
string.IsNullOrEmpty(SecondaryText))
                    
using (SolidBrush b = new SolidBrush(Style.SelectedSecondaryTextColor))
                        
g.DrawString(SecondaryTextStyle.SelectedSecondaryTextFontbcurrXsHeight);
            }
            else
            {
                if (!
string.IsNullOrEmpty(MainText))
                    
using (SolidBrush b = new SolidBrush(Style.TextColor))
                        
g.DrawString(MainTextStyle.TextFontbcurrXmHeight);
                if (!
string.IsNullOrEmpty(SecondaryText))
                    
using (SolidBrush b = new SolidBrush(Style.SecondaryTextColor))
                        
g.DrawString(SecondaryTextStyle.SecondaryTextFontbcurrXsHeight);
            }

            if (
Icon != null)
                
XFControlUtils.DrawAlphaFirstPix(gIconStyle.PaddingLeftStyle.PaddingTop);
        } 

That is as complex as it gets. Other than doing normal Event Handling for ClickReturns, this is all that is required to create beautiful UI Controls for your application.

I hope that this helps! Feel free to PM me or post a reply if you need further clarification.
 
joe_coolish
Old
(Last edited by joe_coolish; 3rd September 2010 at 06:01 AM.)
#3  
Recognized Developer - OP
Thanks Meter 228
Posts: 753
Join Date: Mar 2010
Location: American Fork

 
DONATE TO ME
Default Class List

Form Controls:
  • XFPanelContainer - The main control that interacts with the Form.

XFPanels:
  • XFPanelBase - Basic building block. Handles most of the generic functionality
  • XFPanelList - Can add IXFItem items.
  • XFPanelHeader - The top header bar for an XFPanelContainer

XFItems
  • IXFItem - Interface that all XFItems inherate
  • XFItemSimpleText - Simple item that displays text
  • XFItemBack - Special item that allows a panel to slide back
  • XFItemLoading - Item that allows for work to be down in the background.

XFControlUtils: Library of static, useful utilities for this SDK
  • DrawAlpha - Draws an image with a supplied Graphics object with a specific level of opacity
  • DrawAlphaFirstPix - Draws an image and renders all pixels that are the same color as pixel (1,1) are 100% transparent
  • DrawJustifiedString - draws a justified string
  • GetEllipsisStringMeasure - Takes a string and if it is more than the supplied width, clips the string and adds a trailing "..." at the end
  • EllipsisWord - same as the GetEllipsisStringMeasure, except it ellipsis at the words and not at the char level.
  • GetSizedString - Takes a string and adds "\n" so that the string wraps according to the supplied width
  • Many Others!
 
joe_coolish
Old
(Last edited by joe_coolish; 3rd November 2010 at 03:58 PM.)
#4  
Recognized Developer - OP
Thanks Meter 228
Posts: 753
Join Date: Mar 2010
Location: American Fork

 
DONATE TO ME
Default Sense UI Example

Here is a working example. I made this Sense UI example in about 3 hours 15 hours. It isn't complete but gives a good example of how to/why use this SDK. There are 3 screenshots of what this demo looks like.

I'll explain some of the pieces of code when I get some time later today.


The other great example of how to use this SDK is the XFAFacebook Application.
The source for this project is located @ http://code.google.com/p/xda-winmo-f...runk/XFSenseUI
There are a few screenshots of the XDAFacebook application included.


Finally, a quick start tutorial.
  1. Start a new Smart Device project.
  2. Add a reference to the XFControls.dll
  3. Place the following lines of code in the Form1 constructor (after the InitializeComponent()

Code:
            XFPanelContainer container = new XFPanelContainer();
            container.Dock = DockStyle.Fill;
            Controls.Add(container);

            XFPanelList list = new XFPanelList();
            container.SetMainPanel(list);

            list.ShowScrollbar(true);

            for (int i = 0; i < 50; i++)
            {
                list.Add("This is item " + i);
            }
Run the project and you will get an output like the "SimpleText.png"

It's that easy!

UPDATE: I've added the XFSense to the Google Code page and have made some pretty extensive updates to it. I've added a few controls including sliders, toggles, checkboxes and radio buttons. It still isn't complete but I will be working to make it a full fledge Sense SDK.

Stay tuned!
Attached Thumbnails
Click image for larger version

Name:	ScreenShot6.jpg
Views:	393
Size:	21.1 KB
ID:	393368   Click image for larger version

Name:	ScreenShot7.jpg
Views:	408
Size:	39.7 KB
ID:	393369   Click image for larger version

Name:	ScreenShot10.jpg
Views:	389
Size:	41.5 KB
ID:	393372   Click image for larger version

Name:	ScreenShot12.jpg
Views:	316
Size:	15.3 KB
ID:	393373   Click image for larger version

Name:	ScreenShot14.jpg
Views:	410
Size:	41.5 KB
ID:	393376  

Click image for larger version

Name:	ScreenShot15.jpg
Views:	381
Size:	44.4 KB
ID:	393377   Click image for larger version

Name:	SimpleText.jpg
Views:	292
Size:	48.0 KB
ID:	393378  
 
joe_coolish
Old
(Last edited by joe_coolish; 2nd September 2010 at 01:05 AM.)
#5  
Recognized Developer - OP
Thanks Meter 228
Posts: 753
Join Date: Mar 2010
Location: American Fork

 
DONATE TO ME
Releases:
  • Initial Release - 9/1/10
 
joe_coolish
Old
(Last edited by joe_coolish; 3rd November 2010 at 03:52 PM.)
#6  
Recognized Developer - OP
Thanks Meter 228
Posts: 753
Join Date: Mar 2010
Location: American Fork

 
DONATE TO ME
When major updates occur, the DLLs will be posted here. The best thing to do is pull the source from the Google Code page and use that.

This will guarantee the freshes code will be used for your projects

Instructions:
  • Download and unzip the latest XFControls.zip from below.
  • Add the .dll as a reference.
  • Program!

The source can be found at: http://code.google.com/p/xda-winmo-f...ook/XFControls

List of downloads:
  • 10/6/10 - Updated for speed and better scrolling! - XFControls 0.2.zip
  • 9/1/10 - Initial upload - XFControls 0.1.zip
Attached Files
File Type: zip XFControls 0.1.zip - [Click for QR Code] (57.9 KB, 155 views)
File Type: zip XFControls 0.2.zip - [Click for QR Code] (60.8 KB, 460 views)
 
joe_coolish
Old
#7  
Recognized Developer - OP
Thanks Meter 228
Posts: 753
Join Date: Mar 2010
Location: American Fork

 
DONATE TO ME
Default Other things I might have missed

Reserved Other
 
kliptik
Old
#8  
kliptik's Avatar
Senior Member
Thanks Meter 19
Posts: 268
Join Date: Apr 2009
Location: Austin, TX

 
DONATE TO ME
Sounds interesting! Definitely looking forward to some screenshots.
 
joe_coolish
Old
#9  
Recognized Developer - OP
Thanks Meter 228
Posts: 753
Join Date: Mar 2010
Location: American Fork

 
DONATE TO ME
Quote:
Originally Posted by kliptik View Post
Sounds interesting! Definitely looking forward to some screenshots.
Screenshots are up!
 
joe_coolish
Old
#10  
Recognized Developer - OP
Thanks Meter 228
Posts: 753
Join Date: Mar 2010
Location: American Fork

 
DONATE TO ME
Only 3 downloads?! Hmmm.... I figured more people would be interested in a finger-friendly and open source UI SDK...

Is there something wrong with my posts? Are they too confusing?
Let me know what I can do to help! This has taken me a good deal of time to write and I would hope that it would be of use to someone else...

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


TRENDING IN THEMER...