IT 기술 따라잡기

Ext.setup({
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'icon.png',
    glossOnIcon: false,
    statusBarStyle: 'default',
 
onReady: function(){
new Ext.Panel(
{
    fullscreen: true,
    html: 'Hello Sencha Touch'
}
);
}
});

new Ext.Application({
launch: function() {
new Ext.Panel(
{
fullscreen: true,
html: ‘Hello Sencha Touch’
}
);
}
});

Ext.setup({
onReady: function(){
new Ext.Panel({          Panel 객체 생성, <dev>요소로 DOM에 추가 됨
fullscreen: true,        전체 화면
style: "...",          CSS 지정
layout: { ... },         레이아웃 정보
items: [ { ... }, { ... }, ... ],         UI 아이템들 지정
dockedItems: [ { ... }, { ... }, ... ]         도킹 아이템 지정. Panel의 상하좌우에 밀착된 아이템
});
}
});

dockedItems: [
{
dock: "top",
style: "background-color:red;",
html: "DockItem-Top"
},
{
dock: "left",
style: "background-color:gray;",
html: "DockItem-Left"
},
{
dock: "bottom",
style: "background-color:yellow;",
html: "DockItem-Bottom"
},
{
dock: "right",
style: "background-color:green;",
html: "DockItem-Right"
}
}

layout: {
type: 'vbox',
align: 'stretch',
pack: 'center'
},

items:[
new Ext.Button({ text: ‘button1’ })
]

Ext.setup({
onReady: function(){
var item1 = {
title: 'Tab1',
style: "background-color: red;",
html: 'Item1'
};
var item2 = {
title: 'Tab2',
style: "background-color: gray;",
html: 'Item2'
};
var item3 = {
title: 'Tab3',
style: "background-color: yellow;",
html: 'Item3'
};
var panel = new Ext.TabPanel({
fullscreen: true,
ui: 'dark',
tabBarDock: 'top',
cardSwitchAnimation: 'slide',
items: [item1,item2,item3]
});
}
});

Ext.setup({
onReady: function(){
var item1 = {
style: "background-color:red;",
html: 'Item1'
};
var item2 = {
style: "background-color:gray;",
html: 'Item2'
};
var item3 = {
style: "background-color:yellow;",
html: 'Item3'
};
var panel = new Ext.Carousel({
fullscreen: true,
ui: 'dark',
indicator: true,
direction: 'horizontal',
items: [item1,item2,item3]
});
}
});

Ext.setup({
onReady: function(){
var item1 = {
style: "background-color:red;",
html: 'Item1'
};
var item2 = {
style: "background-color:gray;",
html: 'Item2'
};
var item3 = {
style: "background-color:yellow;",
html: 'Item3'
};
var topCarousel = new Ext.Carousel({
items: [item1,item2,item3]
});
var middleCarousel = new Ext.Carousel({
items: [item1,item2,item3]
});
var bottomCarousel = new Ext.Carousel({
items: [item1,item2,item3]
});
var panel = new Ext.Panel({
fullscreen: true,
layout:{
type: 'vbox',
align: 'stretch'
},
defaults: {flex: 1},
items: [topCarousel, middleCarousel, bottomCarousel]
});
}
});

Ext.setup({
onReady: function(){
var panel = new Ext.Panel({
fullscreen: true,
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
title: 'My Toolbar',
defaults: {
xtype: 'button'
},
items: [
{ ui: 'decline-round', text:'decline-round' }
]
}]
});
}
});

Ext.setup({
onReady: function(){
new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'start'
},
defaults: {
layout: { type: 'hbox' },
flex:1,
defaults: {
xtype: 'button'
}
},
items:[
{items: [
{ ui: 'normal', text:'Normal',
handler: function() {
Ext.Msg.alert('Message', 'Hi~~', Ext.emptyFn);
}
},
{ui: 'round', text:'Round'},
{ui: 'small', text:'Small'}
]},
{items: [
{ui: 'decline', text:'Drastic'},
{ui: 'decline-round', text:'Round'},
{ui: 'decline-small', text:'Small'}
]},
{items: [
{ui: 'confirm', text:'Confirm'},
{ui: 'confirm-round', text:'Round'},
{ui: 'confirm-small', text:'Small'}
]},
{items: [
{ui: 'action', text:'Action'},
{ui: 'action-round', text:'Round'},
{ui: 'action-small', text:'Small'}
]},
{items: [
{ui: 'back', text:'back'},
{ui: 'Forward', text:'Forward'}
]}
]
});
}
});

