Winstagram

Icon

Live Tile

LiveTile Message

Live Tile Message

Live Tile

 

Already interested?

Stay tunned for more :)!

Posted by dorindanciu 11/11/2012 at 05:05AM


Windows 8 Labs #1

 

 

 

This tutorial shows you how to create a Windows Store app, which will alter its view depending on ApplicationView’s state. In this tutorial, you will create a simple grid view who’s cells will be colored differently and who’s columns will be altered in Snapped mode.

A screenshot from the completed app is below:

final app

 

Understand ApplicationViewStates

As ApplicationViewStates we have:  

  • FullScreenLandscape

The current app's view is in full-screen (has no snapped app adjacent to it), and has changed to landscape orientation. 

full screen landscape

  • Filled

The current app's view has been reduced to a partial screen view as the result of another app snapping. 

filled

  • Snapped

The current app's view has been snapped. 

snapped

  • FullScreenPortrait

The current app's view is in full-screen (has no snapped app adjacent to it), and has changed to portrait orientation.

full screen portrait

 

       

Create a new Windows Store App

Follow this steps to create a new Windows Store App.

1. Open Microsoft Visual Studio 2012

2. At the top of the Menu bar, click FILE -> New -> Project… 

new project

This displays the new project dialog.

3. Expand Templates -> Visual C# -> Windows Store, then select Blank App(XAML)

new project dialog

4.In the Name filed, type a desired name for your application, then hit OK.

5.Hit F5 key to rebuild the project and start the app.

 

Create the colorful grid

1. Open Solution Explorer and double click on MainPage.xaml.

solution explorer

This will lead you to the MainPage.xaml file, and that’s the place where we will create our custom interface.

2. In order to proceed we need to create a 2x2 matrix (grid). If you will move the cursor around the borders of the tablet displayed on MainPage.xaml page, you will notice an orange line that will follow your moves. That is the separator line, and it will helps us to split our grid in different configurations. Press click whenever you are ready. Follow the same procedure in order to create two rows.

splitted grid

3. In order to achieve two equal rows and columns we need to adjust their width and size to be equal to 1* (1 fractional unit). This way we will achieve two equally sized rows and columns no matter what’s the resolution. 

row-columns definition

4.  Once the 4 cells created we need to colorize them. Use the Toolbox to drag and drop a series of StackPanels into the grid. As you may notice they may overlay within one cell – don’t freak out, we are going to fix it . 

This is how your Document Outline View should look like until now:

document outline

5. The next step is to place each stack panel within one separate cell. To position the first stack panel at (0,1) we must select it first, then access it’s properties. 

stack pannel properties

Under the Layout section, we can decide the actual coordinates for the panel. So in  order to have it displayed at (0, 1) we need to adjust the Row and Column values. In order to provide an auto-resizable behavior for our panel we need to set it’s width and height values on Auto, select Stretch for both HorizontalAlignment and VerticalAlignment, and be sure that all margin values are 0. Repeat those steps for the rest of the panels.

6. Add some color to our app. Since we are familiar with the Properties view, we can adjust each panel’s background by changing its color from the Brush section. Once you’ve colored your app hit F5 key.

Expected result:

final app interim

 

Add the description label

1. Select from Toolbox a Border component and drag it over the grid. Pay attention not to place it inside any of the 4 stack panels. In order to validate that take a look on Document Outline view.

2. Place the border on grid’s center. In order to do that we will use Properties view again. Select the border then go to its properties. Adjust border’s Width and Height value to Auto. Set RowSpan and ColumnSpan values to 2 and select Center as HorizontalAlignment and VerticalAlignment. If your Padding values are set to 10 we are good to go. But what exactly have we done here?

border properties

By setting the RowSpan and Column to 2 we are just saying that the relative should be the exact same size of the grid, so the item will be position on the center of the grid.

