Archive for the ‘GUI/UI’ Category

MultiView (0.1 Alpha)

Friday, November 9th, 2007

Small component which may act as ViewStack’s little brother.

Component acts somewhat like ViewStack, but it has following differences:

  • It accepts DisplayObjects (not only mx.core.Container instances)
  • It accepts IFactory instances.

And since it’s very young component, it missing some features like: exceptions and event dispatching, but it’s coming.
(more…)

Creating NanoRIA #2.1: .NET 3 Client

Tuesday, January 9th, 2007

In the previous tutorial we’ve created very small Web Service, which provides us with news, images and weather. Now we will create client to our Web Service in Microsoft Blend

So lets start Blend and C# Express, and create new project called “MiniRIA”, and lets start to develop!

But before we’ll actualy start to develop, we need WebService proxy class that call remote operations on our server. We’ll do this same way we did with GlobalWeather service:

  • Start your WebService from Visual Web Developer, and remmember it’s url, you can check in the Task Bar.
  • Open Command Promt, and type: wsdl.exe HERE_IS_URL /out:Path\to\project\Service.cs

Now let’s think a bit (yeah we have to do this stuff sometimes), since I’m using Windows Vista I really miss old Windows XP window layout, do you remmember blue panel with expanding toolboxes on your left, and content of a folder on your right? We’ll do similar layout in our application. On left side we’ll place weather and media information, and news on right. So we have to create 3 main UI Controls:

  • Weather control - holds information about weather.
  • News control - with propaganda :D.
  • Flickr control - with images.

Weather control will hold some Labels and TextBoxes controls, News and Flickr will contain ListBox instance, which will be filled with content (images for Flickr and news for News).
(more…)

Blend For ActionScript Coders #3: Simplest RSS reader.

Saturday, January 6th, 2007

Previous parts:

I think we are quite ready for our first application in Blend, that is RSS Reader, we also “meet” closer with XAML today.

Idea

Ok, our current RSS reader should be really simple, since this is our first time with layout in Blend. I say, we need one TextBox (something like TextInput\TextArea in Flex), one Button, and ListBox which will hold data from RSS feed. We Also have to create some custom class which will present every feed item in appropriate form, but this is another story.
(more…)

Blend For ActionScript Coders #2: List Controls.

Thursday, January 4th, 2007

Previous part.

This is second tutorial about Microsoft Blend, I strongly recommend you to read previous part of this tutorial, you may find some basic information about editing code, basis of C# syntax and some links.

In this tutorial we will learn how to use list based controls in .Net and also how to load an images in System.Windows.Controls.Image control. Lets create new project called “List” in Blend and open in your C# IDE.
(more…)

Creating Different ItemRenderers in List-Based controls.

Wednesday, January 3rd, 2007

Sometimes you might want to create different item renderers in a single list-based control i.e. in application form, here is my way of creating it. Basicaly we’ll use single class ItemContainer, but I’ve also created bunch of utility classes which might help me in future. So here they are:

  • ItemContainer: This is Canvas subclass. We will create actualItemRenderer in this container. And this container will play as ItemRenderer for List.
  • ItemContainerData: This is replacement for data property, it has itemRenderer and data properties, used by ItemContainer.
  • InitFactory: ClassFactory subclass, which has one more property - initObject, this is very similar to initObject from ActionScript 2.0 in methods like MovieClip.attachMovie.

The whole idea is to create special ItemRenderer that can “emulate” other controls, in my case it is subclass of Canvas which simply creates a specific UI control adds it to display list . Then we are to let the container know which renderer is to emulate, for this purpose I use ItemContainerData with special fields.

Sources and examples:

Example
Sources
(more…)

Blend For ActionScript Coders #1: MouseEvents.

Tuesday, January 2nd, 2007

I was playing with Microsoft Blend (previously known as Interactive Designer) for a while, and now I think I’m ready to write short tutorial. Since I’m basicaly ActionScript coder this article will contain some migration tips and comparisons with Flex\ActionScript.

For this tutorial you will need:

In this tutorial we will learn how to work with mouse events in blend
(more…)

Different ItemRenderers Sizes in List

Friday, December 29th, 2006

In List based controls from Flex Framework, we aren’t allowed to create itemRenderers with different size, due to the way Lists are scrolled (we scroll model instead of view). But sometimes we just have to do this, for example if we want to fill List with different images, or text with different formatting.

So I’ve decided to create List-Like component based on VBox, which has dataProvider and itemRenderer properties, and can render items with different sizes, which looks like this:

listview.jpg

Download Examples
Example

Stream Image Loading

Friday, October 6th, 2006

In ActionScript 1-2, we often needed to create preloader for images, because we couldn’t show them while loading were in progress. ActionScript 3.0 changes this, with ByteArray and URLStream classes we can work with bytes instead of files.

That means that we can show half of the image, or different states of progressive JPEG file.
(more…)

ContextMenuManager

Thursday, October 5th, 2006

I dont like the way we create and modify items with ContextMenu class in ActionScript 3.0, first we have to create item, then add event listener, then push our item to ContextMenu.customItems, I think this is quite alot of code for simple task. And there is one more disadvanage, we cannot subclass ContextMenu items, this means we cannot create subclass which would add some items by default.

All this inspired me to create my own class which would manage ContextMenu instance. Then I’ve added methods like remove, insert, getItem.
(more…)