Ext.setup({
onReady: function(){
var segmentedButton = [{
xtype: 'segmentedbutton',
allowMultiple: false,
allowDepress: false,
items: [
{ text: 'Toggle 1' },
{ text: 'Toggle 2', pressed : true },
{ text: 'Toggle 3' }
],
listeners : {
toggle : function(container, button, active){
Ext.Msg.alert('Tap', button.text + " : " + (active ? 'on' : 'off'), Ext.emptyFn);
}
}
}];
new Ext.Panel({
fullscreen: true,
dockedItems:{
xtype: 'toolbar',
ui: 'light',
items: [segmentedButton]
}
});
}
});

Ext.setup({
onReady: function(){
var item1 = { title: 'info', iconCls: 'info', badgeText:'2',};
var item2 = { title: 'favorites', iconCls: 'favorites' };
var item3 = { title: 'settings', iconCls: 'settings' };
var item4 = { title: 'bookmarks', iconCls: 'bookmarks' };
var item5 = { title: 'download', iconCls: 'download' };
var item6 = { title: 'more', iconCls: 'more' };
var item7 = { title: 'search', iconCls: 'search' };
var item8 = { title: 'team', iconCls: 'team' };
var item9 = { title: 'time', iconCls: 'time' };
var item10 = { title: 'user', iconCls: 'user' };
var item11 = { title: 'action', iconCls: 'action' };
var item12 = { title: 'add', iconCls: 'add' };
var item13 = { title: 'arrow_up', iconCls: 'arrow_up' };
var item14 = { title: 'arrow_right', iconCls: 'arrow_right' };
var item15 = { title: 'arrow_down', iconCls: 'arrow_down' };
var item16 = { title: 'arrow_left', iconCls: 'arrow_left' };
var item17 = { title: 'compose', iconCls: 'compose' };
var item18 = { title: 'delete', iconCls: 'delete' };
var item19 = { title: 'refresh', iconCls: 'refresh' };
var item20 = { title: 'reply', iconCls: 'reply' };
var item21 = { title: 'star', iconCls: 'star' };
var item22 = { title: 'trash', iconCls: 'trash' };
var panel = new Ext.TabPanel({
fullscreen: true,
ui: 'light',
cardSwitchAnimation: 'slide',
tabBar: {
dock: 'bottom',
scroll: 'horizontal'
},
items:
[
item1,item2,item3,item4,item5,item6,item7,item8,item9,item10,
item11,item12,item13,item14,item15,item16,item17,item18,item19,item20,
item21,item22
]
});
}
});

var myTpl = new Ext.Template([
'<div>',
'<span> <b>{name}</b> is {value} </span>',
'</div>'
]);
Ext.setup({
onReady: function(){
var panel = new Ext.Panel({
fullscreen:true,
tpl: myTpl
});
panel.update(
{
name: "Sencha Touch",
value: "The First HTML5 Mobile Web App Framework"
}
);
}
});

Ext.util.JSONP.callback(
{
"name": "Sencha Touch",
"value": "The First HTML5 Mobile Web App Framework"
}
)

var store = new Ext.data.Store({
data: [
{firstName: 'Julio', lastName: 'Benesh'},
{firstName: 'Julio', lastName: 'Minich'},
{firstName: 'Tania', lastName: 'Ricco'},
………
]

var store = new Ext.data.Store({
proxy: {
type: 'ajax',
url : 'server.html',
reader: {
type: 'json',
root: 'users'
}
}
});

new Ext.Button({
text: 'MyButton',
handler: function(btn, event){
Ext.Msg.alert('Title', btn.text, Ext.emptyFn);
}
})
 

new Ext.List({
itemTpl : '{firstName} {lastName}',
store: store,
onItemDisclosure: function(record, btn, index) {
Ext.Msg.alert('Message', record.get('firstName'), Ext.emptyFn);
}
}

new Ext.Button({
text: 'MyButton',
listeners: {
tap: function(btn, event){ console.log(event.type); },
click: {
element: 'el',
fn: function(event){ console.log(event.type); }
}
}
})

btn.on({
'tap' : {
fn: function(event){ console.log('tap')},
delay: 2000
},
'click' : {
element: 'el',
fn: function(event){ console.log('click')},
}
});

Ext.setup({
onReady: function() {
var pnl = new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
pack: 'center'
},
items: [{
xtype: 'video',
url: 'space.mp4',
loop: true,
width: 500,
height: 400,
posterUrl: 'Screenshot.png'
}]
})
}
});

