MDT wizard : Give a better look to the WelcomeWiz_Choice.xml
https://www.systanddeploy.com/2014/09/mdt-wizard-give-better-look-to_19.html
This screen, called "Welcomewiz_choice.xml", looks like, by default, as below :
 |
| Default WelcomeWiz_Choice.xml |
In this example I will organize this page to give it a metro look.
I use same functions and added two other :
- Battery status: Check if computer is plugged in or not
- Shutdown button
|
| WelcomeWiz_Choice.xml after relook |
 |
| If computer is running on battery |
 |
| If computer is plugged in |
If you want to modify a wizard 3 files have to be modified:
- Wizard.css: for page structure, color and police
- Your_page.xml: for display
- Your_page.vbs: actions on your page
In this example, the 3 files below have been modied:
- Welcomewiz_choice.xml
- Welcomewiz_choice.vbs
- Wizard.css
Let's start by organizing the page structure to determine where each information will be displayed.
You can organize this page as you want using CSS and DIV.
It means create your strucure using the CSS file, and integrate it using the XML file.
See below some links to understand :
http://line25.com/tutorials/getting-started-with-css-a-practical-exercise
http://thoughtsandideas.wordpress.com/2010/07/15/introduction-to-div-based-layout/
http://www.subcide.com/articles/creating-a-css-layout-from-scratch/P2/
2 / How to use this example ?
I choose to organize the page in 2 parts, it means 2 div and so 2 CSS classes, called as below :
- Welcome_Left: Left part
- Welcome_Right: Right part
Then fill your divs with the expected content.
a) How to manage the Wizard.css file .
Page structure
The page is organized in 2 parts (Left & Right). There are 2 CSS classes, Welcome_Left and Welcome_Right.
Manage the text
There are 2 CSS classes, intitule_welcome (for the Big title) and infos_welcome (for the below text.
b) How to manage the xml ?
How the page is organized ?
Add an action for a button
Create a function with the same name as in the "onClick" field of the button.
For an example, as you can see above, the button shutdown use the function "Shutdown" (onclick="Shutdown").
The Shutdown function is below :
How to add an action when the page open ?
If you want to load a function when the page loads, you have to add an initialization step.
For an example, I have created a function "Battery_Check" which checks the battery status and displays different button and text depending of the status.
To launch it when the page load I have add the below initialization in the xml file.
How to get the script ?
The page is organized in 2 parts (Left & Right). There are 2 CSS classes, Welcome_Left and Welcome_Right.
Manage the text
There are 2 CSS classes, intitule_welcome (for the Big title) and infos_welcome (for the below text.
b) How to manage the xml ?
How the page is organized ?
As mentioned above, the xml works as an HTML page, so you have to declare your strucure using div tag.
In this example, as the page contains 2 parts, there are 2 div to create in the xml, as below.
How each div are organized ?
Each div contains a table with 4 rows and 2 columns.
One row by button and label.
The first column contains buttons, the second contains labels.
How to use buttons ?
Choose your image and choose the function which will be used by clicking on the picture using the "onclick" tag.
Each div contains a table with 4 rows and 2 columns.
One row by button and label.
The first column contains buttons, the second contains labels.
How to use buttons ?
Choose your image and choose the function which will be used by clicking on the picture using the "onclick" tag.
c) How to manage functions in vbs file ?
Add an action for a button
Create a function with the same name as in the "onClick" field of the button.
For an example, as you can see above, the button shutdown use the function "Shutdown" (onclick="Shutdown").
The Shutdown function is below :
How to add an action when the page open ?
If you want to load a function when the page loads, you have to add an initialization step.
For an example, I have created a function "Battery_Check" which checks the battery status and displays different button and text depending of the status.
To launch it when the page load I have add the below initialization in the xml file.
How to get the script ?
Enregistrer un commentaire