extjs/examples/classic/desktop/.sencha/app/slice-impl.xml

   1 <project name="x-slice-impl">
   2
   3     <target name="-load-sass-page"
   4             depends="-detect-app-build-properties,
   5                      -generate-slicer-bootstrap,
   6                      -generate-slicer-manifest">
   7         <x-run-if-true value="${app.sass.fashion}">
   8             <if>
   9                 <x-is-false value="${app.sass.rhino}"/>
  10                 <then>
  11                     <x-get-relative-path from="${build.web.root}"
  12                                          to="${app.example.fashion.html}"
  13                                          property="app.example.fashion.html.relative"/>
  14                     <property name="example.page.url"
  15                               value="http://localhost:${build.web.port}/${app.example.fashion.html.relative}"/>
  16                     <x-sass-page page="${app.example.fashion.html}"
  17                                  url="${example.page.url}"
  18                                  refId="app.web.server"/>
  19                 </then>
  20             </if>
  21         </x-run-if-true>
  22     </target>
  23
  24     <!--
  25     Uses the compiler to generate a special theme-only scss file containing
  26     rules for all framework / package / app components.  This is then used
  27     by the slicer example page to capture theme sprites
  28     -->
  29     <target name="-compile-slicer-sass" depends="-init-compiler">
  30         <local name="app.example.scss.tmp"/>
  31         <property name="app.example.scss.tmp" value="${app.example.scss}.tmp"/>
  32         <x-normalize-path
  33             path="${build.out.resources.dir}"
  34             property="image.search.path"/>
  35
  36         <local name="var.begin"/>
  37         <local name="var.end"/>
  38
  39         <condition property="var.begin" value="dynamic(">
  40             <isset property="framework.isV6"/>
  41         </condition>
  42         <condition property="var.end" value=")">
  43             <isset property="framework.isV6"/>
  44         </condition>
  45
  46         <property name="var.begin" value=""/>
  47         <property name="var.end" value="!default"/>
  48
  49         <x-compile refid="${compiler.ref.id}">
  50             <![CDATA[
  51                 restore
  52                     page
  53                 and
  54                 include
  55                     -all
  56                 and
  57                 sass
  58                     +class-name-vars
  59                     +etc
  60                     +vars
  61                     +rules
  62                     -variable=$app-name: ${var.begin} '${app.name}' ${var.end}
  63                     -variable=$image-search-path:'${image.search.path}'
  64                     -variable=$theme-name: ${var.begin} '${theme.name}' ${var.end}
  65                     -output=${app.example.scss.tmp}
  66                     -forward=${app.sass.dynamic}
  67                 and
  68                 restore
  69                     page
  70                 and
  71                 sass
  72                     +ruby
  73                     -output=${app.example.out.ruby}
  74             ]]>
  75         </x-compile>
  76
  77         <if>
  78             <not>
  79                 <filesmatch file1="${app.example.scss.tmp}" file2="${app.example.scss}"/>
  80             </not>
  81             <then>
  82                 <copy file="${app.example.scss.tmp}" tofile="${app.example.scss}" overwrite="true"/>
  83             </then>
  84         </if>
  85
  86         <x-get-relative-path from="${app.example.dir}"
  87                              to="${app.example.css}"
  88                              property="app.example.css.path"/>
  89
  90 <!--update the app's example to point to the build output-->
  91 <echo file="${app.example.css.file}">
  92 <![CDATA[
  93 /*
  94  * This file is generated by Sencha Cmd and should NOT be edited. It redirects
  95  * to the most recently built CSS file for the application to allow theme.html
  96  * to load properly for image slicing (required to support non-CSS3 browsers
  97  * such as IE9 and below).
  98  */
  99 @import '${app.example.css.path}';
 100 ]]>
 101 </echo>
 102     </target>
 103
 104     <!--
 105     Compiles the scss file for the theme slicer page
 106     -->
 107     <target name="-compass-compile-slicer-css" depends="-compile-slicer-sass">
 108         <if>
 109             <x-is-true value="${app.sass.fashion}"/>
 110             <then>
 111                 <if>
 112                     <x-is-true value="${app.sass.rhino}"/>
 113                     <then>
 114                         <x-fashion-compile
 115                                 file="${app.example.build.dir}"
 116                                 toFile="${app.example.build.dir}"/>
 117                     </then>
 118                     <else>
 119                         <x-sass-build input="${app.example.build.dir}"
 120                                       output="${app.example.build.dir}"
 121                                       refId="app.web.server"
 122                                       compress="false"/>
 123                     </else>
 124                 </if>
 125             </then>
 126             <else>
 127                 <x-compass-compile
 128                         dir="${app.example.build.dir}"
 129                         trace="${compass.compile.trace}"
 130                         boring="${compass.compile.boring}"
 131                         force="${compass.compile.force}"
 132                         sassdir="${app.example.build.dir}"
 133                         cssdir="${app.example.build.dir}"
 134                         config="${app.example.compass.config}"/>
 135             </else>
 136         </if>
 137     </target>
 138
 139     <!-- Produces a bootstrap.js file for ext 4.2 slicer pages -->
 140     <target name="-generate-slicer-bootstrap" unless="framework.isV5">
 141         <local name="relpath"/>
 142         <x-get-relative-path from="${bootstrap.base.path}"
 143                              to="${framework.packages.dir}"
 144                              property="relpath"/>
 145
 146         <x-bootstrap file="${bootstrap.example.js}"
 147                      basedir="${bootstrap.base.path}"
 148                      includeBoot="true"
 149                      includeCoreFiles="true"
 150                      overrideTpl="${bootstrap.override.tpl}"
 151                      overrideTplType="${bootstrap.override.tpltype}"
 152                      overrideExcludeTags="">
 153 <![CDATA[
 154 Ext.Boot.loadSync([
 155     "render.js",
 156     "${relpath}/ext-theme-base/sass/example/manifest.js",
 157     "${relpath}/ext-theme-base/sass/example/shortcuts.js",
 158     "custom.js"
 159 ]);
 160 ]]>
 161         </x-bootstrap>
 162
 163     </target>
 164
 165     <!-- Produces a bootstrap.js / bootstrap.json pair for ext 5 slicer pages -->
 166     <target name="-generate-slicer-manifest" if="framework.isV5" depends="-detect-app-build-properties">
 167         <local name="manifest.root.excludes"/>
 168         <condition property="manifest.root.excludes" value="${app.bootstrap.manifest.exclude}">
 169             <isset property="app.bootstrap.manifest.exclude"/>
 170         </condition>
 171         <property name="manifest.root.excludes" value=""/>
 172
 173         <if>
 174             <x-is-true value="${app.has.js.sdk}"/>
 175             <then>
 176                 <property name="manifest.bootstrap.js.exclude">
 177                     exclude
 178                     -tag=framework,package-sencha-core,package-core,package-${toolkit.name}
 179                 </property>
 180                 <x-compile refid="${compiler.ref.id}">
 181                     <![CDATA[
 182                         restore
 183                             page
 184                         and
 185                         ${manifest.bootstrap.js.exclude}
 186                     ]]>
 187                 </x-compile>
 188             </then>
 189         </if>
 190
 191         <condition property="remove.slicer.css.bootstrap.entries" value="true">
 192             <and>
 193                 <x-is-true value="${app.sass.fashion}"/>
 194                 <x-is-false value="${app.sass.rhino}"/>
 195             </and>
 196         </condition>
 197         <property name="remove.slicer.css.bootstrap.entries" value="false"/>
 198
 199         <x-compile refid="${compiler.ref.id}">
 200             <![CDATA[
 201                 slicer-manifest
 202                     -exclude=${manifest.root.excludes}
 203                     -removeBootstrapCssEntries=${remove.slicer.css.bootstrap.entries}
 204                     +ignoreDisabled
 205                     -basePath=${bootstrap.base.path}
 206                     -cssFile=${app.example.css.file}
 207                     -out=${bootstrap.example.json}
 208                 and
 209                 microload
 210                     -operation=microloader
 211                     -microloaderPath=${build.slicer.microloader.file}
 212                     -bootPath=${build.boot.file}
 213                     -out=${bootstrap.example.js}
 214             ]]>
 215         </x-compile>
 216     </target>
 217
 218     <target name="-capture-theme-image">
 219         <if>
 220             <or>
 221                 <x-is-false value="${app.sass.fashion}"/>
 222                 <x-is-true value="${app.sass.rhino}"/>
 223             </or>
 224             <then>
 225                 <echo>Capture theme image to ${build.capture.png}</echo>
 226                 <x-sencha-command>
 227                     <![CDATA[
 228                         theme
 229                             capture
 230                                 -page=${app.example.theme.html}
 231                                 -image=${build.capture.png}
 232                                 -manifest=${build.capture.json}
 233                     ]]>
 234                 </x-sencha-command>
 235             </then>
 236         </if>
 237     </target>
 238
 239     <target name="-capture-sass-page-image">
 240         <if>
 241             <and>
 242                 <x-is-true value="${app.sass.fashion}"/>
 243                 <x-is-false value="${app.sass.rhino}"/>
 244             </and>
 245             <then>
 246                 <echo>Capture theme image to ${build.capture.png}</echo>
 247                 <x-capture-slicer-data manifestPath="${build.capture.json}"
 248                                        imagePath="${build.capture.png}"
 249                                        refId="app.web.server"/>
 250             </then>
 251         </if>
 252     </target>
 253
 254     <target name="-slice-theme-images">
 255         <echo>Slicing theme images to ${build.resources.dir}</echo>
 256         <x-sencha-command>
 257             <![CDATA[
 258                 fs
 259                     slice
 260                         ${build.slice.options}
 261                         -image=${build.capture.png}
 262                         -manifest=${build.capture.json}
 263                         -out=${build.out.slicer.path}
 264             ]]>
 265         </x-sencha-command>
 266     </target>
 267
 268
 269     <!--
 270     Generates theme images for Ext JS 4.2+ apps using theme packages
 271     '-detect-app-build-properties' is defined in js-impl.xml
 272     -->
 273     <target name="-slice-app-theme"
 274             depends="-load-sass-page,
 275                      -compass-compile-slicer-css,
 276                      -capture-sass-page-image,
 277                      -capture-theme-image,
 278                      -slice-theme-images">
 279     </target>
 280
 281     <macrodef name="x-build-theme">
 282         <attribute name="theme" description="the path of the theme folder"/>
 283         <attribute name="buildsass" default="false"/>
 284         <attribute name="basetheme" default="default"/>
 285         <sequential>
 286             <local name="theme.name"/>
 287
 288             <local name="framework.theme.dir"/>
 289             <local name="tmp.theme.dir"/>
 290             <local name="tmp.img.dir"/>
 291
 292             <basename property="theme.name" file="@{theme}"/>
 293             <local name="theme.base.name"/>
 294             <property name="theme.base.name" value="${theme.name}"/>
 295             <property name="theme.images.dir" location="@{theme}/images"/>
 296             <property name="theme.page.dir" location="@{theme}/${theme.page.name}"/>
 297
 298             <property name="tmp.res.dir" value="${app.resources.dir}"/>
 299             <property name="tmp.theme.dir" value="${tmp.res.dir}/${theme.base.name}"/>
 300             <property name="tmp.img.dir" value="${tmp.theme.dir}/images"/>
 301
 302             <property name="app.res.dir" location="${app.dir}/packages"/>
 303             <property name="app.img.dir" location="${app.res.dir}/images"/>
 304
 305             <property name="framework.res.dir" location="${framework.dir}/resources"/>
 306             <property name="framework.img.dir" location="${framework.res.dir}/themes/images"/>
 307             <property name="framework.theme.dir" location="${framework.img.dir}/@{basetheme}"/>
 308
 309             <echo>Copying base framework images from ${framework.theme.dir} to ${tmp.img.dir}</echo>
 310             <copy todir="${tmp.img.dir}">
 311                 <fileset dir="${framework.theme.dir}" includes="**/*"/>
 312             </copy>
 313
 314             <if>
 315                 <equals arg1="@{buildsass}" arg2="true"/>
 316                 <then>
 317                     <echo>Building sass for theme ${theme.name}</echo>
 318                     <!--x-build-sass is defined in sass-impl.xml-->
 319                     <x-build-sass theme="@{theme}"/>
 320                 </then>
 321             </if>
 322
 323             <echo>Slicing images for theme ${theme.name} to ${tmp.img.dir}</echo>
 324             <x-sencha-command>
 325                 <![CDATA[
 326                 theme
 327                     build
 328                         -data-file=${build.capture.json}
 329                         -image-file=${build.capture.png}
 330                         -page=${theme.page.dir}
 331                         -out=${tmp.img.dir}
 332                 ]]>
 333             </x-sencha-command>
 334
 335             <if>
 336                 <available file="${theme.images.dir}"/>
 337                 <then>
 338                     <echo>Copying user defined images from @{theme}/images to ${tmp.img.dir}</echo>
 339                     <copy todir="${tmp.img.dir}">
 340                         <fileset dir="${theme.images.dir}" includes="**/*"/>
 341                     </copy>
 342                 </then>
 343             </if>
 344
 345         </sequential>
 346     </macrodef>
 347
 348     <!--
 349     This is a legacy macrodef for copying resources in theme-directory based themes.
 350     It is provided to support building Ext JS 4.1 app themes
 351     -->
 352     <macrodef name="x-copy-resources">
 353         <sequential>
 354             <copy todir="${build.resources.dir}" includeEmptyDirs="false">
 355                 <fileset dir="${app.resources.dir}"
 356                          includes="**/*"/>
 357             </copy>
 358
 359             <x-get-relative-path from="${app.dir}"
 360                                  to="${framework.dir}"
 361                                  property="framework.rel.path"/>
 362
 363             <copy toDir="${build.out.base.path}/${framework.rel.path}">
 364                 <fileset dir="${framework.dir}"
 365                          includes="src/ux/**/css/**/*"/>
 366             </copy>
 367         </sequential>
 368     </macrodef>
 369
 370     <!--
 371     Generates theme images for Ext JS 4.1 apps that use directory based
 372     themes.  These have been deprecated in favor of ExtJS 4.2 theme packages
 373     -->
 374     <target name="-slice-theme-directories">
 375         <echo>Processing theme directories from ${app.theme.dir}</echo>
 376         <for param="theme">
 377             <dirset dir="${app.theme.dir}" includes="*"/>
 378             <sequential>
 379                 <x-build-theme theme="@{theme}"/>
 380             </sequential>
 381         </for>
 382         <x-copy-resources/>
 383     </target>
 384
 385     <target name="-slice-images">
 386         <x-run-if-true value="${enable.ext42.themes}">
 387             <x-ant-call target="-slice-app-theme"/>
 388         </x-run-if-true>
 389         <x-run-if-true value="${enable.ext41.themes}">
 390             <x-ant-call target="-slice-theme-directories"/>
 391         </x-run-if-true>
 392     </target>
 393
 394     <target name="-before-slice"/>
 395     <target name="-slice" depends="-slice-images"/>
 396     <target name="-after-slice"/>
 397
 398     <!--
 399     Refresh Individual Theme
 400     -->
 401     <target name="-before-refresh-theme"/>
 402     <target name="-refresh-theme">
 403         <if>
 404             <x-is-true value="${enable.ext41.themes}"/>
 405             <then>
 406                 <local name="theme.dir"/>
 407                 <property name="theme.dir" location="${app.theme.dir}/${args.themeName}"/>
 408                 <x-build-theme theme="${theme.dir}" buildsass="true"/>
 409                 <x-copy-resources/>
 410             </then>
 411         </if>
 412     </target>
 413     <target name="-after-refresh-theme"/>
 414 </project>