public static void Execute(Atom parent)
{
var nb =new NavList ();
nb.Add ("Tables");
nb.Add ("Forms");
nb.Add ("Modals");
nb.Add ("Panels");
nb.AddDivider ();
nb.Add ("Exit");
var log = new Div ();
var code = new Div ();
new Div (d=>{
d.ClassName="bs-docs-example";
d.JQuery.Append(nb).Append(log).Append("C# code".Header(4)).Append(code);
parent.Append(d);
});
nb.Selected += (e) => {
var i = e.CurrentTarget.As<NavItem> ();
log.Text= "{0} Clicked".Fmt(i.Text);
};
var rq =jQuery.GetData<string> ("code/demonavlist.html");
rq.Done (s=> code.Text=s);
}
public static void Execute(Atom parent)
{
var nb =new NavBar ();
nb.BrandText="App Title";
nb.Add ("Home");
nb.Add ("License");
nb.Add ("Contact");
var dd = new DropdownMenu ();
dd.Text = "Config";
dd.Nav.Add ("Users");
dd.Nav.Add ("Groups");
nb.Add (dd);
var log = new Div ();
var code = new Div ();
new Div (d=>{
d.ClassName="bs-docs-example";
d.JQuery.Append(nb).Append(log).Append("C# code".Header(4)).Append(code);
parent.Append(d);
});
nb.Selected += (e) => {
var i = e.CurrentTarget.As<NavItem> ();
log.Text= "{0} Clicked".Fmt(i.Text);
};
var rq =jQuery.GetData<string> ("code/demonavbar.html");
rq.Done (s=> code.Text=s);
}
public static void Execute (Atom parent){
var nb =new NavList ();
nb.Add ("Simple Bootbox Dialog", handler: e=> Bootbox.Dialog("cayita is awesome"));
nb.Add ("Custom Bootbox.Dialog I", handler: CustomDialog_1);
nb.Add ("Custom Bootbox.Dialog 2", handler: CustomDialog_2);
nb.Add ("Custom Bootbox.Dialog 3", handler: CustomDialog_3);
nb.AddDivider ();
nb.Add ("Alert", handler: e=> Bootbox.Alert("Alert!",()=> "Alert callback...".LogInfo()));
nb.Add ("Confirm", handler: e=> Bootbox.Confirm("Confirm...",(c)=> ("Confirm callback "+c).LogInfo()));
nb.Add ("Prompt", handler: e=> Bootbox.Prompt("Pormpt...",(s)=> ("Prompt callback "+s).LogInfo()));
var code = new Div ();
new Div (d=>{
d.ClassName="bs-docs-example";
d.JQuery.Append(nb).Append("C# code".Header(4)).Append(code);
parent.Append(d);
});
var rq =jQuery.GetData<string> ("code/demomodals.html");
rq.Done (s=> code.InnerHTML=s);
}
public static UserForm UserForm (Atom parent)
{
var f = new Form ().As<UserForm>();
f.ClassName="form-horizontal";
f.Append("<style>.form-horizontal .controls { margin-left: 100px; } @media (max-width: 480px) { .form-horizontal .controls { margin-left: 0px; } } </style>");
new Div(f, tb=>{
tb.ClassName="nav";
f.ButtonCreate=new ButtonIcon(tb, bt=>{bt.IconClass="icon-file icon-large"; bt.Disabled=true;});
f.ButtonSave=new ButtonIcon(tb, bt=>{bt.IconClass="icon-save icon-large"; bt.Disabled=true; bt.Type="submit";});
f.ButtonDestroy=new ButtonIcon(tb, bt=>{bt.IconClass="icon-remove icon-large"; bt.Disabled=true; });
});
new NumericInput (f, i => {
i.Name = "Id";
i.Hidden = true;
});
new TextField(f, i=>{i.Name="Name"; i.Text="Name"; i.Required=true;});
new TextField(f, i=>{i.Name="City"; i.Text="City"; i.Required=true;});
new TextField(f, i=>{i.Name="Address"; i.Text="Address"; });
new DateField(f, i=>{i.Name="DoB"; i.Text="Birthday"; i.Picker.DateFormat="dd.mm.yy"; i.Required=true; });
new EmailField(f, i=>{i.Name="Email"; i.Text="Email"; i.Required=true;});
new IntField(f, i=>{i.Name="Rating"; i.Text="Rating"; });
new RadioGroup<string> (f, rg => {
rg.Required = true;
rg.Text = "Level";
rg.Name = "Level";
rg.Add ("A");
rg.Add ("B");
rg.Add ("C");
});
new CheckField(f, i=>{i.Name="IsActive"; i.Input.Text="Is active?";});
f.JQuery.Find("label[class='control-label']").CSS("width", "80px");
f.CopyToUser= ()=>{
User u = new User();
f.Populate (u);
return u;
};
parent.Append (f);
return f;
}
public static void Execute (Atom parent){
Task v= new Task( ()=> Firebug.Console.Log("hello"));
v.Start ();
var store = new UserStore ();
var grid = new UserGrid (parent, store);
store.Read ();
var form = new UserForm (parent);
form.ButtonCreate.Disabled = false;
form.ButtonCreate.Clicked+= (e) => {
grid.ClearSelection();
form.Clear();
};
form.ButtonDestroy.Clicked+= (e) => {
form.Clear();
var u = store.First(r=>r.Id== int.Parse( grid.SelectedRow.RecordId ));
store.Remove(u);
};
form.Changed+= (e) => {
form.ButtonSave.Disabled= !form.HasChanges();
};
form.Updated += (fr, ac) => {
form.ButtonDestroy.Disabled= ac == FormUpdatedAction.Clear;
form.ButtonSave.Disabled=true;
};
form.SubmitHandler = fr => SubmitHandler (grid, form, store);
grid.RowSelected += (g, row) => {
var u = store.First(r=>r.Id== int.Parse( row.RecordId));
form.PopulateFrom(u);
};
parent.Append("Paged Tables".Header (3));
var cu = new CustomerStore ();
new CustomerGrid(parent, cu);
parent.Append (new StorePager<Customer>(cu));
cu.Read ();
parent.Append ("Filters".Header (3));
var cu2 = new CustomerStore ();
new TextInput (parent, i=> {
i.Placeholder="Country";
i.On("keyup", evt=>{
var st = i.Value.ToUpper();
cu2.Filter( f=>f.Country.ToUpper().StartsWith(st));
});
});
new CustomerGrid (parent, cu2);
parent.Append (new StorePager<Customer>(cu2));
cu2.Read ();
parent.Append ("C# code".Header(3));
var rq =jQuery.GetData<string> ("code/demotables.html");
rq.Done (s=> {
var code=new Div();
code.InnerHTML= s;
parent.Append(code);
});
}
public static void Execute(Atom parent)
{
var code = new Div ();
new Div (d=>{
d.ClassName="bs-docs-example";
UI.CreateContainer( d, ct=>{
UI.CreateRowFluid(ct, r=>{
new Div(r, sp=>{
sp.ClassName="span5";
var p1 =CreatePanel("Apps");
new Div(pi=>{
pi.ClassName="c-icons";
pi.Append("<style>img {height: 40px;} .c-icon {height: 95px;}</style>");
foreach( var app in GetApps()){
new ImgPicture(pi, img=>{
img.Img.Src=app.Icon;
img.Text=app.Title;
img.Clicked+= (e) =>{e.PreventDefault(); app.Title.LogInfo();};
});
}
p1.Add(pi);
});
var p2 =CreatePanel("Demo");
var color = new TextField();
var bb = new Button("Change background");
bb.Clicked+= (e) => p2.Body.Style.BackgroundColor= color.Value;
var bc = new Button("collapse");
bc.Clicked+= (e) => p2.Collapse();
p2.Add(color);
p2.Add(bb);
p2.Add(bc);
sp.JQuery.Append(p1).Append(p2);
});
new Div(r, sp=>{
sp.ClassName="span5";
var p1 =CreatePanel("El Coyote");
new Div( cy=>{
cy.ClassName="span2";
new Image(cy,i=>{
i.Src="img/coyote.jpg";
i.Style.Height="100px";
});
p1.Add(cy);
});
new Div( cy=>{
cy.ClassName="span10";
cy.Append(@"<i><b>El <a href='https://es.wikipedia.org/wiki/Coyote' title='Coyote' target='_blank'>Coyote</a> y el <a href='https://es.wikipedia.org/wiki/Geococcyx_californianus' title='Geococcyx californianus' target='_blank'>Correcaminos</a></b></i> (<i><b>Wile E. Coyote</b> and the <b>Road Runner</b></i>) son los personajes de una serie <a href='https://es.wikipedia.org/wiki/Estados_Unidos' title='Estados Unidos' target='_blank'>estadounidense</a> de <a href='https://es.wikipedia.org/wiki/Dibujos_animados' title='Dibujos animados' target='_blank'>dibujos animados</a> creada en el año de <a href='https://es.wikipedia.org/wiki/1949' title='1949' target='_blank'>1949</a> por el animador <a href='https://es.wikipedia.org/wiki/Chuck_Jones' title='Chuck Jones' target='_blank'>Chuck Jones</a> para <a href='https://es.wikipedia.org/wiki/Warner_Brothers' title='Warner Brothers' target='_blank'>Warner Brothers</a>. Chuck Jones se inspiró para crear a estos personajes en un libro de <a href='https://es.wikipedia.org/wiki/Mark_Twain' title='Mark Twain' target='_blank'>Mark Twain</a>, titulado <i>Roughin It</i>, en el que Twain denotaba que los coyotes hambrientos podrían cazar un correcaminos.
<a href='https://es.wikipedia.org/wiki/El_Coyote_y_el_Correcaminos' title='Coyote' target='_blank'>El Coyote (wikipedia)</a> ");
p1.Add(cy);
});
var p2 =CreatePanel("Table");
var tb = new Table<App>("title");
tb.Load(GetApps());
p2.Add(tb);
sp.JQuery.Append(p1).Append(p2);
});
});
});
var wn=1;
new Button(d, bt=>{
bt.Text="Window I";
bt.Clicked+=evt=>{
new Panel( new PanelOptions{Overlay=true}){
Caption="Window " +(wn++).ToString(),
Left=(wn*5).ToString()+"px",
Top=(wn*15).ToString()+"px",
Width="300px",
Height="100px",
}.Show();
};
});
new Button(d, bt=>{
bt.Text="Window II";
bt.Clicked+=evt=>{
var panel= new Panel( new PanelOptions{
Overlay=true,
Caption="Custom Close Icon and Handler",
Left="200px",
Top="300px",
Width="auto",
CloseIconClass="icon-th-large",
CloseIconHandler=p=>{
p.Caption="Close icon changed !!!";
p.CloseIcon.ClassName= "icon-remove-circle";
p.CloseIconHandler= pn=> {pn.Close(); "Panel was closed".LogError(5000); };
p.Height="400px";
}
});
panel.Add( new Button(b=>{
b.Text="click me !";
b.Style.Width="100%";
b.Style.Height="100%";
b.Clicked+= (e) => "button clicked".LogSuccess();
}));
panel.Show();
};
});
new Button(d, bt=>{
bt.Text="Window III";
bt.Clicked+=evt=>{
var panel= new Panel( new PanelOptions{
Overlay=true,
Caption="no closable, no collapsible",
Left="200px",
Top="300px",
Width="auto",
Collapsible=false,
Closable=false,
});
panel.Add( new Button(b=>{
b.Text="click me !";
b.Style.Width="100%";
b.Style.Height="100%";
b.Clicked+= (e) => {
panel.Caption ="now closable and collapsible";
panel.Closable=true;
panel.Collapsible=true;
b.Disabled=true;
};
}));
panel.Show();
};
});
d.JQuery.Append("C# code".Header(4)).Append(code);
parent.Append(d);
});
var rq =jQuery.GetData<string> ("code/demopanels.html");
rq.Done (s=> code.InnerHTML=s);
}
public static void Execute (Atom parent)
{
var d = new Div ("bs-docs-example");
var top = new TabPanel (new TabPanelOptions{
TabsPosition="top",
Bordered=true,
});
top.Content.Style.MinHeight = "100px";
var t1 = new Tab ();
t1.Caption="First Tab";
t1.Body.Append ("Firs tab body");
AlertFn.Success (t1.Body.FirstChild, "Cayita is awesome");
top.Add (t1);
top.Add (tab=>{
tab.Caption= "Second Tab";
tab.Body.AddClass("well");
tab.Body.Append("Hello second tab");
tab.Body.Style.Color="red";
});
top.Add (tab=>{
tab.Caption= "El Coyote";
tab.Body.Append( new Div(cd=>{
cd.ClassName="span1";
cd.Append( new Image{Src="img/coyote.jpg"});
}));
tab.Body.Append( new Div(cd=>{
cd.ClassName="span11";
cd.Append( CoyoteText);
}));
});
d.Append (top);
parent.JQuery.Append ("Tabs on top".Header(3)).Append(d);
var right = new TabPanel (new TabPanelOptions{
TabsPosition="right",
}, pn=>{
pn.Add( tab=>{
tab.Caption="First tab";
tab.Body.Append("Hello first tab".Header(3));
});
pn.Add( tab=>{
tab.Caption= "Second tab";
tab.Body.AddClass("well");
tab.Body.Append("Hello second tab");
tab.Body.Style.Color="blue";
tab.Body.Style.Height="80px";
});
pn.Add( tab=>{
tab.Caption= "El Coyote";
tab.Body.Append( new Div(cd=>{
cd.ClassName="span1";
cd.Append( new Image{Src="img/coyote.jpg"});
}));
tab.Body.Append( new Div(cd=>{
cd.ClassName="span11";
cd.Append( CoyoteText);
}));
});
});
new Div (ex=>{
ex.ClassName="bs-docs-example";
ex.Append(right);
parent.JQuery.Append ("Tabs on right".Header(3)).Append(ex);
});
right.Show (2);
var bottom = new TabPanel (new TabPanelOptions{
TabsPosition="below",
}, pn=>{
pn.Add( tab=>{
tab.Caption="First tab";
tab.Body.Append("Hello first tab".Header(3));
});
pn.Add( tab=>{
tab.Caption= "Second tab";
tab.Body.AddClass("well");
tab.Body.Append("Hello second tab");
tab.Body.Style.Color="blue";
tab.Body.Style.Height="80px";
});
pn.Add( tab=>{
tab.Caption= "El Coyote";
tab.Body.Append( new Div(cd=>{
cd.ClassName="span1";
cd.Append( new Image{Src="img/coyote.jpg"});
}));
tab.Body.Append( new Div(cd=>{
cd.ClassName="span11";
cd.Append( CoyoteText);
}));
});
});
bottom.Content.Style.MinHeight = "150px";
new Div (ex=>{
ex.ClassName="bs-docs-example";
ex.Append(bottom);
parent.JQuery.Append ("Tabs on bottom".Header(3)).Append(ex);
});
bottom.Show (1);
var left = new TabPanel (new TabPanelOptions{
TabsPosition="left", Bordered=true
}, pn=>{
pn.Add( tab=>{
tab.Caption="First tab";
tab.Body.Append("Hello first tab".Header(3));
});
pn.Add( tab=>{
tab.Caption= "Second tab";
tab.Body.AddClass("well");
tab.Body.Append("Hello second tab");
tab.Body.Style.Color="blue";
tab.Body.Style.Height="80px";
});
pn.Add( tab=>{
new Image(tab, i=>{i.Src="img/coyote.jpg"; i.Style.Height="106px";});
new Label(tab, "El Coyote");
tab.Body.Append(CoyoteText);
});
});
left.Content.Style.MinHeight = "220px";
new Div (ex=>{
ex.ClassName="bs-docs-example";
ex.Append(left);
parent.JQuery.Append ("Tabs on left".Header(3)).Append(ex);
});
left.Show (0);
parent.Append ("C# code".Header(3));
var rq =jQuery.GetData<string> ("code/demotabpanel.html");
rq.Done (s=> {
var code=new Div();
code.InnerHTML= s;
parent.Append(code);
});
}