3. Customize the Border Item. From Properties -> Brush we can adjust the background  and borderBrush colors, and from Properties -> Appearance we can adjust the border thickness and corner radius.

4. Place a TextBlock inside the border. The last element that needs to be added on the page is a TextBlock. Drag and drop it from Toolbox inside the border we’ve defined at the previous step and change it’s properties in order to be centered. (Width - Heigth on Auto, HorizonatalAlignment – VerticalAlignment on Center and Margins on 0 ). You may want to adjust it’s font size because it will be to small. To do that check the Text section under Properties. Last but not least name the textBlock “visualStateTextBlock”.

visualStateTextBlock

Hit F5 and run your app and make sure that all the elements are displayed according our specifications. 

 

SizeChanged EventListener

Now is the time to actualy write some code. In order to display the current app state we need to be notified about the UI changes. This can be accomplished in multiple ways. You can define a handler method for SizeChanged event by selecting the page element from XAML, and from its properties -> Event Handlers (the thunder button), then double click the Size Changed input field or the method I’ll describe in the following steps.

1.Open MainPage.xaml.cs by double clicking it from Solution Explorer. 

2. Add a new event handler for SizeChanged on MainPage() constructor.

public MainPage()

{

            this.InitializeComponent();

            this.SizeChanged += MainPage_SizeChanged;

}

3. Offer a proper implementation for MainPage_SizeChanged event handler.


void MainPage_SizeChanged(object sender, SizeChangedEventArgs e)

{

            visualStateTextBlock.Text = ApplicationView.Value.ToString();

 

            if (ApplicationViewState.Snapped == ApplicationView.Value)

            {

                grid.ColumnDefinitions[0].Width = new GridLength(0);

            }

            else

            {

                grid.ColumnDefinitions[0].Width = new GridLength(1, GridUnitType.Star);

            }

}

 

What we’ve done here? It’s simple. First of all we’ve displayed the current state by adjusting the text property value, and for the snapped mode we’ve only displayed the second colum.

 

What’s next?

Windows 8 Labs #1 AppStates (JS) -comming soon

All the resources and demos presented this saturday are available for download here.

 

 

Posted by dorindanciu 03/11/2012 at 10:18PM


Windows 8 Labs

 

 

If you've been waiting to update your skills on the latest Microsoft technologies, now is the time to get started.
Microsoft Student Partners UBB is organising a series of events dedicated to Windows 8, where I'm gonna be your host and one of the main speakers.
We are starting this Saturday (November 3rd), but for those of you that can't take part at the event, I'll post all the informations as step by step tutorials.
Stay tuned :) !
 

 

Posted by dorindanciu 01/11/2012 at 07:47AM


Custom Components - Notification Center

In order to proceed open Xcode and do the following:

 

CMD (⌘) + SHIFT + N  (new single view project)

CMD (⌘) + N (new class, subclass of UIViewController which will be our NotificationCenterViewController)

 

Once the class is created, define isSlideActionAvailable as property in order to be aware when should we enable user interaction on our custom NotificationCenterViewController.

Also for private use we need to define another flag isMoving in order to be aware what is the state of the view. Place this flag in the auto-generated extension of our class between the curly brackets {}.

 

In order to move the view up and down we need to add an UIPanGestureRecognizer. This gesture recognizer will detect the pan action and will provide a series of events/states which will be useful for us in order to create the desired behavior. We can add the gesture recognizer right on the initialization method for our NotificationCenterViewController.

 



#import <UIKit/UIKit.h>

@interface DBNotificationCenterViewController : UIViewController

@property (nonatomic, assign) BOOL      *isSlideActionAvailable;

@end

 

@interface DBNotificationCenterViewController (){

    BOOL isMoving;

}

@end

 

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil

{

    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];

    if (self) {

        // Custom initialization

        UIPanGestureRecognizer *panGesture = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(handlePan:)];

        [self.view addGestureRecognizer:panGesture];

        [panGesture release];

    }

    return self;

}

 

