Page 1 of 2 12 LastLast
Results 1 to 25 of 40
Like Tree2Likes
  1. russnash's Avatar
    CrackBerry Master

    Posts
    1,428 Posts
    PIN
    PM me for it!
    Thread AuthorThread Author   #1  

    Default How to compile themes by hand

    When creating my theme Reflex, instead of sticking purely to theme builder and adding my own hand-coded SVG within it, I took the approach of writing my homescreen.svg completely from scratch and then compiling the theme by hand. Following this method is definitely more tedious and prone to mistakes, however, it does allow a lot more control over the home screen objects. For example, the cutoff GPS icon in 6.0 themes was not an issue and I was not limited to only being able to manipulate objects that theme builder adds an ID tag to in it's generated SVG. It also allows for much more efficient svg resulting in a faster, more fluid theme.

    I have been asked by some other theme builders to share the method used to do this, hence this thread. I should also add that I'm sure I'm not the only person who is using this method and don't consider it to be my discovery, however, I have had to learn quite a few things about the packaging of the theme files by trial and error and want to share these tips also.

    To break down the steps I used initially in building Reflex:

    1) I created everything except the home screen in Theme Builder in the usual manner, including the home screen banner as this is used on other screens such as the lock screen.

    2) After saving and naming the theme file, I removed delete permissions from the temp folder and exported an OTA version of the theme.

    3) From the windows temp folder, I located and copied the directory containing the theme files to my theme directory and named the folder 'source'.

    4) Again, from the temp folder, I located the xxxxxx.properties file and copied that into my newly created source folder and renamed it 'build.properties'.

    5) I opened up the 'build.properties' file in notepad and modified the .contentDir to point to my 'source' directory and the .outFileDir to point to where I wanted the compiled theme to be placed.

    Here's an example properties file:

    Code:
    ThemeBundler.applicationName=Reflex
    ThemeBundler.libraryName=com_plazmic_theme_Reflex
    ThemeBundler.targetOs=6.0.0
    ThemeBundler.targetDevice=9650
    ThemeBundler.contentDir=U:\\Themes\\Reflex\\OS6\\480x360\\source
    ThemeBundler.outFileDir=U:\\Themes\\Reflex\\OS6\\480x360\\jads
    ThemeBundler.exportAlx=false
    ThemeBundler.exportZip=false
    ThemeBundler.exportJad=true
    ThemeBundler.exportCso=false
    ThemeBundler.exportDebug=false
    ThemeBundler.exportThemeReader=false
    ThemeBundler.codFileName=com_plazmic_theme_Reflex.cod
    ThemeBundler.jadFileName=com_plazmic_theme_Reflex.jad
    ThemeBundler.rapcFileName=com_plazmic_theme_Reflex.rapc
    ThemeBundler.csoFileName=com_plazmic_theme_Reflex.cso
    ThemeBundler.debugFileName=com_plazmic_theme_Reflex.debug
    ThemeBundler.alxFileName=Reflex.alx
    ThemeBundler.zipFileName=Untitled.zip
    ThemeBundler.zipOverwriteBundle=true
    ThemeBundler.vendor=
    ThemeBundler.copyright=
    ThemeBundler.version=
    ThemeBundler.description=
    6) Next, I created a batch file in the source dir called 'build.bat' with the following contents:

    Code:
    @echo off
    "c:\Program Files\Research In Motion\BlackBerry Theme Studio 6.0\bin\svgc.exe" *.svg
    "c:\Program Files\Research In Motion\BlackBerry Theme Studio 6.0\bin\tbbundle.exe" build.properties
    pause
    7) After deleting the homescreen.svg from the source dir and writing my own I simply ran the build.bat to compile the theme into a jad and cod files. Note that you must watch the output of the batch file to ensure that your svg files compiled into pme files with no errors.

    The above process is actually quite straightforward.

    Here are some tips I've picked up while using this method:

    Making further Theme Builder changes after the fact

    You may want to make further changes to the initial theme builder work after the fact without going through the entire process again (especially if you did more than just editing / re-writing of a few svg files). You can bring over any changes like this:

    1) Load up Theme Builder and make the changes you require, then export the theme again with the delete permissions removed from the temp folder.

    2) From the temporary export directory copy the following files and paste them into your 'source' folder:

    theme.xml
    theme_manifest.mf
    theme_*.cbtf
    theme_*.png
    theme_*.xfont

    "*" will be the name of your theme file.

    3) If you modified anything on any of the following screens, you will need to also copy over the relevant svg as listed:

    activecallscreen.svg - Active call screen
    application-menu.svg - Application menu screen
    banner.svg - Application banner
    incomingcallscreen.svg - Incoming call screen
    lockscreen.svg - Lock screen

    4) Run your build.bat file again to recompile your theme.

    Can I use this with OS5.0 themes?

    Yes! Just make sure that you change the build.bat file to point to svgc.exe and tbbundle.exe in the 5.0 version of theme builder instead.

    Custom Thumbnails

    You can easily change the thumbnail image associated with your theme in the theme chooser screen and the dialog that pops up when a new theme is installed by creating your own thumbnail.png in the source directory. I used the same dimensions as Theme Builder for this file, which is 192x144 but I haven't experimented to see if different sizes will work.

    How do I use my own graphics in the SVG?

    If you use your own graphics, such as a dock background on your homescreen, just place the .png file in the source directory and refer to it by name in your svg, for example:

    Code:
    <image id="table"
    	x="0"
    	y="260"
    	width="480"
    	height="100"
    	 
    	xlink:href="table.png"/>
    How do I test in the simulator?

    Use the 'Load application or theme' menu option on the simulator and select all the .cod files to load the theme. You will need to 'reset' the simulator each time you want to load a new build.

    "Gotchas" to be aware of

    Don't try and rename your theme by editing the build files

    I tried this early on and caused myself a major headache when my testers tried to download the OTA version, they were getting weird errors about an invalid version number. If you want to rename your theme, rename the original theme builder .thm file, re-export it from theme builder and copy over the theme.xml and theme_manifest.mf, then remake your build.properties file from the newly exported version.

    Font sizes / styles wrong in your theme

    As I mentioned above, make sure that you *always* replace the files mentioned above when you make any changes in Theme Builder or you may end up with some messed up fonts in your theme.

    Files in your source directory

    This file list below is the entire contents of an exported 9650 OS6 theme, there are a few files from other device versions as I did manage to mix and match quite a few of them to lighten the load with creating each device version of Reflex. In this section I am going to try and build a list of the different files and their purpose:

    - theme.xml
    - theme_manifest.mf

    These two files are core to the theme, theme.xml seems to hold all the settings chosen within Theme Builder. The theme_manifest.mf file is important to include along with the theme.xml each time as without the correct one, the theme won't build properly. It contains a checksum hash against the theme.xml. I would love to be able to decode the theme.xml file, but it appears to be in binary format which makes the job much harder. Perhaps someone who is good at this kind of thing can help out here?

    - theme_Reflex-0.xfont
    - theme_Reflex-0.png
    - theme_Reflex-0.log
    - theme_Reflex-0.cbtf

    These sets of files are created for the custom fonts used in Theme Buidler, there is a utility in TB's bin dir called make_rim_bitmap_font.exe which creates them. So far I've had no issues creating these files and putting them into my source directories so I can reference them in my svg's.

    - osicon_hourglass.gif

    This is the animated gif file used for the hourglass.

    - activecallscreen.svg - Active call screen
    - activecallscreen.pme
    - application-menu.svg - App menu screen
    - application-menu.pme
    - banner.svg - App banner
    - banner.pme
    - homescreen.svg - Home screen
    - homescreen.pme
    - incomingcallscreen.svg - Incoming call screen
    - incomingcallscreen.pme
    - lockscreen.svg - Lock screen
    - lockscreen.pme

    SVG files with their accompanying pme's (compiled svg's via svgc.exe) for the different screens. Pretty straightforward stuff. You can edit these to your hearts content, just make sure that any custom fonts or graphics they reference are available in your source dir.

    - active_button.png
    - activecall_button.png
    - activecall_button_p~focus.png
    - disabled_highlight_button.png
    - DialogBoxBackground.png
    - MenuNormalBackground.png

    These are the button graphics and menu and dialog backgrounds from the controls section of TB.

    - appicon_background_portrait.png
    - ButtonHighlightBackground.png
    - ButtonNormalBackground.png
    - incomingcall_button_p~focus.png

    These are the button graphics used on the call screens. Storm and Torch naturally have a few more of these.

    - banner-app.png
    - banner-home.png

    Banner background graphics for app and homescreen banners.

    - groupboxBodyBackground.png
    - groupboxCaretBackground.png
    - groupboxTitleBackground.png

    Three graphics from the group box section in TB.

    - icon_move_underlay.png
    - icon_underlay.png
    - icon_underlay~focus.png

    These are the icon underlay and focus graphics from the app screen section in TB.

    - Applications.png
    - Applications~focus.png
    - com_plazmic_weblink.png
    - com_plazmic_weblink~focus.png
    - default_application.png
    - default_application~focus.png
    - folder.png
    - folder~focus.png
    - Games.png
    - Games~focus.png
    - IM.png
    - IM~focus.png
    - LockscreenLock.png
    - LockscreenLock-landscape.png
    - net_rim_bb_activation.Activation.png
    - net_rim_bb_activation.Activation~focus.png
    - net_rim_bb_addressbook_app.AddressBook.png
    - net_rim_bb_addressbook_app.AddressBook~focus.png
    - net_rim_bb_addressbook_app.Compose.png
    - net_rim_bb_addressbook_app.Compose~focus.png
    - net_rim_bb_app_center.ApplicationCenter.png
    - net_rim_bb_app_center.ApplicationCenter~focus.png
    - net_rim_bb_bb_feeds.png
    - net_rim_bb_bb_feeds~focus.png
    - net_rim_bb_browser_daemon.mds.private.png
    - net_rim_bb_browser_daemon.mds.private~focus.png
    - net_rim_bb_browser_daemon.mds.public.png
    - net_rim_bb_browser_daemon.mds.public.rim.png
    - net_rim_bb_browser_daemon.mds.public.rim~focus.png
    - net_rim_bb_browser_daemon.mds.public~focus.png
    - net_rim_bb_browser_daemon.png
    - net_rim_bb_browser_daemon.wap.png
    - net_rim_bb_browser_daemon.wap~focus.png
    - net_rim_bb_browser_daemon~focus.png
    - net_rim_bb_calendar_app.Calendar.png
    - net_rim_bb_calendar_app.Calendar~focus.png
    - net_rim_bb_camera.Camera.png
    - net_rim_bb_camera.Camera~focus.png
    - net_rim_bb_clock.png
    - net_rim_bb_clock~focus.png
    - net_rim_bb_file_explorer.Files.png
    - net_rim_bb_file_explorer.Files~focus.png
    - net_rim_bb_file_explorer.Media.png
    - net_rim_bb_file_explorer.Media~focus.png
    - net_rim_bb_file_explorer.Music.png
    - net_rim_bb_file_explorer.Music~focus.png
    - net_rim_bb_file_explorer.Pictures.png
    - net_rim_bb_file_explorer.Pictures~focus.png
    - net_rim_bb_file_explorer.Podcasts.png
    - net_rim_bb_file_explorer.Podcasts~focus.png
    - net_rim_bb_file_explorer.RingTones.png
    - net_rim_bb_file_explorer.RingTones~focus.png
    - net_rim_bb_file_explorer.Videos.png
    - net_rim_bb_file_explorer.Videos~focus.png
    - net_rim_bb_file_explorer.VoiceNotes.png
    - net_rim_bb_file_explorer.VoiceNotes~focus.png
    - net_rim_bb_help.Help.png
    - net_rim_bb_help.Help~focus.png
    - net_rim_bb_ldap_browser_pgp.png
    - net_rim_bb_ldap_browser_pgp~focus.png
    - net_rim_bb_ldap_browser_x509.png
    - net_rim_bb_ldap_browser_x509~focus.png
    - net_rim_bb_manage_connections.png
    - net_rim_bb_manage_connections~focus.png
    - net_rim_bb_maps.png
    - net_rim_bb_maps~focus.png
    - net_rim_bb_mc_app.png
    - net_rim_bb_mc_app~focus.png
    - net_rim_bb_memo_app.png
    - net_rim_bb_memo_app~focus.png
    - net_rim_bb_messaging_app.Messages.png
    - net_rim_bb_messaging_app.Messages.service.bes.png
    - net_rim_bb_messaging_app.Messages.service.bes~focu s.png
    - net_rim_bb_messaging_app.Messages.service.png
    - net_rim_bb_messaging_app.Messages.service~focus.pn g
    - net_rim_bb_messaging_app.Messages~focus.png
    - net_rim_bb_messaging_app.SavedMessages.png
    - net_rim_bb_messaging_app.SavedMessages~focus.png
    - net_rim_bb_messaging_app.sms_and_mms.png
    - net_rim_bb_messaging_app.sms_and_mms~focus.png
    - net_rim_bb_options_app.png
    - net_rim_bb_options_app~focus.png
    - net_rim_bb_passwordkeeper.net_rim_bb_passwordkeepe r.png
    - net_rim_bb_passwordkeeper.net_rim_bb_passwordkeepe r~focus.png
    - net_rim_bb_phone_app.png
    - net_rim_bb_phone_app~focus.png
    - net_rim_bb_profiles_app.default.png
    - net_rim_bb_profiles_app.default~focus.png
    - net_rim_bb_profiles_app.discreet.png
    - net_rim_bb_profiles_app.discreet~focus.png
    - net_rim_bb_profiles_app.loud.png
    - net_rim_bb_profiles_app.loud~focus.png
    - net_rim_bb_profiles_app.medium.png
    - net_rim_bb_profiles_app.medium~focus.png
    - net_rim_bb_profiles_app.off.png
    - net_rim_bb_profiles_app.off~focus.png
    - net_rim_bb_profiles_app.phoneonly.png
    - net_rim_bb_profiles_app.phoneonly~focus.png
    - net_rim_bb_profiles_app.png
    - net_rim_bb_profiles_app.quiet.png
    - net_rim_bb_profiles_app.quiet~focus.png
    - net_rim_bb_profiles_app~focus.png
    - net_rim_bb_qm_peer.BlackBerryMessenger.png
    - net_rim_bb_qm_peer.BlackBerryMessenger~focus.png
    - net_rim_bb_remindermanager.png
    - net_rim_bb_remindermanager~focus.png
    - net_rim_bb_ribbon_app.png
    - net_rim_bb_ribbon_app~focus.png
    - net_rim_bb_standardcalculator_app.Calculator.png
    - net_rim_bb_standardcalculator_app~focus.png
    - net_rim_bb_task_app.png
    - net_rim_bb_task_app~focus.png
    - net_rim_bb_toolkit.png
    - net_rim_bb_toolkit~focus.png
    - net_rim_bb_videorecorder.VideoRecorder.png
    - net_rim_bb_videorecorder.VideoRecorder~focus.png
    - net_rim_bb_voicenotesrecorder.VoiceNotesRecorder.p ng
    - net_rim_bb_voicenotesrecorder.VoiceNotesRecorder~f ocus.png
    - net_rim_bb_vvm.png
    - net_rim_bb_vvm~focus.png
    - net_rim_device_apps_games_brickbreaker.BrickBreake r.png
    - net_rim_device_apps_games_brickbreaker.BrickBreake r~focus.png
    - net_rim_device_apps_games_wordmole.png
    - net_rim_device_apps_games_wordmole~focus.png
    - net_rim_LockSystem.png
    - net_rim_LockSystem~focus.png
    - net_rim_PowerOff.png
    - net_rim_PowerOff~focus.png
    - net_rim_Ribbon_Profile-icons32x32.png
    - net_rim_SIMToolKit.png
    - net_rim_SIMToolKit~focus.png
    - net_rim_vad.png
    - net_rim_vad~focus.png
    - up_folder.png
    - up_folder~focus.png

    These are the icons and their focus variants from the app screen section in TB. You can pretty much just drop these into the source dir, although the usual sizing issues are still relevant.

    - new_overlay.png

    This is the overlay used for icons that have new unread items.

    - profile_focus.png

    Focus graphic used for the profiles icon on the homescreen.

    - SearchFieldBackground.png

    Search field background graphic from the controls section in TB.

    - SvgBackgroundWallpaper.png

    Main wallpaper from the home screen.

    - thumbnail.png

    Thumbnail image used for the theme in the theme chooser list and in the popup when the BB detects a new theme was loaded.

    - rapc-filelist.txt
    - com_plazmic_theme_Reflex.rapc

    These are files generated by rapc, the java cod file compiler. Not of much use that I've found so far.

    - today_focus0.png

    Focus highlight graphic for your today displays, although you can use any name you like and just adjust the SVG accordingly.

    - TitleBarBackground.png
    - vertical_divider.png
    - border_gcm.png
    - DateSeparatorBackground.png
    - gcm~focus.png
    - horizontal_divider.png

    I'll get to these later.

    ---

    As I've already mentioned, I'm sure I'm not the first person to work out how to use this method, but hopefully by sharing we can do even more cool things past those already discovered in the hand coded svg thread.

    I should also point out that while I went ahead and re-wrote my entire homescreen.svg from scratch for Reflex, you can always just make changes to the homescreen.svg exported by Theme Builder and still initially create your homescreen in TB.

    Additionally, you can play with the other .svg files also and make some unique looking themes. I did play around a lot with the ribbon manager x-object on the app screen, but found it to be very intolerable to changes.

    If I can think of anything else I missed or if any relevant questions come up I'll update this post. Hopefully, everyone can get something useful out of it.

    Russ.
    Last edited by russnash; 04-28-2011 at 10:35 PM.
    "If anyone would come after me, let him deny himself and take up his cross and follow me" - Matthew 16:24

    SpeedNotes - A fast and convenient note taking application

    VitalSigns - Customizable Style for your BlackBerry 10 Device!

    Visit Gray Matter Apps on the web: http://www.graymatterapps.com/
    Thanked by 20:
    + Show/Hide list of the thanked
    9of13 (04-29-2011),  ahbengish (04-29-2011),  b6836ksf (05-01-2011),  bluemax413 (04-01-2012),  dcburke789 (04-22-2011),  DeathDown (02-08-2012),  Justam (04-20-2011),  jxlangtucr (11-14-2012),  miz_pimp (05-22-2011),  PapaMag (12-12-2011),  phasmida (07-24-2012),  ppdragon (09-11-2012),  Raestloz (04-22-2011),  ruebyi (06-17-2011),  SCrid2000 (12-10-2011),  skilligans_island (08-26-2011),  StaticFX (04-30-2011),  wu-wei (04-20-2011),  xRuhRohx (09-16-2011) 
    xRuhRohx likes this.
  2. wu-wei's Avatar
    CrackBerry Genius

    Posts
    3,881 Posts
    Global Posts
    3,886 Global Posts
    PIN
    Pin: her: down: on: a: photograph: album: I: am: not: worried: I: am: not: overly: concerned:
    #2  

    Default

    Very good info...thanks so much for sharing!
  3. Justam's Avatar
    CrackBerry Abuser

    Posts
    438 Posts
    PIN
    hrm...
    #3  

    Default Awesome!!

    Thanks for taking the time to write this up!! I am sure a lot of people are going to appreciate this!

    Thanks again!
  4. sabisgeek's Avatar
    CrackBerry Addict

    Posts
    457 Posts
    Global Posts
    458 Global Posts
    #4  

    Default

    Woah. Thanks for taking the time to write this! Will try this soon!
    Last edited by sabisgeek; 04-20-2011 at 07:03 PM.
  5. b6836ksf's Avatar
    CrackBerry Addict

    Posts
    618 Posts
    #5  

    Default

    wow this is great, thanks to write this
  6. widedev's Avatar
    CrackBerry Newbie

    Posts
    3 Posts
    #6  

    Default

    good, great information, will try it now.. thanks
  7. russnash's Avatar
    CrackBerry Master

    Posts
    1,428 Posts
    PIN
    PM me for it!
    Thread AuthorThread Author   #7  

    Default

    I added a section to the initial post to go over the files that are in the "source" directory after you export the theme. I'll update it as more info comes to light.
    "If anyone would come after me, let him deny himself and take up his cross and follow me" - Matthew 16:24

    SpeedNotes - A fast and convenient note taking application

    VitalSigns - Customizable Style for your BlackBerry 10 Device!

    Visit Gray Matter Apps on the web: http://www.graymatterapps.com/
  8. JinmoK's Avatar
    Banned

    Posts
    24 Posts
    #8  

    Default

    Thanks so much
  9. megacn's Avatar
    CrackBerry Newbie

    Posts
    7 Posts
    #9  

    Default

    I tried to create "initial" theme files by changing the TEMP directory permissions but without success. There are only some log files now - nothing more. What is worng?!
  10. THE BIG KAHUNA's Avatar
    CrackBerry User

    Posts
    46 Posts
    PIN
    22E914D0
    #10  

    Default

    yea thanks for sharing this, I my self is a new themer and i only have a few themes behind my name but stil that is awesome info thanks.
    my next theme wil be with that in mind
    Name: THE BIG KAHUNA
    Dev Name: HP Sonic
    Dev Type: Theme's
  11. THE BIG KAHUNA's Avatar
    CrackBerry User

    Posts
    46 Posts
    PIN
    22E914D0
    #11  

    Default

    yea thanks for sharing this, I my self is a new themer and i only have a few themes behind my name but stil that is awesome info thanks.
    my next theme wil be with that in mind
    Name: THE BIG KAHUNA
    Dev Name: HP Sonic
    Dev Type: Theme's
  12. russnash's Avatar
    CrackBerry Master

    Posts
    1,428 Posts
    PIN
    PM me for it!
    Thread AuthorThread Author   #12  

    Default

    Quote Originally Posted by megacn View Post
    I tried to create "initial" theme files by changing the TEMP directory permissions but without success. There are only some log files now - nothing more. What is worng?!
    Which windows OS are you using and which permissions did you change?

    Posted from my CrackBerry at wapforums.crackberry.com
  13. megacn's Avatar
    CrackBerry Newbie

    Posts
    7 Posts
    #13  

    Default

    Thanks for your reply! But meanwhile I was able to get the files (one file and one directory).

    Permissions for folder temp (win7):
    - "delete" and "delete files and delectory" NOT allowed for user logged on
    - "delete" and "delete files and delectory" NOT allowed for administrator

    Output-files in temp folder:
    - the names are beginning with pz_*; e.g. pz_6uztW
    - the file and directory have different names; e.g. pz_6uztW and pz_8zU89

    Compiling is working well!
  14. russnash's Avatar
    CrackBerry Master

    Posts
    1,428 Posts
    PIN
    PM me for it!
    Thread AuthorThread Author   #14  

    Default

    Great! Glad to hear you got it sorted.

    Russ.

    Posted from my CrackBerry at wapforums.crackberry.com
  15. StaticFX's Avatar
    CrackBerry Genius

    Posts
    2,309 Posts
    Global Posts
    2,708 Global Posts
    #15  

    Default

    has anyone tried this with the newest TB?
    I am seeing the tag HC- added to all of my ID's...
    doing a hand compile, the today items I hand coded do not work anymore, but work fine if I do not alter the file?
  16. StaticFX's Avatar
    CrackBerry Genius

    Posts
    2,309 Posts
    Global Posts
    2,708 Global Posts
    #16  

    Default

    no sorry... its something with the landscape HS thats interfering..
  17. sunnylovesalman's Avatar
    Banned

    Posts
    223 Posts
    PIN
    21180982
    #17  

    Default Pls Help Someone

    Quote Originally Posted by russnash View Post
    When creating my theme Reflex, instead of sticking purely to theme builder and adding my own hand-coded SVG within it, I took the approach of writing my homescreen.svg completely from scratch and then compiling the theme by hand. Following this method is definitely more tedious and prone to mistakes, however, it does allow a lot more control over the home screen objects. For example, the cutoff GPS icon in 6.0 themes was not an issue and I was not limited to only being able to manipulate objects that theme builder adds an ID tag to in it's generated SVG. It also allows for much more efficient svg resulting in a faster, more fluid theme.

    I have been asked by some other theme builders to share the method used to do this, hence this thread. I should also add that I'm sure I'm not the only person who is using this method and don't consider it to be my discovery, however, I have had to learn quite a few things about the packaging of the theme files by trial and error and want to share these tips also.

    To break down the steps I used initially in building Reflex:

    1) I created everything except the home screen in Theme Builder in the usual manner, including the home screen banner as this is used on other screens such as the lock screen.

    2) After saving and naming the theme file, I removed delete permissions from the temp folder and exported an OTA version of the theme.

    3) From the windows temp folder, I located and copied the directory containing the theme files to my theme directory and named the folder 'source'.

    4) Again, from the temp folder, I located the xxxxxx.properties file and copied that into my newly created source folder and renamed it 'build.properties'.

    5) I opened up the 'build.properties' file in notepad and modified the .contentDir to point to my 'source' directory and the .outFileDir to point to where I wanted the compiled theme to be placed.

    Here's an example properties file:

    Code:
    ThemeBundler.applicationName=Reflex
    ThemeBundler.libraryName=com_plazmic_theme_Reflex
    ThemeBundler.targetOs=6.0.0
    ThemeBundler.targetDevice=9650
    ThemeBundler.contentDir=U:\\Themes\\Reflex\\OS6\\480x360\\source
    ThemeBundler.outFileDir=U:\\Themes\\Reflex\\OS6\\480x360\\jads
    ThemeBundler.exportAlx=false
    ThemeBundler.exportZip=false
    ThemeBundler.exportJad=true
    ThemeBundler.exportCso=false
    ThemeBundler.exportDebug=false
    ThemeBundler.exportThemeReader=false
    ThemeBundler.codFileName=com_plazmic_theme_Reflex.cod
    ThemeBundler.jadFileName=com_plazmic_theme_Reflex.jad
    ThemeBundler.rapcFileName=com_plazmic_theme_Reflex.rapc
    ThemeBundler.csoFileName=com_plazmic_theme_Reflex.cso
    ThemeBundler.debugFileName=com_plazmic_theme_Reflex.debug
    ThemeBundler.alxFileName=Reflex.alx
    ThemeBundler.zipFileName=Untitled.zip
    ThemeBundler.zipOverwriteBundle=true
    ThemeBundler.vendor=
    ThemeBundler.copyright=
    ThemeBundler.version=
    ThemeBundler.description=
    6) Next, I created a batch file in the source dir called 'build.bat' with the following contents:

    Code:
    @echo off
    "c:\Program Files\Research In Motion\BlackBerry Theme Studio 6.0\bin\svgc.exe" *.svg
    "c:\Program Files\Research In Motion\BlackBerry Theme Studio 6.0\bin\tbbundle.exe" build.properties
    pause
    7) After deleting the homescreen.svg from the source dir and writing my own I simply ran the build.bat to compile the theme into a jad and cod files. Note that you must watch the output of the batch file to ensure that your svg files compiled into pme files with no errors.

    The above process is actually quite straightforward.

    Here are some tips I've picked up while using this method:

    Making further Theme Builder changes after the fact

    You may want to make further changes to the initial theme builder work after the fact without going through the entire process again (especially if you did more than just editing / re-writing of a few svg files). You can bring over any changes like this:

    1) Load up Theme Builder and make the changes you require, then export the theme again with the delete permissions removed from the temp folder.

    2) From the temporary export directory copy the following files and paste them into your 'source' folder:

    theme.xml
    theme_manifest.mf
    theme_*.cbtf
    theme_*.png
    theme_*.xfont

    "*" will be the name of your theme file.

    3) If you modified anything on any of the following screens, you will need to also copy over the relevant svg as listed:

    activecallscreen.svg - Active call screen
    application-menu.svg - Application menu screen
    banner.svg - Application banner
    incomingcallscreen.svg - Incoming call screen
    lockscreen.svg - Lock screen

    4) Run your build.bat file again to recompile your theme.

    Can I use this with OS5.0 themes?

    Yes! Just make sure that you change the build.bat file to point to svgc.exe and tbbundle.exe in the 5.0 version of theme builder instead.

    Custom Thumbnails

    You can easily change the thumbnail image associated with your theme in the theme chooser screen and the dialog that pops up when a new theme is installed by creating your own thumbnail.png in the source directory. I used the same dimensions as Theme Builder for this file, which is 192x144 but I haven't experimented to see if different sizes will work.

    How do I use my own graphics in the SVG?

    If you use your own graphics, such as a dock background on your homescreen, just place the .png file in the source directory and refer to it by name in your svg, for example:

    Code:
    <image id="table"
    	x="0"
    	y="260"
    	width="480"
    	height="100"
    	 
    	xlink:href="table.png"/>
    How do I test in the simulator?

    Use the 'Load application or theme' menu option on the simulator and select all the .cod files to load the theme. You will need to 'reset' the simulator each time you want to load a new build.

    "Gotchas" to be aware of

    Don't try and rename your theme by editing the build files

    I tried this early on and caused myself a major headache when my testers tried to download the OTA version, they were getting weird errors about an invalid version number. If you want to rename your theme, rename the original theme builder .thm file, re-export it from theme builder and copy over the theme.xml and theme_manifest.mf, then remake your build.properties file from the newly exported version.

    Font sizes / styles wrong in your theme

    As I mentioned above, make sure that you *always* replace the files mentioned above when you make any changes in Theme Builder or you may end up with some messed up fonts in your theme.

    Files in your source directory

    This file list below is the entire contents of an exported 9650 OS6 theme, there are a few files from other device versions as I did manage to mix and match quite a few of them to lighten the load with creating each device version of Reflex. In this section I am going to try and build a list of the different files and their purpose:

    - theme.xml
    - theme_manifest.mf

    These two files are core to the theme, theme.xml seems to hold all the settings chosen within Theme Builder. The theme_manifest.mf file is important to include along with the theme.xml each time as without the correct one, the theme won't build properly. It contains a checksum hash against the theme.xml. I would love to be able to decode the theme.xml file, but it appears to be in binary format which makes the job much harder. Perhaps someone who is good at this kind of thing can help out here?

    - theme_Reflex-0.xfont
    - theme_Reflex-0.png
    - theme_Reflex-0.log
    - theme_Reflex-0.cbtf

    These sets of files are created for the custom fonts used in Theme Buidler, there is a utility in TB's bin dir called make_rim_bitmap_font.exe which creates them. So far I've had no issues creating these files and putting them into my source directories so I can reference them in my svg's.

    - osicon_hourglass.gif

    This is the animated gif file used for the hourglass.

    - activecallscreen.svg - Active call screen
    - activecallscreen.pme
    - application-menu.svg - App menu screen
    - application-menu.pme
    - banner.svg - App banner
    - banner.pme
    - homescreen.svg - Home screen
    - homescreen.pme
    - incomingcallscreen.svg - Incoming call screen
    - incomingcallscreen.pme
    - lockscreen.svg - Lock screen
    - lockscreen.pme

    SVG files with their accompanying pme's (compiled svg's via svgc.exe) for the different screens. Pretty straightforward stuff. You can edit these to your hearts content, just make sure that any custom fonts or graphics they reference are available in your source dir.

    - active_button.png
    - activecall_button.png
    - activecall_button_p~focus.png
    - disabled_highlight_button.png
    - DialogBoxBackground.png
    - MenuNormalBackground.png

    These are the button graphics and menu and dialog backgrounds from the controls section of TB.

    - appicon_background_portrait.png
    - ButtonHighlightBackground.png
    - ButtonNormalBackground.png
    - incomingcall_button_p~focus.png

    These are the button graphics used on the call screens. Storm and Torch naturally have a few more of these.

    - banner-app.png
    - banner-home.png

    Banner background graphics for app and homescreen banners.

    - groupboxBodyBackground.png
    - groupboxCaretBackground.png
    - groupboxTitleBackground.png

    Three graphics from the group box section in TB.

    - icon_move_underlay.png
    - icon_underlay.png
    - icon_underlay~focus.png

    These are the icon underlay and focus graphics from the app screen section in TB.

    - Applications.png
    - Applications~focus.png
    - com_plazmic_weblink.png
    - com_plazmic_weblink~focus.png
    - default_application.png
    - default_application~focus.png
    - folder.png
    - folder~focus.png
    - Games.png
    - Games~focus.png
    - IM.png
    - IM~focus.png
    - LockscreenLock.png
    - LockscreenLock-landscape.png
    - net_rim_bb_activation.Activation.png
    - net_rim_bb_activation.Activation~focus.png
    - net_rim_bb_addressbook_app.AddressBook.png
    - net_rim_bb_addressbook_app.AddressBook~focus.png
    - net_rim_bb_addressbook_app.Compose.png
    - net_rim_bb_addressbook_app.Compose~focus.png
    - net_rim_bb_app_center.ApplicationCenter.png
    - net_rim_bb_app_center.ApplicationCenter~focus.png
    - net_rim_bb_bb_feeds.png
    - net_rim_bb_bb_feeds~focus.png
    - net_rim_bb_browser_daemon.mds.private.png
    - net_rim_bb_browser_daemon.mds.private~focus.png
    - net_rim_bb_browser_daemon.mds.public.png
    - net_rim_bb_browser_daemon.mds.public.rim.png
    - net_rim_bb_browser_daemon.mds.public.rim~focus.png
    - net_rim_bb_browser_daemon.mds.public~focus.png
    - net_rim_bb_browser_daemon.png
    - net_rim_bb_browser_daemon.wap.png
    - net_rim_bb_browser_daemon.wap~focus.png
    - net_rim_bb_browser_daemon~focus.png
    - net_rim_bb_calendar_app.Calendar.png
    - net_rim_bb_calendar_app.Calendar~focus.png
    - net_rim_bb_camera.Camera.png
    - net_rim_bb_camera.Camera~focus.png
    - net_rim_bb_clock.png
    - net_rim_bb_clock~focus.png
    - net_rim_bb_file_explorer.Files.png
    - net_rim_bb_file_explorer.Files~focus.png
    - net_rim_bb_file_explorer.Media.png
    - net_rim_bb_file_explorer.Media~focus.png
    - net_rim_bb_file_explorer.Music.png
    - net_rim_bb_file_explorer.Music~focus.png
    - net_rim_bb_file_explorer.Pictures.png
    - net_rim_bb_file_explorer.Pictures~focus.png
    - net_rim_bb_file_explorer.Podcasts.png
    - net_rim_bb_file_explorer.Podcasts~focus.png
    - net_rim_bb_file_explorer.RingTones.png
    - net_rim_bb_file_explorer.RingTones~focus.png
    - net_rim_bb_file_explorer.Videos.png
    - net_rim_bb_file_explorer.Videos~focus.png
    - net_rim_bb_file_explorer.VoiceNotes.png
    - net_rim_bb_file_explorer.VoiceNotes~focus.png
    - net_rim_bb_help.Help.png
    - net_rim_bb_help.Help~focus.png
    - net_rim_bb_ldap_browser_pgp.png
    - net_rim_bb_ldap_browser_pgp~focus.png
    - net_rim_bb_ldap_browser_x509.png
    - net_rim_bb_ldap_browser_x509~focus.png
    - net_rim_bb_manage_connections.png
    - net_rim_bb_manage_connections~focus.png
    - net_rim_bb_maps.png
    - net_rim_bb_maps~focus.png
    - net_rim_bb_mc_app.png
    - net_rim_bb_mc_app~focus.png
    - net_rim_bb_memo_app.png
    - net_rim_bb_memo_app~focus.png
    - net_rim_bb_messaging_app.Messages.png
    - net_rim_bb_messaging_app.Messages.service.bes.png
    - net_rim_bb_messaging_app.Messages.service.bes~focu s.png
    - net_rim_bb_messaging_app.Messages.service.png
    - net_rim_bb_messaging_app.Messages.service~focus.pn g
    - net_rim_bb_messaging_app.Messages~focus.png
    - net_rim_bb_messaging_app.SavedMessages.png
    - net_rim_bb_messaging_app.SavedMessages~focus.png
    - net_rim_bb_messaging_app.sms_and_mms.png
    - net_rim_bb_messaging_app.sms_and_mms~focus.png
    - net_rim_bb_options_app.png
    - net_rim_bb_options_app~focus.png
    - net_rim_bb_passwordkeeper.net_rim_bb_passwordkeepe r.png
    - net_rim_bb_passwordkeeper.net_rim_bb_passwordkeepe r~focus.png
    - net_rim_bb_phone_app.png
    - net_rim_bb_phone_app~focus.png
    - net_rim_bb_profiles_app.default.png
    - net_rim_bb_profiles_app.default~focus.png
    - net_rim_bb_profiles_app.discreet.png
    - net_rim_bb_profiles_app.discreet~focus.png
    - net_rim_bb_profiles_app.loud.png
    - net_rim_bb_profiles_app.loud~focus.png
    - net_rim_bb_profiles_app.medium.png
    - net_rim_bb_profiles_app.medium~focus.png
    - net_rim_bb_profiles_app.off.png
    - net_rim_bb_profiles_app.off~focus.png
    - net_rim_bb_profiles_app.phoneonly.png
    - net_rim_bb_profiles_app.phoneonly~focus.png
    - net_rim_bb_profiles_app.png
    - net_rim_bb_profiles_app.quiet.png
    - net_rim_bb_profiles_app.quiet~focus.png
    - net_rim_bb_profiles_app~focus.png
    - net_rim_bb_qm_peer.BlackBerryMessenger.png
    - net_rim_bb_qm_peer.BlackBerryMessenger~focus.png
    - net_rim_bb_remindermanager.png
    - net_rim_bb_remindermanager~focus.png
    - net_rim_bb_ribbon_app.png
    - net_rim_bb_ribbon_app~focus.png
    - net_rim_bb_standardcalculator_app.Calculator.png
    - net_rim_bb_standardcalculator_app~focus.png
    - net_rim_bb_task_app.png
    - net_rim_bb_task_app~focus.png
    - net_rim_bb_toolkit.png
    - net_rim_bb_toolkit~focus.png
    - net_rim_bb_videorecorder.VideoRecorder.png
    - net_rim_bb_videorecorder.VideoRecorder~focus.png
    - net_rim_bb_voicenotesrecorder.VoiceNotesRecorder.p ng
    - net_rim_bb_voicenotesrecorder.VoiceNotesRecorder~f ocus.png
    - net_rim_bb_vvm.png
    - net_rim_bb_vvm~focus.png
    - net_rim_device_apps_games_brickbreaker.BrickBreake r.png
    - net_rim_device_apps_games_brickbreaker.BrickBreake r~focus.png
    - net_rim_device_apps_games_wordmole.png
    - net_rim_device_apps_games_wordmole~focus.png
    - net_rim_LockSystem.png
    - net_rim_LockSystem~focus.png
    - net_rim_PowerOff.png
    - net_rim_PowerOff~focus.png
    - net_rim_Ribbon_Profile-icons32x32.png
    - net_rim_SIMToolKit.png
    - net_rim_SIMToolKit~focus.png
    - net_rim_vad.png
    - net_rim_vad~focus.png
    - up_folder.png
    - up_folder~focus.png

    These are the icons and their focus variants from the app screen section in TB. You can pretty much just drop these into the source dir, although the usual sizing issues are still relevant.

    - new_overlay.png

    This is the overlay used for icons that have new unread items.

    - profile_focus.png

    Focus graphic used for the profiles icon on the homescreen.

    - SearchFieldBackground.png

    Search field background graphic from the controls section in TB.

    - SvgBackgroundWallpaper.png

    Main wallpaper from the home screen.

    - thumbnail.png

    Thumbnail image used for the theme in the theme chooser list and in the popup when the BB detects a new theme was loaded.

    - rapc-filelist.txt
    - com_plazmic_theme_Reflex.rapc

    These are files generated by rapc, the java cod file compiler. Not of much use that I've found so far.

    - today_focus0.png

    Focus highlight graphic for your today displays, although you can use any name you like and just adjust the SVG accordingly.

    - TitleBarBackground.png
    - vertical_divider.png
    - border_gcm.png
    - DateSeparatorBackground.png
    - gcm~focus.png
    - horizontal_divider.png

    I'll get to these later.

    ---

    As I've already mentioned, I'm sure I'm not the first person to work out how to use this method, but hopefully by sharing we can do even more cool things past those already discovered in the hand coded svg thread.

    I should also point out that while I went ahead and re-wrote my entire homescreen.svg from scratch for Reflex, you can always just make changes to the homescreen.svg exported by Theme Builder and still initially create your homescreen in TB.

    Additionally, you can play with the other .svg files also and make some unique looking themes. I did play around a lot with the ribbon manager x-object on the app screen, but found it to be very intolerable to changes.

    If I can think of anything else I missed or if any relevant questions come up I'll update this post. Hopefully, everyone can get something useful out of it.

    Russ.


    How do I disbale the temp folder in Windows XP SP3?????????
    I find the temp folder under Documents and Settings./ Local Settings/Temp.....
    but when clicked on it , it does not give me options to go for advanced options under security tab?

    How to do it in Windows XP?
  18. smurfie604's Avatar
    CrackBerry Abuser

    Posts
    264 Posts
    PIN
    PM ME
    #18  
  19. sunnylovesalman's Avatar
    Banned

    Posts
    223 Posts
    PIN
    21180982
    #19  

    Default

    I did that successfully friend and results are in the Torch thread.
  20. Jaded04's Avatar
    CrackBerry User

    Posts
    95 Posts
    #20  

    Default

    When using this method to hand compile I am getting 3 errors for my homescreen.svg.

    Code:
    Error: A parse error has occurred at line 11 column 62 (Attribute "hotspot-wrap"
     must be declared for element type "svg".).
    Error: A parse error has occurred at line 11 column 62 (Attribute "xmlns:xsi" mu
    st be declared for element type "svg".).
    Error: A parse error has occurred at line 11 column 62 (Attribute "xmlns:pz" mus
    t be declared for element type "svg".).
    When I export using theme builder I dont get any errors, but when I manually compile the theme contents with my own altered homescreen svg I get those errors. The top of my svg which would contain those lines is:

    Code:
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
    <svg width="360"
          height="480"
          hotspot-wrap="false"
          version="1.1"
          baseProfile="tiny"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xmlns:pz="http://www.plazmic.com/plazmic_svgt_extents">
    I also get a ton of warnings that are all similar to:

    Code:
    Warning: Encountered a DOCTYPE with public ID "-//W3C//DTD SVG 1.1 Tiny//EN" and
     system ID "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd" expecting a D
    OCTYPE URI "http://www.plazmic.com/dtd/<version>/svg.dtd", where the latest vers
    ion is 1_0.
    Warning: Encountered a DOCTYPE with public ID "-//W3C//ENTITIES SVG 1.1 Modular
    Framework//EN" and system ID "http://www.w3.org/Graphics/SVG/1.1/DTD/svg-framewo
    rk.mod" expecting a DOCTYPE URI "http://www.plazmic.com/dtd/<version>/svg.dtd",
    where the latest version is 1_0.
    Warning: Encountered a DOCTYPE with public ID "-//W3C//ENTITIES SVG 1.1 Datatype
    s//EN" and system ID "http://www.w3.org/Graphics/SVG/1.1/DTD/svg-datatypes.mod"
    expecting a DOCTYPE URI "http://www.plazmic.com/dtd/<version>/svg.dtd", where th
    e latest version is 1_0.
    
    ...etc
    ...but only those 3 errors. Anyone know what the issue is?

    thx
    Jaded04
  21. StaticFX's Avatar
    CrackBerry Genius

    Posts
    2,309 Posts
    Global Posts
    2,708 Global Posts
    #21  

    Default

    get rid of the doctype line
  22. Jaded04's Avatar
    CrackBerry User

    Posts
    95 Posts
    #22  

    Default

    Thx, got rid of that line and the warnings and errors went away, but I was getting new errors about

    Code:
    "The prefix "xlink" for attribute "xlink:href" associated with an element type "image" is not bound."
    so I figured that I need to have a preserveAspectRatio comment in the header. After searching around I found a few sample headers with it in there, and the errors all went away and I was able to compile the cod, but when loaded into the sim, my homescreen animation wont animate. I tried removing some elements out of the header that seemed redundant, and every try it would compile without errors, but still it wont animate.

    Basically my code is like this:

    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xsi:schemaLocation="http://www.w3.org/2000/svg http://www.plazmic.com/svg/schema/svg.xsd" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
    version="1.2" baseProfile="tiny" xmlns:xforms="http://www.w3.org/2002/xforms" 
    xmlns:pz="http://www.plazmic.com/plazmic_extents" id="Theme" xml:space="default" width="360" height="480" preserveAspectRatio="xMinYMin meet"> 
      <image id="hs_image_110"
            x="0"
            y="0"
            width="360"
            height="480"
            display="none"
            xlink:href="hs_image_110.png"/>
      <image id="hs_image_111"
            x="0"
            y="0"
            width="360"
            height="480"
            display="none"
            xlink:href="hs_image_111.png"/>
      <image id="hs_image_112"
            x="0"
            y="0"
            width="360"
            height="480"
            display="none"
            xlink:href="hs_image_112.png"/>
    
    ...etc
    
    <animate id="hs_image_110_ani-display"
            xlink:href="#hs_image_110"
            attributeName="display"
            values="inline;none;none"
            keyTimes="0;0.009;1"
            dur="10900ms"
            repeatCount="indefinite"/>
      <animate id="hs_image_111_ani-display"
            xlink:href="#hs_image_111"
            attributeName="display"
            values="none;inline;none;none"
            keyTimes="0;0.009;0.018;1"
            dur="10900ms"
            repeatCount="indefinite"/>
      <animate id="hs_image_112_ani-display"
            xlink:href="#hs_image_112"
            attributeName="display"
            values="none;inline;none;none"
            keyTimes="0;0.018;0.027;1"
            dur="10900ms"
            repeatCount="indefinite"/>
    
    ...etc
    
    </svg>
    Simple enough code, just identifying the images, then setting the display time/length for each. I dont know if Im supposed to have particular elements in the header for an animated homescreen or if Im making some kind of syntax error.

    Its odd how I could import the svg into TB and it would run the animation, but when trying to manually compile it the animation wont run. TB must have been fixing my errors
  23. Jaded04's Avatar
    CrackBerry User

    Posts
    95 Posts
    #23  

    Default

    One thing to mention about this method of extractting the svgs...when you change the permissions on the temp folder, make sure to change it back...

    When you change the permissions it will add a second deny permission for the altered user (at least in win7 it does). So if you change the SYSTEM user, and deny the 2 delete options, it creates a 2nd SYSTEM user with those altered permissions. You will have one that says allow, and one that says deny. When i first did this, I simply removed the 2nd 'deny' user and thought all was good...until I could no longer open up photoshop. I would get a permissions/scratch disk error and it wouldnt open. So removing the 'deny' user sets would not reset it back the way it was. You have to remove all the 'denies' you created, plus go into each original and recheck the allow check boxes for the 2 delete permissions.
  24. skilligans_island's Avatar
    CrackBerry User

    Posts
    18 Posts
    #24  

    Default

    Has anyone experienced a big jump in cod files after they edited the svg and ran the .bat file?

    All i did was add two fonts to the incoming call screen and a few images and when i ran the bat file, i ended up with 80 or so cod files. I always optimize my images so i'm not sure what's happening.


    *edit - Seems i should have listened to the advice given, lol. I didn't clear out the temp files after i exported the theme via TS and it must have caused a bunch of problems and really made my theme size go wack.

    On another observation - anyone else notice some of their cod files are empty after a .bat compile - as in zero kb?
    Last edited by skilligans_island; 08-26-2011 at 12:19 PM.
  25. StaticFX's Avatar
    CrackBerry Genius

    Posts
    2,309 Posts
    Global Posts
    2,708 Global Posts
    #25  

    Default

    no.. i have not seen that.
Page 1 of 2 12 LastLast

Posting Permissions