FORUMS

XDA Picks: Best Apps of the Week (June 27 – July 4)

Apps are at the front and center of any smartphone experience, and with over a … more

HTC One M9 Developer Edition Android 5.1 OTA

The Developer Edition of the HTC One M9 is receiving an over-the-air update to Android 5.1. … more

Index Project For XDA Device Subforums

Another ambitious project from the collaborative efforts of Recognized Contributors and Forum … more

The Atlas of XDA

A few weeks ago, we asked you “How Does Your Location Affect Your Life As A Power User?”. In the days that … more

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

753 posts
Thanks Meter: 229
 
By joe_coolish, Retired Recognized Developer on 1st September 2010, 08:14 PM
Post Reply Subscribe to Thread Email Thread
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:	1924
Size:	48.0 KB
ID:	393363   Click image for larger version

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

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

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

Name:	ScreenShot4.jpg
Views:	1039
Size:	28.9 KB
ID:	432929  
Last edited by joe_coolish; 3rd November 2010 at 03:49 PM.
The Following 3 Users Say Thank You to joe_coolish For This Useful Post: [ View ]
 
 
1st September 2010, 08:14 PM |#2  
OP Retired Recognized Developer
Flag American Fork
Thanks Meter: 229
 
Donate to Me
More
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.
Last edited by joe_coolish; 3rd September 2010 at 06:00 AM.
1st September 2010, 08:15 PM |#3  
OP Retired Recognized Developer
Flag American Fork
Thanks Meter: 229
 
Donate to Me
More
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!
Last edited by joe_coolish; 3rd September 2010 at 06:01 AM.
1st September 2010, 08:15 PM |#4  
OP Retired Recognized Developer
Flag American Fork
Thanks Meter: 229
 
Donate to Me
More
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:	403
Size:	21.1 KB
ID:	393368   Click image for larger version

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

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

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

Name:	ScreenShot14.jpg
Views:	419
Size:	41.5 KB
ID:	393376   Click image for larger version

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

Name:	SimpleText.jpg
Views:	297
Size:	48.0 KB
ID:	393378  
Last edited by joe_coolish; 3rd November 2010 at 03:58 PM.
1st September 2010, 08:16 PM |#5  
OP Retired Recognized Developer
Flag American Fork
Thanks Meter: 229
 
Donate to Me
More
Releases:
  • Initial Release - 9/1/10
Last edited by joe_coolish; 2nd September 2010 at 01:05 AM.
1st September 2010, 08:16 PM |#6  
OP Retired Recognized Developer
Flag American Fork
Thanks Meter: 229
 
Donate to Me
More
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, 168 views)
File Type: zip XFControls 0.2.zip - [Click for QR Code] (60.8 KB, 479 views)
Last edited by joe_coolish; 3rd November 2010 at 03:52 PM.
1st September 2010, 08:17 PM |#7  
OP Retired Recognized Developer
Flag American Fork
Thanks Meter: 229
 
Donate to Me
More
Other things I might have missed
Reserved Other
2nd September 2010, 12:03 AM |#8  
kliptik's Avatar
Senior Member
Flag Austin, TX
Thanks Meter: 19
 
Donate to Me
More
Sounds interesting! Definitely looking forward to some screenshots.
2nd September 2010, 01:05 AM |#9  
OP Retired Recognized Developer
Flag American Fork
Thanks Meter: 229
 
Donate to Me
More
Quote:
Originally Posted by kliptik

Sounds interesting! Definitely looking forward to some screenshots.

Screenshots are up!
3rd September 2010, 06:04 AM |#10  
OP Retired Recognized Developer
Flag American Fork
Thanks Meter: 229
 
Donate to Me
More
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...
Post Reply Subscribe to Thread
Previous Thread Next Thread
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes