More Related Content Similar to DUUG meetup Colours - Custom sections v6 vs v7 (20) More from Colours B.V. (19) DUUG meetup Colours - Custom sections v6 vs v72. WHY USE CUSTOM SECTIONS
0./*(F. /$*).F- F$ 'F2# )F4*0F2)/F4*0-F $/*-.F/*F()
¨ 3/ -)'©F/F$)F/# F(-*F )
5. TECHNOLOGY
UMBRACO 7
)0'-
FF‡F +$
‡F
‡F !*-(.
/$*).F0$'F!*-F1yF.#*0'F2*-F$)F1zF2$/#F.*( F($)*-F
/2 $)‡
6. CREATING A CUSTOM SECTION
- /$)FF0./*(F. /$*)F$.F'(*./F$ )/$'F$)FyFFz
- / FF'..
(+' ( )/Fumbraco.interfaces.IApplication
*-/ F2$/#
umbraco.businesslogic.ApplicationAttribute
[Application(duug-customers, Customers, icon-people, 15)]
public class Section: IApplication
{
}
7. CREATING A CUSTOM TREE
F/- F+-*1$ .FF)1$/$*)F!*-F4*0-F¨ 3/ -)'©F/
# F.*0- F*!F/# F/F)F F)4/#$)
F. /$*)F)F#1 F(0'/$+' F/- .
8. CREATING A CUSTOM TREE
IN UMBRACO 6
- / FF'..
)# -$/F!-*(Fumbraco.cms.presentation.Trees.BaseTree
*-/ F'..F2$/#Fumbraco.businesslogic.TreeAttribute
9. CREATING A CUSTOM TREE
IN UMBRACO 6
[Tree(duugcustomers, duugcustomerstree, Customers)]
public class CustomerTree : BaseTree {
public CustomerTree(string application)
: base(application)
{
}
public override void RenderJS(ref StringBuilder Javascript)
{
// render javascript for tree
}
public override void Render(ref XmlTree tree)
{
// render tree items
}
protected override void CreateRootNode(ref XmlTreeNode rootNode)
{
// create root node of tree
}
}
10. CREATING A CUSTOM TREE
IN UMBRACO 7
- / FF'..F¨'..F)( F.0!!$3 F2$/#F*)/-*'' -©
)# -$/F!-*(FUmbraco.Web.Trees.TreeController
*-/ F'..F2$/#Fumbraco.businesslogic.TreeAttribute
*-/ F'..F2$/#
Umbraco.Web.Mvc.PluginControllerAttribute
11. CREATING A CUSTOM TREE
IN UMBRACO 7
[Tree(duug-customers, duug-customers-tree, Customers)]
[PluginController(DUUG)]
public class CustomerTreeController : TreeController {
protected override TreeNodeCollection GetTreeNodes(string id, FormDataCollection queryStrings)
{
}
protected override MenuItemCollection GetMenuForNode(string id, FormDataCollection queryStrings)
{
}
}
14. EDITING YOUR DATA
*2F/#/F2 F#1 F- / F*0-F/- F2 F2)/F/# F $/*-.F/*F F'
/*F $/F/# F/
)F(-*FyF2 F2$''F- / FF !*-(F+
)F(-*FzF2 F2$''F- / FF)0'-F1$ 2F¨+'$)F#/('Fá
)0'-F*)/-*'' -©
15. EDITING YOUR DATA
IN UMBRACO 6
/F/# F/$*)F*!F4*0-F/- F)* F¨%.F!0)/$*)©
)F ) -
F( /#*F4*0F) F- / F/# F!0)/$*)
- / F4*0-F $/F2 !*-(
. Fumbraco.uicontrolsF¨/1$ 2ˆF+) .ˆF+-*+ -/4+) '.©
/*F +F'**F)F! 'F*!F/# F )
'$/ F$)+0/F2$/#F‡F1'$/$*)F*)/-*'.
16. EDITING YOUR DATA
IN UMBRACO 7
/F/# F-*0/ F!*-F4*0-F/- F)* F¨$!F) ©
- / F4*0-F $/*-F1$ 2
- / F4*0-F $/*-F)0'-F*)/-*'' -
- / ¥0+/ F+ F()$! ./
. F$- /$1 .F/*F +F'**F)F! 'F*!F/# F )
¨0(ž+) ˆF0(ž/ˆ‡‡‡©
'$/ F$)+0/F2$/#F)0'-F$- /$1 .
17. EDITING YOUR DATA
IN UMBRACO 7 : ANGULAR EDITOR ROUTES
# F($)F)0'-F-*0/ F/*F'*F $/*-.F$.
/:section/:tree/:method/:id
(-*F2$''F'*F$)F/# F1$ 2F!*-F/#$.F-*0/ F. F*)
*)1 )/$*).
$ 2.F2$''F F'* F!-*(‰
/App_Plugins/{mypackage}/BackOffice/{treetype}/{method}.html
1 '*+ -.F)F.+ $!4FF0./*(FRoutePathF!*-F)4F/- F)*
2#$#F2$''F0. F0(-*F/*F-*0/ F/*F/#/F.+ $!$F'*/$*)‡
18. EDITING YOUR DATA
IN UMBRACO 7 : PACKAGE MANIFEST
# F+ ‡()$! ./F$.FF%.*)F!$' F/#/F/ ''.F(-*F2#/F'$ )/
.$ F- .*0- .F/*F'*F2# )F/# F0./*(F/- F$.F'*
{
javascript : [
'~/App_Plugins/DUUG/scripts/customer.edit.controller.js',
'~/App_Plugins/DUUG/scripts/customer.create.controller.js',
'~/App_Plugins/DUUG/scripts/customer.delete.controller.js',
'~/App_Plugins/DUUG/scripts/customer.resource.js'
]
}
19. REUSING EXISTING EDITORS
)F(-*FyF4*0F)F#$ 1 F/#$.F$)F. 1 -'F24.ˆF0/
''F! 'F'$ FF#
)F(-*FzF4*0F)F0. F/# Fumb-editorF$- /$1
22. CREATING MENUS DIALOGS
)0F$/ (.F++ -F$)F/# F*)/ 3/F( )0F*!F4*0-F/-
)*
#F)* F/4+ F)F#1 FF$!! - )/F*)/ 3/F( )0
'$$)F*)FF( )0F$/ (F)F*+ )FF$'*
23. CREATING MENUS DIALOGS
IN UMBRACO 6
F4*0-F( )0F$/ (F/*F4*0-F/- )*
customerNode.Menu.Add(ActionDelete.Instance);
!0'/F/$*).F)F F!*0)F$)
umbraco.BusinessLogic.ActionsF)( .+
0./*(F/$*).F)F F- / F4F$(+' ( )/$)
umbraco.interfaces.IAction
24. CREATING MENUS DIALOGS
IN UMBRACO 6
- / FF0. -F*)/-*'F!*-F4*0-F- / F$'*
- / FF'..F/#/F$(+' ( )/.
umbraco.interfaces.ITaskReturnUrl
$./ -F4*0-F$'*.FF/..F$)
/umbraco/config/create/ui.xml
nodetype alias=duugcustomerstree
headerCustomer/header
usercontrol/../App_Plugins/duugV6/CustomerCreateDialog.ascx/usercontrol
tasks
create assembly=Duug.CustomSectionV6.Core type=CustomerSection.CustomerTasks
/create/tasks
/nodetype
25. CREATING MENUS DIALOGS
IN UMBRACO 7
F4*0-F( )0F$/ (F/*F4*0-F/- )* F$)F/# FGetMenuForNode
( /#*
# F'$.F*!F4*0-F( )0F)* F2$''F'.*F F/# F)0'-F-*0/
/$*)
- / FF1$ 2F)F)0'-F*)/-*'' -F!*-F/# F$'*
$'*.F2$''F F'* F!-*(
/App_Plugins/{mypackage}/BackOffice/{treetype}/{action}.html
29. ..F )F*
-*)/ )FF )F* -.F)F2*-F/* /# -
.$ -F/*F- 0. F 3$./$)F*(+*) )/.
*0F*)Þ/F) F/*F FF)0'-F 3+ -/