Ext.setup({
onReady: function() {
var pnl = new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
pack: 'center'
},
items: [{
xtype: 'audio',
url: 'crash.mp3',
loop: true
}]
})
}
});

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <TextView 
        android:id="@+id/selectedopt"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Please select a product"
       android:textSize="@dimen/text_size"
       android:textStyle="bold"  />
 </LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="6dp"
      android:textSize="@dimen/text_size"
      android:textStyle="bold" />
     

public class Fragment2Activity extends Fragment {
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment2, container, false);
    }

    public void dispOption(String msg){
        TextView selectedOpt = (TextView) getActivity().findViewById(R.id.selectedopt);
        selectedOpt.setText("You have selected "+msg);  
    }
}

 

public class Fragment1Activity extends ListFragment {
    String[] products={"Camera", "Laptop", "Watch",  "Smartphone", "Television"};

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ArrayAdapter<String> arrayAdpt = new ArrayAdapter  <String>(getActivity(),R.layout.list_item, products);
        setListAdapter(arrayAdpt);
    }

    @Override
    public void onListItemClick(ListView l, View v, int  position, long id) {
        Fragment2Activity frag = (Fragment2Activity) getFragmentManager().findFragmentById(R.id.fragment2);
        frag.dispOption(((TextView) v).getText().toString());                         
    }
}

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >
    <fragment
        android:name="com.androidtablet.listfragmentapp.Fragment1Activity"
        android:id="@+id/fragment1"
        android:layout_weight="1"
        android:layout_width="wrap_content"
        android:layout_height="match_parent" />
    <fragment
        android:name="com.androidtablet.listfragmentapp.Fragment2Activity"
        android:id="@+id/fragment2"
        android:layout_weight="0"
        android:layout_width="wrap_content"
        android:layout_height="match_parent" />
</LinearLayout>

public class ListFragmentAppActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_list_fragment_app);
    }
}

#1 Fragment2Activity fragment2 = new Fragment2Activity();
#2 Bundle args = new Bundle();
#3 String message = "Message from Fragment1";
#4    if(null==fragmentManager.findFragmentByTag(TAG2)){
#5        Fragment2Activity fragment2 = new Fragment2Activity();
#6      args.putString("msg", message);
#7      fragment2.setArguments(args);
#8      fragmentTransaction.replace(R.id.frag2_container,fragment2);
#9        String tag = null;
#10        fragmentTransaction.addToBackStack(tag);
#11        fragmentTransaction.commit();
#12 }

String messageReceived = "";
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    ViewGroup container, Bundle savedInstanceState) {
        Bundle bundle = getArguments();
        if(bundle != null) {
            messageReceived = bundle.getString("msg");
        }
    }
}

public class FragmentsByCodeAppActivity extends Activity implements OnOptionSelectedListener {
    private static final String TAG1 = "1";
    private static final String TAG2 = "2";
   
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_fragments_by_code_app);
        FragmentManager fragmentManager = getFragmentManager();
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
        if(null==fragmentManager.findFragmentByTag(TAG1)){
            Fragment1Activity fragment1 = new Fragment1Activity();
            fragmentTransaction.add(R.id.frag1_container, fragment1, TAG1); 
        }
        Bundle args = new Bundle();
        String message="Message from Fragment 1";  
        if(null==fragmentManager.findFragmentByTag(TAG2)){
            Fragment2Activity fragment2 = new Fragment2Activity();
            args.putString("msg", message);
            fragment2.setArguments(args);
            fragmentTransaction.add(R.id.frag2_container, fragment2, TAG2); 
        }
        fragmentTransaction.commit();
        }

    public void onOptionSelected(String msg){
        Fragment2Activity frag2 = (Fragment2Activity) getFragmentManager().findFragmentById(R.id.frag2_container);
        frag2.dispOption(msg);             
    }
}

public class Fragment2Activity extends Fragment {
    TextView selectedOpt;
    String messageReceived="";

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View vw= inflater.inflate(R.layout.fragment2,  container, false);
           Bundle bundle=getArguments(); 
           if(bundle !=null) {
               messageReceived = bundle.getString("msg");
               selectedOpt = (TextView) vw.findViewById(R.id.selectedopt);
               selectedOpt.setText(messageReceived);
           }
           return vw;     
    }

    public void dispOption(String msg){
        TextView selectedOpt = (TextView) getActivity().findViewById(R.id.selectedopt);
        selectedOpt.setText("You have selected "+msg);  
    }
}