블로그 이미지

카테고리

데꾸벅 (194)
Publisher (39)
Scripter (97)
Programmer (1)
Designer (30)
Integrator (18)
Pattern Searcher (4)
News (2)
강좌 및 번역 (3)

최근에 올라온 글

최근에 달린 댓글

'IE8'에 해당되는 글 6건

  1. 2008.08.07 Ext2.2 Release 11
  2. 2008.06.13 IE8을 미리 대비하기
  3. 2008.03.27 IE8에서의 자바스크립트
  4. 2008.03.07 IE8 출시에 따른 브라우저 성능테스트 2
  5. 2008.03.06 IE8 출시
  6. 2008.03.06 IE minimize 2

Ext2.2 Release

Scripter/EXTJS / 2008. 8. 7. 10:30

일전에 포스팅한 extjs 로드맵에서 언급했듯이 extjs 2.2 가 릴리즈 됐다.

그리고 데꾸벅의 한글화 부분(ext-2.2/build/locale/ext-lang-ko.js)도 추가적으로 패키징되어 들어가 있다. 캬햐햐
/**
 * Korean Translations By nicetip
 * 05 September 2007
 * Modify by techbug / 25 February 2008
 */
트리로더 확장과 불여우2에서 스크롤문제(overflow)와 IE6 버그(relative)일때 스크롤문제부분(스쿨학우여러분 땡큐 많이 참조했어요.. ^^)도 부분적으로 채택이 됐네요.. 크크..
FF3 Beta1에서 에러나던 버튼위치부분은... 쿨럭.. ㅡ.,ㅡ;

2.2 (2008 여름) : 릴리즈노트

  • Ext.Ajax 기능향상
  • Ext컴포넌트만의 초점을 맞춘(scoped) REST style지원
  • XML을 포함한 추가적인 TreeLoader 데이타로딩
  • 슬라이더 컴포넌트
  • 파일업로드 필드

릴리즈노트에 나타난 새롭게 추가된 기능들은 다음과 같다.

[ CheckboxGroup / RadioGroup ]

