마인드를 확장하라

Flex 3:Feature Introductions: Deep Linking

2009-06-26T18:28:17Z

From Adobe Labs

Back Button and other URL Support

Introduction

"Deep Linking" is a term used by web developers to describe support for URL-based navigation in applications that are not a traditional hierarchy of HTML pages.

Traditional web applications have multiple valid URLs. For example, if you go to http://www.adobe.com, you'll end up at our home page. If you press the "Support" button, you'll end up at the Adobe support page and your browser will show the URL http://www.adobe.com/support/. Choose "Contact Support" and you'll end up at http://www.adobe.com/support/contact/. You can hit the back button to go back to the previous page, bookmark the support page so you can go there directly, go back to the support page much later since it's added to the browser history, and someone else can type in http://www.adobe.com/support/ and go to the support page without seeing the home page.

By default, Flex (and AJAX) applications don't work this way. Your Flex application is accessible via one URL and you change what the user sees within the Flex application instead of switching to a new URL. In fact, switching to a new URL closes your application and, while it could open another Flex application at the new URL, you would lose the ability to make nice transitions between the visual states of your application and make it harder to share data between the application states, so typically you want to work within one URL, but then you don't have the navigation features users expect such as back button, bookmarking, etc.

Deep Linking allows the URL to represent different "places" in a Flex application without closing the application as you change the URL. This is accomplished by using real or faked named anchors (depending on which browser you are using). Named anchors are parameters that follow the "#" in a URL that are normally used to navigate to different places within an HTML page.

For example, if you click on this link Example, you will go the the example portion of this document and the URL will show an additional #Example. You can put just about anything after the "#" and changing what is there doesn't cause the page to re-load; therefore, the Flex application can remain running. The portion of the URL after the "#" is known as the fragment. If you change the fragment, the previous fragment gets stored in the browser history.

The Flex 3.0 Deep Linking Implementation

In Flex 3.0, Deep Linking is implemented via the BrowserManager. The BrowserManager allows your application to set the fragment and receive notification when the fragment changes. There are new methods in URLUtils that help you convert an object full of property and value pairs to a fragment and vice-versa, but there is no support for creating or interpreting fragments directly from the components that make up the application. We've left this out for two reasons: One is that we want to eventually build a more automated way of providing deep linking in an application. However, that's a big chunk of work and we don't want to start down that path right now and have backward compatibility issues later. The second reason is that there is a pretty good third party implementation called UrlKit. However, it is unlikely that anything we do will prevent you from using UrlKit in the future, so you should be able to use it in your applications without worry.

Adding Deep Linking To Your Application

Adding support for Deep Linking to your Flex 3.0 Application is relatively simple. The basic steps are:

turn off the HistoryManager (the HistoryManager also uses the BrowserManager and will interfere with your fragment processing)
initialize the BrowserManager with a default fragment and title
determine when you want to update the fragment and call BrowserManager.setFragment.
listen for events from the BrowserManager
when you receive an event, interpret the fragment and change your application accordingly

If you use Flex Builder, you must choose one of the HTML templates that support the BrowserManager. Go to the project's Properties dialog, select "Flex Compiler" and ensure that the "Enable integration with browser navigation" is checked.

If you don't use Flex Builder, you should modify one of the index.template.html files in a template folder that ends with "with-history". You'll need to copy the support files in the subfolders as well.

Example

It might be easier to show the steps of adding deep linking in an example. Here's a "simple" MXML application. It has a TabNavigator with two panels/tabs and a checkbox on each panel. The application updates the fragment whenever the user switches tabs or checks/unchecks a checkbox, and remembers each of those changes in the browser history so you can use the back button to go back to previous states. You can bookmark any state and return to it and copy the URL of a state into a new browser and the application will appear to start in that state.

The key pieces are:

historyManagementEnabled="false" in the Application tag
the BrowserManager.init() call in initApp() call that initializes the BrowserManager to a default fragment. "" means "nothing after the '#'".
the three places where change="updateURL()" will update the URL based on changes to the TabNavigator or CheckBoxes.
the BrowserManager.addEventListener() call in initApp() that listens for changes from the Browser
the code in parseURL() that interprets the new fragment

This example uses URLUtils to take an object of property/value pairs, creates the fragment from it, and parses the fragment back into an object of property/value pairs. The object will have properties like view=1 and details=true, and create URL fragments like "#view=1;details=true". You can choose to not use URLUtils and create your own formatting and parsing if you wish.

If you use the third-party UrlKit, you have to set up a set of "rules" that map the components to the URL and vice-versa. It makes it easier to create more readable and hierarchical fragments like "#view=Shipping;details" or "#/Shipping/details=true". There's some extra work in figuring out the rules, but then you don't need to write methods like updateURL and parseURL as that functionality is contained in the rules.

Supported Browsers

The BrowserManager works by talking to Javascript in the HTML wrapper. Not every browser works the same way so there is Javascript for specific to each browser in the wrapper. Not every browser is supported. Right now we have tested support for:

Internet Explorer 6 & 7 on Windows
Firefox on Mac and Windows
Safari on Mac

We've been unable to get good support in Opera for back button, and thus Opera is not officially supported. You can pass in a fragment on the URL and it will get passed to the BrowserManager correctly, however. We do not support any other browser not listed in this section.

Known Issues

SDK-9722 DeepLinking behaves oddly when using named anchors in an HTML page.
SDK-9632 Currently, DeepLinking support for Opera is limited. You can copy & paste an url into Opera and the application should start in the appropriate state, but the url is not subsequently updated with additional navigation.
SDK-1902 After editing the application URL in the Firefox, subsequent user navigation will not automatically update the URL shown in Firefox. To update the URL, highlight the address bar in Firefox and press the esc key. The URL should update to the appropriate URL.
SDK-11196 The text in historyFrame.html has extraneous debug text. This will be fixed in the next release.
SDK-11033 The copyToAddressBar flag for the setFragment function will be removed in the next release.
Setting the title in setFragment does not change the BrowserManager title property
The API documentation for IBrowserManager is missing. Refer to the mx.managers.BrowserManagerImpl documentation for now.

Back to Feature Introductions

Retrieved from "http://labs.adobe.com/wiki/index.php/Flex_3:Feature_Introductions:_Deep_Linking"

javascript layer popup(iframe)

2009-05-28T13:13:45Z

Greybox : http://orangoo.com/labs/GreyBox/

Highslide : http://vikjavev.no/highslide/

Lightbox2 : http://www.lokeshdhakar.com/projects/lightbox2/

LightWindow : http://stickmanlabs.com/lightwindow/

Lytebox : http://www.dolem.com/lytebox

Lytebox 3.22 Modification 1.3 : http://pavel.kuzub.com/lytebox/ , http://www.faszination-china.com/about_imaging_lytebox.php

FLEX에서 Label에 StyleSheet 지정하기

2009-05-15T01:31:42Z

version="1.0" encoding="utf-8"?>
http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" width="220" height="48">

   import mx.controls.Label;

private function init(){
   var style:StyleSheet = new StyleSheet();
   var styleObj:Object = new Object();
   styleObj.fontSize = "12";
   styleObj.color = "#FF0000";
   style.setStyle("a", styleObj);

   var label:Label = new Label();
   addChild(label);
   label.mx_internal::styleSheet = style;
   label.htmlText = "Red Daum.net";

}

]]>

FLEX - live scroll datagrid

2009-04-27T13:21:21Z

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	creationComplete="creationCompleteImpl()"
	width="400"
	height="500"
 viewSourceURL="srcview/index.html">
	<mx:Script>
		[CDATA[
			import mx.events.ScrollEventDirection;
			import mx.events.ScrollEvent;
			import mx.controls.Alert;
			import mx.rpc.http.HTTPService;
			import mx.rpc.events.FaultEvent;
			import mx.rpc.events.ResultEvent;
			import mx.collections.ArrayCollection;
 
			[Embed(source="assets/loading.swf")]
			private var loadingAnimation:Class;
 
			//keep a request count not to make new request until last request data is received
			private var loadRequests:int = 0;
 
			[Bindable]
			private var list:ArrayCollection = new ArrayCollection();
			//http service from where you get random data
			private var httpService:HTTPService = new HTTPService();
			/**
			 * after load complete add event listeners for httpService and make a first call 
			 */
			private function creationCompleteImpl():void
			{
				//add an event listener for the httpService events
				httpService.url = parameters.serviceUrl;
				httpService.addEventListener(ResultEvent.RESULT, httpServiceEvent);
				httpService.addEventListener(FaultEvent.FAULT, httpServiceEvent);
				getNewData();
			}
			/**
			 * httpService event handler 
			 */
			private function httpServiceEvent(event:Event):void
			{
				if(event is ResultEvent)//if we get a result from the httpService
				{
					//parse the result and add the values to the datagrid
					//on a request the test php returns 50 random values
					var result:String = (event as ResultEvent).result as String;
					var values:Array = result.split("\n");
					for each(var value:String in values)
					{
						if(value.length > 0)
						{
							var props:Array = value.split(/(\d+)/);
							list.addItem({text:props[0], number:props[1]});
						}
					}
				}
				else
				{
					//show an alert if error
					Alert.show((event as FaultEvent).message.toString());
				}
				loadRequests--;
				if(loadRequests == 0)
				{
					loadingImage.visible = false;
				}
			}
			/**
			 * call the php service 
			 */
			private function getNewData():void
			{
				if(loadRequests == 0)
				{
					httpService.send();
					loadingImage.visible = true;
					loadRequests++;
				}
			}
			/**
			 * event handler for datagrid scrolling 
			 */
			private function listScrolled(event:ScrollEvent):void
			{
				if(event.direction == ScrollEventDirection.VERTICAL && event.delta > 0)
				{
					//if close to last item make a new call to get new results
					if(liveDataGrid.maxVerticalScrollPosition - event.position < 3)
					{
						getNewData();
					}
				}
			}
		]]>
	mx:Script>
	<mx:VBox paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"
		horizontalAlign="center" 
		width="100%" height="100%">
		<mx:Canvas width="100%">
			<mx:Label text="Live scroll" left="0" verticalCenter="0"/>
			<mx:Image id="loadingImage" source="{loadingAnimation}" right="0" verticalCenter="0" visible="false"/>
		mx:Canvas>
		<mx:DataGrid id="liveDataGrid" height="100%" width="100%"
			scroll="listScrolled(event)"
			dataProvider="{list}"
			>
			<mx:columns>
		        <mx:DataGridColumn dataField="text" headerText="Text"/>
		        <mx:DataGridColumn dataField="number" headerText="Random value"/>
		    mx:columns>
		mx:DataGrid>
		<mx:Label
			visible="{list.length > 0}" 
			text="{'Showing ' + (liveDataGrid.verticalScrollPosition + 1) + ' to ' + (liveDataGrid.verticalScrollPosition + Math.round((liveDataGrid.height - liveDataGrid.headerHeight) / liveDataGrid.rowHeight) - 1)}" width="100%"/>
	mx:VBox>
mx:Application>

C# 하드 디스크 시리얼 번호 얻기

2009-04-22T10:30:30Z

class HardDrive
{
private string model = null;
private string type = null;
private string serialNo = null;
public string Model
{
get {return model;}
set {model = value;}
}
public string Type
{
get {return type;}
set {type = value;}
}
public string SerialNo
{
get {return serialNo;}
set {serialNo = value;}
}
}

ManagementObjectSearcher searcher = new
ManagementObjectSearcher("SELECT * FROM Win32_DiskDrive");

   foreach(ManagementObject wmi_HD in searcher.Get())
   {
    HardDrive hd = new HardDrive();
    hd.Model = wmi_HD["Model"].ToString();
    hd.Type = wmi_HD["InterfaceType"].ToString();
    hdCollection.Add(hd);
   }

   searcher = new
    ManagementObjectSearcher("SELECT * FROM Win32_PhysicalMedia");

   int i = 0;
   foreach(ManagementObject wmi_HD in searcher.Get())
   {
    // get the hard drive from collection
    // using index
    HardDrive hd = (HardDrive)hdCollection[i];

    // get the hardware serial no.
    if (wmi_HD["SerialNumber"] == null)
     hd.SerialNo = "None";
    else
     hd.SerialNo = wmi_HD["SerialNumber"].ToString();

    ++i;
   }

   // Display available hard drives
   foreach(HardDrive hd in hdCollection)
   {
    Console.WriteLine("Model\t\t: " + hd.Model);
    Console.WriteLine("Type\t\t: " + hd.Type);
    Console.WriteLine("Serial No.\t: " + hd.SerialNo);
    Console.WriteLine();
   }

http://www.codeproject.com/KB/cs/hard_disk_serialno.aspx

C# .NET - HDD's serial number 하드 디스크 시리얼 번호 얻기

2009-04-22T02:35:45Z

