Major Update for the Sony Smartwatch 2 Brings DND and More

With the wearables landscape now dominated by Android Wear and Pebble, its … more

How to Root Android Wear 5.0.1 Lollipop Devices – XDA TV

The Lollipop update for Android Wear devices has hit the market and people are … more

Android 5.0.2 and New Factory Images For Nexus 7 (Wi-Fi) Available

Android 5.0 is has been publicly available since early November, and the … more

Github Tutorial App Shows You How to Use… Github

Github can get pretty complicated and using it can become quite daunting, especially … more

Welcome to XDA

Search to go directly to your device's forum

Register an account

Unlock full posting privileges

Ask a question

No registration required
Post Reply

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

OP joe_coolish

1st September 2010, 09:14 PM   |  #1  
OP Recognized Developer
Flag American Fork
Thanks Meter: 229
 
753 posts
Join Date:Joined: Mar 2010
Donate to Me
More
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:	1908
Size:	48.0 KB
ID:	393363   Click image for larger version

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

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

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

Name:	ScreenShot4.jpg
Views:	1023
Size:	28.9 KB
ID:	432929  
Last edited by joe_coolish; 3rd November 2010 at 04:49 PM.
The Following 3 Users Say Thank You to joe_coolish For This Useful Post: [ View ]
1st September 2010, 09:14 PM   |  #2  
OP Recognized Developer
Flag American Fork
Thanks Meter: 229
 
753 posts
Join Date:Joined: Mar 2010
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 07:00 AM.
1st September 2010, 09:15 PM   |  #3  
OP Recognized Developer
Flag American Fork
Thanks Meter: 229
 
753 posts
Join Date:Joined: Mar 2010
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 07:01 AM.
1st September 2010, 09:15 PM   |  #4  
OP Recognized Developer
Flag American Fork
Thanks Meter: 229
 
753 posts
Join Date:Joined: Mar 2010
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:	397
Size:	21.1 KB
ID:	393368   Click image for larger version

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

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

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

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

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

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

Sounds interesting! Definitely looking forward to some screenshots.

Screenshots are up!
3rd September 2010, 07:04 AM   |  #10  
OP Recognized Developer
Flag American Fork
Thanks Meter: 229
 
753 posts
Join Date:Joined: Mar 2010
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