... },{
    xtype: 'checkboxgroup',
    fieldLabel: 'Multi-Column (horizontal)',
    columns: 3,
    items: [
        {boxLabel: 'Item 1', name: 'cb-horiz-1'},
        {boxLabel: 'Item 2', name: 'cb-horiz-2', checked: true},
        {boxLabel: 'Item 3', name: 'cb-horiz-3'},
        {boxLabel: 'Item 4', name: 'cb-horiz-4'},
        {boxLabel: 'Item 5', name: 'cb-horiz-5'}
    ]
},{ ...

각 개별적인 item으로만 적용했던 라디어버튼과 체크박스를 그룹핑하여 만든 컴포넌트가 추가되었다. [샘플보기]
사용자 삽입 이미지



[히스토리컴포넌트 추가] [샘플보기]
listeners: {
    'tabchange': function(tabPanel, tab){
        // Ignore tab1 since it is a separate tab panel and we're managing history for it also.
        // We'll use its handler instead in that case so we don't get duplicate nav events for sub tabs.
        if(tab.id != 'tab1'){
            Ext.History.add(tabPanel.id + tokenDelimiter + tab.id);
        }
    }
}

사용자 삽입 이미지

위의 탭기능중 sub-tab3 를 선택한위 상단 탭을 클릭햇을 경우 다시 돌아왔을때 sub-tab3이 선택되어 있게 만들어준다. 이전 버전에서는 별도의 글로벌변수로 선언해준뒤 사용했었는데 이번 릴리즈에는 포함되어 나와서 상당히 편할듯하다..
히스토리 컴포넌트 사용시에는 URL 핸들링이 하는지 URL자체가 변하는 효과를 볼수 있다.
사용자 삽입 이미지


[MultiSelect / ItemSelector] [데모보기]
이 기능은 사용자 확장기능에 올라왔던 기능인데 이번 릴리즈에 포함되었있다.
전통적인 방식의 <select multiple> 기능을 extjs로 구현한 것이다.
사용자 삽입 이미지


[FileUploadField][데모보기]
사용자 확장기능에서 가장 많이 찾던 swfFileUpload에서 차용한듯한 소스가 이번 릴리즈에 포함되어 있다. ajax fileupload를 찾는 국내 사용자에게는 상당히 유용한 컴포넌트가 될듯하다. Form 컴포넌트에 포함되어 있다.
var fibasic = new Ext.form.FileUploadField({
    renderTo: 'fi-basic',
    width: 400
});


[XmlTreeLoader] [데모보기]
사용자 확장기능이다. 이전 treeLoader와 사용법은 비슷하다.


[GMapPanel][데모보기]
사용자 삽입 이미지
구글맵을 보여줄수 있는 panel이 추가되었다.
이것또한 사용자 확장기능이였으나 이번 릴리즈에 포함되었다.








사실 새롭게 추가된 기능들만 보자면 로드맵에 나왔던 내용들은 거의 없다.
향상된 기능들이라면 Firefox3 및 IE8 버전을 지원하다는 내용과 드래그앤드랍 기능(특정DnD영역그리드패널 Row의 드래그엔 드랍, 폼내널에서의 드래그엔드랍), 그리도 속도 향상, status기능등이 많이 향상되었다.

또한 축약어 들이 많이 등장했는데 Ext.MessageBox()를 msg()와 같이 표현한다던가, 브라우저 버전에 대한 글로벌 변수 Ext.isGecko2, Ext.isGecko3 등이 더 추가되었다.

그외 아래 링크로 확인하시기 바랍니다.






오픈소스 라이센스에 대한 이해~!! 는 다음 파일을 참조하세요








'Scripter > EXTJS' 카테고리의 다른 글

extjs 2.2의 IE에서 iframe document load 버그패치  (0) 2009.01.21
Extjs 3.0 Roadmap  (10) 2008.11.12
ExtJS 2.1 릴리즈  (4) 2008.04.22
RESTFul 한 ExtJS  (0) 2008.04.16
Extjs Qtips 사용하기  (2) 2008.04.16
Post by 넥스트리소프트 데꾸벅(techbug)
, |

IE7 나온지가 얼마나 됐다고 IE8 사용성 테스트를 해야 한다니..복장이 터질지경이다.

현재 프로젝트에서 사용자중 가장많이 차지하는 부분이 IE6인데..기본 개발 브라우저는
IE6,IE8,IE9, FF2,FF3, Opera9에서 까지 잘 보여야 한다니.....

일전에 포스팅한 IE8출시에 따른 호환성테스트 글에서 언급했지만
IE8에서 IE7과 같이 쓰려면 다음과 같은 Meta태그를 넣어주면된다.

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

출처 : MS IE Compatibility Site


아래 내용은 MS의 고객지원센터에서 발췌한 글이다.

'Designer > UX' 카테고리의 다른 글

UX 디자인 기획은 원맨쇼가 아니다  (6) 2009.03.04
2009년 유행할 웹디자인 트렌드  (14) 2009.01.19
PhotoshopExpress : 포토샵이 웹으로?  (2) 2008.03.28
칼라에 대한 고찰  (0) 2008.02.21
IE6 PNG background없애기  (0) 2008.02.21
Post by 넥스트리소프트 데꾸벅(techbug)
, |

원본출처 : John Resig's Blog


사용자 삽입 이미지

IE8이 출시된지 2주일이 지난 지금 이전 브라우저에서 정상적으로 동작되던 스크립트들이 IE8에서는 안되는 경우가 있다. 예를 들면 XMLHttpRequest를 통한 전송부분이나 <object>.getElementsByTagName("*")부분일 것이다.







브라우저 특징에 대한 John Resig(이 사람 누군지 알죠?? jQuery)의 생각들을 집어본다.

W3C: querySelector

CSS 선택자(id,class선택자들..)를 쉽게 찾을수 있게 해주는 querySelector가 표준이다. IE8의 경우 CSS2.1을 지원하며 CSS3는 아직 지원하지 않는다.. 아직 표준확정이 되지 않은 CSS3를 지원한다는건...


HTML 5 부분!

HTML5 호환은 환상적인 스펙의 향상이다.

HTML 5: window.location.hash

이미 대부분의 브라우저에서는 지원하고 있지만 ajax에서 뒤로가기 버튼문제에 대해 해결하기 위해 window.loaction.hash를 지원한다. 또한 hashchanged란 이벤트도 지원한다.
window.location.hash는 페이지 URL에 대해 변경된 내용을 저장하는것이다.

HTML 5: postMessage

postMessage는 서로다른 프레임간 통신하는 방법인데 IE8, Opera9, Firefox3,Webkit등에서 앞으로 지원할 예정이라 한다. IE8같은 경우 postMessage를 쓰면 화면자체의 Section부분만 바로 통신하여 가져올수 있으니... 점점 간단해 지겠군효~~


HTML 5: Offline Events

IE8과 Firefox3만 지원하는 기능으로써 자바스크립트를 통해 커넥션을 감지할수 있는 쉬운방법이다.

XDomainRequest

아주 재미있는 기능으로 이기능에 대해선 MS에서 작성한 문서를 참조하기 바란다. 데꾸벅도 설명하기 힘들다.. ㅠ.,ㅠ;

이후 글은 원문에서 찾아보시길...
Post by 넥스트리소프트 데꾸벅(techbug)
, |

어제 (2008.03.06) MIX8에서 IE8이 공개된 후에 전세계 많은 개발자포럼에 관련된 많은 글들이 포스팅 됐다.
이구동성으로 IE8의 표준호환성을 얘기하고 있지만 국내웹환경상 많은 변화가 몰아칠것이라고 한다. 사실 익칠이(IE7)이 나올때에도 이러한 얘기가 많았지만 국내에서는 IE7에 대해서도 상당히 회의적이다.
데꾸벅도 IE7을 쓰고는 있지만 금융관련 사이트들, 특히 은행이나 증권사의 ActiveX가 제대로 작동하지 않았을때는 대략 난감이다... 근데 벌써 IE8이라니...

하위버전과 호환하기 위한 메타태그의 위력
IE8이 표준을 어느정도 지키는지는 실제 테스트해봐야 알겠지만 기존의 하위버전을 쓰고 있는 사용자를 위해서는 하위 브라우저와 호환하기 위한 IE Hack이 또 필요하다는 얘기다...
뒷북치고 있는 MS의 정책때문에 피보는것은 개발자가 아닌가 싶다..
사설은 집어치우고... 하위버전과 호환하기 위해서는 다음과 같이 적어주는게.. 맘편하게 작업하겠다.

<meta http-equiv="X-UA-Compatible" content="IE=7">
<!--[if IE 8]>
<link type="text/css" rel="stylesheet" href="styleie7.css" />
<![endif]-->




위와 같이 IE7에서 제대로 보이던 화면이 IE8에서 안보일수 있으므로 IE7과 같이 렌더링한다고 메타태그로 친절하게 적어줘야 한다...

제목과 달리 사설이 들어갔는데 기본적으로 IE8과 다른브라우저의 성능테스트 결과를 공개한다.

Javascript Performance 에 사용된 시나리오
  • TDL 컴파일/파싱
  • 자바스크립트 XPath2.0 엔진
  • XEL 실행 및 / 이벤트 propagation
사용자 삽입 이미지

Render Performance (DOM)에 사용된 시나리오
  • 1개 accordion 렌더링
  • 5개 accordion 렌더링
  • 리스트 그리드 렌더링 등
사용자 삽입 이미지

결론은 " IE8은 여전히 느리고 이번에 출시된 Safari 3는 움청 빠르다 "이다.. ㅡ.,ㅡ;




'News' 카테고리의 다른 글

IE8 출시  (0) 2008.03.06
Post by 넥스트리소프트 데꾸벅(techbug)
, |

IE8 출시

News / 2008. 3. 6. 10:05



Microsoft's next-generation web browser, Internet Explorer 8, has arrived. In a surprising move, after the demo of IE8 and its new features at today's session of the MIX08 conference, the startling announcement was made: "It's available for download now". The new browser showcases many new features and improvements, like Facebook and eBay integration, standards compliance, and the ability to work with AJAX web pages. What's most notable about IE8, though, is more than a sum of its parts. If anything, this launch shows that Microsoft is not taking Firefox's creep into browser market share lightly.

IE8 New Features Shown At MIX08

I'm sure there are more features to be discovered, but the ones that were highlighted just now in the demo at MIX08 included the following:

Standards Compliance: There were hints that IE8 would be a remarkable offering on the IE Blog as they released tidbits about the browser's capabilities. For example, the announcement of IE8's passing of the Acid2 test (a test for standards compliance) marked a milestone in IE8's development. The standards mode was originally going to be turned off by default letting web developers code for it by including a "meta" tag to make use of IE8's new standards compliant mode. Later, Microsoft came to their senses and made the default the standards-compliant mode. Meanwhile, Firefox also claims to have passed the Acid 2 test, but an open bug on bugzilla.mozilla.org seems to say otherwise. (our coverage). One commenter on the thread notes, "So, we essentially do pass the test. However, in some situations, it might still fail, that's why this bug is open."

Facebook Integration: Yes, seriously! With a Flock-like feature as an unexpected surprise, Microsoft capitalized on their partnership with the popular social networking site, Facebook, to allow IE8 users the ability to get status updates from Facebook right from their browser toolbar.

eBay Integration: Like Facebook, this feature also uses IE8's new technology, called "WebSlices", which introduces a new way to get updates from other sites via the browser itself, without having to visit the web site. With WebSlices, IE8 beta users can subscribe to portions of a page that
update dynamically, in order to receive updates from that page as content
changes. EBay will offer webslices, too, letting you track your auctions from the browser toolbar. Basically, WebSlices look like Favorites on your Links toolbar but they have a little arrow next to them - clicking on this arrow will show you a small window of live web content.

Live Maps Integration: Another WebSlice was integration with Live Maps. It appeared that you could even highlight text on a page, like an address, and then right-click and choose Live Maps from the context menu to get a WebSlice preview of that location on a map in a small pop-up window. How convenient!

Integration with Me.dium: Me.dium integration will be supported in IE8 via WebSlices. Me.dium will now help web surfers discover and view WebSlices directly from the sidebar. The Me.dium sidebar will alert users to the presence of WebSlices on any page – and even allows users to read each WebSlice, without leaving the Sidebar. In addition, Me.dium will make real-time recommendations for other WebSlices on other relevant web pages and provides direct links to them based on the real time activity of other Me.dium users.


Me.dium Activities in Action

Working with AJAX Pages: IE8 will offer better functionality when it comes to AJAX web pages. The example showed a page where you could zoom in using AJAX technology. Previously, hit the IE "Back" button would take you back to the last page you were on. Now, "Back" will zoom you out.

We can now find out what other features IE8 has to offer, since the beta is now publicly available for download. To get IE8, you can download it from here: http://www.microsoft.com/windows/products/winfamily/ie/ie8/readiness/Install.htm.




IE 8 Readiness

MIX has started, and we have the news we have been waiting for, for some time. What is IE 8 going to do?

Microsoft has put out an IE 8 Readiness Report that discusses everything.

There is a TON of amazing stuff here. It also looks like they will be using the standards for most of this stuff, but we need to see more. E.g. is cross domain messaging using postMessage?

But, having 6 connections per host and the like is huge:

Ajax Improvements

A white paper is here:

  1. AJAX Navigation enables users to navigate back
    and forth without leaving the AJAX application and could be used
    navigating a page without performing a traditional full navigation.
    This allows websites to trigger an update to browser components like
    the address bar by setting the window.location.hash value, firing an
    event to alert components in the page and even creating an entry in
    the travel log.
  2. DOM Storage is a simple-to-use method for
    storing and retrieving strings of key/value pair data. Data can be
    stored per tab instance for a session or persisted to the local
    machine. This allows pages to cache text on the machine which
    reduces the effect of network latencies by providing faster access
    to pre-cached data. Several innovative uses are possible. For
    example, use this in combination with the new network connectivity
    event to allow a page to cache data if it detects that the computer
    is offline.
  3. Connectivity events allow websites to check
    when the user is connected to the network and receive notification
    of connectivity changes.
  4. Six connections per host instead of two for
    broadband scenarios and a scriptable property allow for more
    improved performance by allowing parallelization of downloads in
    Internet Explorer 8. In addition, this increases functionality by
    ensuring a request is not blocked to a host if two connections
    already exist. Websites can optimize their downloads based on a
    scriptable property.
  5. XMLHTTPRequest Enhancements include a timeout
    property that can be set to cancel the request if necessary,
    allowing developers to manage the request better.

Cross domain is here:

  • With Cross-domain Request (XDR), developers can
    create cross-site data aggregation scenarios. Similar to the
    XMLHttpRequest object but with a simpler programming model, this
    request, called XDomainRequest, is the easiest way to make anonymous
    requests to third-party sites that support XDR and opt in to making
    their data available across domains. Three lines of code will have
    you making basic cross-site requests. This will ensure data
    aggregation for public sites (such as blogs) will be simple, secure
    and fast.
  • Cross-document Messaging (XDM) APIs allow
    communication between documents from different domains through
    IFrames in a way that is easy, secure and standardized.

HTML and CSS

New Features

  • Activities are contextual menu options which quickly access a service from any Web page. Users typically copy and paste from one Web page to another. Internet Explorer 8 Activities make this common pattern easier to do.
  • WebSlices is a new feature for websites to connect to their users by subscribing to content directly within a webpage. WebSlices behave just like feeds where clients can subscribe to get updates and notify the user of changes.

And we also have other features such as less memory leaks!

What do you think?



Me.dium, the social browsing folks, have put together some examples using the new Activities and Web Slices features.

You can install their Activity if you have IE 8, or you can take a look below:

As part of Activities,
Me.dium now offers a powerful “Social Discovery” Activity from any page. Me.dium’s “Discover” Activity gives you recommendations, related to a page or selected key words, which are influenced by the real time surfing activity of all Me.dium users. Me.dium also displays a “real-time map” of user activity on the pages related to the selected text, page, or link so users can see how popular those pages are with Me.dium users in real time.

Me.dum activity

This is their XML file.

XML:
<openservicedescription xmlns="http://www.microsoft.com/schemas/openservicedescription/1.0">
  <homepageurl>https://me.dium.com</homepageurl>
  <display>
    <name>Discover with Me.dium</name>
    <icon>https://me.dium.com/images/favicon.ico</icon>
  </display>
  <activity category="Discover">
    <activityaction context="document">
      <preview action="https://me.dium.com/explorePreview">
        <parameter name="url" value="{documentUrl}"/>
      </preview>
      <execute action="https://me.dium.com/explore">
        <parameter name="url" value="{documentUrl}"/>
      </execute>
    </activityaction>
    <activityaction context="selection">

      <preview action="https://me.dium.com/explorePreview">
        <parameter name="url" value="{documentUrl}"/>
        <parameter name="q" value="{selection}"/>
      </preview>
      <execute action="https://me.dium.com/explore">
        <parameter name="url" value="{documentUrl}"/>
        <parameter name="q" value="{selection}"/>
      </execute>
    </activityaction>

    <activityaction context="link">
      <preview action="https://me.dium.com/explorePreview">
        <parameter name="url" value="{documentUrl}"/>
        <parameter name="link" value="{link}"/>
      </preview>
      <execute action="https://me.dium.com/explore">
        <parameter name="url" value="{documentUrl}"/>
        <parameter name="link" value="{link}"/>
      </execute>

    </activityaction>
  </activity>
</openservicedescription>
 

Are you excited about activities or any other IE 8 new features? Or are you the kind of guy that is just happen that the darn 2 connection limit is 6?





출처 : http://www.readwriteweb.com/archives/internet_explorer_8_has_arrived.php

http://ajaxian.com/archives/medium-shows-off-new-ie-8-features

http://ajaxian.com/archives/ie-8-better-ajax-css-dom-and-new-features


'News' 카테고리의 다른 글

IE8 출시에 따른 브라우저 성능테스트  (2) 2008.03.07
Post by 넥스트리소프트 데꾸벅(techbug)
, |

IE minimize

Scripter/JAVASCRIPT / 2008. 3. 6. 09:50
자바스크립트만으로 브라우저 최소화 최대화를 구현해보고 싶어 소스를 찾다 괜찮은 것들만 추려본다.
(IE6이전 버전 기준)


<script type="text/javascript">
function minimize() {
    document.getElementById("minimizer").Click();
}
</script>

<span onclick="minimize()" style="cursor:pointer;">최소화</span>

<object id="minimizer" type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<param name="Command" value="Minimize">
</object>


<SCRIPT LANGUAGE="JavaScript">

function Minimize()
{
window.innerWidth = 100;
window.innerHeight = 100;
window.screenX = screen.width;
window.screenY = screen.height;
alwaysLowered = true;
}

function Maximize()
{
window.innerWidth = screen.width;
window.innerHeight = screen.height;
window.screenX = 0;
window.screenY = 0;
alwaysLowered = false;
}
</SCRIPT>

<A HREF="javascript:onClick=Minimize()">Minimize</A>
<A HREF="javascript:onClick=Maximize()">Maximize</A>
출처 : htmlgoodies



최소화가 아니라 다른창 뒤에 숨기기위해 간단한 소스
function Minimize(){
 window.blur()
}
출처 : rahmanhadi








Post by 넥스트리소프트 데꾸벅(techbug)
, |