//Namespace Reference
using System.Management

///

/// method to retrieve the selected HDD's serial number
///

/// Drive letter to retrieve serial number for
/// the HDD's serial number
public string GetHDDSerialNumber(string drive)
{
    //check to see if the user provided a drive letter
    //if not default it to "C"
    if (drive == "" || drive == null)
    {
        drive = "C";
    }
    //create our ManagementObject, passing it the drive letter to the
    //DevideID using WQL
    ManagementObject disk = new ManagementObject("win32_logicaldisk.deviceid=\"" + drive +":\"");
    //bind our management object
    disk.Get();
    //return the serial number
    return disk["VolumeSerialNumber"].ToString();
}

c# MAC ADDRESS 가져오는 방법

2009-04-22T02:26:25Z

참조에 System.Management 추가

// 추가
using System.Management;

// ex1

// 아래 코드로 시스템이 가지는 MAC 주소 모두를 가져온다.

string qry = "select * FROM Win32_NetworkAdapter";
ObjectQuery objectQuery = new ObjectQuery( qry );
ManagementObjectSearcher searcher = new ManagementObjectSearcher( objectQuery );
string macAdd = "";
foreach ( ManagementObject nicObj in searcher.Get() )
{

macAdd = nicObj["MACAddress"].ToString();

MessageBox.Show(macAdd);

}

// ex2

ManagementObjectSearcher query = new ManagementObjectSearcher
                (”SELECT * FROM Win32_NetworkAdapterConfiguration WHERE IPEnabled=’TRUE’”);
            ManagementObjectCollection queryCol = query.Get();
            foreach (ManagementObject mo in queryCol)
            {
                string[] address = (string[])mo["IPAddress"];
                string[] subnets = (string[])mo["IPSubnet"];

netsh ipsec dynamic add rule 윈도우 서버 네트워크 정책 설정

2009-04-16T15:06:59Z

netsh ipsec dynamic add rule

tag : ipsec

ExtJS Javascript Framework 소개

2009-04-15T17:13:21Z

http://www.extjs.com/

매뉴얼이 잘 되어있고 기능 및 구조화가 매우 잘되어 있는 프레임워크 중 하나이다.

하지만 정말 일반화가 잘되어 있기 때문에 속도를 다투는 문제를 다룰 때에는 조금 답답함을 느낄수가 있다.

그런 속도문제만 아니라면 정말 깊이 파볼만한 프레임워크이다.

http://www.extjs.com/deploy/dev/examples/desktop/desktop.html

[출처] ExtJS Javascript Framework 소개 (Web Programmer 2.0) |작성자 치토스

tag : ExtJS

degrafa

2009-04-14T19:43:50Z

http://code.google.com/p/degrafa/

Flex Fantastic Friday - Pop Up Menus and More

2009-04-10T13:04:39Z

Posted in:

Tutorials

Actionscript

Flex 2.0

Flex

MXML

I started playing around with a few different things in Flex and decided the features would make a good tutorial - or at least an interesting one. The main item on the agenda today is to talk about PopUpManager and creating pop ups. In Flex you can basically create a pop up out of any Flex component that is created, so in this tutorial I am going to show how to create a pop up menu in Flex that will allow us to edit text attributes of selected text inside of a text area.

Some other items that will be making an appearance in this tutorial include TextRange, css, embedding images, and more. Some or all of these features have been touched upon in earlier tutorials but don't worry, I won't skip over explaining them here. For example, we are going to use TextRange to handle changing the selected text in our TextArea, which I wrote a tutorial on earlier, check it out here.

The first item of business is checking out the example application of the day. This application shows off only the tip of the iceberg when it comes to pop ups. It has a text box which can be typed in and is also pre-populated with some text. If you simply highlight some text the pop up menu should jump up at you (note - selecting text using "Shift" key doesn't work). On the menu you have the option to change the selected text to bold, italic, change the color, increase font size, and decrease font size. Also the X in the right hand corner will close the menu. One added perk is the far left side of the menu, it has a couple little circles, can be used to move the menu; you can simply click in that side area and drag around the menu. Well that is enough talk - so it check it out:

Now that you have played for a minute - on to the code. As usual we will start by setting up the initial application interface. Again it is initialized to a very simple interface to start off with. The basic application with a panel and a TextArea - the text area you see in the example has some more text in it but that is all that is different. The only other item that might catch your eye is the