Since we have declared the target as being self, and for the action we’ve specified the handlePan: method, this will be the place where all the magic will happen. Easy right :) ?

 

Let’s proceed with the implementation of handlePan: method.

Right before the end of your class (@end) place the following lines of code, which represents the skeleton for this method:

 



#pragma mark -

#pragma mark UIGestureRecognizer Methods

- (void)handlePan:(UIPanGestureRecognizer *)recognizer{

    

    if (_isSlideActionAvailable) {

       

        if (recognizer.state == UIGestureRecognizerStateBegan) {

            

        }

        

        if (recognizer.state == UIGestureRecognizerStateChanged) {

            

        }

        

        if (recognizer.state == UIGestureRecognizerStateEnded) {

           

        }

    }

}

 

The decisional structure presented above is checking if user’s interaction should be considered or not ( if (_isSlideActionAvailable) ), and if the result is TRUE we should handle each recognizer state separately.

Before any other changes to this method, we should define a touchable area for our view, and also a top offset in order to differentiate it from the NotificationCenter present in the OS. Place the following two lines at the top of your class right after the comments.

 

#define TOUCHABLE_AREA 80.0

#define TOP_OFFSET 40

 

Since we’ve defined our touchable area, the next step is to validate the start location of the pan gesture. We can do that by comparing the y coordinate of the touch location with the difference between the view’s frame height and our TOUCHABLE_AREA value. If the y value is greater, that means that we have started to move the view. Yay :) !

 

This is how our logic should look like:

 



if (recognizer.state == UIGestureRecognizerStateBegan) {

    CGPoint startPoint = [recognizer locationInView:self.view];

    if (startPoint.y > self.view.frame.size.height - TOUCHABLE_AREA){

        isMoving = YES;

    }

}

 

Until now we have managed to detect when we should move the view, but the actual translation take place only in the UIGestureRecognizerStateChange branch.

 

In order to move the view up and down we can make use of translationInView: method form UIPanGestureRecognizer class. This way we can get the translation of the pan gesture in our’s view coordinate system, and increase the y value of our notification view center with the y value of the translation in order to move it around.

 



 

if (recognizer.state == UIGestureRecognizerStateChanged) {

    if (isMoving){

        CGPoint translation = [recognizer translationInView:self.view];

        if (recognizer.view.center.y + translation.yself.view.frame.size.height/2) {

            recognizer.view.center = CGPointMake(recognizer.view.center.xrecognizer.view.center.y + translation.y);

            [recognizer setTranslation:CGPointMake(0, 0) inView:self.view];

        }

    }

}

 

The last step is to adjust the final position of the screen. This means the notification view can be fully displayed or closed. To achieve this behavior we must compare the current position of our notification view with a certain limit, in order to know which of the final states described above we must choose.

 



 

if (isMoving) {

    CGPoint finalPoint;

    CGFloat screenHeight = [UIScreen mainScreen].bounds.size.height;

    if ((screenHeight + self.view.frame.origin.y) > TOUCHABLE_AREA) {

        finalPoint = CGPointMake(recognizer.view.center.x,recognizer.view.frame.size.height/2);

    }else{

        finalPoint = CGPointMake(recognizer.view.center.x,-screenHeight/2 + TOP_OFFSET);

    }            

    recognizer.view.center = finalPoint;

    isMoving = NO;

}

 

In order to test what we have already build until now, create a new class which will be a subclass of our NotificationCenterViewcontroller and make sure the checkbox in front of “With XIB for user interface” is selected. Then change the background color of it’s view in order to spot the difference while sliding.

Now go back into your ViewController class, and add the following piece of code right before the end of the method.

 



 

NotificationViewController *notif = [[NotificationViewController alloc] initWithNibName:@"NotificationViewController" bundle:nil];

[notif setIsSlideActionAvailable:YES];

[self.view addSubview:notif.view];

 

