Bringing the best of WYSIWYG editors to WebSharper
Create awesome user interfaces in Sencha Architect and use them in your WebSharper applications in a type-safe and robust manner. True WYSIWYG for your web and mobile applications, while keeping ALL of your application logic in F#.
(Note: separate licensing for Sencha Tools is required. Please consult the Sencha website for more details.)
- View and model always in sync: change your UI code in Sencha Architect, and see what further changes you need to make to keep your application consistent and semantically correct.
- Build all or incrementally: Add UI controls in your Sencha Architect project, and access them in your F# code with full code completion.
- Seamless server calls: Write your backend in F# and call it from your Sencha UI - all in F#.
- Unprecedented efficiency: your UI and your application code has never been closer, UI updates hit your F# code instantly.
Using Sencha Architect in WebSharper projects
Quick steps to get started
Create a WebSharper Sitelet Website project. In
Main.fs, remove the
Aboutaction, page and sitelet definition. Replace
Site.HomePageinserted content with only
Div [new Controls.EntryPoint()].
Create new Ext JS project in Sencha Architect, set an
appFoldervalue, save and publish it to your website project folder.
Add a script reference to your
Main.htmltemplate after the WebSharper scripts placeholder
WebSharper.ExtJSNuGet package (requires a WebSharper license). In
Client.fs, add these attributes on the
Clientmodule to tell WebSharper to automatically include the basic Ext JS CSS files:
1 2 3 4 5
open WebSharper.ExtJS [<Require(typeof<Resources.ExtAll>)>] [<Require(typeof<Resources.ExtThemeNeptune>)>] [<Require(typeof<Resources.ExtAllNeptuneCss>)>]
Clientmodule, replace the
Mainfunction's body with the following code, where
InitMainView, a function to be added before
Main, will contain your UI logic.
1 2 3
Div  |>! OnAfterRender (fun el -> Ext.OnReady(As InitMainView, null, null) )
Raw access to UI components
InitMainView, you can now access components in your UI design, set event handlers, or add other application logic using
raw, string-based accessors:
1 2 3
let view = Ext.GetCmp("MainView") :?> Ext.container.Viewport let form = view.GetComponent("form") :?> Ext.form.Panel ...
However, working with these string accessors is a hassle and also very error-prone.
Type-safe access to UI components:
Instead, you can access components from your Sencha Architect project in a robust way using the type provider from WebSharper Extensions for Sencha Architect:
WebSharper.SenchaArchitectNuGet package into your WebSharper project.
Add the line
type App = SenchaArchitect.App<"/app.js">where you specify a correct relative or absoute path to your Sencha Architect output
app.jsfile. (be sure to have opened the
This brings all your components from your Sencha Architect UI project into F# scope. You can now do:
let view = App.View.MainView ...
- Access components having their
idconfig set as static properties on their respective
- Access components having their
itemIdconfig set as instance properties on the wrapper object of the parent component. Items can be in the
menuof a split button or the
toolsconfig of a panel.
Ext.form.Panelwrappers have helper functions for getting and setting their named field values. A
FieldValuesnested type is provided for this.
- A wrapper type gets provided only for components having items or named fields.
selfproperty to get the
Exttype for the component. Another option is to pass the
Inherit = trueargument to the type provider. In this case the wrapper objects inherit their framework type.
- Accessor for stores using
storeIdas static properties on the
- Provided types for models.
The types nested in
RawModelare creating raw models (plain JS objects), while
Modelcontains wrappers around the
Ext.data.Modelobjects with typed getters/setters for the fields of the model object. Convert between them with the
If you want to create a sitelet-based website with different Ext JS viewports loaded on the pages, use the
"Unmark as Initial View" option in Sencha Architect.
app.js does not create a view automatically.
You can create a full screen view by passing the element you are inserting with a
Web.Control class as
RenderTo config to the constructor of the wrapper type of the view.
1 2 3 4 5 6 7 8
let MainView renderTo = let view = App.View.MainView(ExtCfg.container.Viewport(RenderTo = renderTo)) // ... let Main () = Div  |>! OnAfterRender (fun el -> Ext.OnReady(()fun () -> MainView el.Body), null, null) )