Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
BUILDING CUSTOM 
SECTIONS IN UMBRACO 
THE DIFFERENCES BETWEEN V6 AND V7 
4F1 F* ./ )*-#.F¥F´2* ut
WHY USE CUSTOM SECTIONS 
0./*(F. /$*).F- F$ 'F2# )F4*0F2)/F4*0-F $/*-.F/*F()  
¨ 3/ -)'©F/F$)F/# F(-*F )
TECHNOLOGY 
# F($)F$!! - ) F$)F0$'$)F0./*(F. /$*).F /2  )FyF) 
zF$.F/# F/ #)*'*4
TECHNOLOGY 
UMBRACO 6 AND EARLIER 
‡F !*-(. 
‡F
 
)0'-
FF‡F +$
TECHNOLOGY 
UMBRACO 7 
)0'-
FF‡F +$ 
‡F
 
‡F !*-(. 
 /$*).F0$'F!*-F1yF.#*0'F2*-F$)F1zF2$/#F.*( F($)*-F	 
/2 $)‡
CREATING A CUSTOM SECTION 
- /$)FF0./*(F. /$*)F$.F'(*./F$ )/$'F$)FyFFz 
- / FF'.. 
	(+' ( )/Fumbraco.interfaces.IApplicat...
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...
CREATING A CUSTOM TREE 
IN UMBRACO 6 
- / FF'.. 
	)# -$/F!-*(Fumbraco.cms.presentation.Trees.BaseTree 
 *-/ F'..F2$/#Fumbr...
CREATING A CUSTOM TREE 
IN UMBRACO 6 
[Tree(duugcustomers, duugcustomerstree, Customers)] 
public class CustomerTree : Bas...
CREATING A CUSTOM TREE 
IN UMBRACO 7 
- / FF'..F¨'..F)( F.0!!$3 F2$/#F*)/-*'' -© 
	)# -$/F!-*(FUmbraco.Web.Trees.TreeContr...
CREATING A CUSTOM TREE 
IN UMBRACO 7 
[Tree(duug-customers, duug-customers-tree, Customers)] 
[PluginController(DUUG)] 
pu...
TALK IS CHEAP. SHOW 
ME THE CODE.
$)0.F*-1'.
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+  
	...
EDITING YOUR DATA 
IN UMBRACO 6 
 /F/# F/$*)F*!F4*0-F/-  F)* F¨%.F!0)/$*)© 
	)F ) -
F( /#*F4*0F)  F- / F/# F!0)/$*) 
- / F...
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*)/-...
EDITING YOUR DATA 
IN UMBRACO 7 : ANGULAR EDITOR ROUTES 
# F($)F)0'-F-*0/ F/*F'*F $/*-.F$. 
/:section/:tree/:method/:id 
(...
EDITING YOUR DATA 
IN UMBRACO 7 : PACKAGE MANIFEST 
# F+ ‡()$! ./F$.FF%.*)F!$' F/#/F/ ''.F(-*F2#/F'$ )/ 
.$ F- .*0- .F/*F'...
REUSING EXISTING EDITORS 
	)F(-*FyF4*0F)F#$ 1 F/#$.F$)F. 1 -'F24.ˆF0/ 
''F!  'F'$ FF# 
	)F(-*FzF4*0F)F0. F/# Fumb-editorF$...
TALK IS CHEAP. SHOW 
ME THE CODE.
$)0.F*-1'.
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 
'$$...
CREATING MENUS  DIALOGS 
IN UMBRACO 6 
F4*0-F( )0F$/ (F/*F4*0-F/-  )*  
customerNode.Menu.Add(ActionDelete.Instance); 
 !0...
CREATING MENUS  DIALOGS 
IN UMBRACO 6 
- / FF0. -F*)/-*'F!*-F4*0-F- / F$'* 
- / FF'..F/#/F$(+' ( )/. 
umbraco.interfaces.I...
CREATING MENUS  DIALOGS 
IN UMBRACO 7 
F4*0-F( )0F$/ (F/*F4*0-F/-  )* F$)F/# FGetMenuForNode 
( /#* 
# F'$.F*!F4*0-F( )0F)...
TALK IS CHEAP. SHOW 
ME THE CODE.
$)0.F*-1'.
WRAP UP 
(-*FzF0. .F*)1 )/$*).F*1 -F* ¥*)!$
Próxima SlideShare
Cargando en…5
×

DUUG meetup Colours - Custom sections v6 vs v7

826 visualizaciones

Publicado el

Slides about the presentation of Dave Woestenborghs on the DUUG meetup of 25 september 2014 about creating custom sections in Umbraco and the differences between V6 and V7.

  • Sé el primero en comentar

  • Sé el primero en recomendar esto

DUUG meetup Colours - Custom sections v6 vs v7

  1. 1. BUILDING CUSTOM SECTIONS IN UMBRACO THE DIFFERENCES BETWEEN V6 AND V7 4F1 F* ./ )*-#.F¥F´2* ut
  2. 2. WHY USE CUSTOM SECTIONS 0./*(F. /$*).F- F$ 'F2# )F4*0F2)/F4*0-F $/*-.F/*F() ¨ 3/ -)'©F/F$)F/# F(-*F )
  3. 3. TECHNOLOGY # F($)F$!! - ) F$)F0$'$)F0./*(F. /$*).F /2 )FyF) zF$.F/# F/ #)*'*4
  4. 4. TECHNOLOGY UMBRACO 6 AND EARLIER ‡F !*-(. ‡F )0'- FF‡F +$
  5. 5. TECHNOLOGY UMBRACO 7 )0'- FF‡F +$ ‡F ‡F !*-(. /$*).F0$'F!*-F1yF.#*0'F2*-F$)F1zF2$/#F.*( F($)*-F /2 $)‡
  6. 6. CREATING A CUSTOM SECTION - /$)FF0./*(F. /$*)F$.F'(*./F$ )/$'F$)FyFFz - / FF'.. (+' ( )/Fumbraco.interfaces.IApplication *-/ F2$/# umbraco.businesslogic.ApplicationAttribute [Application(duug-customers, Customers, icon-people, 15)] public class Section: IApplication { }
  7. 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. 8. CREATING A CUSTOM TREE IN UMBRACO 6 - / FF'.. )# -$/F!-*(Fumbraco.cms.presentation.Trees.BaseTree *-/ F'..F2$/#Fumbraco.businesslogic.TreeAttribute
  9. 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. 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. 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) { } }
  12. 12. TALK IS CHEAP. SHOW ME THE CODE.
  13. 13. $)0.F*-1'.
  14. 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. 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. 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. 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. 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. 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
  20. 20. TALK IS CHEAP. SHOW ME THE CODE.
  21. 21. $)0.F*-1'.
  22. 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. 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. 24. CREATING MENUS DIALOGS IN UMBRACO 6 - / FF0. -F*)/-*'F!*-F4*0-F- / F$'* - / FF'..F/#/F$(+' ( )/. umbraco.interfaces.ITaskReturnUrl $./ -F4*0-F$'*.FF/..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. 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
  26. 26. TALK IS CHEAP. SHOW ME THE CODE.
  27. 27. $)0.F*-1'.
  28. 28. WRAP UP (-*FzF0. .F*)1 )/$*).F*1 -F* ¥*)!$
  29. 29. ..F )F* -*)/ )FF )F* -.F)F2*-F/* /# - .$ -F/*F- 0. F 3$./$)F*(+*) )/. *0F*)Þ/F) F/*F FF)0'-F 3+ -/
  30. 30. QUESTIONS ?
  31. 31. USEFULL LINKS (-*F*0( )//$*) $(F 4.. ).F'* ) '( $F'* 1$F- ) 'Þ.F'* *0- F* F!*-F/#$.F+- . )//$*)
  32. 32. THE END

×