Just run the project and slide that view. What a mess :). It’s sliding pretty well but when you release it, the jump to the final position is instant and it looks annoying. Let’s fix that.

 

In order to fix the translation to the final place we will use UIView animation, but to make things more exiting we will also consider the pan velocity and the remaining distance to the final point. This way we will not only slide the view. In fact we  will ad an impulse to it’s sliding velocity. Isn’t that cool?

 

The fist step for this customization is to create an enum which will contain the slide directions, which will be useful when we need to track the last sliding direction. In order to do that add those lines of code right after the #define directive from NotificationCenterViewController.m, and then create a variable named direction right after the BOOLEAN isMoving from our class extension .

 



 

typedef enum{

    NotificationCenterMovingDirectionUp,

    NotificationCenterMovingDirectionDown

} NotificationCenterMovingDirection;

 

NotificationCenterMovingDirection   direction;

 

Right after we need to detect this direction changes, and for that we will update the handlePan: method.

 



 

if (recognizer.state == UIGestureRecognizerStateChanged) {

    if (isMoving){

        CGPoint translation = [recognizer translationInView:self.view];

        if (recognizer.view.center.y + translation.yself.view.frame.size.height/2) {

            recognizer.view.center = CGPointMake(recognizer.view.center.xrecognizer.view.center.y + translation.y);

            [recognizer setTranslation:CGPointMake(0, 0) inView:self.view];

                    

            if (translation.y != 0) {

                (translation.y > 0) ? (directionNotificationCenterMovingDirectionDown) : (directionNotificationCenterMovingDirectionUp);

            }

        }

    }

}

 

We are pretty close to the final result now. All we have to do is a little more math.

 



if (recognizer.state == UIGestureRecognizerStateEnded) {

    if (isMoving) {            

        CGPoint velocity = [recognizer velocityInView:self.view];

        CGFloat magnitude = sqrtf((velocity.x * velocity.x) + (velocity.y * velocity.y));

        CGFloat distanceLeft;

        CGPoint finalPoint;       

        CGFloat screenHeight = [UIScreen mainScreen].bounds.size.height;

 

        if ((((screenHeight + self.view.frame.origin.y) > TOUCHABLE_AREA) && direction == NotificationCenterMovingDirectionDown)

                    || (direction == NotificationCenterMovingDirectionDown  && magnitude > 500)) {

            finalPoint = CGPointMake(recognizer.view.center.x,recognizer.view.frame.size.height/2);

            distanceLeft = 0 - self.view.frame.origin.y;

        }else{

            finalPoint = CGPointMake(recognizer.view.center.x,-screenHeight/2 + TOP_OFFSET);

            distanceLeft = screenHeight + self.view.frame.origin.y;

        }

                

        CGFloat duration = MIN(distanceLeft / sqrtf(velocity.y * velocity.y), 0.35);

        [UIView animateWithDuration:duration delay:0 options:UIViewAnimationOptionCurveEaseIn animations:^{

            recognizer.view.center = finalPoint;

        } completion:nil];

                

        isMoving = NO;

    }

}

 

The final project can be downloaded from here.

Thanks for following me!

Posted by dorindanciu 07/10/2012 at 09:25PM


Custom Components - Notification Center, Siri

 

 

 

 

 

The application presented above was developed for this student technology competition, where i've won the 4th place.

The main component of this application are represented by the Notification Center view which comes down from the top of the screen (it is used as a login form), and the Siri like scroll view which displays a series of views: labels, tables, graphs. 

 

If you are excited about those custom components, stay tuned because some step by step tutorials on how to create them will arrive soon on dorindanciu.com!

 

 

Posted by dorindanciu 06/10/2012 at 01:20PM


Objective C coding conventions

 

Like you probably reviewed some code sheets before, you must agree that sometimes, developers tend to define their own specific coding conventions adapting the guidelines for their habits.

 

As wikipedia says “Coding conventions are a set of guidelines for a specific programming language that recommend programming style, practices and methods for each aspect of a piece program written in this language.”

As those conventions typically cover organization standards, are highly recommended to be used, because as an overall effect they improve the readability of the source code, and make software maintenance much easier.

 

Recently @dannygreg has posted a tweet where he announced that his team published on Github their own Objective C coding conventions. 

The posted file is a short list of tips and tricks that I invite you to discover. 

Direct download .zip File

 

 

Code Documentation

 

For the methods defined in header files (suffixed in .h), my preferred approach is this one:

 

/**

 * @abstract : Web Service call designed to fetch all TaskInformations for the given CategoryId and UserId

 * @param    : categoryId taskInformation's categoryId

 * @param    : userId questInformation's userId

 * @return   : -

 */

- (void)getTaskInformationByCategoryId:(long)categoryId andUserId:(long)userId;

 

and for the implementation (method) files (which normally have a file extension .m) I prefer to use //  followed by a TAB in order to write a specific comment above ones of the most complex operations.

 

//  only on zoom out

if (zoomScale < 1) {

    //  if the scene is shifted

    if (diff.x < 0) {

        //  bring it to 0 in order to avoid blank spaces

    // on the edges after zoom out

        if ((diff.x + ((sceneWidth - sceneWidth*zoomScale) *zoomScale)) > 0){

            diff.x = 0;

        }

        else{

            diff.x += ((sceneWidth - sceneWidth*zoomScale) *zoomScale);

        }

    }

}

 

 

 

Properties Declaration

@property (attributes) type name;

 

 

The following code snippet illustrates a header file. As we can see from below there are some TAB spaces between the instance variables name and their type. This approach provides a higher readability level on the source code, an also looks prettier :) . If we take a closer look at the two methods defined here, we can see that there is a white space between the method’s type identifier ( - ) and it’s return type (for the same reasons).

 

//

//  AccountCell.h

//

//  Created by Dorin-Bogdan Danciu on 7/15/12.

//  Copyright (c) 2012 Dorin-Bogdan Danciu. All rights reserved.

//

 

#import

@class NBAccount;

@interface AccountCell : UITableViewCell

@property (retain, nonatomic) IBOutlet UILabel      *accountNrLabel;

@property (retain, nonatomic) IBOutlet UILabel      *totalLabel;

@property (retain, nonatomic) IBOutlet UIView       *separator;

@property (retain, nonatomic) IBOutlet UILabel      *initialSumLabel;

@property (retain, nonatomic) IBOutlet UILabel      *percentLabel;

@property (retain, nonatomic) IBOutlet UILabel      *revenueLabel;

- (void)customizeForIndex:(int)index bound:(BOOL)bound;

- (void)dispalyAccount:(NBAccount *)account;

@end

 

 

 

 

NOTE: This article is constantly updated!

 

 

Posted by dorindanciu 27/09/2012 at 04:01PM


Preface

 
 
Here's to the crazy ones, the misfits, the rebels, the troublemakers, the round pegs in the square holes… the ones who see things differently – they're not fond of rules… You can quote them, disagree with them, glorify or vilify them, but the only thing you can't do is ignore them because they change things… they push the human race forward, and while some may see them as the crazy ones, we see genius, because the ones who are crazy enough to think that they can change the world, are the ones who do.
Apple Inc. ad campaign 1997
 
You may have read this before, but i have the feeling that you'll never get bored of it. In essence those simple lines consists of emotions, thougts and actions that are supposed to motivate you.

Same motivation that drove me here, inspired me to create this end point, specially shaped to provide sheets of code, to be used whenever you need them. The main topics i'll discuss here will be related to mobile development (specially iOS), and will consist in tips and tricks, custom reusable components, game development, and research topics that i would like to share and debate with you.
 
 
 
 
 
Dorin
 
 
 
 
 
 
 

Posted by dorindanciu 26/09/2012 at 05:26PM